/* ==========================================================================
   Good Times in Cape Town — design tokens ("Good Times, Naturally")
   Colours come from the approved logo pack (Approved Logo Pack v2): the logo's
   black lettering and green (#059A35), its reversed greens (#45E375, #6FED8F)
   and the ocean navy of its reversed footer (#102E42), and from the leaf-green
   action palette of design/button-design.md. Every colour and font used by the
   site is a token here; styles.css, buttons.css and the page sheets only
   reference them. (Some token names are the template's own, kept as aliases so
   nothing that reads them breaks; their values are Good Times'.)
   ========================================================================== */
:root {
  /* Leaf green: the action palette (design/button-design.md). Contrast, measured: white on --green-primary 5.2:1,
     on --green-hover 7.0:1, on --green-deep 8.2:1; --green-deep on --green-leaf-light 7.0:1; --green-primary on
     white 5.2:1 and on --green-soft-background 4.8:1. --green-lime-accent is decoration only (a leaf, a highlight
     behind ink), never a ground for white words. */
  --green-primary: #147d43;
  --green-deep: #105b35;
  --green-hover: #106638;
  --green-leaf-light: #dff3de;
  --green-soft-background: #eff8f0;
  --green-lime-accent: #c9e970;
  --ink-primary: #10241d;
  --surface-white: #ffffff;
  --green-leaf-line: #b5dbb3; /* the Soft Leaf button's border, and fine rules on pale-leaf surfaces */
  --green-leaf-hover: #d3ecd1; /* the Soft Leaf button under the pointer */
  /* Warm sand: the neutral beside the greens and the ocean, so the page is never green on green */
  --surface-sand: #f7f2ea;
  --surface-sand-deep: #ece3d4;

  /* Colour: ocean navy grounds, leaf-green actions, white, sand and soft sea-glass surfaces, near-black ink */
  --forest: #102e42; /* the logo's ocean navy; white on it: 14:1 */
  --forest-deep: #0b2233; /* bands, footer, preview bar */
  --forest-soft: var(--green-leaf-light); /* selected-state tint on white */
  --gold: var(--green-primary); /* links, accents and focus on light grounds (the template's name) */
  --gold-hover: var(--green-hover);
  --gold-soft: #45e375; /* the reversed logo's green: icons and rules on navy, 8.4:1 */
  --gold-tint: var(--green-soft-background); /* soft green wash behind accents */
  --star: #e2a92b; /* decorative rating stars */
  --ink: var(--ink-primary); /* headings: a green-black beside the logo's near-black */
  --text: #283037; /* body: 13:1 on white */
  --muted: #5b6670; /* secondary text: 5.9:1 on white */
  --line: #e1e7ea;
  --line-strong: #c8d1d6;
  --ivory: #e2eae8;
  --ivory-soft: #f3f7f5;
  --mist: #eaeff0;
  --paper: #f7faf9;
  --white: #ffffff;
  --danger: #b3261e;
  --danger-tint: #fdf0ef;
  --danger-ink: #6f1a14;
  --success: #1e6b3c;
  --success-tint: #eef7f1;
  --on-dark: rgba(255, 255, 255, 0.86);
  --on-dark-muted: rgba(255, 255, 255, 0.7);
  /* Over the hero photograph and on navy: white words, the logo's light green for rules and accents */
  --champagne: #6fed8f; /* rule, borders and hover tone over the hero */
  --logo-green-on-dark: #45e375; /* the reversed logo's own green (Approved Logo Pack v2): the statement on dark grounds */
  --hero-ivory: #ffffff; /* navigation titles, headline and lead over the photograph */
  --champagne-deep: #2fbe60; /* medallion and button edges */
  --champagne-ink: #062314; /* text on light-green surfaces */
  --gold-warm: #45e375; /* guest experiences accents: eyebrow, rule, icon rims */

  /* Type (design/font-design.md). Bricolage Grotesque speaks: headlines, tour names, big numbers, selected buttons.
     DM Sans explains: paragraphs, navigation, tour facts, booking details, forms, reviews. Caveat scribbles the odd
     short note in the margin: never a paragraph, a price, a form control or anything a visitor must not miss.
     The logo is artwork (src/assets/brand/) and is never set in any of them. */
  --font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Caveat', 'Caveat Fallback', 'Segoe Print', 'Bradley Hand', cursive;
  /* The scale. The brief's starting values, checked on the preview at 360, 390, 768, 1024 and 1440 px; components
     take the step that suits them (a card title is an h4, not a chapter title) */
  --text-hero: clamp(3.25rem, 7vw, 7rem); /* the largest statements over photographs */
  --text-h1: clamp(2.75rem, 5vw, 5.25rem); /* page titles and the home page's scene statements */
  --text-h2: clamp(2.1rem, 3.8vw, 4rem); /* section and chapter titles */
  --text-h3: clamp(1.4rem, 2.2vw, 2.15rem); /* sub-sections, feature titles */
  --text-h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); /* card, step and list titles */
  --text-lead: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --text-body: clamp(1rem, 1.05vw, 1.125rem);
  --text-small: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.8125rem;
  --text-accent: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); /* Caveat runs small: about 1.4× the words beside it */
  --leading-display: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.08em;
  --weight-display: 700;
  --weight-display-strong: 800;

  /* Space (4 pt scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --section: clamp(3.5rem, 2rem + 5vw, 7rem);

  /* Layout */
  --container: 82.5rem;
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 0.25rem + 3.5vw, 4rem);
  --header-h: 64px;
  --hero-edge: max(var(--gutter), 6vw); /* the home hero's side padding; the overlay header shares it */
  --radius-s: 6px;
  --radius: 12px;
  --radius-l: 16px;

  /* Elevation (navy tinted, soft) */
  --shadow-s: 0 1px 2px rgb(11 34 51 / 0.06), 0 2px 8px rgb(11 34 51 / 0.04);
  --shadow: 0 1px 2px rgb(11 34 51 / 0.06), 0 8px 24px rgb(11 34 51 / 0.06);
  --shadow-l: 0 2px 6px rgb(11 34 51 / 0.08), 0 20px 48px rgb(11 34 51 / 0.14);

  /* Glass: the header once the page scrolls (the white-to-glass morph of 8 Nov 2026, docs/enhancement/01-header.md).
     White glass over whatever passes beneath it, with a hairline and a soft green-black shadow; where blur is missing,
     or would cost too much, the near-opaque fallback. Ink on the glass stays above 9:1 over the darkest page band. */
  --gt-glass-surface: rgb(255 255 255 / 0.8);
  --gt-glass-fallback: rgb(255 255 255 / 0.97);
  --gt-glass-filter: blur(18px) saturate(125%) brightness(1.06);
  --gt-glass-line: rgb(16 36 29 / 0.09);
  --gt-glass-shadow: 0 1px 2px rgb(6 35 20 / 0.05), 0 10px 28px -16px rgb(6 35 20 / 0.32);

  /* Scenic backdrops (scenic.css; the registry and placements: src/data/scenic.mjs). Each placement sets its own
     presence and focal points; these are the defaults. --gt-scene-paper is the wash's colour: the ground of the band
     it sits on, so the photograph dissolves into the section rather than into grey. */
  --gt-scene-opacity: 0.1;
  --gt-scene-focal-desktop: 50% 50%;
  --gt-scene-focal-mobile: 50% 50%;
  --gt-scene-fade: 16%;
  --gt-scene-paper: rgb(255 255 255 / 0.9);
  --gt-scene-wash: none;
  --gt-scene-mask: none;
  --gt-scenic-card: rgb(255 255 255 / 0.6); /* glass over a scenic band: visibly translucent (the owner's request of 8 Nov 2026) */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 400ms;
  --dur-glass: 280ms;

  /* Layers */
  --z-bar: 40;
  --z-drawer: 45;
  --z-sticky: 50;
  --z-dialog: 100;
  --z-skip: 200;
}
@media (min-width: 64em) {
  :root {
    --header-h: 96px; /* the logo and the company statement under it (84 px before the statement, 6 Nov 2026) */
  }
}
@media (min-width: 112.5em) {
  :root {
    --container: 90rem;
  }
}