/*
  Alle visuele keuzes als variabelen. Voor een nieuwe stijl begin je hier:
  kleuren, lettertypes, maten en afstanden. layout.css en components.css
  gebruiken alleen deze variabelen.
*/
:root {
  /* Kleuren (wireframe: grijstinten) */
  --color-bg: #ffffff;
  --color-surface: #f2f2f2;
  --color-text: #1a1a1a;
  --color-muted: #595959;
  --color-border: #8c8c8c;
  --color-accent: #333333;
  --color-accent-contrast: #ffffff;
  --color-focus: #0b57d0;
  --color-success: #1e6b2e;
  --color-error: #a61b1b;
  --color-banner: #fff3c4;

  /* Typografie */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-size-base: 1.0625rem; /* minimaal 16px, voorkomt zoomen op iOS */
  --font-size-small: 0.9375rem;
  --font-size-h1: 1.75rem;
  --font-size-h2: 1.375rem;
  --font-size-h3: 1.125rem;
  --line-height: 1.5;
  --font-weight-heading: 700;

  /* Afstanden */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;

  /* Vormen en maten */
  --radius: 4px;
  --border-width: 1px;
  --page-max-width: 40rem;
  --tap-target: 48px;
}