/* Themes Stylesheet - Electric Neon Portfolio */

/* Neon Theme (Default) */
.neon-theme {
    --neon-primary: #00F7FF;
    --neon-secondary: #FF00C8;
    --neon-highlight: #0AFF0A;
    --neon-soft: #FF00E6;
    --neon-cyan: #00F7FF;
    --neon-pink: #FF00C8;
    --neon-green: #0AFF0A;
    --neon-purple: #9D00FF;
    
    --bg-primary: #000212;
    --bg-secondary: #02010A;
    --bg-tertiary: #01050F;
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-glass-dark: rgba(0, 0, 0, 0.3);
    
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(0, 247, 255, 0.5);
    
    --shadow-glow: 0 0 20px rgba(0, 247, 255, 0.5);
    --shadow-glow-pink: 0 0 20px rgba(255, 0, 200, 0.5);
    --shadow-glow-green: 0 0 20px rgba(10, 255, 10, 0.5);
    
    --gradient-primary: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    --gradient-bg: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

/* Cyber Theme */
.cyber-theme {
    --neon-primary: #00F7FF;
    --neon-secondary: #0AFF0A;
    --neon-highlight: #FF00C8;
    --neon-soft: #00F7FF;
    --neon-cyan: #00F7FF;
    --neon-pink: #0AFF0A;
    --neon-green: #0AFF0A;
    --neon-purple: #0AFF0A;
    
    --bg-primary: #0A0A12;
    --bg-secondary: #050510;
    --bg-tertiary: #080815;
    --bg-glass: rgba(10, 255, 10, 0.05);
    --bg-glass-dark: rgba(0, 0, 0, 0.4);
    
    --text-primary: #00FF00;
    --text-secondary: #80FF80;
    --text-muted: #40C040;
    
    --border-primary: rgba(0, 255, 0, 0.2);
    --border-glow: rgba(0, 255, 0, 0.6);
    
    --shadow-glow: 0 0 20px rgba(0, 255, 0, 0.5);
    --shadow-glow-pink: 0 0 20px rgba(0, 255, 0, 0.4);
    --shadow-glow-green: 0 0 20px rgba(0, 255, 0, 0.6);
    
    --gradient-primary: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    --gradient-bg: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

/* Romantic Theme */
.romantic-theme {
    --neon-primary: #FF00C8;
    --neon-secondary: #FF69B4;
    --neon-highlight: #FF1493;
    --neon-soft: #FF00C8;
    --neon-cyan: #FF69B4;
    --neon-pink: #FF00C8;
    --neon-green: #FF1493;
    --neon-purple: #FF69B4;
    
    --bg-primary: #1A0014;
    --bg-secondary: #25001E;
    --bg-tertiary: #200019;
    --bg-glass: rgba(255, 105, 180, 0.05);
    --bg-glass-dark: rgba(0, 0, 0, 0.3);
    
    --text-primary: #FFB6C1;
    --text-secondary: #FF69B4;
    --text-muted: #DB7093;
    
    --border-primary: rgba(255, 105, 180, 0.2);
    --border-glow: rgba(255, 0, 200, 0.6);
    
    --shadow-glow: 0 0 20px rgba(255, 0, 200, 0.5);
    --shadow-glow-pink: 0 0 20px rgba(255, 105, 180, 0.5);
    --shadow-glow-green: 0 0 20px rgba(255, 20, 147, 0.5);
    
    --gradient-primary: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    --gradient-bg: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

/* Hacker Theme */
.hacker-theme {
    --neon-primary: #0AFF0A;
    --neon-secondary: #00FF00;
    --neon-highlight: #00F7FF;
    --neon-soft: #0AFF0A;
    --neon-cyan: #00FF00;
    --neon-pink: #0AFF0A;
    --neon-green: #0AFF0A;
    --neon-purple: #00FF00;
    
    --bg-primary: #001100;
    --bg-secondary: #000A00;
    --bg-tertiary: #000800;
    --bg-glass: rgba(0, 255, 0, 0.05);
    --bg-glass-dark: rgba(0, 0, 0, 0.5);
    
    --text-primary: #00FF00;
    --text-secondary: #80FF80;
    --text-muted: #40C040;
    
    --border-primary: rgba(0, 255, 0, 0.3);
    --border-glow: rgba(0, 255, 0, 0.7);
    
    --shadow-glow: 0 0 20px rgba(0, 255, 0, 0.6);
    --shadow-glow-pink: 0 0 20px rgba(0, 255, 0, 0.5);
    --shadow-glow-green: 0 0 20px rgba(0, 255, 0, 0.7);
    
    --gradient-primary: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    --gradient-bg: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

/* Night Theme */
.night-theme {
    --neon-primary: #1a1a2e;
    --neon-secondary: #16213e;
    --neon-highlight: #0f3460;
    --neon-soft: #1a1a2e;
    --neon-cyan: #16213e;
    --neon-pink: #0f3460;
    --neon-green: #1a1a2e;
    --neon-purple: #16213e;
    
    --bg-primary: #0a0a18;
    --bg-secondary: #050510;
    --bg-tertiary: #080815;
    --bg-glass: rgba(26, 26, 46, 0.1);
    --bg-glass-dark: rgba(0, 0, 0, 0.6);
    
    --text-primary: #e6e6e6;
    --text-secondary: #b3b3b3;
    --text-muted: #808080;
    
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(26, 26, 46, 0.8);
    
    --shadow-glow: 0 0 10px rgba(26, 26, 46, 0.3);
    --shadow-glow-pink: 0 0 10px rgba(22, 33, 62, 0.3);
    --shadow-glow-green: 0 0 10px rgba(15, 52, 96, 0.3);
    
    --gradient-primary: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    --gradient-bg: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

/* Theme Transition */
body {
    transition: background 0.5s ease, color 0.5s ease;
}

/* Theme-specific overrides */
.cyber-theme .profile-glow,
.cyber-theme .neon-rings .ring {
    animation-duration: 15s;
}

.romantic-theme .secret-btn {
    border-color: var(--neon-secondary);
    color: var(--neon-secondary);
}

.romantic-theme .secret-btn:hover {
    background: var(--neon-secondary);
    color: var(--bg-primary);
}

.hacker-theme .skill-progress {
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-highlight));
}

.night-theme .btn-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
}

.night-theme .social-link:hover i {
    color: var(--text-primary);
}

/* Theme Indicator */
.theme-indicator {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.theme-indicator-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.theme-indicator-dot.active {
    transform: scale(1.3);
    border-color: var(--text-primary);
}

.theme-indicator-dot.neon { background: var(--neon-primary); }
.theme-indicator-dot.cyber { background: var(--neon-secondary); }
.theme-indicator-dot.romantic { background: var(--neon-soft); }
.theme-indicator-dot.hacker { background: var(--neon-highlight); }
.theme-indicator-dot.night { background: var(--neon-cyan); }

/* Theme Preview Cards */
.theme-preview {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-glass);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    z-index: 2000;
    max-width: 400px;
    text-align: center;
}

.theme-preview.active {
    display: block;
}

.theme-preview-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.theme-preview-colors {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.theme-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
}

.theme-apply-btn {
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* Theme Transition Overlay */
.theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.theme-transition-overlay.active {
    opacity: 0.3;
}

/* Responsive Theme Controls */
@media (max-width: 768px) {
    .theme-indicator {
        top: auto;
        bottom: 100px;
        right: 20px;
        flex-direction: row;
    }
    
    .theme-preview {
        width: 90%;
        max-width: none;
    }
}