/* ==========================================================================
   ARJWAN FURNITURE & FURNISHINGS - DESIGN SYSTEM & CSS VARIABLES
   Branding: Gold (#D88A00) | Dark Theme (#0A0A0A / #171717)
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --primary-gold: #d9a044;
  --primary-gold-hover: #e5b76b;
  --primary-gold-light: rgba(217, 160, 68, 0.15);
  --primary-gold-glow: rgba(217, 160, 68, 0.35);
  
  /* Neutral Dark Theme Shades */
  --bg-dark: #0A0A0A;
  --bg-card: #171717;
  --bg-card-hover: #1E1E1E;
  --bg-surface: #141414;
  --border-color: #2C2C2C;
  --border-color-light: rgba(255, 255, 255, 0.1);
  
  /* Typography Colors */
  --text-main: #FFFFFF;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  --text-gold: #d9a044;
  
  /* UI Feedback Colors */
  --discount-badge: #d9a044;
  --success-green: #22C55E;
  --whatsapp-green: #25D366;
  --star-yellow: #F59E0B;
  
  /* Fonts */
  --font-arabic: 'ThmanyahSans', 'ThmanyahSerifDisplay', 'Segoe UI', Tahoma, sans-serif;
  
  /* Glassmorphism & Effects */
  --glass-bg: rgba(23, 23, 23, 0.85);
  --glass-border: 1px solid rgba(217, 160, 68, 0.2);
  --glass-blur: blur(16px);
  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --gold-shadow: 0 8px 25px rgba(217, 160, 68, 0.25);

  /* Transitions (optimized: fast & light 150-250ms) */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout Spacing */
  --container-max: 1320px;
  --header-height: 85px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* Light Mode Overrides when data-theme="light" */
[data-theme="light"] {
  --bg-dark: #F8F9FA;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F3F4F6;
  --bg-surface: #FFFFFF;
  --border-color: #E5E7EB;
  --border-color-light: rgba(0, 0, 0, 0.08);
  --text-main: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: 1px solid rgba(217, 160, 68, 0.25);
  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}