/* tokens.css — the design system's single source of values (lead-owned).
   Every module uses these custom properties; change a value here to restyle the whole site. */
:root {
  color-scheme: dark;

  /* ground */
  --night: #0A0908;
  --char: #121010;
  --char-2: #1A1714;
  --char-3: #24201B;
  --line: rgba(214, 182, 122, .16);
  --line-2: rgba(214, 182, 122, .32);

  /* antique metallic gold — never bright yellow */
  --gold: #B8924F;
  --gold-hi: #DCC08A;
  --gold-lo: #7C5E30;
  --gold-metal: linear-gradient(115deg, #7C5E30 0%, #C9A869 28%, #EAD7A6 44%, #B8924F 58%, #8A6A38 76%, #D6BC85 100%);

  /* ivory text */
  --ivory: #EEE6D6;
  --ivory-2: #CEC4B1;
  --mute: #948A78;

  /* accents (used sparingly, per chapter) */
  --burgundy: #5A1920;
  --burgundy-hi: #7C2630;
  --green: #1D342A;
  --ochre: #6B4A22;

  /* chapter atmospheres (radial washes behind content) */
  --atmos-baghdad: #15120E;
  --atmos-najaf: #1C140B;
  --atmos-road: #1B150E;
  --atmos-karbala: #1A0A0D;
  --atmos-depart: #111112;
  --atmos-dialogues: #0C100E;
  --atmos-guests: #1A1714;

  /* map overlay (from the journey-map audit) */
  --route-past: rgba(201, 164, 92, .55);
  --route-active: #F0D48A;
  --route-glow: rgba(201, 164, 92, .25);
  --route-upcoming: rgba(201, 164, 92, .18);
  --marker-ring: #F0D48A;
  --marker-core: #0F0D0B;
  --map-label: #F3E9D2;
  --map-label-2: #BFA878;
  --map-ground: #0F0D0B;

  /* type families (switch with language) */
  --f-display-en: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-text-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display-ar: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --f-text-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --f-read-ar: "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;
  --f-callig: "Reem Kufi", "Amiri", serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --f-display: var(--f-display-en);
  --f-text: var(--f-text-en);
  --f-read: var(--f-display-en);

  /* fluid type scale */
  --t-display-1: clamp(3rem, 7.2vw, 7.5rem);
  --t-display-2: clamp(2.4rem, 4.8vw, 4.6rem);
  --t-h2: clamp(1.9rem, 3.2vw, 3rem);
  --t-h3: clamp(1.35rem, 1.9vw, 1.75rem);
  --t-lead: clamp(1.15rem, 1.45vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-micro: .75rem;
  --lh-body: 1.65;
  --lh-tight: 1.08;
  --track-kicker: .22em;

  /* space + layout */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4.5vw, 72px);
  --section-y: clamp(96px, 14vh, 180px);
  --max: 1440px;
  --measure: 66ch;
  --radius: 2px;
  --nav-h: 72px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --d-1: 240ms; --d-2: 600ms; --d-3: 1200ms; --d-4: 2400ms;

  /* exhibit light */
  --r-arch: 50% 50% 3px 3px / 36% 36% 3px 3px;
  --shadow-exhibit: 0 40px 80px -30px rgba(0,0,0,.9), 0 18px 30px -18px rgba(0,0,0,.8);
  --spot: radial-gradient(60% 55% at 50% 0%, rgba(220,192,138,.11), rgba(220,192,138,0) 70%);
  --lh-display: 1.04;

  /* focus */
  --focus: 0 0 0 2px var(--night), 0 0 0 4px var(--gold-hi);
}

html:lang(ar) {
  --f-display: var(--f-display-ar);
  --f-text: var(--f-text-ar);
  --f-read: var(--f-read-ar);
  --t-body: 1.1875rem;
  --lh-body: 1.9;
  --track-kicker: 0;
  --measure: 60ch;
  --lh-display: 1.42;
}

@media (max-width: 640px) {
  :root { --nav-h: 60px; }
}