/* CSS Variables for Theme System */

/* Light Mode (Default) */
:root {
    /* Primary Colors */
    --primary-color: #4A90E2;
    --primary-hover: #357ABD;
    --secondary-color: #E94B3C;
    --secondary-hover: #D2342A;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-card: #FFFFFF;
    --bg-header: rgba(255, 255, 255, 0.95);
    --bg-footer: #F8F9FA;
    --bg-canvas: #F5F7FA;
    --bg-hover: #F0F2F5;
    --bg-hero-start: #667EEA;
    --bg-hero-end: #764BA2;
    
    /* Text Colors */
    --text-primary: #2C3E50;
    --text-secondary: #6C757D;
    --text-muted: #ADB5BD;
    --text-inverse: #FFFFFF;
    
    /* Border Colors */
    --border-color: #DEE2E6;
    --border-light: #E9ECEF;
    --border-dark: #CED4DA;
    
    /* Status Colors */
    --success-color: #28A745;
    --warning-color: #FFC107;
    --error-color: #DC3545;
    --info-color: #17A2B8;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-hero: linear-gradient(135deg, var(--bg-hero-start), var(--bg-hero-end));
    --gradient-card: linear-gradient(145deg, #FFFFFF, #F8F9FA);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-overlay: rgba(0, 0, 0, 0.6);
    
    /* Typography */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Performance Settings */
    --particle-count: 100;
    --animation-complexity: high;
    --visual-quality: high;
}

/* Dark Mode */
[data-theme="dark"] {
    /* Primary Colors (slightly adjusted for dark mode) */
    --primary-color: #5BA0F2;
    --primary-hover: #4A90E2;
    --secondary-color: #F55A4B;
    --secondary-hover: #E94B3C;
    
    /* Background Colors */
    --bg-primary: #1A1D23;
    --bg-secondary: #22262E;
    --bg-card: #2A2F38;
    --bg-header: rgba(26, 29, 35, 0.95);
    --bg-footer: #22262E;
    --bg-canvas: #2A2F38;
    --bg-hover: #3A3F48;
    --bg-hero-start: #434343;
    --bg-hero-end: #000000;
    
    /* Text Colors */
    --text-primary: #E9ECEF;
    --text-secondary: #ADB5BD;
    --text-muted: #6C757D;
    --text-inverse: #2C3E50;
    
    /* Border Colors */
    --border-color: #495057;
    --border-light: #343A40;
    --border-dark: #6C757D;
    
    /* Status Colors (adjusted for dark mode) */
    --success-color: #48BB78;
    --warning-color: #ED8936;
    --error-color: #F56565;
    --info-color: #38B2AC;
    
    /* Shadows (more pronounced in dark mode) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-hero: linear-gradient(135deg, var(--bg-hero-start), var(--bg-hero-end));
    --gradient-card: linear-gradient(145deg, #2A2F38, #22262E);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-overlay: rgba(0, 0, 0, 0.8);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0066CC;
        --primary-hover: #0052A3;
        --secondary-color: #CC0000;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #000000;
        --bg-primary: #FFFFFF;
        --bg-card: #FFFFFF;
    }
    
    [data-theme="dark"] {
        --primary-color: #66B3FF;
        --primary-hover: #4D94FF;
        --secondary-color: #FF6666;
        --text-primary: #FFFFFF;
        --text-secondary: #CCCCCC;
        --border-color: #FFFFFF;
        --bg-primary: #000000;
        --bg-card: #000000;
    }
}

/* Color Blind Friendly Mode */
[data-theme="colorblind"] {
    --primary-color: #0066CC;
    --secondary-color: #FF9900;
    --success-color: #00AA00;
    --warning-color: #FF6600;
    --error-color: #CC0000;
    --info-color: #0099CC;
}

/* Performance Mode Theme Adjustments */
.performance-mode {
    --particle-count: 30;
    --animation-complexity: low;
    --visual-quality: medium;
    
    /* Simplified gradients */
    --gradient-primary: var(--primary-color);
    --gradient-hero: linear-gradient(135deg, var(--bg-hero-start), var(--bg-hero-end));
    --gradient-card: var(--bg-card);
    
    /* Reduced shadows */
    --shadow-sm: none;
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Theme Transition */
* {
    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 Toggle Button Styling */
.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.theme-toggle:active::before {
    width: 100px;
    height: 100px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

/* Selection Text */
::selection {
    background: var(--primary-color);
    color: var(--text-inverse);
}

::-moz-selection {
    background: var(--primary-color);
    color: var(--text-inverse);
}

/* Focus Styles (Improved for accessibility) */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Placeholder Text */
::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Alternative Theme Presets */

/* Ocean Theme */
[data-theme="ocean"] {
    --primary-color: #006994;
    --secondary-color: #00A8CC;
    --bg-primary: #E8F4F8;
    --bg-secondary: #D1E7DD;
    --bg-hero-start: #006994;
    --bg-hero-end: #00A8CC;
    --text-primary: #00394D;
}

/* Forest Theme */
[data-theme="forest"] {
    --primary-color: #2D5016;
    --secondary-color: #73A942;
    --bg-primary: #F0F7E6;
    --bg-secondary: #E6F0D3;
    --bg-hero-start: #2D5016;
    --bg-hero-end: #73A942;
    --text-primary: #1A2F0A;
}

/* Sunset Theme */
[data-theme="sunset"] {
    --primary-color: #FF6B35;
    --secondary-color: #F7931E;
    --bg-primary: #FFF5F0;
    --bg-secondary: #FFE8D6;
    --bg-hero-start: #FF6B35;
    --bg-hero-end: #F7931E;
    --text-primary: #4A2C2C;
}

/* Space Theme */
[data-theme="space"] {
    --primary-color: #6C5CE7;
    --secondary-color: #A29BFE;
    --bg-primary: #0F0E1A;
    --bg-secondary: #1A1A2E;
    --bg-hero-start: #0F0E1A;
    --bg-hero-end: #6C5CE7;
    --text-primary: #E8E8E8;
}

/* Theme Animation Classes */
.theme-transition-enter {
    animation: themeTransitionEnter 0.3s ease-out;
}

.theme-transition-exit {
    animation: themeTransitionExit 0.3s ease-in;
}

@keyframes themeTransitionEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes themeTransitionExit {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Responsive Theme Adjustments */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }
}

/* Print Styles */
@media print {
    :root {
        --bg-primary: #FFFFFF;
        --text-primary: #000000;
        --primary-color: #000000;
    }
    
    * {
        color: var(--text-primary) !important;
        background: var(--bg-primary) !important;
        box-shadow: none !important;
    }
}