/* ============================================================
   AUTÓMATA · DESIGN TOKENS
   Fuente de verdad del sistema visual. Nada de color literal
   fuera de este archivo.
   Paleta base extraída de platilla_de_colores.jpg:
     #0C3064 (navy) · #E03A63 (carmesí) · #FFFFFF (blanco)
   ============================================================ */

:root {
  /* ---------- 1. RAMPAS DE COLOR ---------- */
  /* Navy: autoridad, infraestructura, confianza institucional */
  --navy-950: #04122A;
  --navy-900: #061B3A;
  --navy-800: #0A2650;
  --navy-700: #0C3064;   /* ★ BASE DE MARCA */
  --navy-600: #123E7E;
  --navy-500: #1B4F9B;
  --navy-400: #4272B8;
  --navy-300: #7B98C4;
  --navy-200: #B4C6DE;
  --navy-100: #D9E2F0;
  --navy-050: #F1F5FA;

  /* Carmesí: acción, urgencia, el "ahora" del negocio */
  --crimson-950: #4E0E20;
  --crimson-900: #7A1631;
  --crimson-800: #9C1F40;
  --crimson-700: #BE2B53;
  --crimson-600: #E03A63;  /* ★ BASE DE MARCA */
  --crimson-500: #E85C7E;
  --crimson-300: #F196AC;
  --crimson-200: #F7C4D0;
  --crimson-050: #FEF2F5;

  /* Neutros derivados (matizados hacia el navy, nunca gris puro) */
  --white:        #FFFFFF;
  --paper:        #FFFFFF;
  --paper-alt:    #F7F9FC;
  --paper-sunken: #EFF3F9;
  --line:         #E3E8F0;
  --line-strong:  #CBD5E5;

  /* ---------- 2. ROLES SEMÁNTICOS ---------- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-alt);
  --bg-invert:     var(--navy-700);
  --bg-invert-deep:var(--navy-900);

  --ink:           var(--navy-700);   /* 12.9:1 sobre blanco */
  --ink-strong:    var(--navy-900);
  --ink-muted:     #4A5B77;           /*  6.8:1 sobre blanco */
  --ink-subtle:    #63738A;           /*  4.8:1 sobre blanco — antes 4.24, no llegaba a AA */
  --ink-invert:    var(--white);      /* 12.9:1 sobre navy-700 */
  --ink-invert-muted: var(--navy-200);/*  8.1:1 sobre navy-700 */

  --accent:        var(--crimson-600);   /* rellenos, bordes y texto grande */
  --accent-hover:  var(--crimson-700);
  --accent-press:  var(--crimson-800);
  --accent-soft:   var(--crimson-050);
  --accent-line:   var(--crimson-200);

  /* El carmesí de marca da 4.24:1 sobre blanco: suficiente para texto grande
     (≥3:1) y para bordes o rellenos, pero NO llega al 4.5:1 que exige AA en
     texto normal. Para textos pequeños en carmesí se usa este tono, medio paso
     más oscuro (4.58:1) y visualmente indistinguible. */
  --accent-ink:    #D93459;

  --focus-ring:    var(--crimson-600);
  --selection-bg:  var(--navy-100);

  /* Estados */
  --ok:    #12674A;
  --warn:  #8A5A08;
  --info:  var(--navy-600);

  /* ⚠ REGLA DE CONTRASTE DEL SISTEMA
     carmesí #E03A63 sobre navy #0C3064 = 3.05:1 → solo texto grande; nunca
     texto corrido. Sobre superficie oscura el acento se expresa con
     --accent-on-dark.
     Sobre superficie oscura el acento se expresa con --accent-on-dark. */
  --accent-on-dark: #FF6B8A;          /*  6.2:1 sobre navy-700 */

  /* ---------- 3. TIPOGRAFÍA ---------- */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, monospace;

  /* Escala fluida — ratio 1.25 en móvil, 1.333 en desktop */
  --fs-micro:  clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --fs-sm:     clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-body:   clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);
  --fs-lead:   clamp(1.0625rem, 1rem + 0.35vw,   1.25rem);
  --fs-h4:     clamp(1.125rem, 1.05rem + 0.4vw,  1.375rem);
  --fs-h3:     clamp(1.375rem, 1.2rem + 0.8vw,   1.875rem);
  --fs-h2:     clamp(1.75rem,  1.4rem + 1.6vw,   2.75rem);
  --fs-h1:     clamp(2.25rem,  1.6rem + 2.9vw,   4rem);
  --fs-display:clamp(2.75rem,  1.7rem + 4.6vw,   5.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.22;
  --lh-body:  1.65;
  --lh-loose: 1.75;

  --tracking-display: -0.03em;
  --tracking-head:    -0.018em;
  --tracking-body:     0em;
  --tracking-caps:     0.09em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --measure: 68ch;        /* ancho óptimo de lectura */
  --measure-tight: 46ch;

  /* ---------- 4. ESPACIADO (base 4px) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 2.5rem;   --sp-8: 3rem;     --sp-9: 4rem;
  --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h:  72px;      /* alto de la cabecera fija */
  --adaptive-bar-h: 64px; /* alto de la barra «Soy de» (chip + relleno + bordes); el hero lo descuenta para que la barra cierre la primera pantalla */
  --maxw:      1240px;
  --maxw-narrow: 780px;

  /* ---------- 5. FORMA ---------- */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* Sombras tintadas con navy — jamás negro puro */
  --sh-xs: 0 1px 2px rgba(12,48,100,.06);
  --sh-sm: 0 2px 6px rgba(12,48,100,.07), 0 1px 2px rgba(12,48,100,.05);
  --sh-md: 0 8px 24px rgba(12,48,100,.09), 0 2px 6px rgba(12,48,100,.05);
  --sh-lg: 0 20px 48px rgba(12,48,100,.13), 0 4px 12px rgba(12,48,100,.06);
  --sh-accent: 0 8px 24px rgba(224,58,99,.26);

  /* ---------- 6. MOVIMIENTO ---------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-scene: 700ms;
  --ease-out:  cubic-bezier(.22,.68,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.32,.5,1);

  /* ---------- 7. CAPAS ---------- */
  --z-base: 0;  --z-raised: 10;  --z-sticky: 100;
  --z-header: 500; --z-overlay: 800; --z-modal: 900; --z-toast: 1000;
}

/* Densidad compacta opcional (dashboards / tablas del perfil) */
[data-density="compact"] {
  --section-y: clamp(2rem, 1rem + 3vw, 3.5rem);
  --lh-body: 1.5;
}