/* ==================================================================
   TEMAS DE COLOR
   Cada tema define sus colores como tripletas RGB y sus tipografías.
   El tema activo se elige en el panel (Ajustes > Apariencia) y se
   aplica con <html data-tema="...">.
   Para crear un tema nuevo: copie un bloque, cambie el nombre y
   regístrelo en includes/helpers.php -> temas().

   --b-*  color principal ("brand")
   --g-*  color de acento (botones, cifras, brillos)
   ================================================================== */

/* Todos los temas son oscuros: se declara para que los navegadores con
   "modo oscuro forzado" (Samsung Internet, Chrome Android) no los alteren. */
:root { color-scheme: dark; }

/* ---------- Tema 1: Esmeralda Imperial (diseño original) ---------- */
:root,
[data-tema="esmeralda"] {
  --b-100: 209 250 229;
  --b-200: 167 243 208;
  --b-300: 110 231 183;
  --b-400: 52 211 153;
  --b-500: 16 185 129;
  --b-600: 5 150 105;
  --b-700: 4 120 87;
  --b-800: 6 95 70;
  --b-900: 6 78 59;
  --b-950: 2 44 34;

  --g-100: 254 249 195;
  --g-200: 254 240 138;
  --g-300: 253 224 71;
  --g-400: 250 204 21;
  --g-500: 234 179 8;
  --g-600: 202 138 4;
  --g-700: 161 98 7;
  --g-claro: 255 253 228;

  --f-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-marquee: "Calistoga", Georgia, serif;
  --f-display: "Outfit", system-ui, sans-serif;
}

/* ---------- Tema 2: Neón Carbono (fibra de carbono + verde neón) ---------- */
[data-tema="carbono"] {
  --b-100: 214 255 236;
  --b-200: 170 255 214;
  --b-300: 110 255 184;
  --b-400: 52 211 153;
  --b-500: 0 230 118;
  --b-600: 0 200 83;
  --b-700: 0 150 64;
  --b-800: 26 26 26;
  --b-900: 15 15 15;
  --b-950: 5 5 5;

  --g-100: 220 255 238;
  --g-200: 160 255 207;
  --g-300: 90 255 170;
  --g-400: 0 255 136;
  --g-500: 0 230 118;
  --g-600: 0 200 83;
  --g-700: 0 140 60;
  --g-claro: 235 255 245;

  --f-sans: "Montserrat", system-ui, sans-serif;
  --f-marquee: "Montserrat", system-ui, sans-serif;
  --f-display: "Outfit", system-ui, sans-serif;
}