/* Apex Music Latino — Genre Theme System */
/* Each genre gets its own CSS custom properties */

:root {
    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --bg-primary: #131313;
    --bg-surface: #1c1b1b;
    --bg-surface-high: #2a2a2a;
    --bg-surface-highest: #353534;
    --text-primary: #e5e2e1;
    --text-muted: #a0a0a0;
    --text-dim: #666;
    --accent: #00ff41;
    --accent-glow: rgba(0, 255, 65, 0.3);
    --accent-dark: #007117;
    --gradient-start: #00ff41;
    --gradient-end: #00e3fd;
}

/* Reggaeton — Hot pink / magenta */
[data-genre="reggaeton"] {
    --accent: #ff007b;
    --accent-glow: rgba(255, 0, 123, 0.3);
    --accent-dark: #6e0031;
    --gradient-start: #ff007b;
    --gradient-end: #ffbe0b;
}

/* Tango — Crimson red */
[data-genre="tango"] {
    --accent: #e60000;
    --accent-glow: rgba(230, 0, 0, 0.3);
    --accent-dark: #8b0000;
    --gradient-start: #e60000;
    --gradient-end: #8b0000;
}

/* Rap — Electric blue / ice */
[data-genre="rap"] {
    --accent: #00d4ff;
    --accent-glow: rgba(0, 212, 255, 0.3);
    --accent-dark: #005f73;
    --gradient-start: #00d4ff;
    --gradient-end: #7b2ff7;
}

/* Rock — Amber / fire */
[data-genre="rock"] {
    --accent: #ff6b00;
    --accent-glow: rgba(255, 107, 0, 0.3);
    --accent-dark: #7a3300;
    --gradient-start: #ff6b00;
    --gradient-end: #ff0000;
}

/* Electronic — Cyan / neon */
[data-genre="electronic"] {
    --accent: #00ffcc;
    --accent-glow: rgba(0, 255, 204, 0.3);
    --accent-dark: #007a62;
    --gradient-start: #00ffcc;
    --gradient-end: #7b2ff7;
}

/* Afro-Latin — Gold / warm */
[data-genre="afro-latin"] {
    --accent: #ffb800;
    --accent-glow: rgba(255, 184, 0, 0.3);
    --accent-dark: #7a5800;
    --gradient-start: #ffb800;
    --gradient-end: #ff6b00;
}

/* Utility classes using CSS variables */
body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.accent-text { color: var(--accent); }
.accent-bg { background: var(--accent); }
.accent-border { border-color: var(--accent); }
.accent-glow { box-shadow: 0 0 40px var(--accent-glow); }
.gradient-accent { background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); }

.glass-panel {
    background: rgba(53, 53, 52, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* Smooth transitions for genre switching */
* { transition-property: color, background-color, border-color, box-shadow; transition-duration: 0.3s; }