:root {
    /* Color Palette - Vibrant Dark Mode */
    --bg-base: #0a0a0c;
    --bg-surface: #131418;
    --bg-elevated: #1e1f26;
    --bg-glass: rgba(19, 20, 24, 0.75);
    
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    
    --primary-color: #39ff14; /* Neon Electric Green */
    --primary-hover: #32e011;
    --accent-color: #ff2a5f; /* Neon Red/Pink */
    --accent-hover: #e02454;
    
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), #0b5e20); /* Neon Green to Grass Green */
    --gradient-accent: linear-gradient(135deg, var(--accent-color), #f97316);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-neon: 0 0 15px rgba(57, 255, 20, 0.3);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Layout */
    --header-height: 60px;
    --nav-height: 70px;
    --mobile-width: 480px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-rounded: 50vw;
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
    
    /* Animation Speeds */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}