/* ============================================
   CSS VARIABLES
   Colors, Spacing, Typography, Breakpoints
   ============================================ */

:root {
    /* Colors */
    --color-primary: #0071e3;
    --color-primary-dark: #0051a3;
    --color-text: #1d1d1f;
    --color-text-secondary: #86868b;
    --color-bg: #fff;
    --color-bg-secondary: #f5f5f7;
    --color-bg-hover: #e8e8ed;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-error: #ff3b30;
    --color-success: #34c759;
    --color-accent: #ff6b6b;
    --color-accent-alt: #693EFF;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Mobile-first spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    
    /* Typography */
    --font-family: 'Poppins', sans-serif;
    --fs-1: clamp(12px, 3.2vw, 14px);
    --fs-2: clamp(14px, 3.6vw, 16px);
    --fs-3: clamp(16px, 4.2vw, 18px);
    --fs-4: clamp(20px, 5.5vw, 26px);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    
    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: cubic-bezier(0.28, 0.11, 0.32, 1);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* Carousel variables */
    --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
    --item1-filter: blur(30px);
    --item1-zIndex: 11;
    --item1-opacity: 0;
    
    --item2-transform: translateX(0);
    --item2-filter: blur(0px);
    --item2-zIndex: 10;
    --item2-opacity: 1;
    
    --item3-transform: translate(50%,10%) scale(0.8);
    --item3-filter: blur(10px);
    --item3-zIndex: 9;
    --item3-opacity: 1;
    
    --item4-transform: translate(90%,20%) scale(0.5);
    --item4-filter: blur(30px);
    --item4-zIndex: 8;
    --item4-opacity: 1;
    
    --item5-transform: translate(120%,30%) scale(0.3);
    --item5-filter: blur(40px);
    --item5-zIndex: 7;
    --item5-opacity: 0;
}