/* ============================================
   CSS VARIABLES - Theme System
   ============================================ */

:root {
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-tooltip: 2000;
}

/* ============================================
   LIGHT THEME (Default)
   ============================================ */

[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-tertiary: #F5F5F5;
    --bg-elevated: #FFFFFF;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Surfaces */
    --surface-primary: #FFFFFF;
    --surface-secondary: #F9FAFB;
    --surface-hover: #F3F4F6;
    --surface-active: #E5E7EB;
    
    /* Borders */
    --border-primary: #E5E7EB;
    --border-secondary: #D1D5DB;
    --border-focus: #3B82F6;
    
    /* Text Colors */
    --text-primary: #1A1A1A;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;
    --text-link: #3B82F6;
    --text-success: #10B981;
    --text-error: #EF4444;
    --text-warning: #F59E0B;
    
    /* Accent Colors */
    --accent-primary: #3B82F6;
    --accent-primary-hover: #2563EB;
    --accent-primary-active: #1D4ED8;
    --accent-secondary: #8B5CF6;
    --accent-secondary-hover: #7C3AED;
    
    /* Status Colors */
    --color-success: #10B981;
    --color-success-bg: #D1FAE5;
    --color-error: #EF4444;
    --color-error-bg: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-info: #3B82F6;
    --color-info-bg: #DBEAFE;
    
    /* Shadows for light theme */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-elevated: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* ============================================
   DARK THEME
   ============================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0A0A0A;
    --bg-secondary: #121212;
    --bg-tertiary: #1A1A1A;
    --bg-elevated: #1E1E1E;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Surfaces */
    --surface-primary: #1E1E1E;
    --surface-secondary: #262626;
    --surface-hover: #2D2D2D;
    --surface-active: #333333;
    
    /* Borders */
    --border-primary: #2D2D2D;
    --border-secondary: #3D3D3D;
    --border-focus: #3B82F6;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #A3A3A3;
    --text-tertiary: #737373;
    --text-inverse: #0A0A0A;
    --text-link: #60A5FA;
    --text-success: #34D399;
    --text-error: #F87171;
    --text-warning: #FBBF24;
    
    /* Accent Colors */
    --accent-primary: #3B82F6;
    --accent-primary-hover: #60A5FA;
    --accent-primary-active: #2563EB;
    --accent-secondary: #8B5CF6;
    --accent-secondary-hover: #A78BFA;
    
    /* Status Colors */
    --color-success: #34D399;
    --color-success-bg: #064E3B;
    --color-error: #F87171;
    --color-error-bg: #7F1D1D;
    --color-warning: #FBBF24;
    --color-warning-bg: #78350F;
    --color-info: #60A5FA;
    --color-info-bg: #1E3A8A;
    
    /* Shadows for dark theme */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    
    /* Glassmorphism */
    --glass-bg: rgba(30, 30, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ============================================
   THEME TRANSITION
   ============================================ */

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

*:where(:not(input, textarea, select)) {
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}