/* =========================================================================
   PRESTIGE — Design Tokens
   Single source of truth for the visual language. Pure CSS3 custom
   properties — no preprocessor. Consumed by every other stylesheet.
   ========================================================================= */

:root {

  /* ---- Color primitives ------------------------------------------------ */
  --c-black: #050607;
  --c-graphite-950: #0a0c0f;
  --c-graphite-900: #101317;
  --c-graphite-850: #14181d;
  --c-graphite-800: #1b1f25;
  --c-graphite-700: #262b32;
  --c-graphite-600: #383e46;
  --c-navy-950: #060a12;
  --c-navy-900: #0a1220;

  --c-white: #f8f7f3;
  --c-white-100: #efeee8;
  --c-ink-60: rgba(248, 247, 243, 0.82);
  --c-ink-40: rgba(248, 247, 243, 0.64);
  --c-ink-25: rgba(248, 247, 243, 0.32);
  --c-ink-12: rgba(248, 247, 243, 0.12);
  --c-ink-08: rgba(248, 247, 243, 0.08);

  --c-gold-100: #f2e6c8;
  --c-gold-300: #e2c791;
  --c-gold-400: #cca962;
  --c-gold-500: #b8934d;
  --c-gold-600: #93743a;
  --c-gold-rgb: 204, 169, 98;

  --c-success: #6fae8c;
  --c-error: #c9716a;

  /* ---- Semantic surface tokens ------------------------------------------ */
  --surface-0: var(--c-black);          /* page background */
  --surface-1: var(--c-graphite-950);   /* section alt background */
  --surface-2: var(--c-graphite-900);   /* card background */
  --surface-3: var(--c-graphite-850);   /* elevated card / hover */
  --surface-border: var(--c-ink-08);
  --surface-border-strong: var(--c-ink-12);
  --surface-border-gold: rgba(var(--c-gold-rgb), 0.35);

  --text-primary: var(--c-white);
  --text-secondary: var(--c-ink-60);
  --text-tertiary: var(--c-ink-40);
  --text-gold: var(--c-gold-400);
  --text-on-gold: #14171b;

  /* ---- Glass / overlay surfaces (dark-tinted panels over content) ------ */
  --header-glass-bg: rgba(5, 6, 7, 0.78);
  --overlay-bg: rgba(5, 6, 7, 0.98);
  --rail-glass-bg: rgba(5, 6, 7, 0.55);
  --modal-backdrop-bg: rgba(4, 5, 6, 0.88);
  --lightbox-bg: rgba(4, 5, 6, 0.96);

  /* ---- Form field surface ------------------------------------------------ */
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-bg-focus: rgba(255, 255, 255, 0.05);

  /* ---- Gradients (used sparingly — no cheap rainbow gradients) --------- */
  --grad-scrim-bottom: linear-gradient(180deg, rgba(5,6,7,0) 0%, rgba(5,6,7,0.55) 55%, rgba(5,6,7,0.96) 100%);
  --grad-scrim-top: linear-gradient(180deg, rgba(5,6,7,0.7) 0%, rgba(5,6,7,0) 40%);
  --grad-gold-line: linear-gradient(90deg, rgba(var(--c-gold-rgb),0) 0%, rgba(var(--c-gold-rgb),0.9) 50%, rgba(var(--c-gold-rgb),0) 100%);
  --grad-gold-fill: linear-gradient(135deg, var(--c-gold-300) 0%, var(--c-gold-400) 55%, var(--c-gold-600) 100%);
  --grad-card: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);

  /* Hero photo vignette (top scrim for title legibility + bottom treatment) */
  --hero-vignette: linear-gradient(180deg, rgba(5,6,7,0.5) 0%, rgba(5,6,7,0.08) 32%, rgba(5,6,7,0.18) 55%, rgba(5,6,7,0.92) 100%);

  /* Hero trust bar (stats strip pinned to the bottom of the hero photo) */
  --hero-trust-bg: rgba(5, 6, 7, 0.32);
  --hero-trust-border: rgba(255, 255, 255, 0.12);
  --hero-trust-fg: var(--c-ink-60);
  --hero-trust-fg-strong: var(--c-white);

  /* ---- Typography -------------------------------------------------------
     Display: Fraunces — a soft, high-contrast editorial serif used across
     current high-end hospitality/yacht/real-estate brand sites.
     Body: Inter — neutral, extremely legible workhorse for UI + copy.   */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --fs-root: 16px;

  /* Fluid type scale: clamp(min, preferred, max) hand-tuned per step */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm:   clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.05rem);
  --fs-md:   clamp(1.125rem, 1.06rem + 0.3vw, 1.3rem);
  --fs-lg:   clamp(1.3rem, 1.18rem + 0.55vw, 1.6rem);
  --fs-xl:   clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --fs-2xl:  clamp(2rem, 1.6rem + 1.7vw, 2.9rem);
  --fs-3xl:  clamp(2.5rem, 1.9rem + 2.6vw, 3.8rem);
  --fs-4xl:  clamp(3.1rem, 2.2rem + 3.9vw, 5rem);
  --fs-5xl:  clamp(3.6rem, 2.2rem + 6vw, 7.2rem);

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-widest: 0.22em;

  /* ---- Spacing scale (4px base) ------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;
  --sp-13: 10rem;

  /* Fluid section rhythm */
  --section-pad-y: clamp(4.5rem, 4rem + 3vw, 8.5rem);
  --section-pad-y-tight: clamp(3rem, 2.6rem + 2vw, 5.5rem);
  --container-pad-x: clamp(1.25rem, 0.7rem + 2.6vw, 5rem);
  --container-max: 1280px;
  --container-max-narrow: 1280px;

  /* ---- Radii -------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* ---- Shadows -------------------------------------------------------------
     Layered, soft, deep — never harsh, never colorful except the gold glow. */
  --shadow-xs: 0 2px 8px rgba(0,0,0,0.28);
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.30);
  --shadow-md: 0 16px 44px rgba(0,0,0,0.38);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.48);
  --shadow-gold: 0 14px 40px rgba(var(--c-gold-rgb), 0.28);
  --shadow-inset-line: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---- Motion --------------------------------------------------------------- */
  --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;
  --dur-cinematic: 1400ms;

  /* ---- Layout tokens ---------------------------------------------------------- */
  --header-h: 92px;
  --header-h-condensed: 72px;

  /* ---- Z-index scale ------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 210;
  --z-toast: 220;
}

@media (min-width: 860px) {
  :root {
    --container-pad-x: clamp(4.6rem, 2.4rem + 3.2vw, 5.5rem);
  }
}