/* Just Design Loops — showcase-tokens, gebaseerd op de JDL-huisstijl "Loop Card" (BRAND.md, tokens/tokens.css).
   Laag 1 = primitives (kopie van de huisstijl), laag 2 = semantic. Componenten gebruiken ALLEEN laag 2.
   Twee inkten: Inkt en Tik. Alle hoofdstuk-accenten wijzen daarom naar Tik; variatie komt uit vlak en type. */

/* Geladen gewichten: 400 (body/lopende tekst) en 700 (display/koppen/knoppen).
   JetBrains Mono: 400 (mono/labels/specs).
   Ongebruikte sneden 500 en 600 worden niet geladen; knoppen en labels vallen naadloos op 700. */
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* ---------- Laag 1: primitives (uit de huisstijl) ---------- */
  --p-ink-900: #101820;   /* Inkt — Pantone Black 6 C */
  --p-ink-800: #1c2530;
  --p-ink-700: #2a3542;
  --p-grafiet-600: #4b5361;
  --p-steen-400: #9aa0ac; /* Steen — verhoogd contrast (4.6:1 op inkt-900 voor WCAG AA) */
  --p-steen-500: #8b929d; /* Steen — origineel Pantone Cool Gray 8 C */
  --p-lijn-200: #d9dde2;
  --p-papier-50: #f3f4f6; /* Papier — koel kaartwit */
  --p-wit: #ffffff;
  --p-tik-500: #e5421e;   /* Tik — Pantone 1665 C, alleen voor de stip en grafisch */
  --p-tik-700: #b3300f;   /* Tik Diep — tekst en knoppen op licht */
  --p-tik-900: #731e08;   /* Tik Donker — 3D tactiele schaduwbasis op dag */
  --p-tik-300: #ff7a57;   /* Tik Licht — tekst en knoppen op donker */
  --p-groen-700: #1b7347; --p-groen-300: #5fd39a;
  --p-amber-800: #7a4e00; --p-amber-300: #f2c14e;
  --p-vlak-dag-2: #e8eaed;

  /* 8pt-raster & dimensionale tussenstappen */
  --p-0-5: 2px;
  --p-1: 4px;
  --p-1-5: 6px;
  --p-2: 8px;
  --p-2-5: 10px;
  --p-3: 12px;
  --p-3-5: 14px;
  --p-4: 16px;
  --p-4-5: 18px;
  --p-5: 24px;
  --p-6: 32px;
  --p-7: 48px;
  --p-8: 64px;
  --p-9: 96px;
  --p-10: 128px;
  --p-11: 140px;
  --p-12: 200px;
  --p-13: 240px;

  /* Aanvullende dimensionale primitives */
  --p-sr-1: 1px;
  --p-lijn-half: 1.5px;
  --p-lijn-2-5: 2.5px;
  --p-kruis-offset: 3.5px;
  --p-5-px: 5px;
  --p-7-px: 7px;
  --p-36-px: 36px;
  --p-56-px: 56px;
  --p-72-px: 72px;
  --p-76-px: 76px;
  --p-130-px: 130px;
  --p-150-px: 150px;
  --p-200-px: 200px;
  --p-220-px: 220px;
  --p-230-px: 230px;
  --p-280-px: 280px;
  --p-300-px: 300px;
  --p-330-px: 330px;
  --p-340-px: 340px;
  --p-360-px: 360px;
  --p-420-px: 420px;
  --p-440-px: 440px;
  --p-540-px: 540px;
  --p-560-px: 560px;
  --p-600-px: 600px;
  --p-640-px: 640px;
  --p-680-px: 680px;
  --p-1200-px: 1200px;

  /* Responsieve & component rasterwaarden */
  --p-tik-veld-min: 440px;
  --p-tik-veld-max: 600px;
  --p-tik-kaart-min: 180px;
  --p-tik-kaart-max: 280px;
  --p-tik-golven-min: 110px;
  --p-tik-golven-max: 150px;
  --p-telefoon-min: 220px;
  --p-telefoon-max: 300px;
  --p-muur-tegel-min: 240px;
  --p-muur-tegel-max: 360px;

  /* Radius primitives */
  --p-r-0: 2px;
  --p-r-xs: 4px;
  --p-r-1: 8px;
  --p-r-1-5: 12px;
  --p-r-kaart: 14px;
  --p-r-2: 16px;
  --p-r-kaart-3d: 18px;
  --p-r-3: 24px;
  --p-r-squircle: 24%;
  --p-r-telefoon: 36px;
  --p-r-rond: 999px;

  /* Raakvlak primitives */
  --p-raak-s: 44px;
  --p-raak-m: 48px;
  --p-raak-l: 64px;

  /* Icoon primitives */
  --p-icoon-xs: 16px;
  --p-icoon-s: 20px;
  --p-icoon-status: 22px;
  --p-icoon-m: 24px;
  --p-icoon-l: 36px;
  --p-icoon-xl: 44px;

  /* Lijn primitives */
  --p-lijn-1: 1px;
  --p-lijn-2: 2px;
  --p-lijn-3: 3px;
  --p-spoor-patroon: 2 10;
  --p-ring-dikte: 34px;

  /* Verhoudingen & Perspectief primitives */
  --p-aspect-kaart: 85.6 / 54;
  --p-aspect-telefoon: 9 / 18.5;
  --p-aspect-tegel: 4 / 3;
  --p-perspectief-3d: 1200px;
  --p-wissel-hoogte: 2.6em;

  /* Schaduw & gloed primitives */
  --p-wazig-s: blur(4px);
  --p-wazig-m: blur(12px);
  --p-schaduw-logo: 0 8px 20px rgba(0, 0, 0, 0.35);
  --p-outline-logo: 1px solid rgba(243, 244, 246, 0.45);
  --p-schaduw-tactiel-nacht: 0 4px 0 var(--p-tik-700), 0 8px 18px rgba(0, 0, 0, 0.28);
  --p-schaduw-tactiel-dag: 0 4px 0 var(--p-tik-900), 0 8px 16px rgba(179, 48, 15, 0.25);
  --p-schaduw-tactiel-hover-nacht: 0 5px 0 var(--p-tik-700), 0 10px 22px rgba(0, 0, 0, 0.32);
  --p-schaduw-tactiel-hover-dag: 0 5px 0 var(--p-tik-700), 0 10px 22px rgba(0, 0, 0, 0.32);
  --p-schaduw-tactiel-actief-nacht: 0 1px 0 var(--p-tik-700), 0 2px 6px rgba(0, 0, 0, 0.2);
  --p-schaduw-tactiel-actief-dag: 0 1px 0 var(--p-tik-700), 0 2px 6px rgba(0, 0, 0, 0.2);
  --p-schaduw-ongeldig: 0 0 0 1px var(--p-tik-300);

  /* Glans, gradient & filter primitives */
  --p-glans-licht: rgba(255, 255, 255, 0.55);
  --p-glans-folie: rgba(255, 255, 255, 0.5);
  --p-schaduw-kaart: rgba(0, 0, 0, 0.45);
  --p-filter-mat: saturate(0.9);

  /* Speciale componentmaten */
  --p-schakel-w: 28px;
  --p-menu-w: 18px;
  --p-tk-symbool-w: 40px;
  --p-tk-symbool-h: 26px;
  --p-tk-chip-maat: 30px;
  --p-golf-offset: -90px;
  --p-golf-maat: 180px;
  --p-cursor-punt: 10px;
  --p-loader-symbool-w: 120px;
  --p-loader-symbool-h: 80px;
  --p-beloften-max: 980px;
  --p-kop-offset: 88px;

  /* Animatie- & timing primitives */
  --p-duur-volg: 120ms;
  --p-duur-inkt: 260ms;
  --p-duur-schud: 360ms;
  --p-duur-loader-wacht: 650ms;
  --p-duur-meter: 1400ms;
  --p-vertraging-meter: 200ms;
  --p-duur-hint: 1.8s;
  --p-duur-band: 40s;
  --p-stap-splits: 55ms;
  --p-stap-60: 60ms;
  --p-stap-120: 120ms;
  --p-stap-140: 140ms;
  --p-stap-150: 150ms;
  --p-stap-180: 180ms;
  --p-stap-240: 240ms;
  --p-stap-280: 280ms;
  --p-stap-300: 300ms;
  --p-stap-360: 360ms;
  --p-stap-450: 450ms;

  /* ---------- Laag 2: semantic (standaard = nacht) ---------- */
  --kleur-bg: var(--p-ink-900);
  --kleur-vlak: var(--p-ink-800);
  --kleur-vlak-2: var(--p-ink-700);
  --kleur-rand: var(--p-ink-700);
  --kleur-tekst: var(--p-papier-50);
  --kleur-tekst-zacht: var(--p-steen-400);
  --kleur-placeholder: var(--p-steen-400);
  --opacity-placeholder: 0.85;
  --kleur-op-accent: var(--p-ink-900);
  --kleur-focus: var(--p-papier-50);
  --kleur-stip: var(--p-tik-500);
  --kleur-succes: var(--p-groen-300);
  --kleur-waarschuwing: var(--p-amber-300);

  /* Samengestelde kleursemantiek */
  --kleur-succes-zacht: color-mix(in srgb, var(--kleur-succes) 14%, var(--kleur-vlak));
  --kleur-fout-zacht: color-mix(in srgb, var(--accent) 14%, var(--kleur-vlak));
  --kleur-bento-spot: color-mix(in srgb, var(--accent) 22%, transparent);
  --kleur-morph-vlak: color-mix(in srgb, var(--accent) 18%, transparent);

  --accent-1: var(--p-tik-300);
  --accent-2: var(--p-tik-300);
  --accent-3: var(--p-tik-300);
  --accent-4: var(--p-tik-300);
  --accent-5: var(--p-tik-300);
  --accent-6: var(--p-tik-300);
  --accent: var(--accent-1);

  --ruimte-4: var(--p-1);
  --ruimte-xxs: var(--p-1-5);
  --ruimte-xs: var(--p-2);
  --ruimte-10: var(--p-2-5);
  --ruimte-sm: var(--p-3);
  --ruimte-compact: var(--p-3-5);
  --ruimte-s: var(--p-4);
  --ruimte-md: var(--p-4-5);
  --ruimte-m: var(--p-5);
  --ruimte-32: var(--p-6);
  --ruimte-l: var(--p-7);
  --ruimte-xl: var(--p-9);
  --ruimte-sectie: clamp(var(--p-9), 14vw, 200px);
  --rand-gutter: clamp(var(--p-4), 4vw, var(--p-8));
  --kop-offset: var(--p-kop-offset);

  --radius-0: var(--p-r-0);
  --radius-xs: var(--p-r-xs);
  --radius-s: var(--p-r-1);
  --radius-sm: var(--p-r-1-5);
  --radius-kaart: var(--p-r-kaart);
  --radius-m: var(--p-r-2);
  --radius-kaart-3d: var(--p-r-kaart-3d);
  --radius-l: var(--p-r-3);
  --radius-sticker: var(--p-r-squircle);
  --radius-logo: var(--p-r-squircle);
  --radius-telefoon: var(--p-r-telefoon);
  --radius-rond: var(--p-r-rond);

  --raak-s: var(--p-raak-s);
  --raak: var(--p-raak-m);
  --raak-l: var(--p-raak-l);

  --icoon-xs: var(--p-icoon-xs);
  --icoon-s: var(--p-icoon-s);
  --icoon-status: var(--p-icoon-status);
  --icoon-m: var(--p-icoon-m);
  --icoon-l: var(--p-icoon-l);
  --icoon-xl: var(--p-icoon-xl);

  --rand-dikte: var(--p-lijn-1);
  --rand-dikte-dik: var(--p-lijn-2);
  --rand-dikte-zwaar: var(--p-lijn-3);
  --rand-overlap: -1px;
  --draad-spoor-dikte: var(--p-lijn-half);
  --draad-spoor-patroon: var(--p-spoor-patroon);
  --icoon-lijn-dik: var(--p-lijn-2-5);

  --schaduw-tactiel: var(--p-schaduw-tactiel-nacht);
  --schaduw-tactiel-hover: var(--p-schaduw-tactiel-hover-nacht);
  --schaduw-tactiel-actief: var(--p-schaduw-tactiel-actief-nacht);
  --schaduw-logo: var(--p-schaduw-logo);
  --outline-logo: var(--p-outline-logo);
  --schaduw-ongeldig: var(--p-schaduw-ongeldig);
  --wazig-s: var(--p-wazig-s);
  --wazig-m: var(--p-wazig-m);
  --glans-kleur: var(--p-glans-licht);
  --folie-glans-kleur: var(--p-glans-folie);
  --schaduw-kaart-kleur: var(--p-schaduw-kaart);
  --filter-mat: var(--p-filter-mat);

  /* Component- en lay-outtokens (semantisch) */
  --nav-mobiel-top: var(--p-76-px);
  --menu-gap: var(--p-5-px);
  --menu-kruis-y: var(--p-kruis-offset);
  --menu-kruis-y-neg: -3.5px;
  --hoek-kruis: 45deg;
  --schakel-breedte: var(--p-schakel-w);
  --menu-streep-breedte: var(--p-menu-w);
  --balk-breedte: var(--p-8);
  --hero-offset: var(--p-11);
  --beloften-max-w: var(--p-beloften-max);
  --tk-symbool-w: var(--p-tk-symbool-w);
  --tk-symbool-h: var(--p-tk-symbool-h);
  --tk-chip-maat: var(--p-tk-chip-maat);
  --golf-offset: var(--p-golf-offset);
  --golf-maat: var(--p-golf-maat);
  --loader-symbool-w: var(--p-loader-symbool-w);
  --loader-symbool-h: var(--p-loader-symbool-h);
  --logo-max-w: var(--p-10);
  --meter-max-w: var(--p-12);
  --meter-lijn: var(--p-2-5);
  --tegel-min-h: var(--p-13);
  --cursor-maat: var(--p-cursor-punt);

  --tik-veld-h: clamp(var(--p-tik-veld-min), 60vw, var(--p-tik-veld-max));
  --tik-veld-mobiel-h: var(--p-600-px);
  --tik-kaart-w: clamp(var(--p-tik-kaart-min), 26vw, var(--p-tik-kaart-max));
  --tik-kaart-mobiel-w: var(--p-200-px);
  --tik-kaart-mobiel-offset: -100px;
  --tik-golven-offset: clamp(var(--p-tik-golven-min), 14vw, var(--p-tik-golven-max));
  --tik-golven-mobiel-top: var(--p-330-px);
  --telefoon-w: clamp(var(--p-telefoon-min), 28vw, var(--p-telefoon-max));
  --telefoon-mobiel-w: var(--p-230-px);
  --telefoon-mobiel-bottom: -60px;
  --verhouding-kaart: var(--p-aspect-kaart);
  --verhouding-telefoon: var(--p-aspect-telefoon);
  --verhouding-tegel: var(--p-aspect-tegel);

  --perspectief-kaart: var(--p-perspectief-3d);
  --kaart-scene-h: var(--p-420-px);
  --kaart-scene-mobiel-h: var(--p-300-px);
  --kaart-3d-w: min(100%, var(--p-440-px));
  --kaart-sticker-w: min(70%, var(--p-280-px));
  --kaart-standaard-w: min(72%, var(--p-300-px));
  --kv-symbool-w: var(--p-56-px);

  --bento-spot-straal: var(--p-420-px);
  --vink-verschuiving: -12px;
  --wissel-h: var(--p-wissel-hoogte);

  --wf-plak-top: var(--p-72-px);
  --wf-beeld-w: min(100%, var(--p-560-px));
  --wf-beeld-mobiel-w: min(84%, var(--p-360-px), 46svh);
  --wf-lijn: var(--p-7-px);
  --voorna-min-h: var(--p-340-px);
  --voorna-lijst-max: var(--p-420-px);
  --greep-lijn-ml: -1.5px;

  --ambacht-min-h: 120svh;
  --ambacht-max-w: var(--p-1200-px);
  --muur-min-h: calc(clamp(var(--p-360-px), 42vw, var(--p-540-px)) + var(--ruimte-s));
  --muur-tegel-w: clamp(var(--p-muur-tegel-min), 28vw, var(--p-muur-tegel-max));
  --muur-tegel-min: var(--p-muur-tegel-min);

  --veer-valhoogte: var(--p-150-px);
  --slot-lus-w: min(62vw, var(--p-680-px));
  --sl-ring-dikte: var(--p-ring-dikte);

  --contact-max-w: var(--p-640-px);
  --contact-textarea-h: var(--p-130-px);
  --tactiel-hover-y: -1px;

  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tekst: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font-tekst);
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --max-breedte: 1440px;
  --schaduw-vlak: var(--p-schaduw-logo);
  --ease-in-uit: cubic-bezier(0.4, 0, 0.2, 1);
  --tekst-base: var(--tekst-m);
  --kleur-groen: var(--kleur-succes);
  --kleur-rand-zacht: var(--kleur-rand);
  --duur-snel: var(--duur-volg);
  --tekst-2xl: var(--tekst-xl);
  --kleur-tekst-zeer-zacht: var(--kleur-tekst-zacht);
  --accent-transparant: color-mix(in srgb, var(--accent) 25%, transparent);
  --tekst-mega: clamp(3rem, 11vw, 10.5rem);
  --tekst-xl: clamp(2.25rem, 6vw, 5rem);
  --tekst-l: clamp(1.5rem, 3vw, 2.25rem);
  --tekst-m: 1.125rem;
  --tekst-s: 1rem;
  --tekst-xs: 0.8125rem;
  --tekst-micro: 0.6875rem;
  --tekst-xxs: 0.75rem;
  --tekst-titel-3: 1.25rem;
  --tekst-titel-2: 1.375rem;
  --tekst-titel-1: 1.5rem;
  --tekst-getal: 1.75rem;
  --tekst-tijd: 2.75rem;

  /* motion: één easing voor binnenkomst, één voor veren */
  --duur-micro: 160ms;
  --duur-uit: 170ms;
  --duur-in: 240ms;
  --duur-onthul: 420ms; /* scroll-onthulling: bewust langer dan enter (240 ms) uit de huisstijl, zie PLAN.md */
  --duur-veer: 600ms;
  --duur-langzaam: 900ms;
  --duur-golf: 1100ms;
  --duur-volg: var(--p-duur-volg);
  --duur-inkt: var(--p-duur-inkt);
  --duur-schud: var(--p-duur-schud);
  --duur-loader-wacht: var(--p-duur-loader-wacht);
  --duur-meter: var(--p-duur-meter);
  --vertraging-meter: var(--p-vertraging-meter);
  --duur-hint: var(--p-duur-hint);
  --duur-voet-band: var(--p-duur-band);
  --stap-splits: var(--p-stap-splits);
  --vertraging-60: var(--p-stap-60);
  --vertraging-120: var(--p-stap-120);
  --vertraging-140: var(--p-stap-140);
  --vertraging-150: var(--p-stap-150);
  --vertraging-180: var(--p-stap-180);
  --vertraging-240: var(--p-stap-240);
  --vertraging-280: var(--p-stap-280);
  --vertraging-300: var(--p-stap-300);
  --vertraging-360: var(--p-stap-360);
  --vertraging-450: var(--p-stap-450);
  --ease-uit: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-veer: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}

