/* ==========================================================================
   JAP Shuttles & Tours — design tokens ("design love" board, 16 Oct 2026)
   Colours are sampled from the owner's reference board
   (docs/design/love-board/panels.json). Every colour and font used by the
   site is a token here; styles.css and enquiry.css only reference them.
   ========================================================================== */
:root {
  /* Colour: forest green, flat antique gold, warm ivory, near-black navy */
  --forest: #103426; /* white on it: 13.6:1 */
  --forest-deep: #01211f; /* bands, footer, preview bar */
  --forest-soft: #e8efea; /* selected-state tint on white */
  --gold: #836516; /* primary buttons; white on it: 5.5:1 */
  --gold-hover: #6e5512;
  --gold-soft: #c9a45a; /* outline icons and rules on forest: 7.2:1 */
  --gold-tint: #f6f0e3; /* warm wash behind gold accents */
  --star: #e2a92b; /* decorative rating stars */
  --ink: #011227; /* headings */
  --text: #2b333b; /* body: 12.8:1 on white */
  --muted: #5e6670; /* secondary text: 5.9:1 on white, 5.5:1 on paper */
  --line: #e1e5e8;
  --line-strong: #c9d0d5;
  --ivory: #e3ded2;
  --ivory-soft: #f6f3ec;
  --mist: #ebedee;
  --paper: #f8fafa;
  --white: #ffffff;
  --danger: #b3261e;
  --danger-tint: #fdf0ef;
  --danger-ink: #6f1a14;
  --success: #1e6b3c;
  --success-tint: #eef7f1;
  --on-dark: rgba(255, 255, 255, 0.84);
  --on-dark-muted: rgba(255, 255, 255, 0.66);
  /* Champagne gold: the approved home hero and the header's Book Now (D49) */
  --champagne: #f5dba3; /* headline, rule, borders and hover tone over the film */
  --hero-ivory: #f8f4ec; /* navigation titles and the lead over the film */
  --champagne-deep: #cdb06a; /* coin and button edges */
  --champagne-ink: #2a1f10; /* text on champagne surfaces: 11.6:1 on #e0c47f */
  --gold-warm: #d5a657; /* guest experiences accents: eyebrow, rule, icon rims (D53) */

  /* Type */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; /* header navigation and the home hero (D49) */
  --text-hero: clamp(2.6rem, 1.6rem + 4.2vw, 5.25rem);
  --text-h1: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  --text-h2: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
  --text-h3: clamp(1.2rem, 1.1rem + 0.35vw, 1.375rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-small: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.75rem;

  /* 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 (blue-black tinted, soft) */
  --shadow-s: 0 1px 2px rgb(1 18 39 / 0.06), 0 2px 8px rgb(1 18 39 / 0.04);
  --shadow: 0 1px 2px rgb(1 18 39 / 0.06), 0 8px 24px rgb(1 18 39 / 0.06);
  --shadow-l: 0 2px 6px rgb(1 18 39 / 0.08), 0 20px 48px rgb(1 18 39 / 0.14);

  /* 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;

  /* Layers */
  --z-bar: 40;
  --z-drawer: 45;
  --z-sticky: 50;
  --z-dialog: 100;
  --z-skip: 200;
}
@media (min-width: 64em) {
  :root {
    --header-h: 84px;
  }
}
@media (min-width: 112.5em) {
  :root {
    --container: 90rem;
  }
}