/* Theme System and Color Variables */
/* ========================================================================== */

/* CSS Custom Properties (Theme Variables) */
:root {
    /* Light Theme Colors */
    --bg-primary: #f8f9fa;
    --bg-secondary: #e9ecef;
    --bg-tertiary: #dee2e6;
    --bg-alt: #f1f3f5;
    --bg-surface: #ffffff;
    
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-tertiary: #495057;
    
    --accent-primary: #0d6efd;
    --accent-secondary: #198754;
    --accent-tertiary: #ffc107;
    
    --border-color: #dee2e6;
    --focus-color: #86b7fe;
    
    /* Shadow Colors */
    --shadow-soft: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-hard: rgba(0, 0, 0, 0.25);
    
    /* Semantic Colors */
    --success: #198754;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #0dcaf0;
    
    /* Performance Mode Colors */
    --perf-bg: #fff3cd;
    --perf-text: #856404;
    
    /* Animation Durations */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    
    /* Z-Index Scale */
    --z-modal: 1000;
    --z-header: 100;
    --z-tooltip: 500;
    --z-loading: 2000;
    --z-notification: 2000;
}

/* Dark Theme Colors */
[data-theme="dark"] {
    --bg-primary: #0b0d10;
    --bg-secondary: #151922;
    --bg-tertiary: #1e2430;
    --bg-alt: #0f1217;
    --bg-surface: #12161f;
    
    --text-primary: #e6edf3;
    --text-secondary: #9aa5b1;
    --text-tertiary: #c9d1d9;
    
    --accent-primary: #4cc9f0;
    --accent-secondary: #b5e48c;
    --accent-tertiary: #f4a261;
    
    --border-color: #2a3140;
    --focus-color: #76d2ff;
    
    --shadow-soft: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-hard: rgba(0, 0, 0, 0.5);
    
    --success: #2ecc71;
    --warning: #f1c40f;
    --danger: #e74c3c;
    --info: #3498db;
    
    --perf-bg: #2a2f1a;
    --perf-text: #d4edda;
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    --bg-primary: #000000;
    --bg-secondary: #ffffff;
    --bg-tertiary: #000000;
    --bg-alt: #ffffff;
    --bg-surface: #ffffff;
    
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-tertiary: #ffffff;
    
    --accent-primary: #ffff00;
    --accent-secondary: #00ff00;
    --accent-tertiary: #ff0000;
    
    --border-color: #ffffff;
    --focus-color: #ffff00;
    
    --shadow-soft: rgba(255, 255, 255, 0.5);
    --shadow-medium: rgba(255, 255, 255, 0.7);
    --shadow-hard: rgba(255, 255, 255, 0.9);
    
    --success: #00ff00;
    --warning: #ffff00;
    --danger: #ff0000;
    --info: #00ffff;
    
    --perf-bg: #ffff00;
    --perf-text: #000000;
}

/* Performance Mode Theme */
[data-performance="low"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #e9ecef;
    --bg-tertiary: #dee2e6;
    --bg-alt: #f1f3f5;
    --bg-surface: #ffffff;
    
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-tertiary: #495057;
    
    --accent-primary: #6c757d;
    --accent-secondary: #6c757d;
    --accent-tertiary: #6c757d;
    
    --border-color: #dee2e6;
    --focus-color: #86b7fe;
    
    --shadow-soft: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-hard: rgba(0, 0, 0, 0.15);
    
    --success: #6c757d;
    --warning: #6c757d;
    --danger: #6c757d;
    --info: #6c757d;
    
    --perf-bg: #fff3cd;
    --perf-text: #856404;
}

/* Theme Transitions */
:root {
    color-scheme: light dark;
    transition: background-color var(--transition-normal) ease,
                color var(--transition-normal) ease,
                border-color var(--transition-normal) ease,
                box-shadow var(--transition-normal) ease;
}

