/* ═══════════════════════════════════════════════════════════════
   🎨 Brand Identity Variables — البيت الغزاوي
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Colors: Brand ─── */
  --color-primary:        #E8501F;        /* برتقالي ناري — مطابق للمنيو */
  --color-primary-dark:   #B83A12;
  --color-primary-light:  #FF7043;
  --color-accent:         #F4B942;        /* ذهبي/أصفر */
  --color-accent-dark:    #C99327;

  /* ─── Colors: Surface ─── */
  --color-bg:             #0a0a0a;        /* أسود عميق */
  --color-bg-elevated:    #161616;
  --color-bg-card:        #1c1c1c;
  --color-bg-hover:       #242424;
  --color-overlay:        rgba(0, 0, 0, 0.78);

  /* ─── Colors: Text ─── */
  --color-text:           #ffffff;
  --color-text-muted:     #b8b8b8;
  --color-text-faded:     #7a7a7a;

  /* ─── Colors: Semantic ─── */
  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;
  --color-info:           #3b82f6;

  /* ─── Borders ─── */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.16);
  --color-border-accent:  rgba(232, 80, 31, 0.4);

  /* ─── Typography ─── */
  --font-arabic: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --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;
  --font-size-5xl:  3rem;
  --font-size-6xl:  3.75rem;

  --line-height-tight:   1.25;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.85;

  /* ─── Spacing ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ─── Layout ─── */
  --border-radius-sm:   6px;
  --border-radius:      12px;
  --border-radius-lg:   18px;
  --border-radius-xl:   24px;
  --border-radius-full: 9999px;

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;

  /* ─── Effects ─── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:     0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 24px 56px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 32px rgba(232, 80, 31, 0.35);

  --transition-fast: 0.15s ease;
  --transition:      0.3s ease;
  --transition-slow: 0.5s ease;

  --blur-sm: blur(4px);
  --blur:    blur(12px);
  --blur-lg: blur(24px);

  /* ─── Z-Index Scale ─── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-cart:      300;
  --z-modal:     400;
  --z-toast:     500;
}