/* =========================================
   CSS Variables & Design System
   Deep Space & Neon Theme - Refined 2.0
   ========================================= */

:root {
    /* Core Palette - Premium Tech */
    --primary: #00F0FF;           /* Electric Cyan */
    --primary-color: var(--primary); /* Alias for backward compatibility */
    --primary-dim: rgba(0, 240, 255, 0.1);
    --secondary: #9D46FF;         /* Neon Violet (Brightened from #7000FF for better contrast) */
    --secondary-color: var(--secondary); /* Alias for backward compatibility */
    --accent: #FF2E63;            /* Cyber Pink */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00F0FF 0%, #00A8FF 100%);
    --gradient-secondary: linear-gradient(135deg, #9D46FF 0%, #7000FF 100%);
    --gradient-glow: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(157, 70, 255, 0.2));

    /* Backgrounds */
    --bg-body: #050508;           /* Deep Space Black */
    --bg-surface: #0F1016;        /* Slightly lighter panel background */
    --bg-glass: rgba(15, 16, 22, 0.6);
    --bg-premium: #08090E;        /* Darker, more cohesive header/footer background */
    --bg-premium-glass: rgba(8, 9, 14, 0.85); /* Glass variant for navbar */
    
    /* Typography Colors */
    --text-main: #FFFFFF;
    --text-body: #B0B5C0;         /* Cool Grey for better reading comfort */
    --text-muted: #94A3B8;        /* Lightened from #6E7585 for AA compliance */
    
    /* Spacing System (8pt Grid) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 80px;
    --space-3xl: 120px;
    
    /* Layout */
    --container-width: 1440px;
    --header-height: 80px;
    
    /* Borders & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(0, 240, 255, 0.3);
    
    /* Effects */
    --blur-glass: 20px;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.15);
    
    /* Typography */
    --font-display: 'Space Grotesk', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Animations */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}