/* Kinnection, de maten. Vastgelegd op 20-09-2026 in prompt 04.

   Dit is de enige plek waar een maat of een kleur gedefinieerd wordt. Overal elders verwijs je ernaar.
   tokens.json bevat exact dezelfde waarden. Wijzig je hier iets, wijzig het daar ook.

   Twee lagen. Basis: de schaal zelf (--space-24, --radius-lg, --text-xl).
   Betekenis: namen die zeggen waarvoor (--gap-element, --radius-card, --type-h3). Bouwstenen gebruiken enkel betekenisnamen.

   Naampatroon: --soort-naam. Enige uitzondering zijn de zes kleuren zelf (--cream, --indigo), die hun bestaande naam houden.

   Oppervlakken: het web is de standaard. Een sjabloon met een vast formaat zet data-surface op het html-element:
   "slide" (dia, 1920 breed), "social" (1080 breed) of "a4". Dezelfde namen krijgen dan de waarden van dat oppervlak.
   E-mail kent geen variabelen: neem daar de waarden "op gsm" uit tokens.json. Een flyer volgt A4.

   Schermbreedtes: gsm tot 599, tablet 600 tot 899, scherm vanaf 900. Een @media-regel kan geen variabele lezen:
   schrijf daar enkel (min-width:600px) of (min-width:900px), nooit een ander getal. */

