/* ============================================================
   KVTOOLS DESIGN SYSTEM 2026 — variables.css
   Tema: Light (fondo blanco, marca KV Blue + KV Orange)
   ============================================================ */

:root {
  /* === COLORES DE MARCA === */
  --kv-blue:          #0055B8;   /* KV Blue — primario, links, botones */
  --kv-blue-dark:     #003D87;   /* Hover/active de azul */
  --kv-blue-light:    #2E7DD1;   /* Azul claro */
  --kv-blue-50:       #EFF6FF;   /* Fondo tint azul */
  --kv-blue-100:      #DBEAFE;   /* Borde / hover tint */
  --kv-blue-glow:     rgba(0, 85, 184, 0.12);

  --kv-orange:        #FF7300;   /* KV Orange — CTA, accento, botones acción */
  --kv-orange-dark:   #E56500;
  --kv-orange-light:  #FF9A3C;
  --kv-orange-50:     #FFF7ED;
  --kv-orange-glow:   rgba(255, 115, 0, 0.15);

  /* === NEUTRALES (base blanca) === */
  --kv-bg:            #FFFFFF;   /* Fondo de páginas y cards */
  --kv-bg-soft:       #F8F9FC;   /* Fondo de sections alternas */
  --kv-bg-muted:      #F1F5F9;   /* Inputs, chips, fondos muted */
  --kv-border:        #E2E8F0;   /* Bordes generales */
  --kv-border-hover:  #CBD5E1;   /* Hover de bordes */
  --kv-border-focus:  var(--kv-blue); /* Focus ring */

  /* === TEXTO === */
  --kv-text:          #0A192F;   /* Texto principal */
  --kv-text-secondary:#475569;   /* Texto secundario / descripciones */
  --kv-text-muted:    #94A3B8;   /* Texto muted / placeholders */
  --kv-text-disabled: #CBD5E1;

  /* === SEMÁNTICOS === */
  --kv-success:       #16A34A;
  --kv-success-bg:    #F0FDF4;
  --kv-warning:       #D97706;
  --kv-warning-bg:    #FFFBEB;
  --kv-danger:        #DC2626;
  --kv-danger-bg:     #FEF2F2;
  --kv-info:          #0284C7;
  --kv-info-bg:       #F0F9FF;

  /* === TIPOGRAFÍA === */
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* === TAMAÑOS DE FUENTE === */
  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* === ESPACIADO === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === BORDER RADIUS === */
  --radius-sm:   0.375rem;  /* 6px  — inputs, badges */
  --radius-md:   0.625rem;  /* 10px — botones, tags */
  --radius-lg:   0.875rem;  /* 14px — cards */
  --radius-xl:   1.125rem;  /* 18px — cards grandes */
  --radius-2xl:  1.5rem;    /* 24px — containers hero */
  --radius-full: 9999px;    /* Pills y circles */

  /* === SOMBRAS === */
  --shadow-xs:   0 1px 2px rgba(0, 85, 184, 0.06);
  --shadow-sm:   0 2px 8px rgba(0, 85, 184, 0.08);
  --shadow-md:   0 4px 16px rgba(0, 85, 184, 0.10);
  --shadow-lg:   0 8px 32px rgba(0, 85, 184, 0.12);
  --shadow-xl:   0 16px 48px rgba(0, 85, 184, 0.15);
  --shadow-orange: 0 8px 24px rgba(255, 115, 0, 0.25);
  --shadow-orange-hover: 0 12px 36px rgba(255, 115, 0, 0.35);

  /* === TRANSICIONES === */
  --transition-fast:   0.15s ease;
  --transition-base:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX SCALE (CSS-H02) === */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          500;
  --z-modal-backdrop: 900;
  --z-modal:          950;
  --z-popover:        1000;
  --z-tooltip:        1100;

  /* === HEADING SIZES (CSS-M06: Standardized hierarchy) === */
  --heading-1: clamp(1.5rem, 3vw, 2.25rem);
  --heading-2: clamp(1.25rem, 2.5vw, 1.75rem);
  --heading-3: clamp(1.1rem, 2vw, 1.375rem);
  --heading-4: clamp(1rem, 1.5vw, 1.125rem);

  /* === LAYOUT === */
  --container-max: 1280px;
  --nav-height:    68px;
  --sidebar-width: 260px;
  --content-max:   820px;

  /* === GLASSMORPHISM (navbar y modales) === */
  --glass-bg:         rgba(255, 255, 255, 0.82);
  --glass-hover:      rgba(255, 255, 255, 0.95);
  --glass-blur:       blur(24px);
  --glass-border:     rgba(255, 255, 255, 0.6);

  /* === ALIASES (compatibilidad con CSS existente) === */
  --primary-color: var(--kv-blue);
  --accent: var(--kv-blue);
  --accent-hover: var(--kv-blue-light);
  --accent-glow: var(--kv-blue-glow);
  --accent-soft: rgba(0, 85, 184, 0.06);
  --cta: var(--kv-orange);
  --cta-hover: var(--kv-orange-light);
  --cta-glow: var(--kv-orange-glow);
  --cta-soft: rgba(255, 115, 0, 0.06);
  --danger: var(--kv-danger);
  --success: var(--kv-success);
  --warning: var(--kv-warning);
  --info: var(--kv-info);
  --bg-primary: var(--kv-bg-soft);
  --bg-secondary: var(--kv-bg);
  --bg-card: var(--kv-bg);
  --bg-card-hover: var(--kv-bg);
  --bg-input: var(--kv-bg);
  --bg-surface: var(--kv-bg);
  --bg-sidebar: #0A192F;
  --text-primary: var(--kv-text);
  --text-secondary: var(--kv-text-secondary);
  --text-muted: var(--kv-text-muted);
  --text-on-dark: #f8fafc;
  --text-on-dark-secondary: rgba(248,250,252,0.70);
  --text-on-dark-muted: rgba(248,250,252,0.40);
  --border: var(--kv-border);
  --border-focus: var(--kv-blue);
  --glass-border-light: rgba(255,255,255,0.80);
  --glass-border-dark: rgba(10,25,47,0.06);
  --shadow: var(--shadow-sm);
  --shadow-blue: var(--shadow-lg);
  --shadow-orange: 0 8px 32px rgba(255,115,0,0.20);
  --skeleton-base: rgba(10,25,47,0.04);
  --skeleton-shine: rgba(10,25,47,0.08);
  --scrollbar-thumb: #cbd5e1;
  --radius: 1rem;
  --blur: var(--glass-blur);
  --blur-heavy: blur(40px);
  --transition: var(--transition-base);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --kv-dark: #0A192F;
  --kv-light-blue: #E8F0FE;
}

