/**
 * Themes.css - Theme Management Styles
 * Contains all theme definitions and theme switching functionality
 * 
 * @version 1.0.0
 * @author Taher
 */

/* CSS Custom Properties (Variables) for Theme System */
:root {
    /* Default Theme Variables */
    --vs-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    --vs-font-size-base: 13px;
    --vs-font-size-small: 11px;
    --vs-font-size-large: 15px;
    
    --vs-border-radius: 2px;
    --vs-border-radius-large: 4px;
    --vs-border-width: 1px;
    
    --vs-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12);
    --vs-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --vs-shadow-large: 0 10px 25px rgba(0, 0, 0, 0.15);
    --vs-shadow-focus: 0 0 0 2px rgba(0, 122, 204, 0.3);
    
    --vs-transition-fast: 0.15s ease;
    --vs-transition-normal: 0.2s ease;
    --vs-transition-slow: 0.3s ease;
    
    /* Default Dark Theme Colors */
    --vs-bg-primary: #1e1e1e;
    --vs-bg-secondary: #2d2d30;
    --vs-bg-tertiary: #3e3e42;
    --vs-bg-quaternary: #454545;
    --vs-bg-hover: #37373d;
    --vs-bg-active: #094771;
    --vs-bg-selected: #094771;
    
    --vs-fg-primary: #cccccc;
    --vs-fg-secondary: #969696;
    --vs-fg-tertiary: #6c6c6c;
    --vs-fg-quaternary: #484848;
    --vs-fg-disabled: #6c6c6c;
    --vs-fg-muted: #888888;
    
    --vs-border: #3e3e42;
    --vs-border-light: #484848;
    --vs-border-focus: #007acc;
    --vs-border-active: #007acc;
    
    --vs-accent: #007acc;
    --vs-accent-hover: #1177bb;
    --vs-accent-active: #005a9e;
    --vs-accent-light: #3794ff;
    --vs-accent-contrast: #ffffff;
    
    --vs-success: #4caf50;
    --vs-warning: #ff9800;
    --vs-error: #f44336;
    --vs-info: #2196f3;
    
    /* Status Colors */
    --vs-status-success: #89d185;
    --vs-status-warning: #ffcc00;
    --vs-status-error: #e51400;
    --vs-status-info: #4fc1ff;
    
    /* Scrollbar Colors */
    --vs-scrollbar-track: #2d2d30;
    --vs-scrollbar-thumb: #424242;
    --vs-scrollbar-thumb-hover: #4f4f4f;
    
    /* Code Editor Colors */
    --vs-editor-bg: #1e1e1e;
    --vs-editor-fg: #d4d4d4;
    --vs-editor-selection: #264f78;
    --vs-editor-cursor: #aeafad;
    --vs-editor-line-highlight: #282828;
    
    /* Syntax Highlighting */
    --vs-syntax-keyword: #569cd6;
    --vs-syntax-string: #ce9178;
    --vs-syntax-comment: #6a9955;
    --vs-syntax-number: #b5cea8;
    --vs-syntax-type: #4ec9b0;
    --vs-syntax-function: #dcdcaa;
    --vs-syntax-variable: #9cdcfe;
    --vs-syntax-operator: #d4d4d4;
    --vs-syntax-constant: #4fc1ff;
    
    /* Activity Bar */
    --vs-activitybar-bg: #2d2d30;
    --vs-activitybar-fg: #ffffff;
    --vs-activitybar-inactive: #6c6c6c;
    --vs-activitybar-hover: #37373d;
    
    /* Sidebar */
    --vs-sidebar-bg: #252526;
    --vs-sidebar-fg: #cccccc;
    --vs-sidebar-selection: #094771;
    --vs-sidebar-hover: #37373d;
    
    /* Panel */
    --vs-panel-bg: #1e1e1e;
    --vs-panel-fg: #cccccc;
    --vs-panel-border: #3e3e42;
    
    /* Tab */
    --vs-tab-bg: #2d2d30;
    --vs-tab-fg: #cccccc;
    --vs-tab-active-bg: #1e1e1e;
    --vs-tab-active-fg: #ffffff;
    --vs-tab-hover-bg: #37373d;
    
    /* Menu */
    --vs-menu-bg: #3c3c3c;
    --vs-menu-fg: #cccccc;
    --vs-menu-hover-bg: #094771;
    --vs-menu-hover-fg: #ffffff;
    
    /* Input */
    --vs-input-bg: #3c3c3c;
    --vs-input-fg: #cccccc;
    --vs-input-border: #3e3e42;
    --vs-input-placeholder: #6c6c6c;
    --vs-input-focus-border: #007acc;
    
    /* Button */
    --vs-button-bg: #0e639c;
    --vs-button-fg: #ffffff;
    --vs-button-hover-bg: #1177bb;
    --vs-button-disabled-bg: #3e3e42;
    --vs-button-disabled-fg: #6c6c6c;
}

