/* SlimPensioen design system — tokenlaag, opgehaald uit Claude Design-project
   7a518a42-c507-4058-8ce8-b6bf0564b4d6 op 1 sep 2026.

   Eén verschil met het origineel: de @font-face-regels wijzen naar de woff2-bestanden in
   assets/fonts/ in plaats van naar de otf/ttf van het designproject. Die woff2-bestanden
   zijn ooit overgenomen uit de proof of concept van 12 augustus, die sindsdien is verwijderd;
   ze zijn byte-identiek. De merklaag is ongewijzigd; dit scheelt elf binaire downloads. */

/* Bijgewerkt 13 sep 2026 (DS-ronde), tokenlaag. Deze vier werken meteen — tokens vragen
   geen hercompilatie, componenten wel:
     --nw-800 (#796B58)        donkerste warme trede, merkbesluit. --nw-700 haalt op
                               --opp-papier 4,00:1 en de rapportcomponenten zetten hun labels
                               er wél op; --nw-700 is tegelijk --pot-bv, dus de trede kon niet
                               schuiven zonder de BV-pot te verkleuren. Nu 5,05:1.
     --tekst-papier-tertiair   leest --nw-800; gebruik dit op papier en niet --tekst-tertiair,
                               dat koel is op een warm vel.
     --opp-sluier              de sluier achter een dialoog, in de kleur van de schaduwfamilie.
     --tekst-bedrag-negatief   verwijderd. Niets las hem en hij droeg dezelfde waarde als
                               --tekst-bedrag, dus hij beloofde een onderscheid dat er niet is.
   En een noot die vervalt: --tekst-tertiair mocht sinds 7 sep 2026 niet op --opp-gedempt
   staan (4,32:1). Met het verschoven --nc-700 is dat 4,78:1, dus die regel geldt niet meer. */

/* Bijgewerkt 13 sep 2026 (tweede beurt): --nc-700 van #627678 naar #5B6F72. Dat is een
   merkbesluit en het raakt precies drie tokens, want --nc-700 heeft geen andere afnemer —
   nul treffers in de bundel, nul in het harnas. Aanleiding: op het donkerder canvas van de
   kleurronde haalde tertiaire tekst 4,08 waar AA 4,50 vraagt; over zeventien schermen stond
   1.994 tekens tussen 4,08 en 4,45. Nu 4,52 op het canvas tot 5,30 op een kaart.
   LET OP: 4,52 op het canvas is maar 0,02 marge. Het canvas staat vast op --nc-200; wordt
   dat ooit donkerder, dan moet deze waarde opnieuw worden bepaald. */

