/* ============================================================================
   tokens.css — el sistema de diseño de DeepReckon, en un solo sitio.

   Por qué existe
   --------------
   Hasta ahora el único <link rel=stylesheet> del sitio era /fonts.css. Todo lo
   demás era CSS embebido por página, así que no había ningún lugar donde pudiera
   vivir un token. La consecuencia, medida: 70 tamaños de fuente literales, 26
   radios y 29 sombras repartidos entre siete páginas, y nueve variables con el
   MISMO nombre y valores distintos.

   La peor de esas nueve era `--disp`, que significaba lo contrario según el
   archivo: la fuente de texto en index/seguridad/privacy/terms/404, y la de
   display en altair/agenda. Cualquier hoja compartida habría roto una de las dos.
   Por eso las fuentes se renombran a algo que no puede malinterpretarse:
   --font-body, --font-display, --font-mono.

   Cómo se usa
   -----------
   Se carga antes del <style> embebido de cada página, de modo que una página
   puede seguir sobreescribiendo un token si de verdad lo necesita. Cada
   sobreescritura que quede pendiente de reconciliar va marcada con DEUDA.

   Las escalas de más abajo (espaciado, radios, elevación, tipografía, movimiento)
   están DEFINIDAS pero todavía no aplicadas: unificar los 70 tamaños en 7 pasos
   cambia píxeles a propósito, y eso es una decisión de dirección de arte que se
   revisa aparte. Este archivo es el sitio donde vivirán.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- tipografía
     Nombres semánticos: el rol está en el nombre, no en la abreviatura. */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------------------- color
     Superficies. --space es el fondo base; --panel y --panel2 son las dos
     elevaciones de tarjeta que el sitio usa de verdad. */
  --space: #05070D;
  --panel: #0B0F17;
  --panel2: #0E1420;

  /* Tinta. Los ratios de aquí están CALCULADOS con la fórmula de luminancia
     relativa de WCAG, compuestos sobre cada superficie real — no estimados.
     La primera versión de este archivo afirmaba 11,4:1 y 9,2:1 y las dos cifras
     eran falsas: se habían calculado como si el fondo fuera blanco. Un sistema de
     diseño que certifica por escrito algo que no cumple es peor que no decir nada,
     porque quien lo lea cerrará el hallazgo sin medir. tools/check.mjs verifica
     ahora estas cifras en cada push.
       --mut   sobre --space 7,74:1 · --panel 7,60:1 · --panel2 7,45:1  → AAA ✅
       --mut2  sobre --space 8,18:1 · --panel 8,02:1 · --panel2 7,84:1  → AAA ✅
     (--mut2 estaba en .58, que da 6,13:1 y NO llega a AAA; subido a .68.) */
  --ink: #EAF0F8;
  --mut: rgba(234, 240, 248, .66);
  --mut2: rgba(234, 240, 248, .68);

  /* Marca. --accent es el único azul de acción; --accent2 es su variante clara
     para texto sobre superficies teñidas. */
  --accent: #5B9DFF;
  --accent2: #9CC4FF;

  /* Semánticos. Separados del acento a propósito: un color de estado no debe
     competir con el color de acción. */
  --ok: #4ADE80;
  --err: #FF6B75;
  --warn: #F6B24B;

  /* Líneas y separadores. */
  --line: rgba(255, 255, 255, .11);
  --line2: rgba(91, 157, 255, .24);

  /* ------------------------------------------------------------------ layout */
  --gut: clamp(20px, 5vw, 72px);
  --measure: 64ch;

  /* ============================ ESCALAS — definidas, aún no aplicadas ======= */

  /* Espaciado sobre base 4. Hoy hay 63 valores de padding-top con 47 fuera de
     cualquier retícula; estos 10 pasos los cubren todos. */
  --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: 128px;
  /* Ritmo de sección, fluido. */
  --sp-section: clamp(48px, 8vw, 112px);

  /* Tipografía: 7 pasos con su rol. Sustituye a los 70 literales actuales.
     El suelo es 12px — hoy se usan 10, 10,5, 11 y 11,5, por debajo del mínimo
     de 11pt de las guías de iOS y difíciles de leer en una pantalla de 375px. */
  --fs-label: 12px;                        /* etiquetas, kickers, datos en mono */
  --fs-sm: 14px;                           /* metadatos, pies */
  --fs-base: clamp(15px, 1.1vw, 17px);     /* texto corrido */
  --fs-lg: clamp(18px, 1.4vw, 21px);       /* entradilla */
  --fs-h3: clamp(20px, 1.8vw, 26px);
  --fs-h2: clamp(28px, 3.4vw, 46px);
  --fs-h1: clamp(34px, 5.6vw, 72px);

  /* Radios: 4 pasos. Hoy hay 26 valores literales. */
  --r-sm: 8px;                             /* controles, chips */
  --r-md: 12px;                            /* inputs, botones */
  --r-lg: 20px;                            /* tarjetas, paneles */
  --r-pill: 999px;                         /* pastillas */

  /* Elevación: 3 niveles. Hoy hay 29 sombras distintas. */
  --e-1: 0 1px 2px rgba(0, 0, 0, .35);
  --e-2: 0 14px 44px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  --e-3: 0 28px 64px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Movimiento: 4 duraciones y 3 curvas, cada una con un papel declarado. */
  --dur-fast: 120ms;                       /* respuesta al toque */
  --dur-base: 250ms;                       /* cambio de estado */
  --dur-slow: 420ms;                       /* entrada de un elemento */
  --dur-scene: 850ms;                      /* revelación de sección */
  --ease: cubic-bezier(.16, 1, .3, 1);     /* salida, lo habitual */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-linear: linear;
}