/* ===========================================================================
   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: #7a7871;
  --texto-inverso: #fcfcfb;

  /* --- Acento de la interfaz (no es color de datos) --- */
  --acento: #2a78d6;
  --acento-suave: #eaf1fc;
  --foco: #2a78d6;

  /* --- 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;
    --foco: #3987e5;

    --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. */
:root[data-tema="oscuro"] {
  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;
  --foco: #3987e5;

  --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%);
}