/* ======================================================================
   Design tokens — single source of truth for colour, spacing, type, breakpoints.
   Every page should resolve its visual choices via these custom properties.
   No raw hex values or magic numbers should appear in main.css after A4.
   ====================================================================== */

:root {
  /* Brand palette ------------------------------------------------------ */
  --c-bg:           #faf8f4;   /* page background, warm off-white */
  --c-bg-alt:       #f2efe8;   /* section background, slightly darker */
  --c-ink:          #252525;   /* primary text */
  --c-ink-soft:     #555;      /* secondary text */
  --c-ink-muted:    #888;      /* tertiary / captions */
  --c-accent:       #7dc4a4;   /* sage green — primary brand */
  --c-accent-dark:  #6ab393;   /* sage hover/pressed */
  --c-warm:         #a09070;   /* warm taupe — secondary accent (founder card etc.) */
  --c-coral:        #d4806a;   /* India/coral chip */
  --c-border:       #e2dfd8;
  --c-border-soft:  #ece8df;
  --c-ink-inverse:  #F0E7E4;   /* light cream — text on dark backgrounds */
  --c-bg-dark:      #2e2a28;   /* news header dark variant */
  --c-bg-dark-soft: #433e3c;   /* chocolate, used in news.html cards */

  /* Country palette (used by news cards + article chips) --------------- */
  --c-country-sl:       #5aad8a;
  --c-country-cameroon: #5aad8a;
  --c-country-india:    #d4806a;
  --c-country-kenya:    #7a9a50;
  --c-country-malawi:   #a09070;
  --c-country-pakistan: #4a7898;

  /* Spacing scale ------------------------------------------------------ */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-xxl: 120px;

  /* Type --------------------------------------------------------------- */
  --font-body:    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Georgia", "Times New Roman", serif;

  /* Breakpoints — referenced from JS where needed (CSS @media literals
     still use the numeric values; CSS custom properties cannot drive
     media-query conditions). */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
}

/* ----------------------------------------------------------------------
   Legacy aliases — match the variable names already used by news.html so
   that page keeps rendering correctly during the A3 → A4 migration.
   Delete this block once news.html no longer references --color-* names.
   ---------------------------------------------------------------------- */
:root {
  --color-sage:      var(--c-accent);
  --color-cream:     var(--c-ink-inverse);
  --color-chocolate: var(--c-bg-dark-soft);
}