/* ============================================================
   Quartz Executive — Design tokens

   Palette derived from the hotel's own logo artwork:
     plum   #584868  (dominant logo fill)
     blush  #D0B0A8  (logo gradient highlight)

   Structure follows the art direction the client selected:
   a warm bone page that never turns white, deep plum blocks
   instead of hard section edges, very large soft radii, an
   oversized display scale, and slow custom easing.
   ============================================================ */

:root {
  /* ---------- surfaces ----------
     The page is bone, not white. Nothing on this site is #fff. */
  --bone: #efeae2;
  --bone-2: #e7e0d6;
  --bone-3: #ddd3c7;
  --paper: var(--bone);
  --paper-2: var(--bone-2);
  --paper-3: var(--bone-3);
  --paper-4: #c2b2a5; /* watermark numerals — decorative, aria-hidden */

  /* deep plum replaces the reference's pine green */
  --ink: #241c30;
  --ink-2: #2f2540;
  --ink-3: #3b3050;

  /* ---------- text ----------
     Warm, never pure black — but dark enough to pass AA on bone. */
  --fg: #241c30; /* 13.8:1 */
  --fg-soft: #5b5060; /*  6.4:1 */
  --fg-faint: #8a7f8d; /* decorative only */
  --fg-invert: #efeae2;
  --fg-invert-soft: rgba(239, 234, 226, 0.7);

  /* ---------- accent ----------
     Bone is warmer than white, so both accents are a step deeper than
     the raw logo blush in order to clear AA on this background. */
  --blush: #a87669; /* 3.3:1 — display headings only (≥24px) */
  --blush-ink: #7f544b; /* 4.9:1 — small text, labels, numerals */
  --blush-lt: #d0b0a8; /* on dark surfaces (7.4:1) */
  --plum: #584868;

  /* ---------- lines ---------- */
  --line: rgba(36, 28, 48, 0.12);
  --line-strong: rgba(36, 28, 48, 0.24);
  --line-invert: rgba(208, 176, 168, 0.22);

  /* ---------- type ---------- */
  --font-ar: 'Almarai', system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Oversized display, tightly tracked — the reference's signature.
     Arabic needs a little less negative tracking than Latin. */
  --fs-hero: clamp(2.5rem, 6.6vw, 6.5rem);
  --fs-h2: clamp(2rem, 5.4vw, 4.5rem);
  --fs-h3: clamp(1.25rem, 2.3vw, 1.875rem);
  --fs-lede: clamp(1rem, 1.2vw, 1.125rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

  --track-display: -0.035em;
  --track-label: 0.26em;

  /* ---------- rhythm ---------- */
  --pad: clamp(1rem, 4vw, 2.5rem);
  --gap: clamp(1rem, 2.5vw, 2rem);
  --sec-y: clamp(4.5rem, 9vw, 9rem);
  --maxw: 100rem;

  /* ---------- radii ----------
     Large and consistent: images, cards, tags, buttons, the map,
     the lightbox. This is what gives the page its soft, modern feel. */
  --r-s: 8px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --r-round: 500px;

  --radius: var(--r-xl);

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.22, 0.9, 0.24, 1); /* long, soft tail */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Three steps, used everywhere. Scattered ad-hoc durations are what
     made the page feel hurried and uneven; every transition now snaps
     to one of these. */
  --dur-fast: 0.45s; /* hover and small state changes   */
  --dur: 0.85s; /* component transitions           */
  --dur-slow: 1.4s; /* reveals, image zooms, parting   */

  /* ---------- elevation ---------- */
  --shadow-sm: 0 12px 30px -18px rgba(36, 28, 48, 0.35);
  --shadow: 0 30px 70px -34px rgba(36, 28, 48, 0.4);
  --shadow-lg: 0 50px 100px -50px rgba(36, 28, 48, 0.5);

  --header-h: 5rem;
}