/*
 * DE HUISSTIJL VAN 28-08-2026 — HET STIJLFUNDAMENT VOOR DE OVERIGE SITEPAGINA'S.
 * Wens 103, mijlpaal 1. Vastgesteld: navy #0b2349, groen #00b45c, Poppins voor
 * koppen — precies de stijl die app/index.html en app/site/voorpagina.css al
 * dragen.
 *
 * WAAROM DIT EEN EIGEN BESTAND IS EN NIET EEN WIJZIGING IN APP/TOKENS.CSS.
 * De sitepagina's kleuren via de --tf-*-tokens uit app/tokens.css, en dat blad
 * is GEDEELD MET DE OEFENAPP (app/oefenen/ laadt het ook). De kaart van wens
 * 103 verbiedt met zoveel woorden om tokens.css naar de nieuwe kleuren om te
 * zetten: dat zou de oefenapp er ongevraagd bij verven, en dat is een besluit
 * van de eigenaar en niet van de bouwer (zie de niet_doelen en stopcriteria op
 * de kaart). In plaats daarvan doet dit bestand wat app/site/voorpagina.css al
 * voor de voorpagina deed: het laadt NA de bestaande stijlbladen en herdefinieert
 * dezelfde custom properties, zodat élke klasse in tokens.css/site.css/maten.css
 * die al met --tf-ink, --tf-accent enzovoort werkt, automatisch in de nieuwe
 * kleuren komt te staan — zonder dat er ergens een tweede kopie van diezelfde
 * regels ontstaat.
 *
 * WIE DIT LAADT. Alleen pagina's die voor de nieuwe huisstijl zijn omgezet.
 * Vandaag is dat alleen app/prijzen.html (mijlpaal 1, de proefpagina); de andere
 * sitepagina's (voorrang, klantenservice, de kleine lettertjes, de gemaakte
 * pagina's) laden dit bestand nog niet en blijven dus gewoon in de oude stijl
 * tot mijlpalen 2 en 3 van wens 103 ze omzetten. Een pagina omzetten is dus:
 * <link rel="stylesheet" href="/site/huisstijl.css"> toevoegen NA site.css.
 *
 * LICHT EN DONKER, PRECIES ZOALS DE BESTAANDE BESTANDEN DAT DOEN. tokens.css en
 * voorpagina.css zetten de lichte waarden in :root en de donkere onder
 * [data-theme="dark"] (app/site/site.js zet dat kenmerk op basis van de
 * systeemstand van de bezoeker). Dit bestand volgt dezelfde opzet: elke kleur
 * hieronder staat twee keer.
 *
 * DE KOPBALK ALS HERBRUIKBARE BOUWSTEEN. De kaart van wens 103 signaleert dat
 * de kopbalk op veertien plekken staat overgetypt en dat dat precies is hoe er
 * straks één achterblijft met het oude logo. De klassen `.site-merk*` hieronder
 * horen bij het merkblok dat vanaf nu bovenaan elke omgezette pagina komt te
 * staan; het html-blok zelf staat als kopieerbare bouwsteen — met een
 * commentaar erboven dat dat met zoveel woorden zegt — in app/prijzen.html.
 * Mijlpaal 2 kopieert dat blok woordelijk naar de volgende pagina's; het is
 * met opzet GEEN javascript-bouwsteen, want de pagina moet zonder scripts
 * leesbaar blijven (app/site/WERKWIJZE.md, afspraak 1).
 */

/* ── de tokens, overschreven naar de huisstijl van 28-08-2026 ────────────── */