/* Light Theme */
.vs-theme-light {
    --vs-bg-primary: #ffffff;
    --vs-bg-secondary: #f3f3f3;
    --vs-bg-tertiary: #e8e8e8;
    --vs-bg-quaternary: #e8e8e8;
    --vs-bg-hover: #f3f3f3;
    --vs-bg-active: #007acc;
    --vs-bg-selected: #007acc;
    
    --vs-fg-primary: #333333;
    --vs-fg-secondary: #666666;
    --vs-fg-tertiary: #999999;
    --vs-fg-quaternary: #cccccc;
    --vs-fg-disabled: #999999;
    --vs-fg-muted: #666666;
    
    --vs-border: #e8e8e8;
    --vs-border-light: #d0d0d0;
    --vs-border-focus: #007acc;
    --vs-border-active: #007acc;
    
    --vs-accent: #007acc;
    --vs-accent-hover: #005a9e;
    --vs-accent-active: #004578;
    --vs-accent-light: #4fc3f7;
    --vs-accent-contrast: #ffffff;
    
    --vs-success: #2e7d32;
    --vs-warning: #ef6c00;
    --vs-error: #d32f2f;
    --vs-info: #1976d2;
    
    --vs-status-success: #2e7d32;
    --vs-status-warning: #f57c00;
    --vs-status-error: #c62828;
    --vs-status-info: #1976d2;
    
    --vs-scrollbar-track: #f3f3f3;
    --vs-scrollbar-thumb: #c8c8c8;
    --vs-scrollbar-thumb-hover: #a8a8a8;
    
    --vs-editor-bg: #ffffff;
    --vs-editor-fg: #000000;
    --vs-editor-selection: #cce2ff;
    --vs-editor-cursor: #000000;
    --vs-editor-line-highlight: #f0f0f0;
    
    --vs-syntax-keyword: #0000ff;
    --vs-syntax-string: #a31515;
    --vs-syntax-comment: #008000;
    --vs-syntax-number: #098658;
    --vs-syntax-type: #267f99;
    --vs-syntax-function: #795e26;
    --vs-syntax-variable: #001080;
    --vs-syntax-operator: #000000;
    --vs-syntax-constant: #007acc;
    
    --vs-activitybar-bg: #2c2c2c;
    --vs-activitybar-fg: #ffffff;
    --vs-activitybar-inactive: #ffffff80;
    --vs-activitybar-hover: #37373d;
    
    --vs-sidebar-bg: #f3f3f3;
    --vs-sidebar-fg: #333333;
    --vs-sidebar-selection: #007acc;
    --vs-sidebar-hover: #e8e8e8;
    
    --vs-panel-bg: #ffffff;
    --vs-panel-fg: #333333;
    --vs-panel-border: #e8e8e8;
    
    --vs-tab-bg: #f3f3f3;
    --vs-tab-fg: #666666;
    --vs-tab-active-bg: #ffffff;
    --vs-tab-active-fg: #333333;
    --vs-tab-hover-bg: #e8e8e8;
    
    --vs-menu-bg: #ffffff;
    --vs-menu-fg: #333333;
    --vs-menu-hover-bg: #e8e8e8;
    --vs-menu-hover-fg: #000000;
    
    --vs-input-bg: #ffffff;
    --vs-input-fg: #333333;
    --vs-input-border: #e8e8e8;
    --vs-input-placeholder: #999999;
    --vs-input-focus-border: #007acc;
    
    --vs-button-bg: #007acc;
    --vs-button-fg: #ffffff;
    --vs-button-hover-bg: #005a9e;
    --vs-button-disabled-bg: #e8e8e8;
    --vs-button-disabled-fg: #999999;
}

