/* Wayfold v2 — tokens
 *
 * Paso 4 de la skill `web-design-system`: "pon los mismos valores en el código: variables CSS,
 * el tema de Tailwind o los tokens del proyecto, para que las páginas usen nombres, nunca valores."
 * Este archivo es esa mitad. DESIGN.md decide; aquí se escribe una vez y nadie vuelve a teclear un hex.
 *
 * Cópialo a `sites/wayfold/tokens.css` y enlázalo antes de cualquier otra hoja.
 * Si un valor de aquí no coincide con DESIGN.md, gana DESIGN.md y este archivo está mal.
 *
 * Comprobado con: node bin/contrast.mjs design/wayfold-v2/tokens.css
 * Las afirmaciones @contrast de abajo son las del DESIGN.md §2, medidas, no estimadas.
 *
 * ORGANIZACIÓN, y por qué importa aquí:
 *   1. primitivas de DÍA   (paper / petrol / moss / signal)
 *   2. primitivas de NOCHE (night / cream / mint / signal-3xx)
 *   3. ROLES semánticos    (--ground, --ink, --line-done…) que es lo ÚNICO que usa el sitio
 * Los dos juegos de primitivas existen a la vez y con nombres distintos a propósito: así
 * `bin/contrast.mjs` puede medir las 21 parejas de los dos temas. Si el modo oscuro se hiciera
 * redefiniendo `--paper-050`, la herramienta leería el último valor y daría 1:1 en el claro.
 *
 * El mundo de Wayfold es DIURNO: el claro es el canónico y el que se captura para QA.
 * El oscuro existe porque el navegador lo pide, y es el mismo papel de noche, no otra marca.
 */

