/* ════════════════════════════════════════════════════════════════════════════
   [DCS] · TOKENS — LA FUENTE ÚNICA. Toda página de la casa importa ESTE archivo.
   Regla dura de Juan (31-ago-2026): «que vayas creando tokens y elementos para
   reutilizar, que solo los tengamos que modificar una vez, no que vayas
   rediseñando absolutamente todo y que no tengan relación las páginas entre sí».
   NADIE redefine estos valores en su propia hoja. Se cambian AQUÍ y cambian en todas.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;

  /* ── color ─────────────────────────────────────────────────────────────── */
  --negro:#0B0B0B;          /* negro mate de la casa (nunca #000) */
  --negro-2:#101010;        /* superficie */
  --negro-3:#161616;        /* superficie elevada */
  --tinta:#EDEDE8;          /* blanco roto */
  --tinta-2:rgba(237,237,232,.64);
  --tinta-3:rgba(237,237,232,.52);   /* suelo de texto: .52 = 5.0:1 sobre el negro (4.5:1 es el mínimo legal) */
  --linea:rgba(237,237,232,.10);
  --linea-2:rgba(237,237,232,.16);
  --linea-control:rgba(237,237,232,.38);   /* borde de campo: 3.2:1, el mínimo de WCAG 1.4.11 */
  --linea-suave:rgba(237,237,232,.14);
  --campo:#131313;          /* fondo de un campo rellenable: se separa de la superficie sin brillar */
  --rojo:#B3121D;           /* el de marca: relleno de botones y piezas macizas */
  --rojo-2:#8F0E17;
  --rojo-cartel:#D8241C;    /* titulares grandes sobre negro: el de marca se apaga a ese tamaño */
  --rojo-viva:#E5323E;      /* rojo de aviso y de error: aún más claro, para texto pequeño */
  --marquee:#2F2F2D;        /* el gris del marquee Y de las rayas: es el MISMO */

  /* ── ESTADO · solo para decir si algo va bien, avisa o esta roto ───────────
     Medidos sobre el negro de la casa: verde 7.3:1, ambar 7.2:1, azul 4.9:1.
     El azul es el SECUNDARIO de apoyo (enlaces, datos de contexto): el rojo de
     marca es tinta de marca, no de interfaz. */
  --ok:#3FB950;
  --aviso:#D29922;
  --azul-apple:#0088FF;

  /* ── tipografía ────────────────────────────────────────────────────────── */
  --f-text:'NHG Text',Helvetica,Arial,sans-serif;
  --f-display:'NHG Display','NHG Text',Helvetica,Arial,sans-serif;
  --f-stretch:'Stretch Pro','NHG Display',Helvetica,Arial,sans-serif;
  --fs-min:12px;            /* suelo duro: nada funcional por debajo */

  /* ── RAYAS DIAGONALES · el patrón de la casa, definido UNA vez ──────────
     Aparece en: la barra del manifiesto, las cintas del cartel, los SVG de
     After Effects y toda pieza de campaña. Si cambia el ángulo, cambia aquí. */
  --rayas-angulo:135deg;
  --rayas-raya:24px;
  --rayas-periodo:52px;
  --rayas-color:var(--marquee);
  --rayas:repeating-linear-gradient(var(--rayas-angulo),var(--rayas-color) 0 var(--rayas-raya),transparent var(--rayas-raya) var(--rayas-periodo));
  --rayas-ciclo:73.539px;   /* periodo × √2 — el desplazamiento que cierra el bucle sin salto */
  --rayas-vel:2.2s;

  /* ── TRAMA de puntos (el semitono del cartel) ───────────────────────────── */
  --trama-celda:4px;
  --trama:radial-gradient(rgba(237,237,232,.10) 1px,transparent 1px);
  /* desplazamiento del fondo con el scroll. Lo mueve rejilla.js; aqui vale 0 para que sin JS
     (o con «menos movimiento» activado) la rejilla se quede quieta y no desaparezca. */
  --rej:0px;

  /* ── INGLETE · la esquina cortada abajo-derecha (referencia HUD de Juan, 31-ago) ──────
     Es una pieza de identidad: mismo corte en campos, opciones y tarjetas de toda la casa. */
  --ing:14px;          /* lo que se come la diagonal */
  --ing-lin:1px;       /* grosor del filete */

  /* posición del cursor (la escribe main.js en vivo); con valor inicial para que nunca falte */
  --mx:50%;
  --my:40%;

  /* ── ritmo y movimiento ────────────────────────────────────────────────── */
  --gut:clamp(18px,3.5vw,48px);
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-prod:cubic-bezier(.32,.08,.24,1);   /* la curva de producto de Apple, 200ms */
}