/* ============================================================================
   247antwoord.nl — fundament-stylesheet (fase 7: design-pariteit)
   ----------------------------------------------------------------------------
   Bevat UITSLUITEND fonts (self-hosted, metric-gematchte fallbacks) en de
   design-tokens. Geen resets en geen componentregels: de pagina's dragen hun
   volledige opmaak inline vanuit de Claude-Design-bron (design-export/), en
   een globale reset (bv. box-sizing) zou elke ontwerpmaat verschuiven.
   Laden met cachebuster: /static/site.css?v=YYYYMMDD.
   ========================================================================== */

/* ---- Fonts (variable, font-display optional: LCP-doel ≤ 1,7 s — mist een
   trage eerste load het 100ms-venster, dan blijft de gematchte fallback staan;
   met de preloads + Cloudflare halen normale bezoeken de webfont gewoon) ---- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
  src: url('/static/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
  src: url('/static/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/static/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/static/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metrics-gematchte fallbacks: zelfde tekstbreedte als de webfont, dus een
   eventuele wissel geeft geen grotere (= nieuwe, latere) LCP-entry en CLS ~0 —
   en blijft de fallback staan (optional, traag netwerk), dan oogt hij vrijwel
   gelijk. size-adjust empirisch gemeten (headless, breedteverhouding webfont/
   Arial, 04-08-2026: Schibsted 104,20% · Instrument Sans 103,17%); verticaal is
   overal met expliciete line-heights vastgelegd, dus alleen de breedte telt. */
@font-face {
  font-family: 'Schibsted Grotesk-fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 104.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Sans-fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 103.17%;
  line-gap-override: 0%;
}

/* ---- Design-tokens (uit het goedgekeurde ontwerp, accent #6366F1) -------- */
:root {
  color-scheme: light;

  /* accent */
  --accent: #6366F1;
  --accent-hover: #4F46E5;
  --accent-diep: #4338CA;
  --accent-zacht: #EEF2FF;   /* tegel-/chipachtergrond */
  --accent-rand: #C7D2FE;
  --accent-licht: #E0E7FF;

  /* tekst */
  --ink: #171A2B;            /* koppen + donkere secties/banner-achtergrond */
  --ink-2: #333A54;
  --tekst: #464C66;          /* bodytekst */
  --gedempt: #666D8F;
  --gedempt-2: #9AA0B8;

  /* vlakken en randen */
  --bg: #F6F7FD;             /* paginavlak; ook <meta name="theme-color"> */
  --bg-verloop: #FAFBFE;
  --kaart-bg: #FFFFFF;
  --rand: #ECEEF6;
  --rand-2: #DCDFEE;

  /* status */
  --ok: #1E9E64;
  --ok-diep: #157A4D;
  --ok-bg: #E9F7F0;
  --fout: #C2452D;
  --fout-bg: #FBEFEC;

  /* typografie */
  --font-kop: 'Schibsted Grotesk', 'Schibsted Grotesk-fallback', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Instrument Sans-fallback', 'Segoe UI', system-ui, sans-serif;

  /* maatvoering */
  --radius: 14px;
  --radius-groot: 22px;
  --schaduw: 0 8px 30px rgba(23, 26, 43, 0.07);
  --schaduw-zweef: 0 14px 40px rgba(99, 102, 241, 0.16);
  --container: 1120px;
}

/* ---- Basis --------------------------------------------------------------- */