:root {
  color-scheme: light dark;

  /* ════════════════════════════════ 1. DÍA ════════════════════════════════ */

  /* ------------------------------------------------- Papel — el suelo de la página */
  --paper-050: #FCF8F0; /* fondo de página. crema cálido, nunca blanco */
  --paper-100: #F5EEDF; /* banda alternativa, tarjetas de estación, campo de formulario */
  --paper-200: #E7DDC8; /* filetes de 1px y la retícula de puntos. DECORATIVO, sin significado */

  /* ------------------------------------- Petróleo — la tinta, y el suelo de la banda oscura */
  --petrol-900: #0A2A26; /* la tinta: titulares y cuerpo sobre crema */
  --petrol-800: #11423A; /* superficies elevadas dentro de la banda oscura */
  --petrol-600: #1C6253; /* la LÍNEA: trazo de ruta terminada. También el enlace de texto */
  --petrol-400: #5B9789; /* solo no-texto: estaciones sin empezar, filetes sobre oscuro */

  /* ------------------------------------------------------- Musgo — el texto de segundo plano */
  --moss-600: #4B5C56; /* pies de figura, notas ilustrativas, etiquetas secundarias sobre crema */

  /* ------------------------ Señal — naranja de obra: lo que se mueve hoy, y la acción única */
  --signal-700: #8F3307; /* hover/active del CTA */
  --signal-600: #A93C09; /* TEXTO de señal sobre crema, y el relleno del CTA. 5.9:1 con el papel */
  --signal-500: #D9541A; /* SOLO NO-TEXTO: el trazo de la línea en curso. 3.8:1, no llega a AA */

  /* ════════════════════════════════ 2. NOCHE ═══════════════════════════════ */

  --night-950: #061D1A; /* suelo de página en oscuro, y de la banda oscura del tema claro */
  --night-900: #0A2A26; /* superficie elevada */
  --night-700: #17403A; /* filetes y retícula de puntos. DECORATIVO, igual que paper-200 */
  --cream-050: #F4EEE2; /* la tinta, de noche */
  --cream-300: #B9C4BE; /* texto secundario, de noche */
  --mint-400: #7FC3AF;  /* la línea terminada, de noche */
  --mint-600: #4E8071;  /* solo no-texto, de noche */
  --signal-300: #F3A06A; /* texto de señal y relleno del CTA, de noche */
  --signal-400: #E8763A; /* solo no-texto: trazo de la línea en curso, de noche */

  /* ──────────────────────────── las 21 parejas, medidas ──────────────────────────── */
  /* @contrast petrol-900 on paper-050 >= 7      la tinta sobre el papel: AAA de cuerpo
   * @contrast petrol-900 on paper-100 >= 7      la tinta sobre la banda alternativa: AAA
   * @contrast moss-600 on paper-050 >= 4.5      pies de figura y notas ilustrativas
   * @contrast moss-600 on paper-100 >= 4.5      lo mismo sobre la banda alternativa
   * @contrast petrol-600 on paper-050 >= 4.5    enlaces y etiquetas de línea terminada
   * @contrast signal-600 on paper-050 >= 4.5    texto de señal
   * @contrast paper-050 on signal-600 >= 4.5    la etiqueta del CTA sobre el relleno naranja
   * @contrast paper-050 on signal-700 >= 7      la etiqueta del CTA en hover: sube a AAA
   * @contrast paper-050 on signal-500 < 4.5     por eso signal-500 NO es el relleno del CTA
   *                                             ni lleva texto nunca: se queda en el trazo
   * @contrast paper-050 on petrol-900 >= 7      texto sobre la banda oscura del tema claro: AAA
   * @contrast paper-050 on petrol-800 >= 7      texto sobre su superficie elevada: AAA
   * @contrast petrol-400 on petrol-900 >= 3     no-texto sobre la banda oscura
   * @contrast petrol-400 on paper-050 >= 3      no-texto: el trazo de ruta sin empezar sobre papel
   *                                             (3.19:1 — justo. Si alguien aclara petrol-400,
   *                                             el trazo discontinuo deja de cumplir)
   * @contrast signal-500 on paper-050 >= 3      no-texto: el trazo de la línea en curso
   * @contrast paper-200 on paper-050 < 3        DECORATIVO a propósito: la retícula de puntos
   *                                             no debe competir con un filete con significado
   * @contrast cream-050 on night-950 >= 7       la tinta de noche: AAA
   * @contrast cream-050 on night-900 >= 7       lo mismo sobre la superficie elevada
   * @contrast cream-300 on night-950 >= 4.5     texto secundario de noche
   * @contrast mint-400 on night-950 >= 4.5      la línea terminada, de noche
   * @contrast mint-600 on night-950 >= 3        no-texto de noche
   * @contrast signal-300 on night-950 >= 4.5    texto de señal de noche
   * @contrast night-950 on signal-300 >= 4.5    la etiqueta del CTA de noche: tinta sobre naranja
   * @contrast signal-400 on night-950 >= 3      no-texto: el trazo en curso, de noche
   * @contrast night-700 on night-950 < 3        DECORATIVO a propósito, igual que paper-200
   */

  /* ════════════════════════════ 3. ROLES ═══════════════════════════════════ */
  /* El sitio usa SOLO estos nombres. Cambiar de tema es reasignar estas 12 líneas. */

  --ground: var(--paper-050);
  --surface: var(--paper-100);
  --rule: var(--paper-200);          /* filete de 1px y retícula de puntos */
  --ink: var(--petrol-900);
  --ink-2: var(--moss-600);          /* secundario */
  --line-done: var(--petrol-600);    /* trazo de ruta terminada, y enlace de texto */
  --line-now: var(--signal-500);     /* trazo de ruta en curso. NO-TEXTO */
  --line-todo: var(--petrol-400);    /* trazo y estación sin empezar. NO-TEXTO */
  --signal-text: var(--signal-600);
  --cta-fill: var(--signal-600);
  --cta-fill-hover: var(--signal-700);
  --cta-ink: var(--paper-050);
  /* La banda oscura del tema claro (§5 del DESIGN.md) no es un rol que cambie: usa
   * night-950 / night-900 / paper-050 tal cual, porque de noche ya es el fondo de la página. */

  /* ------------------------------------------------------------------------- Tipografía */
  /* Pareja: USWDS + Chicago. Public Sans es la tipografía del U.S. Web Design System, la que
   * este comprador ya tiene delante todo el día; Big Shoulders Display es una condensada
   * cívica (Chicago, "City of the Big Shoulders"). Las dos OFL y autoalojadas.
   * Licencias en design/wayfold-v2/fonts/OFL-*.txt */
  --font-display: 'Big Shoulders Display Variable', 'Arial Narrow', system-ui, sans-serif;
  --font-text: 'Public Sans Variable', system-ui, sans-serif; /* cuerpo, UI y datos */

  /* Sin familia mono: los valores de máquina (fechas, poblaciones, códigos) van en Public
   * Sans con `font-variant-numeric: tabular-nums`, que alinea igual y mantiene una sola voz
   * de lectura. Es una decisión de accesibilidad, no de ahorro de peso. */
  --num-tabular: tabular-nums;

  --step-h1: clamp(3rem, 1.6rem + 5.6vw, 6.5rem);      /* condensada: puede ir grande */
  --step-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --step-h3: 1.0625rem;                                 /* Public Sans, no display */
  --step-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --step-body: 1rem;
  --step-caption: 0.8125rem;
  --step-label: 0.75rem;   /* etiquetas de estación y de línea. mínimo absoluto del sitio */

  --lh-h1: 0.88;  --tr-h1: -0.01em;  --wg-h1: 700;  /* condensada: interlineado por debajo de 1 */
  --lh-h2: 0.94;  --tr-h2: -0.005em; --wg-h2: 600;
  --lh-h3: 1.3;   --tr-h3: 0.01em;   --wg-h3: 650;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-caption: 1.45;
  --lh-label: 1.2;  --tr-label: 0.04em;  --wg-label: 600;

  --measure-body: 64ch;
  --measure-lead: 46ch;   /* el subtítulo del hero cabe en dos líneas */
  --measure-caption: 44ch;

  /* ------------------------------------------------------------------ Espaciado (base 4px) */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8.5rem;
  --space-section: var(--space-10); /* 136px; baja a 4rem por debajo de 768px */

  /* ----------------------------------------------------------- Forma, filete, profundidad */
  --r-stop: 999px;  /* las estaciones son círculos. es la única forma redonda del sistema */
  --r-chip: 2px;    /* etiquetas de línea y de dueño: casi cuadradas, como un rótulo pegado */
  --r-panel: 4px;   /* el mapa, el formulario y las tarjetas. ESQUINA SECA, no pastilla */
  --bw-hairline: 1px;
  --bw-route: 10px;    /* grosor del trazo de ruta en el mapa, escritorio */
  --bw-route-sm: 7px;  /* por debajo de 768px */
  --bw-focus: 3px;     /* el anillo de foco. es el motivo gráfico, ver abajo */
  /* sombras: una sola, y nunca para decorar.
   * El papel se apoya en el papel: la profundidad la hace el escalón ground / surface + filete. */
  --shadow-lift: 0 1px 0 0 var(--rule), 0 2px 10px -6px rgb(10 42 38 / 0.18);

  /* --------------------------------------------------------------------------------- Grid */
  --content-max: 1200px;
  --page-margin: 2rem;   /* 1.25rem por debajo de 768px */
  --grid-cols: 12;       /* 6 entre 768 y 1199px, 4 por debajo */
  --grid-gutter: 1.5rem;

  /* ------------------------------------------------------------------------------- Motion */
  --ease-route: cubic-bezier(0.37, 0.01, 0.2, 1);  /* lo que recorre la línea */
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);      /* hover, focus, toggle */
  --dur-state: 150ms;    /* rango 120–180ms */
  --dur-stop: 320ms;     /* una estación pasando de ○ a ● */
  --dur-hero: 7200ms;    /* la secuencia completa del mapa, ver HERO.md */
  --dur-reveal: 520ms;   /* la entrada de una sección al cruzar el viewport */

  /* --------------------------------------- Anillo de foco — aquí es el motivo de la marca */
  /* Wayfold vende trabajo de accesibilidad, así que su propio foco tiene que ser el mejor de
   * la categoría y además verse COMO marca: 3px de naranja de señal con 2px de hueco. El hueco
   * es lo que lo hace visible sobre crema Y sobre petróleo sin cambiar de color. */
  --focus-color: var(--signal-600);
  --focus-width: var(--bw-focus);
  --focus-offset: 2px;
}

/* El anillo de foco no se quita nunca, en ningún elemento interactivo (DESIGN.md §2). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------- Noche: se reasignan los ROLES, no las primitivas */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: var(--night-950);
    --surface: var(--night-900);
    --rule: var(--night-700);
    --ink: var(--cream-050);
    --ink-2: var(--cream-300);
    --line-done: var(--mint-400);
    --line-now: var(--signal-400);
    --line-todo: var(--mint-600);
    --signal-text: var(--signal-300);
    --cta-fill: var(--signal-300);      /* de noche el relleno sube de luz… */
    --cta-fill-hover: var(--signal-400);
    --cta-ink: var(--night-950);        /* …y la etiqueta baja a tinta petróleo */
    --focus-color: var(--signal-300);
    --shadow-lift: 0 1px 0 0 var(--rule), 0 2px 10px -6px rgb(0 0 0 / 0.5);
  }
}

/* DESIGN.md §7: bajo reduce no queda ni el recorrido del mapa. Se ve el fotograma final. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-hero: 0ms; --dur-stop: 0ms; --dur-reveal: 0ms; --dur-state: 0ms; }
}