/* ============================================================
   DARK THEME COLOR VARIABLES
   Separate CSS file for dark mode color palette
   ============================================================ */

/* ===== DARK THEME COLOR DEFINITIONS ===== */

/* --- Base Colors --- */
:root {
    /* Light mode defaults (fallback) */
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2a2a2a;
    --dark-bg-tertiary: #333333;
    --dark-bg-elevated: #252525;
    --dark-bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Text colors */
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #808080;
    --dark-text-disabled: #606060;
    
    /* Border colors */
    --dark-border-primary: #404040;
    --dark-border-secondary: #3a3a3a;
    --dark-border-light: #303030;
    
    /* Accent colors - customizable palette */
    --dark-accent-primary: #477EF7;
    --dark-accent-secondary: #7C3AED;
    --dark-accent-success: #10B981;
    --dark-accent-warning: #F59E0B;
    --dark-accent-danger: #EF4444;
    --dark-accent-info: #06B6D4;
    
    /* Surface colors */
    --dark-surface-default: #2a2a2a;
    --dark-surface-raised: #333333;
    --dark-surface-sunken: #202020;
    
    /* Shadow colors */
    --dark-shadow-color: rgba(0, 0, 0, 0.4);
    --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dark-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --dark-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --dark-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.5);
    --dark-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.25);
    --dark-shadow-btn: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ===== DARK THEME ACTIVATION ===== */
[data-theme="dark"] {
    /* Apply dark theme colors */
    --color-background: var(--dark-bg-primary);
    --color-surface: var(--dark-surface-default);
    --color-surface-light: var(--dark-bg-tertiary);
    --color-surface-raised: var(--dark-surface-raised);
    --color-border: var(--dark-border-primary);
    --color-border-light: var(--dark-border-secondary);
    
    /* Text colors */
    --color-text-primary: var(--dark-text-primary);
    --color-text-secondary: var(--dark-text-secondary);
    --color-text-muted: var(--dark-text-muted);
    --color-text-disabled: var(--dark-text-disabled);
    
    /* Primary/accent colors */
    --color-primary: var(--dark-accent-primary);
    --color-primary-hover: var(--dark-accent-secondary);
    --color-secondary: var(--dark-text-secondary);
    --color-success: var(--dark-accent-success);
    --color-warning: var(--dark-accent-warning);
    --color-danger: var(--dark-accent-danger);
    --color-info: var(--dark-accent-info);
    
    /* Form colors */
    --color-form-bg: var(--dark-bg-tertiary);
    --color-form-border: var(--dark-border-primary);
    --color-form-text: var(--dark-text-primary);
    
    /* Sidebar colors */
    --color-sidebar-bg: var(--dark-bg-secondary);
    --color-sidebar-hover: var(--dark-bg-tertiary);
    --color-sidebar-active: var(--dark-surface-raised);
    
    /* Shadows */
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    --shadow-xl: var(--dark-shadow-xl);
    --shadow-card: var(--dark-shadow-card);
    --shadow-btn: var(--dark-shadow-btn);
}

/* ===== COLOR PALETTE PRESERVATION ===== */
/* Store original light theme colors for reference */
:root {
    --light-bg-primary: #eee;
    --light-bg-secondary: #f7f7f7;
    --light-bg-tertiary: #eee;
    --light-text-primary: #333;
    --light-text-secondary: #555;
    --light-text-muted: #999;
    --light-border-primary: #ddd;
    --light-border-secondary: #e8e8e8;
    --light-accent-primary: #333;
    --light-accent-secondary: #777;
}

/* ===== CUSTOM COLOR PALETTE SYSTEM ===== */
/* This allows users to override specific colors */
:root {
    /* Custom palette variables (can be overridden via JS) */
    --custom-primary: var(--dark-accent-primary);
    --custom-secondary: var(--dark-accent-secondary);
    --custom-success: var(--dark-accent-success);
    --custom-warning: var(--dark-accent-warning);
    --custom-danger: var(--dark-accent-danger);
    --custom-info: var(--dark-accent-info);
    
    /* Custom surface colors */
    --custom-surface: var(--dark-surface-default);
    --custom-surface-light: var(--dark-bg-tertiary);
    --custom-surface-raised: var(--dark-surface-raised);
    
    /* Custom background */
    --custom-background: var(--dark-bg-primary);
    
    /* Custom text colors */
    --custom-text-primary: var(--dark-text-primary);
    --custom-text-secondary: var(--dark-text-secondary);
    --custom-text-muted: var(--dark-text-muted);
    
    /* Custom borders */
    --custom-border: var(--dark-border-primary);
    --custom-border-light: var(--dark-border-secondary);
}

