/* =========================================================
   DAN TOURS — Design Tokens
   OFFICIAL COMPANY PALETTE — sampled from the Elementor global
   colour kit on the previous site (dmtours.net). These are the
   client's real brand values; do not "improve" them.

     Bronze  #9A8352  (kit: custom)     — primary brand colour
     Sand    #EADABD  (kit: accent)     — dominant background
     Sage    #657B65  (kit: primary)    — nature accent
     Ink     #3C3C3C  (kit: text)       — body copy
     Bronze-deep  #8A7446 · Gold-light #D5B779 · Sage-light #A4B9A4

   Warm White #F8F6F2 is OUR addition — the old site used plain
   #FFFFFF, which is a WordPress default rather than a brand
   decision. Warm white sits better against the sand.
   ========================================================= */
:root {
  /* ---- Palette ---- */
  --warm:         #F8F6F2;   /* primary background (our warm white) */
  --charcoal:     #1D1D1D;   /* dark surfaces: footer, dark panels */
  --ink:          #3C3C3C;   /* BRAND body-copy colour */
  --gold:         #9A8352;   /* BRAND bronze — CTAs, headings, nav bar */
  --gold-deep:    #8A7446;   /* BRAND — hover/pressed step under bronze */
  --gold-light:   #D5B779;   /* BRAND — hairlines, borders, focus rings */
  --sand:         #EADABD;   /* BRAND — warm beige bands */
  --safari:       #657B65;   /* BRAND sage — nature accent */
  --sage-light:   #A4B9A4;   /* BRAND — soft tints, badges */
  --sage-deep:    #546854;   /* sage hover step */
  --muted:        #6E675C;   /* secondary text */
  --white:        #FFFFFF;   /* cards */
  --overlay-mid:  rgba(20, 16, 10, 0.35);
  --overlay-dark: rgba(20, 16, 10, 0.55);

  /* ---- PAGE SURFACE ----
     The DEFAULT section background. Every page/section reads from this;
     the sand and charcoal bands are assigned deliberately in theme.css
     (see "SECTION RHYTHM") rather than being the baseline.

     Warm white, not sand, on purpose: the homepage runs 15 sections over
     ~5,900px, and a saturated warm tone held across all of them reads as
     heavy. A near-neutral can repeat indefinitely without fatigue, which
     is what lets sand register as an accent when it does appear.

     Kept separate from --warm because --warm is ALSO the light text
     colour over photos, so it can't simply be redefined. */
  --page:         var(--warm);

  /* ---- RGB channels ----
     For rgba() tints that need an alpha. Use as:
       color: rgb(var(--ink-rgb) / 0.72)
     so the palette never drifts out of sync again. */
  --gold-rgb:     154 131 82;
  --ink-rgb:      60 60 60;
  --charcoal-rgb: 29 29 29;
  --warm-rgb:     248 246 242;
  --sand-rgb:     234 218 189;
  --safari-rgb:   101 123 101;

  /* ---- Legacy aliases (older section CSS still references these).
         Light-first: former dark surfaces are warm, former light text
         is ink. Photo-overlay contexts are re-fixed in main.css. */
  --black:        var(--warm);
  --off-white:    var(--ink);
  --terracotta:   var(--safari);
  --savanna:      var(--safari);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;
  /* Eyebrow / small-caps labels — Marcellus adds a classical Roman-caps accent
     that pairs with the Cormorant display type. Single weight (400). */
  --font-label:   'Marcellus', Georgia, serif;

  /* ---- Sizing ----
     Tightened for a less "zoomed in" feel on laptop screens (1280–1440px),
     where the old clamp() max-ends were already maxed out: 140px between
     every section, 1360px content column. */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 64px);
  --section-pad:   clamp(52px, 6.4vw, 88px);

  /* ---- Easing (Grafton-style long ease-outs) ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-title: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Transitions ---- */
  --t-fast:   0.2s ease;
  --t-base:   0.3s ease;
  --t-slow:   0.6s ease;
  --t-smooth: 0.8s var(--ease-out);
  --t-title:  1.1s var(--ease-title);

  /* ---- Nav ----
     --nav-height is the FULL vertical footprint the fixed nav occupies:
     the .navbar top inset (clamp max 16px) + the pill itself (~102px).
     It was 108px, sized for the old full-width band which filled exactly
     that height. The floating pill is taller than its old container, so
     108px positioned page content 1px UNDER the pill's bottom edge — the
     hero was tucked beneath the nav rather than sitting below it.

     --nav-gap is the visible breathing room between the pill and whatever
     comes next. Keep these two separate: --nav-height must track the nav's
     real size, --nav-gap is the design choice. */
  --nav-height: 120px;
  --nav-gap:    clamp(16px, 2.4vh, 30px);

  /* ---- Global UI scale ----
     Master "zoom" dial for the whole site. 1 = as-designed. Lower = more
     compact (like zooming the browser out, but baked in and reflowing
     properly). This uniformly shrinks spacing, images, hero, cards AND text
     together, so proportions stay correct. Tune this ONE number to taste.
     Applied via `zoom` on <html> in main.css. */
  --ui-scale: 0.72;

  /* ---- Text scale ----
     Independent dial for TEXT ONLY (relative to the layout). 1 = as-designed.
     Higher = larger type without changing spacing, images, hero or card sizes.
     Lets you rebalance the text-to-layout ratio separately from --ui-scale.
     Applied to the root + body font-size in main.css; because the whole site's
     type is rem-based, this cleanly scales every text size at once. */
  --text-scale: 1.4;
}