:root{
  /* Merk — Bouwkonsult: antraciet #1D1D1B met signaalgeel #FED03D uit het logo.
     De schaal draagt historisch de naam teal-*: 50-200 zijn de zachte gele vlakken,
     300/400 het signaalgeel, 500-900 het antraciet waarop de interface rust. */
  --teal-50:#FFFCF0; --teal-100:#FEF5D6; --teal-200:#FAE8AB; --teal-300:#FED03D;
  --teal-400:#F0BC10; --teal-500:#4A4A45; --teal-600:#1D1D1B; --teal-700:#131312;
  --teal-800:#0C0C0B; --teal-900:#000000;
  --brand-geel:#FED03D; --brand-geel-diep:#F0BC10; --brand-ink:#1D1D1B;
  --brand-teal:var(--teal-600);

  /* Neutralen — antraciet naar gebroken wit */
  --ink-950:#0F0F0E; --ink-900:#1D1D1B; --ink-800:#2E2E2B; --ink-700:#4A4A46;
  --ink-600:#6E6E68; --ink-500:#90908A; --ink-400:#B1B1AC; --ink-300:#D0D0CB;
  --ink-200:#E4E4E0; --ink-100:#F0F0EC; --ink-50:#F8F8F6; --white:#FFFFFF;

  /* Ondersteunend — spaarzaam, vooral in data en herkomstlabels */
  --zand-500:#C6B69B; --zand-300:#E3DACB; --zand-100:#F3EFE7;
  --klei-500:#A9603C; --klei-100:#F4E7E0;
  --staal-500:#41607F; --staal-100:#E4EAF0;

  /* Semantisch */
  --success-600:#2F7A55; --success-100:#E4F1EA;
  --warning-600:#9A6E12; --warning-100:#FBF0D5;
  --danger-600:#A33A2E;  --danger-100:#F6E5E2;
  --info-600:var(--ink-900); --info-100:var(--teal-100);

  /* Vlakken */
  --surface-page:var(--white);
  --surface-subtle:var(--ink-50);
  --surface-card:var(--white);
  --surface-inset:var(--ink-100);
  --surface-inverse:var(--ink-900);
  --surface-brand:var(--teal-600);
  --surface-brand-subtle:var(--teal-50);
  --surface-accent:var(--brand-geel);

  /* Tekst */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-800);
  --text-muted:var(--ink-600);
  --text-faint:var(--ink-500);
  --text-inverse:var(--white);
  --text-brand:var(--ink-900);
  --text-link:var(--ink-900);
  --text-link-hover:var(--ink-700);
  --text-on-accent:var(--ink-900);

  /* Randen */
  --border-hairline:var(--ink-200);
  --border-default:var(--ink-300);
  --border-strong:var(--ink-900);
  --border-brand:var(--ink-900);
  --border-focus:var(--brand-geel-diep);
  --border-accent:var(--brand-geel);

  /* Datavisualisatie */
  --chart-1:var(--ink-900); --chart-2:var(--brand-geel); --chart-3:var(--staal-500);
  --chart-4:var(--zand-500); --chart-5:var(--klei-500); --chart-6:var(--ink-500);
  --chart-grid:var(--ink-200);
}