/**
 * Web Rádio - Temas Claro e Escuro
 * Sistema de alternância de temas com transições suaves
 * Desenvolvido por programador com 30 anos de experiência
 */

/* Transições globais para mudança de tema */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* TEMA ESCURO (Padrão - inspirado no Spotify) */
.theme-dark {
    /* Cores de fundo */
    --bg-primary: #121212;
    --bg-secondary: #181818;
    --bg-tertiary: #282828;
    --bg-card: #1e1e1e;
    --bg-hover: #2a2a2a;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Cores do texto */
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #6b6b6b;
    
    /* Cores de acento */
    --spotify-green: #1DB954;
    --spotify-green-hover: #1ed760;
    --spotify-green-dark: #1aa34a;
    
    --accent-blue: #1976d2;
    --accent-purple: #8e24aa;
    --accent-orange: #f57c00;
    --accent-red: #d32f2f;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--spotify-green) 0%, var(--accent-blue) 100%);
    --gradient-card: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
    --gradient-header: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(24, 24, 24, 0.95) 100%);
    
    /* Sombras */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-player: 0 -4px 20px rgba(0, 0, 0, 0.6);
    
    /* Bordas */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
}

/* TEMA CLARO (Inspirado no Spotify Light Mode) */
.theme-light {
    /* Cores de fundo */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f4;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    
    /* Cores do texto */
    --text-primary: #191414;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    /* Cores de acento (mantém o verde do Spotify) */
    --spotify-green: #1DB954;
    --spotify-green-hover: #1ed760;
    --spotify-green-dark: #1aa34a;
    
    --accent-blue: #0d6efd;
    --accent-purple: #6f42c1;
    --accent-orange: #fd7e14;
    --accent-red: #dc3545;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--spotify-green) 0%, var(--accent-blue) 100%);
    --gradient-card: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
    --gradient-header: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(248, 249, 250, 0.95) 100%);
    
    /* Sombras */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-player: 0 -4px 20px rgba(0, 0, 0, 0.1);
    
    /* Bordas */
    --border-color: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.15);
}

/* Ajustes específicos para tema claro */
.theme-light .loading-screen {
    background: var(--bg-primary);
}

.theme-light .header {
    background: var(--gradient-header);
    border-bottom: 1px solid var(--border-color);
}

.theme-light .player-section {
    border: 1px solid var(--border-color);
}

.theme-light .music-history {
    border: 1px solid var(--border-color);
}

.theme-light .station-card {
    border: 1px solid var(--border-color);
}

.theme-light .station-card:hover {
    border-color: var(--border-hover);
}

.theme-light .modal-content {
    border: 1px solid var(--border-color);
}

.theme-light .notification {
    border: 1px solid var(--border-color);
}

/* Progress bar no tema claro */
.theme-light .progress-bar {
    background: rgba(0, 0, 0, 0.1);
}

.theme-light .volume-slider {
    background: rgba(0, 0, 0, 0.1);
}

/* Scrollbar para tema claro */
.theme-light ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.theme-light ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
}

.theme-light ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Botão de alternância de tema */
#theme-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 2px;
}

#theme-toggle:hover {
    border-color: var(--spotify-green);
    box-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
}

#theme-toggle::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 2px;
    box-shadow: var(--shadow-small);
}

.theme-light #theme-toggle::before {
    transform: translateX(28px);
    background: var(--spotify-green);
}

/* Ícones do tema */
.theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.theme-icon.sun {
    right: 6px;
    color: var(--accent-orange);
    opacity: 0;
}

.theme-icon.moon {
    left: 6px;
    color: var(--text-secondary);
    opacity: 1;
}

.theme-light .theme-icon.sun {
    opacity: 1;
}

.theme-light .theme-icon.moon {
    opacity: 0;
}

/* Animações específicas para mudança de tema */
@keyframes themeSwitch {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.theme-switching {
    animation: themeSwitch 0.3s ease;
}

/* Efeito de ondulação no botão de tema */
#theme-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--spotify-green) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

#theme-toggle:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
}

/* Ajustes para elementos específicos em cada tema */

/* Album cover border no tema claro */
.theme-light .album-cover {
    border: 2px solid var(--border-color);
}

.theme-light .history-cover,
.theme-light .station-logo,
.theme-light .modal-cover {
    border: 1px solid var(--border-color);
}

/* Controles do player no tema claro */
.theme-light .control-btn {
    border: 1px solid var(--border-color);
}

.theme-light .control-btn:hover {
    border-color: var(--border-hover);
}

/* Quality dropdown no tema claro */
.theme-light .quality-options {
    border: 1px solid var(--border-color);
}

/* Radio wave animation color adjustment */
.theme-light .radio-wave .wave {
    background: var(--spotify-green);
}

/* Loading text color */
.theme-light .loading-content h2 {
    color: var(--text-secondary);
}

/* Hover effects específicos para tema claro */
.theme-light .history-item:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-small);
}

.theme-light .station-card:hover {
    box-shadow: var(--shadow-medium);
}

/* Media queries para preferência do sistema */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }
}

/* Ajustes para contraste e acessibilidade */
@media (prefers-contrast: high) {
    .theme-dark {
        --text-secondary: #e0e0e0;
        --text-muted: #a0a0a0;
        --border-color: rgba(255, 255, 255, 0.3);
    }
    
    .theme-light {
        --text-secondary: #404040;
        --text-muted: #606060;
        --border-color: rgba(0, 0, 0, 0.3);
    }
}

/* Ajustes para movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    
    .album-cover.rotating {
        animation: none !important;
    }
    
    .radio-wave .wave {
        animation: none !important;
        height: 20px !important;
    }
}

/* Classes utilitárias para temas */
.theme-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.no-transition {
    transition: none !important;
}

/* Estados especiais */
.theme-auto {
    /* Detecta automaticamente baseado na preferência do sistema */
}

@media (prefers-color-scheme: dark) {
    .theme-auto {
        --bg-primary: #121212;
        --bg-secondary: #181818;
        --bg-tertiary: #282828;
        --bg-card: #1e1e1e;
        --bg-hover: #2a2a2a;
        --text-primary: #ffffff;
        --text-secondary: #b3b3b3;
        --text-muted: #6b6b6b;
    }
}

@media (prefers-color-scheme: light) {
    .theme-auto {
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --bg-tertiary: #e9ecef;
        --bg-card: #ffffff;
        --bg-hover: #f1f3f4;
        --text-primary: #191414;
        --text-secondary: #6c757d;
        --text-muted: #adb5bd;
    }
}