/**
 * Temas de color — CubaJazz
 *
 * Cambiar tema por defecto del sitio: config.js → SITE_THEME
 * Crear tema propio: copia un bloque [data-theme="..."] y edita los colores.
 * Nombres disponibles: jazz, oceano, atardecer, selva, lavanda, medianoche
 */

:root,
[data-theme="jazz"] {
  --bg-deep: #0a0908;
  --bg-card: #141210;
  --bg-elevated: #1c1916;
  --gold: #c9a962;
  --gold-light: #e8d5a3;
  --gold-dim: #8a7340;
  --gold-rgb: 201, 169, 98;
  --cream: #f5f0e6;
  --cream-muted: #a89f8f;
  --accent: #c45c3e;
  --accent-rgb: 196, 92, 62;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --border: rgba(var(--gold-rgb), 0.12);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  --hero-glow-1: rgba(var(--gold-rgb), 0.08);
  --hero-glow-2: rgba(var(--accent-rgb), 0.06);
  --btn-shadow: rgba(var(--gold-rgb), 0.3);
  --play-bg: rgba(var(--gold-rgb), 0.9);
}

[data-theme="oceano"] {
  --bg-deep: #060d14;
  --bg-card: #0c1824;
  --bg-elevated: #122233;
  --gold: #5eb8d4;
  --gold-light: #a8e0f0;
  --gold-dim: #3a7a94;
  --gold-rgb: 94, 184, 212;
  --cream: #e8f4fa;
  --cream-muted: #7a9eb0;
  --accent: #e07a4a;
  --accent-rgb: 224, 122, 74;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --border: rgba(var(--gold-rgb), 0.14);
  --shadow: 0 24px 64px rgba(0, 20, 40, 0.55);
  --hero-glow-1: rgba(var(--gold-rgb), 0.1);
  --hero-glow-2: rgba(var(--accent-rgb), 0.07);
  --btn-shadow: rgba(var(--gold-rgb), 0.35);
  --play-bg: rgba(var(--gold-rgb), 0.9);
}

[data-theme="atardecer"] {
  --bg-deep: #120a08;
  --bg-card: #1e100c;
  --bg-elevated: #2a1812;
  --gold: #e8a85c;
  --gold-light: #ffd9a8;
  --gold-dim: #a66e38;
  --gold-rgb: 232, 168, 92;
  --cream: #fff5eb;
  --cream-muted: #b8957a;
  --accent: #c44d6d;
  --accent-rgb: 196, 77, 109;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --border: rgba(var(--gold-rgb), 0.14);
  --shadow: 0 24px 64px rgba(40, 10, 0, 0.5);
  --hero-glow-1: rgba(var(--gold-rgb), 0.1);
  --hero-glow-2: rgba(var(--accent-rgb), 0.08);
  --btn-shadow: rgba(var(--gold-rgb), 0.35);
  --play-bg: rgba(var(--gold-rgb), 0.92);
}

[data-theme="selva"] {
  --bg-deep: #060c08;
  --bg-card: #0e1a12;
  --bg-elevated: #152618;
  --gold: #8fbc6e;
  --gold-light: #c8e8a8;
  --gold-dim: #5a8044;
  --gold-rgb: 143, 188, 110;
  --cream: #eef6e8;
  --cream-muted: #8aa87a;
  --accent: #d4a03c;
  --accent-rgb: 212, 160, 60;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --border: rgba(var(--gold-rgb), 0.14);
  --shadow: 0 24px 64px rgba(0, 30, 10, 0.5);
  --hero-glow-1: rgba(var(--gold-rgb), 0.09);
  --hero-glow-2: rgba(var(--accent-rgb), 0.07);
  --btn-shadow: rgba(var(--gold-rgb), 0.32);
  --play-bg: rgba(var(--gold-rgb), 0.9);
}

[data-theme="lavanda"] {
  --bg-deep: #0c0a12;
  --bg-card: #16121e;
  --bg-elevated: #201a2a;
  --gold: #b8a0d8;
  --gold-light: #e0d0f8;
  --gold-dim: #7a68a0;
  --gold-rgb: 184, 160, 216;
  --cream: #f4f0fa;
  --cream-muted: #9a8eb0;
  --accent: #d87898;
  --accent-rgb: 216, 120, 152;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --border: rgba(var(--gold-rgb), 0.14);
  --shadow: 0 24px 64px rgba(20, 0, 40, 0.5);
  --hero-glow-1: rgba(var(--gold-rgb), 0.1);
  --hero-glow-2: rgba(var(--accent-rgb), 0.07);
  --btn-shadow: rgba(var(--gold-rgb), 0.32);
  --play-bg: rgba(var(--gold-rgb), 0.9);
}

[data-theme="medianoche"] {
  --bg-deep: #020408;
  --bg-card: #0a0e18;
  --bg-elevated: #121828;
  --gold: #6a8cff;
  --gold-light: #a8c0ff;
  --gold-dim: #4466cc;
  --gold-rgb: 106, 140, 255;
  --cream: #e8eeff;
  --cream-muted: #7888aa;
  --accent: #ff6b8a;
  --accent-rgb: 255, 107, 138;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --border: rgba(var(--gold-rgb), 0.12);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  --hero-glow-1: rgba(var(--gold-rgb), 0.08);
  --hero-glow-2: rgba(var(--accent-rgb), 0.06);
  --btn-shadow: rgba(var(--gold-rgb), 0.35);
  --play-bg: rgba(var(--gold-rgb), 0.88);
}

/* ─── Tema personalizado (edita los colores aquí) ───
[data-theme="personalizado"] {
  --bg-deep: #0a0908;
  --bg-card: #141210;
  --bg-elevated: #1c1916;
  --gold: #c9a962;
  --gold-light: #e8d5a3;
  --gold-dim: #8a7340;
  --gold-rgb: 201, 169, 98;
  --cream: #f5f0e6;
  --cream-muted: #a89f8f;
  --accent: #c45c3e;
  --accent-rgb: 196, 92, 62;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --border: rgba(var(--gold-rgb), 0.12);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  --hero-glow-1: rgba(var(--gold-rgb), 0.08);
  --hero-glow-2: rgba(var(--accent-rgb), 0.06);
  --btn-shadow: rgba(var(--gold-rgb), 0.3);
  --play-bg: rgba(var(--gold-rgb), 0.9);
}
─── Fin tema personalizado ─── */