:root {
  /* grondtonen */
  --tf-canvas: #ffffff;
  --tf-bg: #ffffff;
  --tf-surface: #fbfcfe;
  --tf-surface-sunken: #eef2f8;
  --tf-surface-warm: #eef2f8;
  --tf-track: #eef2f8;

  /* inkt */
  --tf-ink: #0b2349;
  --tf-ink-soft: #44557a;
  --tf-muted: #636e88;
  --tf-faint: #93a0bd;
  --tf-line: #e4eaf3;
  --tf-line-soft: #eef2f8;
  --tf-outline: #d7deec;

  /* accent: groen, alleen voor de belangrijkste knop en de accenten */
  --tf-accent: #00b45c;
  /*
   * HET GROEN WAAR WITTE LETTERS OP STAAN, en dat is een andere waarde dan
   * het groen waarmee je een balk of een stip vult. Wit op #00b45c meet 2,73
   * en de ondergrens voor tekst is 4,5; op #00803f is het 5,0.
   *
   * De merkkleur verandert dus NIET. Elke balk, stip, rand en het logo blijven
   * #00b45c; alleen het VLAK onder witte letters wordt donkerder. Zie ook
   * de afspraak een-kleur-om-mee-te-schrijven-is-niet-dezelfde-als-een-kleur-
   * om-mee-te-vullen: dit is dezelfde scheiding, nu andersom.
   */
  --tf-accent-vlak: #00803f;
  --tf-accent-strong: #00803f;
  --tf-accent-line: #bfe8d2;
  --tf-accent-tint: #e6f7ee;
  --tf-accent-tint-soft: #f1fbf6;
  --tf-accent-ink: #ffffff;

  /* status, in dezelfde familie. De -ink-waarden zijn om MEE TE SCHRIJVEN,
     de andere om mee te vullen; zie de aantekening hierboven. */
  --tf-good: #00b45c;
  --tf-good-ink: #00803f;
  --tf-good-tint: #e6f7ee;
  --tf-bad: #e04f4f;
  --tf-bad-ink: #c03a3a;
  --tf-bad-tint: #fdf0f0;

  /* De vulling waar letters op staan; dezelfde scheiding als bij het accent
     hierboven. Wit op #00b45c meet 2,7 en op #00803f 5,0. Zie app/tokens.css. */
  --tf-good-vlak: #00803f;
  --tf-bad-vlak: #b83636;

  /* Het woordmerk houdt zijn kleur in beide standen; zie app/tokens.css. */
  --tf-merk-vlak: #00b45c;
  --tf-merk-inkt: #0b2349;

  /* koppen in Poppins; lopende tekst blijft Spline Sans (--tf-font-ui, ongewijzigd) */
  --tf-font-display: "Poppins", "Bricolage Grotesque", "Segoe UI Semibold", ui-sans-serif, system-ui, sans-serif;

  /*
   * ALTIJD DONKER, IN BEIDE STANDEN — dezelfde reden als --tf-donker-vlak in
   * app/tokens.css en --vp-vlak-donker in voorpagina.css: de slotband
   * (.tf-cta-band) draagt de huisstijlkleur als vlak en niet als tekst op een
   * achtergrond die met de stand meeschuift. Daarom met opzet maar ÉÉN keer
   * gedefinieerd, hieronder niet herhaald onder [data-theme="dark"].
   */
  --site-vlak-donker: #0b2349;
  --site-vlak-donker-zacht: #b7c4dc;

  /*
   * HET ALTIJD-DONKERE VLAK IS NAVY GEWORDEN — 31-08-2026.
   *
   * app/tokens.css kent deze vijf al: een vlak dat in BEIDE standen donker is,
   * met de inkt die daarbij hoort. Ze stonden er nog in het warme bijna-zwart
   * van de oude huisstijl, terwijl elke donkere kaart in de app sinds
   * 30-08-2026 navy is (de sluier op de hoofdkaart, de fotoband op de
   * examenpagina). Daardoor lag er onder elk beeld een warm vlak dat je zag
   * zodra het beeld nog niet geladen was, en werd elke donkere kaart zonder
   * beeld grauw in plaats van navy.
   *
   * Ze worden hieronder MET OPZET niet herhaald onder [data-theme="dark"]:
   * dat is precies wat ze zijn, kleuren die niet meeschakelen.
   */
  --tf-donker-vlak: #0b2349;
  --tf-donker-lijn: #26335a;
  --tf-donker-tekst: #fdfbf6;
  --tf-donker-stil: #c6d3e8;
  --tf-donker-zacht: #93a0bd;
  --tf-donker-accent: #7fe3ad;
}

[data-theme="dark"] {
  --tf-canvas: #0c1526;
  --tf-bg: #0c1526;
  --tf-surface: #101b30;
  --tf-surface-sunken: #16223f;
  --tf-surface-warm: #16223f;
  --tf-track: #16223f;

  --tf-ink: #e9edf8;
  --tf-ink-soft: #a9b6d4;
  --tf-muted: #8492b3;
  --tf-faint: #62709a;
  --tf-line: #26335a;
  --tf-line-soft: #1c2846;
  --tf-outline: #33406b;

  --tf-accent: #22c775;
  /* In de donkere stand staat er DONKERE inkt op het groene vlak, en dat haalt
     de norm ruim. Daar hoeft het vlak dus niet donkerder; het is hier gelijk
     aan de merkkleur. */
  --tf-accent-vlak: #22c775;
  --tf-accent-strong: #7fe3ad;
  --tf-accent-line: #2c6b4a;
  --tf-accent-tint: #123a28;
  --tf-accent-tint-soft: #0e2f21;
  --tf-accent-ink: #06210f;

  --tf-good: #22c775;
  --tf-good-ink: #6fe0a6;
  --tf-good-tint: #123a28;
  --tf-bad: #e2827f;
  --tf-bad-ink: #f0a7a4;
  --tf-bad-tint: #2a1a1a;

  /* In het donker is de vulling licht en staat er donkere inkt op
     (--tf-accent-ink, hierboven #06210f). */
  --tf-good-vlak: #22c775;
  --tf-bad-vlak: #e2827f;
}

