/* Light Theme (Default) */
:root,
[data-theme="light"] {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #f1f3f4;
    --bg-active: #e8eaed;
    
    /* Text colors */
    --text-primary: #1a1a1a;
    --text-secondary: #5f6368;
    --text-tertiary: #80868b;
    --text-inverse: #ffffff;
    
    /* Border colors */
    --border-color: #dadce0;
    --border-hover: #bdc1c6;
    --border-focus: #1a73e8;
    
    /* Accent colors */
    --accent-color: #1a73e8;
    --accent-color-hover: #1557b0;
    --accent-color-alpha: rgba(26, 115, 232, 0.12);
    
    /* Status colors */
    --success-color: #137333;
    --success-bg: #e6f4ea;
    --warning-color: #ea8600;
    --warning-bg: #fef7e0;
    --error-color: #d93025;
    --error-bg: #fce8e6;
    --info-color: #1a73e8;
    --info-bg: #e8f0fe;
    
    /* Syntax highlighting */
    --syntax-keyword: #1976d2;
    --syntax-string: #388e3c;
    --syntax-number: #f57c00;
    --syntax-comment: #757575;
    --syntax-operator: #424242;
    --syntax-punctuation: #616161;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --bg-hover: #353535;
    --bg-active: #404040;
    
    /* Text colors */
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --text-tertiary: #80868b;
    --text-inverse: #1a1a1a;
    
    /* Border colors */
    --border-color: #5f6368;
    --border-hover: #80868b;
    --border-focus: #8ab4f8;
    
    /* Accent colors */
    --accent-color: #8ab4f8;
    --accent-color-hover: #aecbfa;
    --accent-color-alpha: rgba(138, 180, 248, 0.12);
    
    /* Status colors */
    --success-color: #81c995;
    --success-bg: #1e3a2e;
    --warning-color: #fdd663;
    --warning-bg: #3d2f00;
    --error-color: #f28b82;
    --error-bg: #3b1f1c;
    --info-color: #8ab4f8;
    --info-bg: #1e3a8a;
    
    /* Syntax highlighting */
    --syntax-keyword: #82b1ff;
    --syntax-string: #c3e88d;
    --syntax-number: #ffcb6b;
    --syntax-comment: #546e7a;
    --syntax-operator: #89ddff;
    --syntax-punctuation: #eeffff;
}

/* Theme Toggle Animation */
html {
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

* {
    transition: background-color var(--transition-fast), 
                border-color var(--transition-fast), 
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* Theme Icon Visibility */
.theme-icon {
    transition: opacity var(--transition-fast);
}

[data-theme="light"] .theme-icon--dark {
    opacity: 0;
    position: absolute;
}

[data-theme="dark"] .theme-icon--light {
    opacity: 0;
    position: absolute;
}

[data-theme="light"] .theme-icon--light {
    opacity: 1;
}

[data-theme="dark"] .theme-icon--dark {
    opacity: 1;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root,
    [data-theme="light"] {
        --border-color: #000000;
        --text-secondary: #000000;
        --bg-hover: #f0f0f0;
    }
    
    [data-theme="dark"] {
        --border-color: #ffffff;
        --text-secondary: #ffffff;
        --bg-hover: #404040;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Color Scheme Preference */
@media (prefers-color-scheme: dark) {
    :root {
        /* Automatically apply dark theme if user prefers dark mode */
        /* This will be overridden by explicit theme selection */
    }
}

/* Print Styles */
@media print {
    :root {
        /* Force light theme for printing */
        --bg-primary: #ffffff;
        --bg-secondary: #ffffff;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #cccccc;
    }
    
    .sidebar,
    .app__header,
    .modal,
    .toast-container {
        display: none !important;
    }
    
    .content {
        width: 100% !important;
        max-width: none !important;
    }
}