/* Theme Colors - Dinâmico via PHP/JS */
:root {
    --color-primary: #3498db;
    --color-secondary: #2c3e50;
    --color-accent: #e74c3c;
    --color-background: #f5f7fa;
    --color-card: #ffffff;
    --color-text: #333333;
    --color-text-light: #666666;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Tema Escuro */
.dark-mode {
    --color-primary: #3498db;
    --color-secondary: #2c3e50;
    --color-accent: #e74c3c;
    --color-background: #1a1a2e;
    --color-card: #16213e;
    --color-text: #e6e6e6;
    --color-text-light: #aaaaaa;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Tema Personalizado 1 */
.theme-custom-1 {
    --color-primary: #9b59b6;
    --color-secondary: #8e44ad;
    --color-accent: #e74c3c;
}

/* Tema Personalizado 2 */
.theme-custom-2 {
    --color-primary: #1abc9c;
    --color-secondary: #16a085;
    --color-accent: #e74c3c;
}

/* Tema Personalizado 3 */
.theme-custom-3 {
    --color-primary: #e67e22;
    --color-secondary: #d35400;
    --color-accent: #3498db;
}

/* Aplicar cores dinâmicas */
body {
    background-color: var(--color-background);
    color: var(--color-text);
}

.header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.card,
.player-section,
.main-nav {
    background-color: var(--color-card);
    color: var(--color-text);
}

.music-info h3,
.card h2 {
    color: var(--color-text);
}

.music-info p,
.np-info p {
    color: var(--color-text-light);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
}

.control-btn {
    background: var(--color-primary);
}

.control-btn:hover {
    background: var(--color-secondary);
}

.progress-bar {
    background: var(--color-primary);
}

.footer {
    background: var(--color-secondary);
}

.footer-section h3 {
    color: var(--color-primary);
}