/**
 * Tokens de MicroVision como módulo de CELL-IA (rediseño «Campo claro», 2026-10-28). Solo variables:
 * ninguna regla de maquetación.
 *
 * La identidad es la de CELL-IA (contador-neubauer `18de0c8`, `frontend/app/globals.css`): campo claro
 * por defecto y campo oscuro con `data-iluminacion="oscuro"` en la raíz. El atributo lo pone
 * `js/iluminacion-temprana.js` antes del primer pintado y lo cambia el conmutador de la cabecera
 * (`js/ui/iluminacion.js`); no se sigue `prefers-color-scheme`, porque la elección es del docente y
 * se recuerda por equipo.
 *
 * Sistema de color, un significado por color (y una forma, para quien no distingue el color):
 *   - Verde = en vivo (círculo). Coral = foto fija (cuadrado). Violeta = la acción que toca.
 *   - El texto va siempre en tinta; el color de estado va en marcas, rellenos o cifras grandes. Los
 *     verdes y corales de CELL-IA no llegan a 4,5:1 como texto pequeño sobre claro, así que el texto
 *     de estado usa variantes oscurecidas (--exito-texto, --aviso-texto, --error-texto).
 *   - Pares comprobados con AA en los dos campos: tinta, tinta suave y tinta tenue sobre fondo,
 *     tarjeta y apagado; texto del acento sobre el acento; tinta del vivo y de la foto fija sobre su
 *     relleno; acento fuerte sobre acento suave.
 *
 * Tipografía: Inter para toda la interfaz y Unbounded 700 solo para el wordmark «CELL-IA» y alguna
 * cifra grande. Las dos autoalojadas en fuentes.css.
 */
:root {
  color-scheme: light;
  --fondo: #f4f6f8;
  --profundo: #dbe2e8;
  --tarjeta: #ffffff;
  --borde: #d6dee5;
  --tinta: #132331;
  --tinta-suave: #4a5d6c;
  --tinta-tenue: #4f6271;
  --acento: #5b45c2;
  --acento-hover: #4a36a8;
  --acento-tinta: #ffffff;
  --acento-suave: #eeeafc;
  --acento-fuerte: #4a36a8;
  --apagado: #eef2f5;
  --campo: #ffffff;
  --campo-borde: #7d8e9d;
  --vivo: #16a34a;
  --vivo-tinta: #0b0b14;
  --fija: #e8897b;
  --fija-tinta: #132331;
  --fija-suave: #fcefec;
  --ambar: #f5b83d;
  --exito-texto: #166534;
  --aviso-texto: #8a5300;
  --error-texto: #b91c1c;
  --error-suave: #fdecec;
  --iso-coral: #e8897b;
  --iso-violeta: #6a48a8;
  --iso-pastilla: #132331;
  --iso-pastilla-texto: #f4f6f8;
  --rayado: #1f3a4d;
  --rayado-fino: 0.16;
  --rayado-triple: 0.55;
  --foco: #5b45c2;
  --vidrio-borde: rgb(19 35 49 / 0.1);
  --brillo-interno: rgb(255 255 255 / 0.9);
  --sombra-flotante: 0 22px 48px -22px rgb(19 35 49 / 0.4);
  --sombra-imagen: 0 1px 2px rgb(19 35 49 / 0.18);
  --velo: rgb(19 35 49 / 0.78);
  --sobre-velo: #ffffff;
  --trazo-pizarra: #c2354a;

  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-marca: "Unbounded", "Inter", system-ui, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --texto-mini: 0.75rem;
  --texto-etiqueta: 0.8125rem;
  --texto-control: 0.875rem;
  --texto-cuerpo: 1rem;

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  --radio-xs: 6px;
  --radio-s: 12px;
  --radio-m: 16px;
  --radio-l: 24px;
  --redondo: 999px;

  --salida: cubic-bezier(0.22, 1, 0.36, 1);
  --duracion-rapida: 150ms;

  --objetivo-tactil: 44px;
  --alto-cabecera: 64px;
}

:root[data-iluminacion="oscuro"] {
  color-scheme: dark;
  --fondo: #0c0d10;
  --profundo: #000000;
  --tarjeta: #16181d;
  --borde: #2c2f37;
  --tinta: #f4efe7;
  --tinta-suave: #bcb9b3;
  --tinta-tenue: #a9a6a2;
  --acento: #b9a8ff;
  --acento-hover: #cbbfff;
  --acento-tinta: #2e2a6b;
  --acento-suave: #262238;
  --acento-fuerte: #cbbfff;
  --apagado: #1d2026;
  --campo: #0c0d10;
  --campo-borde: #6b7180;
  --vivo: #22c55e;
  --vivo-tinta: #0b0b14;
  --fija: #ff9e8f;
  --fija-tinta: #0b0b14;
  --fija-suave: #2a1b19;
  --exito-texto: #4ade80;
  --aviso-texto: #f5b83d;
  --error-texto: #f87171;
  --error-suave: #2a1515;
  --iso-coral: #ff9e8f;
  --iso-violeta: #9d86f2;
  --iso-pastilla: #f4efe7;
  --iso-pastilla-texto: #0c0d10;
  --rayado: #ffe9cc;
  --rayado-fino: 0.16;
  --rayado-triple: 0.5;
  --foco: #b9a8ff;
  --vidrio-borde: rgb(244 239 231 / 0.12);
  --brillo-interno: rgb(255 255 255 / 0.07);
  --sombra-flotante: 0 24px 60px -24px rgb(0 0 0 / 0.9);
  --sombra-imagen: 0 1px 2px rgb(0 0 0 / 0.6);
  --velo: rgb(12 13 16 / 0.82);
  --trazo-pizarra: #e0677a;
}