/* ================================================================
   css_base_variables.css
   Westonaria Connect — split from style.css (lines 1–123)
   ================================================================ */

/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* ROOT VARIABLES & GLOBAL STYLES (from style.css) */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

:root {
    /* Primary Palette - Vibrant & Modern */
    --neon-coral: #FF6F61;
    --electric-cyan: #00D9FF;
    --cosmic-purple: #9D4EDD;
    --aurora-pink: #FF006E;
    --liquid-gold: #FFD60A;
    
    /* Neutrals - Pitch Black Theme */
    --void-black: #000000;
    --obsidian: #050505;
    --charcoal: #0D0D0D;
    --slate: #141414;
    --graphite: #222222;
    --silver: #A0A0A0;
    --pearl: #E0E0E0;
    --pure-white: #FFFFFF;
    
    /* Accent Colors */
    --mint-fresh: #06FFA5;
    --sky-blue: #4CC9F0;
    --lavender-dream: #C77DFF;
    --sunset-blaze: #FF9E00;
    
    /* Semantic Colors */
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    
    /* Gradients */
    --gradient-sunset: linear-gradient(135deg, #ac0b0b 0%, #7D1515 100%);
    --gradient-ocean: linear-gradient(135deg, #01546d 0%, #001B2E 100%);
    --gradient-nebula: linear-gradient(135deg, #9D4EDD 0%, #FF006E 100%);
    --gradient-midnight: linear-gradient(135deg, #0A0A0A 0%, #2A2A2A 100%);
    --gradient-aurora: linear-gradient(135deg, #0d4380 0%, #9D4EDD 50%, #FF006E 100%);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 24px rgba(0, 217, 255, 0.3);
    --shadow-neon: 0 0 32px rgba(255, 111, 97, 0.4);
    
    /* Spacing System */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-quick: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Typography */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    
    /* Glass Morphism */
    --glass-light: rgba(255, 255, 255, 0.05);
    --glass-medium: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(20px);
    
    /* Overlays */
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-darker: rgba(0, 0, 0, 0.92);
    
    /* Z-Index System */
    --z-base: 1;
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-tooltip: 3000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', var(--font-body), sans-serif;
    color: var(--pearl);
    background-color: var(--void-black);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Archivo Black', var(--font-display), sans-serif;
    font-weight: 900;
    line-height: 1.2;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

section {
    padding: 80px 0;
}