:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-tertiary: #aaaaaa;
    --text-muted: #888888;
    
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #06b6d4;
    --accent-success: #4caf50;
    --accent-warning: #fbbf24;
    --accent-error: #ef4444;
    
    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-secondary: linear-gradient(135deg, #06b6d4, #3b82f6);
    --gradient-accent: linear-gradient(135deg, #f59e0b, #ef4444);
    --gradient-text: linear-gradient(135deg, #ffffff, #e0e0e0);
    
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-hover: rgba(255, 255, 255, 0.2);
    --border-color-active: rgba(99, 102, 241, 0.4);
    
    --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    --card-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 10px 30px rgba(99, 102, 241, 0.3);
    
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    --font-primary: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', monospace;
    
    --z-base: 1;
    --z-content: 10;
    --z-sticky: 100;
    --z-header: 1000;
    --z-modal: 10000;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-hover: rgba(0, 0, 0, 0.2);
    
    --card-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    --card-bg-hover: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
    
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-slow), color var(--transition-slow);
}