/* CSS Custom Properties (Variables) - Theme System */

/* ==================== */
/* Default Theme Variables */
/* ==================== */
:root {
    /* Background Colors */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Text Colors */
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-tertiary: #6e7681;
    --text-inverse: #0d1117;
    
    /* Accent Colors */
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-red: #f85149;
    --accent-yellow: #d29922;
    --accent-purple: #a371f7;
    --accent-orange: #db6d28;
    --accent-cyan: #39c5cf;
    
    /* Border Colors */
    --border-color: #30363d;
    --border-light: #484f58;
    --border-dark: #21262d;
    
    /* Status Colors */
    --success: #3fb950;
    --error: #f85149;
    --warning: #d29922;
    --info: #58a6ff;
    
    /* Typography */
    --font-family-mono: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Z-Index */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-loading: 3000;
}

/* ==================== */
/* Classic Dark Theme (Default) */
/* ==================== */
[data-theme="classic-dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-tertiary: #6e7681;
}

/* ==================== */
/* Classic Light Theme */
/* ==================== */
[data-theme="classic-light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary: #eaeef2;
    --text-primary: #24292f;
    --text-secondary: #57606a;
    --text-tertiary: #8c959f;
    --border-color: #d0d7de;
    --border-light: #d8dee4;
    --border-dark: #eaeef2;
    --accent-blue: #0969da;
    --accent-green: #1a7f37;
    --accent-red: #cf222e;
    --accent-yellow: #9a6700;
}

/* ==================== */
/* Cyberpunk Theme */
/* ==================== */
[data-theme="cyberpunk"] {
    --bg-primary: #0a0e27;
    --bg-secondary: #121836;
    --bg-tertiary: #1a1f4a;
    --text-primary: #00fff9;
    --text-secondary: #ff00ff;
    --text-tertiary: #7b2cbf;
    --accent-blue: #00fff9;
    --accent-green: #39ff14;
    --accent-red: #ff006e;
    --accent-yellow: #ffbe0b;
    --accent-purple: #ff00ff;
    --border-color: #7b2cbf;
    --border-light: #9d4edd;
    --border-dark: #3c096c;
}

/* ==================== */
/* Monokai Theme */
/* ==================== */
[data-theme="monokai"] {
    --bg-primary: #272822;
    --bg-secondary: #3e3d32;
    --bg-tertiary: #49483e;
    --text-primary: #f8f8f2;
    --text-secondary: #cfcfc2;
    --text-tertiary: #75715e;
    --accent-blue: #66d9ef;
    --accent-green: #a6e22e;
    --accent-red: #f92672;
    --accent-yellow: #e6db74;
    --accent-purple: #ae81ff;
    --accent-orange: #fd971f;
    --border-color: #49483e;
    --border-light: #5a5a4a;
    --border-dark: #3e3d32;
}

/* ==================== */
/* Solarized Dark Theme */
/* ==================== */
[data-theme="solarized-dark"] {
    --bg-primary: #002b36;
    --bg-secondary: #073642;
    --bg-tertiary: #094653;
    --text-primary: #839496;
    --text-secondary: #657b83;
    --text-tertiary: #586e75;
    --accent-blue: #268bd2;
    --accent-green: #859900;
    --accent-red: #dc322f;
    --accent-yellow: #b58900;
    --accent-purple: #6c71c4;
    --accent-orange: #cb4b16;
    --accent-cyan: #2aa198;
    --border-color: #073642;
    --border-light: #094653;
    --border-dark: #002b36;
}

/* ==================== */
/* Solarized Light Theme */
/* ==================== */
[data-theme="solarized-light"] {
    --bg-primary: #fdf6e3;
    --bg-secondary: #eee8d5;
    --bg-tertiary: #e0d6bc;
    --text-primary: #657b83;
    --text-secondary: #586e75;
    --text-tertiary: #93a1a1;
    --accent-blue: #268bd2;
    --accent-green: #859900;
    --accent-red: #dc322f;
    --accent-yellow: #b58900;
    --accent-purple: #6c71c4;
    --accent-orange: #cb4b16;
    --border-color: #93a1a1;
    --border-light: #b0b8b8;
    --border-dark: #d3d9d9;
}

/* ==================== */
/* Dracula Theme */
/* ==================== */
[data-theme="dracula"] {
    --bg-primary: #282a36;
    --bg-secondary: #21222c;
    --bg-tertiary: #191a21;
    --text-primary: #f8f8f2;
    --text-secondary: #bfbfbf;
    --text-tertiary: #6272a4;
    --accent-blue: #8be9fd;
    --accent-green: #50fa7b;
    --accent-red: #ff5555;
    --accent-yellow: #f1fa8c;
    --accent-purple: #bd93f9;
    --accent-orange: #ffb86c;
    --accent-cyan: #8be9fd;
    --border-color: #44475a;
    --border-light: #6272a4;
    --border-dark: #21222c;
}

/* ==================== */
/* Nord Theme */
/* ==================== */
[data-theme="nord"] {
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --text-primary: #eceff4;
    --text-secondary: #e5e9f0;
    --text-tertiary: #d8dee9;
    --accent-blue: #88c0d0;
    --accent-green: #a3be8c;
    --accent-red: #bf616a;
    --accent-yellow: #ebcb8b;
    --accent-purple: #b48ead;
    --accent-orange: #d08770;
    --accent-cyan: #8fbcbb;
    --border-color: #4c566a;
    --border-light: #616e88;
    --border-dark: #3b4252;
}

/* ==================== */
/* Responsive Variables */
/* ==================== */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-base: 12px;
        --font-size-lg: 14px;
        --font-size-xl: 16px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --font-size-base: 13px;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1024px) {
    :root {
        --font-size-base: 14px;
    }
}

/* ==================== */
/* High Contrast Mode */
/* ==================== */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
        --border-color: #606060;
    }
}

/* ==================== */
/* Reduced Motion */
/* ==================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
    }
}