/* ==========================================================================
   CFOˣ — design tokens (única fuente de verdad)
   --------------------------------------------------------------------------
   Todas las páginas del sitio cargan este archivo ANTES de su <style> propio
   y NO redefinen :root. Los nombres canónicos son los de CLAUDE.md §2; los
   aliases de abajo existen para que el CSS heredado (home, manual, ediciones
   del drip) resuelva a los mismos valores sin reescribirlo.

   Regla de color: neutro ~92%, cobalto ~7%, terracota ~1% (sólo la ˣ, la
   franja del caso fuente y una o dos marcas de "decisión documentada").
   Crema sólo en la banda del hero y en callouts de advertencia.

   Mantenimiento: scripts/sync_design_tokens.py inserta el <link> y borra los
   :root inline; `--check` falla si alguna página quedó fuera.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Color: canónicos ------------------------------------------------ */
  --cobalt:        #1B4486;   /* primario, ~7% del lienzo */
  --cobalt-deep:   #133265;   /* hover / activo */
  --cobalt-bright: #2A5BAB;   /* botones secundarios */
  --terra:         #C04A2E;   /* acento, ~1% */
  --terra-light:   #D86A52;   /* acento sobre fondos oscuros */
  --ink:           #0F172A;   /* texto primario */
  --ink-soft:      #1F2937;   /* cuerpo */
  --muted:         #6B7280;   /* secundario */
  --muted-light:   #9CA3AF;   /* terciario, pies */
  --line:          #E5E7EB;   /* bordes, divisores */
  --soft:          #F3F4F6;   /* fondos de sección */
  --softer:        #F9FAFB;   /* fondos de tarjeta */
  --white:         #FFFFFF;
  --cream:         #FAF8F4;   /* callouts de advertencia; texto sobre cobalto */
  --cream-band:    #F4ECDA;   /* banda del hero: el único fondo crema del sitio */
  --cream-deep:    #E8DCC4;   /* offsets arquitectónicos dentro del hero */
  --gold:          #B89B5E;   /* acento de advertencia */

  /* Semáforo operativo (sólo contextos de diagnóstico) */
  --sem-rojo:      #B42318;
  --sem-ambar:     #B54708;
  --sem-verde:     #067647;

  /* ---- Tipografía ------------------------------------------------------ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Escala tipográfica (desktop; los h1 largos en Fraunces no pasan de 64px) */
  --fs-hero:    64px;
  --fs-h1:      52px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-lede:    20px;
  --fs-body:    16px;
  --fs-small:   13.5px;
  --fs-mono:    11.5px;

  --lh-tight:   1.02;
  --lh-snug:    1.25;
  --lh-body:    1.6;

  --track-mono: 0.12em;        /* eyebrows y metadata en mayúsculas */
  --track-display: -0.028em;   /* títulos en Fraunces */

  /* ---- Espaciado (base 4) --------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  120px;
  --section-y: var(--sp-10);
  --container: 1280px;
  --container-narrow: 760px;
  --gutter: 40px;
  --gutter-mobile: 24px;

  /* ---- Radios ----------------------------------------------------------- */
  --r-0:    0;          /* bloques editoriales: sin radio */
  --r-sm:   4px;        /* inputs, tags */
  --r-md:   8px;        /* tarjetas */
  --r-pill: 999px;      /* botones y buscador */

  /* ---- Sombras ---------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 16px 40px rgba(15, 23, 42, 0.10);
  --shadow-pop:  0 20px 60px rgba(15, 23, 42, 0.15);
  --ring:        0 0 0 3px rgba(27, 68, 134, 0.22);

  /* ---- Transiciones ----------------------------------------------------- */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;

  /* ====================================================================
     ALIASES — nombres heredados. No agregar nuevos usos; están para que el
     CSS existente resuelva a los valores canónicos de arriba.
     ==================================================================== */

  /* Home (index.html) y /manual/ */
  --cobalto:       var(--cobalt);
  --cobalto-deep:  var(--cobalt-deep);
  --cobalto-soft:  var(--cobalt-bright);
  --terracota:     var(--terra);
  --paper:         var(--white);
  --cream-soft:    var(--softer);
  --rule:          var(--line);
  --muted-soft:    var(--muted-light);
  --display:       var(--font-display);
  --body:          var(--font-body);
  --mono:          var(--font-mono);

  /* Ediciones del drip (build/editions/template.html) y /despachos/ */
  --crema:         var(--white);
  --crema-2:       var(--soft);
  --tinta:         var(--ink);
  --tinta-2:       var(--muted);
  --cobalto-2:     var(--cobalt-bright);
  --terracota-2:   var(--terra-light);
  --linea:         var(--line);
  --blanco:        var(--softer);
  --serif:         var(--font-display);
  --sans:          var(--font-body);
}