/* ==========================================================================
   Vigor Physio Care — Design Tokens
   Direction: "Modern Clinical Wellness" — the Recovery Line
   ========================================================================== */

:root {
  /* ---- Color: deep teal clinical palette + restrained warm brass accent ---- */
  --primary: #0B6B68;
  --primary-dark: #073F42;
  --primary-darker: #052B2D;
  --primary-light: #2B8C87;
  --primary-tint: #E4F2F0;

  --accent: #B8863F;         /* muted brass/amber — used sparingly */
  --accent-dark: #93692C;
  --accent-tint: #F7EFDF;

  --background: #FBFAF7;     /* warm neutral page background */
  --surface: #FFFFFF;
  --surface-alt: #F3FAF9;    /* soft teal-tinted surface */
  --surface-dark: #073F42;

  --text: #16292B;
  --text-soft: #2C4144;
  --muted: #5E7477;
  --muted-light: #8A9C9E;
  --border: #DEE7E5;
  --border-strong: #C3D2D0;

  --white: #FFFFFF;
  --success: #2F7D5A;
  --focus-ring: #0B6B68;

  /* ---- Typography ---- */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 4.4vw + 1rem, 4.5rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.15rem);
  --fs-h3: clamp(1.35rem, 1vw + 1rem, 1.85rem);
  --fs-h4: clamp(1.1rem, 0.4vw + 1rem, 1.3rem);
  --fs-lead: clamp(1.1rem, 0.4vw + 1rem, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.68;

  /* ---- Spacing scale (8px system) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 8rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 10px rgba(7, 63, 66, 0.06);
  --shadow-md: 0 10px 30px rgba(7, 63, 66, 0.10);
  --shadow-lg: 0 24px 60px rgba(7, 63, 66, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}