/* tokens.css — Pulih Physio & Rehab v1
   Synced copy of design/tokens.css (repo source of truth for design work).
   Kept as a literal copy, not an @import, because only the CONTENTS of
   src/ are uploaded to the live server — an import reaching outside
   src/ (e.g. ../../design/tokens.css) 404s once src/ becomes the site
   root. Any token change must be applied to BOTH files.
   Extracted from moodboard: teal family + Cormorant Garamond / Manrope.
   Neutrals (text/soft/line) added — moodboard palette had none.
   Contrast: text colours below all meet WCAG AA (>=4.5:1) on their backgrounds. */

:root {
  /* ---- Colour ---- */
  --ink:        #0F4A54;  /* headings, nav — deep petrol teal */
  --primary:    #15707D;  /* CTA button bg (white text = 5.8:1 AA) */
  --primary-ink:#0C5762;  /* CTA hover / pressed */
  --accent:     #1B7E8C;  /* links, small accents on light (4.8:1 AA) */
  --sage:       #7DB0AB;  /* fills, borders, decoration ONLY — never text on white */
  --bg:         #FFFFFF;  /* page */
  --alt-bg:     #EAF2F2;  /* alternate section background (pale ice) */
  --surface:    #F7FAFA;  /* cards on white */
  --text:       #22383D;  /* body text (12.8:1 AA) */
  --soft-text:  #556A6F;  /* muted text (5.2:1 AA) */
  --line:       #D6E3E3;  /* borders, dividers */
  --on-dark:    #EAF3F3;  /* text on deep-teal bands */

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Desktop scale */
  --h1: clamp(2.75rem, 4.4vw, 3.75rem);   /* ~44–60px */
  --h2: clamp(2rem, 3vw, 2.5rem);         /* ~32–40px */
  --h3: 1.375rem;                          /* 22px */
  --body-lg: 1.0625rem;                    /* 17px */
  --body: 1rem;                            /* 16px */
  --small: 0.875rem;                       /* 14px */
  --eyebrow: 0.75rem;                      /* 12px, tracked uppercase */

  --lh-tight: 1.08;
  --lh-head: 1.15;
  --lh-body: 1.7;

  /* ---- Space (8pt) ---- */
  --section-pad: 96px;
  --section-pad-mobile: 56px;
  --card-pad: 30px;
  --max-width: 1120px;
  --gutter: 24px;

  /* ---- Form ---- */
  --radius-btn: 999px;
  --radius-card: 18px;
  --radius-tag: 8px;

  /* ---- Shadow ---- */
  --shadow-card: 0 2px 10px rgba(15, 74, 84, 0.07);
  --shadow-hover: 0 12px 34px rgba(15, 74, 84, 0.14);
  --shadow-cta: 0 6px 18px rgba(21, 112, 125, 0.28);
}

@media (max-width: 767px) {
  :root {
    --h1: clamp(2.125rem, 8vw, 2.375rem);  /* ~34–38px */
    --h2: 1.625rem;                         /* ~26px */
    --section-pad: var(--section-pad-mobile);
  }
}