/* tokens.css — GENERADO por design-system/generar-css.py desde tokens/tokens.json.
   No se edita a mano. Manda git: la fuente es tokens.json; Figma es su espejo.
   Figma: fileKey t8vEWhYgdTr7rldsspTSQY · colecciones Primitivos y Semánticos.
   Última sync: 2026-10-03

   REGLA: el CSS de los módulos usa SEMÁNTICOS (--superficie-*, --texto-*, --acento-*…).
   Los --prim-* existen para que los semánticos apunten a algo; usarlos directamente en
   un módulo es saltarse la capa de rol. */

:root {
  /* ── Primitivos ── */
  --prim-color-tinta: #0F1110;
  --prim-color-blanco: #FFFFFF;
  --prim-color-hueso: #F7F7F2;
  --prim-color-negro: #000000;
  --prim-color-gris-50: #F4F5F5;
  --prim-color-gris-200: #D8D8D2;
  --prim-color-gris-300: #C5C5C5;
  --prim-color-gris-600: #686868;
  --prim-color-gris-650: #5A5353;
  --prim-color-gris-800: #373737;
  --prim-color-verde-100: #D1F8ED;
  --prim-color-verde-500: #1BDEA6;
  --prim-color-verde-700: #0A6A4F;
  --prim-color-verde-900: #0B4D58;
  --prim-color-tinta-82: rgb(15 17 16 / 0.82);
  --prim-color-tinta-64: rgb(15 17 16 / 0.64);
  --prim-color-blanco-82: rgb(255 255 255 / 0.82);
  --prim-color-blanco-64: rgb(255 255 255 / 0.64);
  --prim-color-blanco-50: rgb(255 255 255 / 0.5);
  --prim-familia-archivo-black: 'Archivo Black', system-ui, sans-serif;
  --prim-familia-vt323: 'VT323', monospace;
  --prim-familia-inter: 'Inter', system-ui, sans-serif;
  --prim-dimension-1: 1px;
  --prim-dimension-2: 2px;
  --prim-dimension-4: 4px;
  --prim-dimension-8: 8px;
  --prim-dimension-12: 12px;
  --prim-dimension-16: 16px;
  --prim-dimension-24: 24px;
  --prim-dimension-32: 32px;
  --prim-dimension-40: 40px;
  --prim-dimension-48: 48px;
  --prim-dimension-64: 64px;
  --prim-dimension-96: 96px;
  --prim-dimension-136: 136px;
  --prim-dimension-999: 999px;

  /* ── superficie ── */
  --superficie-pagina: var(--prim-color-blanco);
  --superficie-tinta: var(--prim-color-tinta);
  --superficie-clara: var(--prim-color-gris-50);
  --superficie-aviso: var(--prim-color-hueso);
  --superficie-bloqueada: var(--prim-color-gris-600);
  --superficie-cinta: var(--prim-color-gris-800);
  --superficie-placa: var(--prim-color-blanco-50);
  --superficie-destacada: var(--prim-color-verde-100);

  /* ── texto ── */
  --texto-principal: var(--prim-color-tinta);
  --texto-secundario: var(--prim-color-tinta-82);
  --texto-terciario: var(--prim-color-tinta-64);
  --texto-sobre-tinta: var(--prim-color-blanco);
  --texto-sobre-tinta-secundario: var(--prim-color-blanco-82);
  --texto-sobre-tinta-terciario: var(--prim-color-blanco-64);
  --texto-acento-sobre-claro: var(--prim-color-verde-700);
  --texto-acento-sobre-tinta: var(--prim-color-verde-500);

  /* ── acento ── */
  --acento-base: var(--prim-color-verde-500);
  --acento-foco: var(--prim-color-verde-900);

  /* ── borde ── */
  --borde-sutil: var(--prim-color-gris-200);
  --borde-filete: var(--prim-color-gris-300);
  --borde-fuerte: var(--prim-color-tinta);

  /* ── pixel ── */
  --pixel-celda: var(--prim-color-gris-650);
  --pixel-marca-apagada: var(--prim-color-gris-800);
  --pixel-sello-tinta: var(--prim-color-negro);
  --pixel-pixel: var(--prim-dimension-8);
  --pixel-paso: var(--prim-dimension-24);

  /* ── radio ── */
  --radio-tarjeta: var(--prim-dimension-24);
  --radio-pildora: var(--prim-dimension-999);

  /* ── trazo ── */
  --trazo-filete: var(--prim-dimension-1);
  --trazo-linea: var(--prim-dimension-2);
  --trazo-foco: var(--prim-dimension-4);

  /* ── sombra ── */
  --sombra-dura-desplazamiento: var(--prim-dimension-8);
  --sombra-dura-hover: var(--prim-dimension-4);

  /* ── espacio ── */
  --espacio-4: var(--prim-dimension-4);
  --espacio-8: var(--prim-dimension-8);
  --espacio-12: var(--prim-dimension-12);
  --espacio-16: var(--prim-dimension-16);
  --espacio-24: var(--prim-dimension-24);
  --espacio-32: var(--prim-dimension-32);
  --espacio-40: var(--prim-dimension-40);
  --espacio-48: var(--prim-dimension-48);
  --espacio-64: var(--prim-dimension-64);
  --espacio-96: var(--prim-dimension-96);
  --espacio-136: var(--prim-dimension-136);

  /* ── tipografia ── */
  --tipografia-display: var(--prim-familia-archivo-black);
  --tipografia-pixel: var(--prim-familia-vt323);
  --tipografia-texto: var(--prim-familia-inter);
}