/* Tweede tokenlaag — Donker thema (expliciete selectors) */
:root[data-thema="nacht"],
:root[data-thema="donker"],
:root[data-thema="dark"],
:root[data-theme="dark"] {
  --kleur-bg: var(--p-ink-900);
  --kleur-vlak: var(--p-ink-800);
  --kleur-vlak-2: var(--p-ink-700);
  --kleur-rand: var(--p-ink-700);
  --kleur-tekst: var(--p-papier-50);
  --kleur-tekst-zacht: var(--p-steen-400);
  --kleur-placeholder: var(--p-steen-400);
  --opacity-placeholder: 0.85;
  --kleur-op-accent: var(--p-ink-900);
  --kleur-focus: var(--p-papier-50);
  --kleur-stip: var(--p-tik-500);
  --kleur-succes: var(--p-groen-300);
  --kleur-waarschuwing: var(--p-amber-300);
  --kleur-succes-zacht: color-mix(in srgb, var(--kleur-succes) 14%, var(--kleur-vlak));
  --kleur-fout-zacht: color-mix(in srgb, var(--accent) 14%, var(--kleur-vlak));
  --kleur-bento-spot: color-mix(in srgb, var(--accent) 22%, transparent);
  --kleur-morph-vlak: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-1: var(--p-tik-300);
  --accent-2: var(--p-tik-300);
  --accent-3: var(--p-tik-300);
  --accent-4: var(--p-tik-300);
  --accent-5: var(--p-tik-300);
  --accent-6: var(--p-tik-300);
  --accent: var(--accent-1);
  --schaduw-tactiel: var(--p-schaduw-tactiel-nacht);
  --schaduw-tactiel-hover: var(--p-schaduw-tactiel-hover-nacht);
  --schaduw-tactiel-actief: var(--p-schaduw-tactiel-actief-nacht);
  --schaduw-logo: var(--p-schaduw-logo);
  --outline-logo: var(--p-outline-logo);
  --schaduw-ongeldig: var(--p-schaduw-ongeldig);
  --glans-kleur: var(--p-glans-licht);
  --folie-glans-kleur: var(--p-glans-folie);
  --schaduw-kaart-kleur: var(--p-schaduw-kaart);
  --filter-mat: var(--p-filter-mat);
  color-scheme: dark;
}

