/* PREMIUM DESIGN SYSTEM - Modern & Sophisticated */
:root {
    /* Backgrounds - Gradient dark with depth */
    --backgroundMain: #0a0b0d;
    --backgroundSecond: #12141a;
    --backgroundCard: rgba(18, 20, 26, 0.6);
    
    /* Accent Colors - Vibrant red gradient */
    --colorMain: #ff3b3b;
    --colorMainGradient: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
    --colorMainGlow: rgba(255, 59, 59, 0.3);
    
    /* Text Hierarchy */
    --colorDefault: #ffffff;
    --colorText: #a8adb7;
    --colorTextDark: #6b7280;
    --colorHeading: #f9fafb;
    
    /* Glassmorphism & Effects */
    --glassBackground: rgba(255, 255, 255, 0.05);
    --glassBackgroundHover: rgba(255, 255, 255, 0.08);
    --borderGlass: rgba(255, 255, 255, 0.1);
    
    /* Shadows - Layered for depth */
    --shadowSm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadowMd: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadowLg: 0 10px 40px rgba(0, 0, 0, 0.25);
    --shadowXl: 0 20px 60px rgba(0, 0, 0, 0.35);
    --shadowGlow: 0 0 20px var(--colorMainGlow);
    
    /* Transitions */
    --transitionFast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transitionMedium: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transitionSlow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Spacing Scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}