/* ============================================================
   PT Template 3 — "Modern Momentum" Design Tokens
   ONE-VARIABLE REBRAND: swap --accent-h/s/l to re-skin the site.
   ============================================================ */

:root {
  /* --- Accent system (client-configurable) ---
     Client-requested primary: warm tan/gold (#c4a881, from the legacy
     site's live CSS). Lightness is tuned to 38% rather than the literal
     swatch's 64% so text/icon/button uses of --accent clear WCAG AA
     (4.5:1) against white and bone — the literal pale swatch only hits
     ~2.3:1 there. --secondary below still holds the literal color for
     any large-surface/decorative use that doesn't need text contrast. */
  --accent-h: 35;
  --accent-s: 36%;
  --accent-l: 38%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 18%);
  --accent-soft: hsl(var(--accent-h) 60% 92%);
  --accent-glow: hsl(var(--accent-h) 80% 45% / 0.35);
  --accent-on: #ffffff;

  /* --- Secondary brand color ---
     Warm tan/gold from the legacy site's live CSS (#c4a882, used 17x in
     footer gradients and nav dropdown backgrounds), matching the exact
     hex the client asked to use as primary. Not present in the logo file
     itself (which is monochrome), but verified as a real secondary brand
     color from the client's existing site. */
  --secondary: #c4a882;
  --secondary-soft: hsl(33 38% 90%);

  /* --- Neutrals --- */
  --ink: hsl(97 40% 9%);
  --ink-2: hsl(97 38% 13%);
  --ink-3: hsl(97 38% 17%);
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(97 20% 90%);
  --line-bone: hsl(40 15% 84%);

  /* --- Text on dark / light --- */
  --text-on-ink: #f2f5f4;
  --text-on-ink-dim: hsl(97 15% 72%);
  --text-on-bone: #17262d;
  --text-on-bone-dim: hsl(97 12% 38%);

  /* --- Highlight (stars, tiny sparks ONLY) --- */
  --ember: #f2a33c;

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-quote: "Instrument Serif", serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.75rem, 1.2rem + 6.5vw, 6rem);
  --fs-h2: clamp(2rem, 1rem + 3.6vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-ghost: clamp(8rem, 20vw, 22rem); /* giant ghost numerals */

  /* --- Space & shape --- */
  --sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --sp-gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  --radius-card: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-soft: 0 6px 24px hsl(97 30% 10% / 0.08), 0 2px 8px hsl(97 30% 10% / 0.05);
  --shadow-lift: 0 18px 50px hsl(97 35% 10% / 0.16), 0 6px 16px hsl(97 35% 10% / 0.08);
  --shadow-glow: 0 0 60px var(--accent-glow);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-reveal: 700ms;

  /* --- Layout --- */
  --container: 1200px;
  --nav-h: 76px;
}