/* Rodo Web — tokens generados desde tokens.json. No edites valores aquí: cambia el sistema y vuelve a exportar. */

:root, [data-theme="claro"] {
  --verde: #22c55e;
  --verde-600: #16a34a;
  --verde-400: #4ade80;
  --bosque: #14532d;
  --noche: #052e16;
  --menta: #f0fdf4;
  --verde-gris: #436f51;
  --blanco: #ffffff;
  --violeta: #7c3aed;
  --violeta-profundo: #5b21b6;
  --violeta-claro: #c4b5fd;
  --lavanda: #f3f0ff;
  --linea-clara: #cfe9d8;
  --fondo: var(--menta);
  --fondo-alterno: #e2f5e8;
  --superficie: var(--blanco);
  --fondo-destacado: var(--bosque);
  --texto-sobre-destacado: var(--blanco);
  --texto-suave-destacado: #bfe3cb;
  --borde-destacado: #2f6e47;
  --texto: var(--bosque);
  --texto-suave: var(--verde-gris);
  --borde: #cfe9d8;
  --borde-control: var(--verde-gris);
  --primario: var(--verde);
  --primario-hover: var(--verde-600);
  --sobre-primario: var(--noche);
  --cifra: var(--bosque);
  --acento: var(--violeta);
  --acento-hover: var(--violeta-profundo);
  --sobre-acento: var(--blanco);
  --acento-texto: var(--violeta-profundo);
  --acento-suave: var(--lavanda);
  --foco: var(--bosque);
  --error: #b42318;
  --error-suave: #fdecea;
  --advertencia: #8a4b06;
  --advertencia-suave: #fef3c7;
  --exito: var(--bosque);
  --exito-suave: #dcfce7;
  --sombra: 0 8px 24px rgba(20, 83, 45, 0.10);
}

[data-theme="oscuro"] {
  --verde: #22c55e;
  --verde-600: #16a34a;
  --verde-400: #4ade80;
  --bosque: #14532d;
  --noche: #052e16;
  --menta: #f0fdf4;
  --verde-gris: #436f51;
  --blanco: #ffffff;
  --violeta: #7c3aed;
  --violeta-profundo: #5b21b6;
  --violeta-claro: #c4b5fd;
  --lavanda: #f3f0ff;
  --linea-clara: #cfe9d8;
  --fondo: var(--noche);
  --fondo-alterno: #0a3a1e;
  --superficie: #0f4325;
  --fondo-destacado: var(--bosque);
  --texto-sobre-destacado: var(--blanco);
  --texto-suave-destacado: #bfe3cb;
  --borde-destacado: #2f6e47;
  --texto: #ecfdf3;
  --texto-suave: #9fc2ab;
  --borde: #1f5c38;
  --borde-control: #7fa88d;
  --primario: var(--verde);
  --primario-hover: var(--verde-400);
  --sobre-primario: var(--noche);
  --cifra: var(--verde);
  --acento: var(--violeta-claro);
  --acento-hover: #ddd6fe;
  --sobre-acento: var(--noche);
  --acento-texto: var(--violeta-claro);
  --acento-suave: #2a1458;
  --foco: #ecfdf3;
  --error: #fda29b;
  --error-suave: #4a1512;
  --advertencia: #fcd34d;
  --advertencia-suave: #3d2e06;
  --exito: var(--verde-400);
  --exito-suave: #0e4a26;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Sin elección guardada, sigue la preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --verde: #22c55e;
    --verde-600: #16a34a;
    --verde-400: #4ade80;
    --bosque: #14532d;
    --noche: #052e16;
    --menta: #f0fdf4;
    --verde-gris: #436f51;
    --blanco: #ffffff;
    --violeta: #7c3aed;
    --violeta-profundo: #5b21b6;
    --violeta-claro: #c4b5fd;
    --lavanda: #f3f0ff;
    --linea-clara: #cfe9d8;
    --fondo: var(--noche);
    --fondo-alterno: #0a3a1e;
    --superficie: #0f4325;
    --fondo-destacado: var(--bosque);
    --texto-sobre-destacado: var(--blanco);
    --texto-suave-destacado: #bfe3cb;
    --borde-destacado: #2f6e47;
    --texto: #ecfdf3;
    --texto-suave: #9fc2ab;
    --borde: #1f5c38;
    --borde-control: #7fa88d;
    --primario: var(--verde);
    --primario-hover: var(--verde-400);
    --sobre-primario: var(--noche);
    --cifra: var(--verde);
    --acento: var(--violeta-claro);
    --acento-hover: #ddd6fe;
    --sobre-acento: var(--noche);
    --acento-texto: var(--violeta-claro);
    --acento-suave: #2a1458;
    --foco: #ecfdf3;
    --error: #fda29b;
    --error-suave: #4a1512;
    --advertencia: #fcd34d;
    --advertencia-suave: #3d2e06;
    --exito: var(--verde-400);
    --exito-suave: #0e4a26;
    --sombra: 0 8px 24px rgba(0, 0, 0, 0.45);
      color-scheme: dark;
  }
}

:root {
  --espacio-4: 4px;
  --espacio-8: 8px;
  --espacio-16: 16px;
  --espacio-24: 24px;
  --espacio-32: 32px;
  --espacio-48: 48px;
  --espacio-64: 64px;
  --espacio-96: 96px;
  --radio: 12px;
  --radio-tarjeta: 16px;
  --radio-etiqueta: 999px;
  --ancho-contenido: 1200px;
  --ancho-parrafo: 680px;
  --margen-movil: 16px;
  --margen-tablet: 32px;
  --gutter-movil: 16px;
  --gutter: 24px;
  --seccion-movil: 64px;
  --seccion-escritorio: 96px;
  --font-titulos: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}