:root,[data-surface]{
  /* ===== Oppervlak =====
     Eén getal waarmee afstanden, hoeken, lijnen, schaduwen en iconen meeschalen. Web 1, dia 2, social 2.5, A4 0.75. Zet data-surface="slide", "social" of "a4" op het html-element van een sjabloon. */
  --scale:1; /* Vermenigvuldiger van het oppervlak */

  /* ===== Kleuren, basis =====
     De zes gekozen kleuren uit de kleurproef van 20-09-2026. Niet wijzigen. De afgeleiden zijn doorzichtige varianten: het getal in de naam is de dekking in procent. */
  --cream:#F3F1EA; /* De grond van bijna alles */
  --paper:#FFFFFF; /* De plek waar je iets doet, en kaarten op crème */
  --indigo:#2D2A6E; /* De baas: koppen, randen, knoppen, het moment */
  --terracotta:#C96F4C; /* De lijn, het vinkje, het accent. Nooit lopende tekst */
  --ink:#1D1C24; /* Lopende tekst */
  --slate:#656171; /* Labels en bijschriften */
  --indigo-a08:rgba(45,42,110,0.08); /* Tint */
  --indigo-a16:rgba(45,42,110,0.16); /* Scheidingslijn en spoor van de lijn */
  --indigo-a35:rgba(45,42,110,0.35); /* Stille rand, enkel decoratief */
  --ink-a72:rgba(29,28,36,0.72); /* Gedempte tekst */
  --ink-a65:rgba(29,28,36,0.65); /* Schaduw op indigo */
  --ink-a35:rgba(29,28,36,0.35); /* Schaduw onder een ink vlak */
  --cream-a80:rgba(243,241,234,0.80); /* Gedempte tekst op indigo en op ink */
  --cream-a50:rgba(243,241,234,0.50); /* Rand op indigo en op ink */
  --cream-a20:rgba(243,241,234,0.20); /* Scheidingslijn op indigo en op ink */
  --cream-a08:rgba(243,241,234,0.08); /* Merkteken-fragment op indigo, goedgekeurd in opdracht 14d */
  --chart-1:#4A46A8; /* Grafiek reeks 1, leesversie en A4, niet op dia's (14d) */
  --chart-2:#C96F4C; /* Grafiek reeks 2, leesversie en A4, niet op dia's (14d) */
  --chart-3:#10312B; /* Grafiek reeks 3, petrol, leesversie en A4, niet op dia's (14d2) */
  --chart-4:#826476; /* Grafiek reeks 4, heide, leesversie en A4, niet op dia's (14d2) */
  --chart-5:#51390A; /* Grafiek reeks 5, brons, leesversie en A4, niet op dia's (14d2) */
  /* Enkel in de gebouwde beelden, beslist in opdracht 12f op 27-09-2026 */
  --ink-a12:rgba(29,28,36,0.12); /* Zachte schaduw binnen een gebouwd beeld */
  --ink-a28:rgba(29,28,36,0.28); /* Kant in de schaduw binnen een gebouwd beeld */
  --paper-a45:rgba(255,255,255,0.45); /* Licht en glans binnen een gebouwd beeld */
  --paper-a80:rgba(255,255,255,0.80); /* Lichtvlek van een raam binnen een gebouwd beeld */
  --skin-1:#F0C6A3; /* Huidtint licht, enkel in gebouwde beelden */
  --skin-2:#C98F68; /* Huidtint midden, enkel in gebouwde beelden */
  --skin-3:#8A5738; /* Huidtint donker, enkel in gebouwde beelden */
  --practice-sage:#7FA087; /* Praktijkkleur salie, enkel waar een beeld de huisstijl van een praktijk toont */
  --practice-sea:#2E7D7A; /* Praktijkkleur zeegroen, idem */
  --practice-ocean:#35577D; /* Praktijkkleur oceaanblauw, idem */
  --practice-ochre:#D9A441; /* Praktijkkleur oker, idem */
  --practice-plum:#7B4B6A; /* Praktijkkleur pruim, idem */
  --practice-coral:#E08A73; /* Praktijkkleur koraal, idem */
  --practice-forest:#2F5D50; /* Praktijkkleur bosgroen, idem */

  /* ===== Kleuren, betekenis =====
     Bouwstenen gebruiken enkel deze namen. "moment" is een indigo vlak, "float" is het ink vlak van de checklist. */
  --color-ground:var(--cream); /* Achtergrond van de pagina */
  --color-surface:var(--paper); /* Wit deel en kaart op crème */
  --color-moment:var(--indigo); /* Indigo vlak: het moment dat telt en het slot */
  --color-float:var(--ink); /* Vlak dat boven de pagina zweeft: de checklist */
  --color-accent:var(--terracotta); /* Vinkje, knoop, accentvlak */
  --color-error:var(--terracotta); /* Rand en teken van een fout. De foutzin zelf staat in ink */
  --color-tint:var(--indigo-a08); /* Zacht vlak achter iets kleins */
  --color-mark:var(--indigo-a08); /* Merkteken-fragment op een licht vlak */
  --color-mark-on-moment:var(--cream-a08); /* Merkteken-fragment op indigo */
  --color-placeholder:var(--indigo-a16); /* Plaatshouder terwijl iets laadt */
  --color-placeholder-on-moment:var(--cream-a20); /* Plaatshouder op indigo of op ink */
  --color-heading:var(--indigo); /* Alle koppen */
  --color-text:var(--ink); /* Lopende tekst */
  --color-text-muted:var(--ink-a72); /* Tekst die een stap terug doet */
  --color-text-label:var(--slate); /* Bovenkop, bijschrift */
  --color-text-on-moment:var(--cream); /* Tekst op indigo of op ink */
  --color-text-on-moment-muted:var(--cream-a80); /* Gedempte tekst op indigo of op ink */
  --color-text-on-accent:var(--ink); /* Tekst op terracotta */
  --color-border:var(--indigo); /* De stevige rand */
  --color-border-quiet:var(--indigo-a35); /* Knoop die nog niet bereikt is. Nooit de enige rand van iets klikbaars */
  --color-border-on-moment:var(--cream-a50); /* Rand op indigo of op ink */
  --color-rule:var(--indigo-a16); /* Scheidingslijn */
  --color-rule-on-moment:var(--cream-a20); /* Scheidingslijn op indigo of op ink */
  --color-thread:var(--terracotta); /* De lijn */
  --color-thread-track:var(--indigo-a16); /* Het spoor dat de lijn nog moet afleggen */
  --color-focus:var(--indigo); /* Focusrand */
  --color-focus-on-moment:var(--cream); /* Focusrand op indigo */
  --color-focus-on-float:var(--terracotta); /* Focusrand op ink */
  --color-shadow:var(--indigo); /* Harde schaduw onder een licht vlak */
  --color-shadow-strong:var(--ink); /* Harde schaduw onder een indigo vlak */
  --color-shadow-on-moment:var(--ink-a65); /* Harde schaduw van een licht vlak dat op indigo ligt */
  --color-shadow-float:var(--ink-a35); /* Harde schaduw onder een ink vlak */
  --color-art-shade:var(--ink-a12); /* Zachte schaduw in een gebouwd beeld */
  --color-art-shade-strong:var(--ink-a28); /* Kant die van het licht wegdraait in een gebouwd beeld */
  --color-art-light:var(--paper-a45); /* Licht, glans en rand aan de lichtkant in een gebouwd beeld */
  --color-art-light-strong:var(--paper-a80); /* Lichtvlek van een raam in een gebouwd beeld */
  --color-art-skin-1:var(--skin-1); /* Huid, licht */
  --color-art-skin-2:var(--skin-2); /* Huid, midden */
  --color-art-skin-3:var(--skin-3); /* Huid, donker */
  --color-practice-sage:var(--practice-sage); /* Huisstijl van een praktijk: salie */
  --color-practice-sea:var(--practice-sea); /* Huisstijl van een praktijk: zeegroen */
  --color-practice-ocean:var(--practice-ocean); /* Huisstijl van een praktijk: oceaanblauw */
  --color-practice-ochre:var(--practice-ochre); /* Huisstijl van een praktijk: oker */
  --color-practice-plum:var(--practice-plum); /* Huisstijl van een praktijk: pruim */
  --color-practice-coral:var(--practice-coral); /* Huisstijl van een praktijk: koraal */
  --color-practice-forest:var(--practice-forest); /* Huisstijl van een praktijk: bosgroen */

  /* ===== Afstanden, basis =====
     Eén schaal. De naam is de waarde in pixels op het web; op een ander oppervlak schaalt ze mee. */
  --space-4:calc(4px * var(--scale));
  --space-8:calc(8px * var(--scale));
  --space-12:calc(12px * var(--scale));
  --space-16:calc(16px * var(--scale));
  --space-24:calc(24px * var(--scale));
  --space-32:calc(32px * var(--scale));
  --space-48:calc(48px * var(--scale));
  --space-64:calc(64px * var(--scale));
  --space-96:calc(96px * var(--scale));
  --space-128:calc(128px * var(--scale));

  /* ===== Afstanden, betekenis =====
     Van groot naar klein: sectie, blok, element, binnenruimte. Op het web groeien de grootste mee met het scherm. */
  --gap-section:clamp(64px, 50.2543px + 3.6655vw, 96px); /* Boven en onder elke sectie */
  --gap-block:clamp(32px, 18.2543px + 3.6655vw, 64px); /* Tussen blokken in een sectie: van de kop naar de inhoud */
  --gap-columns:var(--gap-block); /* Tussen de brede en de smalle helft */
  --gap-grid:var(--space-24); /* Tussen kaarten naast of onder elkaar */
  --gap-element:var(--space-24); /* Tussen elementen in een blok: titel, alinea, knop */
  --gap-tight:var(--space-12); /* Tussen dingen die samen horen: twee knoppen, kop en zin in een kaart */
  --gap-inline:var(--space-8); /* Tussen een icoon of vakje en zijn woord */
  --gap-hair:var(--space-4); /* Tussen rijen in een dichte lijst */
  --pad-panel:clamp(24px, 13.6907px + 2.7491vw, 48px); /* Binnenruimte van een groot paneel: een dag uit de week */
  --pad-card:var(--space-24); /* Binnenruimte van een kaart */
  --pad-inset:var(--space-16); /* Binnenruimte van een klein vlak in een kaart */
  --pad-control:var(--space-24); /* Links en rechts in een knop */
  --pad-control-sm:var(--space-16); /* Links en rechts in een kleine knop */

  /* ===== Letters, basis =====
     Eén trap van acht stappen. De verhouding tussen twee stappen is 1,2 waar het smal of dicht is (gsm, papier) en 1,333 waar het breed is (scherm, dia, social). Op het web schuift elke stap vloeiend van de ene naar de andere tussen 375 en 1248 breed. */
  --font-title:'Poppins', 'Poppins reserve', system-ui, sans-serif; /* Koppen, labels, knoppen, cijfers */
  --font-body:'Nunito Sans', 'Nunito Sans reserve', system-ui, sans-serif; /* Alles wat je leest */
  --weight-regular:400; /* Lopende tekst */
  --weight-semibold:600; /* Labels en knoppen */
  --weight-bold:700; /* Koppen, en nadruk in lopende tekst */
  --weight-heavy:800; /* Dagnaam en groot cijfer, en sterke nadruk */
  --text-xs:0.8rem; /* Enkel voor labels in hoofdletters */
  --text-sm:0.875rem; /* Bijschrift, voet, kleine knop */
  --text-base:1.0625rem; /* Lopende tekst */
  --text-lg:clamp(1.25rem, 1.1695rem + 0.3436vw, 1.4375rem); /* Inleiding, kaarttitel */
  --text-xl:clamp(1.5rem, 1.3389rem + 0.6873vw, 1.875rem); /* Kop 3 */
  --text-2xl:clamp(1.8125rem, 1.5172rem + 1.26vw, 2.5rem); /* Kop 2 */
  --text-3xl:clamp(2.1875rem, 1.6774rem + 2.1764vw, 3.375rem); /* Groot cijfer, zoals de prijs */
  --text-4xl:clamp(2.625rem, 1.8196rem + 3.4364vw, 4.5rem); /* Kop 1 en dagnaam */
  --leading-display:0.95; /* Eén groot woord */
  --leading-heading:1.1; /* Kop 1, kop 2, groot cijfer */
  --leading-title:1.2; /* Kop 3, kaarttitel, knop */
  --leading-compact:1.5; /* Inleiding, kleine tekst, label */
  --leading-body:1.65; /* Lopende tekst */
  --tracking-display:-0.05em; /* Dagnaam en groot woord */
  --tracking-heading:-0.03em; /* Kop 1, kop 2, groot cijfer */
  --tracking-title:-0.015em; /* Kop 3, kaarttitel */
  --tracking-normal:0; /* Alle lopende tekst en knoppen */
  --tracking-label:0.12em; /* Label in hoofdletters */

  /* ===== Letters, betekenis =====
     Elke rol is gewicht, grootte, regelhoogte en lettertype in één. Gebruik: font:var(--type-h1). De letterafstand en de kleur per rol staan in tokens.json onder "roles" en op maten.html. */
  --type-display:var(--weight-heavy) var(--text-4xl)/var(--leading-display) var(--font-title); /* Dagnaam, één groot woord */
  --type-h1:var(--weight-bold) var(--text-4xl)/var(--leading-heading) var(--font-title); /* Kop 1 */
  --type-number:var(--weight-heavy) var(--text-3xl)/var(--leading-heading) var(--font-title); /* Groot cijfer */
  --type-h2:var(--weight-bold) var(--text-2xl)/var(--leading-heading) var(--font-title); /* Kop 2 */
  --type-h3:var(--weight-bold) var(--text-xl)/var(--leading-title) var(--font-title); /* Kop 3 */
  --type-title:var(--weight-bold) var(--text-lg)/var(--leading-title) var(--font-title); /* Kaarttitel, vraag als kop */
  --type-lead:var(--weight-regular) var(--text-lg)/var(--leading-compact) var(--font-body); /* Inleiding */
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body); /* Lopende tekst */
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-compact) var(--font-body); /* Bijschrift, voet */
  --type-label:var(--weight-semibold) var(--text-xs)/var(--leading-compact) var(--font-title); /* Bovenkop in hoofdletters */
  --type-button:var(--weight-semibold) var(--text-base)/var(--leading-title) var(--font-title); /* Knop */
  --type-button-sm:var(--weight-semibold) var(--text-sm)/var(--leading-title) var(--font-title); /* Kleine knop */

  /* ===== Raster =====
     Eén raster en één breedte voor de hele pagina. Inhoud deelt de breedte ongelijk: 7 en 5 kolommen, die per stap van kant wisselen. De strook aan de rand is van de lijn. */
  --grid-columns:4; /* Aantal kolommen */
  --grid-gutter:var(--space-16); /* Ruimte tussen twee kolommen */
  --page-max:1248px; /* Breedste maat van de pagina, de strook van de lijn inbegrepen */
  --rail:var(--space-48); /* De vrije strook aan de rand waar de lijn loopt */
  --page-margin-start:var(--rail); /* Marge links: altijd de strook van de lijn */
  --page-margin-end:var(--space-16); /* Marge rechts: smal op gsm en tablet, de strook vanaf scherm */
  --split-wide:7fr; /* De brede helft */
  --split-narrow:5fr; /* De smalle helft */
  --measure-title:14ch; /* Breedste maat van een grote kop, zodat hij kort breekt */
  --measure-lead:32ch; /* Breedste maat van een inleiding */
  --measure-text:56ch; /* Leesbreedte van lopende tekst */
  --ratio-portrait:4 / 5; /* Beeldkader naast een grote kop */
  --ratio-landscape:4 / 3; /* Beeldkader elders, en elk kader op gsm */
  --screen-tablet:600px; /* Vanaf hier heet het scherm tablet. Eronder: gsm */
  --screen-desktop:900px; /* Vanaf hier heet het scherm. Twee kolommen, de lijn steekt over */
  --screen-wide:1100px; /* Vanaf hier staat het beeld in de week weer naast de tekst. Eronder, tot 900, staat het eronder */

  /* ===== Hoeken, lijnen en schaduw, basis =====
     Geen pilvorm en geen cirkels: de oude 999 valt weg omdat de gekozen richting knoppen in pilvorm afwijst. Lijnen zijn nooit dunner dan 2. Schaduw is hard en valt recht naar onder. */
  --radius-xs:calc(4px * var(--scale));
  --radius-sm:calc(8px * var(--scale));
  --radius-md:calc(14px * var(--scale));
  --radius-lg:calc(20px * var(--scale));
  --radius-xl:calc(28px * var(--scale));
  --stroke-sm:calc(2px * var(--scale));
  --stroke-md:calc(3px * var(--scale));
  --stroke-lg:calc(4px * var(--scale));
  --shadow-offset-sm:calc(4px * var(--scale));
  --shadow-offset-md:calc(6px * var(--scale));
  --shadow-offset-lg:calc(8px * var(--scale));

  /* ===== Hoeken, lijnen en schaduw, betekenis =====
     Ingedrukt: de schaduw gaat naar 0 en het ding zakt met dezelfde maat. In e-mail wordt de schaduw een onderrand van --stroke-lg. */
  --radius-knot:var(--radius-xs); /* Knoop op de lijn */
  --radius-check:var(--radius-sm); /* Vakje, klein vlakje */
  --radius-focus:var(--radius-sm); /* Focusrand */
  --radius-control:var(--radius-md); /* Knop, veld, klein vlak in een kaart */
  --radius-card:var(--radius-lg); /* Kaart, beeldkader */
  --radius-panel:var(--radius-xl); /* Groot paneel */
  --stroke-border:var(--stroke-sm); /* De stevige rand */
  --stroke-rule:var(--stroke-sm); /* Scheidingslijn */
  --stroke-focus:var(--stroke-md); /* Focusrand, en de afstand tot het element */
  --stroke-check:var(--stroke-md); /* Vinkje, rand van een knoop */
  --stroke-thread:var(--stroke-lg); /* De lijn */
  --shadow-control:0 var(--shadow-offset-md) 0 var(--color-shadow-strong); /* Onder een indigo knop */
  --shadow-control-quiet:0 var(--shadow-offset-md) 0 var(--color-shadow); /* Onder een witte knop */
  --shadow-control-sm:0 var(--shadow-offset-sm) 0 var(--color-shadow-strong); /* Onder een kleine knop */
  --shadow-control-quiet-sm:0 var(--shadow-offset-sm) 0 var(--color-shadow); /* Onder een kleine witte knop, zoals een dagknop */
  --shadow-control-on-moment:0 var(--shadow-offset-md) 0 var(--color-shadow-on-moment); /* Onder een lichte knop die op indigo ligt */
  --shadow-control-accent:0 var(--shadow-offset-md) 0 var(--color-accent); /* Onder de hoofdknop: de enige schaduw in terracotta, hooguit één keer per scherm */
  --shadow-card:0 var(--shadow-offset-lg) 0 var(--color-shadow); /* Onder een kaart, een beeldkader, een paneel */
  --shadow-card-strong:0 var(--shadow-offset-lg) 0 var(--color-shadow-strong); /* Onder een indigo kaart */
  --shadow-card-on-moment:0 var(--shadow-offset-lg) 0 var(--color-shadow-on-moment); /* Onder een lichte kaart die op indigo ligt */
  --shadow-float:0 var(--shadow-offset-md) 0 var(--color-shadow-float); /* Onder de checklist */
  --press-control:var(--shadow-offset-md); /* Hoe diep een knop zakt wanneer je drukt: even diep als zijn schaduw */
  --press-control-sm:var(--shadow-offset-sm); /* Hoe diep een kleine knop zakt */
  --press-card:var(--shadow-offset-lg); /* Hoe diep een klikbare kaart zakt */
  --lift-hover:calc(2px * var(--scale)); /* Hoe ver een knop stijgt onder de muis */

  /* ===== Lagen =====
     Wat boven wat ligt, van onder naar boven. Stappen van tien, zodat er later iets tussen kan. */
  --layer-thread:0; /* De lijn */
  --layer-content:1; /* Kaarten en beelden: altijd boven de lijn */
  --layer-marker:2; /* Knopen op de lijn */
  --layer-sticky:10; /* Wat meeloopt bij het scrollen: de weekbalk */
  --layer-float:20; /* De checklist */
  --layer-menu:30; /* Het uitgeklapte menu */
  --layer-overlay:40; /* Een venster boven alles */
  --layer-skip:50; /* De link "naar de inhoud" voor het toetsenbord */

  /* ===== Beweging =====
     Twee verlopen: veren voor kleine dingen, rustig voor al de rest. Niets duurt langer dan nodig om gezien te worden. */
  --duration-instant:120ms; /* Indrukken en loslaten */
  --duration-fast:200ms; /* Kleur en rand die wisselen */
  --duration-spring:400ms; /* Een vinkje of vakje dat veert */
  --duration-enter:700ms; /* Een kaart die landt, een staaf die groeit */
  --duration-story:1100ms; /* Het woord dat één keer golft */
  --duration-invite:2400ms; /* Eén ronde van de uitnodiging, tot de eerste tik */
  --duration-scene:3000ms; /* Eén volgorde bij aanwijzen in een gebouwd beeld: elke beweging apart blijft binnen --duration-story, samen hooguit dit */
  --stagger:80ms; /* Wachttijd tussen twee dingen die na elkaar bewegen */
  --ease-calm:cubic-bezier(0.22,0.61,0.36,1); /* Rustig: snel weg, zacht aankomen */
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1); /* Veren: schiet even voorbij en komt terug. Enkel voor kleine dingen */
  --tilt-rest:1deg; /* Hoe scheef een kaart op tafel ligt */
  --tilt-hover:2.5deg; /* Hoe ver een kaart kantelt onder de muis */
  --tilt-enter:7deg; /* Hoe scheef een kaart binnenkomt */

  /* ===== Iconen en aanraken =====
     Iconen zijn getekend op een veld van 24 met lijndikte 2 en schalen als geheel. Alles wat klikbaar is, is minstens 44 op 44. */
  --icon-sm:calc(20px * var(--scale)); /* In een regel tekst of een kleine knop */
  --icon-md:calc(24px * var(--scale)); /* Standaard */
  --icon-lg:calc(48px * var(--scale)); /* Het teken bovenaan een kaart */
  --icon-stroke:2; /* Lijndikte op het veld van 24 */
  --check-size:calc(28px * var(--scale)); /* Het vakje dat je aantikt */
  --knot-size:calc(16px * var(--scale)); /* De knoop op de lijn */
  --knot-turn:45deg; /* Een bereikte knoop staat op zijn punt */
  --touch-min:calc(44px * var(--scale)); /* Kleinste aanraakzone, breed en hoog */
  --control-sm:calc(44px * var(--scale)); /* Hoogte van een kleine knop */
  --control-md:calc(52px * var(--scale)); /* Hoogte van een knop en een veld */
  --control-lg:calc(64px * var(--scale)); /* Hoogte van een grote tegel om aan te tikken */
  --size-logo:calc(32px * var(--scale)); /* Het merkteken in de kop */
  --size-chart:calc(128px * var(--scale)); /* Hoogte van de staven van "terug bij jou" */
  --size-float:calc(288px * var(--scale)); /* Breedte van de checklist op scherm */
  --size-weave:clamp(64px, 36.5086px + 7.3310vw, 128px); /* Hoogte van de weefovergang */
  --size-slide-width:1920px; /* Vaste breedte van een dia */
  --size-slide-height:1080px; /* Vaste hoogte van een dia */
  --size-social-width:1080px; /* Breedte van een social beeld. Opdracht 15, 29-09-2026; definitief goedgekeurd door Chalo in opdracht 15f, 30-09-2026 */
  --size-social-portrait-height:1350px; /* Hoogte van een staand social beeld, 4 op 5: carrousel */
  --size-social-story-height:1920px; /* Hoogte van een video-omslag, 9 op 16: Reels en TikTok */
  --size-a4-width:210mm; /* Breedte van een staand A4. Opdracht 16d, 01-10-2026 */
  --size-a4-height:297mm; /* Hoogte van een staand A4 */
  --size-write-line:8mm; /* Afstand tussen twee schrijfregels in een vak om met de hand in te vullen. Nog te toetsen op het proefblad */
  --size-social-band:169px; /* Hoogte van de indigo band onderaan elk social beeld: een achtste van 1350, afgerond. Opdracht 15f, 30-09-2026 */
}

