/* Automatisch gegenereerd uit site.config.json */
:root {
  --color-primary: #123E8C;
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000000);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 12%, #FFFFFF);
  --color-accent: #FFC533;
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #000000);
  --color-accent-light: color-mix(in srgb, var(--color-accent) 18%, #FFFFFF);
  --color-ink: #0F1B2D;
  --color-ink-muted: color-mix(in srgb, var(--color-ink) 72%, transparent);
  --color-ink-subtle: color-mix(in srgb, var(--color-ink) 45%, transparent);
  --color-bg: #F5F8FC;
  --color-card-bg: #FFFFFF;
  --color-surface-subtle: color-mix(in srgb, var(--color-bg) 65%, #FFFFFF);
  --color-border: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --color-border-hover: color-mix(in srgb, var(--color-ink) 25%, transparent);
  --color-success: #15803D;
  --color-wa-green: #25D366;
  --color-wa-dark: #075E54;
  /* Radii en schaduwen horen bij de kaartlayout: een kaart moet zich als kaart
     lezen. sm voor vlakke vlakken, md voor de standaardkaart en lg voor
     de uitgesproken momenten (hero, pakket, formulier, kaart). */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container-max: 1200px;
  /* Schaduwen geven de kaarten diepte. De standaardkaart (card, USP,
     stappen, pakketkiezer, FAQ) gebruikt --shadow-md; alleen het hovermoment
     en het gemarkeerde pakket gaan naar --shadow-lg. */
  --shadow-sm: 0 1px 3px rgba(15, 27, 45, 0.08);
  --shadow-md: 0 4px 20px rgba(15, 27, 45, 0.07);
  --shadow-lg: 0 12px 32px rgba(15, 27, 45, 0.12);
}