/* ============================================================
   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) ---
     JEWEL PHYSICAL THERAPY: hsl(201 100% 19%) is #003f61, one RGB step from the
     brand navy #003e60. That hex was verified from three independent sources
     (the logo's own dominant pixels, the live site's button CSS, and the saved
     theme config of the clinic's own Elfsight reviews widget).
     Because the brand navy sits at 19% lightness, --accent-strong had to move
     from 27% down to 10%: at 27% it would have been LIGHTER than --accent and
     every "darker state" in the CSS would have inverted. The duotone tints in
     02-hero and 04-conditions read --accent-h only and carry their own S/L, so
     they are unaffected by the lightness change. */
  --accent-h: 201;
  --accent-s: 100%;
  --accent-l: 19%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 10%);
  --accent-soft: hsl(var(--accent-h) 60% 92%);
  --accent-glow: hsl(var(--accent-h) 80% 45% / 0.35);
  --accent-on: #ffffff;

  /* --- Neutrals --- */
  --ink: #0e1b21;
  --ink-2: #14252d;
  --ink-3: #1b323c;
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(200 20% 90%);
  --line-bone: hsl(40 15% 84%);
  /* Same hue/saturation as --line-bone, darkened for WCAG 1.4.11 (3:1
     non-text contrast): interactive controls whose fill matches their
     container (no color-fill boundary) need this instead of --line-bone,
     which sits at ~1.3:1 against both --bone and --white. */
  --line-strong: hsl(40 15% 48%);

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