/* GENERADO por design/tokens.mjs desde design/tokens.json — no editar a mano.
   Blanco y negro, más el fluorescente de --subrayado (solo de fondo). Dos temas, claro (por defecto) y
   oscuro (el del sistema si no se elige otro), que se aplican con
   data-tema="claro|oscuro" en <html> o en cualquier contenedor.
   Solo tokens semánticos: la paleta cruda no sale de tokens.json. */

:root {
  --letra-interfaz: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-titulos: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-mini: 0.6875rem;
  --t-nota: 0.8125rem;
  --t-cuerpo: 1rem;
  --t-destacado: 1.1875rem;
  --t-titulo-3: 1.4375rem;
  --t-titulo-2: 1.75rem;
  --t-titulo-1: 2.0625rem;
  --t-portada: 2.5rem;
  --interfaz-interlinea: 1.45;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --espacio-7: 48px;
  --espacio-8: 64px;
  --radio-s: 4px;
  --radio-m: 8px;
  --radio-l: 14px;
  --radio-pastilla: 999px;
  --sombra-tarjeta: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 18px -8px rgb(0 0 0 / 0.12);
  --sombra-flotante: 0 2px 6px rgb(0 0 0 / 0.10), 0 16px 40px -12px rgb(0 0 0 / 0.26);
  --mov-rapido: 120ms;
  --mov-normal: 200ms;
  --mov-curva: cubic-bezier(0.2, 0, 0, 1);
  --tactil-min: 44px;
}

:root,
[data-tema="claro"] {
  color-scheme: light;
  --fondo: #F7F7F7;
  --superficie: #FFFFFF;
  --superficie-honda: #EDEDED;
  --borde: #D2D2D2;
  --texto: #121212;
  --texto-2: #575757;
  --apagado: #828282;
  --marca: #000000;
  --marca-honda: #121212;
  --marca-lavado: #E8E8E8;
  --sobre-marca: #FFFFFF;
  --foco: #000000;
  --acento: #000000;
  --sobre-acento: #FFFFFF;
  --resaltado: #E3E3E3;
  --error: #000000;
  --error-fondo: #DEDEDE;
  --atencion: #484848;
  --atencion-fondo: #E9E9E9;
  --exito: #6D6D6D;
  --exito-fondo: #F2F2F2;
  --subrayado: #FCEA44;
  --sobre-subrayado: #121212;
  --realce: #F3F0D0;
  --realce-borde: #E0DA9A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;
    --fondo: #0B0B0B;
    --superficie: #161616;
    --superficie-honda: #232323;
    --borde: #3D3D3D;
    --texto: #F5F5F5;
    --texto-2: #B1B1B1;
    --apagado: #808080;
    --marca: #FFFFFF;
    --marca-honda: #D7D7D7;
    --marca-lavado: #2B2B2B;
    --sobre-marca: #0B0B0B;
    --foco: #FFFFFF;
    --acento: #FFFFFF;
    --sobre-acento: #0B0B0B;
    --resaltado: #303030;
    --error: #FFFFFF;
    --error-fondo: #353535;
    --atencion: #BEBEBE;
    --atencion-fondo: #282828;
    --exito: #949494;
    --exito-fondo: #1E1E1E;
    --subrayado: #EDD643;
    --sobre-subrayado: #0B0B0B;
    --realce: #2A2715;
    --realce-borde: #4F4824;
  }
}

[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0B0B0B;
  --superficie: #161616;
  --superficie-honda: #232323;
  --borde: #3D3D3D;
  --texto: #F5F5F5;
  --texto-2: #B1B1B1;
  --apagado: #808080;
  --marca: #FFFFFF;
  --marca-honda: #D7D7D7;
  --marca-lavado: #2B2B2B;
  --sobre-marca: #0B0B0B;
  --foco: #FFFFFF;
  --acento: #FFFFFF;
  --sobre-acento: #0B0B0B;
  --resaltado: #303030;
  --error: #FFFFFF;
  --error-fondo: #353535;
  --atencion: #BEBEBE;
  --atencion-fondo: #282828;
  --exito: #949494;
  --exito-fondo: #1E1E1E;
  --subrayado: #EDD643;
  --sobre-subrayado: #0B0B0B;
  --realce: #2A2715;
  --realce-borde: #4F4824;
}

@media (prefers-reduced-motion: reduce) {
  :root { --mov-rapido: 0ms; --mov-normal: 0ms; }
}