/* Tweede tokenlaag — Dag / Licht thema */
:root[data-thema="dag"],
:root[data-thema="licht"],
:root[data-thema="light"],
:root[data-theme="light"] {
  --kleur-bg: var(--p-papier-50);
  --kleur-vlak: var(--p-wit);
  --kleur-vlak-2: var(--p-vlak-dag-2);
  --kleur-rand: var(--p-lijn-200);
  --kleur-tekst: var(--p-ink-900);
  --kleur-tekst-zacht: var(--p-grafiet-600);
  --kleur-placeholder: var(--p-grafiet-600);
  --opacity-placeholder: 0.85;
  --kleur-op-accent: var(--p-wit);
  --kleur-focus: var(--p-ink-900);
  --kleur-stip: var(--p-tik-500);
  --kleur-succes: var(--p-groen-700);
  --kleur-waarschuwing: var(--p-amber-800);
  --kleur-succes-zacht: color-mix(in srgb, var(--kleur-succes) 14%, var(--kleur-vlak));
  --kleur-fout-zacht: color-mix(in srgb, var(--accent) 14%, var(--kleur-vlak));
  --kleur-bento-spot: color-mix(in srgb, var(--accent) 22%, transparent);
  --kleur-morph-vlak: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-1: var(--p-tik-700);
  --accent-2: var(--p-tik-700);
  --accent-3: var(--p-tik-700);
  --accent-4: var(--p-tik-700);
  --accent-5: var(--p-tik-700);
  --accent-6: var(--p-tik-700);
  --accent: var(--accent-1);
  --schaduw-tactiel: var(--p-schaduw-tactiel-dag);
  --schaduw-tactiel-hover: var(--p-schaduw-tactiel-hover-dag);
  --schaduw-tactiel-actief: var(--p-schaduw-tactiel-actief-dag);
  --schaduw-ongeldig: 0 0 0 1px var(--p-tik-700);
  --glans-kleur: rgba(0, 0, 0, 0.08);
  --folie-glans-kleur: rgba(0, 0, 0, 0.06);
  --schaduw-kaart-kleur: rgba(0, 0, 0, 0.12);
  --schaduw-logo: 0 8px 20px rgba(0, 0, 0, 0.12);
  --outline-logo: 1px solid rgba(16, 24, 32, 0.15);
  color-scheme: light;
}

