/* RE+CONNECT — reconnect.css
   Alles wat een website nodig heeft vóór components/bundle.css: de twee lettertypen, de kleuren voor licht en donker,
   de maten en een paar basisregels. Laad in deze volgorde: web/reconnect.css, components/bundle.css, en onderaan
   components/bundle.js. De lettertypen staan in fonts/ en worden vanaf je eigen site geladen (geen Google Fonts).

   Gemaakt uit tokens.json (versie 5, controlegetal 6dfc21363a6e). Pas je tokens.json aan, maak dit bestand dan opnieuw:
   de waarden hier moeten gelijk blijven aan tokens.json. */

/* ---------- lettertypen ---------- */
@font-face {
  font-family: "Gloock";
  src: url("../fonts/Gloock-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable-Italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk terugval";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 100 599;
  size-adjust: 104.8%;
  ascent-override: 93.2%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Grotesk terugval";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 600 1000;
  size-adjust: 101.1%;
  ascent-override: 96.6%;
  descent-override: 25.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Gloock terugval";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Times");
  font-weight: 100 1000;
  size-adjust: 114.3%;
  ascent-override: 85.3%;
  descent-override: 19.7%;
  line-gap-override: 0%;
}

/* ---------- kleuren: volgt het apparaat (licht of donker); data-theme="licht" of "donker" op <html> zet het vast ---------- */
:root {
  color-scheme: light dark;
  --grond: #fbf8f2;
  --vlak: #efe5d6;
  --inkt: #221c17;
  --inkt-zacht: #574d42;
  --uit: #d9d1c4;
  --lijn: #e7dfd2;
  --lijn-sterk: #7b7263;
  --espresso: #241c16;
  --op-espresso-zacht: #d9cdb9;
  --espresso-uit: #6a5949;
  --donker: #1c1a15;
  --op-donker: #f5efe4;
  --op-donker-zacht: #dcd6bd;
  --oranje: #f5a01f;
  --oranje-diep: #e08a0b;
  --op-oranje: #221c17;
  --focus: #221c17;
  --focus-donker: #f5a01f;
  --schaduw-zacht: 0 1px 2px rgba(60,40,20,0.06), 0 14px 32px -14px rgba(60,40,20,0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="licht"]) {
    --grond: #161411;
    --vlak: #201d19;
    --inkt: #f3ede2;
    --inkt-zacht: #bdb3a3;
    --uit: #3b362f;
    --lijn: #302b25;
    --lijn-sterk: #8a8170;
    --espresso: #2b221b;
    --op-espresso-zacht: #d9cdb9;
    --espresso-uit: #6a5949;
    --donker: #0e0d0b;
    --op-donker: #f5efe4;
    --op-donker-zacht: #dcd6bd;
    --oranje: #f5a01f;
    --oranje-diep: #ffb446;
    --op-oranje: #221c17;
    --focus: #f5a01f;
    --focus-donker: #f5a01f;
    --schaduw-zacht: 0 1px 2px rgba(0,0,0,0.4), 0 14px 32px -14px rgba(0,0,0,0.6);
  }
}
:root[data-theme="donker"] {
  color-scheme: dark;
  --grond: #161411;
  --vlak: #201d19;
  --inkt: #f3ede2;
  --inkt-zacht: #bdb3a3;
  --uit: #3b362f;
  --lijn: #302b25;
  --lijn-sterk: #8a8170;
  --espresso: #2b221b;
  --op-espresso-zacht: #d9cdb9;
  --espresso-uit: #6a5949;
  --donker: #0e0d0b;
  --op-donker: #f5efe4;
  --op-donker-zacht: #dcd6bd;
  --oranje: #f5a01f;
  --oranje-diep: #ffb446;
  --op-oranje: #221c17;
  --focus: #f5a01f;
  --focus-donker: #f5a01f;
  --schaduw-zacht: 0 1px 2px rgba(0,0,0,0.4), 0 14px 32px -14px rgba(0,0,0,0.6);
}
:root[data-theme="licht"] { color-scheme: light; }

/* ---------- maten, hoeken, duur en lettertypen ---------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-pil: 999px;
  --duur-kort: 180ms;
  --duur-adem: 700ms;
  --duur-val: 900ms;
  --duur-onthul: 1100ms;
  --duur-beeld: 1200ms;
  --font-kop: "Gloock", "Gloock terugval", "Iowan Old Style", Georgia, serif;
  --font-tekst: "Schibsted Grotesk", "Schibsted Grotesk terugval", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- basis ---------- */
html {
  background: var(--grond);
  color: var(--inkt);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body { margin: 0; font-family: var(--font-tekst); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }