/* ============================================================
   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) ---
     Youtherapy Wellness and Physical Rehab: brand orange #f58216, taken from the
     old site's aggregated CSS (53 occurrences: header CTAs, mobile nav, H1s).
     hsl(29.1 92% 52.4%) resolves to #f58216 exactly.

     Orange is a LIGHT hue, so it does not behave like the template's default
     clinical blue. Two knock-on retunes, both inside this token system:
       --accent-on  is dark ink, not white, and is now its OWN literal color
                    (not aliased to --text-on-ink): white on brand orange is
                    2.6:1 and fails AA, dark ink on brand orange is 6.2:1 and
                    passes, regardless of what --text-on-ink is doing for the
                    flat-teal sections below. This one token covers all 19
                    "text on an accent fill" rules at once.
       --accent-strong stays at 27% lightness (the stock formula) because it is
                    used 35 times as accent TEXT on light backgrounds, where it
                    scores 6.8:1 on bone. Only its single background use
                    (.btn--solid:hover) needed adjusting, in base.css. */
  --accent-h: 29.1;
  --accent-s: 92%;
  --accent-l: 52.4%;
  --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: #0e2425;

  /* --- Neutrals ---
     --ink is the client's requested dark-section teal (hue 182.3, same family
     as --line-ink below). It was originally a mid-lightness 40% L, which only
     scored 3.1:1 for white text and forced --text-on-ink to flip to dark ink
     instead (5.2:1) — legible, but every dark section read as a muddy
     mid-teal rather than a real "dark act," and it's what made the
     06-journey -> 07-results handoff need a separate near-black gradient
     stop to read as dark at all (see those files' history).
     Darkened to 20/24/28% L (same hue/saturation) so --text-on-ink can go
     back to plain white — the template's normal dark-section behavior —
     with every shade comfortably at 4.5:1+ (ink 9.0:1, ink-2 7.2:1, ink-3
     5.7:1, all against white; --text-on-ink-dim below is separately tuned
     against ink and ink-2, the only two it's ever placed on). */
  --ink: #125154;
  --ink-2: #166164;
  --ink-3: #1a7175;
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(182.3 20% 90%);
  --line-bone: hsl(40 15% 84%);

  /* --- Text on dark / light --- */
  --text-on-ink: var(--white);
  --text-on-ink-dim: #c2d5d6;
  --text-on-bone: #17262d;
  --text-on-bone-dim: hsl(29.1 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(29.1 30% 10% / 0.08), 0 2px 8px hsl(29.1 30% 10% / 0.05);
  --shadow-lift: 0 18px 50px hsl(29.1 35% 10% / 0.16), 0 6px 16px hsl(29.1 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;
}