/* ============================================================
   Chase Health & Performance — DESIGN TOKENS
   ============================================================ */

:root{
  /* ---- Colour ------------------------------------------------ */
  --color-bg:        #EDE8DF;
  --color-bg-warm:   #E5DECF;
  --color-surface:   #F6F2EA;
  --color-surface-2: #FBF8F2;
  --color-ink:       #1C1916;
  --color-ink-2:     #423C34;
  --color-muted:     #645F57;
  --color-line:      rgba(28,25,22,.14);
  --color-line-2:    rgba(28,25,22,.28);
  --color-error:     #A6392A;

  --color-accent:        #1A3C2B;
  --color-accent-2:      #245138;
  --color-accent-tint:   rgba(26,60,43,.08);
  --color-accent-tint-2: rgba(26,60,43,.14);
  --color-accent-light:  #A8C6B2;
  --color-on-accent:     #EFEBE2;

  --color-dark:      #14130F;
  --color-dark-2:    #201E18;
  --color-on-dark:   #EDE8DF;
  --color-on-dark-mute: rgba(237,232,223,.66);

  /* ---- Type families ---------------------------------------- */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-cond:    'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;

  /* ---- Type scale (fluid) ----------------------------------- */
  --t-hero:    clamp(2.9rem, 7.2vw, 6.25rem);
  --t-display: clamp(2.4rem, 5vw, 4.25rem);
  --t-h2:      clamp(1.95rem, 3.6vw, 3.1rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.7rem);
  --t-lede:    clamp(1.15rem, 1.55vw, 1.4rem);
  --t-body:    clamp(1rem, 1.1vw, 1.125rem);
  --t-small:   .9375rem;
  --t-eyebrow: .78rem;

  --lh-tight:  1.02;
  --lh-snug:   1.16;
  --lh-body:   1.62;
  --track-eyebrow: .18em;
  --track-display: -.015em;

  /* ---- Spacing scale ---------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 176px;
  --section-y: clamp(72px, 11vh, 176px);
  --gutter:    clamp(20px, 5vw, 72px);
  --maxw:      1240px;
  --maxw-text: 64ch;

  /* ---- Radii ------------------------------------------------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows ---------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(28,25,22,.06);
  --shadow-card: 0 1px 2px rgba(28,25,22,.05), 0 18px 40px -20px rgba(28,25,22,.22);
  --shadow-reco: 0 2px 4px rgba(26,60,43,.10), 0 30px 60px -24px rgba(26,60,43,.42);
  --shadow-hero: 0 40px 120px -40px rgba(0,0,0,.7);

  /* ---- Motion ----------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;
}