/* ==========================================================================
   Vedic Village design tokens — the one source for colour, type, space,
   layout, elevation and motion. Enqueued site-wide ahead of every other
   theme stylesheet (functions.php).

   The live site (vedicvillagehotels.com) is the specification. Values here are
   its own published tokens, frozen in docs/live-snapshot/.

   COLOUR IS TWO-TIER. docs/design-system/color.md is the rulebook, and any
   change here must land there in the same commit.
     1. Base tokens  --vv-neutral-* / --vv-gold-* / --vv-terracotta-* / --vv-navy-*
        Raw palette values, quoted against the live --token-<uuid> they came
        from. Only this file references them.
     2. Role tokens  --vv-color-* / --vv-cta-*
        What components use. Role NAMES are stable across a redesign; only the
        base value each points at moves. That is what makes a later
        normalisation a token-file edit rather than a rebuild.
   The .vv-tone-* classes at the bottom re-point the role tokens for the two
   dark bands (navy and terracotta), so components never need tone-specific
   colour rules.
   ========================================================================== */

@font-face {
  font-family: 'Gambetta';
  src: url('fonts/Gambetta-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/WorkSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* No italic faces: nothing is set in italics (type v5, user 2026-10-11). */

:root {
  /* ---------- Colour · base (palette) ----------
     Began as the live site's Framer tokens (uuids quoted where they came from
     one); ours now. Names are hue + lightness step. Consolidated 2026-10-10:
     unused steps removed and shades too close to tell apart merged into one
     (docs/design-system/color.md). */
  --vv-neutral-0:   #FFFFFF;  /* token-2b13c7cf  white */
  --vv-neutral-30:  #F8F7F3;  /* ours: the page ground (user, 2026-10-10) */
  --vv-neutral-120: #F9F9F7;  /* measured: the Accommodations hubs' room rows */
  --vv-neutral-200: #F2EEE4;  /* token-263db23e  Background Emphasis */
  --vv-neutral-270: #E0DACE;  /* the user, 2026-10-07: every separator on a light ground */
  --vv-neutral-550: #838383;  /* token-896472d8  quiet greys: placeholders, icons, field underlines */
  --vv-neutral-620: #686459;  /* the user, 2026-10-06: the one subtle-text colour */
  --vv-neutral-700: #47433B;  /* token-aaeffcbd  headings */
  --vv-neutral-800: #3A3A3A;  /* token-c1e8fc04  Text */
  --vv-neutral-900: #141414;  /* near-black: scores, contacts, selected controls */
  --vv-neutral-1000: #000000; /* token-0c3f8319  hero display type over photographs */

  --vv-sage-500:    #6F8262;  /* the Home Destinations showcase's panel (user, 2026-10-10) */
  --vv-gold-120:    #E0D8C8;  /* every separator on a light ground (user, 2026-10-10) */
  --vv-gold-150:    #E5DDCE;  /* the highlight ground, every highlight band (user, 2026-10-10) */
  --vv-gold-200:    #D3C7AD;  /* the Packages band's first tan, replaced by gold-150 (user, 2026-10-10) */
  --vv-gold-300:    #C4A36A;  /* token-5f4344f6 */
  --vv-green-700:   #1B741F;  /* Tripadvisor's rating circles (Figma 980:397, user 2026-10-11) */
  --vv-gold-500:    #9E7C43;  /* token-8458a3fc */
  --vv-gold-600:    #886221;  /* Figma 923:72: the secondary button (user, 2026-10-07) */
  --vv-gold-700:    #6E4603;  /* Figma 926:130: the secondary button on hover */

  --vv-terracotta-600: #722C2F; /* token-c8856b46  Terr.Red: the hover on Rust Brown */
  --vv-rust-600:       #904420; /* Rust Brown, the primary colour (user, 2026-10-10): logo, links, nav buttons, focus, the accent band */

  --vv-navy-600:    #293859;  /* token-7bce1137  Prime-blue */
  --vv-navy-750:    #1F2A3A;  /* ours: the footer ground and the CTA band's button (user's mockup, 2026-10-07) */
  --vv-navy-900:    #052057;  /* token-d3596ec0  Prime-Blue-Dark: hover on navy */

  /* Alpha values. */
  --vv-filter-alpha: #BBBBBB26; /* measured: the job filter's buttons and select, rgba(187,187,187,.15) */
  --vv-white-70:    #FFFFFFB3; /* the footer's group labels and its links on hover or press (user, 2026-10-11) */
  --vv-white-60:    #FFFFFF99; /* token-f5d60aa2  text over photographs */
  --vv-white-20:    #FFFFFF33; /* measured: the property footer's rules */
  --vv-white-10:    #FFFFFF1A; /* measured: the brand footer's hairline */
  --vv-black-8:     #00000014; /* measured: the property switcher's shadow */
  --vv-black-20:    #00000033; /* measured: the wash over hero and tile photographs */
  --vv-black-40:    #00000066; /* the Home Destinations showcase's wash; the slides' arrow discs */
  --vv-black-50:    #00000080; /* the Home showcase counter's hover fill */
  --vv-black-60:    #00000099; /* measured: the overlay behind the booking panel */
  --vv-black-70:    #000000B3; /* measured: the foot of the homepage slides' gradient */
  --vv-black-80:    #000000CC; /* measured: the overlay behind the live dialogs */

  /* ---------- Motion ----------
     Two tiers, as colour and type (docs/design-system/motion.md).

     PRIMITIVES are the raw scale: values only, no meaning. Components never
     read them. Durations are plain ms, unscaled; easings are named by curve.

     SEMANTICS say what a motion is for. Components read only these. To retune
     a purpose (every hover, every reveal) point its token at another primitive
     here; nothing else changes. Semantic durations carry --vv-motion-scale:
     the Lab's slow-motion dial and the reduced-motion switch (bottom of file). */
  --vv-motion-scale: 1;

  /* Primitive: duration */
  --vv-duration-250: 250ms;
  --vv-duration-300: 300ms;
  --vv-duration-400: 400ms;
  --vv-duration-600: 600ms;
  --vv-duration-700: 700ms;
  --vv-duration-800: 800ms;
  --vv-duration-1000: 1000ms;
  --vv-duration-1200: 1200ms;
  --vv-duration-1800: 1800ms;

  /* Primitive: easing. Measured off the live site (docs/design-system/motion.md). */
  --vv-easing-linear: linear;                            /* the menu's lists, as Aman's move */
  --vv-easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);    /* CSS ease */
  --vv-easing-ease-out: cubic-bezier(0, 0, 0.58, 1);     /* CSS ease-out: Framer's appear effects */
  --vv-easing-in-out: cubic-bezier(0.44, 0, 0.56, 1);    /* Framer's in-out: colour, surfaces */
  --vv-easing-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint: arrives fast, settles slowly */

  /* Semantic: hover — any hover or press: colour, fill, line (user, 2026-09-25) */
  --vv-motion-hover-duration: calc(var(--vv-duration-300) * var(--vv-motion-scale));
  --vv-motion-hover-easing: var(--vv-easing-ease-out);   /* responds at once (user, 2026-10-12) */
  /* Semantic: toggle — a control changing state: a chevron turning, siblings dimming */
  --vv-motion-toggle-duration: calc(var(--vv-duration-250) * var(--vv-motion-scale));
  --vv-motion-toggle-easing: var(--vv-easing-ease);
  /* Semantic: fade — a control or group appearing or leaving: rail arrows and dots, menu groups */
  --vv-motion-fade-duration: calc(var(--vv-duration-700) * var(--vv-motion-scale));
  --vv-motion-fade-easing: var(--vv-easing-out-quint);
  /* Semantic: reveal — content entering on scroll: one slow fade with a 16px
     drift (--vv-shift-sm); photographs fade only. */
  --vv-motion-reveal-duration: calc(var(--vv-duration-1200) * var(--vv-motion-scale));   /* quiet: a slow fade (user, 2026-10-10) */
  --vv-motion-reveal-easing: var(--vv-easing-ease-out);
  /* Semantic: surface — a menu or panel opening over the page */
  --vv-motion-surface-duration: calc(var(--vv-duration-800) * var(--vv-motion-scale));
  --vv-motion-surface-easing: var(--vv-easing-in-out);
  /* Semantic: slide — a slideshow moving one slide */
  --vv-motion-slide-duration: calc(var(--vv-duration-1000) * var(--vv-motion-scale));
  --vv-motion-slide-easing: var(--vv-easing-in-out);
  --vv-motion-slide-long-duration: calc(var(--vv-duration-1800) * var(--vv-motion-scale));  /* the gallery slideshow */
  /* Semantic: sheet — a page's list sliding in from the right on a phone, the pages drifting back from the left (user, 2026-11-11, after Aman) */
  --vv-motion-sheet-duration: calc(var(--vv-duration-400) * var(--vv-motion-scale));
  --vv-motion-sheet-easing: var(--vv-easing-linear);
  /* Semantic: swipe — a carousel finishing the move a finger or mouse began (user, 2026-10-16) */
  --vv-motion-swipe-duration: calc(var(--vv-duration-600) * var(--vv-motion-scale));
  --vv-motion-swipe-easing: var(--vv-easing-out-quint);
  /* Semantic: scroll — the page gliding to a link's target on the same page */
  --vv-motion-scroll-duration: calc(var(--vv-duration-1000) * var(--vv-motion-scale));
  --vv-motion-scroll-easing: var(--vv-easing-in-out);
  /* Semantic: mask — the Overviews' photograph curtain; the Lab's easing demo */
  --vv-motion-mask-duration: calc(var(--vv-duration-1200) * var(--vv-motion-scale));
  --vv-motion-mask-easing: var(--vv-easing-out-quint);   /* the Overviews' photograph curtain (phone) */
  /* The property Overviews on a phone (user 2026-10-10, after
     constancehotels.com; every Overview since 2026-10-18): a photograph opens
     under a lifting curtain and drifts against the scroll inside its frame. */
  --vv-parallax-shift: 30px;     /* the most a photograph drifts either way */
  --vv-parallax-scale: 1.12;     /* enough overscan that the drift never shows an edge */
  /* Semantic: stagger — the gap between siblings entering in turn */
  --vv-motion-stagger: calc(80ms * var(--vv-motion-scale));

  --vv-shift-sm: 16px;           /* the reveal's drift (user, 2026-10-10) */

  /* ---------- Type (type system v5) ----------
     docs/design-system/typography.md is the rulebook, and any change here must
     land there in the same commit. Three layers: fundamentals → styles (below)
     → the 14 roles in vv-type.css. */
  --vv-font-serif: 'Gambetta', Georgia, 'Times New Roman', serif;
  --vv-font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vv-weight-regular: 400;
  --vv-weight-medium: 500;
  --vv-weight-semibold: 600; /* only the switcher's current property and bold in an article */

  /* ---------- Type fundamentals (type system v5) ----------
     Eleven sizes, named by value, each with its line height; referenced only
     from this file (lint: primitive). Nothing is set at any other size
     (user, 2026-10-11). */
  --vv-font-size-13: 13px;   --vv-line-height-13: 20px;
  --vv-font-size-14: 14px;   --vv-line-height-14: 22px;   /* text-cta, was 15/25 (user, 2026-11-11) */
  --vv-font-size-15: 15px;   --vv-line-height-15: 25px;   /* body, was 16/26 (user, 2026-10-17) */
  --vv-font-size-18: 18px;   --vv-line-height-18: 28px;   /* standout on a phone (user, 2026-10-17); 25 → 28 (user, 2026-11-11) */
  --vv-font-size-20: 20px;   --vv-line-height-20: 28px;   /* standout, was 18/24 (user, 2026-10-12) */
  --vv-font-size-23: 23px;   --vv-line-height-23: 30px;
  --vv-font-size-28: 28px;   --vv-line-height-28: 37px;
  --vv-font-size-34: 34px;   --vv-line-height-34: 43px;
  --vv-font-size-42: 42px;   --vv-line-height-42: 52px;
  --vv-font-size-45: 45px;   --vv-line-height-45: 56px;
  --vv-font-size-55: 55px;   --vv-line-height-55: 69px;   /* heading-1, was 60/75 (user, 2026-10-17) */

  /* Tracking: the serif headings close up; the sans caps open. */
  --vv-letter-spacing-neg-30: -0.03em;   /* display, heading-1 to 3 */
  --vv-letter-spacing-0: 0em;
  --vv-letter-spacing-60: 0.06em;        /* eyebrow, button */
  --vv-letter-spacing-100: 0.1em;        /* label */

  /* ---------- Type styles (type system v5) ----------
     One set per role: size, leading and tracking, each pointing at a
     fundamental; family, weight and case beside them. vv-type.css reads all
     of it. Stepped px, never clamp(): display and heading-1 to 3 step down at
     Framer's cuts in the two media blocks after :root. */

  /* Serif */
  --vv-text-display: var(--vv-font-size-42);    --vv-leading-display: var(--vv-line-height-42);    --vv-tracking-display: var(--vv-letter-spacing-neg-30);
  --vv-text-heading-1: var(--vv-font-size-55);  --vv-leading-heading-1: var(--vv-line-height-55);  --vv-tracking-heading-1: var(--vv-letter-spacing-neg-30);
  --vv-text-heading-2: var(--vv-font-size-34);  --vv-leading-heading-2: var(--vv-line-height-34);  --vv-tracking-heading-2: var(--vv-letter-spacing-neg-30);
  --vv-text-heading-3: var(--vv-font-size-28);  --vv-leading-heading-3: var(--vv-line-height-28);  --vv-tracking-heading-3: var(--vv-letter-spacing-neg-30);
  --vv-text-heading-4: var(--vv-font-size-23);  --vv-leading-heading-4: var(--vv-line-height-23);  --vv-tracking-heading-4: var(--vv-letter-spacing-0);
  --vv-text-standout: var(--vv-font-size-20);   --vv-leading-standout: var(--vv-line-height-20);   --vv-tracking-standout: var(--vv-letter-spacing-0);
  /* An article's running text: standout, stepped up to 23/30 (20/28 on a phone; user, 2026-10-11). */
  --vv-text-body: var(--vv-font-size-15);       --vv-leading-body: var(--vv-line-height-15);       --vv-tracking-body: var(--vv-letter-spacing-0);
  --vv-text-body-small: var(--vv-font-size-13); --vv-leading-body-small: var(--vv-line-height-13); --vv-tracking-body-small: var(--vv-letter-spacing-0);

  /* Sans */
  --vv-text-eyebrow: var(--vv-font-size-15);    --vv-leading-eyebrow: var(--vv-line-height-15);    --vv-tracking-eyebrow: var(--vv-letter-spacing-60);
  --vv-text-label: var(--vv-font-size-15);      --vv-leading-label: var(--vv-line-height-15);      --vv-tracking-label: var(--vv-letter-spacing-100);
  --vv-text-label-small: var(--vv-font-size-13); --vv-leading-label-small: var(--vv-line-height-13); --vv-tracking-label-small: var(--vv-letter-spacing-100);   /* the ratings' label (user, 2026-11-11) */
  --vv-text-button: var(--vv-font-size-15);     --vv-leading-button: var(--vv-line-height-15);     --vv-tracking-button: var(--vv-letter-spacing-60);
  --vv-text-text-cta: var(--vv-font-size-14);   --vv-leading-text-cta: var(--vv-line-height-14);   --vv-tracking-text-cta: var(--vv-letter-spacing-0);
  --vv-text-body-sans: var(--vv-font-size-15);  --vv-leading-body-sans: var(--vv-line-height-15);  --vv-tracking-body-sans: var(--vv-letter-spacing-0);
  --vv-text-body-small-sans: var(--vv-font-size-15); --vv-leading-body-small-sans: var(--vv-line-height-15); --vv-tracking-body-small-sans: var(--vv-letter-spacing-0);

  /* Family, weight and case per style. */
  --vv-family-display: var(--vv-font-serif);     --vv-weight-display: var(--vv-weight-medium);     --vv-case-display: none;
  --vv-family-heading-1: var(--vv-font-serif);   --vv-weight-heading-1: var(--vv-weight-medium);   --vv-case-heading-1: none;
  --vv-family-heading-2: var(--vv-font-serif);   --vv-weight-heading-2: var(--vv-weight-medium);   --vv-case-heading-2: none;
  --vv-family-heading-3: var(--vv-font-serif);   --vv-weight-heading-3: var(--vv-weight-medium);   --vv-case-heading-3: none;
  --vv-family-heading-4: var(--vv-font-serif);   --vv-weight-heading-4: var(--vv-weight-medium);   --vv-case-heading-4: none;
  --vv-family-standout: var(--vv-font-serif);    --vv-weight-standout: var(--vv-weight-regular);   --vv-case-standout: none;
  --vv-family-body: var(--vv-font-serif);        --vv-weight-body: var(--vv-weight-regular);       --vv-case-body: none;
  --vv-family-body-small: var(--vv-font-serif);  --vv-weight-body-small: var(--vv-weight-regular); --vv-case-body-small: none;
  --vv-family-eyebrow: var(--vv-font-sans);      --vv-weight-eyebrow: var(--vv-weight-medium);     --vv-case-eyebrow: uppercase;
  --vv-family-label: var(--vv-font-sans);        --vv-weight-label: var(--vv-weight-medium);       --vv-case-label: uppercase;
  --vv-family-label-small: var(--vv-font-sans);  --vv-weight-label-small: var(--vv-weight-medium); --vv-case-label-small: uppercase;
  --vv-family-button: var(--vv-font-sans);       --vv-weight-button: var(--vv-weight-medium);      --vv-case-button: uppercase;
  --vv-family-text-cta: var(--vv-font-sans);     --vv-weight-text-cta: var(--vv-weight-medium);    --vv-case-text-cta: none;
  --vv-family-body-sans: var(--vv-font-sans);    --vv-weight-body-sans: var(--vv-weight-regular);  --vv-case-body-sans: none;
  --vv-family-body-small-sans: var(--vv-font-sans); --vv-weight-body-small-sans: var(--vv-weight-regular); --vv-case-body-small-sans: none;
  --vv-weight-current: var(--vv-weight-semibold); /* the switcher's current property */

  --vv-measure: 64ch;
  --vv-measure-head: 44rem;

  /* ---------- CTA (type: the button style above) ---------- */
  --vv-cta-pad-x: 15px;
  --vv-cta-pad-x-lg: 20px;
  --vv-cta-radius: 0;   /* every button is square (user, 2026-10-07) */

  /* ---------- Text link (type: the label role) ---------- */
  --vv-link-underline: 2px;

  /* ---------- Space ---------- */
  /* The rem scale --vv-space-1…10 merged into the gap scale below (#68,
     2026-10-04): every distance comes from --vv-gap-*. */
  /* Band rhythm. Stepped, not fluid: the layout holds
     100px of vertical padding at every width and steps only the gutter. */
  --vv-section-y: 100px;                      /* one section gap everywhere (#46e, user 2026-10-03): 100 desktop, 80 tablet and phone */
  --vv-section-y-compact: var(--vv-section-y);
  --vv-section-y-loose: var(--vv-section-y);
  /* Heading spacing, every heading (h1-h4), every width (user, 2026-10-07):
     heading to its description 10, to its CTA 30, and the whole head block
     (heading, description, CTA) to the content after it 50. A heading with
     neither description nor CTA sits 50 from what follows. */
  --vv-head-text-gap: var(--vv-gap-10);
  --vv-head-action-gap: var(--vv-gap-30);
  --vv-head-content-gap: var(--vv-gap-50);
  --vv-section-head-gap: var(--vv-head-content-gap);   /* the head block to its content (was a single 30/20: user 2026-10-03, 2026-10-06) */
  --vv-section-header-gap: var(--vv-head-content-gap);

  /* One gutter everywhere: 50px on desktop and tablet, 25px on phones
     (user, 2026-09-23). The live site varies between 50/40 and 20/25 band by
     band; this normalises it. */
  --vv-gutter: 50px;

  /* Gap scale (user, 2026-09-23). Every step is a multiple of 5; this is the
     minimum set that covers the site. Components pick a step and never write
     a raw px gap. Named by value, so a new step is additive rather than a
     renumbering of everything already using one.

     A measured value off the scale is a prompt to check the intent, not to
     add a token: the live site is inconsistent in places, and matching its
     inconsistency is not the goal. Components snap to the nearest step
     (#68, user 2026-10-04); a distance larger than 100 is a sum of steps. */
  --vv-gap-5: 5px;
  --vv-gap-10: 10px;
  --vv-gap-15: 15px;
  --vv-gap-20: 20px;
  --vv-gap-25: 25px;
  --vv-gap-30: 30px;
  --vv-gap-40: 40px;
  --vv-gap-50: 50px;
  --vv-gap-100: 100px;
  --vv-grid-gap: var(--vv-gap-50);              /* a content grid's columns and rows, and a stack's items, every width (user, 2026-10-07) */

  /* Card media is a FIXED HEIGHT with the width filling its column
     (user, 2026-09-23), so cards no longer key off an aspect ratio. */
  --vv-card-media-h: 588px;      /* large cards */
  --vv-card-media-h-md: 400px;   /* cards with a title, description and CTA: desktop small cards, phone large ones (user, 2026-10-06) */
  --vv-card-media-h-sm: 268px;   /* small cards */
  --vv-card-media-h-package: 320px;   /* Packages cards, every width (user, 2026-10-14) */
  --vv-show-min-h: 500px;        /* Home Destinations showcase: never shorter than this on a short screen */
  --vv-show-name-w: 44vw;        /* a name's slot in the showcase row (2.25 in view; the showcase is 100vw wide) */
  --vv-split-full-h: 800px;      /* Home Weddings & Events: the full-bleed halves on desktop (user, 2026-10-10) */
  --vv-photo-ratio-wide: 4 / 3;  /* every photograph on a phone (§6); first the Overviews' edge-to-edge ones */
  --vv-photo-max-h-phone: 300px; /* on a phone a photograph is 4:3 of its column, never taller than this (user, 2026-11-11) */

  /* ---------- Layout ----------
     Breakpoint constants (custom properties can't be used inside @media or
     @container): 600px, 900px and 1200px for viewport rules. Sections use
     container queries on .vv-band__inner (container name vv-band). */
  --vv-container: 1300px;       /* fixed (user, 2026-09-23) */
  --vv-container-narrow: 720px;
  --vv-container-wide: 1440px;  /* the Gallery pages' photographs (user, 2026-10-17) */
  /* Text measures: the widths a heading or text column stops at. Named by
     value like the gap scale; components snap to the nearest (#68). */
  --vv-measure-330: 330px;      /* a centred head or intro on a phone */
  --vv-measure-480: 480px;      /* a room hero's stat row on a phone */
  --vv-measure-660: 660px;      /* a lede, an intro, a hero's text */
  --vv-measure-800: 800px;      /* a wide column: articles, card and media sets */
  /* The property header (inc/header.php): one 80px row at every width. */
  --vv-pheader-h: 80px;
  --vv-brand-logo-h: 35px;    /* the inline brand logo on global pages; 30px on a phone so Book now clears it (user, 2026-10-10) */

  /* ---------- Shape & depth ---------- */
  --vv-radius-sm: 4px;
  --vv-radius-md: 8px;
  --vv-radius-lg: 16px;
  --vv-radius-pill: 999px;
  --vv-shadow-1: 0 1px 2px rgb(46 42 32 / 0.06), 0 4px 16px rgb(46 42 32 / 0.06);  /* neutral-900 tint */
  --vv-shadow-2: 0 2px 4px rgb(46 42 32 / 0.06), 0 16px 40px rgb(46 42 32 / 0.12);
  --vv-shadow-dropdown: 0 4px 16px var(--vv-black-8);  /* measured: the property switcher */
  --vv-ratio-portrait: 4 / 5;
  --vv-ratio-landscape: 3 / 2;
  --vv-ratio-standard: 4 / 3;     /* the narrative's photographs (Figma 879:1510) */
  --vv-ratio-wide: 16 / 9;
  --vv-ratio-square: 1 / 1;
  /* For text on images. neutral-900 tint, deepest at the bottom where the text sits. */
  --vv-scrim: linear-gradient(to top, rgb(46 42 32 / 0.78) 0%, rgb(46 42 32 / 0.34) 42%, rgb(46 42 32 / 0) 72%);

  /* ---------- Deprecated legacy names — do NOT use in new code ----------
     NOTE: these are real definitions, not aliases only in name. A new token
     sharing one of these names is silently overridden by it, because this
     block comes later in the file. --vv-text-hero-title bit exactly that way
     (2026-09-23): the hero rendered at 40px instead of 45px. Check this list
     before naming a new token.
     Kept so pre-library templates adopt the new palette and fonts without
     edits. Remove each once nothing references it. */
  --vv-red: var(--vv-cta-nav-bg);                 /* legacy CSS keeps the terracotta it always had */
  --vv-red-dark: var(--vv-cta-nav-bg-hover);
  --vv-blue: var(--vv-color-text-default);
  --vv-text: var(--vv-color-text-default);
  --vv-text-subtle: var(--vv-color-text-default); /* old uses are captions/meta, which must stay AA */
  --vv-bg: var(--vv-color-surface);
  --vv-bg-emphasis: var(--vv-color-background);
  --vv-cream: var(--vv-color-background-highlight);
  --vv-serif: var(--vv-font-serif);
  --vv-sans: var(--vv-font-sans);
  --vv-text-hero-title: var(--vv-font-size-42);   /* v5 sizes (2026-10-11): the nearest step on the scale */
  --vv-text-hub-title: var(--vv-font-size-34);
  --vv-text-detail-h2: var(--vv-font-size-23);
  --vv-text-prose: var(--vv-text-standout);       /* v4's prose style: standout in v5 */
  --vv-leading-prose: var(--vv-leading-standout);
}

/* ---------- Colour · roles (light context) ----------
   Declared on :root and on every light tone. That way a light element
   nested inside a dark band (e.g. a white card on navy) resets back to the
   light roles. */
:root,
.vv-tone-surface,
.vv-tone-background,
.vv-tone-highlight,
.vv-tone-feature,
.vv-tone-card {
  --vv-color-surface: var(--vv-neutral-30);                      /* #F8F7F3 — one ground for every band (user, 2026-10-10) */
  --vv-color-background: var(--vv-neutral-30);                   /* the page ground — the quieter grey band is retired */
  --vv-color-background-highlight: var(--vv-neutral-0);          /* white: cards, panels and the closing contact card — never a band (user, 2026-10-10) */
  --vv-color-background-feature: var(--vv-gold-150);             /* the highlight ground, #E5DDCE: every highlight band, Packages included (user, 2026-10-10) */
  --vv-color-background-row: var(--vv-neutral-120);              /* the Accommodations hubs' room rows, on white */
  --vv-color-background-emphasised: var(--vv-navy-600);
  --vv-color-background-footer: var(--vv-navy-750);
  --vv-color-background-footer-brand: var(--vv-navy-750);         /* one navy for every footer (user, 2026-10-07) */
  --vv-color-footer-rule: var(--vv-white-20);
  --vv-color-footer-text-subtle: var(--vv-white-70);             /* the footer's group labels; its links and icons on hover, press or current page */
  --vv-color-footer-hairline: var(--vv-white-10);                /* the brand footer's one rule */                    /* the property footer's full-width rules */
  /* The hero ground. Same value as heading text — the live site's choice,
     not a mistake. Measured on every photographic hero. */
  --vv-color-background-hero: var(--vv-neutral-700);

  --vv-color-text-default: var(--vv-neutral-800);
  --vv-color-text-emphasised: var(--vv-neutral-900);            /* every heading role (display, heading-1 to 4), type v5 (user, 2026-10-11) */
  --vv-color-text-cta: var(--vv-rust-600);
  --vv-color-text-cta-hover: var(--vv-terracotta-600);
  --vv-color-text-link-inline: var(--vv-rust-600);               /* a link inside running text, e.g. an FAQ answer */
  --vv-color-logo: var(--vv-rust-600);                           /* the brand logo on every page (user, 2026-10-10; 2026-10-17) */
  --vv-color-text-highlight: var(--vv-gold-600);
  --vv-color-text-subtle: var(--vv-neutral-620);                 /* a label by its value on a white card: job facts, "Posted on" (user, 2026-10-18); 5.9:1 on white */
  --vv-color-element-highlight: var(--vv-gold-300);              /* 2.31:1, decorative only (design-principles.md §5) */
  --vv-color-rating-tripadvisor: var(--vv-green-700);             /* decorative: the score line carries the meaning */
  --vv-color-text-on-emphasised: var(--vv-neutral-0);
  --vv-color-text-highlight-on-emphasised: var(--vv-gold-300);
  --vv-color-background-showcase: var(--vv-sage-500);            /* the showcase's right panel: white on it is 4.2:1, large text only (design-principles.md §13 item 9) */
  --vv-color-text-on-image: var(--vv-neutral-0);
  --vv-color-text-on-image-subtle: var(--vv-white-60);
  --vv-color-image-wash: var(--vv-black-20);                     /* 20% black over a photograph under text */
  --vv-color-control-on-image-hover: var(--vv-black-50);         /* a round control over a photograph on hover: 50% fill, 100% stroke (user, 2026-10-10) */
  --vv-color-image-wash-foot: var(--vv-black-60);                /* 60%: the foot of a tile's gradient, under its caption (user, 2026-11-11) */
  --vv-color-image-wash-strong: var(--vv-black-40);              /* 40%: the Home Destinations showcase, text over the photograph's middle */
  --vv-color-pattern-opacity: 1;                                 /* a decorative pattern image (the CTA band's) */
  --vv-color-overlay: var(--vv-black-80);
  --vv-color-overlay-panel: var(--vv-black-60);                  /* behind the booking panel and the menu */
  --vv-color-background-panel: var(--vv-neutral-30);             /* the booking panel */                        /* behind a dialog */
  --vv-color-text-placeholder: var(--vv-neutral-550);            /* measured: the dialogs' placeholders */
  --vv-color-background-photo: var(--vv-neutral-1000);          /* black under a photograph shown at 70% (the homepage slides) */
  --vv-color-image-shade: var(--vv-black-70);                    /* the foot of a clear-to-dark gradient over a photograph */
  --vv-color-control-on-image: var(--vv-black-40);               /* a round control over a photograph: the slides' arrows (40%, more prominent; user, 2026-10-17) */
  --vv-color-line-table: var(--vv-gold-120);                    /* a journal article's table border: the one separator colour */
  --vv-color-line-faint: var(--vv-gold-120);                    /* the property switcher's dividers: the one separator colour */
  --vv-color-text-dim: var(--vv-neutral-620);                    /* the open menu's other pages, the icon-link hover; 5.5:1 (user, 2026-10-18; was neutral-550, 3.5:1) */
  --vv-color-control-filter: var(--vv-filter-alpha);              /* a filter button or select at rest (Job Postings) */
  --vv-color-control-filter-on: var(--vv-neutral-900);           /* the selected filter button */
  --vv-color-control-quiet: var(--vv-neutral-270);               /* the newsletter's Copy to Clipboard (from the user's screenshot) */

  --vv-color-line: var(--vv-gold-120);                           /* every separator and hairline (user, 2026-10-07; #E0D8C8 2026-10-10) */
  --vv-color-line-strong: var(--vv-neutral-550);
  --vv-color-focus: var(--vv-rust-600);
  --vv-color-line-active: var(--vv-color-text-highlight);       /* a form field's active underline (the textarea's border) */
  --vv-color-text-error: var(--vv-rust-600);
  --vv-color-text-success: #0E8047;                              /* no live equivalent; kept for forms, holds 4.5:1 */

  /* Primary on the page: Prime-blue, Prime-Blue-Dark on hover (user, 2026-10-07). */
  --vv-cta-primary-bg: var(--vv-navy-600);
  --vv-cta-primary-bg-hover: var(--vv-navy-900);
  --vv-cta-primary-text: var(--vv-neutral-0);
  --vv-cta-primary-text-hover: var(--vv-neutral-0);
  /* Primary in the top navigation (Book now, Check availability): the brand
     terracotta (user, 2026-10-07). The header maps primary onto these, below. */
  --vv-cta-nav-bg: var(--vv-rust-600);
  --vv-cta-nav-bg-hover: var(--vv-terracotta-600);
  --vv-cta-nav-text: var(--vv-neutral-0);
  --vv-cta-nav-text-hover: var(--vv-neutral-0);
  /* Secondary: an action on the page (opens a form or dialog) — outlined
     gold on white, the page ground under it on hover (Figma 923:72 /
     926:130; white fill: user, 2026-10-07). */
  --vv-cta-secondary-bg: transparent;                            /* no white fill: the page ground shows through (user, 2026-10-10) */
  --vv-cta-secondary-bg-on-image: var(--vv-neutral-0);           /* a secondary button over a photograph: white fill (user, 2026-10-10) */
  --vv-cta-secondary-bg-hover: var(--vv-neutral-30);
  --vv-cta-secondary-text: var(--vv-gold-600);
  --vv-cta-secondary-text-hover: var(--vv-gold-700);
  --vv-cta-secondary-border: var(--vv-gold-600);
  --vv-cta-secondary-border-hover: var(--vv-gold-700);
  /* Light: the live site's band actions ("Discover More", "Discover all
     stays") — a white pill with dark type that turns navy on hover. */
  --vv-cta-light-bg: var(--vv-neutral-0);
  --vv-cta-light-bg-hover: var(--vv-navy-600);
  --vv-cta-light-text: var(--vv-neutral-700);
  --vv-cta-light-text-hover: var(--vv-neutral-0);
  --vv-cta-light-border: var(--vv-neutral-270);
  /* Submit: a form's selected chip, navy. The send button is primary. */
  --vv-cta-submit-bg: var(--vv-navy-600);
  --vv-cta-submit-text: var(--vv-neutral-0);
  /* Dark: the CTA band's "Send an Enquiry" — navy with a white label. */
  --vv-cta-dark-bg: var(--vv-navy-750);
  --vv-cta-dark-bg-hover: var(--vv-navy-900);
  --vv-cta-dark-text: var(--vv-neutral-0);
  --vv-cta-dark-text-hover: var(--vv-neutral-0);                /* 1px hairline, gone on hover */

  /* Rail controls: a black chevron on a white disc, white dots over the
     photograph. Measured off the live carousels. */
  --vv-color-control-bg: var(--vv-neutral-0);
  --vv-color-control-icon: var(--vv-neutral-1000);
  --vv-color-control-dot: var(--vv-neutral-0);
  --vv-color-control-dot-on-light: var(--vv-neutral-620);       /* carousel dots on the band's ground: Six Senses' #666, our nearest grey (user, 2026-11-11) */
  --vv-color-icon-quiet: var(--vv-neutral-550);                  /* the FAQ plus/minus */
}

/* The top navigation's primary button is terracotta, the page's is blue. */
.vv-ph,
.vv-ph__subnav,
.vv-pmenu {
  --vv-cta-primary-bg: var(--vv-cta-nav-bg);
  --vv-cta-primary-bg-hover: var(--vv-cta-nav-bg-hover);
  --vv-cta-primary-text: var(--vv-cta-nav-text);
  --vv-cta-primary-text-hover: var(--vv-cta-nav-text-hover);
}

/* ---------- Tones ----------
   Sections and cards take exactly one tone class. --vv-tone-bg is the surface
   the element paints. The two dark tones re-point text, line, focus and CTA
   roles, so a component placed on either needs no special casing. */
.vv-tone-surface { --vv-tone-bg: var(--vv-color-surface); }
.vv-tone-background { --vv-tone-bg: var(--vv-color-background); }
/* A white card on a band (the Packages cards on the highlight band, user,
   2026-10-10): the light roles above apply again inside it. */
.vv-tone-card { --vv-tone-bg: var(--vv-color-background-highlight); }
/* The highlight ground, #E5DDCE, on every "highlight" and "feature" band
   (user, 2026-10-10; white is only the closing contact card and cards).
   Gold (2.87:1) falls under AA on it, so it
   deepens to 6.13:1; links and CTAs 7.35:1. */
.vv-tone-highlight,
.vv-tone-feature {
  --vv-tone-bg: var(--vv-color-background-feature);
  --vv-color-text-highlight: var(--vv-gold-700);
  --vv-color-text-cta: var(--vv-terracotta-600);
  --vv-color-text-link-inline: var(--vv-terracotta-600);
}

.vv-tone-emphasised {
  --vv-tone-bg: var(--vv-color-background-emphasised);           /* navy */
  --vv-color-text-default: var(--vv-neutral-0);
  --vv-color-text-emphasised: var(--vv-neutral-0);
  --vv-color-text-highlight: var(--vv-gold-300);
  --vv-color-text-cta: var(--vv-neutral-0);
  --vv-color-text-cta-hover: var(--vv-gold-300);
  --vv-color-line: rgb(255 255 255 / 0.28);
  --vv-color-focus: var(--vv-neutral-0);
  /* Dark-band rule: a "primary" button placed here renders as Secondary. */
  --vv-cta-primary-bg: var(--vv-neutral-0);
  --vv-cta-primary-bg-hover: var(--vv-neutral-200);
  --vv-cta-primary-text: var(--vv-rust-600);
  --vv-cta-primary-text-hover: var(--vv-terracotta-600);
}

/* Terracotta band. The live site uses Terr.Red as a full-bleed ground as well
   as a button colour, so it needs a tone of its own. */
.vv-tone-accent {
  --vv-tone-bg: var(--vv-rust-600);
  --vv-color-text-default: var(--vv-neutral-0);
  --vv-color-text-emphasised: var(--vv-neutral-0);
  --vv-color-text-highlight: var(--vv-gold-300);
  --vv-color-text-cta: var(--vv-neutral-0);
  --vv-color-text-cta-hover: var(--vv-gold-300);
  --vv-color-line: rgb(255 255 255 / 0.28);
  --vv-color-focus: var(--vv-neutral-0);
  --vv-cta-primary-bg: var(--vv-neutral-0);
  --vv-cta-primary-bg-hover: var(--vv-neutral-200);
  --vv-cta-primary-text: var(--vv-rust-600);
  --vv-cta-primary-text-hover: var(--vv-terracotta-600);
}

/* The site is light only (user, 2026-10-08): no dark scheme. Native controls
   stay light, and browsers that force-darken pages (Chrome's Auto Dark,
   Samsung Internet) opt out. functions.php sends the matching meta. */
:root {
  color-scheme: light only;
}

/* ---------- Font rendering ----------
   Two rules that nothing on disk previously recorded, and without which every
   text pixel differs from the live site:

   1. The live CSS sets antialiased smoothing. Without it macOS Chrome renders
      the same type visibly heavier.
   2. Its Gambetta runs with five OpenType features on, which change glyph
      shapes — not just spacing. Both pages ship the same set.

   Verified against the live DOM, 2026-09-21. */
:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vv-font-serif,
[class*="vv-t-"],
[class*="vv-role-"] {
  font-feature-settings: "blwf" 1, "cv03" 1, "cv04" 1, "cv09" 1, "cv11" 1;
}

/* ---------- Breakpoints ----------
   Framer's own cuts: <=809.98 / 810-1200.98 / 1201-2559.98 / >=2560. Replica
   components respond on the VIEWPORT at these widths, not on container
   queries — the live layout switches on viewport width, and a container query
   only coincides with that when the band has no padding. This is a deliberate
   departure from the parked section library (docs/components.md). */

/* Tablet */
@media (max-width: 1200.98px) and (min-width: 810px) {
  :root {
    --vv-text-display: var(--vv-font-size-34);    --vv-leading-display: var(--vv-line-height-34);
    --vv-text-heading-1: var(--vv-font-size-45);  --vv-leading-heading-1: var(--vv-line-height-45);
    --vv-text-heading-2: var(--vv-font-size-28);  --vv-leading-heading-2: var(--vv-line-height-28);
    --vv-text-heading-3: var(--vv-font-size-23);  --vv-leading-heading-3: var(--vv-line-height-23);
    --vv-section-y: 80px;
  }
}

/* Mobile */
@media (max-width: 809.98px) {
  :root {
    --vv-text-display: var(--vv-font-size-28);    --vv-leading-display: var(--vv-line-height-28);
    --vv-text-heading-1: var(--vv-font-size-34);  --vv-leading-heading-1: var(--vv-line-height-34);  /* back to 34/43 from 31/39 (user, 2026-11-11) */
    --vv-text-heading-2: var(--vv-font-size-28);  --vv-leading-heading-2: var(--vv-line-height-28);  /* a step above heading-3 on a phone (user, 2026-10-12) */
    --vv-text-heading-3: var(--vv-font-size-23);  --vv-leading-heading-3: var(--vv-line-height-23);
    --vv-text-standout: var(--vv-font-size-18);   --vv-leading-standout: var(--vv-line-height-18);   /* was 20/28 (user, 2026-10-17); 18/28 since 2026-11-11 */
    --vv-section-y: 80px;
    --vv-gutter: 25px;
    --vv-brand-logo-h: 30px;
  }
}

/* ---------- Reduced motion ----------
   Everything that moves reads these tokens, so this one block covers every
   section. html.vv-reduced-motion is the Component Lab's simulate toggle. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vv-motion-scale: 0.001;
    --vv-shift-sm: 0px;
    --vv-parallax-shift: 0px;
  }
}
:root.vv-reduced-motion {
  --vv-motion-scale: 0.001;
  --vv-shift-sm: 0px;
  --vv-parallax-shift: 0px;
}

/* ==========================================================================
   Page shell (docs/design-system/shell.md). The header is fixed, so the page
   clears it with ONE token: --vv-shell-top = the primary bar plus the
   secondary nav when this page shows one. The body class comes from
   vv_shell_body_class() (functions.php): vv-shell--property | vv-shell--brand,
   and vv-shell--subnav when the page has a secondary nav. Every page shell
   part (hero, first band) reads --vv-shell-top; none sets its own clearance.
   Property bar 80 at every width, its sub-nav 40 on desktop only. Brand bar 80
   on desktop, 70 below; its sub-nav 40 on desktop and tablet, none on a
   phone (10 above and below the links, user 2026-10-04).
   ========================================================================== */
:root {
  --vv-shell-bar-h: 80px;
  --vv-shell-subnav-h: 0px;
  /* The hero photograph: 70vh on desktop, 65vh below, never under 360. */
  --vv-hero-h: max(360px, 70vh);
  /* The stacked hero: 80% of the viewport (user, 2026-10-11); 60vw on a
     phone, since most hero photographs are landscape (user, 2026-10-13). */
  --vv-hero-stacked-h: 80vh;
}

/* Page header: the stacked hero — the photograph, then the
   eyebrow / title / intro / button under it. ONE set of tokens for every
   property and every page with this layout; change a value here and all of
   them move. Sides step at Framer's cuts (≥1201 / 810–1200.98 / ≤809.98). */
:root {
  --vv-header-media-h: var(--vv-hero-stacked-h);  /* the photograph */
  --vv-header-inset: 100px;                       /* text, from the sides */
  --vv-header-pad-y: var(--vv-gap-40);            /* above and below the text block */
  /* The text block keeps the band head's rhythm, 10 / 30 / 50 (Figma 980:397,
     user 2026-10-11). */
  --vv-header-gap: var(--vv-gap-20);              /* eyebrow ↔ title */
  --vv-header-text-gap: var(--vv-head-text-gap);  /* title ↔ line (10) */
  --vv-header-action-gap: var(--vv-head-action-gap); /* line ↔ button (30) */
  --vv-header-group-gap: var(--vv-head-action-gap);  /* button ↔ contact row (30) */
  --vv-header-ratings-gap: var(--vv-head-content-gap); /* contact row ↔ ratings (50) */
  --vv-header-next-pad-top: 0px;                  /* the band that follows */
}
@media (min-width: 1201px) {
  :root { --vv-header-pad-y: var(--vv-gap-100); }  /* desktop: 100 above and below the whole hero text */
}
@media (max-width: 809.98px) {
  :root { --vv-header-inset: var(--vv-gutter); }  /* the phone gutter, as every band (user, 2026-11-11; was 30) */
}
/* On body, not :root, so it resolves after the body class has set the parts. */
body { --vv-shell-top: calc(var(--vv-shell-bar-h) + var(--vv-shell-subnav-h)); }
body.vv-shell--subnav { --vv-shell-subnav-h: 40px; }
@media (max-width: 1200.98px) {
  :root { --vv-hero-h: max(360px, 65vh); }
  body.vv-shell--property.vv-shell--subnav { --vv-shell-subnav-h: 0px; }
  body.vv-shell--brand { --vv-shell-bar-h: 70px; }
}
@media (max-width: 809.98px) {
  :root { --vv-hero-stacked-h: 60vw; }
  body.vv-shell--brand.vv-shell--subnav { --vv-shell-subnav-h: 0px; }
}