/* ==========================================================================
   W Riyadh KAFD, Opening, design tokens
   Palette extracted from the property's own materials (bronze metalwork,
   black and travertine marble, teal deck signage, terracotta lounge
   accents) rather than a generic W or Saudi cliche. Single source of
   truth for color, type, spacing, radius, shadow and motion.
   ========================================================================== */

:root {
  /* Color, ink (headings, body text, drawn from the property's black stone) */
  --wr-black-950: #0b0a09;
  --wr-ink-900: #211d18;
  --wr-ink-700: #45403a;

  /* Color, bronze / brass (Sahari pergola, lobby fixtures) */
  --wr-bronze-700: #7a5a30;
  --wr-bronze-600: #96702e;
  --wr-bronze-500: #ad814a;
  --wr-bronze-400: #c9a066;
  --wr-bronze-300: #ddbd8c;

  /* Color, travertine / sand (marble floors, stone facade), used sparingly now */
  --wr-sand-300: #ded2b8;
  --wr-sand-200: #ece3cf;
  --wr-sand-100: #f4eee0;
  --wr-sand-50: #f8f6f0;
  --wr-cream-0: #fdfcf9;

  /* Page ground, near-white with only a whisper of warmth (not yellow) */
  --wr-paper: #fbfaf6;

  /* Color, teal (Wet Deck signage, pool mosaic) */
  --wr-teal-700: #135c56;
  --wr-teal-600: #1c7d76;
  --wr-teal-500: #2a9d94;
  --wr-teal-300: #7fc9c0;

  /* Color, terracotta (lounge curtain, bar accents), used sparingly */
  --wr-terracotta-500: #b85c3c;

  --wr-white: #fffdf8;

  /* Color, semantic roles, light / premium editorial ground */
  --surface-page: var(--wr-paper);
  --surface-panel: var(--wr-sand-50);
  --surface-panel-raised: var(--wr-white);
  --pattern-gold: #ad814a;
  --pattern-teal: #2a9d94;
  --wr-pattern-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ad814a' stroke-width='0.6' opacity='0.16'%3E%3Cpath d='M70 8 L132 70 L70 132 L8 70 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%232a9d94' stroke-width='0.6' opacity='0.13'%3E%3Cpath d='M70 38 L100 70 L70 102 L40 70 Z'/%3E%3C/g%3E%3C/svg%3E");
  --surface-ink: var(--wr-ink-900);
  --text-primary: var(--wr-ink-900);
  --text-muted: rgba(33, 29, 24, 0.64);
  --text-faint: rgba(33, 29, 24, 0.42);
  --text-on-ink: var(--wr-cream-0);
  --text-accent: var(--wr-bronze-600);
  --text-teal: var(--wr-teal-600);
  --border-hairline: rgba(33, 29, 24, 0.12);
  --border-hairline-strong: rgba(33, 29, 24, 0.22);
  --border-accent: rgba(150, 112, 46, 0.4);

  /* Typography */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --step-display: clamp(3rem, 2rem + 4.5vw, 6.5rem);
  --step-h1: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --step-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --step-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --step-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
  --step-body: 1rem;
  --step-body-sm: 0.875rem;
  --step-caption: 0.75rem;
  --step-overline: 0.75rem;

  /* Spacing (8px base unit) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-low: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-medium: 0 12px 28px rgba(0, 0, 0, 0.36);
  --shadow-high: 0 24px 64px rgba(0, 0, 0, 0.46);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-micro: 150ms;
  --duration-normal: 550ms;
  --duration-macro: 1000ms;

  /* Layout */
  --content-max: 1200px;
  --stage-padding-inline: clamp(1.5rem, 6vw, 7rem);
}