/* ============================================================
   WATAD — Design Tokens
   Luxury VIP concierge · Cairo · bilingual EN/AR
   ============================================================ */

:root {
  /* ---- Color: neutrals ---- */
  --onyx:      #0C0C0E;   /* dark sections, footer */
  --onyx-800:  #141417;
  --onyx-700:  #1D1D21;
  --onyx-600:  #27272C;
  --ink:       #17150F;   /* warm near-black body text on light */
  --ivory:     #FBFAF6;   /* main background */
  --bone:      #F1EDE4;   /* warm light alt panels */
  --sand:      #E4DDCF;   /* tonal blocks */
  --line:      #E7E1D5;   /* hairline on light */
  --line-soft: #EFEBE1;
  --muted:     #6E685C;   /* secondary text on light */
  --muted-2:   #948C7C;
  --muted-dark:#9C978C;   /* secondary text on dark */
  --white:     #FFFFFF;

  /* ---- Color: gold ---- */
  --gold-100:  #F6EAC4;   /* champagne highlight */
  --gold-200:  #E6CE96;   /* light gold */
  --gold-300:  #D8B45E;
  --gold:      #C9A24A;   /* core gold leaf */
  --gold-500:  #B4882F;
  --gold-600:  #8A6A25;   /* bronze shadow */
  --gold-700:  #6B5019;
  --gold-tint: rgba(201,162,74,.10);
  --gold-line: rgba(201,162,74,.28);

  /* metallic gradients */
  --grad-gold: linear-gradient(146deg, #F6EAC4 0%, #E6CE96 22%, #C9A24A 48%, #9E7A2C 72%, #E6CE96 100%);
  --grad-gold-v: linear-gradient(180deg, #F0DFA8 0%, #C9A24A 46%, #8A6A25 100%);
  --grad-sheen: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.75) 48%, transparent 62%);
  --grad-onyx: linear-gradient(180deg, #141417 0%, #0C0C0E 100%);
  --grad-ivory-fade: linear-gradient(180deg, rgba(251,250,246,0) 0%, var(--ivory) 92%);

  /* ---- Typography ---- */
  --font-display:    "Cinzel", "Times New Roman", serif;
  --font-display-ar: "Cairo", ui-sans-serif, system-ui, sans-serif;
  --font-body:       "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-ar:    "Cairo", ui-sans-serif, system-ui, sans-serif;

  /* fluid type scale */
  --fs-display: clamp(3rem, 8.5vw, 8rem);
  --fs-hero:    clamp(2.6rem, 6vw, 5.5rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.75rem);
  --fs-h2:      clamp(1.65rem, 3.2vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.55rem);
  --fs-lead:    clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.06;
  --lh-snug:  1.24;
  --lh-body:  1.68;

  --ls-display: 0.02em;
  --ls-eyebrow: 0.34em;
  --ls-caps:    0.14em;

  /* ---- Spacing ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;
  --section-y: clamp(5rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1280px;
  --maxw-narrow: 940px;

  /* ---- Radius / borders ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;
  --hair: 1px;

  /* ---- Shadow (soft luxury) ---- */
  --sh-1: 0 1px 2px rgba(23,21,15,.04), 0 2px 8px rgba(23,21,15,.05);
  --sh-2: 0 10px 30px -12px rgba(23,21,15,.16), 0 2px 8px rgba(23,21,15,.05);
  --sh-3: 0 30px 70px -30px rgba(23,21,15,.30);
  --sh-gold: 0 12px 40px -14px rgba(160,122,44,.45);
  --sh-inset-gold: inset 0 0 0 1px var(--gold-line);

  /* ---- Motion ---- */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.65,.05,.36,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
  --t-fast: .28s;
  --t-med: .55s;
  --t-slow: .9s;

  /* ---- z ---- */
  --z-line: 2;
  --z-header: 60;
  --z-modal: 200;
  --z-toast: 300;
  --z-loader: 400;

  color-scheme: light;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---- Arabic / RTL font swap ----
   `body` sets font-family itself, so the swap needs equal-or-higher
   specificity or Arabic text silently falls back to a system font. */
:root[lang="ar"] body, :root[dir="rtl"] body,
[lang="ar"], [dir="rtl"] { font-family: var(--font-body-ar); }
[lang="ar"] .display, [dir="rtl"] .display { font-family: var(--font-display-ar); }

/* ============================================================
   Reusable primitives
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
}
[dir="rtl"] .eyebrow { font-family: var(--font-body-ar); letter-spacing: normal; font-weight: 700; }

/* Arabic display: Cairo needs a touch more weight and line height than Cinzel */
[dir="rtl"] .display { font-weight: 700; letter-spacing: normal; }

/* Arabic is a cursive script: letter-spacing inserts a gap after every glyph and
   visually breaks the joins ("بسائق" -> "بـ سـ ا ئـ ق"). Every Arabic string on
   the site is wrapped in .lang-ar, so neutralising it here covers the whole page
   and stops any future rule from reintroducing the bug. Latin is untouched. */
[dir="rtl"] .lang-ar, [lang="ar"] .lang-ar { letter-spacing: normal; word-spacing: normal; }

.gold-text {
  background: var(--grad-gold);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

.hairline { height: var(--hair); background: var(--line); border: 0; }
.hairline-gold { height: var(--hair); background: var(--gold-line); border: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* language visibility — JS sets [data-lang] on <html> */
:root[data-lang="en"] .lang-ar { display: none !important; }
:root[data-lang="ar"] .lang-en { display: none !important; }