:root {
  /* Jubail palette, chosen by the owner 2026-10-07: median-cut colours from the marina photo
     (assets-src/jubail-industrial-city-marina-commons.jpg, scripts/photo_palette.py):
     Gulf water #0e2f36 / #165062 / #406272, sea blue #7394a6, dusk sky #f7eee4.
     Contrast computed with the WCAG luminance formula (scripts/palette_contrast.py). */
  --ink: #0e2f36;       /* photo, deep Gulf water: 14.20:1 on white */
  --ink2: #1f4550;      /* 10.37:1 on white, body text */
  --stone: #406272;     /* photo, quay shadow: 6.55:1 on white, safe for small text */
  --mist: #557686;      /* darker step of photo sea blue #7394a6 so placeholders pass 4.5:1 */
  --sand: #f7eee4;      /* photo, dusk sky: section backgrounds */
  --paper: #ffffff;
  --line: rgba(14, 47, 54, 0.14);
  --teal: #2b87a3;      /* lit-water highlight, UI/large text only (4.12:1) */

  /* Accent: Gulf teal scale from photo #165062. */
  --accent-300: #2b87a3; /* 4.12:1, borders and large text only */
  --accent-500: #1c6378; /* 6.76:1 */
  --accent-600: #165062; /* 8.91:1, links and buttons */
  --accent-700: #0f3d4b; /* 11.74:1 */

  /* Dusk amber for stars and sun in the hero art: decorative only (2.18:1). */
  --gold-decorative: #e0a458;

  --font-serif: 'Fraunces', serif;
  --font-italic: 'Fraunces', serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  --nav-height: 72px;

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(14, 47, 54, 0.12);
  --shadow-md: 0 8px 30px rgba(14, 47, 54, 0.14);
  --shadow-lg: 0 12px 40px rgba(14, 47, 54, 0.16);
  --shadow-xl: 0 16px 48px rgba(14, 47, 54, 0.16), 0 2px 8px rgba(14, 47, 54, 0.06);
  --shadow-2xl: 0 24px 70px rgba(14, 47, 54, 0.22);
  --shadow-drawer: -12px 0 60px rgba(14, 47, 54, 0.18);

  --z-back-top: 90;
  --z-header: 120;
  --z-lang-pill: 121;
  --z-dock: 122;
  --z-cookie-bar: 160;
  --z-lightbox: 180;
  --z-skip-link: 200;
}