/* ============================================================
   SYSTEMIC CHANGE LABS DESIGN TOKENS Single source of truth. Load this FIRST before all other CSS.
   ============================================================ */

:root {
  /* ── Colours ── */ --green:#123f31; --green-2:#1a5c48; --green-dark:#0c2d22; --amber:#f7ad24; --amber-light:#ffc84f; --cream:#fbfcf6; --mint:#eef5ed; --ink:#0f2d22; --body-color:#3a4f48; --muted:#5a6964; --line:rgba(18, 63, 49, 0.14); --line-dark:rgba(18, 63, 49, 0.24); --white:#ffffff;

  /* ── Typography Scale ── */ --text-xs:clamp(0.72rem,  0.78vw, 0.78rem); --text-sm:clamp(0.875rem, 0.92vw, 0.95rem); --text-base:clamp(1rem,     1.08vw, 1.08rem); --text-lg:clamp(1.1rem,   1.25vw, 1.22rem); --text-xl:clamp(1.25rem,  1.5vw,  1.4rem); --text-2xl:clamp(1.5rem,   2vw,    1.8rem); --text-3xl:clamp(1.875rem, 2.8vw,  2.5rem); --text-4xl:clamp(2.25rem,  3.5vw,  3.25rem); --text-5xl:clamp(2.75rem,  4.5vw,  4.25rem); --text-6xl:clamp(3.25rem,  5.5vw,  5.25rem);

  /* ── Spacing ── */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* ── Section rhythm ── */ --section-y:clamp(72px, 9vw, 120px); --section-y-sm:clamp(48px, 6vw, 80px);

  /* ── Border radius ── */ --radius-xs:3px; --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px;

  /* ── Shadows ── */ --shadow-sm:0 2px 8px rgba(18, 63, 49, 0.07); --shadow-md:0 8px 24px rgba(18, 63, 49, 0.11); --shadow-lg:0 20px 52px rgba(18, 63, 49, 0.15); --shadow-xl:0 32px 72px rgba(18, 63, 49, 0.18);

  /* ── Transitions ── */ --ease:cubic-bezier(0.25, 0.46, 0.45, 0.94); --t-fast:160ms; --t-base:240ms; --t-slow:380ms;
}