/* Systeemvoorkeur fallback zonder JavaScript (anti-flicker CSS gate) */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="nacht"]):not([data-thema="donker"]):not([data-thema="dark"]):not([data-theme="dark"]) {
    --kleur-bg: var(--p-papier-50);
    --kleur-vlak: var(--p-wit);
    --kleur-vlak-2: var(--p-vlak-dag-2);
    --kleur-rand: var(--p-lijn-200);
    --kleur-tekst: var(--p-ink-900);
    --kleur-tekst-zacht: var(--p-grafiet-600);
    --kleur-placeholder: var(--p-grafiet-600);
    --opacity-placeholder: 0.85;
    --kleur-op-accent: var(--p-wit);
    --kleur-focus: var(--p-ink-900);
    --kleur-succes: var(--p-groen-700);
    --kleur-waarschuwing: var(--p-amber-800);
    --kleur-succes-zacht: color-mix(in srgb, var(--kleur-succes) 14%, var(--kleur-vlak));
    --kleur-fout-zacht: color-mix(in srgb, var(--accent) 14%, var(--kleur-vlak));
    --kleur-bento-spot: color-mix(in srgb, var(--accent) 22%, transparent);
    --kleur-morph-vlak: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-1: var(--p-tik-700);
    --accent-2: var(--p-tik-700);
    --accent-3: var(--p-tik-700);
    --accent-4: var(--p-tik-700);
    --accent-5: var(--p-tik-700);
    --accent-6: var(--p-tik-700);
    --accent: var(--accent-1);
    --schaduw-tactiel: var(--p-schaduw-tactiel-dag);
    --schaduw-tactiel-hover: var(--p-schaduw-tactiel-hover-dag);
    --schaduw-tactiel-actief: var(--p-schaduw-tactiel-actief-dag);
    --schaduw-ongeldig: 0 0 0 1px var(--p-tik-700);
    --glans-kleur: rgba(0, 0, 0, 0.08);
    --folie-glans-kleur: rgba(0, 0, 0, 0.06);
    --schaduw-kaart-kleur: rgba(0, 0, 0, 0.12);
    --schaduw-logo: 0 8px 20px rgba(0, 0, 0, 0.12);
    --outline-logo: 1px solid rgba(16, 24, 32, 0.15);
    color-scheme: light;
  }
}