/* ============================================
   CSS CUSTOM PROPERTIES - THE BAD COMPANY
   Design System Variables
   ============================================ */

:root {
    /* Color Palette - Cyberpunk/Matrix Aesthetic */
    --bg-primary: #0a0a0a;
    --bg-secondary: #0d0d0d;
    --bg-tertiary: #121212;
    
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-tertiary: #a0a0a0;
    
    /* Neon Accent Colors */
    --accent-green: #00ff85;
    --accent-cyan: #00ffff;
    --accent-pink: #ff0099;
    
    /* Border Colors */
    --border-color: #333333;
    --border-color-light: #444444;
    
    /* Typography */
    --font-primary: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Instrument Serif', serif;
    --font-mono: 'Courier New', monospace;
    
    /* Spacing Scale */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
    --spacing-xxxl: 100px;
    
    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows with Glow Effects */
    --shadow-glow-green: 0 0 20px rgba(0, 255, 133, 0.3);
    --shadow-glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);
    --shadow-glow-pink: 0 0 15px rgba(255, 0, 153, 0.3);
    
    --shadow-glow-green-intense: 0 0 30px rgba(0, 255, 133, 0.5);
    --shadow-glow-cyan-intense: 0 0 30px rgba(0, 255, 255, 0.7);
    --shadow-glow-pink-intense: 0 0 30px rgba(255, 0, 153, 0.5);
    
    /* Card Shadows */
    --shadow-card-green: 0 10px 40px rgba(0, 255, 133, 0.3);
    --shadow-card-cyan: 0 10px 40px rgba(0, 255, 255, 0.4);
    --shadow-card-pink: 0 10px 40px rgba(255, 0, 153, 0.4);
    
    /* Z-Index Scale */
    --z-base: 0;
    --z-content: 1;
    --z-nav: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
    
    /* Breakpoints (for reference in media queries) */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1400px;
    
    /* Layout Constraints */
    --container-max-width: 1400px;
    --content-max-width: 900px;
}

/* Dark Theme Enhancements (optional for future) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Already dark by default */
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition-base: 0.01ms;
        --transition-slow: 0.01ms;
    }
}