/* =====================================================
   CSS VARIABLES - Premium Platform Premium Level
   ===================================================== */

:root {
    /* Primary Colors - Sandstone Gold (default theme) */
    --primary-color: #C28E0E;
    --primary-dark: #8F680A;
    --primary-light: #FFF7E6;
    --secondary-color: #8B5E34;
    --accent-color: #D4AF37;

    /* P1-2 FIX: On-Color Tokens (Material Design Standard) */
    /* Text colors for use ON colored backgrounds */
    --on-primary: #ffffff;       /* White text on primary bg */
    --on-primary-dark: #ffffff;  /* White text on dark primary bg */
    --on-secondary: #ffffff;     /* White text on secondary bg */
    --on-surface: #1e293b;       /* Dark text on surface bg */
    --on-background: #2c3e50;    /* Text on background */
    --on-error: #ffffff;         /* White text on error bg */
    --on-success: #ffffff;       /* White text on success bg */
    --on-warning: #1e293b;       /* Dark text on warning bg (yellow needs dark text) */
    
    /* Status Colors */
    --success-color: #10b981;
    --success-dark: #047857;
    --success-light: #ecfdf5;
    --warning-color: #f59e0b;
    --warning-dark: #d97706;
    --warning-light: #fef3c7;
    --danger-color: #ef4444;
    --danger-dark: #dc2626;
    --danger-light: #fee2e2;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Text Colors */
    --text-color: #2c3e50;
    --text-dark: #1e293b;
    --text-light: #475569;  /* Improved contrast - was #64748b */
    --text-muted: #64748b;  /* Improved contrast - was #94a3b8 */
    --muted-color: #94a3b8; /* Muted text color for reviews */
    
    /* Background Colors */
    --background-color: #ffffff;
    --bg-light: #f8fafc;
    --bg-muted: #f1f5f9;
    --white: #ffffff;
    --black: #000000;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    --border-light: #cbd5e1;  /* Improved contrast - was #f1f5f9 */
    --border-dark: #cbd5e1;
    --border-accessible: #94a3b8;  /* High contrast border for inputs */
    
    /* Gradients - Sandstone Gold */
    --gradient-primary: linear-gradient(135deg, #8B5E34 0%, #C28E0E 100%);
    --gradient-primary-dark: linear-gradient(135deg, #8F680A 0%, #C28E0E 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows & RGBA Values */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 20px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 25px 60px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --primary-shadow: rgba(194, 142, 14, 0.3);
    --primary-shadow-hover: rgba(194, 142, 14, 0.4);
    --success-shadow: rgba(16, 185, 129, 0.3);
    --success-shadow-hover: rgba(16, 185, 129, 0.4);
    --warning-shadow: rgba(245, 158, 11, 0.4);
    --warning-shadow-hover: rgba(245, 158, 11, 0.6);
    
    /* Additional Shadow Variables for Search & Interactive Elements */
    --primary-shadow-light: rgba(194, 142, 14, 0.1);
    --error-shadow-light: rgba(239, 68, 68, 0.2);
    --white-overlay-20: rgba(255, 255, 255, 0.2);
    --white-overlay-30: rgba(255, 255, 255, 0.3);
    --success-pulse-light: rgba(66, 220, 101, 0.3);
    --success-pulse-strong: rgba(66, 220, 101, 0.6);
    
    /* Social Media Brand Colors */
    --whatsapp-green: #25d366;
    --google-red: #ea4335;
    --google-green: #34a853;
    --google-blue: #4285f4;
    --facebook-blue: #1877f2;
    --instagram-gradient: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    --linkedin-blue: #0077b5;
    --twitter-blue: #1da1f2;
    
    /* Common Whites and Transparency */
    --white-pure: #ffffff;
    --white-soft: rgba(255, 255, 255, 0.8);
    --white-muted: rgba(255, 255, 255, 0.6);
    --white-faint: rgba(255, 255, 255, 0.1);
    
    /* Common Blacks and Grays */
    --black-pure: #000000;
    --black-soft: rgba(0, 0, 0, 0.8);
    --black-muted: rgba(0, 0, 0, 0.6);
    --black-faint: rgba(0, 0, 0, 0.1);
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Common Shadow RGBA values */
    --shadow-black-05: rgba(0, 0, 0, 0.05);
    --shadow-black-10: rgba(0, 0, 0, 0.1);
    --shadow-black-15: rgba(0, 0, 0, 0.15);
    --shadow-black-20: rgba(0, 0, 0, 0.2);
    --shadow-black-25: rgba(0, 0, 0, 0.25);
    --shadow-black-30: rgba(0, 0, 0, 0.3);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --white-overlay: rgba(255, 255, 255, 0.15);
    --black-overlay: rgba(0, 0, 0, 0.5);
    --error-light: rgba(239, 68, 68, 0.1);
    --error-shadow: rgba(239, 68, 68, 0.2);
    
    /* Typography */
    --font-family-primary: 'Inter', 'system-ui', sans-serif;
    --font-family-display: 'Poppins', 'Inter', sans-serif;
    --font-family-serif: 'Playfair Display', serif;
    --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: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    
    /* Responsive Breakpoints - Standardized System */
    --breakpoint-xs: 320px;   /* Smallest mobile devices */
    --breakpoint-sm: 480px;   /* Small mobile devices */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops */
    --breakpoint-xl: 1200px;  /* Desktop */
    --breakpoint-2xl: 1400px; /* Large desktop */
    --breakpoint-3xl: 1600px; /* Ultra wide */
    
    /* Container Max Widths */
    --container-xs: 100%;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
    
    /* Grid Gaps - Responsive */
    --gap-xs: 0.75rem;   /* 12px */
    --gap-sm: 1rem;      /* 16px */
    --gap-md: 1.5rem;    /* 24px */
    --gap-lg: 2rem;      /* 32px */
    --gap-xl: 3rem;      /* 48px */
    
    /* Touch Target Sizes */
    --touch-target-min: 44px;  /* WCAG minimum */
    --touch-target-optimal: 48px; /* iOS/Material Design */
    --touch-target-large: 56px; /* Large buttons */
}