/* ===========================================================================
   Tokens de diseño — Laboratorio de Energía Nuclear Didáctico
   ---------------------------------------------------------------------------
   Un único lugar donde vive el color. Todo lo demás se escribe contra estos
   nombres, nunca contra un hex suelto, para que el tema claro/oscuro cambie
   en un solo sitio.

   PALETA DE MODOS DE DECAIMIENTO — apta para daltonismo (no es decorativa)
   Se eligió ejecutando el validador de paletas sobre las parejas de familias
   que REALMENTE comparten borde en la carta de núclidos (calculadas desde los
   datos del OIEA, no supuestas). Resultado en ambos temas:
       peor pareja, visión con deuteranopia .... ΔE 9,2 claro / 9,4 oscuro
       peor pareja, visión normal .............. ΔE 24,0 claro / 20,9 oscuro
   (el objetivo es ΔE ≥ 8 en daltonismo y ≥ 15 en visión normal, OKLab ×100)

   Tres matices es el máximo que pasa esa prueba. Por eso las familias raras
   (emisión de protón, de neutrón, fisión espontánea, agregados) NO reciben un
   matiz propio: se dibujan con trama sobre gris y se identifican por leyenda,
   glifo y tooltip. Añadir un cuarto o quinto matiz rompería la accesibilidad
   sin añadir información que la trama no dé ya.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Superficies e interfaz --- */
  --fondo: #fcfcfb;
  --superficie: #ffffff;
  --superficie-2: #f4f3ef;
  --superficie-hover: #eceae4;
  --borde: #dcdad2;
  --borde-fuerte: #b9b6ab;

  /* --- Texto --- */
  --texto: #1c1b19;
  --texto-2: #52514e;
  --texto-3: #6e6c66; /* 5,1:1 sobre blanco (antes #7a7871, 4,42:1, por debajo de AA) */
  --texto-inverso: #fcfcfb;

  /* --- Acento de la interfaz (no es color de datos) --- */
  --acento: #1f6cc4; /* 5,25:1 sobre blanco (antes #2a78d6, 4,42:1) */
  --acento-suave: #eaf1fc;
  /* Texto de acento sobre el tinte --acento-suave (menú activo, botones pulsados): ≥ 4,5:1. */
  --acento-texto: #1f6cc4;
  --foco: #2a78d6;

  /* --- Marcador de selección de la carta (no es color de datos) ---
     El amarillo NO es decorativo ni una elección de gusto: es el resultado de
     barrer el espacio OKLCh entero buscando el matiz cuyo PEOR caso contra las
     seis familias, en las tres visiones y en los dos temas, fuera el mejor
     posible. El amarillo es la única región que se despega de todas. Peor caso
     de este tono: ΔE 17,1 en claro y 18,8 en oscuro (objetivo del archivo: 15
     en visión normal, 8 en daltonismo).

     Antes de esto el marcador usaba --acento, que es EL MISMO HEX que
     --dec-beta-menos: sobre una celda β⁻ —el azul que cubre media carta— el
     recuadro era literalmente invisible. Hay una prueba que impide que el
     marcador vuelva a coincidir con ninguna familia.

     El halo oscuro va igual en los dos temas: el amarillo es claro, así que lo
     que necesita para despegarse del fondo es siempre un contorno oscuro. */
  --marcador: #ffd400;
  --marcador-halo: #1c1b19;
  --marcador-suave: #fdf3d0;

  /* --- Modos de decaimiento (color de datos, validado) --- */
  --dec-estable: #1c1b19;
  --dec-beta-menos: #2a78d6;
  --dec-beta-mas: #eb6834;
  --dec-alfa: #1baf7a;
  --dec-otros: #8a8880;
  --dec-desconocido: #d9d7d0;
  /* Tinte de fondo para insignias: el color plano queda muy fuerte en texto */
  --dec-estable-suave: #e8e7e3;
  --dec-beta-menos-suave: #e7f0fc;
  --dec-beta-mas-suave: #fdeee7;
  --dec-alfa-suave: #e3f6ee;
  --dec-otros-suave: #eeede9;

  /* --- Partículas del átomo --- */
  --proton: #eb6834;
  --neutron: #7a7871;
  --electron: #2a78d6;

  /* --- Tipografía --- */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-datos: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* --- Espaciado y forma --- */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --sombra: 0 1px 2px rgb(28 27 25 / 6%), 0 4px 12px rgb(28 27 25 / 5%);
  --ancho-max: 1180px;
}

/* El tema oscuro no es una inversión automática: cada valor está escogido
   contra la superficie oscura y revalidado con el mismo test de daltonismo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --fondo: #131312;
    --superficie: #1a1a19;
    --superficie-2: #232322;
    --superficie-hover: #2e2e2c;
    --borde: #3d3c38;
    --borde-fuerte: #5a5953;

    --texto: #f2f0ea;
    --texto-2: #c3c2b7;
    --texto-3: #93918a;
    --texto-inverso: #131312;

    --acento: #3987e5;
    --acento-suave: #17263a;
    --acento-texto: #6aa5f0;
    --foco: #3987e5;

    --marcador: #ffd400;
    --marcador-halo: #1c1b19;
    --marcador-suave: #3a2e08;
    --dec-estable: #f2f0ea;
    --dec-beta-menos: #3987e5;
    --dec-beta-mas: #d95926;
    --dec-alfa: #199e70;
    --dec-otros: #93918a;
    --dec-desconocido: #3d3c38;
    --dec-estable-suave: #2b2b29;
    --dec-beta-menos-suave: #14263c;
    --dec-beta-mas-suave: #331a11;
    --dec-alfa-suave: #10281f;
    --dec-otros-suave: #292927;

    --proton: #d95926;
    --neutron: #93918a;
    --electron: #3987e5;

    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
  }
}

/* El interruptor manual debe ganarle a la preferencia del sistema en ambos
   sentidos, por eso los valores oscuros se repiten bajo este selector.
   Desde el 5 de octubre de 2026 todas las páginas llevan
   <html data-tema-defecto="oscuro">: el sitio es oscuro salvo que se elija el
   claro. El segundo selector lo aplica desde el primer pintado, antes de que
   tema.js ponga data-tema; sin él, con el sistema en claro, la página daba un
   destello blanco al cargar. */
:root[data-tema="oscuro"],
:root[data-tema-defecto="oscuro"]:not([data-tema="claro"]) {
  color-scheme: dark;

  --fondo: #131312;
  --superficie: #1a1a19;
  --superficie-2: #232322;
  --superficie-hover: #2e2e2c;
  --borde: #3d3c38;
  --borde-fuerte: #5a5953;

  --texto: #f2f0ea;
  --texto-2: #c3c2b7;
  --texto-3: #93918a;
  --texto-inverso: #131312;

  --acento: #3987e5;
  --acento-suave: #17263a;
  --acento-texto: #6aa5f0;
  --foco: #3987e5;

  --marcador: #ffd400;
  --marcador-halo: #1c1b19;
  --marcador-suave: #3a2e08;
  --dec-estable: #f2f0ea;
  --dec-beta-menos: #3987e5;
  --dec-beta-mas: #d95926;
  --dec-alfa: #199e70;
  --dec-otros: #93918a;
  --dec-desconocido: #3d3c38;
  --dec-estable-suave: #2b2b29;
  --dec-beta-menos-suave: #14263c;
  --dec-beta-mas-suave: #331a11;
  --dec-alfa-suave: #10281f;
  --dec-otros-suave: #292927;

  --proton: #d95926;
  --neutron: #93918a;
  --electron: #3987e5;

  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
}