:root {
  /* Brand palette — matched to the PulmHealth Foundation logo */
  --color-navy:     #052F63; /* logo navy lobe */
  --color-blue:     #1C6591; /* mid blue (links/buttons, AA on white) */
  --color-teal:     #12A6A2; /* bright teal-green accent (logo teal lobe) */
  --color-teal-deep:#0A7B7E; /* accessible teal-green for small text */
  --color-sky:      #D8EEEF; /* light green-tinted tint */
  --color-mist:     #F1F9F8; /* very light green-tinted background */
  --color-charcoal: #23303A;
  --color-gray:     #5F6D75;
  --color-border:   #D4E3E4;
  --color-white:    #FFFFFF;
  --color-success:  #2E7D5A;
  --color-warning:  #A96A16;
  --color-danger:   #B23A2E;

  /* Semantic tokens */
  --bg:           var(--color-white);
  --bg-alt:       var(--color-mist);
  --bg-invert:    var(--color-navy);
  --text:         var(--color-charcoal);
  --text-muted:   var(--color-gray);
  --text-invert:  var(--color-white);
  --link:         var(--color-blue);
  --link-hover:   var(--color-navy);
  --border:       var(--color-border);

  /* Typography */
  --font-sans: "Source Sans 3", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1rem;
  --fs-400: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
  --fs-500: clamp(1.15rem, 1vw + 0.9rem, 1.375rem);
  --fs-600: clamp(1.4rem, 2vw + 0.9rem, 1.875rem);
  --fs-700: clamp(1.6rem, 3vw + 0.9rem, 2.5rem);
  --fs-800: clamp(2rem, 5vw + 0.9rem, 3.25rem);
  --fs-900: clamp(2.3rem, 6vw + 0.9rem, 3.75rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius / shadow / borders */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(18, 48, 74, 0.06), 0 1px 3px rgba(18, 48, 74, 0.08);
  --shadow:    0 6px 18px rgba(18, 48, 74, 0.08);
  --shadow-lg: 0 18px 40px rgba(18, 48, 74, 0.14);
  --border-1:  1px solid var(--border);

  /* Layout */
  --container-wide:    1280px;
  --container-main:    1120px;
  --container-reading: 760px;
  --header-h: 4.5rem;

  --transition: 180ms ease;
}