/* High Contrast Theme */
.vs-theme-hc {
    --vs-bg-primary: #000000;
    --vs-bg-secondary: #1e1e1e;
    --vs-bg-tertiary: #2d2d30;
    --vs-bg-quaternary: #3e3e42;
    --vs-bg-hover: #37373d;
    --vs-bg-active: #ffff00;
    --vs-bg-selected: #ffff00;
    
    --vs-fg-primary: #ffffff;
    --vs-fg-secondary: #ffffff;
    --vs-fg-tertiary: #ffffff;
    --vs-fg-quaternary: #ffffff;
    --vs-fg-disabled: #ffffff;
    --vs-fg-muted: #ffffff;
    
    --vs-border: #ffffff;
    --vs-border-light: #ffffff;
    --vs-border-focus: #ffff00;
    --vs-border-active: #ffff00;
    
    --vs-accent: #ffff00;
    --vs-accent-hover: #ffff00;
    --vs-accent-active: #ffff00;
    --vs-accent-light: #ffff00;
    --vs-accent-contrast: #000000;
    
    --vs-success: #00ff00;
    --vs-warning: #ffff00;
    --vs-error: #ff0000;
    --vs-info: #00ffff;
    
    --vs-status-success: #00ff00;
    --vs-status-warning: #ffff00;
    --vs-status-error: #ff0000;
    --vs-status-info: #00ffff;
    
    --vs-scrollbar-track: #000000;
    --vs-scrollbar-thumb: #ffffff;
    --vs-scrollbar-thumb-hover: #ffff00;
    
    --vs-editor-bg: #000000;
    --vs-editor-fg: #ffffff;
    --vs-editor-selection: #ffff00;
    --vs-editor-cursor: #ffffff;
    --vs-editor-line-highlight: #1e1e1e;
    
    --vs-syntax-keyword: #00ffff;
    --vs-syntax-string: #00ff00;
    --vs-syntax-comment: #ffffff;
    --vs-syntax-number: #ffff00;
    --vs-syntax-type: #ff00ff;
    --vs-syntax-function: #ffffff;
    --vs-syntax-variable: #ffffff;
    --vs-syntax-operator: #ffffff;
    --vs-syntax-constant: #00ffff;
    
    --vs-activitybar-bg: #000000;
    --vs-activitybar-fg: #ffffff;
    --vs-activitybar-inactive: #ffffff;
    --vs-activitybar-hover: #1e1e1e;
    
    --vs-sidebar-bg: #000000;
    --vs-sidebar-fg: #ffffff;
    --vs-sidebar-selection: #ffff00;
    --vs-sidebar-hover: #1e1e1e;
    
    --vs-panel-bg: #000000;
    --vs-panel-fg: #ffffff;
    --vs-panel-border: #ffffff;
    
    --vs-tab-bg: #1e1e1e;
    --vs-tab-fg: #ffffff;
    --vs-tab-active-bg: #000000;
    --vs-tab-active-fg: #ffffff;
    --vs-tab-hover-bg: #2d2d30;
    
    --vs-menu-bg: #000000;
    --vs-menu-fg: #ffffff;
    --vs-menu-hover-bg: #ffff00;
    --vs-menu-hover-fg: #000000;
    
    --vs-input-bg: #000000;
    --vs-input-fg: #ffffff;
    --vs-input-border: #ffffff;
    --vs-input-placeholder: #ffffff;
    --vs-input-focus-border: #ffff00;
    
    --vs-button-bg: #ffff00;
    --vs-button-fg: #000000;
    --vs-button-hover-bg: #ffff00;
    --vs-button-disabled-bg: #666666;
    --vs-button-disabled-fg: #999999;
}

/* Additional Color Themes */

