/**
 * RetroWeather Theme Styles
 * Multiple retro themes for user customization
 */

/* Base theme variables */
:root {
    --primary-bg: #000033;
    --secondary-bg: rgba(0, 0, 0, 0.8);
    --primary-color: #00FFFF;
    --secondary-color: #FFFF00;
    --accent-color: #FF00FF;
    --success-color: #00FF00;
    --error-color: #FF0000;
    --text-color: #00FFFF;
    --border-color: #00FFFF;
    --shadow-color: #00FFFF;
    --gradient-start: #00FF00;
    --gradient-end: #00FFFF;
}

/* Classic Retro Theme (Default) */
body.theme-retro-classic {
    --primary-bg: #000033;
    --secondary-bg: rgba(0, 0, 0, 0.8);
    --primary-color: #00FFFF;
    --secondary-color: #FFFF00;
    --accent-color: #FF00FF;
    --success-color: #00FF00;
    --text-color: #00FFFF;
    --border-color: #00FFFF;
    --shadow-color: #00FFFF;
    --gradient-start: #00FF00;
    --gradient-end: #00FFFF;
}

/* Neon Nights Theme */
body.theme-neon-nights {
    --primary-bg: #0a0014;
    --secondary-bg: rgba(10, 0, 20, 0.8);
    --primary-color: #FF00FF;
    --secondary-color: #00FF00;
    --accent-color: #00FFFF;
    --success-color: #00FF00;
    --text-color: #FF00FF;
    --border-color: #FF00FF;
    --shadow-color: #FF00FF;
    --gradient-start: #FF00FF;
    --gradient-end: #00FF00;
}

/* Cyber Punk Theme */
body.theme-cyber-punk {
    --primary-bg: #1a0014;
    --secondary-bg: rgba(26, 0, 20, 0.8);
    --primary-color: #FF0080;
    --secondary-color: #80FF00;
    --accent-color: #FFD700;
    --success-color: #80FF00;
    --text-color: #FF0080;
    --border-color: #FF0080;
    --shadow-color: #FF0080;
    --gradient-start: #FF0080;
    --gradient-end: #80FF00;
}

/* Retro Terminal Theme */
body.theme-retro-terminal {
    --primary-bg: #000000;
    --secondary-bg: rgba(0, 0, 0, 0.9);
    --primary-color: #00FF00;
    --secondary-color: #00FF00;
    --accent-color: #00FF00;
    --success-color: #00FF00;
    --text-color: #00FF00;
    --border-color: #00FF00;
    --shadow-color: #00FF00;
    --gradient-start: #00FF00;
    --gradient-end: #00AA00;
}

/* Apply theme variables */
body[class*="theme-"] {
    background-color: var(--primary-bg);
    color: var(--text-color);
}

body[class*="theme-"] .retro-container {
    background-color: var(--primary-bg);
}

body[class*="theme-"] .retro-header {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 0 20px var(--shadow-color);
}

body[class*="theme-"] .retro-title {
    color: var(--secondary-color);
    text-shadow: 2px 2px var(--accent-color);
}

body[class*="theme-"] .retro-link {
    color: var(--primary-color);
}

body[class*="theme-"] .retro-link:hover {
    color: var(--secondary-color);
    text-shadow: 0 0 10px var(--shadow-color);
}

body[class*="theme-"] .retro-button {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: #000;
}

body[class*="theme-"] .retro-button:hover {
    box-shadow: 0 0 20px var(--shadow-color);
}

body[class*="theme-"] .weather-content {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 0 20px var(--shadow-color);
}

body[class*="theme-"] .current-weather {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
}

body[class*="theme-"] .forecast-section {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
}

body[class*="theme-"] .forecast-day {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

body[class*="theme-"] .forecast-day:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 0 10px var(--shadow-color);
}

body[class*="theme-"] .weather-details {
    color: var(--text-color);
}

body[class*="theme-"] .detail-value {
    color: var(--secondary-color);
}

body[class*="theme-"] input,
body[class*="theme-"] select {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--success-color);
    color: var(--success-color);
}

body[class*="theme-"] input:focus,
body[class*="theme-"] select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-color);
}

/* Special styles for terminal theme */
body.theme-retro-terminal {
    font-family: 'Courier New', monospace;
}

body.theme-retro-terminal * {
    text-shadow: 0 0 2px var(--primary-color);
}

body.theme-retro-terminal::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 0, 0.03),
        rgba(0, 255, 0, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;
}

/* Neon glow effects for neon theme */
body.theme-neon-nights .retro-title,
body.theme-neon-nights .retro-button,
body.theme-neon-nights .weather-emoji {
    animation: neon-flicker 2s infinite alternate;
}

@keyframes neon-flicker {
    0%, 100% {
        text-shadow: 
            0 0 5px var(--accent-color),
            0 0 10px var(--accent-color),
            0 0 15px var(--accent-color),
            0 0 20px var(--accent-color);
    }
    50% {
        text-shadow: 
            0 0 10px var(--accent-color),
            0 0 20px var(--accent-color),
            0 0 30px var(--accent-color),
            0 0 40px var(--accent-color);
    }
}

/* Cyber punk glitch effect */
body.theme-cyber-punk .retro-title {
    position: relative;
    animation: glitch 2s infinite;
}

body.theme-cyber-punk .retro-title::before,
body.theme-cyber-punk .retro-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

body.theme-cyber-punk .retro-title::before {
    animation: glitch-1 0.5s infinite;
    color: var(--accent-color);
    z-index: -1;
}

body.theme-cyber-punk .retro-title::after {
    animation: glitch-2 0.5s infinite;
    color: var(--success-color);
    z-index: -2;
}

@keyframes glitch {
    0%, 100% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
}

@keyframes glitch-1 {
    0%, 100% {
        clip-path: inset(20% 0 30% 0);
        transform: translate(-2px);
    }
    50% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(2px);
    }
}

@keyframes glitch-2 {
    0%, 100% {
        clip-path: inset(50% 0 20% 0);
        transform: translate(2px);
    }
    50% {
        clip-path: inset(30% 0 40% 0);
        transform: translate(-2px);
    }
}

/* Theme transition animations */
body[class*="theme-"] * {
    transition: 
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}