/**
 * Infoskjerm Theme System
 * Dark/Light Mode Support with CSS Custom Properties
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ============================================================================ */

/* Dark Theme (Default) */
:root,
.theme-dark {
    /* Colors */
    --theme-primary: #00e6e6;
    --theme-secondary: #ff00ff;
    --theme-accent: #00ffff;
    --theme-success: #00ff88;
    --theme-warning: #ffaa00;
    --theme-error: #ff4757;
    --theme-info: #00d4ff;
    
    /* Background Colors */
    --theme-bg-primary: #0a0a0a;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-tertiary: #2a2a2a;
    --theme-bg-surface: rgba(26, 26, 26, 0.8);
    --theme-bg-glass: rgba(0, 0, 0, 0.6);
    --theme-bg-overlay: rgba(0, 0, 0, 0.9);
    
    /* Text Colors */
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #e0e0e0;
    --theme-text-tertiary: #b0b0b0;
    --theme-text-inverse: #000000;
    --theme-text-accent: #00e6e6;
    
    /* Border Colors */
    --theme-border-primary: rgba(0, 230, 230, 0.3);
    --theme-border-secondary: rgba(255, 0, 255, 0.3);
    --theme-border-accent: rgba(0, 255, 255, 0.5);
    --theme-border-subtle: rgba(255, 255, 255, 0.1);
    
    /* Shadow Colors */
    --theme-shadow-primary: rgba(0, 230, 230, 0.3);
    --theme-shadow-secondary: rgba(255, 0, 255, 0.3);
    --theme-shadow-accent: rgba(0, 255, 255, 0.5);
    --theme-shadow-dark: rgba(0, 0, 0, 0.8);
    
    /* Gradient Colors */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    --theme-gradient-secondary: linear-gradient(45deg, var(--theme-accent), var(--theme-primary));
    --theme-gradient-surface: linear-gradient(135deg, var(--theme-bg-secondary), var(--theme-bg-tertiary));
    
    /* Animation Colors */
    --theme-glow-primary: 0 0 20px var(--theme-shadow-primary);
    --theme-glow-secondary: 0 0 20px var(--theme-shadow-secondary);
    --theme-glow-accent: 0 0 30px var(--theme-shadow-accent);
    
    /* Background Effects */
    --theme-stars: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.8"/><circle cx="80" cy="40" r="1" fill="%23ffffff" opacity="0.6"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.4"/></svg>');
    --theme-twinkling: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="30" cy="30" r="0.5" fill="%2300e6e6" opacity="0.8"/><circle cx="70" cy="20" r="0.5" fill="%23ff00ff" opacity="0.6"/></svg>');
}

/* Light Theme */
.theme-light {
    /* Colors */
    --theme-primary: #0066cc;
    --theme-secondary: #cc0066;
    --theme-accent: #0099ff;
    --theme-success: #00aa44;
    --theme-warning: #ff8800;
    --theme-error: #cc0000;
    --theme-info: #0088cc;
    
    /* Background Colors */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-bg-tertiary: #e9ecef;
    --theme-bg-surface: rgba(248, 249, 250, 0.9);
    --theme-bg-glass: rgba(255, 255, 255, 0.8);
    --theme-bg-overlay: rgba(255, 255, 255, 0.95);
    
    /* Text Colors */
    --theme-text-primary: #333333;
    --theme-text-secondary: #555555;
    --theme-text-tertiary: #777777;
    --theme-text-inverse: #ffffff;
    --theme-text-accent: #0066cc;
    
    /* Border Colors */
    --theme-border-primary: rgba(0, 102, 204, 0.3);
    --theme-border-secondary: rgba(204, 0, 102, 0.3);
    --theme-border-accent: rgba(0, 153, 255, 0.5);
    --theme-border-subtle: rgba(0, 0, 0, 0.1);
    
    /* Shadow Colors */
    --theme-shadow-primary: rgba(0, 102, 204, 0.2);
    --theme-shadow-secondary: rgba(204, 0, 102, 0.2);
    --theme-shadow-accent: rgba(0, 153, 255, 0.3);
    --theme-shadow-dark: rgba(0, 0, 0, 0.1);
    
    /* Gradient Colors */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    --theme-gradient-secondary: linear-gradient(45deg, var(--theme-accent), var(--theme-primary));
    --theme-gradient-surface: linear-gradient(135deg, var(--theme-bg-secondary), var(--theme-bg-tertiary));
    
    /* Animation Colors */
    --theme-glow-primary: 0 0 15px var(--theme-shadow-primary);
    --theme-glow-secondary: 0 0 15px var(--theme-shadow-secondary);
    --theme-glow-accent: 0 0 20px var(--theme-shadow-accent);
    
    /* Background Effects */
    --theme-stars: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%230066cc" opacity="0.3"/><circle cx="80" cy="40" r="1" fill="%23cc0066" opacity="0.2"/></svg>');
    --theme-twinkling: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="30" cy="30" r="0.5" fill="%230099ff" opacity="0.4"/><circle cx="70" cy="20" r="0.5" fill="%230066cc" opacity="0.3"/></svg>');
}

