/* ============================================================
   NIVORA v2 — Tokens
   ------------------------------------------------------------
   Paleta INTOCABLE: azul #5752F2 · marfil #F8F6F4 · tinta #0B0B0D
   · negro de marca #171717. Todo lo demás es una mezcla de estos
   mismos colores (opacidad o color-mix), nunca un color nuevo.

   El módulo de la página es la PLACA (--cell): el mismo tamaño
   que usa el mosaico WebGL. main.js lo lee de aquí, así que la
   retícula del fondo y la del texto son la misma.
   ============================================================ */

:root {
  /* ── Color: marca ─────────────────────────────────────── */
  --blue:        #5752F2;
  --ivory:       #F8F6F4;
  --ink:         #0B0B0D;
  --black-brand: #171717;

  /* Derivados de accesibilidad heredados de la v1 (medidos):
     azul de marca sobre tinta = 3.65:1 → solo texto grande.
     Texto pequeño azul sobre oscuro usa --blue-soft (5.3:1). */
  --blue-soft:   #7C78F6;
  --blue-deep:   #4741D9;

  /* Mezclas de la misma paleta */
  --ink-2:       #131317;   /* cara vacía de placa sobre tinta   */
  --ink-3:       #1C1C22;   /* superficie elevada sobre tinta    */
  --ivory-2:     #EFEBE7;   /* cara vacía de placa sobre marfil  */
  --ivory-3:     #E6E1DC;   /* línea sobre marfil                */

  /* Texto sobre oscuro */
  --on-dark:        var(--ivory);
  --on-dark-muted:  color-mix(in srgb, var(--ivory) 66%, var(--ink));   /* 8.6:1 */
  --on-dark-faint:  color-mix(in srgb, var(--ivory) 50%, var(--ink));   /* ≥4.5:1 */
  --rule-dark:      color-mix(in srgb, var(--ivory) 14%, transparent);

  /* Texto sobre marfil */
  --on-light:       var(--black-brand);
  --on-light-muted: color-mix(in srgb, var(--black-brand) 72%, var(--ivory)); /* 6.9:1 */
  --on-light-faint: color-mix(in srgb, var(--black-brand) 66%, var(--ivory)); /* ≥4.5:1 */
  --control-line:   color-mix(in srgb, var(--black-brand) 55%, transparent);  /* ≥3:1 no textual */
  --rule-light:     color-mix(in srgb, var(--black-brand) 16%, transparent);

  /* Rojo FUNCIONAL heredado de la v1 (no es color de marca):
     solo para errores de formulario. Mismos valores medidos. */
  --danger:       #C4362F;  /* 5.6:1 sobre marfil */
  --danger-dark:  #FF8079;  /* sobre tinta        */

  /* ── Tipografía ──────────────────────────────────────── */
  --font-display: 'Cabinet Grotesk', 'Switzer', system-ui, sans-serif;
  --font-text:    'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida (320 → 1600 px) */
  --fs-micro:  0.8125rem;                                    /* 13 */
  --fs-small:  0.9375rem;                                    /* 15 */
  --fs-body:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16–18 */
  --fs-lead:   clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem);  /* 18–23 */
  --fs-h3:     clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);      /* 20–28 */
  --fs-h2:     clamp(2rem, 1.35rem + 3vw, 4.25rem);          /* 32–68 */
  --fs-statement: clamp(1.875rem, 1.1rem + 3.6vw, 4.75rem);  /* 30–76 */
  /* Palabra-capítulo: es material gráfico, no un titular de lectura */
  --fs-word:   clamp(4rem, 0.6rem + 15.5vw, 15rem);

  --lh-tight:  0.96;
  --lh-head:   1.04;
  --lh-text:   1.55;
  --track-display: -0.035em;
  --track-word:    -0.045em;

  --measure:   62ch;

  /* ── Módulo (placa) y espacio ─────────────────────────── */
  --cell: 9px;                         /* escritorio */
  --gutter: max(16px, calc(var(--cell) * 4));
  --wrap: 1320px;

  --s-1: calc(var(--cell) * 1);
  --s-2: calc(var(--cell) * 2);
  --s-3: calc(var(--cell) * 3);
  --s-4: calc(var(--cell) * 4);
  --s-6: calc(var(--cell) * 6);
  --s-8: calc(var(--cell) * 8);
  --s-12: calc(var(--cell) * 12);
  --s-16: calc(var(--cell) * 16);
  --section-y: clamp(96px, 14vw, 200px);

  /* Geometría de marca */
  --angle: 20.35deg;
  --tan-angle: 0.3709;                 /* tan(20.35°) */
  --radius: 0;                         /* el mundo es de cantos vivos */

  /* ── Movimiento (Emil Kowalski) ───────────────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press:  140ms;   /* feedback de presión            */
  --dur-micro:  200ms;   /* hover, foco, estados           */
  --dur-ui:     260ms;   /* paneles, selector              */
  --dur-reveal: 900ms;   /* titulares (narrativa)          */
  --dur-wave:   1200ms;  /* ola entre escenas (narrativa)  */
  --stagger:    70ms;

  /* ── Capas ────────────────────────────────────────────── */
  --z-field:   0;
  --z-content: 1;
  --z-chrome:  20;
  --z-dock:    30;
  --z-dialog:  40;
  --z-skip:    50;

  /* Breakpoints (documentación; CSS no admite var() en @media):
     600  tablet  · 900  escena horizontal · 1200  amplio */

  color-scheme: dark;
}

/* Placas pequeñas en todos los tamaños: con placas grandes el
   material se lee como pixel art. */
@media (min-width: 600px)  { :root { --cell: 10px; } }
@media (min-width: 1200px) { :root { --cell: 9px; } }
@media (max-width: 599px)  { :root { --cell: 9px; } }