/**
 * Base: design tokens, reset, layout utilities, badge.
 *
 * @package HelloElementorChild
 */

/* ─── RESET & BASIS ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blauw:       #1A2E44;
  --blauw-mid:   #2C4A6A;
  --goud:        #F5C842;
  --goud-licht:  #FDF3C0;
  --lichtblauw:  #EAF4FB;
  --ijsblauw:    #F4F9FD;
  --wit:         #FFFFFF;
  --tekst:       #1A2E44;
  --subtekst:    #4a6278;
  --rand:        #D4E6F1;
  --succes:      #2E7D52;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --schaduw-sm:  0 2px 8px rgba(26,46,68,.07);
  --schaduw-md:  0 6px 24px rgba(26,46,68,.10);
  --schaduw-lg:  0 16px 48px rgba(26,46,68,.13);
  --font-kop:    'Georgia', 'Times New Roman', serif;
  --font-body:   'Segoe UI', system-ui, -apple-system, sans-serif;
  --max-breedte: 1180px;
  --sectie-pad:  80px 24px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── UTILITIES ─────────────────────────────────────────── */
.container {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 24px;
}

.sectie { padding: var(--sectie-pad); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--goud-licht);
  color: var(--blauw);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid #EDD96A;
  letter-spacing: .02em;
}