/* =====================================================
   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 var(--motion-base) 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);
    --motion-fast: 0.15s;
    --motion-base: 0.25s;
    --motion-slow: 0.4s;
    
    /* 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: 8px;
    --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-15: rgba(255, 255, 255, 0.15);
    --white-overlay-20: rgba(255, 255, 255, 0.2);
    --white-overlay-25: rgba(255, 255, 255, 0.25);
    --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 */
    /* Sistem CJK/Arapça yedeği (webfont indirilmez): Latin fontlarında glyph yoksa OS-yerleşik font kullanılır.
       macOS: Hiragino/PingFang/Apple SD Gothic/Geeza · Windows: Yu Gothic/YaHei/Malgun/Segoe · Linux/Android: Noto CJK/Arabic. */
    --fallback-cjk: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'PingFang SC', 'Microsoft YaHei', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans CJK JP', 'Noto Sans CJK SC', 'Noto Sans CJK KR', 'Geeza Pro', 'Noto Sans Arabic';
    --font-family-primary: 'Inter', 'system-ui', var(--fallback-cjk), sans-serif;
    --font-family-base: 'Inter', 'system-ui', var(--fallback-cjk), sans-serif;
    --font-family-display: 'Poppins', 'Inter', var(--fallback-cjk), sans-serif;
    --font-family-heading: 'Poppins', 'Inter', var(--fallback-cjk), sans-serif;
    --font-family-mono: 'Fira Code', Consolas, Monaco, monospace;
    --font-family-serif: 'Playfair Display', var(--fallback-cjk), 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 */
}