/* Theme-Specific Adjustments */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0b0d10;
        --bg-secondary: #151922;
        --bg-tertiary: #1e2430;
        --bg-alt: #0f1217;
        --bg-surface: #12161f;
        
        --text-primary: #e6edf3;
        --text-secondary: #9aa5b1;
        --text-tertiary: #c9d1d9;
        
        --accent-primary: #4cc9f0;
        --accent-secondary: #b5e48c;
        --accent-tertiary: #f4a261;
        
        --border-color: #2a3140;
        --focus-color: #76d2ff;
    }
}

/* Theme Detection and Fallback */
[data-theme="auto"] {
    /* This will be handled by JavaScript based on user preference */
}

/* Button Theme Variations */
.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

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

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-ghost:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Card Theme Variations */
.demo-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px var(--shadow-soft);
}

.demo-card.elevated {
    box-shadow: 0 12px 32px var(--shadow-medium);
}

.demo-card.performance-reduced {
    background: color-mix(in srgb, var(--bg-surface) 80%, var(--accent-primary) 20%);
    border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-primary) 30%);
}

/* Navigation Theme */
.nav-link {
    color: var(--text-primary);
    background: transparent;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--bg-secondary) 80%, var(--accent-primary) 20%);
    color: var(--accent-primary);
}

.nav-link.active {
    background: var(--accent-primary);
    color: white;
}

/* Header Theme */
.header {
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
}

/* Footer Theme */
.footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

/* Modal Theme */
.modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px var(--shadow-medium);
}

/* Loading Theme */
.loading {
    background: var(--bg-primary);
}

.spinner {
    border-top-color: var(--accent-primary);
    border-left-color: var(--accent-primary);
}

/* Focus and Selection Styles */
::selection {
    background: color-mix(in srgb, var(--accent-primary) 40%, transparent);
    color: var(--text-primary);
}

/* Scrollbar Theme */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Input and Form Theme */
input, select, textarea {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 30%, transparent);
}

/* Code and Preformatted Theme */
code, pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

pre {
    padding: 1rem;
    overflow: auto;
}

/* Notification Theme */
.notification {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.notification.success {
    border-left: 4px solid var(--success);
}

.notification.warning {
    border-left: 4px solid var(--warning);
}

.notification.error {
    border-left: 4px solid var(--danger);
}

.notification.info {
    border-left: 4px solid var(--info);
}

/* Performance Indicator Theme */
.low-spec-indicator {
    background: var(--perf-bg);
    color: var(--perf-text);
    border-color: color-mix(in srgb, var(--perf-bg) 50%, var(--perf-text) 50%);
}

/* Theme-Specific Typography */
body {
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 20%, transparent);
}

/* Accessibility Enhancements */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --focus-color: #000000;
    }
    
    [data-theme="dark"] {
        --border-color: #ffffff;
        --focus-color: #ffffff;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .nav-link {
        border: 1px solid transparent;
    }
    
    .nav-link:hover, .nav-link:focus {
        border-color: var(--text-primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition-normal: 0.01ms;
        --transition-slow: 0.01ms;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Color Vision Deficiency Support */
.cvd-friendly {
    filter: color-blindness(protanopia 0.5);
}

/* Theme Utilities */
.theme-light {
    --bg-primary: #f8f9fa;
    --text-primary: #212529;
    --accent-primary: #0d6efd;
}

.theme-dark {
    --bg-primary: #0b0d10;
    --text-primary: #e6edf3;
    --accent-primary: #4cc9f0;
}

.theme-auto {
    /* JavaScript will determine the theme */
}

/* Performance Mode Utilities */
.performance-low-spec {
    filter: grayscale(0.2) contrast(0.95);
    opacity: 0.98;
}

.performance-reduced-animations {
    animation-duration: 0.5s !important;
    animation-iteration-count: 1 !important;
}

.performance-minimal {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* Print Styles */
@media print {
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #ffffff;
        --text-primary: #000000;
        --accent-primary: #000000;
        --border-color: #000000;
    }
    
    .header, .footer, .demo-visual canvas, .loading, .modal {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
    
    .btn {
        border: 1px solid #000000 !important;
        background: white !important;
        color: #000000 !important;
    }
}