/* ── de kopbalk: het merkblok (herbruikbare bouwsteen, zie uitleg bovenaan) ── */

.site-merk {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--tf-ink);
}

.site-merk-logo {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}

.site-merk-woordmerk {
  font-family: var(--tf-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--tf-ink);
}

.site-merk-groen {
  color: var(--tf-accent-strong);
}

/* ── afstemming per onderdeel: waar een token-omzetting niet genoeg is ──────
 *
 * De meeste klassen in site.css en tokens.css lezen alleen de tokens hierboven
 * en veranderen dus vanzelf mee. Deze paar onderdelen dragen een eigen kleur
 * die niet uit een enkel token volgt, of moeten er bewust anders uitzien dan
 * de standaardregel in site.css toepast.
 */

/*
 * DE "MEEST GEKOZEN"-KAART, ZOALS OP DE VOORPAGINA. site.css geeft dit pakket
 * een gevulde accenttint; de voorpagina laat het kaartvlak wit en laat alleen
 * de groene rand en een zachte groene gloed het pakket laten opvallen (zie
 * voorpagina.css, .tf-plan-featured). Dezelfde aanpak hier, voor dezelfde
 * reden: bij vier pakketten naast elkaar is een gekleurd vlak drukker dan een
 * rand, en de eigenaar heeft die vorm al goedgekeurd.
 */
.tf-plan-featured {
  border: 2px solid var(--tf-accent);
  background: var(--tf-surface);
  box-shadow: 0 10px 26px rgba(0, 180, 92, 0.16);
}

/*
 * DE KASSABOX. Groen is in deze huisstijl gereserveerd voor de belangrijkste
 * knop en de accenten, niet voor een heel informatievlak. site.css kleurt deze
 * doos met de accenttint; hier krijgt hij dezelfde rustige navy-tint als een
 * gewone kaart, zodat het groen zijn betekenis houdt.
 */
.site-kassa {
  border-color: var(--tf-line);
  background: var(--tf-surface-sunken);
}

/*
 * HET MERKJE "NOG TE MAKEN". site.css geeft het een gestippelde rand; de
 * voorpagina laat het als een effen tinttegel lezen (zie voorpagina.css,
 * .site-status). Dat leest rustiger tussen de vinkjes van een pakket.
 */
.site-status {
  border-style: solid;
  border-color: transparent;
  background: var(--tf-surface-sunken);
  color: var(--tf-ink-soft);
}

/*
 * DE SLOTBAND ONDERAAN. site.css vult hem met de accentkleur (bij ons dus
 * groen), maar dat vlak is te groot voor "groen is alleen voor de knop". De
 * voorpagina lost dit op met een altijd-donker navyvlak en een groene knop
 * erop (zie voorpagina.css, .tf-cta-band en --vp-vlak-donker); dezelfde opzet
 * hier, met --site-vlak-donker hierboven.
 */
.tf-cta-band {
  background: var(--site-vlak-donker);
}

.tf-cta-band h2 {
  color: #ffffff;
}

.tf-cta-band p {
  color: var(--site-vlak-donker-zacht);
  opacity: 1;
}

/*
 * DE DAGPAS-STROOK (ownerbesluit 28-08-2026, tweede proefronde). De Dagpas is
 * geen vierde kolom meer: "doe alsof we 3 pakketten hebben, en zet die dagpas
 * er nog ergens klein bij." Eén rustige regel onder het rooster, in het
 * verzonken vlak, zodat de telefoon met Sprint opent en de Examenmaand de
 * keuze blijft waar mensen op uitkomen.
 */
.site-dagpas {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface-sunken);
}

.site-dagpas p {
  margin: 0;
  font-size: 12.5px;
  color: var(--tf-ink-soft);
}

.site-dagpas b {
  color: var(--tf-ink);
}

.site-dagpas a {
  color: var(--tf-ink);
  white-space: nowrap;
}