/* ============================================================================
   ENHANCED MOBILE-FIRST CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================ */

:root {
    /* Enhanced Color System */
    --gold-50: #FFFEF7;
    --gold-100: #FEF9C3;
    --gold-200: #FEF08A;
    --gold-300: #FDE047;
    --gold-400: #FACC15;
    --gold-500: #EAB308;
    --gold-600: #CA8A04;
    --gold-700: #A16207;
    --gold-800: #854D0E;
    --gold-900: #713F12;
    
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;
    --slate-950: #020617;
    
    /* Enhanced Gradients */
    --gradient-gold: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
    --gradient-gold-intense: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-700) 100%);
    --gradient-dark: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 100%);
    --gradient-mesh: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(234, 179, 8, 0.15) 0%, transparent 60%);
    
    /* Enhanced Shadows with Mobile Optimization */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-gold: 0 20px 50px -12px rgba(234, 179, 8, 0.25);
    --shadow-gold-intense: 0 30px 70px -12px rgba(234, 179, 8, 0.4);
    
    /* Mobile-Optimized Shadows (Lighter for performance) */
    --shadow-mobile: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-mobile-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-gold-mobile: 0 4px 20px rgba(234, 179, 8, 0.2);
    
    /* Advanced Effects */
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(16px);
    --blur-xl: blur(24px);
    
    /* Easing Functions */
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-mobile: cubic-bezier(0.4, 0, 0.2, 1); /* Optimized for mobile */
    
    /* Mobile-First Layout Variables */
    --container-max-width: 1280px;
    --header-height-mobile: 70px;
    --header-height-tablet: 75px;
    --header-height-desktop: 80px;
    
    /* Mobile-First Container Padding */
    --container-padding-mobile: 1rem;
    --container-padding-tablet: 1.5rem;
    --container-padding-desktop: 2rem;
    
    /* Mobile-First Section Padding */
    --section-padding-mobile: 3rem;
    --section-padding-tablet: 4rem;
    --section-padding-desktop: 6rem;
    
    /* Touch Target Sizes (Following WCAG Guidelines) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    --touch-target-large: 56px;
    
    /* Typography Scale - Mobile First */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
    
    /* Mobile-First Font Sizes */
    --text-xs-mobile: 0.75rem;   /* 12px */
    --text-sm-mobile: 0.875rem;  /* 14px */
    --text-base-mobile: 1rem;    /* 16px */
    --text-lg-mobile: 1.125rem;  /* 18px */
    --text-xl-mobile: 1.25rem;   /* 20px */
    --text-2xl-mobile: 1.5rem;   /* 24px */
    --text-3xl-mobile: 1.875rem; /* 30px */
    --text-4xl-mobile: 2.25rem;  /* 36px */
    
    /* Desktop Font Sizes */
    --text-xs-desktop: 0.75rem;   /* 12px */
    --text-sm-desktop: 0.875rem;  /* 14px */
    --text-base-desktop: 1rem;    /* 16px */
    --text-lg-desktop: 1.125rem;  /* 18px */
    --text-xl-desktop: 1.25rem;   /* 20px */
    --text-2xl-desktop: 1.5rem;   /* 24px */
    --text-3xl-desktop: 2rem;     /* 32px */
    --text-4xl-desktop: 2.5rem;   /* 40px */
    --text-5xl-desktop: 3rem;     /* 48px */
    --text-6xl-desktop: 4rem;     /* 64px */
    
    /* Z-Index Scale */
    --z-background: -1;
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-mobile-menu: 1000;
    --z-header: 1001;
    --z-notification: 1100;
    --z-maximum: 2147483647;
    
    /* Border Radius Scale */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
    
    /* Mobile-Optimized Spacing Scale */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */
    --space-24: 6rem;    /* 96px */
    
    /* Breakpoint Variables for JavaScript */
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --desktop-breakpoint: 1280px;
    --large-desktop-breakpoint: 1536px;
    
    /* Animation Durations - Mobile Optimized */
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --duration-slower: 0.75s;
    
    /* Mobile Performance Optimizations */
    --transform-gpu: translateZ(0); /* Force GPU acceleration */
    --will-change-transform: transform;
    --will-change-opacity: opacity;
    --will-change-scroll: scroll-position;
    
    /* Color Mode Variables (for future dark/light mode) */
    --color-mode-background: var(--slate-950);
    --color-mode-foreground: var(--slate-100);
    --color-mode-muted: var(--slate-400);
    --color-mode-accent: var(--gold-400);
    
    /* Focus Ring Variables */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--gold-400);
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
    
    /* Card Variables */
    --card-background: rgba(255, 255, 255, 0.05);
    --card-background-hover: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-border-hover: rgba(234, 179, 8, 0.3);
    
    /* Input Variables */
    --input-background: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.2);
    --input-border-focus: var(--gold-400);
    --input-text: var(--slate-100);
    --input-placeholder: var(--slate-400);
}