:root {
  /* Huisstijlkleuren */
  --wit: #ffffff;
  --creme: #f4eee1;
  --donkerblauwprimair: #192931;
  --lichtblauwprimair: #BAC8E7;
  --oranjeprimair: #E27245;

  --donkerblauw: #192931;
  --lichtblauw: #bac8e7;
  --donkerroze: #f6b7a7;
  --donkerpaars: #332243;
  --rood: #e27245;
  --warmbruin: #3c2618;
  --lichtgeel: #fdeead;
  --koelblauw: #172751;
  --koelbruin: #3c2618;
  --lichtgrijs: #e7eaf6;
  --koeldonkergroen: #165e3f;
  --lichtroze: #f8e7f1;
  --warmdonkergroen: #14573a;
  --lichtgroen: #e0ebb2;
  --geel: #f7b917;
  --warmblauw: #172751;

  --groensecundair: #D1E074;
  --lichtgroensecundair: #E0EBB2;
  --oudrozesecundair: #F6B7A7;
  --lichtrozesecundair: #F8E7F1;
  --donkerbruinsecundair: #3C2618;
  --lichtbruinsecundair: #B38B2E;
  --donkerroodsecundair: #61180C;
  --oranjesecundair: #E27245;
  --donkerblauwsecundair: #172751;
  --lichtblauwsecundair: #E7EAF6;
  --geelsecundair: #F7B917;
  --lichtgeelsecundair: #fdeead;
  --donkerpaarssecundair: #332243;
  --lichtpaarssecundair: #8d64aa;
  --donkergroensecundair: #14573A;
  --lichtblauwsecundair: #9EC9C6;



  /* Semantische kleuren: deze wisselen mee met het thema */
  --color-background: var(--creme);
  --color-text: var(--donkerblauw);
  --color-surface: var(--wit);
  --color-surface-alt: var(--lichtblauw);
  --color-header: rgba(244, 238, 225, 0.92);
  --color-header-border: rgba(25, 41, 49, 0.16);
  --color-interactive: var(--donkerpaars);
  --color-focus: var(--oranje);
  --color-shadow: rgba(25, 41, 49, 0.12);

  /* Typografie */
  --font-title: "Unbounded", sans-serif;
  --font-subtitle: "Cormorant", Georgia, serif;
  --font-body: "Inclusive Sans", Arial, sans-serif;

  --text-xs: clamp(0.85rem, 0.8vw, 0.95rem);
  --text-sm: clamp(1rem, 0.9vw, 1.05rem);
  --text-base: clamp(1.125rem, 1vw, 1.2rem);
  --text-lg: clamp(1.25rem, 1.4vw, 1.55rem);
  --text-xl: clamp(1.8rem, 3vw, 3rem);
  --text-hero: clamp(3rem, 7vw, 6.5rem);

  /* Layout en beweging */
  --content-width: 73.75rem;
  --page-gutter: clamp(1rem, 6vw, 4.5rem);
  --radius-pill: 999px;
  --transition-fast: 180ms ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-background: var(--donkerblauw);
  --color-text: var(--creme);
  --color-surface: #233b45;
  --color-surface-alt: #2b3f48;
  --color-header: rgba(18, 32, 39, 0.94);
  --color-header-border: rgba(244, 238, 225, 0.2);
  --color-interactive: var(--lichtblauw);
  --color-focus: var(--geel);
  --color-shadow: rgba(0, 0, 0, 0.38);
}