/**
 * V2 — pas deze kleuren aan om de hele template een andere huisstijl te geven.
 * Geen Sass, npm of compilatie nodig. Ook Bootstrap-componenten volgen dit thema.
 * Gebruik een donkere primaire kleur voor voldoende contrast met witte knoptekst.
 */
:root {
  --brand-primary: #286eac;
  --brand-dark: #2b3e50;
  --brand-accent: #708718;
  --brand-text: #626971;
  --brand-surface: #f6f7f8;
  --brand-background: #ffffff;
  --brand-on-primary: #ffffff;
  --brand-on-dark: #ffffff;

  /* Optioneel: lettertypen en de vormgeving van componenten. */
  --font-body: "Montserrat", sans-serif;
  --font-heading: "Montagu Slab", Georgia, serif;
  /* Eén inhoudsbreedte per schermklasse, gedeeld door alle secties. */
  --site-width-sm: 540px;
  --site-width-md: 720px;
  --site-width-lg: 960px;
  --site-width-xl: 1140px;
  --site-width-xxl: 1280px;
  --site-max-width: 1440px;
  --radius-button: 8px;
  --radius-card: 14px;
  --radius-image: 28px;
}

/* Voorbeeld voor een andere klant: vervang uitsluitend het blok hierboven.
 * --brand-primary: #22634e;
 * --brand-dark: #203b36;
 * --brand-accent: #906122;
 * --brand-surface: #f4f7f5;
 */