/* tokens.css — los valores de la interfaz, y solo aquí (docs/diseno/estilo.md §2). Papel cálido,
   tinta profunda y UN acento ultramar; verde, ámbar y rojo solo dicen un estado. Fuera de este fichero
   no se escribe un color, un tamaño de letra ni una duración: uno escrito a mano no cambia en oscuro.
   Tres temas: claro en :root; oscuro por el sistema (salvo data-theme="light") y por data-theme="dark".
   tests/test_estilo.py comprueba el contraste de cada par de §2.1 en los dos temas. */

:root{
 color-scheme:light dark;
 /* Superficies: el papel del taller */
 --papel:#F5F1E8;          /* fondo de la página */
 --lamina:#FFFDF8;         /* lo que se levanta: panel, formularios, carriles, tablas */
 --hundido:#ECE6DA;        /* pistas, segmentado, insignia neutra, hover */
 --hundido-2:#E0D8C9;      /* lo hundido sobre lo hundido: anillo de la rueda, esqueleto */
 --hoja:#FFFDF8;           /* el papel bajo cada dibujo (multiply) */
 --hoja-oscura:#282828;    /* dibujos de tinta clara: el FONDO_OSCURO de dibujos.py, igual en los dos temas */
 --hilo:#DDD5C6;           /* filete de 1 px, decorativo */
 --hilo-suave:#E8E1D4;     /* entre filas */
 --borde-control:#8F8676;  /* campos, casillas, selects: ≥ 3:1 */
 /* Tinta */
 --tinta:#1B1915;
 --tinta-2:#5C5549;        /* cualquier dato secundario */
 --tinta-3:#8F8676;        /* SOLO decorativo: nunca texto que haya que leer */
 /* Un acento: ultramar */
 --acento:#2E3CC9; --acento-hover:#2430A8; --sobre-acento:#FFFFFF;
 --acento-texto:#2A37B8; --acento-suave:#E3E5F7;
 /* Estado: solo con significado */
 --ok:#1D6B45; --ok-suave:#DCEBDF;
 --warn:#8A5300; --warn-suave:#F6E6C4;
 --mal:#B42318; --mal-suave:#F8DEDA; --sobre-mal:#FFFFFF;
 --foco:#2E3CC9;
 /* Semitono, muestras de tinta y el velo de «no es este» */
 --punto:rgba(27,25,21,.16);
 --borde-muestra:rgba(0,0,0,.22);
 --velo:rgba(27,25,21,.32);
 /* Sombras: casi nada (Linear usa la línea, no la sombra) */
 --sombra-1:0 1px 2px rgba(27,25,21,.06);
 --sombra-2:0 12px 32px -12px rgba(27,25,21,.22),0 2px 6px rgba(27,25,21,.06);
 --sombra-panel:-1px 0 0 var(--hilo),-24px 0 48px rgba(27,25,21,.08);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --papel:#141310; --lamina:#1D1B17; --hundido:#0E0D0B; --hundido-2:#26231D; --hoja:#E6E0D4;
 --hilo:#33302A; --hilo-suave:#29261F; --borde-control:#7A7366;
 --tinta:#F1ECE2; --tinta-2:#B0A898; --tinta-3:#7A7366;
 --acento:#8E9BFF; --acento-hover:#A9B3FF; --sobre-acento:#0E1030;
 --acento-texto:#A3AEFF; --acento-suave:#22264A;
 --ok:#62C98F; --ok-suave:#16301F; --warn:#F0B44C; --warn-suave:#3A2A0E;
 --mal:#FF8A7A; --mal-suave:#3D1A16; --sobre-mal:#1D0805; --foco:#A3AEFF;
 --punto:rgba(241,236,226,.13);
 --borde-muestra:rgba(255,255,255,.4); --velo:rgba(0,0,0,.55);
 --sombra-1:0 0 0 1px var(--hilo);
 --sombra-2:0 0 0 1px var(--hilo),0 16px 40px -16px rgba(0,0,0,.6);
 --sombra-panel:-1px 0 0 var(--hilo);
}}
:root[data-theme="dark"]{
 --papel:#141310; --lamina:#1D1B17; --hundido:#0E0D0B; --hundido-2:#26231D; --hoja:#E6E0D4;
 --hilo:#33302A; --hilo-suave:#29261F; --borde-control:#7A7366;
 --tinta:#F1ECE2; --tinta-2:#B0A898; --tinta-3:#7A7366;
 --acento:#8E9BFF; --acento-hover:#A9B3FF; --sobre-acento:#0E1030;
 --acento-texto:#A3AEFF; --acento-suave:#22264A;
 --ok:#62C98F; --ok-suave:#16301F; --warn:#F0B44C; --warn-suave:#3A2A0E;
 --mal:#FF8A7A; --mal-suave:#3D1A16; --sobre-mal:#1D0805; --foco:#A3AEFF;
 --punto:rgba(241,236,226,.13);
 --borde-muestra:rgba(255,255,255,.4); --velo:rgba(0,0,0,.55);
 --sombra-1:0 0 0 1px var(--hilo);
 --sombra-2:0 0 0 1px var(--hilo),0 16px 40px -16px rgba(0,0,0,.6);
 --sombra-panel:-1px 0 0 var(--hilo);
}
/* Los controles nativos (barras, casillas, la barra de scroll) siguen al tema elegido a mano */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* Lo que no cambia con el tema: letra, espacio, radios, alturas, marco y movimiento (estilo.md §2.2-2.4) */
:root{
 --f-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
 --f-ui:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --f-mono:"Geist Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
 --t-xs:.75rem;    /* 12 · rótulos, insignias, teclas */
 --t-s:.8125rem;   /* 13 · meta de tarjeta, ayudas */
 --t-m:.875rem;    /* 14 · navegación, tablas, botones */
 --t-base:.9375rem;/* 15 · cuerpo */
 --t-l:1.0625rem;  /* 17 · títulos de bloque; cuerpo y campos en el móvil */
 --t-xl:1.25rem;   /* 20 · h2 de bloque, código en la tarjeta de plancha */
 --t-2xl:1.5rem;   /* 24 · cifras */
 --t-3xl:2rem;     /* 32 · veredicto, h1 en el móvil */
 --t-4xl:2.75rem;  /* 44 · h1 de vista */
 --t-hero:4rem;    /* 64 · código de plancha en la ficha */
 --t-hero-movil:2.5rem; /* 40 · el mismo código en el móvil; el lema de Entrar como poco */
 --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-7:32px; --e-8:40px; --e-9:56px; --e-10:80px;
 --gutter:32px; --ancho-lectura:1120px;
 --r-2xs:2px; --r-xs:4px; --r-s:6px; --r-m:10px; --r-l:14px; --r-pill:999px;
 --alto-sm:32px; --alto:40px; --alto-lg:48px; --alto-xl:56px; --toque:44px;
 --barra:56px; --lateral:232px; --carril:64px; --panel:480px; --pestanas:56px;
 --dur-1:120ms; --dur-2:160ms; --dur-3:200ms; --curva:cubic-bezier(.2,.7,.2,1);
 /* Lo único que va en bucle (§2.4): la vuelta de la rueda, el latido del esqueleto y la rueda con movimiento reducido */
 --dur-giro:.8s; --dur-latido:1.2s; --dur-giro-lento:2.4s;
 --trama:radial-gradient(circle,var(--punto) 1.15px,transparent 1.6px) 0 0/8px 8px;
}
@media (max-width:1200px){:root{--gutter:24px}}
@media (max-width:760px){:root{--gutter:16px}}