/* ============================================================
   JAUNT — DESIGN TOKENS
   ------------------------------------------------------------
   Single source of truth for the new site. Extends the existing
   webflow-custom-code/jaunt-tokens.css — every token name in
   common use is preserved with the same value, so legacy pages
   continue to render unchanged. Additions: cream studio surface,
   richer type scale, motion + radius tokens, layout containers.
   ============================================================ */

:root {
  /* ---------- PALETTE ---------- */
  --bg:               #f8f7f4;   /* default page */
  --bg-cream:         #f2ede4;   /* matches studio backdrop — vehicle pages */
  --bg-cream-soft:    #f7f3ec;
  --bg-warm:          #f2f0eb;
  --bg-card:          #ffffff;
  --bg-dark:          #1a1f1c;   /* nav, hero overlays, CTA bands */
  --bg-deep:          #0f1612;   /* deeper than dark, behind hero video */

  --border:           #e2ddd6;
  --border-light:     #eeebe5;
  --hairline:         rgba(28, 30, 27, 0.10);
  --hairline-light:   rgba(28, 30, 27, 0.06);

  --text:             #1c1e1b;
  --text-mid:         #52564f;
  --text-dim:         #8a8d87;
  --text-light:       rgba(255, 255, 255, 0.85);
  --text-on-dark:     rgba(255, 255, 255, 0.92);
  --text-on-dark-mid: rgba(255, 255, 255, 0.62);
  --text-on-dark-dim: rgba(255, 255, 255, 0.38);

  /* Brand accent — green (canonical) */
  --accent:           #4a6d5c;
  --accent-deep:      #2d4a3a;
  --accent-light:     #e5ede8;
  --accent-glow:      #6b9b80;

  /* Support */
  --amber:            #a8742a;
  --amber-light:      #faf3e8;
  --red:              #8b4040;
  --red-light:        #f5eaea;
  --blue:             #3a5f8a;
  --blue-light:       #eaf0f6;

  /* ---------- TYPE ---------- */
  --font-serif:       'Playfair Display', Georgia, serif;
  --font-sans:        'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --t1:               clamp(48px, 7vw, 96px);     /* hero H1 */
  --t2:               clamp(36px, 4.5vw, 64px);   /* section H2 / large display */
  --t3:               clamp(28px, 3vw, 44px);     /* secondary headline */
  --t4:               clamp(22px, 2.2vw, 30px);   /* card / tertiary */
  --t5:               18px;                        /* lead paragraph */
  --t6:               16px;                        /* body */
  --t-small:          14px;
  --t-eyebrow:        11px;
  --t-mono-stat:      clamp(28px, 4vw, 48px);

  --leading-tight:    1.12;
  --leading-snug:     1.32;
  --leading-body:     1.7;
  --leading-loose:    1.9;

  /* ---------- SPACING (4pt base) ---------- */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* ---------- LAYOUT ---------- */
  --max-content:      1240px;
  --max-wide:         1480px;
  --max-reading:      720px;
  --gutter:           clamp(20px, 4vw, 40px);
  --section-pad-y:    clamp(80px, 12vw, 160px);
  --nav-height:       72px;

  /* ---------- MOTION ---------- */
  --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-firm:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         180ms;
  --dur-base:         320ms;
  --dur-slow:         640ms;
  --dur-reveal:       700ms;

  /* ---------- SHADOW ---------- */
  --shadow-card:       0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 24px 60px rgba(0, 0, 0, 0.10);
  --shadow-deep:       0 32px 80px rgba(0, 0, 0, 0.18);

  /* ---------- RADIUS ---------- */
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;
  --radius-pill:  999px;
}

/* ---------- RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

body {
  font-family: var(--font-sans);
  font-size: var(--t6);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Headings — never uppercase, never letter-spaced */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

h1 em, h2 em, h3 em { font-style: italic; color: var(--accent-deep); }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}