/* ==================== CSS VARIABLES ==================== */
:root {
    /* Colors - Dark Theme */
    --color-bg: #050505;
    --color-bg-secondary: #0a0a0a;
    --color-bg-tertiary: #111111;
    --color-bg-card: #0d0d0d;
    --color-border: #1a1a1a;
    --color-border-hover: #2a2a2a;
    
    --color-text: #ffffff;
    --color-text-secondary: #888888;
    --color-text-muted: #555555;
    
    --color-accent: #00ff88;
    --color-accent-secondary: #00ccff;
    --color-accent-glow: rgba(0, 255, 136, 0.15);
    --color-accent-dark: #00cc6a;
    
    --color-error: #ff4444;
    --color-success: #00ff88;
    --color-warning: #ffaa00;
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Animations */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout */
    --header-height: 64px;
    --container-width: 1400px;
    --container-padding: 24px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(0, 255, 136, 0.2);
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Z-Index */
    --z-cursor: 10001;
    --z-cursor-ring: 10000;
    --z-modal: 9000;
    --z-cookie: 8500;
    --z-header: 1000;
    --z-noise: 9999;
}

/* Light Theme */
[data-theme="light"] {
    --color-bg: #fafafa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5f5f5;
    --color-bg-card: #ffffff;
    --color-border: #e5e5e5;
    --color-border-hover: #d0d0d0;
    
    --color-text: #0a0a0a;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    
    --color-accent: #00aa55;
    --color-accent-secondary: #0088cc;
    --color-accent-glow: rgba(0, 170, 85, 0.1);
    --color-accent-dark: #008844;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 30px rgba(0, 170, 85, 0.15);
}

@media (min-width: 768px) {
    :root {
        --container-padding: 48px;
    }
}

@media (min-width: 1400px) {
    :root {
        --container-width: 1600px;
        --container-padding: 80px;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-width: 1800px;
        --container-padding: 100px;
    }
}