/* Solarized Dark Theme */
.vs-theme-solarized-dark {
    --vs-bg-primary: #002b36;
    --vs-bg-secondary: #073642;
    --vs-bg-tertiary: #586e75;
    --vs-bg-quaternary: #657b83;
    --vs-bg-hover: #0b2f3a;
    --vs-bg-active: #b58900;
    --vs-bg-selected: #b58900;
    
    --vs-fg-primary: #839496;
    --vs-fg-secondary: #93a1a1;
    --vs-fg-tertiary: #586e75;
    --vs-fg-quaternary: #657b83;
    --vs-fg-disabled: #586e75;
    --vs-fg-muted: #93a1a1;
    
    --vs-border: #586e75;
    --vs-border-light: #657b83;
    --vs-border-focus: #268bd2;
    --vs-border-active: #b58900;
    
    --vs-accent: #268bd2;
    --vs-accent-hover: #2aa198;
    --vs-accent-active: #859900;
    --vs-accent-light: #6c71c4;
    --vs-accent-contrast: #fdf6e3;
    
    --vs-success: #2aa198;
    --vs-warning: #b58900;
    --vs-error: #dc322f;
    --vs-info: #268bd2;
    
    --vs-status-success: #2aa198;
    --vs-status-warning: #b58900;
    --vs-status-error: #dc322f;
    --vs-status-info: #268bd2;
    
    --vs-scrollbar-track: #073642;
    --vs-scrollbar-thumb: #586e75;
    --vs-scrollbar-thumb-hover: #657b83;
    
    --vs-editor-bg: #002b36;
    --vs-editor-fg: #839496;
    --vs-editor-selection: #073642;
    --vs-editor-cursor: #93a1a1;
    --vs-editor-line-highlight: #073642;
    
    --vs-syntax-keyword: #859900;
    --vs-syntax-string: #2aa198;
    --vs-syntax-comment: #586e75;
    --vs-syntax-number: #d33682;
    --vs-syntax-type: #268bd2;
    --vs-syntax-function: #268bd2;
    --vs-syntax-variable: #b58900;
    --vs-syntax-operator: #839496;
    --vs-syntax-constant: #d33682;
    
    --vs-activitybar-bg: #073642;
    --vs-activitybar-fg: #839496;
    --vs-activitybar-inactive: #586e75;
    --vs-activitybar-hover: #0b2f3a;
    
    --vs-sidebar-bg: #073642;
    --vs-sidebar-fg: #839496;
    --vs-sidebar-selection: #b58900;
    --vs-sidebar-hover: #0b2f3a;
    
    --vs-panel-bg: #002b36;
    --vs-panel-fg: #839496;
    --vs-panel-border: #586e75;
    
    --vs-tab-bg: #073642;
    --vs-tab-fg: #93a1a1;
    --vs-tab-active-bg: #002b36;
    --vs-tab-active-fg: #839496;
    --vs-tab-hover-bg: #0b2f3a;
    
    --vs-menu-bg: #073642;
    --vs-menu-fg: #839496;
    --vs-menu-hover-bg: #b58900;
    --vs-menu-hover-fg: #fdf6e3;
    
    --vs-input-bg: #073642;
    --vs-input-fg: #839496;
    --vs-input-border: #586e75;
    --vs-input-placeholder: #586e75;
    --vs-input-focus-border: #268bd2;
    
    --vs-button-bg: #268bd2;
    --vs-button-fg: #fdf6e3;
    --vs-button-hover-bg: #2aa198;
    --vs-button-disabled-bg: #586e75;
    --vs-button-disabled-fg: #657b83;
}

