/* ============================================
   CSS VARIABLES - Modern Cyber-Cinematic Design System
   ============================================ */

:root {
        /* Base Fonts */
        --font-heading: 'Outfit', sans-serif;
        --font-body: 'Inter', sans-serif;

        /* Background Colors - Deep Rich Void */
        --bg-primary: #030008;
        --bg-secondary: #0a0616;
        --bg-tertiary: #130b29;

        /* Text Colors - High Contrast */
        --text-primary: #ffffff;
        --text-secondary: rgba(255, 255, 255, 0.85);
        --text-tertiary: rgba(255, 255, 255, 0.6);

        /* Accent Colors - Vibrant Neon (Cyan & Purple) */
        --accent-primary: #00f0ff;
        --accent-primary-hover: #5cffff;
        --accent-primary-glow: rgba(0, 240, 255, 0.3);
        --accent-secondary: #7000ff;
        
        --accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
        --shimmer-gradient: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

        /* Border & Divider */
        --border-color: rgba(255, 255, 255, 0.08);
        --border-color-hover: rgba(0, 240, 255, 0.4);
        --divider-color: rgba(255, 255, 255, 0.05);

        /* Shadows - Neon Glows */
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.9);
        --shadow-glow: 0 0 24px var(--accent-primary-glow), 0 0 12px rgba(112, 0, 255, 0.4);

        /* Glassmorphism - Premium Frosted */
        --glass-bg: rgba(10, 6, 22, 0.5);
        --glass-bg-hover: rgba(20, 12, 40, 0.65);
        --glass-frosted: rgba(5, 2, 10, 0.75);
        --glass-solid: #06020e;

        --glass-border: rgba(255, 255, 255, 0.05);
        --glass-border-highlight: rgba(0, 240, 255, 0.2);

        --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);

        /* Gradients - Atmosphere */
        --header-gradient: linear-gradient(180deg, rgba(3, 0, 8, 0.95) 0%, rgba(3, 0, 8, 0) 100%);

        --hero-gradient: radial-gradient(circle at 50% 0%,
                        rgba(112, 0, 255, 0.15) 0%,
                        rgba(0, 240, 255, 0.05) 40%,
                        transparent 80%);

        /* Text Gradients */
        --text-gradient-primary: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
        --text-gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, #b026ff 100%);

        /* Spacing System */
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 5rem;
        --spacing-4xl: 8rem;

        /* Border Radius - Squircle inspired */
        --radius-sm: 8px;
        --radius-md: 16px;
        --radius-lg: 24px;
        --radius-xl: 32px;
        --radius-pill: 9999px;

        /* Transitions - Spring and Fluid */
        --transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        --transition-base: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        --transition-slow: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        --transition-spring: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

        /* Z-index */
        --z-below: -1;
        --z-dropdown: 1000;
        --z-sticky: 1020;
        --z-fixed: 1030;
        --z-modal: 2000;
        --z-tooltip: 3000;
}