/* Apply custom palette when enabled */
[data-theme="dark"][data-custom-palette="true"] {
    --color-primary: var(--custom-primary);
    --color-primary-hover: var(--custom-secondary);
    --color-success: var(--custom-success);
    --color-warning: var(--custom-warning);
    --color-danger: var(--custom-danger);
    --color-info: var(--custom-info);
    
    --color-surface: var(--custom-surface);
    --color-surface-light: var(--custom-surface-light);
    --color-surface-raised: var(--custom-surface-raised);
    
    --color-background: var(--custom-background);
    
    --color-text-primary: var(--custom-text-primary);
    --color-text-secondary: var(--custom-text-secondary);
    --color-text-muted: var(--custom-text-muted);
    
    --color-border: var(--custom-border);
    --color-border-light: var(--custom-border-light);
}

/* ===== GRAYSCALE PALETTE (Original) ===== */
[data-theme="dark"][data-palette="grayscale"] {
    --color-primary: #999;
    --color-primary-hover: #bbb;
    --color-secondary: #666;
    --color-success: #888;
    --color-warning: #888;
    --color-danger: #999;
    --color-info: #777;
}

/* ===== BLUE PALETTE ===== */
[data-theme="dark"][data-palette="blue"] {
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-secondary: #60A5FA;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #06B6D4;
}

/* ===== PURPLE PALETTE ===== */
[data-theme="dark"][data-palette="purple"] {
    --color-primary: #8B5CF6;
    --color-primary-hover: #7C3AED;
    --color-secondary: #A78BFA;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #06B6D4;
}

/* ===== GREEN PALETTE ===== */
[data-theme="dark"][data-palette="green"] {
    --color-primary: #10B981;
    --color-primary-hover: #059669;
    --color-secondary: #34D399;
    --color-success: #06D6A0;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #06B6D4;
}

/* ===== CYBER PALETTE ===== */
[data-theme="dark"][data-palette="cyber"] {
    --color-primary: #00FF88;
    --color-primary-hover: #00E67A;
    --color-secondary: #00D4FF;
    --color-success: #00FF88;
    --color-warning: #FFA500;
    --color-danger: #FF4500;
    --color-info: #00D4FF;
    
    /* Cyberpunk-style surfaces */
    --color-surface: #121212;
    --color-surface-light: #1E1E1E;
    --color-surface-raised: #0D0D0D;
    --color-background: #080808;
    --color-border: #333;
    --color-border-light: #222;
    
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #B0B0B0;
    --color-text-muted: #808080;
}

/* ===== SOLARIZED DARK PALETTE ===== */
[data-theme="dark"][data-palette="solarized"] {
    --color-primary: #268BD2;
    --color-primary-hover: #6C71C4;
    --color-secondary: #859900;
    --color-success: #859900;
    --color-warning: #B58900;
    --color-danger: #DC322F;
    --color-info: #2AA198;
    
    --color-surface: #002B36;
    --color-surface-light: #073642;
    --color-surface-raised: #001E26;
    --color-background: #002028;
    --color-border: #073642;
    --color-border-light: #002B36;
    
    --color-text-primary: #839496;
    --color-text-secondary: #93A1A1;
    --color-text-muted: #586E75;
}

/* ===== MONOKAI PALETTE ===== */
[data-theme="dark"][data-palette="monokai"] {
    --color-primary: #F92672;
    --color-primary-hover: #E51D6B;
    --color-secondary: #A6E22E;
    --color-success: #A6E22E;
    --color-warning: #E6DB74;
    --color-danger: #F92672;
    --color-info: #75715E;
    
    --color-surface: #272822;
    --color-surface-light: #3E3D32;
    --color-surface-raised: #1E1F1C;
    --color-background: #1C1D18;
    --color-border: #3E3D32;
    --color-border-light: #272822;
    
    --color-text-primary: #F8F8F2;
    --color-text-secondary: #E6DB74;
    --color-text-muted: #75715E;
}

/* ===== DARK THEME FORM ELEMENTS ===== */
[data-theme="dark"] {
    /* Form inputs */
    --form-input-bg: var(--dark-bg-tertiary);
    --form-input-border: var(--dark-border-primary);
    --form-input-text: var(--dark-text-primary);
    --form-input-placeholder: var(--dark-text-muted);
    
    /* Buttons */
    --btn-default-bg: var(--dark-bg-tertiary);
    --btn-default-border: var(--dark-border-primary);
    --btn-default-text: var(--dark-text-primary);
    
    /* Select dropdowns */
    --select-bg: var(--dark-bg-tertiary);
    --select-border: var(--dark-border-primary);
    --select-text: var(--dark-text-primary);
    
    /* Cards */
    --card-bg: var(--dark-surface-default);
    --card-border: var(--dark-border-primary);
    --card-text: var(--dark-text-primary);
}

/* ===== DARK THEME UTILITY CLASSES ===== */
.dark-theme {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

.dark-card {
    background-color: var(--dark-surface-default);
    border: 1px solid var(--dark-border-primary);
    color: var(--dark-text-primary);
}

.dark-input {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border-primary);
    color: var(--dark-text-primary);
}

.dark-btn {
    background-color: var(--dark-accent-primary);
    border: 1px solid var(--dark-accent-primary);
    color: white;
}

.dark-btn:hover {
    background-color: var(--dark-accent-secondary);
    border-color: var(--dark-accent-secondary);
}