/* Dover-Dunkirk tokens. Bron: design/README.md. Componenten gebruiken uitsluitend deze variabelen. */
:root {
  --dd-brand: #0A5F6E;
  --dd-brand-deep: #083F49;
  --dd-brand-ink: #0B2B33;
  --dd-brand-tint: #E3F1F3;
  --dd-brand-tint-2: #CFE6EA;
  --dd-cta: #C8461A;
  --dd-cta-hover: #A93A14;
  --dd-cta-ink: #FFFFFF;
  --dd-bg: #F4F6F7;
  --dd-surface: #FFFFFF;
  --dd-line: #DCE3E6;
  --dd-line-strong: #B8C6CB;
  --dd-ink: #102026;
  --dd-ink-2: #3E525B;
  --dd-ink-3: #5C6F77;
  --dd-ok: #1C8A5A;
  --dd-warn: #C2811A;
  --dd-bad: #C63A2E;
  --dd-radius: 14px;
  --dd-radius-s: 8px;
  --dd-shadow: 0 10px 30px -12px rgba(11, 43, 51, .28), 0 2px 6px -2px rgba(11, 43, 51, .12);
  --dd-shadow-soft: 0 4px 14px -6px rgba(11, 43, 51, .16);
  --dd-font: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dd-measure: 68ch;
}

/* Kadence-globals overschrijven met de tokens, zodat ook Kadence-eigen elementen meekleuren. */
:root {
  --global-palette1: var(--dd-brand);
  --global-palette2: var(--dd-brand-deep);
  --global-palette3: var(--dd-ink);
  --global-palette4: var(--dd-ink-2);
  --global-palette5: var(--dd-ink-3);
  --global-palette6: var(--dd-line-strong);
  --global-palette7: var(--dd-line);
  --global-palette8: var(--dd-bg);
  --global-palette9: var(--dd-surface);
  --global-body-font-family: var(--dd-font);
  --global-heading-font-family: var(--dd-font);
}

body {
  background: var(--dd-bg);
  color: var(--dd-ink);
  font-family: var(--dd-font);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--dd-brand-tint-2); color: var(--dd-brand-ink); }
a { color: var(--dd-brand); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--dd-brand-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--dd-cta);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3, h4 { font-family: var(--dd-font); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(32px, 4.2vw, 50px); }
h2 { font-size: clamp(26px, 2.6vw, 32px); }
h3 { font-size: 19px; font-weight: 700; }
.dd-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
* { scrollbar-color: var(--dd-line-strong) transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}