/* ===================================
   THEME SYSTEM - 4 Variants
   Light, Dark, Warm, Cool
   =================================== */

/* === Light Theme (Default) - Desaturated & Elegant === */
:root[data-theme="light"] {
    /* Primary Colors - More desaturated blue-gray */
    --primary: #64748b;
    --primary-light: #94a3b8;
    --primary-dark: #475569;
    --primary-rgb: 100, 116, 139;
    
    /* Accent - Muted purple-gray */
    --accent: #8b9dc3;
    --accent-light: #a8b5d1;
    --accent-rgb: 139, 157, 195;
    
    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #ffffff;
    
    /* Borders */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-soft: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}

/* === Dark Theme - Desaturated & Elegant === */
:root[data-theme="dark"] {
    /* Primary Colors - Muted slate-blue */
    --primary: #7c93b6;
    --primary-light: #9daec8;
    --primary-dark: #64748b;
    --primary-rgb: 124, 147, 182;
    
    /* Accent - Soft lavender-gray */
    --accent: #a8b5d1;
    --accent-light: #c5d0e3;
    --accent-rgb: 168, 181, 209;
    
    /* Text */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    
    /* Backgrounds */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-elevated: #1e293b;
    
    /* Borders */
    --border-primary: #334155;
    --border-secondary: #475569;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    
    /* Glass Effects */
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-soft: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* === Warm Theme - Desaturated & Elegant === */
:root[data-theme="warm"] {
    /* Primary Colors - Muted terracotta */
    --primary: #b8856a;
    --primary-light: #c9a18a;
    --primary-dark: #9d6b52;
    --primary-rgb: 184, 133, 106;
    
    /* Accent - Soft sand */
    --accent: #c4a57b;
    --accent-light: #d4b896;
    --accent-rgb: 196, 165, 123;
    
    /* Text */
    --text-primary: #292524;
    --text-secondary: #57534e;
    --text-tertiary: #a8a29e;
    
    /* Backgrounds - Softer cream tones */
    --bg-primary: #faf8f3;
    --bg-secondary: #f5f2ea;
    --bg-tertiary: #eee9dd;
    --bg-elevated: #fffbeb;
    
    /* Borders */
    --border-primary: #fde047;
    --border-secondary: #facc15;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(180, 83, 9, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(180, 83, 9, 0.15), 0 2px 4px -1px rgba(180, 83, 9, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(180, 83, 9, 0.2), 0 4px 6px -2px rgba(180, 83, 9, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(180, 83, 9, 0.25), 0 10px 10px -5px rgba(180, 83, 9, 0.15);
    
    /* Glass Effects */
    --glass-bg: rgba(254, 252, 232, 0.8);
    --glass-border: rgba(253, 224, 71, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-accent: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --gradient-soft: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

/* === Cool Theme - Desaturated & Elegant === */
:root[data-theme="cool"] {
    /* Primary Colors - Muted sage-blue */
    --primary: #7a9ca6;
    --primary-light: #96b3bc;
    --primary-dark: #5f7d85;
    --primary-rgb: 122, 156, 166;
    
    /* Accent - Soft mint-gray */
    --accent: #8fa99a;
    --accent-light: #a8bfb0;
    --accent-rgb: 143, 169, 154;
    
    /* Text */
    --text-primary: #0c4a6e;
    --text-secondary: #075985;
    --text-tertiary: #7dd3fc;
    
    /* Backgrounds - Softer aqua tones */
    --bg-primary: #f5f9f9;
    --bg-secondary: #ecf3f3;
    --bg-tertiary: #dfe9e9;
    --bg-elevated: #f0fdfa;
    
    /* Borders */
    --border-primary: #67e8f9;
    --border-secondary: #22d3ee;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(8, 145, 178, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(8, 145, 178, 0.15), 0 2px 4px -1px rgba(8, 145, 178, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(8, 145, 178, 0.2), 0 4px 6px -2px rgba(8, 145, 178, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(8, 145, 178, 0.25), 0 10px 10px -5px rgba(8, 145, 178, 0.15);
    
    /* Glass Effects */
    --glass-bg: rgba(236, 254, 255, 0.8);
    --glass-border: rgba(103, 232, 249, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-soft: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

/* === Theme Switcher Component === */
.theme-switcher {
    position: fixed;
    top: 100px;
    right: 2rem;
    z-index: 1000;
}

.theme-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--text-primary);
}

.theme-menu {
    position: absolute;
    top: 60px;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.5rem;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xl);
}

.theme-switcher:hover .theme-menu,
.theme-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.theme-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.theme-option.active {
    background: var(--primary);
    color: white;
}

.theme-preview {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    flex-shrink: 0;
}

.theme-preview-light {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.theme-preview-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.theme-preview-warm {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
}

.theme-preview-cool {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
}

/* === Smooth Theme Transitions === */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Prevent transition on page load */
.preload * {
    transition: none !important;
}

/* === Language Switcher === */
.language-switcher {
    position: fixed;
    top: 170px;
    right: 2rem;
    z-index: 1000;
}

.language-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.language-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

.current-lang {
    font-size: 0.875rem;
    font-weight: 700;
}

.language-menu {
    position: absolute;
    top: 60px;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.5rem;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xl);
}

.language-switcher:hover .language-menu,
.language-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.language-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.language-option.active {
    background: var(--primary);
    color: white;
}

.lang-flag {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
    .theme-switcher {
        top: auto;
        bottom: 2rem;
        right: 1rem;
    }
    
    .theme-toggle {
        width: 56px;
        height: 56px;
    }
    
    .theme-menu {
        right: auto;
        left: 0;
        bottom: 70px;
        top: auto;
    }
    
    .language-switcher {
        top: auto;
        bottom: 90px;
        right: 1rem;
    }
    
    .language-toggle {
        width: 56px;
        height: 56px;
    }
    
    .language-menu {
        right: auto;
        left: 0;
        bottom: 70px;
        top: auto;
    }
}