/* ============================================================
   JOIN DUBAI — Design tokens (theme layer)
   All colour, type and spacing decisions live here as CSS
   custom properties so the same HTML/CSS structure can be
   re-themed (see arena-embed/theme-arena.css).
   ============================================================ */
:root {
  /* --- Brand palette: "governmental luxury" --- */
  --midnight-900: #060b1c;   /* deepest hero background        */
  --midnight-800: #0a1330;   /* dark section background        */
  --midnight-700: #101d44;   /* raised dark surface            */
  --midnight-600: #1b2c5e;   /* borders on dark                */

  --sand-050: #faf7f0;       /* light section background       */
  --sand-100: #f3ece0;       /* card / alt surface             */
  --sand-200: #e7dcc7;       /* light borders                  */

  --gold-500: #c9a227;       /* primary gold accent            */
  --gold-400: #d8b64a;       /* brighter gold (hover)          */
  --gold-300: #e7cf86;       /* soft gold (lines on dark)      */
  --gold-700: #9c7b26;       /* readable gold text on white    */
  --gold-800: #7f6420;       /* deep gold (small text on white)*/

  --ink-900: #14171f;        /* near-black text on light       */
  --ink-700: #3a3f4b;        /* secondary text on light        */
  --ink-500: #6b7180;        /* muted text on light            */

  --paper: #ffffff;
  --on-dark: #eef1f8;        /* primary text on dark           */
  --on-dark-muted: #a9b4cf;  /* secondary text on dark         */

  /* --- Semantic roles (referenced by main.css) --- */
  --bg: var(--paper);
  --bg-alt: var(--sand-050);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-400);
  --line: var(--sand-200);

  /* --- Typography --- */
  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1.02rem;
  --fs-small: 0.86rem;
  --fs-label: 0.72rem;

  --lh-tight: 1.08;
  --lh-body: 1.62;

  /* --- Layout --- */
  --maxw: 1200px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 8px;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* --- Effects --- */
  --shadow-card: 0 1px 2px rgba(20,23,31,.05), 0 12px 30px -18px rgba(20,23,31,.35);
  --shadow-raise: 0 20px 50px -24px rgba(20,23,31,.45);
  --blur-nav: saturate(160%) blur(14px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Arabic typographic adjustments (applied when dir=rtl) */
:root[dir="rtl"] {
  --font-head: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", "Tahoma", sans-serif;
  --font-body: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", "Tahoma", sans-serif;
  --lh-body: 1.9;
  --lh-tight: 1.35;
}