/* ==========================================================================
   Design tokens — Outward Bound Saudi Arabia
   Dark "night expedition" palette is the primary experience.
   Light "daylight" palette is applied by [data-mode="light"] (site toggle)
   or by a host that explicitly stamps [data-theme="light"].
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Brand references (from the OBS profile) --- */
  --brand-navy: #062d52;
  --brand-blue: #054b70;
  --brand-orange: #ee9b2d;
  --brand-green: #5ba845;
  --brand-sky: #83c7e6;
  --brand-slate: #535f69;

  /* --- Surfaces --- */
  --bg-primary: #03182b;        /* night sky over the escarpment */
  --bg-secondary: #062340;      /* brand navy, one step lighter  */
  --bg-tertiary: #0a2d4d;
  --surface: rgba(131, 199, 230, 0.05);
  --surface-strong: rgba(131, 199, 230, 0.09);
  --surface-solid: #0b2a47;
  --glass: rgba(3, 24, 43, 0.62);

  /* --- Text --- */
  --text-primary: #eef4f7;
  --text-secondary: #a9bccb;
  --text-muted: #7890a3;
  --text-inverse: #03182b;

  /* --- Accents --- */
  --accent: #f2a53d;            /* compass-needle orange */
  --accent-strong: #ffb957;
  --accent-soft: rgba(242, 165, 61, 0.14);
  --accent-2: #74c35b;          /* terrain green — used sparingly */
  --accent-2-soft: rgba(116, 195, 91, 0.14);
  --accent-3: #83c7e6;          /* sky */
  --accent-3-soft: rgba(131, 199, 230, 0.12);

  /* --- Lines --- */
  --border: rgba(169, 199, 219, 0.14);
  --border-strong: rgba(169, 199, 219, 0.28);
  --contour: rgba(131, 199, 230, 0.16);
  --contour-strong: rgba(242, 165, 61, 0.38);

  /* --- Overlays for photography --- */
  --photo-veil: linear-gradient(180deg, rgba(3, 24, 43, 0.35) 0%, rgba(3, 24, 43, 0.72) 55%, #03182b 100%);
  --photo-veil-side: linear-gradient(90deg, rgba(3, 24, 43, 0.92) 0%, rgba(3, 24, 43, 0.55) 60%, rgba(3, 24, 43, 0.2) 100%);

  /* --- Typography --- */
  --font-display-ar: "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: var(--font-display-ar);

  /* Fluid type scale (min @ 375px → max @ 1440px) */
  --fs-mono: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-lg: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 4.25rem);
  --fs-3xl: clamp(2.75rem, 1.7rem + 4.6vw, 6.5rem);
  --fs-num: clamp(2.75rem, 2rem + 3.2vw, 5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.75;

  /* --- Spacing scale (4px base) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-pad: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.6vw, 3rem);
  --container: 1280px;
  --container-narrow: 880px;

  /* --- Radius: deliberately small; the site is cut, not bubbly --- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  --glow-accent: 0 0 0 1px rgba(242, 165, 61, 0.4), 0 10px 40px -10px rgba(242, 165, 61, 0.45);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms;
  --dur-short: 280ms;
  --dur-medium: 560ms;
  --dur-long: 820ms;

  --nav-h: 76px;
  --z-nav: 50;
  --z-cursor: 100;
}

/* English uses the wide grotesk for display */
:root[lang="en"] {
  --font-display: var(--font-display-en);
}

/* ---------- Daylight palette ---------- */
:root[data-mode="light"],
:root[data-theme="light"]:not([data-mode="dark"]) {
  color-scheme: light;

  --bg-primary: #eef3f6;
  --bg-secondary: #e2eaf0;
  --bg-tertiary: #d5e1ea;
  --surface: rgba(5, 75, 112, 0.04);
  --surface-strong: rgba(5, 75, 112, 0.08);
  --surface-solid: #ffffff;
  --glass: rgba(238, 243, 246, 0.72);

  --text-primary: #062340;
  --text-secondary: #33526b;
  --text-muted: #5a7389;
  --text-inverse: #eef4f7;

  --accent: #b9650a;
  --accent-strong: #9c5300;
  --accent-soft: rgba(185, 101, 10, 0.1);
  --accent-2: #3d8a2a;
  --accent-2-soft: rgba(61, 138, 42, 0.1);
  --accent-3: #05648f;
  --accent-3-soft: rgba(5, 100, 143, 0.08);

  --border: rgba(6, 45, 82, 0.12);
  --border-strong: rgba(6, 45, 82, 0.24);
  --contour: rgba(5, 75, 112, 0.14);
  --contour-strong: rgba(185, 101, 10, 0.4);

  --photo-veil: linear-gradient(180deg, rgba(3, 24, 43, 0.3) 0%, rgba(3, 24, 43, 0.66) 60%, rgba(3, 24, 43, 0.88) 100%);

  --shadow-md: 0 12px 30px -14px rgba(6, 35, 64, 0.28);
  --shadow-lg: 0 40px 70px -34px rgba(6, 35, 64, 0.38);
  --glow-accent: 0 0 0 1px rgba(185, 101, 10, 0.35), 0 10px 30px -12px rgba(185, 101, 10, 0.4);
}