/* ============================================================
   variables.css — UltraMenu Design Tokens
   Never hardcode hex values anywhere — use these variables only
   ============================================================ */

:root {
  /* ─── Brand Colors ─────────────────────────────────────── */
  --color-gold:        #fdb515;
  --color-gold-hover:  #e6a413;
  --color-gold-dim:    rgba(253, 181, 21, 0.15);
  --color-gold-glow:   rgba(253, 181, 21, 0.25);
  --color-black:       #050503;
  --color-red:         #e32827;
  --color-warm-gray:   #cfcac4;
  --color-cream:       #fcf9f6;
  --color-white:       #ffffff;

  /* ─── Light Mode (default) ──────────────────────────────── */
  --bg:          #fcf9f6;
  --bg-2:        #ffffff;
  --bg-card:     #ffffff;
  --text:        #050503;
  --text-2:      #3a3a38;
  --text-muted:  #7a7972;
  --border:      #cfcac4;
  --border-2:    #e8e4df;
  --nav-bg:      rgba(252, 249, 246, 0.92);

  /* ─── Shadows ───────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(5, 5, 3, 0.06);
  --shadow-md:   0 8px 24px rgba(5, 5, 3, 0.10);
  --shadow-lg:   0 16px 48px rgba(5, 5, 3, 0.14);
  --shadow-gold: 0 8px 32px rgba(253, 181, 21, 0.30);

  /* ─── Border Radius ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* ─── Transitions ───────────────────────────────────────── */
  --transition:      0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;

  /* ─── Spacing (8px system) ──────────────────────────────── */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* ─── Typography ─────────────────────────────────────────── */
  --font-ar: 'Almarai', sans-serif;
  --font-en: 'Barlow Condensed', sans-serif;
  --font:    var(--font-ar);  /* overridden by .lang-en */

  /* ─── Z-index scale ─────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   700;
  --z-progress:900;
}

/* ─── Dark Mode ─────────────────────────────────────────────── */
html.dark {
  --bg:         #050503;
  --bg-2:       #0f0f0d;
  --bg-card:    #151512;
  --text:       #fcf9f6;
  --text-2:     #d4cfc9;
  --text-muted: #8a857e;
  --border:     #2a2a28;
  --border-2:   #1e1e1c;
  --nav-bg:     rgba(5, 5, 3, 0.92);
}

/* ─── English Font Override ─────────────────────────────────── */
html.lang-en,
html.lang-en * {
  --font: var(--font-en);
}