/* ============================================================
   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) ---
     Direct Performance brand red. Their logo wordmark and their old site's
     link/button colour are both #fc0003, which converts to 359 100% 49%.
     Held at 92% / 47% instead: this template floods the accent across far more
     surface than their old Divi site did (hero photo grade, body-model duotone,
     chapter numerals, glow), and at full saturation pure red vibrates against
     the bone/ink palette. 92/47 reads as the same brand red and stays legible.
     Restore 100% / 49% for an exact #fc0003 match. */
  --accent-h: 359;
  --accent-s: 92%;
  --accent-l: 47%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 27%);
  --accent-soft: hsl(var(--accent-h) 60% 92%);
  --accent-glow: hsl(var(--accent-h) 80% 45% / 0.35);
  --accent-on: #ffffff;
  /* AA-safe text-link variant for accent-colored text ON DARK (.on-ink) sections: --accent
     itself is only 3.89:1 on --ink, under AA's 4.5:1 for regular text. Same hue, lighter/
     less saturated so it reads on dark backgrounds. Held at 66% (not the 62% used ad hoc by
     .on-ink .eyebrow and journey phase names) so it also clears 4.5:1 against the lighter,
     translucent-white-over-ink background the comebacks ticker tags composite to (4.72:1
     there; 5.41:1 on plain --ink). */
  --accent-ink-link: hsl(var(--accent-h) 70% 66%);

  /* --- Neutrals ---
     Re-hued from the template's default blue-navy (H~190-200) to the brand
     red hue (359), saturation/lightness held so these stay near-black
     neutrals rather than going saturated red. */
  --ink: #210e0e;
  --ink-2: #2d1414;
  --ink-3: #3c1b1c;
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(359 20% 90%);
  --line-bone: hsl(40 15% 84%);

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

  /* --- Highlight (stars, tiny sparks ONLY) --- */
  --ember: #f2a33c;
  /* --ember on a light (--bone/--white-ish) background is only ~2:1, well under AA. Used
     for literal star-rating glyphs, which count as text. --ember-strong is the same amber
     hue darkened until it clears 4.5:1 on --bone (4.79:1) and on the review-card white
     #fbfbf9 (5.13:1); --ember itself stays unchanged for on-ink use (8.89:1 there). */
  --ember-strong: hsl(34 88% 32%);

  /* --- 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(359 30% 10% / 0.08), 0 2px 8px hsl(359 30% 10% / 0.05);
  --shadow-lift: 0 18px 50px hsl(359 35% 10% / 0.16), 0 6px 16px hsl(359 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;
}