/*
 * Palet — studioname: zwart, wit, beige, blauw.
 *
 *   zwart   #0F0F0F   donkere vlakken: hero, probleem, voorbeelden, fases
 *   wit     #FFFFFF   kaarten, pakketten, formulieren
 *   beige   #F6F5F0   lichte secties (gemeten op laplagecasanis.com)
 *   blauw   #0F2858   diepblauw: footer en de dragende accenten
 *           #0056A7   helderblauw: het accent op licht
 *           #4E9BE8   lichtblauw: hetzelfde accent op zwart
 *
 * Meer kleuren zitten er niet in. Het oranje van 187n is uit site.css
 * verwijderd; wat hier staat zijn de tokens en de handvol oppervlakken die in
 * site.css een vaste kleur hadden in plaats van een token.
 */

:root {
  /* zwart — de donkere vlakken */
  --black: #080808;
  --ink-dark: #0f0f0f;
  --ink-dark-2: #080808;

  /* blauw — de footer is het enige grote blauwe vlak */
  --footer: #0f2858;

  /* wit en beige */
  --paper: #ffffff;
  --warm: #f6f5f0;

  /* tekst op zwart */
  --on-dark: #f6f5f0;
  --on-dark-mut: #9d9a93;
  --on-dark-dim: #6e6b65;

  /* tekst op licht */
  --on-light: #111111;
  --on-light-mut: #5f5c55;

  /* lijnen */
  --line-dark: #f6f5f01c;
  --line-dark-2: #f6f5f036;
  --line-light: #1111111a;
  --line-light-2: #1111112b;

  /* blauw als accent */
  --accent: #0056a7;
  --accent-soft: #2f7fd4;

  /* hero-veld: blauw verloop met een lichtere blauwe glans */
  --silk-1: #0f2858;
  --silk-2: #17376f;
  --silk-lo: 15, 40, 88;
  --silk-hi: 120, 170, 232;
}

/* Op zwart en op de blauwe footer is #0056A7 te donker; daar schuift het op. */
.section-dark,
.hero,
.closing,
.footer,
.nav,
.nd-panel,
.nav-mobile-panel,
.bk-card,
.cookie-root {
  --accent: #4e9be8;
  --accent-soft: #7db2ea;
}

/* ---------------------------------------------------------- oppervlakken -- */
/* Deze stonden in site.css met een vaste kleur in plaats van een token. */

.nav { background: #0f0f0fe0; }
.nd-panel:not(.is-light) { background: #0f0f0ff2; }
.chip-file, .chip-pill { background: #1a1a1a; }
.btn-light, .pill-solid, .nav.is-light .pill-solid, .bk-submit { color: #111111; background: #f6f5f0; }
.back-to-top:hover { color: #111111; }
.tier.featured { background: #fbfaf7; }
.legal-page { background: var(--warm); }
.field input::placeholder,
.bk-form .field textarea::placeholder { color: #8d8a83; }
.closing h2 .g1 { color: #57544e; }
.closing h2 .g2 { color: #918d86; }
.lt-head .htitle .mut,
.mc-faq h2 .mut,
.bk-h1 .mut { color: #6f6b64; }

/* hero-achtergrond: zwart verloop met dezelfde blauwe glans als het lijnenveld */
.hero-silk--static {
  background:
    radial-gradient(120% 90% at 50% 35%, #2e60a82e 0, #0000 55%),
    linear-gradient(165deg, #0b0b0b, #151515 48%, #0b0b0b);
}

.hero-silk-overlay {
  background:
    radial-gradient(100% 80% at 50% 40%, #0000001f 0, #00000047 100%),
    linear-gradient(#0000 70%, #08080840);
}

/* het slotblok kreeg bij 187n een oranje gloed; hier blauw */
.lp-close-bg .mc-orange-bg-shader {
  background:
    radial-gradient(60% 80% at 20% 0%, #0f285899 0%, #0f285800 60%),
    radial-gradient(50% 70% at 80% 100%, #0056a740 0%, #0056a700 60%);
}
/* ==========================================================================
   Typografie — huisstijl Casanis
   La Plage Casanis draait op OKCOK (display) + Montserrat (body). OKCOK is niet
   te licenseren voor dit project; Fraunces staat als display in studioname's
   design.md en ligt qua karakter het dichtst bij. Montserrat is letterlijk hun
   body-font. IBM Plex Mono voor de microlabels.
   Alle bestanden staan lokaal — geen verbinding met Google bij het laden.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-normal-300_700-1fba8b.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: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-normal-300_700-63f165.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexmono-normal-400-9994c1.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexmono-normal-400-d77319.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibmplexmono-normal-500-60d1ee.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibmplexmono-normal-500-8d0aea.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: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/montserrat-normal-300_700-de38a2.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: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/montserrat-normal-300_700-2f5adf.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;
}

:root {
  /* vervangt 187n's Newsreader + JetBrains Mono */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body { font-family: var(--sans); }

/* Fraunces is optisch groter en zwaarder dan Newsreader; de koppen krijgen
   daarom iets minder gewicht en strakkere tracking terug. */
h1, h2, h3, .htitle, .bk-h1, .legal-page h1, .prob-card h3 {
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

.htitle, .hero h1, .legal-page h1 { letter-spacing: -.028em; }
.closing h2 .g3 { letter-spacing: -.028em; }

/* De footer krijgt hetzelfde vlak als de hero: zwart met hetzelfde lijnenveld,
   zodat de pagina boven en onder hetzelfde opent en sluit. */
.footer { background: var(--ink-dark); }