/* ============================================================================
   THEME TRANSITIONS
   ============================================================================ */

/* Smooth theme transitions */
* {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.3s ease;
}

/* ============================================================================
   BASE THEME STYLES
   ============================================================================ */

body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    font-family: 'Roboto', sans-serif;
}

/* Background Effects */
.stars {
    background: var(--theme-bg-primary);
    background-image: var(--theme-stars);
    background-size: 200px 200px;
    animation: stars 20s linear infinite;
}

.twinkling {
    background: transparent;
    background-image: var(--theme-twinkling);
    background-size: 150px 150px;
    animation: twinkling 10s linear infinite;
}

@keyframes stars {
    from { background-position: 0 0; }
    to { background-position: 200px 200px; }
}

@keyframes twinkling {
    from { background-position: 0 0; }
    to { background-position: 150px 150px; }
}

/* ============================================================================
   COMPONENT STYLES
   ============================================================================ */

/* Glass Effect */
.glass-effect {
    background: var(--theme-bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--theme-border-subtle);
    box-shadow: 0 8px 32px var(--theme-shadow-dark);
}

/* Cards */
.card {
    background: var(--theme-bg-surface);
    border: 1px solid var(--theme-border-primary);
    border-radius: 10px;
    color: var(--theme-text-primary);
    box-shadow: var(--theme-glow-primary);
}

.card:hover {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-glow-accent);
    transform: translateY(-5px);
}

/* Buttons */
.btn-primary {
    background: var(--theme-gradient-primary);
    border: 1px solid var(--theme-border-primary);
    color: var(--theme-text-inverse);
    box-shadow: var(--theme-glow-primary);
}

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

.btn-secondary {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-secondary);
    color: var(--theme-text-primary);
}

.btn-secondary:hover {
    background: var(--theme-bg-tertiary);
    box-shadow: var(--theme-glow-secondary);
}

/* Form Elements */
input, textarea, select {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-primary);
    border-radius: 5px;
    padding: 8px 12px;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: var(--theme-glow-primary);
}

/* Links */
a {
    color: var(--theme-text-accent);
    text-decoration: none;
}

a:hover {
    color: var(--theme-primary);
    text-shadow: var(--theme-glow-primary);
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    color: var(--theme-text-primary);
    font-family: 'Orbitron', sans-serif;
}

h1 {
    text-shadow: var(--theme-glow-primary);
}

h2 {
    color: var(--theme-accent);
    border-bottom: 1px solid var(--theme-border-accent);
}

/* Neon Effects */
.neon-blue {
    color: var(--theme-primary);
    text-shadow: var(--theme-glow-primary);
}

.neon-pink {
    color: var(--theme-secondary);
    text-shadow: var(--theme-glow-secondary);
}

.neon-green {
    color: var(--theme-success);
    text-shadow: 0 0 20px var(--theme-success);
}

.neon-red {
    color: var(--theme-error);
    text-shadow: 0 0 20px var(--theme-error);
}

/* ============================================================================
   THEME-SPECIFIC ADJUSTMENTS
   ============================================================================ */

/* Dark Theme Specific */
.theme-dark .stars {
    opacity: 1;
}

.theme-dark .twinkling {
    opacity: 0.8;
}

.theme-dark .glass-effect {
    background: rgba(26, 26, 26, 0.8);
}

/* Light Theme Specific */
.theme-light .stars {
    opacity: 0.3;
}

.theme-light .twinkling {
    opacity: 0.2;
}

.theme-light .glass-effect {
    background: rgba(255, 255, 255, 0.9);
}

.theme-light .clouds {
    opacity: 0.1;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    :root {
        --theme-glow-primary: 0 0 10px var(--theme-shadow-primary);
        --theme-glow-secondary: 0 0 10px var(--theme-shadow-secondary);
        --theme-glow-accent: 0 0 15px var(--theme-shadow-accent);
    }
    
    .card {
        margin: 10px;
        padding: 15px;
    }
    
    .glass-effect {
        backdrop-filter: blur(5px);
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --theme-border-primary: currentColor;
        --theme-border-secondary: currentColor;
        --theme-border-subtle: currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    
    .stars,
    .twinkling {
        animation: none !important;
    }
}

/* ============================================================================
   THEME TOGGLE BUTTON
   ============================================================================ */

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 80px; /* Adjust based on language selector position */
    z-index: 1000;
    background: var(--theme-bg-surface);
    border: 1px solid var(--theme-border-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: var(--theme-glow-primary);
}

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

.theme-toggle:active {
    transform: scale(0.95);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        top: 10px;
        right: 70px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}