/* Tablet: vanaf 600 breed */
@media (min-width:600px){
  :root,[data-surface]{
    /* Raster */
    --grid-columns:8;
    --grid-gutter:var(--space-24);
  }
}

/* Scherm: vanaf 900 breed */
@media (min-width:900px){
  :root,[data-surface]{
    /* Raster */
    --grid-columns:12;
    --page-margin-end:var(--rail);
  }
}

/* ===== Dia: 1920 breed, alles maal 2, letters vanaf 48 zodat de kleinste stap 18 punt is ===== */
[data-surface="slide"]{
  /* Oppervlak */
  --scale:2;
  /* Afstanden, betekenis */
  --gap-section:var(--space-96);
  --gap-block:var(--space-64);
  --pad-panel:var(--space-48);
  /* Letters, basis */
  --text-xs:40px; /* Op een dia niets onder de bron, beslist in opdracht 14d op 28-09-2026 */
  --text-sm:40px;
  --text-base:48px;
  --text-lg:64px;
  --text-xl:86px;
  --text-2xl:114px;
  --text-3xl:152px;
  --text-4xl:202px;
  --leading-compact:1.35;
  --leading-body:1.4;
  /* Raster */
  --grid-columns:12;
  --grid-gutter:var(--space-24);
  --page-max:100%;
  --page-margin-end:var(--rail);
  /* Iconen en aanraken */
  --size-weave:calc(128px * var(--scale));
}

