/* Global Variables */
:root {
    /* Main Colors */
    --color-bg-dark: #050508;
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #0f0f18;
    --color-bg-tertiary: #15152a;
    --color-bg-card: #12121f;
    
    /* Neon Accents */
    --neon-cyan: #00f0ff;
    --neon-cyan-dim: #00f0ff80;
    --neon-pink: #ff00aa;
    --neon-pink-dim: #ff00aa80;
    --neon-purple: #8b5cf6;
    --neon-purple-dim: #8b5cf680;
    --neon-green: #00ff88;
    --neon-yellow: #ffd700;
    --neon-orange: #ff6b35;
    --neon-red: #ff3366;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a8a8b8;
    --text-muted: #5a5a70;
    --text-dim: #3a3a50;
    
    /* Gradients */
    --gradient-neon: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 50%, var(--neon-purple) 100%);
    --gradient-neon-soft: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(255, 0, 170, 0.1) 100%);
    --gradient-dark: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-primary) 100%);
    --gradient-glow: radial-gradient(ellipse at center, var(--neon-cyan-dim) 0%, transparent 70%);
    
    /* Typography */
    --font-display: 'Bebas Neue', sans-serif;
    --font-heading: 'Orbitron', sans-serif;
    --font-mono: 'JetBrains Mono', 'Space Mono', monospace;
    --font-body: 'JetBrains Mono', monospace;
    
    /* Spacing */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    
    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 0.15s var(--ease-out-expo);
    --transition-normal: 0.3s var(--ease-out-expo);
    --transition-slow: 0.5s var(--ease-out-expo);
    --transition-slower: 0.8s var(--ease-out-expo);
    
    /* Effects */
    --glow-cyan: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan-dim);
    --glow-pink: 0 0 20px var(--neon-pink), 0 0 40px var(--neon-pink-dim);
    --glow-purple: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple-dim);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
}