/* ds-tokens.css — GEGENEREERD door design/system/tokens/bouw.py uit
   design/system/tokens/tokens.json. Verander dit bestand niet met de hand.

   Overgenomen uit docs/design-system/02-proposal.md, fase 2 van de consolidatie, 11 september 2026.

   - Een primitief draagt een waarde en heet naar zijn waarde. Hij komt buiten dit bestand niet voor.
   - Een semantisch token heet naar zijn betekenis en verwijst naar een primitief. Componenten gebruiken alleen deze.
   - Een componenttoken bestaat alleen waar een component werkelijk een eigen knop nodig heeft, en verwijst naar een semantisch token.
   - Kleur staat in OKLCH. De hexwaarde waar hij uit komt staat in de toelichting, zodat na te rekenen is dat er niets verschoven is.
*/

@layer tokens {
  :root {

    /* == De primitieven ==
       Een waarde en een naam voor die waarde. Buiten dit bestand komt er geen enkele voor. */

    /* Kleur */
    --ds-kleur-inkt-950: oklch(22.1% 0.032 249.4);  /* Hex #0F1C29. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-inkt-900: oklch(31.8% 0.084 256.4);  /* Hex #12325C. Modern Delft noemt hem `--diep`. De donkerste tekstkleur van Modern Delft. Draagt. */
    --ds-kleur-inkt-700: oklch(42.2% 0.067 255.3);  /* Hex #344F72. Modern Delft noemt hem `--tekst-zacht`. De lopende tekst. 7,68 op papier tegen. */
    --ds-kleur-inkt-500: oklch(51.4% 0.052 253.7);  /* Hex #526985. Modern Delft noemt hem `--tekst-stil`. De gedempte tekst en de rand van een. */
    --ds-kleur-inkt-200: oklch(75.4% 0.068 250.1);  /* Hex #8FB3D9. Modern Delft noemt hem `--wassing`. De gedempte tekst op een donkere grond. LET. */
    --ds-kleur-kobalt-500: oklch(42.6% 0.115 256.6);  /* Hex #1F4E8C. De merkkleur van Modern Delft, `--kobalt`. Dit is de enige nieuwe rol in de. */
    --ds-kleur-papier-000: oklch(97.0% 0.008 91.5);  /* Hex #F7F5EF. Modern Delft noemt hem `--papier`. De grond van elk schermoppervlak. Iets warmer. */
    --ds-kleur-papier-100: oklch(92.3% 0.019 248.0);  /* Hex #DCE7F2. Modern Delft noemt hem `--vlak`. Het getinte vlak. Duidelijk blauwer dan de oude. */
    --ds-kleur-papier-wit: oklch(100% 0 90);  /* Hex #FFFFFF. Modern Delft heeft twee lichte gronden waar het systeem er een had: papier voor. */
    --ds-kleur-papier-warm: oklch(90.7% 0.01 87.5);  /* Hex #E3E0D9. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-lijn-neutraal: oklch(89.9% 0.003 165.1);  /* Hex #DCDEDD. De haarlijn tussen twee blokken, `--lijn`, 10 voorkomens en alle tien als rand.. */
    --ds-kleur-lijn-oker: oklch(83.9% 0.045 77.2);  /* Hex #DBC7AA. De okeren haarlijn op een lichte grond, `--lijn-oker`, 3 voorkomens. Zelfde. */
    --ds-kleur-lijn-oker-op-diep: oklch(45.9% 0.038 75.9);  /* Hex #645540. Dezelfde okeren haarlijn op een donkere grond, `--lijn-oker-op-diep`, 2. */
    --ds-kleur-oker-700: oklch(51.36% 0.0955 69.4);  /* Hex #8A5C20. Modern Delft noemt hem `--oker-tekst` (de kleurlijst van de merkbron (commit. */
    --ds-kleur-oker-500: oklch(59.3% 0.11 69.2);  /* Hex #A8712A. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-oker-300: oklch(78.43% 0.1115 74.5);  /* Hex #E3AE63. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-oker-100: oklch(94.4% 0.016 73.7);  /* Hex #F3EBE1. Modern Delft noemt hem `--oker-vlak`: het vlak onder een zin waarvan wij de akte. */
    --ds-kleur-rood-600: oklch(51.5% 0.166 30.0);  /* Hex #B33426. Een trede donkerder dan de #C0392B die er tot 12 september 2026 stond, en de. */
    --ds-kleur-druk-inkt: oklch(20.6% 0.006 285.9);  /* Hex #17171A. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-700: oklch(35.7% 0.003 286.2);  /* Hex #3C3C3E. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-500: oklch(52.3% 0.006 106.6);  /* Hex #6A6A66. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-300: oklch(68.5% 0.006 106.6);  /* Hex #9A9A96. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-papier: oklch(99.3% 0.003 106.4);  /* Hex #FDFDFB. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-tint-12: oklch(91.2% 0.003 106.5);  /* Hex #E2E2E0. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-tint-08: oklch(94% 0.003 106.5);  /* Hex #EBEBE9. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-grijs45: oklch(48.1% 0.003 106.5);  /* Hex #5E5E5C. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-warm-tint: oklch(92.6% 0.012 84.6);  /* Hex #EAE6DE. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */
    --ds-kleur-druk-warm-rij: oklch(94.1% 0.01 81.8);  /* Hex #EFEBE4. Omgezet uit hex naar OKLCH en teruggerekend: de omzetting komt exact op dezelfde. */

    /* Typografie */
    --ds-letter-display: "Archivo", system-ui, sans-serif;  /* De displayletter van Modern Delft, sinds 12 september 2026. Was Libre Caslon Display met 5.092. */
    --ds-letter-tekst: "Atkinson Hyperlegible", system-ui, sans-serif;  /* 32.031 elementen op 53 routes. Gekozen omdat de ontvanger 70 tot 85 jaar is (tokens.css:129);. */
    --ds-letter-mono: "IBM Plex Mono", ui-monospace, monospace;  /* 1.880 elementen op 49 routes, en ook de vectorvorm van de gedrukte rasterband. Ongewijzigd. */
    --ds-gewicht-normaal: 400;  /* 34.583 elementen. De displayletter staat altijd op 400. */
    --ds-gewicht-vet: 700;  /* Een echte vette snede bestaat alleen voor letter.tekst (AtkinsonHyperlegible-Bold.woff2,. */
    --ds-gewicht-half: 600;  /* De halfvette stand van Archivo. Modern Delft zet hem precies een keer, op de navigatielink in. */
    --ds-gewicht-zwaar: 800;  /* De zwaarste stand van Archivo, en in Modern Delft de gewone stand van elke kop en elk etiket:. */
    --ds-korps-11: 0.6875rem;  /* 11px. De negen treden zijn de gemeten maten zelf en geen nieuwe trap. Samen dragen ze 99.647. */
    --ds-korps-12: 0.75rem;  /* 12px. Het mono-etiket en de kicker. Verving korps.11-5 (11,5px), die nergens in Modern Delft. */
    --ds-korps-14: 0.875rem;  /* 14px. Het bijschrift. Verving korps.13; het verschil met die trede is een pixel. Gemeten in de. */
    --ds-korps-15: 0.9375rem;  /* 15px. De negen treden zijn de gemeten maten zelf en geen nieuwe trap. Samen dragen ze 99.647. */
    --ds-korps-16: 1rem;  /* 16px. De knoptekst, en de enige trede die precies op de wortelmaat ligt. Modern Delft zet hem. */
    --ds-korps-17: 1.0625rem;  /* 17px. De negen treden zijn de gemeten maten zelf en geen nieuwe trap. Samen dragen ze 99.647. */
    --ds-korps-19: 1.1875rem;  /* 19px. De sectiekop. Verving korps.21; twee pixels kleiner dan de trede die er stond. Gemeten. */
    --ds-korps-22: 1.375rem;  /* 22px. Het kleine displaygetal. Verving korps.21 aan de andere kant: een pixel groter. Gemeten. */
    --ds-korps-kaft: clamp(1.125rem, 2.2vw, 1.625rem);  /* Modern Delft noemt hem `--t-kaft` en schrijft hem als `clamp(18px, 2.2vw, 26px)`. 18px onder. */
    --ds-korps-titel-vloeiend: clamp(1.75rem, 3.2vw, 2.375rem);  /* Modern Delft noemt hem `--t-h2` en schrijft hem als `clamp(28px, 3.2vw, 38px)`. 28px onder 900. */
    --ds-korps-getal: clamp(2.25rem, 4vw, 3.25rem);  /* Modern Delft noemt hem `--t-getal` en schrijft hem als `clamp(36px, 4.0vw, 52px)`. 36px onder. */
    --ds-korps-hero: clamp(1.875rem, 5.2vw, 4.125rem);  /* Modern Delft noemt hem `--t-h1` en schrijft hem als `clamp(30px, 5.2vw, 66px)`. 30px onder 600. */
    --ds-korps-hero-lang: clamp(1.5rem, 3.4vw, 2.75rem);  /* Modern Delft noemt hem `--t-h1-lang` en schrijft hem als `clamp(24px, 3.4vw, 44px)`. 24px. */
    --ds-korps-groot: clamp(4rem, 7vw, 5.75rem);  /* Modern Delft noemt hem `--t-groot` en schrijft hem als `clamp(64px, 7.0vw, 92px)`. 64px onder. */
    --ds-regelhoogte-1-65: 1.65;  /* De lopende tekst en de kleine tekst. Ruimer dan de 1,55 die er stond, en dat hoort bij een. */
    --ds-regelhoogte-1-30: 1.3;  /* Het mono-etiket en de kicker. De meest gebruikte regelhoogte van Modern Delft: 7 voorkomens.. */
    --ds-regelhoogte-1-06: 1.06;  /* De kop van niveau 2. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026, met de. */
    --ds-regelhoogte-1-00: 1;  /* Het label van een bediening. Een knop, een veld en een navigatielink zetten hun tekst bij. */
    --ds-regelhoogte-0-98: 0.98;  /* De kop van niveau 1. Onder 1, want een hero van 66px met een regelhoogte van 1 valt uit. */
    --ds-regelhoogte-1-20: 1.2;  /* De h2 en de h3. 2.437 gewogen, 2,05 procent. Vangt 1,25 (386) en 1,15 (163). */
    --ds-regelhoogte-1-55: 1.55;  /* De regelhoogte van alle lopende tekst. 80.706 gewogen, 67,8 procent, de zwaarste verhouding. */
    --ds-spatiering--32: -0.032em;  /* De aantrekking van de kop van niveau 1. Modern Delft zet hem op `.h1`. Hoe groter de. */
    --ds-spatiering--30: -0.03em;  /* De aantrekking van een groot displaygetal. Modern Delft zet hem op `.telling b` en `.voortgang. */
    --ds-spatiering--22: -0.022em;  /* De aantrekking van de kop van niveau 2, op `.h2`. Gemeten in de merkbron (commit 3da4b242) op. */
    --ds-spatiering--10: -0.01em;  /* De aantrekking van de kop van niveau 3, op `.h3`. De laatste trede waar aantrekking nog iets. */
    --ds-spatiering-16: 0.16em;  /* De letterafstand van het kapitaaletiket in Modern Delft. Was 0,14em. Gemeten in de merkbron. */
    --ds-type-druk-1: 44pt;  /* Trede 1 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-2: 34pt;  /* Trede 2 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-3: 30pt;  /* Trede 3 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-4: 26pt;  /* Trede 4 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-5: 24pt;  /* Trede 5 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-6: 22pt;  /* Trede 6 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-7: 20pt;  /* Trede 7 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-8: 11pt;  /* Trede 8 van de drukladder. De gedrukte ladder zoals hij gemeten is, ongewijzigd. Besluit B11. */
    --ds-type-druk-fijn: 9pt;  /* De fijndruk in het binnenwerk. De fijne band in het binnenwerk draagt vandaag zes treden naast. */
    --ds-type-druk-fijn-klein: 7.5pt;  /* De kleinste drukmaat, voor een bronregel onder een scan. De fijne band in het binnenwerk. */
    --ds-korps-getal-strook: 1.875rem;  /* 30px. Het getal in de cijferstrook van een flowkaart. */
    --ds-korps-mono-klein: 0.6875rem;  /* 11px. Het kleinste korps in de cijferletter, voor een etiket op een omslag. */
    --ds-spatiering-18: 0.18em;  /* De wijde spatiering van een etiket in de cijferletter op een omslag. */
    --ds-korps-getal-klein: 1.375rem;  /* 22px. Een prijs in een regel, kleiner dan een telling die vrij op een scherm staat. */
    --ds-spatiering-4: 0.04em;  /* De lichte spatiering van het stapnummer in de cijferletter. Smaller dan spatiering.16 en. */

    /* Ruimte */
    --ds-ruimte-1: 0.25rem;  /* 4px. 4px. De kleinste tussenruimte. 6 voorkomens bij het merk. Gemeten in de merkbron (commit. */
    --ds-ruimte-2: 0.5rem;  /* 8px. 8px. 12 voorkomens, de op een na drukste maat van het merk. Gemeten in de merkbron. */
    --ds-ruimte-3: 0.75rem;  /* 12px. 12px. 12 voorkomens. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026. */
    --ds-ruimte-4: 0.875rem;  /* 14px. 14px. 10 voorkomens, en de ruimte boven en onder de inhoud van de kop op een breed. */
    --ds-ruimte-5: 1rem;  /* 16px. 16px. 9 voorkomens. Geen rol wijst hier vandaag naar; de trede blijft omdat het merk hem. */
    --ds-ruimte-6: 1.125rem;  /* 18px. 18px. De binnenruimte van een knop en een veld (`--bedien-ruimte`) en de afstand tussen. */
    --ds-ruimte-7: 1.5rem;  /* 24px. 24px. De afstand tussen twee blokken binnen een sectie op een smal scherm (`--blok`).. */
    --ds-ruimte-8: 1.75rem;  /* 28px. 28px. De kolomafstand op een smal scherm (`--kolomgat`). Was 64px op deze trede. Gemeten. */
    --ds-ruimte-9: 2rem;  /* 32px. 32px. De afstand tussen twee blokken op een breed scherm. Gemeten in de merkbron (commit. */
    --ds-ruimte-10: 2.5rem;  /* 40px. 40px. De binnenmaat van een vlak op een smal scherm (`--sectie-in`). Gemeten in de. */
    --ds-ruimte-11: 2.75rem;  /* 44px. 44px. De afstand tussen twee secties op een smal scherm (`--sectie`), en dezelfde maat. */
    --ds-ruimte-12: 4rem;  /* 64px. 64px. De binnenmaat van een vlak en de kolomafstand op een breed scherm. Gemeten in de. */
    --ds-ruimte-13: 6rem;  /* 96px. 96px. De afstand tussen twee secties op een breed scherm. De grootste maat van het merk. */
    --ds-ruimte-rand: clamp(1.25rem, 4vw, 3.5rem);  /* De zijmarge van de pagina, `--rand`: 20px op een telefoon tot 56px vanaf 1400px venster. Geen. */

    /* Straal */
    --ds-straal-4: 4px;  /* De hoek van een scan, een boekrug en een staaf. 6 voorkomens bij het merk. Verving straal.3;. */
    --ds-straal-10: 10px;  /* De hoek van een tegel en van beeld dat een vlak vult, `--r-s`. 7 voorkomens, de drukste straal. */
    --ds-straal-14: 14px;  /* De hoek van een knop en een veld, `--r-m`. 4 voorkomens, en alle vier op een bediening.. */
    --ds-straal-22: 22px;  /* De hoek van een groot vlak: de kwartierstaatwand, de parade, het okeren blok. `--r-l`, 3. */
    --ds-straal-pil: 999px;  /* De schakelaar rekent zijn ronding vandaag twee keer met de hand uit: 12px op een baan van 24. */

    /* Randdikte */
    --ds-randdikte-1: 1px;  /* 252 voorkomens op 11 routes, de gemeten randdikte in rust. */
    --ds-randdikte-2: 2px;  /* 120 voorkomens op 2 routes, en de gemeten dikte van alle zes bestaande focusregels. */

    /* Schaduw */
    --ds-schaduw-kaart: 0 1px 2px rgb(27 42 58 / 0.10), 0 8px 20px rgb(27 42 58 / 0.12);  /* Twee gemeten kaartschaduwen lopen alleen uiteen in hun tweede laag: 8px/20px op 0,12 (95. */
    --ds-schaduw-overlay: 0 12px 24px rgb(27 42 58 / 0.28);  /* De schaduw onder het uitklapmenu in de kop (kop.css:100), de enige diepere laag in de meting.. */
    --ds-schaduw-ring: inset 0 0 0 1px;  /* De inzetring die een gekozen tegel markeert. Drie vormen worden er een: oker op 1px (88. */
    --ds-schaduw-papier: 0 1px 0 rgb(18 50 92 / 0.14), 0 24px 60px -30px rgb(18 50 92 / 0.35);  /* Twee schaduwen als een paar: een haarscherpe lijn van een pixel eronder en een wijde, zachte. */

    /* Beweging */
    --ds-duur-140: 140ms;  /* De enige gemeten duur onder 200ms en de enige die in de bron als terugkoppeling is geschreven. */
    --ds-duur-200: 200ms;  /* De gewone overgang van kleur en dekking (publiek.css:500 en :524). Onder. */
    --ds-duur-900: 900ms;  /* De duur van een onthulling: een blok dat bij het scrollen in beeld komt. `--duur`. Was 600ms,. */
    --ds-duur-1600: 1600ms;  /* De duur waarin een haarlijn zichzelf trekt, `--lijn-duur`. De traagste beweging van het merk. */
    --ds-versoepeling-standaard: ease;  /* De curve die 39.218 van de 39.222 gemeten elementen dragen. Dat is wat de browser zonder. */
    --ds-versoepeling-lineair: linear;  /* Vier geschreven voorkomens, alle vier op voortgang en wachten. Voortgang mag niet versnellen. */
    --ds-versoepeling-onthul: cubic-bezier(0.16, 1, 0.3, 1);  /* De kromme van elke onthulling bij het merk, `--verloop`. 7 voorkomens, en alle zeven op een. */
    --ds-afstand-48: 3rem;  /* 48px. De afstand waarover een blok binnenkomt, `--afstand`. 48px op een breed scherm en 30px. */
    --ds-afstand-24: 1.5rem;  /* 24px. De kortere afstand waarover een TEGEL binnenkomt, naast de 48 en de 30 van een blok.. */
    --ds-afstand-30: 1.875rem;  /* 30px. Dezelfde afstand op een smal scherm. Een blok dat 48px omhoog komt op een telefoon duwt. */
    --ds-duur-90: 90ms;  /* De tussenpoos tussen twee blokken die na elkaar binnenkomen, `--stagger`. Gemeten in de. */

    /* Lagen */
    --ds-laag-1: 1;  /* Twee losse ophogingen in twee bladen die nooit samen laden, z-index 1 op site.css:1151 en. */
    --ds-laag-15: 15;  /* De plakkende kop en zijn uitklapmenu (kop.css:97 en :116). Gemeten en in de bron al als. */
    --ds-laag-20: 20;  /* Alles wat buiten de stroom over de pagina ligt. Staat met opzet boven de kop. */

    /* == De rollen ==
       Wat een waarde betekent. Componenten gebruiken alleen deze. */

    /* Kleur */
    --ds-color-text-default: var(--ds-kleur-inkt-900);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-text-body: var(--ds-kleur-inkt-700);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-text-muted: var(--ds-kleur-inkt-500);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-text-accent: var(--ds-kleur-oker-700);  /* Prijzen, cijfers, accentetiketten. 5,303 op surface.page en 4,613 op surface.sunken. Op. */
    --ds-color-text-danger: var(--ds-kleur-rood-600);  /* De foutmelding en de fouttekst bij een veld. 5,606 op surface.page en 4,877 op surface.sunken,. */
    --ds-color-text-on-ink: var(--ds-kleur-papier-wit);  /* De tekst op een donkere grond. Modern Delft zet daar `--wit` neer en niet `--papier`: de voet. */
    --ds-color-text-on-ink-muted: var(--ds-kleur-inkt-200);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-text-on-brand: var(--ds-kleur-papier-wit);  /* De tekst op het merkvlak: wit op kobalt, 8,31. Modern Delft zet `--wit` op elke donkere grond. */
    --ds-color-surface-page: var(--ds-kleur-papier-000);  /* De grond van elk schermoppervlak, op alle 53 routes. De tekstkleuren die hierop staan:. */
    --ds-color-surface-sunken: var(--ds-kleur-papier-100);  /* Het getinte vlak dat in dit systeem elke lijn en elk kader vervangt: .ev-cta, .ev-vlak,. */
    --ds-color-surface-warm: var(--ds-kleur-papier-warm);  /* De grond onder een drukvoorvertoning en onder de mailkaart. Hij draagt color.text.default. */
    --ds-color-surface-inverse: var(--ds-kleur-inkt-900);  /* De donkere grond: de voet, en elk omgekeerd vlak. In Modern Delft is dat diep en niet kobalt.. */
    --ds-color-surface-inverse-hover: var(--ds-kleur-inkt-950);  /* De zweefstand van die grond, een trede donkerder. Modern Delft heeft daar geen eigen waarde. */
    --ds-color-surface-raised: var(--ds-kleur-papier-wit);  /* De grond van wat op de pagina ligt: een veld, een tekstvak, een keuzelijst, een vinkje, een. */
    --ds-color-surface-brand: var(--ds-kleur-kobalt-500);  /* Het merkvlak: de hoofdknop, de oproep in de sitekop, een blok dat de merkkleur draagt. Modern. */
    --ds-color-border: var(--ds-kleur-inkt-500);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-border-subtle: var(--ds-kleur-lijn-neutraal);  /* De haarlijn tussen twee blokken. 1,24 op papier, en dat is met opzet: dit is geen rand om een. */
    --ds-color-border-accent: var(--ds-kleur-lijn-oker);  /* De okeren haarlijn op een lichte grond, `--lijn-oker` bij het merk. Zelfde soort scheiding als. */
    --ds-color-border-accent-on-ink: var(--ds-kleur-lijn-oker-op-diep);  /* Dezelfde okeren haarlijn op een donkere grond, `--lijn-oker-op-diep`. Twee waarden voor een. */
    --ds-color-text-accent-on-ink: var(--ds-kleur-oker-300);  /* De okeren tekst op een donkere grond, `--oker-op-blauw`. color.text.accent (#8A5C20) haalt op. */
    --ds-color-border-selected: var(--ds-kleur-oker-500);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-border-danger: var(--ds-kleur-rood-600);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-border-on-sunken: var(--ds-kleur-inkt-200);  /* De scheiding tussen twee blokken OP een getint vlak. color.border.subtle is. */
    --ds-color-focus: var(--ds-kleur-oker-500);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-focus-on-brand: var(--ds-kleur-papier-wit);  /* De focusring op het merkvlak. color.focus is oker en haalt op surface.brand 2,003, waar de eis. */
    --ds-color-mark: var(--ds-kleur-oker-500);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-mark-on-ink: var(--ds-kleur-oker-300);  /* Alle verhoudingen hieronder zijn met de WCAG-formule nagerekend op 11 september 2026, per. */
    --ds-color-print-text: var(--ds-kleur-druk-inkt);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-text-soft: var(--ds-kleur-druk-700);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-text-muted: var(--ds-kleur-druk-500);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-text-faint: var(--ds-kleur-druk-300);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-surface: var(--ds-kleur-druk-papier);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-surface-block: var(--ds-kleur-druk-tint-12);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-surface-row: var(--ds-kleur-druk-tint-08);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-surface-warm: var(--ds-kleur-druk-warm-tint);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-surface-warm-row: var(--ds-kleur-druk-warm-rij);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-mark: var(--ds-kleur-druk-grijs45);  /* Drukdomein (B11). De klaar-eis van WCAG geldt hier niet (B3); wat hier staat is nagerekend. */
    --ds-color-print-kleur-surface: var(--ds-kleur-papier-000);  /* De grond van het kleurbinnenwerk. .ev-kleur in tokens.css:84 zet --ev-print-paper op #FBFAF7,. */
    --ds-color-print-kleur-text: var(--ds-kleur-inkt-900);  /* De tekst van het kleurbinnenwerk. Ernst besloot op 7 september 2026 dat het kleurbinnenwerk. */
    --ds-color-print-kleur-text-soft: var(--ds-kleur-inkt-700);  /* De doorlopende tekst van het kleurbinnenwerk. 7,682 op de grond, 6,729 op de warme tint, 7,049. */
    --ds-color-print-kleur-text-muted: var(--ds-kleur-inkt-500);  /* De bijzin en de bronregel van het kleurbinnenwerk. 5,181 op de grond, 4,538 op de warme tint,. */
    --ds-color-print-kleur-accent: var(--ds-kleur-oker-500);  /* Oker als cijfer in het kleurbinnenwerk. Nooit als tekst: 3,806 op de grond, 3,334 op de warme. */
    --ds-color-print-kleur-mark: var(--ds-kleur-inkt-700);  /* De rasterstip van het kleurbinnenwerk (--ev-raster-print-dot: #33465A, tokens.css:100). Die. */
    --ds-color-text-on-brand-muted: var(--ds-kleur-papier-100);  /* Gedempte tekst op het merkvlak, voor een kopje boven een rij tegels. color.text.on-brand is. */
    --ds-color-text-accent-on-brand: var(--ds-kleur-papier-000);  /* Het accent op het merkvlak, en het is geen oker. color.text.accent-on-ink (oker.300) haalt. */
    --ds-color-text-hero-on-brand: var(--ds-kleur-oker-300);  /* De kop van een opening die op de merkgrond staat. Modern Delft zet hem okeren en niet wit:. */

    /* Typografie */
    --ds-type-hero: var(--ds-gewicht-zwaar) var(--ds-korps-hero)/var(--ds-regelhoogte-0-98) var(--ds-letter-display);  /* De h1 van elke pagina. Archivo 800, 30px onder 600 en 66px boven 1280. Gemeten in de merkbron. */
    --ds-type-hero-spatiering: var(--ds-spatiering--32);
    --ds-type-titel: var(--ds-gewicht-zwaar) var(--ds-korps-titel-vloeiend)/var(--ds-regelhoogte-1-06) var(--ds-letter-display);  /* De h2. Archivo 800, 28px onder 900 en 38px boven 1180. Was een vaste 29px. Gemeten in de. */
    --ds-type-titel-spatiering: var(--ds-spatiering--22);
    --ds-type-sectie: var(--ds-gewicht-zwaar) var(--ds-korps-19)/var(--ds-regelhoogte-1-20) var(--ds-letter-display);  /* De h3 en de titel van een vlak. Archivo 800 op 19px. Was Libre Caslon 400 op 21px. Gemeten in. */
    --ds-type-sectie-spatiering: var(--ds-spatiering--10);
    --ds-type-lead: var(--ds-korps-17)/var(--ds-regelhoogte-1-55) var(--ds-letter-tekst);  /* De openingsalinea. Modern Delft zet `--t-lead` op dezelfde maat als de lopende tekst (17px). */
    --ds-type-brood: var(--ds-korps-17)/var(--ds-regelhoogte-1-65) var(--ds-letter-tekst);  /* Alle lopende tekst, 17px met regelhoogte 1,65. Was 15px met 1,55. Gemeten in de merkbron. */
    --ds-type-klein: var(--ds-korps-15)/var(--ds-regelhoogte-1-65) var(--ds-letter-tekst);  /* De kleine tekst: een bijschrift naast een knop, een tabelcel. Was 13px met 1,55. Gemeten in de. */
    --ds-type-fijn: var(--ds-korps-14)/var(--ds-regelhoogte-1-55) var(--ds-letter-tekst);  /* Het kleine lettertje: de btw-regel, de bronregel. Was 11,5px met 1,6. Gemeten in de merkbron. */
    --ds-type-etiket: var(--ds-gewicht-zwaar) var(--ds-korps-12)/var(--ds-regelhoogte-1-30) var(--ds-letter-display);  /* Het kapitaaletiket en de kicker. In Modern Delft is dat Archivo 800 met 0,16em letterafstand,. */
    --ds-type-etiket-spatiering: var(--ds-spatiering-16);
    --ds-type-etiket-kapitaal: uppercase;
    --ds-type-code: var(--ds-korps-12)/var(--ds-regelhoogte-1-30) var(--ds-letter-mono);  /* Een getal, een code, een sleutelwoord. IBM Plex Mono op 12px. Was 13px met 1,6. Gemeten in de. */
    --ds-type-nadruk: var(--ds-gewicht-vet);  /* Nadruk binnen lopende tekst, en het gewicht van een kop die geen displaykop is. Dit is een rol. */
    --ds-type-gewoon: var(--ds-gewicht-normaal);  /* Het gewone gewicht, voor een regel die een zwaarder gewicht van een voorouder moet. */
    --ds-type-term: var(--ds-letter-mono);  /* Een term, een code of een sleutelwoord, in de maat van de tekst eromheen. Alleen de. */
    --ds-type-getal: var(--ds-gewicht-zwaar) var(--ds-korps-getal)/var(--ds-regelhoogte-1-00) var(--ds-letter-display);  /* Een groot getal in een cijferblok: Archivo 800 op `--t-getal`, regelhoogte 1, aantrekking. */
    --ds-type-getal-spatiering: var(--ds-spatiering--30);
    --ds-type-knop: var(--ds-gewicht-vet) var(--ds-korps-16)/var(--ds-regelhoogte-1-00) var(--ds-letter-tekst);  /* Het label van een knop: Atkinson Hyperlegible 700 op 16px met regelhoogte 1. De hoogte van de. */
    --ds-type-veld: var(--ds-korps-17)/var(--ds-regelhoogte-1-00) var(--ds-letter-tekst);  /* De tekst in een invoerveld: Atkinson Hyperlegible 400 op 17px met regelhoogte 1. Een punt. */
    --ds-type-navigatie: var(--ds-gewicht-half) var(--ds-korps-15)/var(--ds-regelhoogte-1-00) var(--ds-letter-display);  /* Een link in de sitekop: Archivo 600 op 15px met regelhoogte 1. De enige plek in de hele. */
    --ds-type-getal-strook: var(--ds-gewicht-zwaar) var(--ds-korps-getal-strook)/var(--ds-regelhoogte-1-00) var(--ds-letter-display);  /* Het getal in een cijferrij binnen een flowkaart: 30px, dezelfde rol als type.getal maar op een. */
    --ds-type-kaft: var(--ds-gewicht-zwaar) var(--ds-korps-kaft)/var(--ds-regelhoogte-1-00) var(--ds-letter-display);  /* De titel op een boekomslag in beeld: vloeiend van 18 tot 26px. Hij is geen type.titel, want. */
    --ds-type-kaft-spatiering: var(--ds-spatiering--30);
    --ds-type-kaft-etiket: var(--ds-korps-mono-klein)/var(--ds-regelhoogte-1-00) var(--ds-letter-mono);  /* Het reeksetiket boven de titel op een omslag, in de cijferletter met wijde spatiering. Geen. */
    --ds-type-kaft-etiket-spatiering: var(--ds-spatiering-18);
    --ds-type-getal-klein: var(--ds-gewicht-zwaar) var(--ds-korps-getal-klein)/var(--ds-regelhoogte-1-00) var(--ds-letter-display);  /* Een prijs in een regel: 22px. Dezelfde rol als type.getal en type.getal-strook, op een derde. */
    --ds-type-getal-klein-spatiering: var(--ds-spatiering--22);
    --ds-type-stapnummer: var(--ds-gewicht-zwaar) var(--ds-korps-12)/var(--ds-regelhoogte-1-30) var(--ds-letter-mono);  /* Het nummer van een stap (01, 02, 03) in de cijferletter, zwaar. Geen type.code: die is. */
    --ds-type-stapnummer-spatiering: var(--ds-spatiering-4);

    /* Ruimte */
    --ds-space-inline: var(--ds-ruimte-1);  /* Twee dingen naast elkaar op een regel. 23 plekken in het systeem. Ongewijzigd op 4px: het merk. */
    --ds-space-tussen: var(--ds-ruimte-2);  /* De ruimte in een bediening tussen een pictogram en zijn tekst. 40 plekken. Ongewijzigd op 8px.. */
    --ds-space-binnen-blok: var(--ds-ruimte-3);  /* Een detail binnen een blok: een regel in een lijst, een onderschrift onder een beeld. 59. */
    --ds-space-kop-tekst: var(--ds-ruimte-6);  /* De standaardruimte van Stapel, en de binnenruimte van een veld, een tekstvak en een. */
    --ds-space-kop: var(--ds-ruimte-2);  /* De ruimte boven en onder de inhoud van de sitekop, `--kop-ruimte`. Deze rol is nieuw: de. */
    --ds-space-blok: var(--ds-ruimte-7);  /* Tussen twee blokken binnen een sectie, en tussen een kop en wat eronder hoort. 68 plekken, de. */
    --ds-space-blok-groot: var(--ds-ruimte-8);  /* Tussen twee kolommen, en tussen twee zware blokken. 8 plekken. Van een vaste 30px naar 28px. */
    --ds-space-sectie: var(--ds-ruimte-11);  /* Tussen twee secties. 11 plekken. Smal blijft 44px en dat was precies de waarde die het systeem. */
    --ds-space-afsluiting: var(--ds-ruimte-10);  /* De ruimte waarmee een pagina of een vlak afsluit. 3 plekken. Van een vaste 64px naar 40px smal. */
    --ds-space-rand: var(--ds-ruimte-rand);  /* De zijmarge tussen de inhoud en de rand van het venster. Deze rol is nieuw: het systeem liet. */

    /* Straal */
    --ds-radius-control: var(--ds-straal-14);  /* De hoek van elke bediening: knop, veld, tekstvak, keuzelijst, vinkje. 15 plekken. Van 3px naar. */
    --ds-radius-tegel: var(--ds-straal-10);  /* De hoek van een tegel en van beeld dat zijn doos vult. Deze rol is nieuw: het systeem had een. */
    --ds-radius-vlak: var(--ds-straal-22);  /* De hoek van een groot vlak. Nieuw, om dezelfde reden als radius.tegel: een kaart en een knop. */
    --ds-radius-fijn: var(--ds-straal-4);  /* De hoek van een scan, een staaf, een boekrug. Nieuw. Dit is de hoek die het dichtst bij de. */
    --ds-radius-pil: var(--ds-straal-pil);  /* De baan en de knop van een schakelaar, en de stip op de landkaart in het boek. */

    /* Randdikte */
    --ds-border-hairline: var(--ds-randdikte-1);  /* De enige randdikte in rust. Wie een rand zet, zet hem in color.border of color.border.subtle. */
    --ds-border-focus: var(--ds-randdikte-2);  /* De focusring. De enige plek waar een lijn dikker mag dan een haar. */

    /* Schaduw */
    --ds-elevation-raised: var(--ds-schaduw-kaart);  /* Iets dat van de pagina af ligt maar er niet overheen: de producttegel, de keuzetegel, de. */
    --ds-elevation-overlay: var(--ds-schaduw-overlay);  /* Iets dat over de pagina heen ligt: het uitklapmenu, de actiebalk, de toestemmingsbalk. */
    --ds-elevation-selected: var(--ds-schaduw-ring);  /* De gekozen stand van een tegel. Kleur draagt de betekenis nooit alleen: de tegel zet er ook. */
    --ds-elevation-papier: var(--ds-schaduw-papier);  /* Wat er onder iets hoort dat een VEL is: een omslag, een bladzijde, een akte. Naast. */

    /* Beweging */
    --ds-motion-feedback: var(--ds-duur-140);  /* Zweven, focus, indrukken: een toestand die van zichzelf verschijnt of verdwijnt. Onder. */
    --ds-motion-state: var(--ds-duur-200);  /* Een blok dat open of dicht gaat, een achtergrond die wisselt. Onder prefers-reduced-motion. */
    --ds-motion-enter: var(--ds-duur-900);  /* Een blok dat in beeld komt. Van 600ms met ease naar 900ms met de kromme van het merk. Gemeten. */
    --ds-motion-voortgang: var(--ds-versoepeling-lineair);  /* De curve van een wachtvisual en een voortgangsbalk. Onder prefers-reduced-motion herschrijft. */
    --ds-motion-lijn: var(--ds-duur-1600);  /* Een haarlijn die zichzelf trekt. Nieuw; nog geen onderdeel gebruikt hem, want Haarlijn bestaat. */
    --ds-motion-onthul-afstand: var(--ds-afstand-30);  /* De afstand waarover een onthulling binnenkomt. Nieuw. Gemeten in de merkbron (commit 3da4b242). */
    --ds-motion-onthul-kromme: var(--ds-versoepeling-onthul);  /* De kromme van een onthulling: snel op gang en zacht uit, `cubic-bezier(.16, 1, .3, 1)`. Het. */
    --ds-motion-onthul-tussenpoos: var(--ds-duur-90);  /* De tussenpoos tussen twee onthullingen op een rij. Nieuw. Gemeten in de merkbron (commit. */
    --ds-motion-onthul-afstand-tegel: var(--ds-afstand-24);  /* De afstand waarover een tegel binnenkomt. Korter dan die van een blok, en dat is geen smaak:. */

    /* Lagen */
    --ds-layer-raise: var(--ds-laag-1);  /* Iets binnen een component dat over zijn buur ligt: het vinkje op een tegel, de bladerpijl. */
    --ds-layer-sticky: var(--ds-laag-15);  /* De plakkende kop. Bij een plakkende kop hoort scroll-padding-block-start gelijk aan de. */
    --ds-layer-overlay: var(--ds-laag-20);  /* De toestemmingsbalk en de actiebalk van de flow. */

    /* Breekpunten */
    --ds-breekpunt-breed: 900px;  /* Het enige breekpunt van het systeem: 27 van de 35 gemeten plekken schakelen hier, in vier. */

    /* Maten */
    --ds-maat-kolom: 440px;  /* De leeskolom onder breekpunt.breed. Twaalf plekken in vier stijlbladen bouwen dit patroon. */
    --ds-maat-kolom-breed: 720px;  /* De leeskolom vanaf breekpunt.breed. Gemeten: op 15px geeft deze breedte 74,1 tekens, precies. */
    --ds-maat-document: 1180px;  /* De breedte van de inhoudskolom, `--kolom`. Was 1100px; het merk zet hem op 1180px. Gemeten in. */
    --ds-maat-regel: 75ch;  /* De brief vraagt een regellengte van ongeveer 75ch of minder. De kolom staat in px, dus elke. */
    --ds-maat-raakvlak: 44px;  /* Het belangrijkste aanraakdoel. Besluit B7 zegt dat dit ook voor de drie doelen in de kop. */
    --ds-maat-raakvlak-min: 24px;  /* De ondergrens uit de brief en uit WCAG 2.2 SC 2.5.8 voor elk ander doel. Het is bovendien de. */
    --ds-maat-knop-max: 320px;  /* De breedste die een knop in een sluitblok mag worden. Staat vandaag als lokale overschrijving. */
    --ds-maat-tabel-min: 460px;  /* De breedte waaronder een tabel in zijn eigen schuifbak gaat schuiven in plaats van de pagina. */
    --ds-maat-tabelkolom-min: 120px;  /* De ondergrens van een tekstkolom in een tabel met een getalkolom ernaast. Zonder hem krijgt. */
    --ds-maat-uitstap: 230px;  /* Hoever een blok aan elke kant buiten de documentkolom mag stappen zodat het niet hoeft te. */
    --ds-maat-tabelcel-max: 352px;  /* De bovengrens van een cel in een tabel die buiten zijn kolom stapt. Dat is de 22rem van. */

    /* == De componentknoppen ==
       Alleen waar een component werkelijk een eigen knop nodig heeft. */

    /* Kleur */
    --ds-knop-grond: var(--ds-color-surface-brand);  /* De grond van de hoofdknop, als afspraak in plaats van als vaste kleur. Wie een vlak neerlegt. */
    --ds-knop-grond-zweef: var(--ds-color-surface-inverse);  /* De grond van de hoofdknop onder de muis. Hoort bij knop.grond: wie de rustkleur omzet, zet ook. */
    --ds-knop-inkt: var(--ds-color-text-on-ink);  /* De letters op de hoofdknop. Hoort bij knop.grond: een omgekeerde grond vraagt omgekeerde. */
    --ds-link-streep-kleur: var(--ds-color-mark);  /* De okeren streep onder een link in een zin; de letters blijven inkt. Vastgelegd op 11. */

    /* Typografie */
    --ds-band-letter: var(--ds-letter-mono);  /* De letterfamilie waarmee de gedrukte band zijn bolletjes zet. De band is geen tekst maar een. */
    --ds-omslag-titel-korps: clamp(38px, 11vw, 62px);  /* De titel op het omslag, publiek.css:143, ongewijzigd. Dit is de enige clamp() die de. */
    --ds-link-streep-afstand: 0.14em;  /* De onderstrepingsafstand, gemeten op publiek.css:233 en :556. Zelfde getal als spatiering.14. */

    /* Ruimte */
    --ds-control-focus-afstand: 2px;  /* De gemeten outline-offset van alle zes bestaande focusregels. Hij is niet nul, en dat is. */
    --ds-knop-binnenruimte: var(--ds-space-kop-tekst);  /* De binnenruimte boven en onder in een knop. Modern Delft noemt hem `--bedien-ruimte` en dat is. */
    --ds-knop-binnenruimte-zij: 1.625rem;  /* De binnenruimte links en rechts in een knop: 26px. Geen trede op de ruimteladder, want hij. */
    --ds-veld-hoogtecorrectie: 2.5px;  /* Zoveel minder binnenruimte krijgt een veld dan een knop, zodat de twee naast elkaar even hoog. */
    --ds-keuzelijst-hoogtecorrectie: 3.5px;  /* Zoveel minder binnenruimte krijgt een keuzelijst dan een knop, zodat hij naast een veld en een. */
    --ds-flowkaart-strook-ruimte: 2rem;  /* De binnenruimte boven en onder in een strook van de flowkaart: 32px. Geen semantische rol. */
    --ds-flowkaart-strook-ruimte-zij: var(--ds-space-afsluiting);  /* De binnenruimte links en rechts in een strook: 40px, opzij meer dan boven, net als bij een. */
    --ds-flowkaart-cijfers-ruimte: 1.375rem;  /* De binnenruimte boven en onder in de cijferstrook: 22px, en dat is minder dan de 32px van een. */
    --ds-sitekop-nav-ruimte: 1.5rem;  /* De ruimte tussen twee items in het hoofdmenu: 24px. Geen verwijzing naar space.blok, want die. */
    --ds-cijferrij-ruimte: 3rem;  /* De ruimte tussen twee getallen in een vrijstaande cijferrij: 48px. Geen trede op de. */
    --ds-cijferrij-strook-ruimte: 1.625rem;  /* De binnenruimte links en rechts van een getal in de strookvorm: 26px. Daar is het gat nul,. */
    --ds-tegelwand-ruimte: 0.375rem;  /* De ruimte tussen twee tegels: 6px. Geen trede op de ruimteladder; hij ligt tussen space.inline. */
    --ds-tegelwand-binnenruimte: clamp(0.875rem, 2.4vw, 1.75rem);  /* De binnenruimte van de wand, vloeiend van 14 tot 28px. Vloeiend en niet in twee stappen, want. */
    --ds-prijsregel-kolomgat: 4rem;  /* De ruimte tussen de linker- en de rechterhelft van een prijsregel: 64px, en 28px op een smal. */
    --ds-prijsregel-ruimte: 0.875rem;  /* De ruimte boven en onder een prijsregel: 14px. Geen trede op de ruimteladder; hij ligt tussen. */
    --ds-staprij-ruimte: 1.125rem;  /* De ruimte tussen twee stappen onder elkaar: 18px, en 24px op een smal scherm omdat de twee. */
    --ds-staprij-ruimte-smal: 1.5rem;  /* Dezelfde ruimte op een smal oppervlak: 24px. Hij staat er als eigen token en niet als getal in. */
    --ds-staprij-kolomgat: 4rem;  /* De ruimte tussen de titelkolom en de uitlegkolom van een stap: 64px, en 28px op een smal. */

    /* Randdikte */
    --ds-control-focus-breedte: var(--ds-border-focus);  /* De gemeten dikte van alle zes bestaande focusregels. Ongewijzigd. */

    /* Beweging */
    --ds-onthuller-volgorde: 0;  /* De plaats van een onthuller in een rij die na elkaar binnenkomt, maal. */
    --ds-wacht-puls-duur: 30s;  /* De wachtanimaties van scherm 4 lopen werkelijk dertig seconden (B034). Dat is inhoud en geen. */
    --ds-tegelwand-omslag: 1100ms;  /* Hoe lang een tegel erover doet om te draaien. Geen trede op de bewegingstrap: motion.enter is. */
    --ds-tegelwand-beurt: 0;  /* De PLAATS van deze tegel in de onthulling, als kaal getal: 0 komt meteen, 1 een tussenpoos. */
    --ds-tegelwand-tussenpoos: 360ms;  /* Hoe lang er tussen twee tegels zit die na elkaar omdraaien. NIET motion.onthul.tussenpoos. */

    /* Breekpunten */
    --ds-raster-omslag-tegel: 600px;  /* Waar het tegelraster naar twee kolommen gaat. Drie plekken, alle drie in tegel.css, vandaag. */
    --ds-raster-omslag-vork: 700px;  /* Waar een tweekolomsblok splitst: .ev-vork, .ev-beelden en site.css:1122. Vier plekken, om. */
    --ds-sitekop-menu-breekpunt: 970px;  /* Waar het hoofdmenu van een uitklapmenu naar een platte balk gaat. NIET breekpunt.breed. */

    /* Maten */
    --ds-actiebalk-onderruimte: calc(var(--ds-maat-raakvlak) + 2 * var(--ds-space-kop-tekst) + var(--ds-space-afsluiting));  /* De ruimte die de kolom onder zich houdt zodat de vastgezette balk niets afdekt. Vandaag meet. */
    --ds-band-kolommen: 48;  /* De rasterband zet zijn hoogte uit zijn breedte en het aantal kolommen, zodat een bolletje. */
    --ds-flowkaart-maat: 920px;  /* De breedte van de kaart waarin de bestelflow staat. Geen trede op de maatladder: hij ligt. */
    --ds-flowkaart-voetuitleg-min: 260px;  /* Onder deze breedte slaat de uitleg naast de knop om naar een eigen regel. Het is een. */
    --ds-flowkaart-voetuitleg-max: 46ch;  /* De leesbreedte van de uitleg onder de knop. Korter dan maat.regel (75ch), want dit is fijndruk. */
    --ds-staafrij-naam: 120px;  /* De vaste kolom waarin de plaatsnaam staat. Vast en niet meegroeiend, want alleen dan beginnen. */
    --ds-staafrij-getal: 48px;  /* De vaste kolom waarin het getal rechts staat. Vast om dezelfde reden als de naamkolom: de. */
    --ds-staafrij-dikte: 8px;  /* De hoogte van een staaf, en meteen zijn kleinste breedte. Geen trede op de ruimteladder; het. */
    --ds-staafrij-maat: 62ch;  /* De breedte van de hele rij. Korter dan maat.regel (75ch), want dit is een vergelijking en geen. */
    --ds-staafrij-deel: 0%;  /* Hoeveel van de rij deze staaf vult, als percentage van het grootste getal in de reeks. Een. */
    --ds-film-verhouding: 16 / 9;  /* De beeldverhouding van de filmhouder. Hij reserveert daarmee zijn hoogte voordat de film. */
    --ds-film-beeld: none;  /* Het eerste beeld van de film, als custom property en niet als `poster`-attribuut. Een poster. */
    --ds-film-beeld-smal: none;  /* Het eerste beeld onder 700px, dat bij de kleine bron hoort. Valt terug op film.beeld als hij. */
    --ds-boek-maat: 380px;  /* De grootste breedte van het boek als voorwerp in beeld. Geen trede op de maatladder: het is. */
    --ds-boek-verhouding: 3 / 4;  /* De verhouding van het omslag. Staand, want het boek is A5 staand. Hij staat als aspect-ratio. */
    --ds-boek-rug: 10px;  /* De breedte van de rug, de donkere strook links op het omslag die het boek dikte geeft. Gemeten. */
    --ds-boek-inspringing: 8%;  /* Hoever de titel en de okeren streep van de rand van het omslag blijven. In procent en niet in. */
    --ds-stapbalk-dikte: 3px;  /* De hoogte van de voortgangslijn boven in een flowkaart. Geen trede op de ruimteladder en geen. */
    --ds-stapbalk-deel: 0%;  /* Hoe vol de balk staat, als percentage. Een componentknop per instantie, net als. */
    --ds-naamrij-maat: 560px;  /* De breedte van een invoerveld met een knop ernaast. Geen trede op de maatladder: hij ligt. */
    --ds-naamrij-veld-min: 14rem;  /* De ondergrens van het veld, en meteen het punt waarop de knop naar zijn eigen regel zakt. Hij. */
    --ds-tegelwand-diepte: 1200px;  /* Het perspectief waarin een tegel draait. Hoe kleiner dit getal, hoe sterker de vertekening; op. */
    --ds-tegelwand-kolommen: 1;  /* Hoeveel tegels er in een rij staan. Een componentknop per instantie, net als. */
    --ds-prijsregel-beeld: 96px;  /* De breedte van het beeldje links in een prijsregel. Geen trede op de maatladder: het is een. */
  }

  /* Boven 900px (breekpunt.breed), strikt: op precies die breedte geldt nog
     de smalle waarde, want Modern Delft zet zijn smalle stand in max-width: 900px.
     Alleen rollen: een primitief is een
     waarde en verandert niet met de vensterbreedte. */
  @media (width > 900px) {
    :root {
      --ds-space-kop: var(--ds-ruimte-4);  /* 14px boven 900px. Op een smal scherm 8px, want daar moet de kop zo min mogelijk van. */
      --ds-space-blok: var(--ds-ruimte-9);  /* 32px boven 900px. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026. */
      --ds-space-blok-groot: var(--ds-ruimte-12);  /* 64px boven 900px. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026. */
      --ds-space-sectie: var(--ds-ruimte-13);  /* 96px boven 900px. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026. */
      --ds-space-afsluiting: var(--ds-ruimte-12);  /* 64px boven 900px. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026. */
      --ds-motion-onthul-afstand: var(--ds-afstand-48);  /* 48px boven 900px. Gemeten in de merkbron (commit 3da4b242) op 12 september 2026. */
    }
  }
}