/* Prospect tokens: BALANCE LIFE WELLNESS
   Base system: wellness
   Bespoke tuning: calm sage-teal palette held close to the wellness base;
   accent shifted to muted warm amber for a spa/community feel.
   No existing brand colors to adapt from — palette derived from tone: calm,
   restorative, community-rooted, approachable ("wellness for every body").
   Typography: Fraunces (heading, organic warmth) + Inter (body, clarity).
   Density: airy — unhurried pacing suits the multi-modality wellness positioning. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── Neutral canvas ──────────────────────────────────────────────── */
  --bg:          #faf9f6;   /* warm off-white, softer than clinical white  */
  --surface:     #ffffff;
  --ink:         #35403b;   /* dark sage-neutral; 13.3:1 on --bg           */
  --ink-strong:  #1e2b26;   /* near-black with green undertone; 16.4:1     */
  --muted:       #5e6c65;   /* secondary text; 5.6:1 on --bg (PASS)        */
  --line:        #e4e0d6;   /* warm-toned border / divider                 */

  /* ── Brand palette ───────────────────────────────────────────────── */
  --brand:       #2f7d6b;   /* sage-teal (wellness base); 5.12:1 on #fff PASS */
  --brand-dark:  #1f5e50;   /* deeper teal for hover/active; 7.4:1 on #fff */
  --brand-tint:  #e2f1ec;   /* pale mint — card icons, hero accent areas   */
  --on-brand:    #ffffff;   /* white on --brand = 5.12:1 PASS              */
  --accent:      #b8864a;   /* muted amber-terracotta — warm, spa-like      */

  /* ── Surfaces with intent ────────────────────────────────────────── */
  --hero-bg:     radial-gradient(1000px 480px at 14% -8%, #ddf0e9, transparent), #f3f0e7;
  --header-bg:   rgba(250, 249, 246, .88);
  --footer-bg:   #eeece5;
  --band-bg:     #1e2b26;   /* dark forest — CTA bands; high contrast       */
  --on-band:     #f4f2eb;
  --on-band-muted: #b2bdb7;

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --fs-base:      17px;
  --lh-body:      1.72;
  --fw-body:      400;
  --fw-head:      600;
  --lh-head:      1.12;
  --ls-head:      -.01em;
  --fs-lead:      1.22rem;
  --fs-h1:        clamp(2.5rem, 5.4vw, 4rem);
  --fs-h2:        clamp(1.8rem, 3.6vw, 2.6rem);
  --fs-h3:        1.32rem;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --container:   1120px;
  --gutter:      26px;
  --section-y:   104px;
  --hero-y:      112px;
  --nav-h:       76px;

  /* ── Spacing scale ───────────────────────────────────────────────── */
  --space-3:     12px;
  --space-4:     18px;
  --space-5:     28px;
  --space-6:     34px;
  --space-7:     64px;

  /* ── Buttons ─────────────────────────────────────────────────────── */
  --btn-pad:     15px 30px;

  /* ── Shape ───────────────────────────────────────────────────────── */
  --radius:      16px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────────── */
  --shadow:      0 10px 30px rgba(30, 43, 38, .06);
  --shadow-lg:   0 22px 50px rgba(30, 43, 38, .12);

  /* ── Motion (gentle — suits restorative wellness brand) ──────────── */
  --dur:         220ms;
  --ease:        cubic-bezier(.22, .61, .36, 1);
}

/* ── Accent-tinted icon wells on service cards ───────────────────────── */
/* eyebrow uses brand-dark (#1f5e50, 6.64:1 on hero bg, 7.19:1 on --bg) to meet 4.5:1 AA */
.eyebrow { color: var(--brand-dark); }
.card .ic { background: #f3eade; color: var(--accent); }