:root {
    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0a0a;
    --color-bg-tertiary: #111111;
    --color-bg-card: #0d0d0d;
    --color-bg-elevated: #141414;
    --color-bg-hover: #1a1a1a;
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #71717a;
    --color-text-dim: #52525b;
    
    --color-codeforge: #ffffff;
    --color-x: #00d4ff;
    --color-studio: #a1a1aa;
    
    --color-accent: #00d4ff;
    --color-accent-hover: #33ddff;
    --color-accent-dark: #0099cc;
    --color-accent-secondary: #ff3366;
    --color-accent-secondary-hover: #ff5588;
    --color-accent-tertiary: #8b5cf6;
    
    --color-gold: #ffd700;
    --color-silver: #c0c0c0;
    --color-bronze: #cd7f32;
    
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    
    --color-border: #1f1f23;
    --color-border-light: #18181b;
    --color-divider: #1a1a1d;
    
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.8);
    --shadow-glow-cyan: 0 0 48px rgba(0, 212, 255, 0.25);
    --shadow-glow-pink: 0 0 48px rgba(255, 51, 102, 0.25);
    --shadow-glow-purple: 0 0 48px rgba(139, 92, 246, 0.25);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    
    --container-max: 1280px;
    --container-wide: 1440px;
    --header-height: 72px;
    
    --spacing-section: 120px;
    --spacing-section-sm: 80px;
    
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    --gradient-secondary: linear-gradient(135deg, #ff3366 0%, #cc0044 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    --gradient-text: linear-gradient(135deg, #00d4ff 0%, #ff3366 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(0, 212, 255, 0.12) 0%, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(139, 92, 246, 0.10) 0%, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(255, 51, 102, 0.08) 0%, transparent 50%);
}