/* Dracula Theme */
.vs-theme-dracula {
    --vs-bg-primary: #282a36;
    --vs-bg-secondary: #44475a;
    --vs-bg-tertiary: #6272a4;
    --vs-bg-quaternary: #bd93f9;
    --vs-bg-hover: #3b3d49;
    --vs-bg-active: #50fa7b;
    --vs-bg-selected: #50fa7b;
    
    --vs-fg-primary: #f8f8f2;
    --vs-fg-secondary: #bd93f9;
    --vs-fg-tertiary: #6272a4;
    --vs-fg-quaternary: #8be9fd;
    --vs-fg-disabled: #6272a4;
    --vs-fg-muted: #bd93f9;
    
    --vs-border: #44475a;
    --vs-border-light: #6272a4;
    --vs-border-focus: #ff79c6;
    --vs-border-active: #50fa7b;
    
    --vs-accent: #ff79c6;
    --vs-accent-hover: #bd93f9;
    --vs-accent-active: #50fa7b;
    --vs-accent-light: #8be9fd;
    --vs-accent-contrast: #282a36;
    
    --vs-success: #50fa7b;
    --vs-warning: #ffb86c;
    --vs-error: #ff5555;
    --vs-info: #8be9fd;
    
    --vs-status-success: #50fa7b;
    --vs-status-warning: #ffb86c;
    --vs-status-error: #ff5555;
    --vs-status-info: #8be9fd;
    
    --vs-scrollbar-track: #282a36;
    --vs-scrollbar-thumb: #44475a;
    --vs-scrollbar-thumb-hover: #6272a4;
    
    --vs-editor-bg: #282a36;
    --vs-editor-fg: #f8f8f2;
    --vs-editor-selection: #44475a;
    --vs-editor-cursor: #f8f8f2;
    --vs-editor-line-highlight: #3b3d49;
    
    --vs-syntax-keyword: #ff79c6;
    --vs-syntax-string: #f1fa8c;
    --vs-syntax-comment: #6272a4;
    --vs-syntax-number: #bd93f9;
    --vs-syntax-type: #8be9fd;
    --vs-syntax-function: #50fa7b;
    --vs-syntax-variable: #f8f8f2;
    --vs-syntax-operator: #ff79c6;
    --vs-syntax-constant: #bd93f9;
    
    --vs-activitybar-bg: #44475a;
    --vs-activitybar-fg: #f8f8f2;
    --vs-activitybar-inactive: #6272a4;
    --vs-activitybar-hover: #3b3d49;
    
    --vs-sidebar-bg: #44475a;
    --vs-sidebar-fg: #f8f8f2;
    --vs-sidebar-selection: #50fa7b;
    --vs-sidebar-hover: #3b3d49;
    
    --vs-panel-bg: #282a36;
    --vs-panel-fg: #f8f8f2;
    --vs-panel-border: #44475a;
    
    --vs-tab-bg: #44475a;
    --vs-tab-fg: #bd93f9;
    --vs-tab-active-bg: #282a36;
    --vs-tab-active-fg: #f8f8f2;
    --vs-tab-hover-bg: #3b3d49;
    
    --vs-menu-bg: #44475a;
    --vs-menu-fg: #f8f8f2;
    --vs-menu-hover-bg: #50fa7b;
    --vs-menu-hover-fg: #282a36;
    
    --vs-input-bg: #44475a;
    --vs-input-fg: #f8f8f2;
    --vs-input-border: #6272a4;
    --vs-input-placeholder: #6272a4;
    --vs-input-focus-border: #ff79c6;
    
    --vs-button-bg: #ff79c6;
    --vs-button-fg: #282a36;
    --vs-button-hover-bg: #bd93f9;
    --vs-button-disabled-bg: #6272a4;
    --vs-button-disabled-fg: #8be9fd;
}

/* Theme Transition Effects */
.vs-theme-transition {
    transition: background-color var(--vs-transition-normal),
                color var(--vs-transition-normal),
                border-color var(--vs-transition-normal),
                box-shadow var(--vs-transition-normal);
}

/* Global Theme Application */
.vs-theme-applied {
    color: var(--vs-fg-primary);
    background-color: var(--vs-bg-primary);
    border-color: var(--vs-border);
}

/* Auto-detect System Theme */
@media (prefers-color-scheme: dark) {
    .vs-theme-auto {
        /* Apply dark theme if user prefers dark mode */
    }
}

/* Theme Switcher Component */
.vs-theme-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--vs-bg-secondary);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-border-radius);
}

.vs-theme-option {
    padding: 4px 8px;
    background: var(--vs-bg-tertiary);
    color: var(--vs-fg-primary);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-border-radius);
    cursor: pointer;
    transition: var(--vs-transition-fast);
    font-size: var(--vs-font-size-small);
}

.vs-theme-option:hover {
    background: var(--vs-bg-hover);
    border-color: var(--vs-accent);
}

.vs-theme-option.active {
    background: var(--vs-accent);
    color: var(--vs-accent-contrast);
    border-color: var(--vs-accent);
}

.vs-theme-option:disabled {
    background: var(--vs-bg-tertiary);
    color: var(--vs-fg-disabled);
    cursor: not-allowed;
}

/* Theme Preview Swatches */
.vs-theme-preview {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: var(--vs-border-radius);
    border: 1px solid var(--vs-border);
    margin-right: 4px;
    cursor: pointer;
    transition: var(--vs-transition-fast);
}

.vs-theme-preview:hover {
    transform: scale(1.1);
    box-shadow: var(--vs-shadow-medium);
}

.vs-theme-preview.active {
    border: 2px solid var(--vs-accent);
    box-shadow: var(--vs-shadow-focus);
}

/* Theme-specific background patterns */
.vs-theme-grid {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.vs-theme-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.05) 10px,
        rgba(255, 255, 255, 0.05) 20px
    );
}