/* ==========================================================================
   Venues Only — design tokens

   The single source of truth for colour, type, space, line, shape, motion and
   control sizing. Every value in css/site.css reads from this file; change a
   token here and it changes everywhere.

   The palette is two families and nothing else: near-black grounds and warm
   ivory pages, with gold as the only accent. There is no third hue.
   ========================================================================== */

:root {
  /* --- Ink -------------------------------------------------------------
     Near-black grounds: the header, the footer, hero overlays, the featured
     package and the dark bands that set the page rhythm. #090909 is the
     brand near-black; the lighter steps are for layering inside it. */
  --ink-900: #050505;
  --ink-800: #090909; /* the near-black */
  --ink-700: #121212;
  --ink-600: #1b1b1b;
  --ink-500: #262626;
  --ink-400: #333333;

  /* --- Gold ------------------------------------------------------------
     Antique gold is the accent; champagne is its lighter counterpart for
     dark grounds. Gold is never a background for long text and never a
     body-copy colour.

     Contrast, because gold is easy to get wrong:
       --gold-500 on --ink-800   ~7.0:1   safe for small text on dark
       --gold-300 on --ink-800   ~9.8:1   safe for small text on dark
       --gold-500 on --ivory     ~2.4:1   DECORATION ONLY - rules, icons
       --gold-700 on --ivory     ~4.6:1   safe for small text on light
     Use --gold-ink for any gold text on a light ground. */
  --gold-800: #6f5526;
  --gold-700: #8a6a2f; /* gold text on light grounds */
  --gold-600: #a8863f;
  --gold-500: #c6a05d; /* antique gold - the accent */
  --gold-400: #d4b477;
  --gold-300: #e8c58b; /* champagne - gold on dark grounds */
  --gold-200: #f0dbb4;
  --gold-100: #f6ecd9;

  /* --- Warm neutrals ---------------------------------------------------- */
  --ivory: #f7f5f2; /* the page ground */
  --ivory-deep: #efebe5; /* a quieter band inside an ivory page */
  --stone: #dddad5; /* hairlines and inactive borders */
  --slot: #f1eee8; /* an image slot still waiting for photography */
  --stone-600: #c3beb6;
  --white: #ffffff;

  /* --- Grey text -------------------------------------------------------- */
  --grey-900: #181818; /* main text */
  --grey-600: #595959; /* secondary text */
  --grey-500: #757575;
  --grey-400: #8a8a8a;

  /* --- Semantic: accent -------------------------------------------------- */
  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-press: var(--gold-600);
  --accent-on-dark: var(--gold-300); /* gold against a near-black ground */
  --accent-ink: var(--gold-700); /* gold text against an ivory ground */
  --on-accent: var(--ink-800); /* text sitting on a gold fill */

  /* --- Semantic: text ---------------------------------------------------- */
  --text-strong: var(--grey-900);
  --text-body: var(--grey-600);
  --text-muted: var(--grey-500);
  --text-faint: var(--grey-400);
  --text-inverse: var(--white);
  --text-inverse-soft: rgba(255, 255, 255, 0.84);
  --text-inverse-faint: rgba(255, 255, 255, 0.66);

  /* --- Semantic: surface -------------------------------------------------- */
  --surface-page: var(--ivory);
  --surface-card: var(--white);
  --surface-subtle: var(--ivory-deep);
  --surface-muted: var(--stone);
  --surface-dark: var(--ink-800);
  --surface-dark-soft: var(--ink-600);
  --surface-header: var(--ink-800);
  --surface-footer: var(--ink-800);

  /* --- Semantic: line ------------------------------------------------------ */
  --border-hairline: var(--stone);
  --border-strong: var(--stone-600);
  --border-dark: rgba(255, 255, 255, 0.14);
  --border-accent: var(--gold-500);
  --hairline: 1px;

  /* --- Overlays -------------------------------------------------------------
     Hero scrims. Text sits on the left, so the wash is dark behind the type
     there, then fully clear across the right of the photograph. */
  --scrim-hero: linear-gradient(
    90deg,
    rgba(9, 9, 9, 0.62) 0%,
    rgba(9, 9, 9, 0.55) 26%,
    rgba(9, 9, 9, 0.3) 50%,
    rgba(9, 9, 9, 0) 70%
  );
  --scrim-hero-v: linear-gradient(180deg, rgba(9, 9, 9, 0.25) 0%, rgba(9, 9, 9, 0) 38%, rgba(9, 9, 9, 0.22) 100%);
  --scrim-band: rgba(9, 9, 9, 0.72); /* full-width quote / CTA bands */
  --scrim-tile: linear-gradient(180deg, rgba(9, 9, 9, 0) 45%, rgba(9, 9, 9, 0.78) 100%);

  /* --- Type families --------------------------------------------------------
     Two faces, used strictly: Cormorant Garamond for display, DM Sans for
     everything a visitor reads at small sizes or interacts with. The mono
     face is for unresolved [PLACEHOLDER] copy only, so gaps stand out. */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale -------------------------------------------------------- */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-ms: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  /* Display sizes. Cormorant runs small for its point size, so these are
     larger than a sans-serif equivalent would be. */
  --display-hero: clamp(42px, 5.6vw, 76px);
  --display-page: clamp(36px, 4.5vw, 60px);
  --display-section: clamp(31px, 3.7vw, 47px);
  --display-sub: clamp(27px, 2.9vw, 37px);
  --display-card: clamp(21px, 1.9vw, 26px);

  --leading-display: 1.04;
  --leading-heading: 1.12;
  --leading-body: 1.7;
  --leading-tight: 1.45;

  /* Cormorant is a wide, low-contrast serif: it wants no negative tracking.
     The small uppercase sans labels carry the letter-spacing instead. */
  --tracking-display: 0;
  --tracking-caps: 0.1em;
  --tracking-label: 0.16em;
  --tracking-eyebrow: 0.24em;
  --tracking-nav: 0.12em;

  --weight-display: 400; /* regular serif headings, never bold */
  --weight-display-med: 500;

  /* --- Space ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 104px;

  --gutter: 24px;
  --container-max: 1180px;
  --container-narrow: 860px;
  --container-wide: 1420px;

  /* Generous, editorial section rhythm. */
  --section-y: clamp(72px, 7.4vw, 118px);
  --section-y-tight: clamp(48px, 5vw, 76px);
  --section-y-loose: clamp(88px, 9vw, 140px);
  /* The page hero: one height for every page. The heading, lead and button
     row each reserve room for the longest any page runs to (the line counts
     rise at phone width), so content that outgrows --hero-h grows every hero
     alike. */
  --hero-h: clamp(400px, 42vw, 600px);
  --hero-pad: clamp(44px, 5vw, 72px);
  --hero-title-lines: 2;
  --hero-lead-lines: 3;
  --hero-actions-h: var(--control-h-lg);

  /* --- Shape -------------------------------------------------------------
     Square edges throughout. The only curves on the site are genuinely
     circular controls: stepper dots, calendar days, social buttons. */
  --radius-control: 0;
  --radius-card: 0;
  --radius-circle: 50%;
  --rule-w: 56px; /* the short gold rule under an eyebrow or heading */
  --rule-h: 1px;

  /* --- Motion -------------------------------------------------------------
     Short and understated. Nothing moves more than a couple of pixels. */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --transition-control:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);

  /* --- Controls ------------------------------------------------------------ */
  --control-h-sm: 40px;
  --control-h-md: 48px;
  --control-h-lg: 54px;
  --btn-pad-sm: 18px;
  --btn-pad-md: 26px;
  --btn-pad-lg: 34px;
  --btn-font: var(--text-xs);
  --btn-tracking: var(--tracking-label);
  --focus-ring: var(--gold-500);
  --focus-ring-dark: var(--gold-300);

  /* --- Layering -------------------------------------------------------------- */
  --z-header: 40;
  --z-lightbox: 90;
}

/* --- Breakpoints -------------------------------------------------------------
   Custom properties cannot be used inside a media query, so the scale is
   fixed here as the one reference and these exact values are the only
   breakpoints css/site.css uses:

     --bp-sm    560px    stacked phone  ->  wide phone
     --bp-md    768px    wide phone     ->  tablet
     --bp-lg   1024px    tablet         ->  desktop
     --bp-xl   1280px    desktop        ->  wide desktop

   The header collapses to the mobile nav below --bp-lg, because the full
   word-spaced nav plus the booking button needs the width.
   ---------------------------------------------------------------------------- */