/* ============================================================
   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: Central Jersey Physical Therapy, Old Bridge NJ.
     Sampled from their own logo: the "Central Jersey" wordmark is #AC218D magenta
     and "Physical Therapy" underneath it is #4DB690 green. The magenta wins because
     it is the colour of the brand name itself, it is the most saturated thing they
     own, and it keeps this build clear of PT Template 1 (teal) and PT Template 2
     (green). Master default was clinical blue 207 / 85% / 42%.
     312 / 70% / 40% resolves to #AD1D91, within a hair of the logo's #AC218D. */
  --accent-h: 312;
  --accent-s: 70%;
  --accent-l: 40%;
  --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;

  /* --- Secondary accent (client-configurable) ---
     The legacy site (cjpta.com) uses the green half of the logo, #4CB68F, as a
     secondary/accent color alongside its magenta. Kept as a real second variable
     rather than folded into --accent so the site stays a one-color-per-role system:
     --accent for primary actions/brand, --accent-2 for the smaller secondary
     touches (positive/confirm states, small decorative badges) that used it on the
     legacy site. 158 / 42% / 51% reproduces #4CB68F exactly. */
  --accent2-h: 158;
  --accent2-s: 42%;
  --accent2-l: 51%;
  --accent2: hsl(var(--accent2-h) var(--accent2-s) var(--accent2-l));
  --accent2-strong: hsl(var(--accent2-h) var(--accent2-s) 36%);
  --accent2-soft: hsl(var(--accent2-h) 45% 92%);
  --accent2-glow: hsl(var(--accent2-h) 60% 45% / 0.35);
  --accent2-on: #ffffff;

  /* --- Neutrals ---
     Re-hued from the master's blue-navy (hsl 190-200) to track the client's
     magenta accent instead of shipping the template default hue untouched. */
  --ink: hsl(var(--accent-h) 40% 9%);
  --ink-2: hsl(var(--accent-h) 39% 13%);
  --ink-3: hsl(var(--accent-h) 38% 17%);
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(var(--accent-h) 20% 90%);
  --line-bone: hsl(40 15% 84%);

  /* --- Text on dark / light --- */
  --text-on-ink: #f2f5f4;
  --text-on-ink-dim: hsl(var(--accent-h) 15% 72%);
  --text-on-bone: hsl(var(--accent-h) 32% 13%);
  --text-on-bone-dim: hsl(var(--accent-h) 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(var(--accent-h) 30% 10% / 0.08), 0 2px 8px hsl(var(--accent-h) 30% 10% / 0.05);
  --shadow-lift: 0 18px 50px hsl(var(--accent-h) 35% 10% / 0.16), 0 6px 16px hsl(var(--accent-h) 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;
}