:root{
  /* basis */
  --ink:#1B1F23;
  --gray-700:#3F454C;
  --gray-500:#6B7178;
  --gray-300:#C9CCCE;
  --gray-150:#E8E9E7;
  --paper:#FAFAF8;
  --sand:#F2EBE1;
  --orange:#EA5B0C;
  --orange-600:#C74D0A;
  --delft:#1F4A6E;
  --groen:#2E7A52; /* lokaal toegevoegd, niet in Claude Design: alleen om positieve resultaten te benadrukken, een enkel getal of woord */
  /* semantisch */
  --text-heading:var(--ink);
  --text-body:var(--gray-700);
  --text-caption:var(--gray-500);
  --text-on-dark:var(--paper);
  --surface-page:var(--paper);
  --surface-alt:var(--sand);
  --surface-dark:var(--delft);
  --border-strong:var(--ink);
  --border-subtle:var(--gray-300);
  --border-hairline:var(--gray-150);
  --accent:var(--orange);
  --accent-hover:var(--orange-600);
}