/* ===== Social: 1080 breed, alles maal 2,5, letters vanaf 48 zodat lopende tekst op een gsm even groot oogt als op de website ===== */
[data-surface="social"]{
  /* Oppervlak */
  --scale:2.5;
  /* Afstanden, betekenis */
  --gap-section:var(--space-96);
  --gap-block:var(--space-64);
  --pad-panel:var(--space-48);
  /* Letters, basis */
  --text-xs:48px; /* Op social niets onder 48, ook de bron niet. Opdracht 15f, 30-09-2026 */
  --text-sm:48px;
  --text-base:48px;
  --text-lg:64px;
  --text-xl:86px;
  --text-2xl:114px;
  --text-3xl:152px;
  --text-4xl:202px;
  --leading-compact:1.35;
  --leading-body:1.5; /* Lopende tekst op social staat op 64 (--text-lg), met regelhoogte 1,5. Opdracht 15c en 15f */
  /* Raster */
  --grid-gutter:var(--space-24);
  --page-max:100%;
  --page-margin-end:var(--rail);
  /* Iconen en aanraken */
  --size-weave:calc(128px * var(--scale));
}

/* ===== A4: alles maal 0,75 want papier mag dichter, letters in punten vanaf 11, niets onder 9 (opdracht 16d, 01-10-2026) ===== */
[data-surface="a4"]{
  /* Oppervlak */
  --scale:0.75;
  /* Afstanden, betekenis */
  --gap-section:var(--space-96);
  --gap-block:var(--space-48); /* 9,5 mm tussen blokken; met 12,7 mm paste de startopbouw van een eenpager niet. Opdracht 16d, 01-10-2026 */
  --pad-panel:var(--space-48);
  /* Letters, basis */
  --text-xs:9pt; /* Op A4 niets onder 9 punt (16b). Opdracht 16d, 01-10-2026 */
  --text-sm:9pt;
  --text-base:11pt; /* Lopende tekst 11 punt (16b). Opdracht 16d, 01-10-2026 */
  --text-lg:13pt; /* Tussenkop: stap, vraag, artikel. Opdracht 16d, 01-10-2026 */
  --text-xl:15pt;
  --text-2xl:18pt;
  --text-3xl:22pt;
  --text-4xl:26pt;
  --leading-compact:1.4;
  --leading-body:1.5;
  /* Raster */
  --grid-columns:12;
  --grid-gutter:var(--space-24);
  --page-max:100%;
  --measure-text:120mm; /* Lopende tekst hooguit 120 mm breed; 56 tekens is op 11 punt 130 mm. Opdracht 16d, 01-10-2026 */
  --rail:20mm;
  --page-margin-end:var(--rail);
  /* Iconen en aanraken */
  --size-weave:calc(128px * var(--scale));
}