/* Toda la paleta vive aquí. Las páginas usan únicamente nombres semánticos. */
:root {
  --claro-fondo: #f8fafc;
  --claro-superficie: #ffffff;
  --claro-texto: #0f172a;
  --claro-secundario: #536379;
  --claro-enlace: #4f46e5;
  --claro-borde: #64748b;
  --claro-boton: #4f46e5;
  --claro-boton-texto: #ffffff;
  --claro-deshabilitado: #535d70;
  --claro-error: #b4232b;
  --claro-pie: #f8fafc;
  --claro-aviso: #704500;
  --claro-provisorio: #ffffff;
  --claro-definitivo: #ffffff;
  --claro-exito: #145630;
  --claro-foco: #4f46e5;
  --oscuro-fondo: #0b0d12;
  --oscuro-superficie: #14171f;
  --oscuro-texto: #edf2f8;
  --oscuro-secundario: #b9c8db;
  --oscuro-enlace: #a7ceff;
  --oscuro-borde: #8495ad;
  --oscuro-boton: #82dfc5;
  --oscuro-boton-texto: #092b25;
  --oscuro-deshabilitado: #b9c8db;
  --oscuro-error: #ffb4b4;
  --oscuro-pie: #14171f;
  --oscuro-aviso: #ffd889;
  --oscuro-provisorio: #503700;
  --oscuro-definitivo: #123e2b;
  --oscuro-exito: #a3f0c0;
  --oscuro-foco: #a7ceff;
  --barra-fondo: #ffffff;
  --barra-texto: #0f172a;
  --marco-fondo: #ffffff;
  --primario: #4f46e5;
  --primario-hover: #4338ca;
  --positivo: #10b981;
  --positivo-texto: #087b55;
  --negativo: #e5484d;
  --aviso-acento: #f59e0b;
  --texto-secundario: #64748b;
  --borde-suave: #e2e8f0;
  --anillo: #a5b4fc;
  --blanco: #ffffff;
  --oscuro-borde-suave: #262a35;
  --radio: 8px;
  --radio-tarjeta: 12px;
  --espacio-uno: 4px;
  --espacio-dos: 8px;
  --espacio-tres: 16px;
  --espacio-cuatro: 24px;
  --espacio-cinco: 32px;
  --fuente: 'Inter', system-ui, sans-serif;
  --fuente-titulo: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --texto-xs: 12px;
  --texto-base: 14px;
  --texto-lg: 16px;
  --titulo-sm: 20px;
  --titulo: 28px;
  --titulo-xl: 40px;
  --sombra: 0 8px 24px color-mix(in srgb, var(--texto) 8%, transparent);
  --fondo: var(--claro-fondo);
  --superficie: var(--claro-superficie);
  --texto: var(--claro-texto);
  --secundario: var(--claro-secundario);
  --enlace: var(--claro-enlace);
  --borde: var(--claro-borde);
  --boton: var(--claro-boton);
  --boton-texto: var(--claro-boton-texto);
  --deshabilitado: var(--claro-deshabilitado);
  --error: var(--claro-error);
  --pie: var(--claro-pie);
  --aviso: var(--claro-aviso);
  --provisorio: var(--claro-provisorio);
  --definitivo: var(--claro-definitivo);
  --exito: var(--claro-exito);
  --foco: var(--claro-foco);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]) {
    --fondo: var(--oscuro-fondo);
    --superficie: var(--oscuro-superficie);
    --texto: var(--oscuro-texto);
    --secundario: var(--oscuro-secundario);
    --enlace: var(--oscuro-enlace);
    --borde: var(--oscuro-borde);
    --boton: var(--oscuro-boton);
    --boton-texto: var(--oscuro-boton-texto);
    --deshabilitado: var(--oscuro-deshabilitado);
    --error: var(--oscuro-error);
    --pie: var(--oscuro-pie);
    --aviso: var(--oscuro-aviso);
    --provisorio: var(--oscuro-provisorio);
    --definitivo: var(--oscuro-definitivo);
    --exito: var(--oscuro-exito);
    --foco: var(--oscuro-foco);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: var(--oscuro-fondo);
  --superficie: var(--oscuro-superficie);
  --texto: var(--oscuro-texto);
  --secundario: var(--oscuro-secundario);
  --enlace: var(--oscuro-enlace);
  --borde: var(--oscuro-borde);
  --boton: var(--oscuro-boton);
  --boton-texto: var(--oscuro-boton-texto);
  --deshabilitado: var(--oscuro-deshabilitado);
  --error: var(--oscuro-error);
  --pie: var(--oscuro-pie);
  --aviso: var(--oscuro-aviso);
  --provisorio: var(--oscuro-provisorio);
  --definitivo: var(--oscuro-definitivo);
  --exito: var(--oscuro-exito);
  --foco: var(--oscuro-foco);
  color-scheme: dark;
}

:root[data-tema="oscuro"] { --borde-suave: var(--oscuro-borde-suave); --positivo-texto: var(--oscuro-exito); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]) { --borde-suave: var(--oscuro-borde-suave); --positivo-texto: var(--oscuro-exito); }
}