/* Bijgewerkt 13 sep 2026 (kleurronde, richting 1 + 2). Zeven waarden in de semantieklaag:
   vijf uit de kleurronde, en twee die hier achterliepen op het designproject — --tekst-zwak
   en --tekst-bedrag-nul stonden sinds 7 sep 2026 daar al op --nc-700 maar in dit afschrift
   nog op --nc-600. Controleer bij een volgende sync of dit bestand werkelijk meekomt; het
   liep zes dagen uiteen zonder dat iets het meldde. */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-700.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("assets/fonts/SourceSans3-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("assets/fonts/SourceSans3-Italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

/* ---------------------------------------------------------------- kleur */
:root{
  --merk-950:#00171B; --merk-900:#00282E; --merk-800:#06393E; --merk-700:#0A4B4F;
  --merk-600:#116A70; --merk-500:#1C8D92; --merk-400:#43A9AD; --merk-300:#7BCBC8;
  --merk-200:#C6E8E0; --merk-100:#E7F5F1; --merk-50:#F4FAF8;

  --nc-950:#112326; --nc-900:#223639; --nc-800:#415558; --nc-700:#5B6F72;
  --nc-600:#829597; --nc-500:#A4B4B6; --nc-400:#C8D1D2; --nc-300:#DEE4E4;
  --nc-200:#E8EEEE; --nc-100:#F0F4F4; --nc-50:#F7FAFA; --nc-0:#FFFFFF;

  --nw-800:#796B58; --nw-700:#8B7B66; --nw-600:#A4947F; --nw-500:#C8BDA9; --nw-300:#E5DED1;
  --nw-200:#F1EBE2; --nw-100:#FBF6EC; --nw-50:#FEFCF8;

  --succes-700:#17795C; --succes-500:#23A36F; --succes-300:#78D3AA; --succes-100:#E0F6EB;
  --warning-700:#996515; --warning-500:#D39822; --warning-300:#EBC97A; --warning-100:#FBF2DE;
  --error-700:#A73D57;  --error-500:#DA5F7D;  --error-300:#F0A6B8;  --error-100:#FBE7ED;
  --info-700:#2E6796;   --info-500:#4F9FD2;   --info-300:#A7D2EC;   --info-100:#E8F5FC;
  /* Accent: de enige kleur zonder betekenis (22 sep 2026); keuze en metingen in tokens/kleur.css van het designproject. */
  --accent-500:#7C3F2C; --accent-300:#E2947C; --accent-100:#FFDFD5;
}

/* ---------------------------------------------------------------- typografie */
:root{
  --font-merk:"Satoshi","Plus Jakarta Sans",system-ui,sans-serif;
  --font-ui:"Inter",system-ui,-apple-system,sans-serif;
  --font-rapport:"Source Sans 3","Source Sans Pro",Georgia,serif;

  --ui-11:11px; --ui-12:12px; --ui-13:13px; --ui-14:14px; --ui-16:16px; --ui-18:18px; --ui-20:20px;
  --merk-22:22px; --merk-26:26px; --merk-32:32px; --merk-40:40px; --merk-56:56px;
  --rap-12:12px; --rap-14:14px; --rap-16:16px; --rap-19:19px;

  --regel-krap:1.15; --regel-ui:1.35; --regel-tekst:1.5; --regel-rapport:1.62;
  --gewicht-normaal:400; --gewicht-medium:500; --gewicht-semi:600; --gewicht-bold:700;
  --letter-kop:-0.02em; --letter-ui:0em; --letter-klein:0.01em; --letter-label:0.06em;
  --zekerheid-1:1; --zekerheid-2:0.72; --zekerheid-3:0.48;
}

/* ---------------------------------------------------------------- ruimte */
:root{
  --ruimte-1:2px;  --ruimte-2:4px;  --ruimte-3:6px;  --ruimte-4:8px;
  --ruimte-5:12px; --ruimte-6:16px; --ruimte-7:20px; --ruimte-8:24px;
  --ruimte-9:32px; --ruimte-10:40px; --ruimte-11:56px; --ruimte-12:72px;

  --dichtheid-rij:26px;
  --dichtheid-rij-ruim:34px;
  --paneel-padding:var(--ruimte-6);
  --kaart-padding:var(--ruimte-6);
  --rapport-kolom:74ch;
  --raster-kolom:4px;
}

/* ---------------------------------------------------------------- vorm */
:root{
  --vorm-0:0px; --vorm-xs:3px; --vorm-s:5px; --vorm-m:8px; --vorm-l:12px; --vorm-xl:18px;
  --vorm-capsule:999px;
  --rand-dun:1px; --rand-dik:1.5px; --capsule-verhouding:0.172;
}

/* ---------------------------------------------------------------- elevatie */
:root{
  --schaduw-tint:0,40,46;
  --schaduw-0:none;
  --schaduw-1:0 1px 2px rgba(0,40,46,.06), 0 0 0 1px rgba(0,40,46,.04);
  --schaduw-2:0 1px 3px rgba(0,40,46,.07), 0 4px 12px -2px rgba(0,40,46,.06);
  --schaduw-3:0 2px 6px rgba(0,40,46,.08), 0 12px 28px -6px rgba(0,40,46,.10);
  --schaduw-4:0 24px 60px -12px rgba(0,40,46,.18);
  --schaduw-binnen:inset 0 1px 0 rgba(255,255,255,.65);
  --schaduw-sticky:6px 0 12px -8px rgba(0,40,46,.16);
  --schaduw-sticky-kop:0 6px 12px -8px rgba(0,40,46,.16);
  --ring-focus:0 0 0 3px rgba(28,141,146,.28);
  --ring-fout:0 0 0 3px rgba(218,95,125,.24);
}

/* ---------------------------------------------------------------- beweging */
:root{
  --duur-direct:0ms; --duur-snel:90ms; --duur-basis:140ms; --duur-traag:220ms;
  --soepel:cubic-bezier(.2,0,.4,1);
  --soepel-in:cubic-bezier(.4,0,1,1);
  --overgang-kleur:color var(--duur-snel) var(--soepel),background-color var(--duur-snel) var(--soepel),border-color var(--duur-snel) var(--soepel);
  --overgang-vlak:opacity var(--duur-basis) var(--soepel),transform var(--duur-basis) var(--soepel);
}
@media (prefers-reduced-motion:reduce){:root{--duur-snel:0ms;--duur-basis:0ms;--duur-traag:0ms}}

/* ---------------------------------------------------------------- semantiek */
:root{
  --tekst-primair:var(--nc-950); --tekst-secundair:var(--nc-800); --tekst-tertiair:var(--nc-700);
  --tekst-zwak:var(--nc-700); --tekst-merk:var(--merk-900); --tekst-op-merk:var(--merk-50);
  --tekst-op-donker:var(--nc-0); --tekst-link:var(--merk-600); --tekst-link-hover:var(--merk-700);
  --tekst-uit:var(--nc-500);
  --tekst-bedrag:var(--nc-950); --tekst-bedrag-nul:var(--nc-700);
  --tekst-papier-tertiair:var(--nw-800);

  --opp-canvas:var(--nc-50); --opp-kaart:var(--nc-0); --opp-gedempt:var(--nc-100);
  --opp-actief:var(--merk-100); --opp-merk-zacht:var(--merk-50); --opp-merk:var(--merk-500);
  --opp-merk-diep:var(--merk-900); --opp-omgekeerd:var(--nc-950);
  --opp-papier:var(--nw-50); --opp-papier-gedempt:var(--nw-100); --opp-papier-rand:var(--nw-300);
  --opp-rij-zebra:var(--nc-50); --opp-rij-hover:var(--merk-50);
  --opp-sluier:rgba(0,40,46,.40);

  --rand-subtiel:var(--nc-300); --rand-standaard:var(--nc-300); --rand-sterk:var(--nc-400);
  --rand-merk:var(--merk-400); --rand-focus:var(--merk-500); --rand-fout:var(--error-500);

  --pot-box1:var(--merk-700);  --pot-box1-zacht:var(--merk-200); --pot-box1-tekst:var(--merk-900);
  --pot-box3:var(--merk-500);  --pot-box3-zacht:#D8EDF2; --pot-box3-tekst:var(--merk-800);
  --pot-bv:var(--nw-700);      --pot-bv-zacht:var(--nw-300);     --pot-bv-tekst:#5C5142;

  --beweging-lijn:var(--nc-600); --beweging-kosten:var(--warning-700);

  --ruimte-benut:var(--merk-500); --ruimte-vrij:var(--merk-100);
  --ruimte-doorrol:var(--merk-300); --ruimte-verlopen:var(--nc-300);

  --signaal-succes:var(--succes-700); --signaal-succes-vlak:var(--succes-100);
  --signaal-let-op:var(--warning-700); --signaal-let-op-vlak:var(--warning-100);
  --signaal-fout:var(--error-700); --signaal-fout-vlak:var(--error-100);
  --signaal-info:var(--info-700); --signaal-info-vlak:var(--info-100);

  --accent:var(--accent-500); --accent-zacht:var(--accent-300); --accent-vlak:var(--accent-100);

  --knop-primair:var(--merk-600); --knop-primair-hover:var(--merk-700); --knop-primair-actief:var(--merk-800);
  --knop-secundair-rand:var(--nc-300); --knop-hover-vlak:var(--nc-100); --knop-actief-vlak:var(--nc-200);
  --veld-vlak:var(--nc-0); --veld-rand:var(--nc-400); --veld-rand-hover:var(--nc-500);
  --veld-uit-vlak:var(--nc-100);
}

/* ---------------------------------------------------------------- basis */
body{margin:0;background:var(--opp-canvas);color:var(--tekst-primair);font-family:var(--font-ui);font-size:var(--ui-14);line-height:var(--regel-ui);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv05" 1}
a{color:var(--tekst-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--tekst-link) 35%,transparent);transition:var(--overgang-kleur)}
a:hover{color:var(--tekst-link-hover);border-bottom-color:var(--tekst-link-hover)}
h1,h2,h3{font-family:var(--font-merk);font-weight:var(--gewicht-bold);letter-spacing:var(--letter-kop);line-height:var(--regel-krap);color:var(--tekst-merk);margin:0}
h1{font-size:var(--merk-40)}h2{font-size:var(--merk-32)}h3{font-size:var(--merk-22)}
h4,h5{font-family:var(--font-ui);font-weight:var(--gewicht-semi);font-size:var(--ui-16);line-height:var(--regel-ui);margin:0;color:var(--tekst-primair)}
.sp-cijfer{font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:0}
.sp-zeker-1{opacity:var(--zekerheid-1)}.sp-zeker-2{opacity:var(--zekerheid-2)}.sp-zeker-3{opacity:var(--zekerheid-3)}
.sp-label{font-size:var(--ui-11);font-weight:var(--gewicht-semi);letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--tekst-secundair)}
/* Zebra in een bijlageblok: elke oneven rij een tint. Alleen voor directe kinderen. */
.sp-zebra>*:nth-child(odd){background:var(--opp-rij-zebra)}
:focus-visible{outline:2px solid var(--rand-focus);outline-offset:1px}