/* CSS-H03: Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --kv-bg:            #0F172A;
    --kv-bg-soft:       #1E293B;
    --kv-bg-muted:      #334155;
    --kv-border:        #334155;
    --kv-border-hover:  #475569;
    --kv-text:          #F1F5F9;
    --kv-text-secondary:#CBD5E1;
    --kv-text-muted:    #94A3B8;
    --kv-text-disabled: #475569;
    --kv-success-bg:    #052E16;
    --kv-warning-bg:    #422006;
    --kv-danger-bg:     #450A0A;
    --kv-info-bg:       #0C4A6E;
    --bg-primary:       #1E293B;
    --bg-secondary:     #0F172A;
    --bg-card:          #1E293B;
    --bg-card-hover:    #334155;
    --bg-input:         #1E293B;
    --bg-surface:       #1E293B;
    --text-primary:     #F1F5F9;
    --text-secondary:   #CBD5E1;
    --text-muted:       #94A3B8;
    --border:           #334155;
    --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-bg:         rgba(15, 23, 42, 0.85);
    --glass-hover:      rgba(30, 41, 59, 0.95);
    --glass-border:     rgba(51, 65, 85, 0.6);
    --skeleton-base:    rgba(241, 245, 249, 0.04);
    --skeleton-shine:   rgba(241, 245, 249, 0.08);
    --scrollbar-thumb:  #475569;
  }
}