/* ============================================================
   INDAGO Labs — Design Token System
   variables.css — La fuente de verdad del sistema de diseño
   Inspiración: Deloitte US | Executive Precision
   ============================================================ */

:root {

  /* ============================================================
     COLORES — Regla 60-30-10
     60% → Blancos y grises claros (transparencia, claridad)
     30% → Navy y azul (autoridad, tecnología)
     10% → Accent blue + amber urgencia (conversión)
     ============================================================ */

  /* FONDOS */
  --bg-white:       #FFFFFF;
  --bg-light:       #F5F7FA;
  --bg-card:        #FFFFFF;
  --bg-dark:        #000000;        /* Footer — negro puro */
  --bg-hero:        #001233;        /* Hero overlay base */
  --bg-cta:         #002B80;        /* Sección testimonios/navy */
  --bg-input:       #F8FAFC;        /* Fondos de inputs */

  /* AZUL NAVY — Autoridad, expertise */
  --navy-deep:      #001233;
  --navy-primary:   #002B80;
  --navy-mid:       #003399;

  /* AZUL PROFESIONAL — Signature color de INDAGO */
  --blue-signature: #0043CE;        /* Left-border de cards — IBM Blue, autoridad corporativa */
  --blue-primary:   #0043CE;        /* CTA buttons, links activos */
  --blue-hover:     #003399;        /* Hover state — navy más profundo */
  --blue-light:     #EBF2FF;        /* Fondos de badges y tags */
  --blue-mid:       #2D6FD4;        /* Accent secundario — contenido, no eléctrico */
  --blue-pale:      #F0F5FF;        /* Fondos muy sutiles */

  /* TEAL — Precisión forense (badges/tags moderado) */
  --teal-accent:    #0891B2;
  --teal-light:     #E0F5FA;

  /* VERDE — Éxito, confirmación, seguridad */
  --green-success:  #059669;
  --green-light:    #D1FAE5;
  --green-mid:      #10B981;

  /* NARANJA CTA — Botones de acción principal */
  --orange-cta:        #F97316;        /* Naranja brillante — botones primarios */
  --orange-cta-hover:  #EA580C;        /* Hover — naranja quemado */
  --orange-cta-shadow: rgba(249,115,22,0.35);
  --gradient-cta-btn:  linear-gradient(135deg, #FB923C 0%, #F97316 100%);
  --gradient-cta-btn-hover: linear-gradient(135deg, #F97316 0%, #EA580C 100%);

  /* ÁMBAR — Solo urgencia e incidentes */
  --amber-urgent:   #D97706;
  --amber-light:    #FEF3C7;
  --amber-mid:      #F59E0B;

  /* ROJO — Solo errores */
  --red-error:      #DC2626;
  --red-light:      #FEE2E2;

  /* TEXTO — Jerarquía clara */
  --text-primary:   #0A0A0A;        /* Titulares — casi negro */
  --text-body:      #1E293B;        /* Párrafos principales */
  --text-secondary: #475569;        /* Descripciones */
  --text-muted:     #64748B;        /* Metadata, captions */
  --text-placeholder: #94A3B8;      /* Placeholders */
  --text-on-dark:   #FFFFFF;        /* Texto sobre fondos navy/dark */
  --text-on-dark-2: #94A3B8;        /* Texto secundario sobre oscuro */
  --text-link:      #0043CE;        /* Links */
  --text-link-hover: #003399;

  /* BORDES */
  --border-light:   #E8EEF4;        /* Bordes sutiles */
  --border-medium:  #CBD5E1;        /* Bordes de cards */
  --border-strong:  #94A3B8;        /* Bordes visibles */
  --border-focus:   #0043CE;        /* Focus/active */
  --border-card:    5px solid var(--blue-signature); /* LEFT BORDER DE CARDS */

  /* DIVISORES DE SECCIÓN (como Deloitte — barras planas de color) */
  --divider-height: 4px;
  --divider-blue:   var(--blue-signature);
  --divider-navy:   var(--navy-deep);
  --divider-teal:   var(--teal-accent);

  /* SOMBRAS PROFESIONALES */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:  0 2px 8px rgba(0,18,51,0.07), 0 1px 3px rgba(0,18,51,0.04);
  --shadow-card-hover: 0 16px 40px rgba(0,18,51,0.13), 0 4px 12px rgba(0,18,51,0.07);
  --shadow-nav:   0 1px 0px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-button: 0 4px 14px rgba(0,67,206,0.30);
  --shadow-button-hover: 0 6px 20px rgba(0,67,206,0.40);
  --shadow-input-focus: 0 0 0 3px rgba(0,67,206,0.14);
  --shadow-modal: 0 25px 60px rgba(0,0,0,0.20);

  /* GRADIENTES */
  --gradient-hero:     linear-gradient(135deg, rgba(0,18,51,0.88) 0%, rgba(0,43,128,0.72) 50%, rgba(0,18,51,0.80) 100%);
  --gradient-hero-2:   linear-gradient(to bottom, rgba(0,18,51,0.70) 0%, rgba(0,18,51,0.90) 100%);
  --gradient-button:   linear-gradient(135deg, #0043CE 0%, #003399 100%);
  --gradient-button-hover: linear-gradient(135deg, #003399 0%, #002B80 100%);
  --gradient-cta-section: linear-gradient(135deg, #002B80 0%, #001233 100%);
  --gradient-footer:   linear-gradient(180deg, #0A0A0A 0%, #000000 100%);
  --gradient-card-top: linear-gradient(to bottom, #F8FAFC 0%, #FFFFFF 100%);
  --gradient-divider:  linear-gradient(90deg, var(--blue-signature) 0%, var(--blue-mid) 100%);

  /* ============================================================
     TIPOGRAFÍA
     ============================================================ */
  --font-display: 'Plus Jakarta Sans', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ESCALA TIPOGRÁFICA — Escalonada y fluida */
  --text-xs:    0.75rem;      /* 12px */
  --text-sm:    0.875rem;     /* 14px */
  --text-base:  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:   2.75rem;      /* 44px */
  --text-hero:  clamp(2.5rem, 5.5vw, 4.25rem);  /* Hero — fluid */
  --text-stat:  clamp(2.25rem, 4vw, 3.75rem);    /* Stats — fluid */

  /* PESOS */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* LINE HEIGHTS */
  --leading-none:   1.0;
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* LETTER SPACING */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ============================================================
     ESPACIADO — Sistema 4px base
     ============================================================ */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-7:   1.75rem;    /* 28px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* PADDING DE SECCIONES — Deloitte usa 60-100px vertical */
  --section-padding-y:  clamp(5rem, 9vw, 8rem);
  --section-padding-x:  clamp(1.25rem, 4vw, 2rem);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --grid-gap:         1.5rem;

  /* ============================================================
     BORDES REDONDEADOS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 100px;  /* Botones pill — como Deloitte */
  --radius-full: 9999px;

  /* ============================================================
     TRANSICIONES Y ANIMACIONES
     ============================================================ */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* TRANSICIÓN BASE — Usada en la mayoría de hovers */
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-card: transform var(--duration-slow) var(--ease-out),
                     box-shadow var(--duration-slow) var(--ease-out),
                     border-color var(--duration-base) ease;

  /* ============================================================
     Z-INDEX — Sistema ordenado
     ============================================================ */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}