/* ==========================================================================
   tokens.css — Hunter Huon Valley
   Design tokens ONLY. Every colour, space, size, radius, duration and
   breakpoint used anywhere on the site is defined here as a custom property.
   Seventeen more pages inherit this file. Nothing is hard-coded elsewhere.
   ========================================================================== */

:root {

  /* --- Colour -------------------------------------------------------------
     Warm, earthy, minimal. REVISION 4 (dark-dominant, corrected): the client
     asked for a darker background using Forest in Olive's place. So the page
     is Forest-dominant with off-white text on top (her "warm earthy tones with
     off-white text"). Roughly 60% Forest, 20% light linen relief bands,
     15% photographic, 5% Earth. This restores the Revision 2 dark-dominant
     structure and only substitutes Forest for Olive.
     Olive is RETIRED: it stays defined below but has zero references in any
     stylesheet. Copper is demoted to hovers, underlines and star icons only. */

  --c-base:       #F7F4EE; /* warm off-white, the ink + crisp cream cards        */
  --c-linen:      #ECE4D3; /* warm oat/linen, THE light section bands (as live) */
  --c-sandstone:  #D8D2C4; /* warm sandstone, secondary text + review highlight  */
  --c-sandstone-band: #D2CBBA; /* RETIRED. Rev 4's deeper band tone; the light   
                                  bands went back to linen. Zero references.     */
  --c-sage:       #A2A68D; /* background tint only, keep rare (5:1 on Forest)     */
  --c-olive:      #5E6347; /* RETIRED (Rev 4). Kept defined, zero references.     */
  --c-forest:     #2E3628; /* THE dominant page colour + dark bands + ink-on-light*/
  --c-forest-deep:#1B2018; /* pressed/hover state of a Forest fill. Added for the
                              Lodgify booking box, whose Book Now button needs a
                              darker shade of its own fill and cannot do the
                              site's tonal-shift-to-Sandstone hover.            */
  --c-earth:      #4A3322; /* accent only now: light-band button hover. No longer
                              the footer or the contact hero (2026-08-25).      */
  --c-oak:        #7A573A; /* texture, dividers only                             */
  --c-copper:     #B86F4A; /* accent only: hovers, underlines, small accents     */
  --c-gold:       #C6952E; /* warm harvest gold, review stars fill               */
  --c-gold-deep:  #9A6F1E; /* deeper gold, star edge, definition on light        */

  /* --- Semantic colour roles ----------------------------------------------
     REVISION 4 (dark-dominant): --color-page-bg resolves to Forest and
     --color-text to off-white. Every property name is preserved so nothing
     downstream breaks; only what they point at has changed. Contrast on
     Forest #2E3628: off-white 11.4:1, Sandstone 8.3:1 (softened to ~80% here),
     Copper 3.3:1 (never behind small text, hovers/underlines only).          */

  --color-page-bg:            var(--c-forest);    /* Forest, the dominant page */
  --color-band-alt:           var(--c-sandstone); /* legacy light band, tints  */
  --color-band-dark:          var(--c-forest);    /* dark bands (menu, bars)   */
  --color-text:               var(--c-base);      /* off-white on Forest, 11.4:1*/
  --color-text-secondary:     rgba(216, 210, 196, 0.8); /* Sandstone @ ~80%    */
  --color-text-on-dark:       var(--c-base);      /* off-white on Forest/photo */
  --color-text-on-dark-alt:   var(--c-sandstone); /* softer text on Forest     */
  --color-accent:             var(--c-copper);
  --color-accent-text:        var(--c-base);      /* off-white on Copper (rare)*/
  --color-divider:            var(--c-oak);
  --color-focus:              var(--c-copper);
  --color-star:               var(--c-gold);      /* review star fill          */
  --color-star-edge:          var(--c-gold-deep); /* review star hairline edge */

  /* Band + on-light roles (Revision 4) */
  --color-band-deep:          var(--c-forest);    /* Forest dark bands         */
  --color-band-light:         var(--c-linen);     /* warm oat light sections   */
  --color-band-light-alt:     var(--c-sandstone); /* the second light tone     */
  --color-text-on-light:      var(--c-forest);    /* Forest text on Sandstone  */
  --color-text-on-light-2:    rgba(46, 54, 40, 0.85); /* muted Forest secondary*/

  /* Review highlight (marker-pen effect): Sandstone behind Forest text */
  --color-highlight-bg:       var(--c-sandstone);
  --color-highlight-text:     var(--c-forest);

  /* Scrim used over hero / full-bleed imagery — kept a gradient, not a wash.
     Heavier at the base so off-white type pops. */
  --scrim-hero:   linear-gradient(to top, rgba(46, 54, 40, 0.88) 0%, rgba(46, 54, 40, 0.52) 45%, rgba(46, 54, 40, 0.22) 100%);
  --scrim-band:   linear-gradient(to bottom, rgba(46, 54, 40, 0.55), rgba(46, 54, 40, 0.55));
  /* Soft top-down gradient behind the transparent header over photography */
  --scrim-header: linear-gradient(to bottom, rgba(46, 54, 40, 0.55), transparent);

  /* Translucent light used on top of Forest/Olive bands (base tint) */
  --overlay-on-dark: rgba(247, 244, 238, 0.08); /* --c-base @ 8%  */
  --border-on-dark:  rgba(247, 244, 238, 0.15); /* --c-base @ 15% */
  /* Soft hairline on light bands — a low-opacity Forest, so dividers read as a
     whisper rather than the old heavy Copper lines. */
  --border-on-light: rgba(46, 54, 40, 0.14);    /* --c-forest @ 14% */
  --ring-on-light:   rgba(46, 54, 40, 0.08);    /* --c-forest @ 8% — card inset */

  /* --- Typography ---------------------------------------------------------- */

  /* Type family (Rev 5) — locked 25 Aug 2026. Self-hosted, see fonts.css.
     ONE family sitewide: Montserrat, for headings, body, nav, buttons and
     labels alike. This supersedes the Rev 3 Fraunces (display) + Inter Tight
     (body) pairing, which is fully removed from the repo. Deliberately a
     single custom property so a second family can't drift back in. */
  --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;

  /* 300 is reserved for pull-quotes and large stat numbers, where size covers
     for the weight; body stays 400 so off-white on Forest doesn't vibrate. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Rev 5 (§3 weight-contrast check): max stepped 5.5rem -> 5rem. Montserrat
     Bold 700 at 88px read heavier than the header wordmark it sits under; the
     weight is the point of matching the mark, so the size gave way, not the
     weight. Rate (7vw) unchanged. Reverse: restore 5.5rem.
     Floor also stepped 3rem -> 2.25rem: Montserrat is materially wider than
     Inter Tight, and at 48px "accommodation" (the longest word in the hero H1)
     overflowed its 335px column at 375px by ~65px. 40px measured as an exact
     335px fit, i.e. zero headroom, and still clipped under a different
     rasteriser; 36px leaves a real margin. Reverse: restore 3rem, but re-check
     the hero at 375px and 320px if you do. */
  --fs-h1:      clamp(2.25rem, 7vw, 5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body:    clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --fs-eyebrow: 0.6875rem;
  --fs-small:   0.875rem;
  --fs-stat:    clamp(2.5rem, 5vw, 3.75rem);

  --lh-h1:      1.08;
  --lh-h2:      1.15;
  --lh-h3:      1.3;
  --lh-body:    1.7;
  --lh-small:   1.6;

  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  /* 0.12em, not the Inter-era 0.15em — Montserrat's caps are wider and
     0.15em reads over-spaced at SemiBold 600. */
  --ls-eyebrow: 0.12em;
  --ls-label:   0.12em;

  --measure:    65ch; /* max line length for body copy */

  /* --- Spacing scale ------------------------------------------------------- */

  --space-3xs:  0.25rem;
  --space-2xs:  0.5rem;
  --space-xs:   0.75rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;

  /* Section vertical padding — generous is the point */
  --section-py:        140px;
  --section-py-mobile: 80px;

  /* --- Layout -------------------------------------------------------------- */

  --content-max:  1200px;
  --gutter:       clamp(1.25rem, 5vw, 3rem);
  --header-h:     72px;

  /* --- Radius (never above 4px) ------------------------------------------- */

  --radius-sm: 2px;
  --radius:    4px;

  /* --- Borders / dividers -------------------------------------------------- */

  --divider-w: 1px;

  /* --- Motion -------------------------------------------------------------- */

  --dur-fast:    300ms;
  --dur-mid:     600ms;
  --dur-reveal:  700ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease:        ease-out;

  --reveal-shift: 20px;

  /* --- Elevation (no drop shadows on cards; used only for sticky header
         hairline separation via border, kept as token for consistency) ---- */
  --z-header:  1000;
  --z-mobile-menu: 1100;
  --z-bottom-bar: 900;

  /* --- Breakpoints (reference values; media queries can't read vars, but
         these document the canonical breakpoints for the whole site) ------ */
  --bp-lg: 1200px;
  --bp-md: 900px;
  --bp-sm: 640px;
}

/* Very narrow phones (older SE-class, 320px): even the 2.5rem H1 floor leaves
   "accommodation" wider than its column in Montserrat, which is materially
   wider than the Inter Tight it replaced. Stepped to 2rem below 360px only, so
   the common 375px case keeps the larger 40px setting. Reverse: delete this. */
@media (max-width: 359px) {
  :root { --fs-h1: 2rem; }
}