:root {
  --marca-base-crema: #FCF6EB;
  --marca-base-esparrago: #ECEABE;
  --marca-base-lechuga: #AADD66;
  --marca-base-siempreverde: #125B49;
  --marca-base-verde-coach: #003527;
  --marca-base-medianoche: #051914;
  --alerta-amarilla-base: #F5C400;
  --alerta-naranja-base: #EE7D22;
  --alerta-roja-base: #B3261E;
  --ideam-ir-morado: #7D017D;
  --ideam-ir-rosa: #FF7FCA;
  --ideam-ir-rojo: #FE0000;
  --ideam-ir-naranja: #FF9900;
  --ideam-ir-amarillo: #FFFE00;
  --ideam-ir-verde: #00FF01;
  --ideam-ir-azul: #00A6CE;
  --ideam-ir-gris: #7C7C7C;
  --ideam-ir-blanco: #FFFFFF;
  --ideam-ir-negro: #000000;

  --fondo-base: var(--marca-base-crema, #FCF6EB);
  --fondo-superficie: var(--marca-base-esparrago, #ECEABE);
  --fondo-elevado: var(--marca-base-crema, #FCF6EB);
  --fondo-imagen: var(--marca-base-medianoche, #051914);
  --borde-sutil: var(--marca-base-esparrago, #ECEABE);
  --borde-fuerte: var(--marca-base-siempreverde, #125B49);
  --texto-principal: var(--marca-base-medianoche, #051914);
  --texto-secundario: var(--marca-base-siempreverde, #125B49);
  --acento-interactivo: var(--marca-base-siempreverde, #125B49);
  --acento-texto-sobre: var(--marca-base-crema, #FCF6EB);

  --alerta-amarilla-relleno: var(--alerta-amarilla-base, #F5C400);
  --alerta-naranja-relleno: var(--alerta-naranja-base, #EE7D22);
  --alerta-roja-relleno: var(--alerta-roja-base, #B3261E);
  --alerta-contorno: var(--texto-principal);
  --alerta-contorno-ancho: 1px;
  --alerta-amarilla-contorno: var(--alerta-contorno);
  --alerta-naranja-contorno: var(--alerta-contorno);
  --alerta-roja-contorno: var(--alerta-contorno);
  --alerta-amarilla: var(--alerta-amarilla-relleno);
  --alerta-amarilla-texto: var(--marca-base-medianoche, #051914);
  --alerta-naranja: var(--alerta-naranja-relleno);
  --alerta-naranja-texto: var(--marca-base-medianoche, #051914);
  --alerta-roja: var(--alerta-roja-relleno);
  --alerta-roja-texto: var(--marca-base-crema, #FCF6EB);
  --acento-sol: var(--marca-base-siempreverde, #125B49);

  --espacio-2: 2px;
  --espacio-4: 4px;
  --espacio-8: 8px;
  --espacio-12: 12px;
  --espacio-16: 16px;
  --espacio-24: 24px;
  --espacio-32: 32px;
  --espacio-48: 48px;
  --espacio-64: 64px;
  --radio-0: 0px;
  --radio-s: 2px;
  --radio-m: 4px;
  --radio-l: 8px;
  --radio-pildora: 999px;
  --margen: 16px;
  --columnas: 4;
  --separacion-columnas: 12px;
  --ancho-contenido-max: 390px;

  --mov-rapido: 80ms;
  --mov-corto: 120ms;
  --mov-base: 240ms;
  --mov-conteo: 600ms;
  --mov-pulso: 1200ms;
  --curva-pulso: cubic-bezier(0.4, 0, 0.6, 1);
  --curva-salida: cubic-bezier(0.2, 0, 0, 1);
  --curva-desacelera: cubic-bezier(0, 0, 0, 1);

  --fuente-interfaz: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --fuente-datos: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  color-scheme: light;
}

@media (min-width: 600px) {
  :root { --margen: 24px; --columnas: 8; --separacion-columnas: 16px; --ancho-contenido-max: 768px; }
}
@media (min-width: 1024px) {
  :root { --margen: 32px; --columnas: 12; --separacion-columnas: 24px; --ancho-contenido-max: 1376px; }
}

[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo-base: var(--marca-base-medianoche, #051914);
  --fondo-superficie: var(--marca-base-verde-coach, #003527);
  --fondo-elevado: var(--marca-base-siempreverde, #125B49);
  --fondo-imagen: var(--marca-base-medianoche, #051914);
  --borde-sutil: var(--marca-base-siempreverde, #125B49);
  --borde-fuerte: var(--marca-base-esparrago, #ECEABE);
  --texto-principal: var(--marca-base-crema, #FCF6EB);
  --texto-secundario: var(--marca-base-esparrago, #ECEABE);
  --acento-interactivo: var(--marca-base-lechuga, #AADD66);
  --acento-texto-sobre: var(--marca-base-medianoche, #051914);

  --alerta-amarilla-relleno: var(--alerta-amarilla-base, #F5C400);
  --alerta-naranja-relleno: var(--alerta-naranja-base, #EE7D22);
  --alerta-roja-relleno: var(--alerta-roja-base, #B3261E);
  --alerta-contorno: var(--texto-principal);
  --alerta-contorno-ancho: 1px;
  --alerta-amarilla-contorno: var(--alerta-contorno);
  --alerta-naranja-contorno: var(--alerta-contorno);
  --alerta-roja-contorno: var(--alerta-contorno);
  --alerta-amarilla: var(--alerta-amarilla-relleno);
  --alerta-amarilla-texto: var(--marca-base-medianoche, #051914);
  --alerta-naranja: var(--alerta-naranja-relleno);
  --alerta-naranja-texto: var(--marca-base-medianoche, #051914);
  --alerta-roja: var(--alerta-roja-relleno);
  --alerta-roja-texto: var(--marca-base-crema, #FCF6EB);
  --acento-sol: var(--marca-base-esparrago, #ECEABE);
}

@media (prefers-reduced-motion: reduce) {
  :root { --mov-base: 120ms; --mov-conteo: 0ms; }
}