/* ─────────────────────────────────────────
   Design tokens — single source of truth
   for all colours, spacing, radius, layout
───────────────────────────────────────── */
:root {

  /* ── Brand ── */
  --c-primary:           #006c44;
  --c-on-primary:        #ffffff;
  --c-primary-container: #2da56f;
  --c-primary-fixed:     #88f9bb;
  --c-primary-fixed-dim: #6bdca1;
  --c-dark-green:        #002112; /* nav, footer, testimonials */

  /* ── Surface ── */
  --c-surface:      #f8faf8;
  --c-surface-low:  #f2f4f2;
  --c-surface-mid:  #eceeec;
  --c-surface-high: #e6e9e7;

  /* ── Text ── */
  --c-on-surface:     #191c1b;
  --c-on-surface-var: #3e4a41;

  /* ── Outline ── */
  --c-outline:     #6e7a71;
  --c-outline-var: #bdcabf;

  /* ── Semantic overlays (rgba channels of --c-dark-green #002112) ── */
  --c-dark-green-rgb: 0, 33, 18;

  /* ── Spacing scale ── */
  --sp-xs:     8px;
  --sp-sm:     16px;
  --sp-gutter: 24px;
  --sp-md:     32px;
  --sp-margin: 48px;
  --sp-lg:     64px;
  --sp-xl:     128px;

  /* ── Radius ── */
  --r-xl:   12px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* ── Layout ── */
  --max-w:      80rem;   /* 1280px — content sections */
  --max-w-hero: 90rem;   /* 1440px — hero sections */
  --page-pad: var(--sp-margin);
}

@media (max-width: 767px) {
  :root { --page-pad: var(--sp-gutter); }
}