/* Autor: David (XRuppy) */
/* Tokens de diseño: colores, tipografía y espaciado. Dirección «Salvia sobrio» (aprobada por David
   el 2026-11-06). Tema = `data-tema` (claro | oscuro; sin atributo = sistema). Acento =
   `data-acento`. Ambos son preferencias del dispositivo, no de la BD. Contrastes comprobados:
   texto blanco sobre el acento claro >= 4,8 y texto oscuro sobre el acento del modo oscuro >= 7. */

:root {
  color-scheme: light dark;
  --bg: #f6f5f2;
  --panel: #ffffff;
  --texto: #2a2926;
  --suave: #6b675f;
  --linea: #e4e1da;
  --aviso: #8f5a12;
  --aviso-fondo: #f8eedb;
  --error: #b42318;
  --error-fondo: #fdecea;
  --sobre-acento: #ffffff;
  --a-claro: #4f7a62;
  --a-oscuro: #7fa58f;
  --a: var(--a-claro);

  --radio: 18px;
  --radio-chico: 12px;
  --espacio: 16px;
  --hueco: 24px; /* separación entre módulos: generosa a propósito */
  --fuente: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Valores derivados del acento activo (sirven igual en claro y oscuro). */
:root {
  --acento: var(--a);
  --acento-fondo: color-mix(in oklab, var(--a) 14%, var(--panel));
  --acento-texto: color-mix(in oklab, var(--a) 62%, var(--texto));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #141413;
    --panel: #1e1e1c;
    --texto: #ecebe6;
    --suave: #a29e94;
    --linea: #2f2e2b;
    --aviso: #e0a85a;
    --aviso-fondo: #2c2415;
    --error: #f97066;
    --error-fondo: #2e1715;
    --sobre-acento: #0c0c0b;
    --a: var(--a-oscuro);
  }
}

:root[data-tema="oscuro"] {
  --bg: #141413;
  --panel: #1e1e1c;
  --texto: #ecebe6;
  --suave: #a29e94;
  --linea: #2f2e2b;
  --aviso: #e0a85a;
  --aviso-fondo: #2c2415;
  --error: #f97066;
  --error-fondo: #2e1715;
  --sobre-acento: #0c0c0b;
  --a: var(--a-oscuro);
}

/* Acentos elegibles (turquesa, cian, rojo, magenta, fucsia, morado, naranja; salvia = defecto). */
:root[data-acento="turquesa"] { --a-claro: #0f766e; --a-oscuro: #2dd4bf; }
:root[data-acento="cian"]     { --a-claro: #0e7490; --a-oscuro: #22d3ee; }
:root[data-acento="rojo"]     { --a-claro: #c2263a; --a-oscuro: #fb7185; }
:root[data-acento="magenta"]  { --a-claro: #b5179e; --a-oscuro: #f472b6; }
:root[data-acento="fucsia"]   { --a-claro: #c0268c; --a-oscuro: #e879f9; }
:root[data-acento="morado"]   { --a-claro: #6d28d9; --a-oscuro: #a78bfa; }
:root[data-acento="naranja"]  { --a-claro: #c2410c; --a-oscuro: #fb923c; }