@dsn-starter-kit/design-tokens 1.0.2 → 3.0.0

package/dist/css/start-dark-default.css

@@ -3,18 +3,18 @@
  */
 
 :root {
-  --dsn-text-font-family-default: IBM Plex Sans, sans-serif; /** Default font family for body text */
-  --dsn-text-font-family-monospace: IBM Plex Mono, monospace; /** Monospace font family for code */
-  --dsn-text-font-weight-default: 400; /** Regular weight */
-  --dsn-text-font-weight-bold: 700; /** Bold weight */
-  --dsn-text-max-inline-size: 65ch; /** Maximum line length for readable body text (paragraphs, lists) */
-  --dsn-text-line-height-sm: 1.5; /** 150% line height for small text */
-  --dsn-text-line-height-md: 1.5; /** 150% line height for medium text */
-  --dsn-text-line-height-lg: 1.25; /** 125% line height for large text */
-  --dsn-text-line-height-xl: 1.25; /** 125% line height for headings */
-  --dsn-text-line-height-2xl: 1.25; /** 125% line height for large headings */
-  --dsn-text-line-height-3xl: 1.25; /** 125% line height for display text */
-  --dsn-text-line-height-4xl: 1.1; /** 110% line height for hero text */
+  --dsn-text-font-family-default: IBM Plex Sans, sans-serif; /** Standaard lettertype voor bodytekst */
+  --dsn-text-font-family-monospace: IBM Plex Mono, monospace; /** Monospace lettertype voor code */
+  --dsn-text-font-weight-default: 400; /** Regulier gewicht */
+  --dsn-text-font-weight-bold: 700; /** Vet gewicht */
+  --dsn-text-max-inline-size: 65ch; /** Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten) */
+  --dsn-text-line-height-sm: 1.5; /** 150% regelafstand voor kleine tekst */
+  --dsn-text-line-height-md: 1.5; /** 150% regelafstand voor middelgrote tekst */
+  --dsn-text-line-height-lg: 1.25; /** 125% regelafstand voor grote tekst */
+  --dsn-text-line-height-xl: 1.25; /** 125% regelafstand voor koppen */
+  --dsn-text-line-height-2xl: 1.25; /** 125% regelafstand voor grote koppen */
+  --dsn-text-line-height-3xl: 1.25; /** 125% regelafstand voor display-tekst */
+  --dsn-text-line-height-4xl: 1.1; /** 110% regelafstand voor hero-tekst */
   --dsn-text-font-size-sm: clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem); /** Small text - 14px to 17px (fluid) */
   --dsn-text-font-size-md: clamp(1rem, 0.875rem + 0.375vw, 1.28125rem); /** Medium text - 16px to 20.5px (fluid) */
   --dsn-text-font-size-lg: clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem); /** Large text - 20px to 24.5px (fluid) */
@@ -22,92 +22,92 @@
   --dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); /** 2XL text - 32px to 41px (fluid) */
   --dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); /** 3XL text - 40px to 53px (fluid) */
   --dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); /** 4XL text - 48px to 66px (fluid) */
-  --dsn-heading-font-family: IBM Plex Sans, sans-serif; /** Font family for headings */
-  --dsn-heading-font-weight: 700; /** Bold weight for headings */
-  --dsn-space-none: 0px; /** No spacing */
-  --dsn-space-base: 0.5rem; /** 8px - Base unit for 8pt grid system */
-  --dsn-space-block-2xs: calc(0.5rem * 0.125); /** 1px - Vertical spacing within components */
-  --dsn-space-block-xs: calc(0.5rem * 0.25); /** 2px - Vertical spacing within components */
-  --dsn-space-block-sm: calc(0.5rem * 0.5); /** 4px - Vertical spacing within components */
-  --dsn-space-block-md: calc(0.5rem * 1); /** 8px - Vertical spacing within components */
-  --dsn-space-block-lg: calc(0.5rem * 1.5); /** 12px - Vertical spacing within components */
-  --dsn-space-block-xl: calc(0.5rem * 2); /** 16px - Vertical spacing within components */
-  --dsn-space-block-2xl: calc(0.5rem * 2.5); /** 20px - Vertical spacing within components */
-  --dsn-space-block-3xl: calc(0.5rem * 3); /** 24px - Vertical spacing within components */
-  --dsn-space-block-4xl: calc(0.5rem * 4); /** 32px - Vertical spacing within components */
-  --dsn-space-block-5xl: calc(0.5rem * 6); /** 48px - Vertical spacing within components */
-  --dsn-space-block-6xl: calc(0.5rem * 8); /** 64px - Vertical spacing within components */
-  --dsn-space-inline-2xs: calc(0.5rem * 0.125); /** 1px - Horizontal spacing within components */
-  --dsn-space-inline-xs: calc(0.5rem * 0.25); /** 2px - Horizontal spacing within components */
-  --dsn-space-inline-sm: calc(0.5rem * 0.5); /** 4px - Horizontal spacing within components */
-  --dsn-space-inline-md: calc(0.5rem * 1); /** 8px - Horizontal spacing within components */
-  --dsn-space-inline-lg: calc(0.5rem * 1.5); /** 12px - Horizontal spacing within components */
-  --dsn-space-inline-xl: calc(0.5rem * 2); /** 16px - Horizontal spacing within components */
-  --dsn-space-inline-2xl: calc(0.5rem * 2.5); /** 20px - Horizontal spacing within components */
-  --dsn-space-inline-3xl: calc(0.5rem * 3); /** 24px - Horizontal spacing within components */
-  --dsn-space-inline-4xl: calc(0.5rem * 4); /** 32px - Horizontal spacing within components */
-  --dsn-space-inline-5xl: calc(0.5rem * 6); /** 48px - Horizontal spacing within components */
-  --dsn-space-inline-6xl: calc(0.5rem * 8); /** 64px - Horizontal spacing within components */
-  --dsn-space-text-3xs: calc(0.5rem * 0.125); /** 1px - Spacing between text and icons */
-  --dsn-space-text-2xs: calc(0.5rem * 0.25); /** 2px - Spacing between text and icons */
-  --dsn-space-text-xs: calc(0.5rem * 0.25); /** 2px - Spacing between text and icons */
-  --dsn-space-text-sm: calc(0.5rem * 0.5); /** 4px - Spacing between text and icons */
-  --dsn-space-text-md: calc(0.5rem * 1); /** 8px - Spacing between text and icons */
-  --dsn-space-text-lg: calc(0.5rem * 1.5); /** 12px - Spacing between text and icons */
-  --dsn-space-text-xl: calc(0.5rem * 2); /** 16px - Spacing between text and icons */
-  --dsn-space-text-2xl: calc(0.5rem * 2.5); /** 20px - Spacing between text and icons */
-  --dsn-space-text-3xl: calc(0.5rem * 3); /** 24px - Spacing between text and icons */
-  --dsn-space-column-2xs: calc(0.5rem * 0.125); /** 1px - Horizontal spacing between components */
-  --dsn-space-column-xs: calc(0.5rem * 0.25); /** 2px - Horizontal spacing between components */
-  --dsn-space-column-sm: calc(0.5rem * 0.5); /** 4px - Horizontal spacing between components */
-  --dsn-space-column-md: calc(0.5rem * 1); /** 8px - Horizontal spacing between components */
-  --dsn-space-column-lg: calc(0.5rem * 1.5); /** 12px - Horizontal spacing between components */
-  --dsn-space-column-xl: calc(0.5rem * 2); /** 16px - Horizontal spacing between components */
-  --dsn-space-column-2xl: calc(0.5rem * 2.5); /** 20px - Horizontal spacing between components */
-  --dsn-space-column-3xl: calc(0.5rem * 3); /** 24px - Horizontal spacing between components */
-  --dsn-space-column-4xl: calc(0.5rem * 4); /** 32px - Horizontal spacing between components */
-  --dsn-space-column-5xl: calc(0.5rem * 8); /** 64px - Horizontal spacing between components */
-  --dsn-space-column-6xl: calc(0.5rem * 20); /** 160px - Horizontal spacing between components */
-  --dsn-space-row-2xs: calc(0.5rem * 0.125); /** 1px - Vertical spacing between components */
-  --dsn-space-row-xs: calc(0.5rem * 0.25); /** 2px - Vertical spacing between components */
-  --dsn-space-row-sm: calc(0.5rem * 0.5); /** 4px - Vertical spacing between components */
-  --dsn-space-row-md: calc(0.5rem * 1); /** 8px - Vertical spacing between components */
-  --dsn-space-row-lg: calc(0.5rem * 1.5); /** 12px - Vertical spacing between components */
-  --dsn-space-row-xl: calc(0.5rem * 2); /** 16px - Vertical spacing between components */
-  --dsn-space-row-2xl: calc(0.5rem * 2.5); /** 20px - Vertical spacing between components */
-  --dsn-space-row-3xl: calc(0.5rem * 3); /** 24px - Vertical spacing between components */
-  --dsn-space-row-4xl: calc(0.5rem * 4); /** 32px - Vertical spacing between components */
-  --dsn-space-row-5xl: calc(0.5rem * 8); /** 64px - Vertical spacing between components */
-  --dsn-space-row-6xl: calc(0.5rem * 20); /** 160px - Vertical spacing between components */
-  --dsn-pointer-target-min-block-size: 3rem; /** WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target */
-  --dsn-pointer-target-min-inline-size: 3rem; /** WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target */
-  --dsn-border-radius-square: 0px; /** No border radius — square corners */
-  --dsn-border-radius-sm: 4px; /** Small border radius */
-  --dsn-border-radius-md: 8px; /** Medium border radius */
-  --dsn-border-radius-lg: 16px; /** Large border radius */
-  --dsn-border-radius-round: 999px; /** Fully rounded (pills, circles) */
-  --dsn-border-width-none: 0px; /** No border width */
-  --dsn-border-width-thin: 1px; /** Thin border */
-  --dsn-border-width-medium: 2px; /** Medium border */
-  --dsn-border-width-thick: 4px; /** Thick border */
-  --dsn-focus-outline-offset: 0px; /** Focus outline offset */
-  --dsn-focus-outline-style: dashed; /** Focus outline style */
-  --dsn-focus-outline-width: 2px; /** Focus outline width */
-  --dsn-focus-background-color: #ffdd00; /** Focus indicator background */
-  --dsn-focus-color: #0b0c0c; /** Focus indicator text color */
-  --dsn-focus-outline-color: #f4f4f4; /** Focus outline color - light for dark backgrounds */
-  --dsn-focus-inverse-outline-color: #0b0c0c; /** Focus outline color for use on light/tinted backgrounds in dark mode - opposite of outline-color */
-  --dsn-form-control-max-inline-size: 25rem; /** Form control maximum width */
-  --dsn-form-control-width-xs: 10ch; /** Extra small width - for very short inputs (e.g., postal code, year, CVV) */
-  --dsn-form-control-width-sm: 14ch; /** Small width - for short inputs (e.g., time HH:MM, short codes) */
-  --dsn-form-control-width-md: 20ch; /** Medium width - for medium inputs (e.g., date dd/mm/yyyy, phone number) */
-  --dsn-form-control-width-lg: 32ch; /** Large width (default) - for standard inputs (e.g., name, email) */
-  --dsn-form-control-width-xl: 48ch; /** Extra large width - for longer inputs (e.g., URL) */
-  --dsn-form-control-width-full: 100%; /** Full width - responsive to container */
-  --dsn-breakpoint-sm: 36em; /** Small breakpoint - ~576px. Reference only; use hardcoded values in CSS @media rules. */
-  --dsn-breakpoint-md: 44em; /** Medium breakpoint - ~704px. Reference only; use hardcoded values in CSS @media rules. */
-  --dsn-breakpoint-lg: 64em; /** Large breakpoint - ~1024px. Reference only; use hardcoded values in CSS @media rules. */
-  --dsn-breakpoint-xl: 74em; /** Extra large breakpoint - ~1184px. Reference only; use hardcoded values in CSS @media rules. */
+  --dsn-heading-font-family: IBM Plex Sans, sans-serif; /** Lettertype voor koppen */
+  --dsn-heading-font-weight: 700; /** Vet gewicht voor koppen */
+  --dsn-space-none: 0px; /** Geen afstand */
+  --dsn-space-base: 0.5rem; /** 8px - Basiseenheid voor het 8pt-rastersysteem */
+  --dsn-space-block-2xs: calc(0.5rem * 0.125); /** 1px - Verticale ruimte binnen componenten */
+  --dsn-space-block-xs: calc(0.5rem * 0.25); /** 2px - Verticale ruimte binnen componenten */
+  --dsn-space-block-sm: calc(0.5rem * 0.5); /** 4px - Verticale ruimte binnen componenten */
+  --dsn-space-block-md: calc(0.5rem * 1); /** 8px - Verticale ruimte binnen componenten */
+  --dsn-space-block-lg: calc(0.5rem * 1.5); /** 12px - Verticale ruimte binnen componenten */
+  --dsn-space-block-xl: calc(0.5rem * 2); /** 16px - Verticale ruimte binnen componenten */
+  --dsn-space-block-2xl: calc(0.5rem * 2.5); /** 20px - Verticale ruimte binnen componenten */
+  --dsn-space-block-3xl: calc(0.5rem * 3); /** 24px - Verticale ruimte binnen componenten */
+  --dsn-space-block-4xl: calc(0.5rem * 4); /** 32px - Verticale ruimte binnen componenten */
+  --dsn-space-block-5xl: calc(0.5rem * 6); /** 48px - Verticale ruimte binnen componenten */
+  --dsn-space-block-6xl: calc(0.5rem * 8); /** 64px - Verticale ruimte binnen componenten */
+  --dsn-space-inline-2xs: calc(0.5rem * 0.125); /** 1px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-xs: calc(0.5rem * 0.25); /** 2px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-sm: calc(0.5rem * 0.5); /** 4px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-md: calc(0.5rem * 1); /** 8px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-lg: calc(0.5rem * 1.5); /** 12px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-xl: calc(0.5rem * 2); /** 16px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-2xl: calc(0.5rem * 2.5); /** 20px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-3xl: calc(0.5rem * 3); /** 24px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-4xl: calc(0.5rem * 4); /** 32px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-5xl: calc(0.5rem * 6); /** 48px - Horizontale ruimte binnen componenten */
+  --dsn-space-inline-6xl: calc(0.5rem * 8); /** 64px - Horizontale ruimte binnen componenten */
+  --dsn-space-text-3xs: calc(0.5rem * 0.125); /** 1px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-2xs: calc(0.5rem * 0.25); /** 2px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-xs: calc(0.5rem * 0.25); /** 2px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-sm: calc(0.5rem * 0.5); /** 4px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-md: calc(0.5rem * 1); /** 8px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-lg: calc(0.5rem * 1.5); /** 12px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-xl: calc(0.5rem * 2); /** 16px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-2xl: calc(0.5rem * 2.5); /** 20px - Ruimte tussen tekst en iconen */
+  --dsn-space-text-3xl: calc(0.5rem * 3); /** 24px - Ruimte tussen tekst en iconen */
+  --dsn-space-column-2xs: calc(0.5rem * 0.125); /** 1px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-xs: calc(0.5rem * 0.25); /** 2px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-sm: calc(0.5rem * 0.5); /** 4px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-md: calc(0.5rem * 1); /** 8px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-lg: calc(0.5rem * 1.5); /** 12px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-xl: calc(0.5rem * 2); /** 16px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-2xl: calc(0.5rem * 2.5); /** 20px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-3xl: calc(0.5rem * 3); /** 24px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-4xl: calc(0.5rem * 4); /** 32px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-5xl: calc(0.5rem * 8); /** 64px - Horizontale ruimte tussen componenten */
+  --dsn-space-column-6xl: calc(0.5rem * 20); /** 160px - Horizontale ruimte tussen componenten */
+  --dsn-space-row-2xs: calc(0.5rem * 0.125); /** 1px - Verticale ruimte tussen componenten */
+  --dsn-space-row-xs: calc(0.5rem * 0.25); /** 2px - Verticale ruimte tussen componenten */
+  --dsn-space-row-sm: calc(0.5rem * 0.5); /** 4px - Verticale ruimte tussen componenten */
+  --dsn-space-row-md: calc(0.5rem * 1); /** 8px - Verticale ruimte tussen componenten */
+  --dsn-space-row-lg: calc(0.5rem * 1.5); /** 12px - Verticale ruimte tussen componenten */
+  --dsn-space-row-xl: calc(0.5rem * 2); /** 16px - Verticale ruimte tussen componenten */
+  --dsn-space-row-2xl: calc(0.5rem * 2.5); /** 20px - Verticale ruimte tussen componenten */
+  --dsn-space-row-3xl: calc(0.5rem * 3); /** 24px - Verticale ruimte tussen componenten */
+  --dsn-space-row-4xl: calc(0.5rem * 4); /** 32px - Verticale ruimte tussen componenten */
+  --dsn-space-row-5xl: calc(0.5rem * 8); /** 64px - Verticale ruimte tussen componenten */
+  --dsn-space-row-6xl: calc(0.5rem * 20); /** 160px - Verticale ruimte tussen componenten */
+  --dsn-pointer-target-min-block-size: 3rem; /** WCAG 2.5.5 Target Size - minimaal 48px (3rem) aanraakdoelwit */
+  --dsn-pointer-target-min-inline-size: 3rem; /** WCAG 2.5.5 Target Size - minimaal 48px (3rem) aanraakdoelwit */
+  --dsn-border-radius-square: 0px; /** Geen afronding — scherpe hoeken */
+  --dsn-border-radius-sm: 4px; /** Kleine afronding */
+  --dsn-border-radius-md: 8px; /** Middelgrote afronding */
+  --dsn-border-radius-lg: 16px; /** Grote afronding */
+  --dsn-border-radius-round: 999px; /** Volledig afgerond (pills, cirkels) */
+  --dsn-border-width-none: 0px; /** Geen randbreedte */
+  --dsn-border-width-thin: 1px; /** Dunne rand */
+  --dsn-border-width-medium: 2px; /** Middelgrote rand */
+  --dsn-border-width-thick: 4px; /** Dikke rand */
+  --dsn-focus-outline-offset: 0px; /** Offset van de focusomtrek */
+  --dsn-focus-outline-style: dashed; /** Stijl van de focusomtrek */
+  --dsn-focus-outline-width: 2px; /** Breedte van de focusomtrek */
+  --dsn-focus-background-color: #ffdd00; /** Achtergrondkleur van de focusindicator */
+  --dsn-focus-color: #0b0c0c; /** Tekstkleur van de focusindicator */
+  --dsn-focus-outline-color: #f4f4f4; /** Kleur van de focusomtrek — licht voor donkere achtergronden */
+  --dsn-focus-inverse-outline-color: #0b0c0c; /** Kleur van de focusomtrek op lichte/gekleurde achtergronden in dark mode — tegenhanger van outline-color */
+  --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
+  --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
+  --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
+  --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
+  --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
+  --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
+  --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
+  --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
+  --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
+  --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
+  --dsn-breakpoint-xl: 74em; /** Extra groot breakpoint - ~1184px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-box-shadow-none: none; /** Geen elevatie — vlak oppervlak zonder schaduw */
   --dsn-z-index-300: 300; /** Sticky navigatie-elementen — PageHeader sticky/auto-hide */
   --dsn-z-index-350: 350; /** Floating UI-elementen — Popover, tooltips, dropdowns */
@@ -124,215 +124,217 @@
   --dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); /** Elementen die het scherm verlaten (accelereren) */
   --dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); /** Elementen die van positie wisselen */
   --dsn-transition-easing-linear: linear; /** Progress bars, loaders */
-  --dsn-color-neutral-bg-document: #111111; /** Document background */
-  --dsn-color-neutral-bg-elevated: #111111; /** Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-neutral-bg-subtle: #040404; /** Subtle background */
-  --dsn-color-neutral-bg-default: #1d1d1d; /** Default background */
-  --dsn-color-neutral-bg-hover: #262626; /** Hover state background */
-  --dsn-color-neutral-bg-active: #2e2e2e; /** Active state background */
-  --dsn-color-neutral-border-subtle: #3e3e3e; /** Subtle border */
-  --dsn-color-neutral-border-default: #686868; /** Default border */
-  --dsn-color-neutral-border-hover: #727272; /** Hover state border */
-  --dsn-color-neutral-border-active: #7c7c7c; /** Active state border */
-  --dsn-color-neutral-color-default: #ababab; /** Default text color */
-  --dsn-color-neutral-color-hover: #bbbbbb; /** Hover state text */
-  --dsn-color-neutral-color-active: #cccccc; /** Active state text */
-  --dsn-color-neutral-color-subtle: #8b8b8b; /** Subtle text color */
-  --dsn-color-neutral-color-document: #f1f1f1; /** Document text color */
-  --dsn-color-accent-1-bg-document: #001126; /** Document background */
-  --dsn-color-accent-1-bg-elevated: #001126; /** Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-accent-1-bg-subtle: #000409; /** Subtle background */
-  --dsn-color-accent-1-bg-default: #001d40; /** Default background */
-  --dsn-color-accent-1-bg-hover: #002551; /** Hover state background */
-  --dsn-color-accent-1-bg-active: #002d62; /** Active state background */
-  --dsn-color-accent-1-border-subtle: #003b81; /** Subtle border */
-  --dsn-color-accent-1-border-default: #3169ad; /** Default border */
-  --dsn-color-accent-1-border-hover: #3f74b2; /** Hover state border */
-  --dsn-color-accent-1-border-active: #4e7fb8; /** Active state border */
-  --dsn-color-accent-1-color-default: #8faed2; /** Default text color */
-  --dsn-color-accent-1-color-hover: #a5bedb; /** Hover state text */
-  --dsn-color-accent-1-color-active: #bbcee4; /** Active state text */
-  --dsn-color-accent-1-color-subtle: #648ec1; /** Subtle text color */
-  --dsn-color-accent-1-color-document: #ecf1f7; /** Document text color */
-  --dsn-color-negative-bg-document: #1c0000; /** Document background */
-  --dsn-color-negative-bg-elevated: #1c0000; /** Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-negative-bg-subtle: #060000; /** Subtle background */
-  --dsn-color-negative-bg-default: #2e0000; /** Default background */
-  --dsn-color-negative-bg-hover: #3d0000; /** Hover state background */
-  --dsn-color-negative-bg-active: #4c0000; /** Active state background */
-  --dsn-color-negative-border-subtle: #820000; /** Subtle border */
-  --dsn-color-negative-border-default: #e74848; /** Default border */
-  --dsn-color-negative-border-hover: #ec6d6d; /** Hover state border */
-  --dsn-color-negative-border-active: #f19191; /** Active state border */
-  --dsn-color-negative-color-default: #f9b1b1; /** Default text color */
-  --dsn-color-negative-color-hover: #fbc3c3; /** Hover state text */
-  --dsn-color-negative-color-active: #fcd5d5; /** Active state text */
-  --dsn-color-negative-color-subtle: #eb8181; /** Subtle text color */
-  --dsn-color-negative-color-document: #feeded; /** Document text color */
-  --dsn-color-positive-bg-document: #001509; /** Document background */
-  --dsn-color-positive-bg-elevated: #001509; /** Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-positive-bg-subtle: #000802; /** Subtle background */
-  --dsn-color-positive-bg-default: #002312; /** Default background */
-  --dsn-color-positive-bg-hover: #003019; /** Hover state background */
-  --dsn-color-positive-bg-active: #003e1f; /** Active state background */
-  --dsn-color-positive-border-subtle: #00481b; /** Subtle border */
-  --dsn-color-positive-border-default: #1ba158; /** Default border */
-  --dsn-color-positive-border-hover: #3bb470; /** Hover state border */
-  --dsn-color-positive-border-active: #5bc788; /** Active state border */
-  --dsn-color-positive-color-default: #8ad3a6; /** Default text color */
-  --dsn-color-positive-color-hover: #a3dcba; /** Hover state text */
-  --dsn-color-positive-color-active: #bce5ce; /** Active state text */
-  --dsn-color-positive-color-subtle: #6ac495; /** Subtle text color */
-  --dsn-color-positive-color-document: #e4f5ea; /** Document text color */
-  --dsn-color-warning-bg-document: #190f04; /** Document background */
-  --dsn-color-warning-bg-elevated: #190f04; /** Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-warning-bg-subtle: #0b0501; /** Subtle background */
-  --dsn-color-warning-bg-default: #2b1a09; /** Default background */
-  --dsn-color-warning-bg-hover: #3c250d; /** Hover state background */
-  --dsn-color-warning-bg-active: #4d2f10; /** Active state background */
-  --dsn-color-warning-border-subtle: #5a3511; /** Subtle border */
-  --dsn-color-warning-border-default: #d37f25; /** Default border */
-  --dsn-color-warning-border-hover: #de9843; /** Hover state border */
-  --dsn-color-warning-border-active: #e9b062; /** Active state border */
-  --dsn-color-warning-color-default: #ffb46b; /** Default text color */
-  --dsn-color-warning-color-hover: #ffc38b; /** Hover state text */
-  --dsn-color-warning-color-active: #ffd2aa; /** Active state text */
-  --dsn-color-warning-color-subtle: #f3a453; /** Subtle text color */
-  --dsn-color-warning-color-document: #ffeedd; /** Document text color */
-  --dsn-color-neutral-inverse-bg-document: #fbfbfb; /** Document background (inverse) */
-  --dsn-color-neutral-inverse-bg-elevated: #fbfbfb; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-neutral-inverse-bg-subtle: #f1f1f1; /** Subtle background (inverse) */
-  --dsn-color-neutral-inverse-bg-default: #ababab; /** Default background (inverse) */
-  --dsn-color-neutral-inverse-bg-hover: #bbbbbb; /** Hover state background (inverse) */
-  --dsn-color-neutral-inverse-bg-active: #cccccc; /** Active state background (inverse) */
-  --dsn-color-neutral-inverse-border-subtle: #bfbfbf; /** Subtle border (inverse) */
-  --dsn-color-neutral-inverse-border-default: #3e3e3e; /** Default border (inverse) */
-  --dsn-color-neutral-inverse-border-hover: #2e2e2e; /** Hover state border (inverse) */
-  --dsn-color-neutral-inverse-border-active: #1d1d1d; /** Active state border (inverse) */
-  --dsn-color-neutral-inverse-color-default: #000000; /** Default text color (inverse) */
-  --dsn-color-neutral-inverse-color-hover: #000000; /** Hover state text (inverse) */
-  --dsn-color-neutral-inverse-color-active: #000000; /** Active state text (inverse) */
-  --dsn-color-neutral-inverse-color-subtle: #3e3e3e; /** Subtle text color (inverse) */
-  --dsn-color-neutral-inverse-color-document: #000000; /** Document text color (inverse) */
-  --dsn-color-accent-1-inverse-bg-document: #dcebf9; /** Document background (inverse) */
-  --dsn-color-accent-1-inverse-bg-elevated: #dcebf9; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-accent-1-inverse-bg-subtle: #ecf1f7; /** Subtle background (inverse) */
-  --dsn-color-accent-1-inverse-bg-default: #8faed2; /** Default background (inverse) */
-  --dsn-color-accent-1-inverse-bg-hover: #a5bedb; /** Hover state background (inverse) */
-  --dsn-color-accent-1-inverse-bg-active: #bbcee4; /** Active state background (inverse) */
-  --dsn-color-accent-1-inverse-border-subtle: #b0c6df; /** Subtle border (inverse) */
-  --dsn-color-accent-1-inverse-border-default: #003b81; /** Default border (inverse) */
-  --dsn-color-accent-1-inverse-border-hover: #002d62; /** Hover state border (inverse) */
-  --dsn-color-accent-1-inverse-border-active: #001d40; /** Active state border (inverse) */
-  --dsn-color-accent-1-inverse-color-default: #000000; /** Default text color (inverse) */
-  --dsn-color-accent-1-inverse-color-hover: #000000; /** Hover state text (inverse) */
-  --dsn-color-accent-1-inverse-color-active: #000000; /** Active state text (inverse) */
-  --dsn-color-accent-1-inverse-color-subtle: #003b81; /** Subtle text color (inverse) */
-  --dsn-color-accent-1-inverse-color-document: #000000; /** Document text color (inverse) */
-  --dsn-color-info-inverse-bg-document: #dcebf9; /** Document background (inverse) */
-  --dsn-color-info-inverse-bg-elevated: #dcebf9; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-info-inverse-bg-subtle: #ecf1f7; /** Subtle background (inverse) */
-  --dsn-color-info-inverse-bg-default: #8faed2; /** Default background (inverse) */
-  --dsn-color-info-inverse-bg-hover: #a5bedb; /** Hover state background (inverse) */
-  --dsn-color-info-inverse-bg-active: #bbcee4; /** Active state background (inverse) */
-  --dsn-color-info-inverse-border-subtle: #b0c6df; /** Subtle border (inverse) */
-  --dsn-color-info-inverse-border-default: #003b81; /** Default border (inverse) */
-  --dsn-color-info-inverse-border-hover: #002d62; /** Hover state border (inverse) */
-  --dsn-color-info-inverse-border-active: #001d40; /** Active state border (inverse) */
-  --dsn-color-info-inverse-color-default: #000000; /** Default text color (inverse) */
-  --dsn-color-info-inverse-color-hover: #000000; /** Hover state text (inverse) */
-  --dsn-color-info-inverse-color-active: #000000; /** Active state text (inverse) */
-  --dsn-color-info-inverse-color-subtle: #003b81; /** Subtle text color (inverse) */
-  --dsn-color-info-inverse-color-document: #000000; /** Document text color (inverse) */
-  --dsn-color-negative-inverse-bg-document: #fcdada; /** Document background (inverse) */
-  --dsn-color-negative-inverse-bg-elevated: #fcdada; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-negative-inverse-bg-subtle: #feeded; /** Subtle background (inverse) */
-  --dsn-color-negative-inverse-bg-default: #f9b1b1; /** Default background (inverse) */
-  --dsn-color-negative-inverse-bg-hover: #fbc3c3; /** Hover state background (inverse) */
-  --dsn-color-negative-inverse-bg-active: #fcd5d5; /** Active state background (inverse) */
-  --dsn-color-negative-inverse-border-subtle: #f3abab; /** Subtle border (inverse) */
-  --dsn-color-negative-inverse-border-default: #820000; /** Default border (inverse) */
-  --dsn-color-negative-inverse-border-hover: #4c0000; /** Hover state border (inverse) */
-  --dsn-color-negative-inverse-border-active: #2e0000; /** Active state border (inverse) */
-  --dsn-color-negative-inverse-color-default: #000000; /** Default text color (inverse) */
-  --dsn-color-negative-inverse-color-hover: #000000; /** Hover state text (inverse) */
-  --dsn-color-negative-inverse-color-active: #000000; /** Active state text (inverse) */
-  --dsn-color-negative-inverse-color-subtle: #820000; /** Subtle text color (inverse) */
-  --dsn-color-negative-inverse-color-document: #000000; /** Document text color (inverse) */
-  --dsn-color-positive-inverse-bg-document: #cce8d7; /** Document background (inverse) */
-  --dsn-color-positive-inverse-bg-elevated: #cce8d7; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-positive-inverse-bg-subtle: #e4f5ea; /** Subtle background (inverse) */
-  --dsn-color-positive-inverse-bg-default: #8ad3a6; /** Default background (inverse) */
-  --dsn-color-positive-inverse-bg-hover: #a3dcba; /** Hover state background (inverse) */
-  --dsn-color-positive-inverse-bg-active: #bce5ce; /** Active state background (inverse) */
-  --dsn-color-positive-inverse-border-subtle: #7dca9e; /** Subtle border (inverse) */
-  --dsn-color-positive-inverse-border-default: #00481b; /** Default border (inverse) */
-  --dsn-color-positive-inverse-border-hover: #003e1f; /** Hover state border (inverse) */
-  --dsn-color-positive-inverse-border-active: #002312; /** Active state border (inverse) */
-  --dsn-color-positive-inverse-color-default: #000000; /** Default text color (inverse) */
-  --dsn-color-positive-inverse-color-hover: #000000; /** Hover state text (inverse) */
-  --dsn-color-positive-inverse-color-active: #000000; /** Active state text (inverse) */
-  --dsn-color-positive-inverse-color-subtle: #00481b; /** Subtle text color (inverse) */
-  --dsn-color-positive-inverse-color-document: #000000; /** Document text color (inverse) */
-  --dsn-color-warning-inverse-bg-document: #ffeac6; /** Document background (inverse) */
-  --dsn-color-warning-inverse-bg-elevated: #ffeac6; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation. */
-  --dsn-color-warning-inverse-bg-subtle: #ffeedd; /** Subtle background (inverse) */
-  --dsn-color-warning-inverse-bg-default: #ffb46b; /** Default background (inverse) */
-  --dsn-color-warning-inverse-bg-hover: #ffc38b; /** Hover state background (inverse) */
-  --dsn-color-warning-inverse-bg-active: #ffd2aa; /** Active state background (inverse) */
-  --dsn-color-warning-inverse-border-subtle: #ffa754; /** Subtle border (inverse) */
-  --dsn-color-warning-inverse-border-default: #5a3511; /** Default border (inverse) */
-  --dsn-color-warning-inverse-border-hover: #4d2f10; /** Hover state border (inverse) */
-  --dsn-color-warning-inverse-border-active: #2b1a09; /** Active state border (inverse) */
-  --dsn-color-warning-inverse-color-default: #000000; /** Default text color (inverse) */
-  --dsn-color-warning-inverse-color-hover: #000000; /** Hover state text (inverse) */
-  --dsn-color-warning-inverse-color-active: #000000; /** Active state text (inverse) */
-  --dsn-color-warning-inverse-color-subtle: #5a3511; /** Subtle text color (inverse) */
-  --dsn-color-warning-inverse-color-document: #000000; /** Document text color (inverse) */
-  --dsn-color-transparent: rgba(0, 0, 0, 0); /** Fully transparent - for invisible backgrounds and borders */
-  --dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent); /** Scherpe schaduwlaag — sterker dan light mode omdat donkere achtergronden meer contrast nodig hebben */
-  --dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent); /** Diffuse schaduwlaag — sterker dan light mode */
+  --dsn-color-neutral-bg-document: #111111; /** Documentachtergrond */
+  --dsn-color-neutral-bg-elevated: #111111; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-bg-subtle: #040404; /** Subtiele achtergrond */
+  --dsn-color-neutral-bg-default: #1d1d1d; /** Standaard achtergrond */
+  --dsn-color-neutral-bg-hover: #262626; /** Achtergrond in hover state */
+  --dsn-color-neutral-bg-active: #2e2e2e; /** Achtergrond in active state */
+  --dsn-color-neutral-border-subtle: #3e3e3e; /** Subtiele rand */
+  --dsn-color-neutral-border-default: #686868; /** Standaard rand */
+  --dsn-color-neutral-border-hover: #727272; /** Rand in hover state */
+  --dsn-color-neutral-border-active: #7c7c7c; /** Rand in active state */
+  --dsn-color-neutral-color-default: #ababab; /** Standaard tekstkleur */
+  --dsn-color-neutral-color-hover: #bbbbbb; /** Tekst in hover state */
+  --dsn-color-neutral-color-active: #cccccc; /** Tekst in active state */
+  --dsn-color-neutral-color-subtle: #8b8b8b; /** Subtiele tekstkleur */
+  --dsn-color-neutral-color-document: #f1f1f1; /** Documenttekstkleur */
+  --dsn-color-accent-1-bg-document: #001126; /** Documentachtergrond */
+  --dsn-color-accent-1-bg-elevated: #001126; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-accent-1-bg-subtle: #000409; /** Subtiele achtergrond */
+  --dsn-color-accent-1-bg-default: #001d40; /** Standaard achtergrond */
+  --dsn-color-accent-1-bg-hover: #002551; /** Achtergrond in hover state */
+  --dsn-color-accent-1-bg-active: #002d62; /** Achtergrond in active state */
+  --dsn-color-accent-1-border-subtle: #003b81; /** Subtiele rand */
+  --dsn-color-accent-1-border-default: #3169ad; /** Standaard rand */
+  --dsn-color-accent-1-border-hover: #3f74b2; /** Rand in hover state */
+  --dsn-color-accent-1-border-active: #4e7fb8; /** Rand in active state */
+  --dsn-color-accent-1-color-default: #8faed2; /** Standaard tekstkleur */
+  --dsn-color-accent-1-color-hover: #a5bedb; /** Tekst in hover state */
+  --dsn-color-accent-1-color-active: #bbcee4; /** Tekst in active state */
+  --dsn-color-accent-1-color-subtle: #648ec1; /** Subtiele tekstkleur */
+  --dsn-color-accent-1-color-document: #ecf1f7; /** Documenttekstkleur */
+  --dsn-color-negative-bg-document: #1c0000; /** Documentachtergrond */
+  --dsn-color-negative-bg-elevated: #1c0000; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-negative-bg-subtle: #060000; /** Subtiele achtergrond */
+  --dsn-color-negative-bg-default: #2e0000; /** Standaard achtergrond */
+  --dsn-color-negative-bg-hover: #3d0000; /** Achtergrond in hover state */
+  --dsn-color-negative-bg-active: #4c0000; /** Achtergrond in active state */
+  --dsn-color-negative-border-subtle: #820000; /** Subtiele rand */
+  --dsn-color-negative-border-default: #e74848; /** Standaard rand */
+  --dsn-color-negative-border-hover: #ec6d6d; /** Rand in hover state */
+  --dsn-color-negative-border-active: #f19191; /** Rand in active state */
+  --dsn-color-negative-color-default: #f9b1b1; /** Standaard tekstkleur */
+  --dsn-color-negative-color-hover: #fbc3c3; /** Tekst in hover state */
+  --dsn-color-negative-color-active: #fcd5d5; /** Tekst in active state */
+  --dsn-color-negative-color-subtle: #eb8181; /** Subtiele tekstkleur */
+  --dsn-color-negative-color-document: #feeded; /** Documenttekstkleur */
+  --dsn-color-positive-bg-document: #001509; /** Documentachtergrond */
+  --dsn-color-positive-bg-elevated: #001509; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-positive-bg-subtle: #000802; /** Subtiele achtergrond */
+  --dsn-color-positive-bg-default: #002312; /** Standaard achtergrond */
+  --dsn-color-positive-bg-hover: #003019; /** Achtergrond in hover state */
+  --dsn-color-positive-bg-active: #003e1f; /** Achtergrond in active state */
+  --dsn-color-positive-border-subtle: #00481b; /** Subtiele rand */
+  --dsn-color-positive-border-default: #1ba158; /** Standaard rand */
+  --dsn-color-positive-border-hover: #3bb470; /** Rand in hover state */
+  --dsn-color-positive-border-active: #5bc788; /** Rand in active state */
+  --dsn-color-positive-color-default: #8ad3a6; /** Standaard tekstkleur */
+  --dsn-color-positive-color-hover: #a3dcba; /** Tekst in hover state */
+  --dsn-color-positive-color-active: #bce5ce; /** Tekst in active state */
+  --dsn-color-positive-color-subtle: #6ac495; /** Subtiele tekstkleur */
+  --dsn-color-positive-color-document: #e4f5ea; /** Documenttekstkleur */
+  --dsn-color-warning-bg-document: #190f04; /** Documentachtergrond */
+  --dsn-color-warning-bg-elevated: #190f04; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-warning-bg-subtle: #0b0501; /** Subtiele achtergrond */
+  --dsn-color-warning-bg-default: #2b1a09; /** Standaard achtergrond */
+  --dsn-color-warning-bg-hover: #3c250d; /** Achtergrond in hover state */
+  --dsn-color-warning-bg-active: #4d2f10; /** Achtergrond in active state */
+  --dsn-color-warning-border-subtle: #5a3511; /** Subtiele rand */
+  --dsn-color-warning-border-default: #d37f25; /** Standaard rand */
+  --dsn-color-warning-border-hover: #de9843; /** Rand in hover state */
+  --dsn-color-warning-border-active: #e9b062; /** Rand in active state */
+  --dsn-color-warning-color-default: #ffb46b; /** Standaard tekstkleur */
+  --dsn-color-warning-color-hover: #ffc38b; /** Tekst in hover state */
+  --dsn-color-warning-color-active: #ffd2aa; /** Tekst in active state */
+  --dsn-color-warning-color-subtle: #f3a453; /** Subtiele tekstkleur */
+  --dsn-color-warning-color-document: #ffeedd; /** Documenttekstkleur */
+  --dsn-color-neutral-inverse-bg-document: #fbfbfb; /** Documentachtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-elevated: #fbfbfb; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-inverse-bg-subtle: #f1f1f1; /** Subtiele achtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-default: #ababab; /** Standaard achtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-hover: #bbbbbb; /** Achtergrond in hover state (inverse) */
+  --dsn-color-neutral-inverse-bg-active: #cccccc; /** Achtergrond in active state (inverse) */
+  --dsn-color-neutral-inverse-border-subtle: #bfbfbf; /** Subtiele rand (inverse) */
+  --dsn-color-neutral-inverse-border-default: #3e3e3e; /** Standaard rand (inverse) */
+  --dsn-color-neutral-inverse-border-hover: #2e2e2e; /** Rand in hover state (inverse) */
+  --dsn-color-neutral-inverse-border-active: #1d1d1d; /** Rand in active state (inverse) */
+  --dsn-color-neutral-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
+  --dsn-color-neutral-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
+  --dsn-color-neutral-inverse-color-active: #000000; /** Tekst in active state (inverse) */
+  --dsn-color-neutral-inverse-color-subtle: #3e3e3e; /** Subtiele tekstkleur (inverse) */
+  --dsn-color-neutral-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-bg-document: #dcebf9; /** Documentachtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-elevated: #dcebf9; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-accent-1-inverse-bg-subtle: #ecf1f7; /** Subtiele achtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-default: #8faed2; /** Standaard achtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-hover: #a5bedb; /** Achtergrond in hover state (inverse) */
+  --dsn-color-accent-1-inverse-bg-active: #bbcee4; /** Achtergrond in active state (inverse) */
+  --dsn-color-accent-1-inverse-border-subtle: #b0c6df; /** Subtiele rand (inverse) */
+  --dsn-color-accent-1-inverse-border-default: #003b81; /** Standaard rand (inverse) */
+  --dsn-color-accent-1-inverse-border-hover: #002d62; /** Rand in hover state (inverse) */
+  --dsn-color-accent-1-inverse-border-active: #001d40; /** Rand in active state (inverse) */
+  --dsn-color-accent-1-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
+  --dsn-color-accent-1-inverse-color-active: #000000; /** Tekst in active state (inverse) */
+  --dsn-color-accent-1-inverse-color-subtle: #003b81; /** Subtiele tekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-info-inverse-bg-document: #dcebf9; /** Documentachtergrond (inverse) */
+  --dsn-color-info-inverse-bg-elevated: #dcebf9; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-info-inverse-bg-subtle: #ecf1f7; /** Subtiele achtergrond (inverse) */
+  --dsn-color-info-inverse-bg-default: #8faed2; /** Standaard achtergrond (inverse) */
+  --dsn-color-info-inverse-bg-hover: #a5bedb; /** Achtergrond in hover state (inverse) */
+  --dsn-color-info-inverse-bg-active: #bbcee4; /** Achtergrond in active state (inverse) */
+  --dsn-color-info-inverse-border-subtle: #b0c6df; /** Subtiele rand (inverse) */
+  --dsn-color-info-inverse-border-default: #003b81; /** Standaard rand (inverse) */
+  --dsn-color-info-inverse-border-hover: #002d62; /** Rand in hover state (inverse) */
+  --dsn-color-info-inverse-border-active: #001d40; /** Rand in active state (inverse) */
+  --dsn-color-info-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
+  --dsn-color-info-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
+  --dsn-color-info-inverse-color-active: #000000; /** Tekst in active state (inverse) */
+  --dsn-color-info-inverse-color-subtle: #003b81; /** Subtiele tekstkleur (inverse) */
+  --dsn-color-info-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-negative-inverse-bg-document: #fcdada; /** Documentachtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-elevated: #fcdada; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-negative-inverse-bg-subtle: #feeded; /** Subtiele achtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-default: #f9b1b1; /** Standaard achtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-hover: #fbc3c3; /** Achtergrond in hover state (inverse) */
+  --dsn-color-negative-inverse-bg-active: #fcd5d5; /** Achtergrond in active state (inverse) */
+  --dsn-color-negative-inverse-border-subtle: #f3abab; /** Subtiele rand (inverse) */
+  --dsn-color-negative-inverse-border-default: #820000; /** Standaard rand (inverse) */
+  --dsn-color-negative-inverse-border-hover: #4c0000; /** Rand in hover state (inverse) */
+  --dsn-color-negative-inverse-border-active: #2e0000; /** Rand in active state (inverse) */
+  --dsn-color-negative-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
+  --dsn-color-negative-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
+  --dsn-color-negative-inverse-color-active: #000000; /** Tekst in active state (inverse) */
+  --dsn-color-negative-inverse-color-subtle: #820000; /** Subtiele tekstkleur (inverse) */
+  --dsn-color-negative-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-positive-inverse-bg-document: #cce8d7; /** Documentachtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-elevated: #cce8d7; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-positive-inverse-bg-subtle: #e4f5ea; /** Subtiele achtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-default: #8ad3a6; /** Standaard achtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-hover: #a3dcba; /** Achtergrond in hover state (inverse) */
+  --dsn-color-positive-inverse-bg-active: #bce5ce; /** Achtergrond in active state (inverse) */
+  --dsn-color-positive-inverse-border-subtle: #7dca9e; /** Subtiele rand (inverse) */
+  --dsn-color-positive-inverse-border-default: #00481b; /** Standaard rand (inverse) */
+  --dsn-color-positive-inverse-border-hover: #003e1f; /** Rand in hover state (inverse) */
+  --dsn-color-positive-inverse-border-active: #002312; /** Rand in active state (inverse) */
+  --dsn-color-positive-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
+  --dsn-color-positive-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
+  --dsn-color-positive-inverse-color-active: #000000; /** Tekst in active state (inverse) */
+  --dsn-color-positive-inverse-color-subtle: #00481b; /** Subtiele tekstkleur (inverse) */
+  --dsn-color-positive-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-warning-inverse-bg-document: #ffeac6; /** Documentachtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-elevated: #ffeac6; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-warning-inverse-bg-subtle: #ffeedd; /** Subtiele achtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-default: #ffb46b; /** Standaard achtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-hover: #ffc38b; /** Achtergrond in hover state (inverse) */
+  --dsn-color-warning-inverse-bg-active: #ffd2aa; /** Achtergrond in active state (inverse) */
+  --dsn-color-warning-inverse-border-subtle: #ffa754; /** Subtiele rand (inverse) */
+  --dsn-color-warning-inverse-border-default: #5a3511; /** Standaard rand (inverse) */
+  --dsn-color-warning-inverse-border-hover: #4d2f10; /** Rand in hover state (inverse) */
+  --dsn-color-warning-inverse-border-active: #2b1a09; /** Rand in active state (inverse) */
+  --dsn-color-warning-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
+  --dsn-color-warning-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
+  --dsn-color-warning-inverse-color-active: #000000; /** Tekst in active state (inverse) */
+  --dsn-color-warning-inverse-color-subtle: #5a3511; /** Subtiele tekstkleur (inverse) */
+  --dsn-color-warning-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-transparent: rgba(0, 0, 0, 0); /** Volledig transparant — voor onzichtbare achtergronden en randen */
+  --dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent); /** Scherpe schaduwlaag — direct licht, dichtbij het object */
+  --dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent); /** Diffuse schaduwlaag — omgevingslicht, verder weg */
   --dsn-color-shadow-highlight: color-mix(in srgb, white 8%, transparent); /** Outline-laag — subtiele witte rand geeft elevated surfaces randscherpte in dark mode */
   --dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12); /** Scroll-affordance schaduw — lichte kleur voor zichtbaarheid op donkere achtergrond */
   --dsn-backdrop-opacity: 50%; /** Bepaalt hoe doorzichtig de overlay is — gebruikt in color-mix() */
   --dsn-backdrop-blur: 4px; /** backdrop-filter: blur() op de overlay — valt gracefully weg zonder support */
-  --dsn-breadcrumb-navigation-link-text-decoration-line: underline; /** Links are underlined by default (a11y standaard) */
-  --dsn-breadcrumb-navigation-link-text-underline-offset: 4px; /** Underline offset */
-  --dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; /** Underline thickness */
+  --dsn-breadcrumb-navigation-link-text-decoration-line: underline; /** Links zijn standaard onderstreept (a11y standaard) */
+  --dsn-breadcrumb-navigation-link-text-underline-offset: 4px; /** Onderstrepingsafstand */
+  --dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; /** Dikte van de onderstreping */
   --dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; /** Underline verdwijnt op hover als visuele feedback */
-  --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** No underline on active */
-  --dsn-button-size-small-min-block-size: 2.5rem; /** Small button minimum block size (reduced touch target — 40px) */
+  --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
+  --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
   --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
   --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
-  --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Size of the checkbox - fluid based on text size and line-height */
+  --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
   --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
   --dsn-checkbox-checked-active-border-color: rgba(0, 0, 0, 0);
   --dsn-checkbox-checked-hover-border-color: rgba(0, 0, 0, 0);
   --dsn-checkbox-indeterminate-border-color: rgba(0, 0, 0, 0);
   --dsn-checkbox-indeterminate-active-border-color: rgba(0, 0, 0, 0);
   --dsn-checkbox-indeterminate-hover-border-color: rgba(0, 0, 0, 0);
-  --dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); /** Check icon size - 67% of checkbox size for proper visual balance */
+  --dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); /** Grootte van het vinkje — 67% van de checkboxgrootte voor een goede visuele balans */
   --dsn-container-box-shadow: none; /** Standaard geen schaduw — gebruik elevated variant voor een zwevend effect */
-  --dsn-details-summary-text-decoration-line: none; /** No underline by default; appears on hover */
-  --dsn-details-summary-text-underline-offset: 4px; /** Underline offset for hover state */
-  --dsn-details-summary-text-decoration-thickness: auto; /** Underline thickness for hover state */
-  --dsn-details-summary-hover-text-decoration-line: underline; /** Underline appears on hover */
-  --dsn-details-content-background-color: rgba(0, 0, 0, 0); /** Content area background */
+  --dsn-details-summary-text-decoration-line: none; /** Standaard geen onderstreping; verschijnt op hover */
+  --dsn-details-summary-text-underline-offset: 4px; /** Onderstrepingsafstand voor de hover-staat */
+  --dsn-details-summary-text-decoration-thickness: auto; /** Dikte van de onderstreping voor de hover-staat */
+  --dsn-details-summary-hover-text-decoration-line: underline; /** Onderstreping verschijnt op hover */
+  --dsn-details-content-background-color: rgba(0, 0, 0, 0); /** Achtergrond van het inhoudsgebied */
   --dsn-dot-badge-size: 0.5rem; /** Diameter van de dot (8px) */
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
   --dsn-file-media-size: 3rem; /** Vaste grootte van het media-vlak (48px) — vierkant voor zowel icoon als preview */
+  --dsn-grid-padding-inline: 0px; /** Outer padding-inline of the grid container. Default 0: grids sit inside dsn-page-body__inner which already provides horizontal padding. */
   --dsn-grid-max-width: 74rem; /** Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px) */
   --dsn-hero-block-size: 70svh; /** Hoogte van de Hero via min-block-size: max(--dsn-hero-min-block-size, --dsn-hero-block-size); aanpasbaar per instantie via inline style */
   --dsn-hero-min-block-size: 400px; /** Minimale hoogte van de Hero — vloer zodat de Hero niet te klein wordt bij weinig inhoud of kleine viewport */
-  --dsn-link-text-decoration-line: underline; /** Link text decoration line */
-  --dsn-link-text-decoration-thickness: auto; /** Link underline thickness */
-  --dsn-link-text-underline-offset: 4px; /** Link underline offset */
-  --dsn-link-hover-text-decoration-line: none; /** Link hover text decoration */
+  --dsn-link-text-decoration-line: underline; /** Tekstverfraaiing van de link */
+  --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
+  --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
+  --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
   --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
   --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
   --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
@@ -342,70 +344,72 @@
   --dsn-popover-max-width: 25rem; /** Maximale breedte van de popover (400px) */
   --dsn-popover-min-width: 12.5rem; /** Minimale breedte van de popover (200px) */
   --dsn-progress-bar-block-size: 8px; /** Hoogte van de balk — gangbare dikte voor voortgangsbalken */
-  --dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Size of the radio button - fluid based on text size and line-height */
+  --dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de radioknop — vloeiend op basis van tekstgrootte en line-height */
   --dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
   --dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
   --dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
-  --dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); /** Inner circle size when checked - 33% of radio size */
+  --dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); /** Grootte van de binnenste cirkel wanneer aangevinkt — 33% van de radioknopgrootte */
   --dsn-spinner-size: 1.5rem; /** Diameter van de spinner (24px) */
   --dsn-spinner-size-large: 3rem; /** Grote variant — diameter van de spinner (48px) */
   --dsn-spinner-duration: 800ms; /** Duur van één rotatie — bewust sneller dan transition.duration.slower (500ms): dit is een herhalende ambient animatie */
-  --dsn-status-badge-text-transform: none; /** Status badge text transform (none by default; themes can override to uppercase) */
-  --dsn-summary-list-key-basis: 30%; /** Width of the key column in the grid layout */
+  --dsn-status-badge-text-transform: none; /** Teksttransformatie van de StatusBadge (standaard geen; thema's kunnen naar hoofdletters overschakelen) */
+  --dsn-summary-list-key-basis: 30%; /** Breedte van de sleutelkolom in de gridindeling */
+  --dsn-table-of-contents-plain-link-text-decoration-line: none; /** Plain-appearance-specifiek: tekstverfraaiing van de ankerlinks in rust — omgekeerd t.o.v. de standaard Link (geen onderstreping) */
+  --dsn-table-of-contents-plain-link-hover-text-decoration-line: underline; /** Plain-appearance-specifiek: tekstverfraaiing van de ankerlinks op hover — omgekeerd t.o.v. de standaard Link (wel onderstreping) */
   --dsn-table-header-background-color: rgba(0, 0, 0, 0);
   --dsn-table-footer-background-color: rgba(0, 0, 0, 0);
-  --dsn-text-area-outline-offset: 0px; /** Text area outline offset */
-  --dsn-text-area-resize: vertical; /** Text area resize behavior (vertical, horizontal, both, none) */
-  --dsn-text-area-focus-box-shadow-x: 0; /** Text area focus box shadow x offset */
-  --dsn-text-area-focus-box-shadow-y: 0; /** Text area focus box shadow y offset */
-  --dsn-text-area-focus-box-shadow-blur: 0; /** Text area focus box shadow blur */
-  --dsn-text-area-hover-box-shadow-x: 0; /** Text area hover box shadow x offset */
-  --dsn-text-area-hover-box-shadow-y: 0; /** Text area hover box shadow y offset */
-  --dsn-text-area-hover-box-shadow-blur: 0; /** Text area hover box shadow blur */
-  --dsn-text-area-invalid-box-shadow-x: 0; /** Text area invalid box shadow x offset */
-  --dsn-text-area-invalid-box-shadow-y: 0; /** Text area invalid box shadow y offset */
-  --dsn-text-area-invalid-box-shadow-blur: 0; /** Text area invalid box shadow blur */
-  --dsn-text-input-outline-offset: 0px; /** Text input outline offset */
-  --dsn-text-input-focus-box-shadow-x: 0; /** Text input focus box shadow x offset */
-  --dsn-text-input-focus-box-shadow-y: 0; /** Text input focus box shadow y offset */
-  --dsn-text-input-focus-box-shadow-blur: 0; /** Text input focus box shadow blur */
-  --dsn-text-input-hover-box-shadow-x: 0; /** Text input hover box shadow x offset */
-  --dsn-text-input-hover-box-shadow-y: 0; /** Text input hover box shadow y offset */
-  --dsn-text-input-hover-box-shadow-blur: 0; /** Text input hover box shadow blur */
-  --dsn-text-input-invalid-box-shadow-x: 0; /** Text input invalid box shadow x offset */
-  --dsn-text-input-invalid-box-shadow-y: 0; /** Text input invalid box shadow y offset */
-  --dsn-text-input-invalid-box-shadow-blur: 0; /** Text input invalid box shadow blur */
-  --dsn-heading-color: var(--dsn-color-neutral-color-document); /** Heading text color */
-  --dsn-heading-level-1-font-family: var(--dsn-heading-font-family); /** Heading 1 font family */
-  --dsn-heading-level-1-font-size: var(--dsn-text-font-size-3xl); /** Heading 1 font size */
-  --dsn-heading-level-1-font-weight: var(--dsn-heading-font-weight); /** Heading 1 font weight */
-  --dsn-heading-level-1-line-height: var(--dsn-text-line-height-3xl); /** Heading 1 line height */
-  --dsn-heading-level-1-margin-block-end: var(--dsn-space-row-xl); /** Heading 1 bottom margin */
-  --dsn-heading-level-2-font-family: var(--dsn-heading-font-family); /** Heading 2 font family */
-  --dsn-heading-level-2-font-size: var(--dsn-text-font-size-2xl); /** Heading 2 font size */
-  --dsn-heading-level-2-font-weight: var(--dsn-heading-font-weight); /** Heading 2 font weight */
-  --dsn-heading-level-2-line-height: var(--dsn-text-line-height-2xl); /** Heading 2 line height */
-  --dsn-heading-level-2-margin-block-end: var(--dsn-space-row-xl); /** Heading 2 bottom margin */
-  --dsn-heading-level-3-font-family: var(--dsn-heading-font-family); /** Heading 3 font family */
-  --dsn-heading-level-3-font-size: var(--dsn-text-font-size-xl); /** Heading 3 font size */
-  --dsn-heading-level-3-font-weight: var(--dsn-heading-font-weight); /** Heading 3 font weight */
-  --dsn-heading-level-3-line-height: var(--dsn-text-line-height-xl); /** Heading 3 line height */
-  --dsn-heading-level-3-margin-block-end: var(--dsn-space-row-lg); /** Heading 3 bottom margin */
-  --dsn-heading-level-4-font-family: var(--dsn-heading-font-family); /** Heading 4 font family */
-  --dsn-heading-level-4-font-size: var(--dsn-text-font-size-lg); /** Heading 4 font size */
-  --dsn-heading-level-4-font-weight: var(--dsn-heading-font-weight); /** Heading 4 font weight */
-  --dsn-heading-level-4-line-height: var(--dsn-text-line-height-lg); /** Heading 4 line height */
-  --dsn-heading-level-4-margin-block-end: var(--dsn-space-row-lg); /** Heading 4 bottom margin */
-  --dsn-heading-level-5-font-family: var(--dsn-heading-font-family); /** Heading 5 font family */
-  --dsn-heading-level-5-font-size: var(--dsn-text-font-size-md); /** Heading 5 font size */
-  --dsn-heading-level-5-font-weight: var(--dsn-heading-font-weight); /** Heading 5 font weight */
-  --dsn-heading-level-5-line-height: var(--dsn-text-line-height-md); /** Heading 5 line height */
-  --dsn-heading-level-5-margin-block-end: var(--dsn-space-row-md); /** Heading 5 bottom margin */
-  --dsn-heading-level-6-font-family: var(--dsn-heading-font-family); /** Heading 6 font family */
-  --dsn-heading-level-6-font-size: var(--dsn-text-font-size-sm); /** Heading 6 font size */
-  --dsn-heading-level-6-font-weight: var(--dsn-heading-font-weight); /** Heading 6 font weight */
-  --dsn-heading-level-6-line-height: var(--dsn-text-line-height-sm); /** Heading 6 line height */
-  --dsn-heading-level-6-margin-block-end: var(--dsn-space-row-md); /** Heading 6 bottom margin */
+  --dsn-text-area-outline-offset: 0px; /** Outline-afstand van het tekstveld */
+  --dsn-text-area-resize: vertical; /** Formaat-aanpassingsgedrag van het tekstveld (vertical, horizontal, both, none) */
+  --dsn-text-area-focus-box-shadow-x: 0; /** X-verschuiving van de box-shadow op focus */
+  --dsn-text-area-focus-box-shadow-y: 0; /** Y-verschuiving van de box-shadow op focus */
+  --dsn-text-area-focus-box-shadow-blur: 0; /** Vervaging van de box-shadow op focus */
+  --dsn-text-area-hover-box-shadow-x: 0; /** X-verschuiving van de box-shadow op hover */
+  --dsn-text-area-hover-box-shadow-y: 0; /** Y-verschuiving van de box-shadow op hover */
+  --dsn-text-area-hover-box-shadow-blur: 0; /** Vervaging van de box-shadow op hover */
+  --dsn-text-area-invalid-box-shadow-x: 0; /** X-verschuiving van de box-shadow bij ongeldige invoer */
+  --dsn-text-area-invalid-box-shadow-y: 0; /** Y-verschuiving van de box-shadow bij ongeldige invoer */
+  --dsn-text-area-invalid-box-shadow-blur: 0; /** Vervaging van de box-shadow bij ongeldige invoer */
+  --dsn-text-input-outline-offset: 0px; /** Outline-afstand van het tekstinvoerveld */
+  --dsn-text-input-focus-box-shadow-x: 0; /** X-verschuiving van de box-shadow op focus */
+  --dsn-text-input-focus-box-shadow-y: 0; /** Y-verschuiving van de box-shadow op focus */
+  --dsn-text-input-focus-box-shadow-blur: 0; /** Vervaging van de box-shadow op focus */
+  --dsn-text-input-hover-box-shadow-x: 0; /** X-verschuiving van de box-shadow op hover */
+  --dsn-text-input-hover-box-shadow-y: 0; /** Y-verschuiving van de box-shadow op hover */
+  --dsn-text-input-hover-box-shadow-blur: 0; /** Vervaging van de box-shadow op hover */
+  --dsn-text-input-invalid-box-shadow-x: 0; /** X-verschuiving van de box-shadow bij ongeldige invoer */
+  --dsn-text-input-invalid-box-shadow-y: 0; /** Y-verschuiving van de box-shadow bij ongeldige invoer */
+  --dsn-text-input-invalid-box-shadow-blur: 0; /** Vervaging van de box-shadow bij ongeldige invoer */
+  --dsn-heading-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van koppen */
+  --dsn-heading-level-1-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 1 */
+  --dsn-heading-level-1-font-size: var(--dsn-text-font-size-3xl); /** Font-size van Heading 1 */
+  --dsn-heading-level-1-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 1 */
+  --dsn-heading-level-1-line-height: var(--dsn-text-line-height-3xl); /** Line-height van Heading 1 */
+  --dsn-heading-level-1-margin-block-end: var(--dsn-space-row-xl); /** Onderste margin van Heading 1 */
+  --dsn-heading-level-2-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 2 */
+  --dsn-heading-level-2-font-size: var(--dsn-text-font-size-2xl); /** Font-size van Heading 2 */
+  --dsn-heading-level-2-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 2 */
+  --dsn-heading-level-2-line-height: var(--dsn-text-line-height-2xl); /** Line-height van Heading 2 */
+  --dsn-heading-level-2-margin-block-end: var(--dsn-space-row-xl); /** Onderste margin van Heading 2 */
+  --dsn-heading-level-3-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 3 */
+  --dsn-heading-level-3-font-size: var(--dsn-text-font-size-xl); /** Font-size van Heading 3 */
+  --dsn-heading-level-3-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 3 */
+  --dsn-heading-level-3-line-height: var(--dsn-text-line-height-xl); /** Line-height van Heading 3 */
+  --dsn-heading-level-3-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van Heading 3 */
+  --dsn-heading-level-4-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 4 */
+  --dsn-heading-level-4-font-size: var(--dsn-text-font-size-lg); /** Font-size van Heading 4 */
+  --dsn-heading-level-4-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 4 */
+  --dsn-heading-level-4-line-height: var(--dsn-text-line-height-lg); /** Line-height van Heading 4 */
+  --dsn-heading-level-4-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van Heading 4 */
+  --dsn-heading-level-5-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 5 */
+  --dsn-heading-level-5-font-size: var(--dsn-text-font-size-md); /** Font-size van Heading 5 */
+  --dsn-heading-level-5-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 5 */
+  --dsn-heading-level-5-line-height: var(--dsn-text-line-height-md); /** Line-height van Heading 5 */
+  --dsn-heading-level-5-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van Heading 5 */
+  --dsn-heading-level-6-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 6 */
+  --dsn-heading-level-6-font-size: var(--dsn-text-font-size-sm); /** Font-size van Heading 6 */
+  --dsn-heading-level-6-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 6 */
+  --dsn-heading-level-6-line-height: var(--dsn-text-line-height-sm); /** Line-height van Heading 6 */
+  --dsn-heading-level-6-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van Heading 6 */
   --dsn-icon-size-sm: calc(var(--dsn-text-font-size-sm) * var(--dsn-text-line-height-sm)); /** Fluid icon size - coupled to font-size.sm × line-height.sm */
   --dsn-icon-size-md: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Fluid icon size - coupled to font-size.md × line-height.md */
   --dsn-icon-size-lg: calc(var(--dsn-text-font-size-lg) * var(--dsn-text-line-height-lg)); /** Fluid icon size - coupled to font-size.lg × line-height.lg */
@@ -413,297 +417,297 @@
   --dsn-icon-size-2xl: calc(var(--dsn-text-font-size-2xl) * var(--dsn-text-line-height-2xl)); /** Fluid icon size - coupled to font-size.2xl × line-height.2xl */
   --dsn-icon-size-3xl: calc(var(--dsn-text-font-size-3xl) * var(--dsn-text-line-height-3xl)); /** Fluid icon size - coupled to font-size.3xl × line-height.3xl */
   --dsn-icon-size-4xl: calc(var(--dsn-text-font-size-4xl) * var(--dsn-text-line-height-4xl)); /** Fluid icon size - coupled to font-size.4xl × line-height.4xl */
-  --dsn-form-control-font-family: var(--dsn-text-font-family-default); /** Form control font family */
-  --dsn-form-control-font-size: var(--dsn-text-font-size-md); /** Form control font size */
-  --dsn-form-control-font-weight: var(--dsn-text-font-weight-default); /** Form control font weight */
-  --dsn-form-control-line-height: var(--dsn-text-line-height-md); /** Form control line height */
+  --dsn-form-control-font-family: var(--dsn-text-font-family-default); /** Lettertype van form controls */
+  --dsn-form-control-font-size: var(--dsn-text-font-size-md); /** Lettergrootte van form controls */
+  --dsn-form-control-font-weight: var(--dsn-text-font-weight-default); /** Lettergewicht van form controls */
+  --dsn-form-control-line-height: var(--dsn-text-line-height-md); /** Regelafstand van form controls */
   --dsn-form-control-padding-block-start: var(--dsn-space-block-md); /** Form control top padding — 8px zodat min-block-size (48px) de hoogte bepaalt, gelijk aan de button */
   --dsn-form-control-padding-block-end: var(--dsn-space-block-md); /** Form control bottom padding — 8px zodat min-block-size (48px) de hoogte bepaalt, gelijk aan de button */
-  --dsn-form-control-padding-inline-start: var(--dsn-space-inline-lg); /** Form control left padding */
-  --dsn-form-control-padding-inline-end: var(--dsn-space-inline-lg); /** Form control right padding */
-  --dsn-form-control-border-radius: var(--dsn-border-radius-square); /** Form control border radius */
-  --dsn-form-control-border-width: var(--dsn-border-width-thin); /** Form control border width */
-  --dsn-form-control-hover-border-width: var(--dsn-border-width-medium); /** Form control hover border width */
-  --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover); /** Form control hover background */
-  --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover); /** Form control hover border */
-  --dsn-form-control-focus-border-width: var(--dsn-border-width-medium); /** Form control focus border width */
-  --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active); /** Form control focus border */
-  --dsn-form-control-active-border-width: var(--dsn-border-width-medium); /** Form control active border width */
-  --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active); /** Form control active background */
-  --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active); /** Form control active border */
-  --dsn-form-control-invalid-border-width: var(--dsn-border-width-medium); /** Form control invalid border width */
-  --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default); /** Form control invalid background */
-  --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default); /** Form control invalid border */
-  --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default); /** Form control invalid text color */
-  --dsn-form-control-background-color: var(--dsn-color-neutral-bg-document); /** Form control background */
-  --dsn-form-control-border-color: var(--dsn-color-neutral-border-default); /** Form control border */
-  --dsn-form-control-color: var(--dsn-color-neutral-color-document); /** Form control text color */
-  --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Form control placeholder text color */
-  --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle); /** Form control disabled accent color */
-  --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Form control disabled background */
-  --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Form control disabled border */
-  --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle); /** Form control disabled text color */
-  --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle); /** Form control read-only background */
-  --dsn-form-control-read-only-border-color: var(--dsn-color-transparent); /** Form control read-only border */
-  --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document); /** Form control read-only text color */
+  --dsn-form-control-padding-inline-start: var(--dsn-space-inline-lg); /** Linker padding van form controls */
+  --dsn-form-control-padding-inline-end: var(--dsn-space-inline-lg); /** Rechter padding van form controls */
+  --dsn-form-control-border-radius: var(--dsn-border-radius-square); /** Afronding van form controls */
+  --dsn-form-control-border-width: var(--dsn-border-width-thin); /** Randbreedte van form controls */
+  --dsn-form-control-hover-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in hover state */
+  --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover); /** Achtergrondkleur van form controls in hover state */
+  --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover); /** Randkleur van form controls in hover state */
+  --dsn-form-control-focus-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in focus state */
+  --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active); /** Randkleur van form controls in focus state */
+  --dsn-form-control-active-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in active state */
+  --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active); /** Achtergrondkleur van form controls in active state */
+  --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active); /** Randkleur van form controls in active state */
+  --dsn-form-control-invalid-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in invalid state */
+  --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur van form controls in invalid state */
+  --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default); /** Randkleur van form controls in invalid state */
+  --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default); /** Tekstkleur van form controls in invalid state */
+  --dsn-form-control-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van form controls */
+  --dsn-form-control-border-color: var(--dsn-color-neutral-border-default); /** Randkleur van form controls */
+  --dsn-form-control-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van form controls */
+  --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van placeholder in form controls */
+  --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle); /** Accentkleur van form controls in disabled state */
+  --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van form controls in disabled state */
+  --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van form controls in disabled state */
+  --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van form controls in disabled state */
+  --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van form controls in read-only state */
+  --dsn-form-control-read-only-border-color: var(--dsn-color-transparent); /** Randkleur van form controls in read-only state */
+  --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van form controls in read-only state */
   --dsn-box-shadow-sm: 0 1px 2px 0 var(--dsn-color-shadow-direct), 0 2px 4px 0 var(--dsn-color-shadow-ambient), 0 0 0 1px var(--dsn-color-shadow-highlight); /** Kleine elevatie — cards, chips, kleine floating elementen */
   --dsn-box-shadow-md: 0 2px 4px 0 var(--dsn-color-shadow-direct), 0 8px 16px 0 var(--dsn-color-shadow-ambient), 0 0 0 1px var(--dsn-color-shadow-highlight); /** Middelgrote elevatie — dropdowns, date pickers, tooltips */
   --dsn-box-shadow-lg: 0 4px 8px 0 var(--dsn-color-shadow-direct), 0 16px 32px 0 var(--dsn-color-shadow-ambient), 0 0 0 1px var(--dsn-color-shadow-highlight); /** Grote elevatie — modals, dialogen, side panels */
-  --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-accent-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-accent-3-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background - Primary actions (buttons) */
-  --dsn-color-action-1-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background - Primary actions (buttons) */
-  --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background - Primary actions (buttons) */
-  --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background - Primary actions (buttons) */
-  --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background - Primary actions (buttons) */
-  --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background - Primary actions (buttons) */
-  --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border - Primary actions (buttons) */
-  --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default); /** Default border - Primary actions (buttons) */
-  --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border - Primary actions (buttons) */
-  --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active); /** Active state border - Primary actions (buttons) */
-  --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default); /** Default text color - Primary actions (buttons) */
-  --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text - Primary actions (buttons) */
-  --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active); /** Active state text - Primary actions (buttons) */
-  --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color - Primary actions (buttons) */
-  --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document); /** Document text color - Primary actions (buttons) */
-  --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background - Secondary actions (links, navigation) */
-  --dsn-color-action-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background - Secondary actions (links, navigation) */
-  --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background - Secondary actions (links, navigation) */
-  --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background - Secondary actions (links, navigation) */
-  --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background - Secondary actions (links, navigation) */
-  --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background - Secondary actions (links, navigation) */
-  --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border - Secondary actions (links, navigation) */
-  --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default); /** Default border - Secondary actions (links, navigation) */
-  --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border - Secondary actions (links, navigation) */
-  --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active); /** Active state border - Secondary actions (links, navigation) */
-  --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default); /** Default text color - Secondary actions (links, navigation) */
-  --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text - Secondary actions (links, navigation) */
-  --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active); /** Active state text - Secondary actions (links, navigation) */
-  --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color - Secondary actions (links, navigation) */
-  --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document); /** Document text color - Secondary actions (links, navigation) */
-  --dsn-color-info-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond — primaire acties (buttons) */
+  --dsn-color-action-1-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background — primaire acties (buttons) */
+  --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond — primaire acties (buttons) */
+  --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond — primaire acties (buttons) */
+  --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state — primaire acties (buttons) */
+  --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state — primaire acties (buttons) */
+  --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand — primaire acties (buttons) */
+  --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand — primaire acties (buttons) */
+  --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state — primaire acties (buttons) */
+  --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state — primaire acties (buttons) */
+  --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur — primaire acties (buttons) */
+  --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state — primaire acties (buttons) */
+  --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state — primaire acties (buttons) */
+  --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur — primaire acties (buttons) */
+  --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur — primaire acties (buttons) */
+  --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur — secundaire acties (links, navigatie) */
+  --dsn-color-info-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-info-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-info-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-info-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-info-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-info-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-info-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-info-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-info-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-info-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-info-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-info-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-info-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-info-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-info-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-accent-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Document background (inverse) */
+  --dsn-color-info-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-info-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-info-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-info-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-info-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-info-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-info-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-info-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-info-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-info-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-info-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-info-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-info-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-accent-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Documentachtergrond (inverse) */
   --dsn-color-accent-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated); /** Elevated background (inverse) */
-  --dsn-color-accent-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtle background (inverse) */
-  --dsn-color-accent-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Default background (inverse) */
-  --dsn-color-accent-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Hover state background (inverse) */
-  --dsn-color-accent-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Active state background (inverse) */
-  --dsn-color-accent-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtle border (inverse) */
-  --dsn-color-accent-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Default border (inverse) */
-  --dsn-color-accent-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Hover state border (inverse) */
-  --dsn-color-accent-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Active state border (inverse) */
-  --dsn-color-accent-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Default text color (inverse) */
-  --dsn-color-accent-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Hover state text (inverse) */
-  --dsn-color-accent-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Active state text (inverse) */
-  --dsn-color-accent-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtle text color (inverse) */
-  --dsn-color-accent-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Document text color (inverse) */
-  --dsn-color-accent-3-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Document background (inverse) */
+  --dsn-color-accent-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtiele achtergrond (inverse) */
+  --dsn-color-accent-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Standaard achtergrond (inverse) */
+  --dsn-color-accent-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Achtergrond in hover state (inverse) */
+  --dsn-color-accent-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Achtergrond in active state (inverse) */
+  --dsn-color-accent-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtiele rand (inverse) */
+  --dsn-color-accent-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Standaard rand (inverse) */
+  --dsn-color-accent-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Rand in hover state (inverse) */
+  --dsn-color-accent-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Rand in active state (inverse) */
+  --dsn-color-accent-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Standaard tekstkleur (inverse) */
+  --dsn-color-accent-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Tekst in hover state (inverse) */
+  --dsn-color-accent-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Tekst in active state (inverse) */
+  --dsn-color-accent-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-accent-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Documenttekstkleur (inverse) */
+  --dsn-color-accent-3-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Documentachtergrond (inverse) */
   --dsn-color-accent-3-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated); /** Elevated background (inverse) */
-  --dsn-color-accent-3-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtle background (inverse) */
-  --dsn-color-accent-3-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Default background (inverse) */
-  --dsn-color-accent-3-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Hover state background (inverse) */
-  --dsn-color-accent-3-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Active state background (inverse) */
-  --dsn-color-accent-3-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtle border (inverse) */
-  --dsn-color-accent-3-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Default border (inverse) */
-  --dsn-color-accent-3-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Hover state border (inverse) */
-  --dsn-color-accent-3-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Active state border (inverse) */
-  --dsn-color-accent-3-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Default text color (inverse) */
-  --dsn-color-accent-3-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Hover state text (inverse) */
-  --dsn-color-accent-3-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Active state text (inverse) */
-  --dsn-color-accent-3-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtle text color (inverse) */
-  --dsn-color-accent-3-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Document text color (inverse) */
-  --dsn-color-action-1-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Document background (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated); /** Elevated background (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtle background (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Default background (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Hover state background (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Active state background (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtle border (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Default border (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Hover state border (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Active state border (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Default text color (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Hover state text (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Active state text (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtle text color (inverse) - Primary actions (buttons) */
-  --dsn-color-action-1-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Document text color (inverse) - Primary actions (buttons) */
-  --dsn-color-action-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Document background (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated); /** Elevated background (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtle background (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Default background (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Hover state background (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Active state background (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtle border (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Default border (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Hover state border (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Active state border (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Default text color (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Hover state text (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Active state text (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtle text color (inverse) - Secondary actions (links, navigation) */
-  --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Document text color (inverse) - Secondary actions (links, navigation) */
+  --dsn-color-accent-3-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtiele achtergrond (inverse) */
+  --dsn-color-accent-3-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Standaard achtergrond (inverse) */
+  --dsn-color-accent-3-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Achtergrond in hover state (inverse) */
+  --dsn-color-accent-3-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Achtergrond in active state (inverse) */
+  --dsn-color-accent-3-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtiele rand (inverse) */
+  --dsn-color-accent-3-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Standaard rand (inverse) */
+  --dsn-color-accent-3-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Rand in hover state (inverse) */
+  --dsn-color-accent-3-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Rand in active state (inverse) */
+  --dsn-color-accent-3-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Standaard tekstkleur (inverse) */
+  --dsn-color-accent-3-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Tekst in hover state (inverse) */
+  --dsn-color-accent-3-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Tekst in active state (inverse) */
+  --dsn-color-accent-3-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-accent-3-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Documenttekstkleur (inverse) */
+  --dsn-color-action-1-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Documentachtergrond (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated); /** Elevated background (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtiele achtergrond (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Standaard achtergrond (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Achtergrond in hover state (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Achtergrond in active state (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtiele rand (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Standaard rand (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Rand in hover state (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Rand in active state (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Standaard tekstkleur (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Tekst in hover state (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Tekst in active state (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtiele tekstkleur (inverse) — primaire acties (buttons) */
+  --dsn-color-action-1-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Documenttekstkleur (inverse) — primaire acties (buttons) */
+  --dsn-color-action-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document); /** Documentachtergrond (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated); /** Elevated background (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle); /** Subtiele achtergrond (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-bg-default: var(--dsn-color-accent-1-inverse-bg-default); /** Standaard achtergrond (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-bg-hover: var(--dsn-color-accent-1-inverse-bg-hover); /** Achtergrond in hover state (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-bg-active: var(--dsn-color-accent-1-inverse-bg-active); /** Achtergrond in active state (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-border-subtle: var(--dsn-color-accent-1-inverse-border-subtle); /** Subtiele rand (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-border-default: var(--dsn-color-accent-1-inverse-border-default); /** Standaard rand (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-border-hover: var(--dsn-color-accent-1-inverse-border-hover); /** Rand in hover state (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-border-active: var(--dsn-color-accent-1-inverse-border-active); /** Rand in active state (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-color-default: var(--dsn-color-accent-1-inverse-color-default); /** Standaard tekstkleur (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-color-hover: var(--dsn-color-accent-1-inverse-color-hover); /** Tekst in hover state (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Tekst in active state (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie) */
+  --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Documenttekstkleur (inverse) — secundaire acties (links, navigatie) */
   --dsn-backdrop-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van de backdrop — altijd donker, ongeacht dark mode. Gebruikt neutral.bg-document (#111111) zodat de overlay donker blijft in dark mode. */
   --dsn-backdrop-z-index: var(--dsn-z-index-400); /** Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600) */
   --dsn-action-group-column-gap: var(--dsn-space-inline-lg); /** Horizontal gap between actions in horizontal direction */
   --dsn-action-group-row-gap: var(--dsn-space-row-lg); /** Vertical gap between wrapped rows in horizontal direction */
-  --dsn-alert-border-radius: var(--dsn-border-radius-square); /** Alert border radius (square by default; themes can override to add rounded corners) */
-  --dsn-alert-border-width: var(--dsn-border-width-medium); /** Alert border width (left border only) */
-  --dsn-alert-column-gap: var(--dsn-space-inline-md); /** Gap between icon and content */
-  --dsn-alert-padding-block: var(--dsn-space-block-xl); /** Vertical padding */
-  --dsn-alert-padding-inline: var(--dsn-space-inline-xl); /** Horizontal padding */
-  --dsn-alert-row-gap: var(--dsn-space-row-md); /** Gap between heading and body */
-  --dsn-alert-negative-background-color: var(--dsn-color-negative-bg-default); /** Background color for negative variant */
-  --dsn-alert-negative-border-color: var(--dsn-color-negative-border-default); /** Border color for negative variant */
-  --dsn-alert-negative-color: var(--dsn-color-negative-color-document); /** Text color for negative variant */
-  --dsn-alert-negative-icon-color: var(--dsn-color-negative-color-default); /** Icon color for negative variant */
-  --dsn-alert-positive-background-color: var(--dsn-color-positive-bg-default); /** Background color for positive variant */
-  --dsn-alert-positive-border-color: var(--dsn-color-positive-border-default); /** Border color for positive variant */
-  --dsn-alert-positive-color: var(--dsn-color-positive-color-document); /** Text color for positive variant */
-  --dsn-alert-positive-icon-color: var(--dsn-color-positive-color-default); /** Icon color for positive variant */
-  --dsn-alert-warning-background-color: var(--dsn-color-warning-bg-default); /** Background color for warning variant */
-  --dsn-alert-warning-border-color: var(--dsn-color-warning-border-default); /** Border color for warning variant */
-  --dsn-alert-warning-color: var(--dsn-color-warning-color-document); /** Text color for warning variant */
-  --dsn-alert-warning-icon-color: var(--dsn-color-warning-color-default); /** Icon color for warning variant */
-  --dsn-breadcrumb-navigation-column-gap: var(--dsn-space-column-md); /** Gap between breadcrumb items */
-  --dsn-breadcrumb-navigation-font-size: var(--dsn-text-font-size-sm); /** Breadcrumb font size — sm (consistent met Link size small) */
-  --dsn-breadcrumb-navigation-font-weight: var(--dsn-text-font-weight-default); /** Breadcrumb font weight */
-  --dsn-breadcrumb-navigation-line-height: var(--dsn-text-line-height-sm); /** Breadcrumb line height — sm (consistent met Link size small) */
-  --dsn-breadcrumb-navigation-current-color: var(--dsn-color-neutral-color-subtle); /** Current page item color */
-  --dsn-breadcrumb-navigation-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimum touch/click target height */
-  --dsn-breadcrumb-navigation-item-padding-block: var(--dsn-space-block-sm); /** Vertical padding to reach min-block-size */
-  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
-  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
-  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
+  --dsn-alert-border-radius: var(--dsn-border-radius-square); /** Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen) */
+  --dsn-alert-border-width: var(--dsn-border-width-medium); /** Alert border-breedte (alleen linkerborder) */
+  --dsn-alert-column-gap: var(--dsn-space-inline-md); /** Ruimte tussen icoon en inhoud */
+  --dsn-alert-padding-block: var(--dsn-space-block-xl); /** Verticale padding */
+  --dsn-alert-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding */
+  --dsn-alert-row-gap: var(--dsn-space-row-md); /** Ruimte tussen koptekst en inhoud */
+  --dsn-alert-negative-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur voor negative variant */
+  --dsn-alert-negative-border-color: var(--dsn-color-negative-border-default); /** Borderkleur voor negative variant */
+  --dsn-alert-negative-color: var(--dsn-color-negative-color-document); /** Tekstkleur voor negative variant */
+  --dsn-alert-negative-icon-color: var(--dsn-color-negative-color-default); /** Icoonkleur voor negative variant */
+  --dsn-alert-positive-background-color: var(--dsn-color-positive-bg-default); /** Achtergrondkleur voor positive variant */
+  --dsn-alert-positive-border-color: var(--dsn-color-positive-border-default); /** Borderkleur voor positive variant */
+  --dsn-alert-positive-color: var(--dsn-color-positive-color-document); /** Tekstkleur voor positive variant */
+  --dsn-alert-positive-icon-color: var(--dsn-color-positive-color-default); /** Icoonkleur voor positive variant */
+  --dsn-alert-warning-background-color: var(--dsn-color-warning-bg-default); /** Achtergrondkleur voor warning variant */
+  --dsn-alert-warning-border-color: var(--dsn-color-warning-border-default); /** Borderkleur voor warning variant */
+  --dsn-alert-warning-color: var(--dsn-color-warning-color-document); /** Tekstkleur voor warning variant */
+  --dsn-alert-warning-icon-color: var(--dsn-color-warning-color-default); /** Icoonkleur voor warning variant */
+  --dsn-breadcrumb-navigation-column-gap: var(--dsn-space-column-md); /** Ruimte tussen breadcrumb-items */
+  --dsn-breadcrumb-navigation-font-size: var(--dsn-text-font-size-sm); /** Breadcrumb font-size — sm (consistent met Link size small) */
+  --dsn-breadcrumb-navigation-font-weight: var(--dsn-text-font-weight-default); /** Breadcrumb font-gewicht */
+  --dsn-breadcrumb-navigation-line-height: var(--dsn-text-line-height-sm); /** Breadcrumb line-height — sm (consistent met Link size small) */
+  --dsn-breadcrumb-navigation-current-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het huidige pagina-item */
+  --dsn-breadcrumb-navigation-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale aanraak-/klikhoogte */
+  --dsn-breadcrumb-navigation-item-padding-block: var(--dsn-space-block-sm); /** Verticale padding om de min-block-size te bereiken */
+  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** Geen horizontale padding op items */
+  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Ruimte tussen icoon en linktekst */
+  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het scheidingsicoon */
   --dsn-breakout-section-border-block-width: var(--dsn-border-width-thin); /** Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven */
-  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
-  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
-  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
-  --dsn-button-font-weight: var(--dsn-text-font-weight-bold); /** Button font weight */
-  --dsn-button-line-height: var(--dsn-text-line-height-md); /** Button line height */
-  --dsn-button-min-block-size: var(--dsn-pointer-target-min-block-size); /** Button minimum block size (WCAG 2.5.5 touch target) */
-  --dsn-button-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Button minimum inline size (WCAG 2.5.5 touch target) */
-  --dsn-button-default-background-color: var(--dsn-color-transparent); /** Default button background */
-  --dsn-button-default-negative-background-color: var(--dsn-color-transparent); /** Default negative button background */
-  --dsn-button-default-negative-border-color: var(--dsn-color-negative-border-default); /** Default negative button border */
-  --dsn-button-default-negative-color: var(--dsn-color-negative-color-default); /** Default negative button text/icon color */
-  --dsn-button-default-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Default negative button active background */
-  --dsn-button-default-negative-active-border-color: var(--dsn-color-negative-border-active); /** Default negative button active border */
-  --dsn-button-default-negative-active-color: var(--dsn-color-negative-color-active); /** Default negative button active text/icon color */
-  --dsn-button-default-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Default negative button hover background */
-  --dsn-button-default-negative-hover-border-color: var(--dsn-color-negative-border-hover); /** Default negative button hover border */
-  --dsn-button-default-negative-hover-color: var(--dsn-color-negative-color-hover); /** Default negative button hover text/icon color */
-  --dsn-button-default-positive-background-color: var(--dsn-color-transparent); /** Default positive button background */
-  --dsn-button-default-positive-border-color: var(--dsn-color-positive-border-default); /** Default positive button border */
-  --dsn-button-default-positive-color: var(--dsn-color-positive-color-default); /** Default positive button text/icon color */
-  --dsn-button-default-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Default positive button active background */
-  --dsn-button-default-positive-active-border-color: var(--dsn-color-positive-border-active); /** Default positive button active border */
-  --dsn-button-default-positive-active-color: var(--dsn-color-positive-color-active); /** Default positive button active text/icon color */
-  --dsn-button-default-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Default positive button hover background */
-  --dsn-button-default-positive-hover-border-color: var(--dsn-color-positive-border-hover); /** Default positive button hover border */
-  --dsn-button-default-positive-hover-color: var(--dsn-color-positive-color-hover); /** Default positive button hover text/icon color */
-  --dsn-button-strong-border-color: var(--dsn-color-transparent); /** Strong button border */
-  --dsn-button-strong-active-border-color: var(--dsn-color-transparent); /** Strong button active border */
-  --dsn-button-strong-hover-border-color: var(--dsn-color-transparent); /** Strong button hover border */
-  --dsn-button-strong-negative-background-color: var(--dsn-color-negative-inverse-bg-default); /** Strong negative button background */
-  --dsn-button-strong-negative-border-color: var(--dsn-color-transparent); /** Strong negative button border */
-  --dsn-button-strong-negative-color: var(--dsn-color-negative-inverse-color-default); /** Strong negative button text/icon color */
-  --dsn-button-strong-negative-active-background-color: var(--dsn-color-negative-inverse-bg-active); /** Strong negative button active background */
-  --dsn-button-strong-negative-active-border-color: var(--dsn-color-transparent); /** Strong negative button active border */
-  --dsn-button-strong-negative-active-color: var(--dsn-color-negative-inverse-color-active); /** Strong negative button active text/icon color */
-  --dsn-button-strong-negative-hover-background-color: var(--dsn-color-negative-inverse-bg-hover); /** Strong negative button hover background */
-  --dsn-button-strong-negative-hover-border-color: var(--dsn-color-transparent); /** Strong negative button hover border */
-  --dsn-button-strong-negative-hover-color: var(--dsn-color-negative-inverse-color-hover); /** Strong negative button hover text/icon color */
-  --dsn-button-strong-positive-background-color: var(--dsn-color-positive-inverse-bg-default); /** Strong positive button background */
-  --dsn-button-strong-positive-border-color: var(--dsn-color-transparent); /** Strong positive button border */
-  --dsn-button-strong-positive-color: var(--dsn-color-positive-inverse-color-default); /** Strong positive button text/icon color */
-  --dsn-button-strong-positive-active-background-color: var(--dsn-color-positive-inverse-bg-active); /** Strong positive button active background */
-  --dsn-button-strong-positive-active-border-color: var(--dsn-color-transparent); /** Strong positive button active border */
-  --dsn-button-strong-positive-active-color: var(--dsn-color-positive-inverse-color-active); /** Strong positive button active text/icon color */
-  --dsn-button-strong-positive-hover-background-color: var(--dsn-color-positive-inverse-bg-hover); /** Strong positive button hover background */
-  --dsn-button-strong-positive-hover-border-color: var(--dsn-color-transparent); /** Strong positive button hover border */
-  --dsn-button-strong-positive-hover-color: var(--dsn-color-positive-inverse-color-hover); /** Strong positive button hover text/icon color */
-  --dsn-button-subtle-background-color: var(--dsn-color-transparent); /** Subtle button background */
-  --dsn-button-subtle-border-color: var(--dsn-color-transparent); /** Subtle button border */
-  --dsn-button-subtle-active-border-color: var(--dsn-color-transparent); /** Subtle button active border */
-  --dsn-button-subtle-hover-border-color: var(--dsn-color-transparent); /** Subtle button hover border */
-  --dsn-button-subtle-negative-background-color: var(--dsn-color-transparent); /** Subtle negative button background */
-  --dsn-button-subtle-negative-border-color: var(--dsn-color-transparent); /** Subtle negative button border */
-  --dsn-button-subtle-negative-color: var(--dsn-color-negative-color-default); /** Subtle negative button text/icon color */
-  --dsn-button-subtle-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Subtle negative button active background */
-  --dsn-button-subtle-negative-active-border-color: var(--dsn-color-transparent); /** Subtle negative button active border */
-  --dsn-button-subtle-negative-active-color: var(--dsn-color-negative-color-active); /** Subtle negative button active text/icon color */
-  --dsn-button-subtle-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Subtle negative button hover background */
-  --dsn-button-subtle-negative-hover-border-color: var(--dsn-color-transparent); /** Subtle negative button hover border */
-  --dsn-button-subtle-negative-hover-color: var(--dsn-color-negative-color-hover); /** Subtle negative button hover text/icon color */
-  --dsn-button-subtle-positive-background-color: var(--dsn-color-transparent); /** Subtle positive button background */
-  --dsn-button-subtle-positive-border-color: var(--dsn-color-transparent); /** Subtle positive button border */
-  --dsn-button-subtle-positive-color: var(--dsn-color-positive-color-default); /** Subtle positive button text/icon color */
-  --dsn-button-subtle-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Subtle positive button active background */
-  --dsn-button-subtle-positive-active-border-color: var(--dsn-color-transparent); /** Subtle positive button active border */
-  --dsn-button-subtle-positive-active-color: var(--dsn-color-positive-color-active); /** Subtle positive button active text/icon color */
-  --dsn-button-subtle-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Subtle positive button hover background */
-  --dsn-button-subtle-positive-hover-border-color: var(--dsn-color-transparent); /** Subtle positive button hover border */
-  --dsn-button-subtle-positive-hover-color: var(--dsn-color-positive-color-hover); /** Subtle positive button hover text/icon color */
-  --dsn-button-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Disabled button background — neutral scale, variant-independent */
-  --dsn-button-disabled-color: var(--dsn-color-neutral-color-subtle); /** Disabled button text/icon color — neutral scale, variant-independent */
-  --dsn-button-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Disabled button border color — neutral scale, variant-independent */
-  --dsn-button-size-default-font-size: var(--dsn-text-font-size-md); /** Default button font size */
-  --dsn-button-size-default-gap: var(--dsn-space-text-sm); /** Default button gap between icon and text */
-  --dsn-button-size-default-icon-only-padding: var(--dsn-space-block-md); /** Default button icon-only padding */
-  --dsn-button-size-default-padding-block: var(--dsn-space-block-md); /** Default button vertical padding */
-  --dsn-button-size-default-padding-inline: var(--dsn-space-inline-xl); /** Default button horizontal padding */
-  --dsn-button-size-large-font-size: var(--dsn-text-font-size-lg); /** Large button font size */
-  --dsn-button-size-large-gap: var(--dsn-space-text-md); /** Large button gap between icon and text */
-  --dsn-button-size-large-icon-only-padding: var(--dsn-space-block-lg); /** Large button icon-only padding */
-  --dsn-button-size-large-padding-block: var(--dsn-space-block-lg); /** Large button vertical padding */
-  --dsn-button-size-large-padding-inline: var(--dsn-space-inline-2xl); /** Large button horizontal padding */
-  --dsn-button-size-small-font-size: var(--dsn-text-font-size-sm); /** Small button font size */
-  --dsn-button-size-small-gap: var(--dsn-space-text-sm); /** Small button gap between icon and text */
-  --dsn-button-size-small-icon-only-padding: var(--dsn-space-block-sm); /** Small button icon-only padding */
-  --dsn-button-size-small-padding-block: var(--dsn-space-block-sm); /** Small button vertical padding */
-  --dsn-button-size-small-padding-inline: var(--dsn-space-inline-lg); /** Small button horizontal padding */
+  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border-radius */
+  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border-breedte */
+  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font-familie */
+  --dsn-button-font-weight: var(--dsn-text-font-weight-bold); /** Button font-gewicht */
+  --dsn-button-line-height: var(--dsn-text-line-height-md); /** Button line-height */
+  --dsn-button-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel) */
+  --dsn-button-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel) */
+  --dsn-button-default-background-color: var(--dsn-color-transparent); /** Achtergrond van de default button */
+  --dsn-button-default-negative-background-color: var(--dsn-color-transparent); /** Achtergrond van de default negative button */
+  --dsn-button-default-negative-border-color: var(--dsn-color-negative-border-default); /** Border van de default negative button */
+  --dsn-button-default-negative-color: var(--dsn-color-negative-color-default); /** Tekst-/icoonkleur van de default negative button */
+  --dsn-button-default-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Achtergrond van de default negative button op active */
+  --dsn-button-default-negative-active-border-color: var(--dsn-color-negative-border-active); /** Border van de default negative button op active */
+  --dsn-button-default-negative-active-color: var(--dsn-color-negative-color-active); /** Tekst-/icoonkleur van de default negative button op active */
+  --dsn-button-default-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Achtergrond van de default negative button op hover */
+  --dsn-button-default-negative-hover-border-color: var(--dsn-color-negative-border-hover); /** Border van de default negative button op hover */
+  --dsn-button-default-negative-hover-color: var(--dsn-color-negative-color-hover); /** Tekst-/icoonkleur van de default negative button op hover */
+  --dsn-button-default-positive-background-color: var(--dsn-color-transparent); /** Achtergrond van de default positive button */
+  --dsn-button-default-positive-border-color: var(--dsn-color-positive-border-default); /** Border van de default positive button */
+  --dsn-button-default-positive-color: var(--dsn-color-positive-color-default); /** Tekst-/icoonkleur van de default positive button */
+  --dsn-button-default-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Achtergrond van de default positive button op active */
+  --dsn-button-default-positive-active-border-color: var(--dsn-color-positive-border-active); /** Border van de default positive button op active */
+  --dsn-button-default-positive-active-color: var(--dsn-color-positive-color-active); /** Tekst-/icoonkleur van de default positive button op active */
+  --dsn-button-default-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Achtergrond van de default positive button op hover */
+  --dsn-button-default-positive-hover-border-color: var(--dsn-color-positive-border-hover); /** Border van de default positive button op hover */
+  --dsn-button-default-positive-hover-color: var(--dsn-color-positive-color-hover); /** Tekst-/icoonkleur van de default positive button op hover */
+  --dsn-button-strong-border-color: var(--dsn-color-transparent); /** Border van de strong button */
+  --dsn-button-strong-active-border-color: var(--dsn-color-transparent); /** Border van de strong button op active */
+  --dsn-button-strong-hover-border-color: var(--dsn-color-transparent); /** Border van de strong button op hover */
+  --dsn-button-strong-negative-background-color: var(--dsn-color-negative-inverse-bg-default); /** Achtergrond van de strong negative button */
+  --dsn-button-strong-negative-border-color: var(--dsn-color-transparent); /** Border van de strong negative button */
+  --dsn-button-strong-negative-color: var(--dsn-color-negative-inverse-color-default); /** Tekst-/icoonkleur van de strong negative button */
+  --dsn-button-strong-negative-active-background-color: var(--dsn-color-negative-inverse-bg-active); /** Achtergrond van de strong negative button op active */
+  --dsn-button-strong-negative-active-border-color: var(--dsn-color-transparent); /** Border van de strong negative button op active */
+  --dsn-button-strong-negative-active-color: var(--dsn-color-negative-inverse-color-active); /** Tekst-/icoonkleur van de strong negative button op active */
+  --dsn-button-strong-negative-hover-background-color: var(--dsn-color-negative-inverse-bg-hover); /** Achtergrond van de strong negative button op hover */
+  --dsn-button-strong-negative-hover-border-color: var(--dsn-color-transparent); /** Border van de strong negative button op hover */
+  --dsn-button-strong-negative-hover-color: var(--dsn-color-negative-inverse-color-hover); /** Tekst-/icoonkleur van de strong negative button op hover */
+  --dsn-button-strong-positive-background-color: var(--dsn-color-positive-inverse-bg-default); /** Achtergrond van de strong positive button */
+  --dsn-button-strong-positive-border-color: var(--dsn-color-transparent); /** Border van de strong positive button */
+  --dsn-button-strong-positive-color: var(--dsn-color-positive-inverse-color-default); /** Tekst-/icoonkleur van de strong positive button */
+  --dsn-button-strong-positive-active-background-color: var(--dsn-color-positive-inverse-bg-active); /** Achtergrond van de strong positive button op active */
+  --dsn-button-strong-positive-active-border-color: var(--dsn-color-transparent); /** Border van de strong positive button op active */
+  --dsn-button-strong-positive-active-color: var(--dsn-color-positive-inverse-color-active); /** Tekst-/icoonkleur van de strong positive button op active */
+  --dsn-button-strong-positive-hover-background-color: var(--dsn-color-positive-inverse-bg-hover); /** Achtergrond van de strong positive button op hover */
+  --dsn-button-strong-positive-hover-border-color: var(--dsn-color-transparent); /** Border van de strong positive button op hover */
+  --dsn-button-strong-positive-hover-color: var(--dsn-color-positive-inverse-color-hover); /** Tekst-/icoonkleur van de strong positive button op hover */
+  --dsn-button-subtle-background-color: var(--dsn-color-transparent); /** Achtergrond van de subtle button */
+  --dsn-button-subtle-border-color: var(--dsn-color-transparent); /** Border van de subtle button */
+  --dsn-button-subtle-active-border-color: var(--dsn-color-transparent); /** Border van de subtle button op active */
+  --dsn-button-subtle-hover-border-color: var(--dsn-color-transparent); /** Border van de subtle button op hover */
+  --dsn-button-subtle-negative-background-color: var(--dsn-color-transparent); /** Achtergrond van de subtle negative button */
+  --dsn-button-subtle-negative-border-color: var(--dsn-color-transparent); /** Border van de subtle negative button */
+  --dsn-button-subtle-negative-color: var(--dsn-color-negative-color-default); /** Tekst-/icoonkleur van de subtle negative button */
+  --dsn-button-subtle-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Achtergrond van de subtle negative button op active */
+  --dsn-button-subtle-negative-active-border-color: var(--dsn-color-transparent); /** Border van de subtle negative button op active */
+  --dsn-button-subtle-negative-active-color: var(--dsn-color-negative-color-active); /** Tekst-/icoonkleur van de subtle negative button op active */
+  --dsn-button-subtle-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Achtergrond van de subtle negative button op hover */
+  --dsn-button-subtle-negative-hover-border-color: var(--dsn-color-transparent); /** Border van de subtle negative button op hover */
+  --dsn-button-subtle-negative-hover-color: var(--dsn-color-negative-color-hover); /** Tekst-/icoonkleur van de subtle negative button op hover */
+  --dsn-button-subtle-positive-background-color: var(--dsn-color-transparent); /** Achtergrond van de subtle positive button */
+  --dsn-button-subtle-positive-border-color: var(--dsn-color-transparent); /** Border van de subtle positive button */
+  --dsn-button-subtle-positive-color: var(--dsn-color-positive-color-default); /** Tekst-/icoonkleur van de subtle positive button */
+  --dsn-button-subtle-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Achtergrond van de subtle positive button op active */
+  --dsn-button-subtle-positive-active-border-color: var(--dsn-color-transparent); /** Border van de subtle positive button op active */
+  --dsn-button-subtle-positive-active-color: var(--dsn-color-positive-color-active); /** Tekst-/icoonkleur van de subtle positive button op active */
+  --dsn-button-subtle-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Achtergrond van de subtle positive button op hover */
+  --dsn-button-subtle-positive-hover-border-color: var(--dsn-color-transparent); /** Border van de subtle positive button op hover */
+  --dsn-button-subtle-positive-hover-color: var(--dsn-color-positive-color-hover); /** Tekst-/icoonkleur van de subtle positive button op hover */
+  --dsn-button-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk */
+  --dsn-button-disabled-color: var(--dsn-color-neutral-color-subtle); /** Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk */
+  --dsn-button-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk */
+  --dsn-button-size-default-font-size: var(--dsn-text-font-size-md); /** Font-size van de default button */
+  --dsn-button-size-default-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de default button */
+  --dsn-button-size-default-icon-only-padding: var(--dsn-space-block-md); /** Padding van de icon-only default button */
+  --dsn-button-size-default-padding-block: var(--dsn-space-block-md); /** Verticale padding van de default button */
+  --dsn-button-size-default-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de default button */
+  --dsn-button-size-large-font-size: var(--dsn-text-font-size-lg); /** Font-size van de large button */
+  --dsn-button-size-large-gap: var(--dsn-space-text-md); /** Ruimte tussen icoon en tekst van de large button */
+  --dsn-button-size-large-icon-only-padding: var(--dsn-space-block-lg); /** Padding van de icon-only large button */
+  --dsn-button-size-large-padding-block: var(--dsn-space-block-lg); /** Verticale padding van de large button */
+  --dsn-button-size-large-padding-inline: var(--dsn-space-inline-2xl); /** Horizontale padding van de large button */
+  --dsn-button-size-small-font-size: var(--dsn-text-font-size-sm); /** Font-size van de small button */
+  --dsn-button-size-small-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de small button */
+  --dsn-button-size-small-icon-only-padding: var(--dsn-space-block-sm); /** Padding van de icon-only small button */
+  --dsn-button-size-small-padding-block: var(--dsn-space-block-sm); /** Verticale padding van de small button */
+  --dsn-button-size-small-padding-inline: var(--dsn-space-inline-lg); /** Horizontale padding van de small button */
   --dsn-card-background-color: var(--dsn-color-neutral-bg-document); /** Card achtergrondkleur standaard — zelfde als paginaachtergrond */
   --dsn-card-background-color-hover: var(--dsn-color-neutral-bg-elevated); /** Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie */
   --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
@@ -721,17 +725,17 @@
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
-  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** No border by default for fieldset */
-  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Space between checkbox options in the group */
-  --dsn-checkbox-group-margin: var(--dsn-space-none); /** No margin by default for fieldset */
-  --dsn-checkbox-group-padding: var(--dsn-space-none); /** No padding by default for fieldset */
+  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
+  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
+  --dsn-checkbox-group-margin: var(--dsn-space-none); /** Standaard geen margin op de fieldset */
+  --dsn-checkbox-group-padding: var(--dsn-space-none); /** Standaard geen padding op de fieldset */
   --dsn-checkbox-option-gap: var(--dsn-space-text-md); /** Gap between checkbox and label */
   --dsn-checkbox-option-padding-block: var(--dsn-space-block-md); /** Vertical padding for touch target accessibility (WCAG 2.5.5) */
-  --dsn-checkbox-border-radius: var(--dsn-border-radius-square); /** Square corners for checkbox */
+  --dsn-checkbox-border-radius: var(--dsn-border-radius-square); /** Vierkante hoeken voor de checkbox */
   --dsn-checkbox-border-width: var(--dsn-border-width-thin);
   --dsn-checkbox-active-border-width: var(--dsn-border-width-medium);
   --dsn-checkbox-checked-border-width: var(--dsn-border-width-thin);
-  --dsn-checkbox-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Check icon color */
+  --dsn-checkbox-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Kleur van het vinkje */
   --dsn-checkbox-focus-border-width: var(--dsn-border-width-medium);
   --dsn-checkbox-hover-border-width: var(--dsn-border-width-medium);
   --dsn-checkbox-invalid-border-width: var(--dsn-border-width-medium);
@@ -741,7 +745,7 @@
   --dsn-checkbox-checked-hover-border-width: var(--dsn-border-width-medium);
   --dsn-checkbox-checked-hover-color: var(--dsn-color-neutral-inverse-color-default);
   --dsn-checkbox-indeterminate-border-width: var(--dsn-border-width-thin);
-  --dsn-checkbox-indeterminate-color: var(--dsn-color-neutral-inverse-color-default); /** Indeterminate icon (minus) color */
+  --dsn-checkbox-indeterminate-color: var(--dsn-color-neutral-inverse-color-default); /** Kleur van het indeterminate-icoon (minteken) */
   --dsn-checkbox-indeterminate-active-border-width: var(--dsn-border-width-medium);
   --dsn-checkbox-indeterminate-active-color: var(--dsn-color-neutral-inverse-color-default);
   --dsn-checkbox-indeterminate-focus-border-width: var(--dsn-border-width-medium);
@@ -758,13 +762,13 @@
   --dsn-date-input-group-label-gap: var(--dsn-space-text-sm); /** Gap between each field label and its input */
   --dsn-date-input-button-inset-inline-end: var(--dsn-space-inline-sm); /** Distance from the inline-end border to the calendar button (4px) */
   --dsn-date-input-icon-gap: var(--dsn-space-text-md); /** Gap between calendar button and input text */
-  --dsn-details-row-gap: var(--dsn-space-row-md); /** Vertical gap between summary and content */
-  --dsn-details-summary-gap: var(--dsn-space-text-sm); /** Gap between chevron icon and label text */
-  --dsn-details-content-border-color: var(--dsn-color-neutral-border-subtle); /** Left border color for visual grouping */
-  --dsn-details-content-border-inline-start-width: var(--dsn-border-width-medium); /** Left border width */
-  --dsn-details-content-padding-inline-start: var(--dsn-space-inline-xl); /** Left padding — aligns content with label text */
-  --dsn-details-content-padding-inline-end: var(--dsn-space-inline-xl); /** Right padding */
-  --dsn-details-content-padding-block: var(--dsn-space-block-xl); /** Top and bottom padding */
+  --dsn-details-row-gap: var(--dsn-space-row-md); /** Verticale ruimte tussen summary en inhoud */
+  --dsn-details-summary-gap: var(--dsn-space-text-sm); /** Ruimte tussen het chevron-icoon en de labeltekst */
+  --dsn-details-content-border-color: var(--dsn-color-neutral-border-subtle); /** Kleur van de linkerborder voor visuele groepering */
+  --dsn-details-content-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder */
+  --dsn-details-content-padding-inline-start: var(--dsn-space-inline-xl); /** Linker padding — lijnt de inhoud uit met de labeltekst */
+  --dsn-details-content-padding-inline-end: var(--dsn-space-inline-xl); /** Rechter padding */
+  --dsn-details-content-padding-block: var(--dsn-space-block-xl); /** Boven- en onderpadding */
   --dsn-dot-badge-pulse-easing: var(--dsn-transition-easing-default); /** Easing van de pulse-animatie */
   --dsn-drawer-z-index: var(--dsn-z-index-500); /** Positionering boven de backdrop (400) en onder de skip-link (600) */
   --dsn-drawer-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina */
@@ -782,9 +786,9 @@
   --dsn-drawer-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
   --dsn-drawer-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
   --dsn-drawer-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
-  --dsn-file-input-column-gap: var(--dsn-space-text-lg); /** Gap between file-selector-button and filename text */
-  --dsn-file-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** File input minimum height (WCAG touch target) */
-  --dsn-file-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** File input minimum width (WCAG touch target) */
+  --dsn-file-input-column-gap: var(--dsn-space-text-lg); /** Ruimte tussen de file-selector-button en de bestandsnaamtekst */
+  --dsn-file-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel) */
+  --dsn-file-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel) */
   --dsn-file-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van het file component */
   --dsn-file-background-color-hover: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur bij hover in de interactieve variant — zelfde als Card */
   --dsn-file-background-color-active: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging */
@@ -806,70 +810,79 @@
   --dsn-file-media-background-color: var(--dsn-color-neutral-bg-default);
   --dsn-file-media-icon-color: var(--dsn-color-neutral-color-subtle);
   --dsn-file-status-icon-color: var(--dsn-color-positive-color-default); /** Zelfde token als FormFieldStatus positive variant */
-  --dsn-form-field-description-color: var(--dsn-color-neutral-color-subtle); /** Form field description text color */
-  --dsn-form-field-description-font-family: var(--dsn-text-font-family-default); /** Form field description font family */
-  --dsn-form-field-description-font-size: var(--dsn-text-font-size-md); /** Form field description font size */
-  --dsn-form-field-description-font-weight: var(--dsn-text-font-weight-default); /** Form field description font weight */
-  --dsn-form-field-description-line-height: var(--dsn-text-line-height-md); /** Form field description line height */
-  --dsn-form-field-description-margin-block-end: var(--dsn-space-block-md); /** Space below description before form control */
-  --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Form field error message text color (negative sentiment) */
-  --dsn-form-field-error-message-font-family: var(--dsn-text-font-family-default); /** Form field error message font family */
-  --dsn-form-field-error-message-font-size: var(--dsn-text-font-size-md); /** Form field error message font size */
-  --dsn-form-field-error-message-font-weight: var(--dsn-text-font-weight-default); /** Form field error message font weight */
-  --dsn-form-field-error-message-gap: var(--dsn-space-text-sm); /** Space between icon and error message text */
-  --dsn-form-field-error-message-line-height: var(--dsn-text-line-height-md); /** Form field error message line height */
-  --dsn-form-field-error-message-margin-block-end: var(--dsn-space-block-md); /** Space below error message before form control */
-  --dsn-form-field-label-suffix-color: var(--dsn-color-neutral-color-document); /** Form field label suffix text color */
-  --dsn-form-field-label-suffix-font-family: var(--dsn-text-font-family-default); /** Form field label suffix font family */
-  --dsn-form-field-label-suffix-font-size: var(--dsn-text-font-size-md); /** Form field label suffix font size */
-  --dsn-form-field-label-suffix-font-weight: var(--dsn-text-font-weight-default); /** Form field label suffix font weight */
-  --dsn-form-field-label-suffix-line-height: var(--dsn-text-line-height-md); /** Form field label suffix line height */
-  --dsn-form-field-label-suffix-margin-inline-start: var(--dsn-space-text-sm); /** Space between label text and suffix text */
-  --dsn-form-field-label-color: var(--dsn-color-neutral-color-document); /** Form field label text color */
-  --dsn-form-field-label-font-family: var(--dsn-text-font-family-default); /** Form field label font family */
-  --dsn-form-field-label-font-size: var(--dsn-text-font-size-md); /** Form field label font size */
-  --dsn-form-field-label-font-weight: var(--dsn-text-font-weight-bold); /** Form field label font weight */
-  --dsn-form-field-label-line-height: var(--dsn-text-line-height-md); /** Form field label line height */
-  --dsn-form-field-label-margin-block-end: var(--dsn-space-block-md); /** Space below label before form control (when no description follows) */
-  --dsn-form-field-label-margin-block-end-with-description: var(--dsn-space-block-sm); /** Space below label when description follows */
-  --dsn-form-field-status-color: var(--dsn-color-neutral-color-subtle); /** Form field status text color (subtle for non-critical info) */
-  --dsn-form-field-status-font-family: var(--dsn-text-font-family-default); /** Form field status font family */
-  --dsn-form-field-status-font-size: var(--dsn-text-font-size-md); /** Form field status font size */
-  --dsn-form-field-status-font-weight: var(--dsn-text-font-weight-default); /** Form field status font weight */
-  --dsn-form-field-status-gap: var(--dsn-space-text-sm); /** Gap between icon and text (positive and warning variants) */
-  --dsn-form-field-status-line-height: var(--dsn-text-line-height-md); /** Form field status line height */
-  --dsn-form-field-status-margin-block-start: var(--dsn-space-block-md); /** Space above status message after form control */
-  --dsn-form-field-status-positive-color: var(--dsn-color-positive-color-default); /** Text color for positive variant */
-  --dsn-form-field-status-warning-color: var(--dsn-color-warning-color-default); /** Text color for warning variant */
-  --dsn-form-field-margin-block-end: var(--dsn-space-none); /** Bottom margin of form field container */
-  --dsn-form-field-margin-block-start: var(--dsn-space-none); /** Top margin of form field container */
-  --dsn-form-field-invalid-border-inline-start-color: var(--dsn-color-negative-border-default); /** Left border color for invalid form fields */
-  --dsn-form-field-invalid-border-inline-start-width: var(--dsn-border-width-medium); /** Left border width for invalid form fields */
-  --dsn-form-field-invalid-padding-inline-start: var(--dsn-space-inline-xl); /** Left padding for invalid form fields (to accommodate border) */
+  --dsn-form-field-description-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van de formulierveldbeschrijving */
+  --dsn-form-field-description-font-family: var(--dsn-text-font-family-default); /** Font-familie van de formulierveldbeschrijving */
+  --dsn-form-field-description-font-size: var(--dsn-text-font-size-md); /** Font-size van de formulierveldbeschrijving */
+  --dsn-form-field-description-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de formulierveldbeschrijving */
+  --dsn-form-field-description-line-height: var(--dsn-text-line-height-md); /** Line-height van de formulierveldbeschrijving */
+  --dsn-form-field-description-margin-block-end: var(--dsn-space-block-md); /** Ruimte onder de beschrijving voor het formulierbesturingselement */
+  --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Tekstkleur van de foutmelding (negative sentiment) */
+  --dsn-form-field-error-message-font-family: var(--dsn-text-font-family-default); /** Font-familie van de foutmelding */
+  --dsn-form-field-error-message-font-size: var(--dsn-text-font-size-md); /** Font-size van de foutmelding */
+  --dsn-form-field-error-message-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de foutmelding */
+  --dsn-form-field-error-message-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en foutmeldingstekst */
+  --dsn-form-field-error-message-line-height: var(--dsn-text-line-height-md); /** Line-height van de foutmelding */
+  --dsn-form-field-error-message-margin-block-end: var(--dsn-space-block-md); /** Ruimte onder de foutmelding voor het formulierbesturingselement */
+  --dsn-form-field-label-suffix-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-font-family: var(--dsn-text-font-family-default); /** Font-familie van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-font-size: var(--dsn-text-font-size-md); /** Font-size van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-line-height: var(--dsn-text-line-height-md); /** Line-height van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-margin-inline-start: var(--dsn-space-text-sm); /** Ruimte tussen de labeltekst en het achtervoegsel */
+  --dsn-form-field-label-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van het formulierveldlabel */
+  --dsn-form-field-label-font-family: var(--dsn-text-font-family-default); /** Font-familie van het formulierveldlabel */
+  --dsn-form-field-label-font-size: var(--dsn-text-font-size-md); /** Font-size van het formulierveldlabel */
+  --dsn-form-field-label-font-weight: var(--dsn-text-font-weight-bold); /** Font-gewicht van het formulierveldlabel */
+  --dsn-form-field-label-line-height: var(--dsn-text-line-height-md); /** Line-height van het formulierveldlabel */
+  --dsn-form-field-label-margin-block-end: var(--dsn-space-block-md); /** Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt) */
+  --dsn-form-field-label-margin-block-end-with-description: var(--dsn-space-block-sm); /** Ruimte onder het label wanneer een beschrijving volgt */
+  --dsn-form-field-status-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie) */
+  --dsn-form-field-status-font-family: var(--dsn-text-font-family-default); /** Font-familie van de veldstatus */
+  --dsn-form-field-status-font-size: var(--dsn-text-font-size-md); /** Font-size van de veldstatus */
+  --dsn-form-field-status-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de veldstatus */
+  --dsn-form-field-status-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst (positive en warning varianten) */
+  --dsn-form-field-status-line-height: var(--dsn-text-line-height-md); /** Line-height van de veldstatus */
+  --dsn-form-field-status-margin-block-start: var(--dsn-space-block-md); /** Ruimte boven het statusbericht na het formulierbesturingselement */
+  --dsn-form-field-status-positive-color: var(--dsn-color-positive-color-default); /** Tekstkleur voor positive variant */
+  --dsn-form-field-status-warning-color: var(--dsn-color-warning-color-default); /** Tekstkleur voor warning variant */
+  --dsn-form-field-margin-block-end: var(--dsn-space-none); /** Onderste margin van de formulierveldcontainer */
+  --dsn-form-field-margin-block-start: var(--dsn-space-none); /** Bovenste margin van de formulierveldcontainer */
+  --dsn-form-field-invalid-border-inline-start-color: var(--dsn-color-negative-border-default); /** Kleur van de linkerborder voor ongeldige formuliervelden */
+  --dsn-form-field-invalid-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder voor ongeldige formuliervelden */
+  --dsn-form-field-invalid-padding-inline-start: var(--dsn-space-inline-xl); /** Linker padding voor ongeldige formuliervelden (om de border op te vangen) */
   --dsn-grid-gutter: var(--dsn-space-column-xl); /** Horizontal gap between grid columns (overridden to column.md in information-dense) */
   --dsn-grid-row-gap: var(--dsn-space-column-xl); /** Vertical gap between grid rows (overridden to column.md in information-dense) */
-  --dsn-grid-margin: var(--dsn-space-column-3xl); /** Outer padding on both sides of the grid container */
   --dsn-hero-padding-block: var(--dsn-space-block-4xl); /** Verticale padding van de Hero-inhoud */
   --dsn-hero-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline */
-  --dsn-hero-background-color-default: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de standaard Hero — licht blauw accent-1 */
-  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
+  --dsn-hero-background-color-default: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de standaard Hero */
+  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero */
   --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
-  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
+  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --dsn-hero-border-block-width: var(--dsn-border-width-thin); /** Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven */
-  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
+  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
   --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
   --dsn-image-caption-font-size: var(--dsn-text-font-size-sm); /** Iets kleiner dan bodytekst om hiërarchie te markeren */
   --dsn-image-caption-line-height: var(--dsn-text-line-height-sm); /** Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm */
   --dsn-image-caption-margin-block-start: var(--dsn-space-row-sm); /** Kleine ademruimte tussen afbeelding en bijschrift */
-  --dsn-link-gap: var(--dsn-space-text-sm); /** Link gap between icon and text */
-  --dsn-link-disabled-color: var(--dsn-color-neutral-color-subtle); /** Link disabled text color */
-  --dsn-link-size-default-font-size: var(--dsn-text-font-size-md); /** Default link font size */
-  --dsn-link-size-default-gap: var(--dsn-space-text-sm); /** Default link gap between icon and text */
-  --dsn-link-size-large-font-size: var(--dsn-text-font-size-lg); /** Large link font size */
-  --dsn-link-size-large-gap: var(--dsn-space-text-md); /** Large link gap between icon and text */
-  --dsn-link-size-small-font-size: var(--dsn-text-font-size-sm); /** Small link font size */
-  --dsn-link-size-small-gap: var(--dsn-space-text-sm); /** Small link gap between icon and text */
+  --dsn-link-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de link */
+  --dsn-link-disabled-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van de link op disabled */
+  --dsn-link-size-default-font-size: var(--dsn-text-font-size-md); /** Font-size van de default link */
+  --dsn-link-size-default-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de default link */
+  --dsn-link-size-large-font-size: var(--dsn-text-font-size-lg); /** Font-size van de large link */
+  --dsn-link-size-large-gap: var(--dsn-space-text-md); /** Ruimte tussen icoon en tekst van de large link */
+  --dsn-link-size-small-font-size: var(--dsn-text-font-size-sm); /** Font-size van de small link */
+  --dsn-link-size-small-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de small link */
   --dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema. */
   --dsn-logo-color-label: var(--dsn-color-neutral-bg-document); /** Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken. */
   --dsn-menu-item-font-size: var(--dsn-text-font-size-md); /** Gedeeld: lettergrootte voor MenuLink en MenuButton */
@@ -901,28 +914,28 @@
   --dsn-modal-dialog-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
   --dsn-modal-dialog-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
   --dsn-modal-dialog-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
-  --dsn-note-border-inline-start-width: var(--dsn-border-width-medium); /** Note left border width */
-  --dsn-note-column-gap: var(--dsn-space-inline-md); /** Gap between icon and content */
-  --dsn-note-padding-block: var(--dsn-space-block-xl); /** Vertical padding */
-  --dsn-note-padding-inline-end: var(--dsn-space-inline-xl); /** Horizontal padding inline-end */
-  --dsn-note-padding-inline-start: var(--dsn-space-inline-xl); /** Horizontal padding inline-start (after the border) */
-  --dsn-note-row-gap: var(--dsn-space-row-md); /** Gap between heading and body */
-  --dsn-note-negative-background-color: var(--dsn-color-negative-bg-default); /** Background color for negative variant */
-  --dsn-note-negative-border-inline-start-color: var(--dsn-color-negative-border-default); /** Left border color for negative variant */
-  --dsn-note-negative-color: var(--dsn-color-negative-color-document); /** Text color for negative variant */
-  --dsn-note-negative-icon-color: var(--dsn-color-negative-color-default); /** Icon color for negative variant */
-  --dsn-note-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Background color for neutral variant (default) */
-  --dsn-note-neutral-border-inline-start-color: var(--dsn-color-neutral-border-default); /** Left border color for neutral variant (default) */
-  --dsn-note-neutral-color: var(--dsn-color-neutral-color-document); /** Text color for neutral variant (default) */
-  --dsn-note-neutral-icon-color: var(--dsn-color-neutral-color-default); /** Icon color for neutral variant (default) */
-  --dsn-note-positive-background-color: var(--dsn-color-positive-bg-default); /** Background color for positive variant */
-  --dsn-note-positive-border-inline-start-color: var(--dsn-color-positive-border-default); /** Left border color for positive variant */
-  --dsn-note-positive-color: var(--dsn-color-positive-color-document); /** Text color for positive variant */
-  --dsn-note-positive-icon-color: var(--dsn-color-positive-color-default); /** Icon color for positive variant */
-  --dsn-note-warning-background-color: var(--dsn-color-warning-bg-default); /** Background color for warning variant */
-  --dsn-note-warning-border-inline-start-color: var(--dsn-color-warning-border-default); /** Left border color for warning variant */
-  --dsn-note-warning-color: var(--dsn-color-warning-color-document); /** Text color for warning variant */
-  --dsn-note-warning-icon-color: var(--dsn-color-warning-color-default); /** Icon color for warning variant */
+  --dsn-note-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder van de Note */
+  --dsn-note-column-gap: var(--dsn-space-inline-md); /** Ruimte tussen icoon en inhoud */
+  --dsn-note-padding-block: var(--dsn-space-block-xl); /** Verticale padding */
+  --dsn-note-padding-inline-end: var(--dsn-space-inline-xl); /** Horizontale padding aan het einde */
+  --dsn-note-padding-inline-start: var(--dsn-space-inline-xl); /** Horizontale padding aan het begin (na de border) */
+  --dsn-note-row-gap: var(--dsn-space-row-md); /** Ruimte tussen koptekst en inhoud */
+  --dsn-note-negative-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur voor negative variant */
+  --dsn-note-negative-border-inline-start-color: var(--dsn-color-negative-border-default); /** Kleur van de linkerborder voor negative variant */
+  --dsn-note-negative-color: var(--dsn-color-negative-color-document); /** Tekstkleur voor negative variant */
+  --dsn-note-negative-icon-color: var(--dsn-color-negative-color-default); /** Icoonkleur voor negative variant */
+  --dsn-note-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Achtergrondkleur voor neutral variant (standaard) */
+  --dsn-note-neutral-border-inline-start-color: var(--dsn-color-neutral-border-default); /** Kleur van de linkerborder voor neutral variant (standaard) */
+  --dsn-note-neutral-color: var(--dsn-color-neutral-color-document); /** Tekstkleur voor neutral variant (standaard) */
+  --dsn-note-neutral-icon-color: var(--dsn-color-neutral-color-default); /** Icoonkleur voor neutral variant (standaard) */
+  --dsn-note-positive-background-color: var(--dsn-color-positive-bg-default); /** Achtergrondkleur voor positive variant */
+  --dsn-note-positive-border-inline-start-color: var(--dsn-color-positive-border-default); /** Kleur van de linkerborder voor positive variant */
+  --dsn-note-positive-color: var(--dsn-color-positive-color-document); /** Tekstkleur voor positive variant */
+  --dsn-note-positive-icon-color: var(--dsn-color-positive-color-default); /** Icoonkleur voor positive variant */
+  --dsn-note-warning-background-color: var(--dsn-color-warning-bg-default); /** Achtergrondkleur voor warning variant */
+  --dsn-note-warning-border-inline-start-color: var(--dsn-color-warning-border-default); /** Kleur van de linkerborder voor warning variant */
+  --dsn-note-warning-color: var(--dsn-color-warning-color-document); /** Tekstkleur voor warning variant */
+  --dsn-note-warning-icon-color: var(--dsn-color-warning-color-default); /** Icoonkleur voor warning variant */
   --dsn-number-badge-font-size: var(--dsn-text-font-size-sm); /** NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap) */
   --dsn-number-badge-line-height: var(--dsn-text-line-height-sm); /** NumberBadge line height */
   --dsn-number-badge-font-weight: var(--dsn-text-font-weight-bold); /** NumberBadge font weight — bold voor leesbaarheid op kleine afmeting */
@@ -931,69 +944,69 @@
   --dsn-number-badge-border-radius: var(--dsn-border-radius-round); /** Pill-vorm via volledig ronde border-radius */
   --dsn-number-badge-border-width: var(--dsn-border-width-thin); /** Transparante border voor forced-colors / High Contrast mode ondersteuning */
   --dsn-number-badge-border-color: var(--dsn-color-transparent); /** Transparant by default; zichtbaar in forced-colors / High Contrast mode */
-  --dsn-number-badge-negative-color: var(--dsn-color-negative-inverse-color-default); /** Tekstkleur voor negative variant (wit op donkere achtergrond) */
+  --dsn-number-badge-negative-color: var(--dsn-color-negative-inverse-color-default); /** Tekstkleur voor negative variant */
   --dsn-number-badge-negative-background-color: var(--dsn-color-negative-inverse-bg-default); /** Achtergrondkleur voor negative variant */
-  --dsn-number-badge-positive-color: var(--dsn-color-positive-inverse-color-default); /** Tekstkleur voor positive variant (wit op donkere achtergrond) */
+  --dsn-number-badge-positive-color: var(--dsn-color-positive-inverse-color-default); /** Tekstkleur voor positive variant */
   --dsn-number-badge-positive-background-color: var(--dsn-color-positive-inverse-bg-default); /** Achtergrondkleur voor positive variant */
-  --dsn-number-badge-warning-color: var(--dsn-color-warning-inverse-color-default); /** Tekstkleur voor warning variant (wit op donkere achtergrond) */
+  --dsn-number-badge-warning-color: var(--dsn-color-warning-inverse-color-default); /** Tekstkleur voor warning variant */
   --dsn-number-badge-warning-background-color: var(--dsn-color-warning-inverse-bg-default); /** Achtergrondkleur voor warning variant */
-  --dsn-number-badge-info-color: var(--dsn-color-info-inverse-color-default); /** Tekstkleur voor info variant (wit op donkere achtergrond) */
+  --dsn-number-badge-info-color: var(--dsn-color-info-inverse-color-default); /** Tekstkleur voor info variant */
   --dsn-number-badge-info-background-color: var(--dsn-color-info-inverse-bg-default); /** Achtergrondkleur voor info variant */
-  --dsn-number-badge-neutral-color: var(--dsn-color-neutral-inverse-color-default); /** Tekstkleur voor neutral variant (wit op donkere achtergrond) */
+  --dsn-number-badge-neutral-color: var(--dsn-color-neutral-inverse-color-default); /** Tekstkleur voor neutral variant */
   --dsn-number-badge-neutral-background-color: var(--dsn-color-neutral-inverse-bg-default); /** Achtergrondkleur voor neutral variant */
   --dsn-option-label-color: var(--dsn-color-neutral-color-document);
   --dsn-option-label-font-family: var(--dsn-text-font-family-default);
   --dsn-option-label-font-size: var(--dsn-text-font-size-md);
   --dsn-option-label-font-weight: var(--dsn-text-font-weight-default);
   --dsn-option-label-line-height: var(--dsn-text-line-height-md);
-  --dsn-ordered-list-color: var(--dsn-color-neutral-color-document); /** Ordered list text color */
-  --dsn-ordered-list-font-family: var(--dsn-text-font-family-default); /** Ordered list font family */
-  --dsn-ordered-list-font-size: var(--dsn-text-font-size-md); /** Ordered list font size */
-  --dsn-ordered-list-font-weight: var(--dsn-text-font-weight-default); /** Ordered list font weight */
-  --dsn-ordered-list-max-inline-size: var(--dsn-text-max-inline-size); /** Ordered list max width for readability */
-  --dsn-ordered-list-gap: var(--dsn-space-row-sm); /** Space between list items */
-  --dsn-ordered-list-line-height: var(--dsn-text-line-height-md); /** Ordered list line height */
-  --dsn-ordered-list-margin-block-end: var(--dsn-space-row-lg); /** Ordered list bottom margin */
-  --dsn-ordered-list-marker-color: var(--dsn-color-neutral-color-document); /** Number marker color */
-  --dsn-ordered-list-padding-inline-start: var(--dsn-space-inline-3xl); /** Ordered list left indentation */
+  --dsn-ordered-list-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de geordende lijst */
+  --dsn-ordered-list-font-family: var(--dsn-text-font-family-default); /** Font-familie van de geordende lijst */
+  --dsn-ordered-list-font-size: var(--dsn-text-font-size-md); /** Font-size van de geordende lijst */
+  --dsn-ordered-list-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de geordende lijst */
+  --dsn-ordered-list-max-inline-size: var(--dsn-text-max-inline-size); /** Maximale breedte van de geordende lijst voor leesbaarheid */
+  --dsn-ordered-list-gap: var(--dsn-space-row-sm); /** Ruimte tussen lijstitems */
+  --dsn-ordered-list-line-height: var(--dsn-text-line-height-md); /** Line-height van de geordende lijst */
+  --dsn-ordered-list-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van de geordende lijst */
+  --dsn-ordered-list-marker-color: var(--dsn-color-neutral-color-document); /** Kleur van het nummermarkeerteken */
+  --dsn-ordered-list-padding-inline-start: var(--dsn-space-inline-3xl); /** Inspringing aan de linkerkant van de geordende lijst */
   --dsn-page-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de page-body binnenbalk — zelfde schaal als PageHeader en PageFooter voor een consistente paginakantranding */
-  --dsn-page-footer-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de PageFooter — merkkleur accent-1 als huisstijldrager */
+  --dsn-page-footer-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de PageFooter */
   --dsn-page-footer-border-block-start-width: var(--dsn-border-width-thick); /** Breedte van de bovenkantrand (4px) — spiegelt de PageHeader border-block-end voor visuele symmetrie */
-  --dsn-page-footer-border-block-start-color: var(--dsn-color-accent-1-border-default); /** Kleur van de bovenkantrand — accent-1 border-default voor subtiele maar zichtbare scheiding met de pagina-inhoud */
+  --dsn-page-footer-border-block-start-color: var(--dsn-color-accent-1-border-default); /** Kleur van de bovenkantrand */
   --dsn-page-footer-padding-block: var(--dsn-space-block-6xl); /** Verticale ademruimte van de footer-binnenbalk */
   --dsn-page-footer-slot-gap: var(--dsn-space-block-xl); /** Verticale witruimte tussen gestapelde slots op small viewport */
   --dsn-page-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer-binnenbalk — zelfde schaal als PageHeader masthead en navbar */
   --dsn-page-header-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van de PageHeader — zelfde als pagina-achtergrond; de border-block-end doet het visuele scheidingswerk */
   --dsn-page-header-border-block-end-width: var(--dsn-border-width-thick); /** Breedte van de onderkantrand (4px) — duidelijke visuele scheiding in lijn met overheids design system-patronen */
-  --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand — merkkleur die de header verankert aan het accent-1 palet */
+  --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand */
   --dsn-page-header-padding-block: var(--dsn-space-block-md); /** Verticale padding van de header-binnenbalk */
   --dsn-page-header-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de header-binnenbalk — zelfde schaal als masthead en navbar */
   --dsn-page-header-z-index: var(--dsn-z-index-300); /** Z-index voor sticky/auto-hide gedrag — bewust lager dan backdrop (400) zodat Drawer/Modal-backdrop over de header schuift */
   --dsn-page-header-masthead-background-color: var(--dsn-color-neutral-bg-document); /** Masthead achtergrond — zelfde neutrale kleur als pagina-achtergrond */
   --dsn-page-header-masthead-padding-block: var(--dsn-space-block-xl); /** Verticale ademruimte in de masthead */
   --dsn-page-header-masthead-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding masthead — zelfde als navbar */
-  --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond — merkkleur accent-1 */
+  --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond */
   --dsn-page-header-navbar-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding navigatiebalk — zelfde als masthead */
   --dsn-page-header-secondary-nav-gap: var(--dsn-space-column-3xl); /** Witruimte tussen servicemenu (Menu) en zoekveld in de masthead */
-  --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel — merkkleur voor branding */
+  --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel */
   --dsn-page-header-search-panel-padding-block: var(--dsn-space-block-md); /** Verticale padding van het zoekpaneel */
   --dsn-page-header-search-panel-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van het zoekpaneel */
   --dsn-page-header-compact-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrond van de compacte balk — zelfde neutrale kleur als masthead; de primaire navigatie staat hier direct naast het logo zonder aparte navbar */
   --dsn-page-header-compact-padding-block: var(--dsn-space-block-xl); /** Verticale ademruimte in de compacte balk — zelfde schaal als masthead */
   --dsn-page-header-compact-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar */
-  --dsn-paragraph-color: var(--dsn-color-neutral-color-document); /** Paragraph text color */
-  --dsn-paragraph-font-family: var(--dsn-text-font-family-default); /** Paragraph font family */
-  --dsn-paragraph-font-weight: var(--dsn-text-font-weight-default); /** Paragraph font weight */
-  --dsn-paragraph-max-inline-size: var(--dsn-text-max-inline-size); /** Paragraph max width for readability */
-  --dsn-paragraph-default-font-size: var(--dsn-text-font-size-md); /** Default paragraph font size */
-  --dsn-paragraph-default-line-height: var(--dsn-text-line-height-md); /** Default paragraph line height */
-  --dsn-paragraph-default-margin-block-end: var(--dsn-space-row-lg); /** Default paragraph bottom margin */
-  --dsn-paragraph-lead-font-size: var(--dsn-text-font-size-lg); /** Lead paragraph font size */
-  --dsn-paragraph-lead-line-height: var(--dsn-text-line-height-lg); /** Lead paragraph line height */
-  --dsn-paragraph-lead-margin-block-end: var(--dsn-space-row-xl); /** Lead paragraph bottom margin */
-  --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Small print paragraph font size */
-  --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Small print paragraph line height */
-  --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Small print paragraph bottom margin */
+  --dsn-paragraph-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de alinea */
+  --dsn-paragraph-font-family: var(--dsn-text-font-family-default); /** Font-familie van de alinea */
+  --dsn-paragraph-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de alinea */
+  --dsn-paragraph-max-inline-size: var(--dsn-text-max-inline-size); /** Maximale breedte van de alinea voor leesbaarheid */
+  --dsn-paragraph-default-font-size: var(--dsn-text-font-size-md); /** Font-size van de standaard alinea */
+  --dsn-paragraph-default-line-height: var(--dsn-text-line-height-md); /** Line-height van de standaard alinea */
+  --dsn-paragraph-default-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van de standaard alinea */
+  --dsn-paragraph-lead-font-size: var(--dsn-text-font-size-lg); /** Font-size van de inleidende alinea */
+  --dsn-paragraph-lead-line-height: var(--dsn-text-line-height-lg); /** Line-height van de inleidende alinea */
+  --dsn-paragraph-lead-margin-block-end: var(--dsn-space-row-xl); /** Onderste margin van de inleidende alinea */
+  --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
+  --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
+  --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1011,27 +1024,27 @@
   --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
   --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
   --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
-  --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
-  --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
-  --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
-  --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
-  --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
-  --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
-  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
-  --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
+  --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de pre-heading */
+  --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Font-familie van de pre-heading */
+  --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Font-size van de pre-heading (gelijk aan de bodytekst) */
+  --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Font-gewicht van de pre-heading (vet om te onderscheiden van de kopregel) */
+  --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Line-height van de pre-heading */
+  --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Ruimte tussen de pre-heading en de koptekst */
+  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Achtergrondtrack */
+  --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk achtergrondkleur */
   --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
   --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
   --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
-  --dsn-radio-group-border-width: var(--dsn-border-width-none); /** No border by default for fieldset */
-  --dsn-radio-group-gap: var(--dsn-space-block-sm); /** Space between radio options in the group */
-  --dsn-radio-group-margin: var(--dsn-space-none); /** No margin by default for fieldset */
-  --dsn-radio-group-padding: var(--dsn-space-none); /** No padding by default for fieldset */
+  --dsn-radio-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
+  --dsn-radio-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de radio-opties in de groep */
+  --dsn-radio-group-margin: var(--dsn-space-none); /** Standaard geen margin op de fieldset */
+  --dsn-radio-group-padding: var(--dsn-space-none); /** Standaard geen padding op de fieldset */
   --dsn-radio-option-gap: var(--dsn-space-text-md); /** Gap between radio button and label */
   --dsn-radio-option-padding-block: var(--dsn-space-block-md); /** Vertical padding for touch target accessibility (WCAG 2.5.5) */
   --dsn-radio-border-width: var(--dsn-border-width-thin);
   --dsn-radio-active-border-width: var(--dsn-border-width-medium);
   --dsn-radio-checked-border-width: var(--dsn-border-width-thin);
-  --dsn-radio-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Inner circle color when checked */
+  --dsn-radio-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Kleur van de binnenste cirkel wanneer aangevinkt */
   --dsn-radio-focus-border-width: var(--dsn-border-width-medium);
   --dsn-radio-hover-border-width: var(--dsn-border-width-medium);
   --dsn-radio-invalid-border-width: var(--dsn-border-width-medium);
@@ -1040,9 +1053,9 @@
   --dsn-radio-checked-focus-border-width: var(--dsn-border-width-medium);
   --dsn-radio-checked-hover-border-width: var(--dsn-border-width-medium);
   --dsn-radio-checked-hover-color: var(--dsn-color-neutral-inverse-color-default);
-  --dsn-search-input-icon-gap: var(--dsn-space-text-md); /** Gap between search icon and input text */
-  --dsn-select-icon-gap: var(--dsn-space-text-md); /** Gap between chevron icon and select text */
-  --dsn-select-icon-inset-inline-end: var(--dsn-space-inline-md); /** Distance from the inline-end border to the chevron icon (8px) */
+  --dsn-search-input-icon-gap: var(--dsn-space-text-md); /** Ruimte tussen het zoekicoon en de invoertekst */
+  --dsn-select-icon-gap: var(--dsn-space-text-md); /** Ruimte tussen het chevron-icoon en de selectietekst */
+  --dsn-select-icon-inset-inline-end: var(--dsn-space-inline-md); /** Afstand van de inline-end border tot het chevron-icoon (8px) */
   --dsn-skip-link-z-index: var(--dsn-z-index-600); /** Hoogste z-index — boven modals (500) en backdrop (400), zodat de skip-link altijd zichtbaar is bij focus */
   --dsn-skip-link-padding-block: var(--dsn-space-block-md); /** Verticale padding van de skip-link */
   --dsn-skip-link-padding-inline: var(--dsn-space-inline-lg); /** Horizontale padding van de skip-link */
@@ -1053,31 +1066,40 @@
   --dsn-spinner-color: var(--dsn-color-accent-1-color-default); /** Kleur van de draaiende boog */
   --dsn-spinner-track-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de cirkelbaan */
   --dsn-spinner-gap-size: var(--dsn-space-inline-md); /** Ruimte tussen spinner en label */
-  --dsn-status-badge-border-color: var(--dsn-color-transparent); /** Status badge border color (transparent by default; visible in forced-colors / High Contrast mode) */
-  --dsn-status-badge-border-radius: var(--dsn-border-radius-sm); /** Status badge border radius */
-  --dsn-status-badge-border-width: var(--dsn-border-width-thin); /** Status badge border width */
-  --dsn-status-badge-font-size: var(--dsn-text-font-size-sm); /** Status badge font size */
-  --dsn-status-badge-gap: var(--dsn-space-text-sm); /** Gap between icon and label */
-  --dsn-status-badge-line-height: var(--dsn-text-line-height-sm); /** Status badge line height */
-  --dsn-status-badge-padding-block: var(--dsn-space-block-xs); /** Vertical padding */
-  --dsn-status-badge-padding-inline: var(--dsn-space-inline-md); /** Horizontal padding */
-  --dsn-status-badge-negative-background-color: var(--dsn-color-negative-bg-default); /** Background color for negative variant */
-  --dsn-status-badge-negative-color: var(--dsn-color-negative-color-default); /** Text color for negative variant */
-  --dsn-status-badge-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Background color for neutral variant */
-  --dsn-status-badge-neutral-color: var(--dsn-color-neutral-color-default); /** Text color for neutral variant */
-  --dsn-status-badge-positive-background-color: var(--dsn-color-positive-bg-default); /** Background color for positive variant */
-  --dsn-status-badge-positive-color: var(--dsn-color-positive-color-default); /** Text color for positive variant */
-  --dsn-status-badge-warning-background-color: var(--dsn-color-warning-bg-default); /** Background color for warning variant */
-  --dsn-status-badge-warning-color: var(--dsn-color-warning-color-default); /** Text color for warning variant */
-  --dsn-summary-list-row-border-block-end-color: var(--dsn-color-neutral-border-subtle); /** Color of the row separator border */
-  --dsn-summary-list-row-border-block-end-width: var(--dsn-border-width-thin); /** Width of the row separator border */
-  --dsn-summary-list-row-gap: var(--dsn-space-inline-lg); /** Horizontal gap between columns in the grid layout */
-  --dsn-summary-list-row-padding-block: var(--dsn-space-block-lg); /** Vertical spacing around each row — applies in both stacked and grid layout; matches Table cell padding */
-  --dsn-summary-list-key-color: var(--dsn-color-neutral-color-document); /** Text color of the key cell */
-  --dsn-summary-list-key-font-weight: var(--dsn-text-font-weight-bold); /** Bold weight distinguishes the key from the value visually */
-  --dsn-summary-list-value-color: var(--dsn-color-neutral-color-document); /** Text color of the value cell */
-  --dsn-summary-list-actions-gap: var(--dsn-space-inline-3xl); /** Gap between multiple action links in a single row */
-  --dsn-summary-list-actions-margin-block-start-stacked: var(--dsn-space-block-md); /** Extra space above the actions cell in the stacked (mobile) layout */
+  --dsn-status-badge-border-color: var(--dsn-color-transparent); /** Borderkleur van de StatusBadge (standaard transparant; zichtbaar in forced-colors / High Contrast-modus) */
+  --dsn-status-badge-border-radius: var(--dsn-border-radius-sm); /** Border-radius van de StatusBadge */
+  --dsn-status-badge-border-width: var(--dsn-border-width-thin); /** Border-breedte van de StatusBadge */
+  --dsn-status-badge-font-size: var(--dsn-text-font-size-sm); /** Font-size van de StatusBadge */
+  --dsn-status-badge-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en label */
+  --dsn-status-badge-line-height: var(--dsn-text-line-height-sm); /** Line-height van de StatusBadge */
+  --dsn-status-badge-padding-block: var(--dsn-space-block-xs); /** Verticale padding */
+  --dsn-status-badge-padding-inline: var(--dsn-space-inline-md); /** Horizontale padding */
+  --dsn-status-badge-negative-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur voor negative variant */
+  --dsn-status-badge-negative-color: var(--dsn-color-negative-color-default); /** Tekstkleur voor negative variant */
+  --dsn-status-badge-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Achtergrondkleur voor neutral variant */
+  --dsn-status-badge-neutral-color: var(--dsn-color-neutral-color-default); /** Tekstkleur voor neutral variant */
+  --dsn-status-badge-positive-background-color: var(--dsn-color-positive-bg-default); /** Achtergrondkleur voor positive variant */
+  --dsn-status-badge-positive-color: var(--dsn-color-positive-color-default); /** Tekstkleur voor positive variant */
+  --dsn-status-badge-warning-background-color: var(--dsn-color-warning-bg-default); /** Achtergrondkleur voor warning variant */
+  --dsn-status-badge-warning-color: var(--dsn-color-warning-color-default); /** Tekstkleur voor warning variant */
+  --dsn-summary-list-row-border-block-end-color: var(--dsn-color-neutral-border-subtle); /** Kleur van de rij-scheidingsborder */
+  --dsn-summary-list-row-border-block-end-width: var(--dsn-border-width-thin); /** Breedte van de rij-scheidingsborder */
+  --dsn-summary-list-row-gap: var(--dsn-space-inline-lg); /** Horizontale ruimte tussen kolommen in de gridindeling */
+  --dsn-summary-list-row-padding-block: var(--dsn-space-block-lg); /** Verticale ruimte rondom elke rij — geldt voor zowel gestapelde als gridindeling; komt overeen met de celpadding van de Table */
+  --dsn-summary-list-key-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de sleutelcel */
+  --dsn-summary-list-key-font-weight: var(--dsn-text-font-weight-bold); /** Vet gewicht onderscheidt de sleutel visueel van de waarde */
+  --dsn-summary-list-value-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de waardecel */
+  --dsn-summary-list-actions-gap: var(--dsn-space-inline-3xl); /** Ruimte tussen meerdere actielinks in één rij */
+  --dsn-summary-list-actions-margin-block-start-stacked: var(--dsn-space-block-md); /** Extra ruimte boven de actiescel in de gestapelde (mobiele) indeling */
+  --dsn-table-of-contents-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder (framed appearance) */
+  --dsn-table-of-contents-border-inline-start-color: var(--dsn-color-accent-1-border-default); /** Kleur van de linkerborder (framed appearance) */
+  --dsn-table-of-contents-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur (framed appearance) */
+  --dsn-table-of-contents-padding-block: var(--dsn-space-block-xl); /** Verticale padding (framed appearance) */
+  --dsn-table-of-contents-padding-inline-start: var(--dsn-space-inline-xl); /** Horizontale padding aan het begin, na de border (framed appearance) */
+  --dsn-table-of-contents-padding-inline-end: var(--dsn-space-inline-xl); /** Horizontale padding aan het einde (framed appearance) */
+  --dsn-table-of-contents-heading-gap: var(--dsn-space-row-xl); /** Ruimte tussen de heading en de lijst met ankerlinks */
+  --dsn-table-of-contents-plain-padding-block: var(--dsn-space-block-md); /** Plain-appearance-specifiek: verticale padding zodat de heading en het eerste ankerlink-item uitlijnen met het eerste item van de Sidebar/Sub-navigatie */
+  --dsn-table-of-contents-plain-list-gap: var(--dsn-space-row-lg); /** Plain-appearance-specifiek: ruimte tussen de ankerlinks, ruimer dan de standaard lijst-gap zodat dit in balans is met de Sidebar/Sub-navigatie */
   --dsn-table-caption-color: var(--dsn-color-neutral-color-document);
   --dsn-table-caption-font-family: var(--dsn-heading-font-family);
   --dsn-table-caption-font-size: var(--dsn-text-font-size-xl);
@@ -1099,19 +1121,19 @@
   --dsn-table-footer-font-weight: var(--dsn-text-font-weight-bold);
   --dsn-table-wrapper-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van de scroll-wrapper — moet overeenkomen met de pagina-achtergrond voor de scroll-schaduw techniek */
   --dsn-table-wrapper-scroll-shadow-color: var(--dsn-color-shadow-scroll); /** Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen */
-  --dsn-text-area-min-block-size: var(--dsn-pointer-target-min-block-size); /** Text area minimum height */
-  --dsn-text-area-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Text area minimum width */
-  --dsn-text-area-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Text area focus box shadow spread (creates thicker border effect) */
-  --dsn-text-area-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Text area hover box shadow spread (creates thicker border effect) */
-  --dsn-text-area-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Text area invalid box shadow spread (creates thicker border effect) */
-  --dsn-text-input-column-gap: var(--dsn-space-text-lg); /** Gap between text and icons (for future icon support) */
-  --dsn-text-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** Text input minimum height (WCAG touch target) */
-  --dsn-text-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Text input minimum width (WCAG touch target) */
-  --dsn-text-input-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Text input focus box shadow spread (creates thicker border effect) */
-  --dsn-text-input-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Text input hover box shadow spread (creates thicker border effect) */
-  --dsn-text-input-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Text input invalid box shadow spread (creates thicker border effect) */
-  --dsn-time-input-button-inset-inline-end: var(--dsn-space-inline-sm); /** Distance from the inline-end border to the clock button (4px) */
-  --dsn-time-input-icon-gap: var(--dsn-space-text-md); /** Gap between clock button and input text */
+  --dsn-text-area-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale hoogte van het tekstveld */
+  --dsn-text-area-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale breedte van het tekstveld */
+  --dsn-text-area-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op focus (creëert een dikkere border) */
+  --dsn-text-area-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op hover (creëert een dikkere border) */
+  --dsn-text-area-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border) */
+  --dsn-text-input-column-gap: var(--dsn-space-text-lg); /** Ruimte tussen tekst en iconen (voor toekomstige icoonondersteuning) */
+  --dsn-text-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale hoogte van het tekstinvoerveld (WCAG aanraakdoel) */
+  --dsn-text-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale breedte van het tekstinvoerveld (WCAG aanraakdoel) */
+  --dsn-text-input-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op focus (creëert een dikkere border) */
+  --dsn-text-input-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op hover (creëert een dikkere border) */
+  --dsn-text-input-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border) */
+  --dsn-time-input-button-inset-inline-end: var(--dsn-space-inline-sm); /** Afstand van de inline-end border tot de klokknop (4px) */
+  --dsn-time-input-icon-gap: var(--dsn-space-text-md); /** Ruimte tussen de klokknop en de invoertekst */
   --dsn-unordered-list-color: var(--dsn-color-neutral-color-document); /** Unordered list text color */
   --dsn-unordered-list-font-family: var(--dsn-text-font-family-default); /** Unordered list font family */
   --dsn-unordered-list-font-size: var(--dsn-text-font-size-md); /** Unordered list font size */
@@ -1122,59 +1144,59 @@
   --dsn-unordered-list-margin-block-end: var(--dsn-space-row-lg); /** Unordered list bottom margin */
   --dsn-unordered-list-marker-color: var(--dsn-color-accent-1-color-default); /** Bullet marker color */
   --dsn-unordered-list-padding-inline-start: var(--dsn-space-inline-3xl); /** Unordered list left indentation */
-  --dsn-heading-level-1-color: var(--dsn-heading-color); /** Heading 1 text color */
-  --dsn-heading-level-2-color: var(--dsn-heading-color); /** Heading 2 text color */
-  --dsn-heading-level-3-color: var(--dsn-heading-color); /** Heading 3 text color */
-  --dsn-heading-level-4-color: var(--dsn-heading-color); /** Heading 4 text color */
-  --dsn-heading-level-5-color: var(--dsn-heading-color); /** Heading 5 text color */
-  --dsn-heading-level-6-color: var(--dsn-heading-color); /** Heading 6 text color */
-  --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover); /** Form control hover accent color */
-  --dsn-form-control-hover-color: var(--dsn-form-control-color); /** Form control hover text color */
-  --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color); /** Form control focus background */
-  --dsn-form-control-focus-color: var(--dsn-form-control-color); /** Form control focus text color */
-  --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active); /** Form control active accent color */
-  --dsn-form-control-active-color: var(--dsn-form-control-color); /** Form control active text color */
-  --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default); /** Form control accent color (checkboxes, radio buttons) */
-  --dsn-alert-icon-size: var(--dsn-icon-size-xl); /** Alert icon size (also used as grid column width) */
-  --dsn-alert-info-background-color: var(--dsn-color-info-bg-default); /** Background color for info variant (default) */
-  --dsn-alert-info-border-color: var(--dsn-color-info-border-default); /** Border color for info variant (default) */
-  --dsn-alert-info-color: var(--dsn-color-info-color-document); /** Text color for info variant (default) */
-  --dsn-alert-info-icon-color: var(--dsn-color-info-color-default); /** Icon color for info variant (default) */
-  --dsn-breadcrumb-navigation-link-color: var(--dsn-color-action-2-color-default); /** Link text color */
-  --dsn-breadcrumb-navigation-link-hover-color: var(--dsn-color-action-2-color-hover); /** Link hover color */
-  --dsn-breadcrumb-navigation-link-active-color: var(--dsn-color-action-2-color-active); /** Link active color */
-  --dsn-breadcrumb-navigation-separator-size: var(--dsn-icon-size-sm); /** Separator icon size — sm (kleiner dan terug-icoon) */
-  --dsn-breadcrumb-navigation-icon-size: var(--dsn-icon-size-sm); /** Back-icon size — sm (consistent met Link size small) */
-  --dsn-button-default-border-color: var(--dsn-color-action-1-border-default); /** Default button border */
-  --dsn-button-default-color: var(--dsn-color-action-1-color-default); /** Default button text/icon color */
-  --dsn-button-default-active-background-color: var(--dsn-color-action-1-bg-active); /** Default button active background */
-  --dsn-button-default-active-border-color: var(--dsn-color-action-1-border-active); /** Default button active border */
-  --dsn-button-default-active-color: var(--dsn-color-action-1-color-active); /** Default button active text/icon color */
-  --dsn-button-default-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Default button hover background */
-  --dsn-button-default-hover-border-color: var(--dsn-color-action-1-border-hover); /** Default button hover border */
-  --dsn-button-default-hover-color: var(--dsn-color-action-1-color-hover); /** Default button hover text/icon color */
-  --dsn-button-strong-background-color: var(--dsn-color-action-1-inverse-bg-default); /** Strong button background */
-  --dsn-button-strong-color: var(--dsn-color-action-1-inverse-color-default); /** Strong button text/icon color */
-  --dsn-button-strong-active-background-color: var(--dsn-color-action-1-inverse-bg-active); /** Strong button active background */
-  --dsn-button-strong-active-color: var(--dsn-color-action-1-inverse-color-active); /** Strong button active text/icon color */
-  --dsn-button-strong-hover-background-color: var(--dsn-color-action-1-inverse-bg-hover); /** Strong button hover background */
-  --dsn-button-strong-hover-color: var(--dsn-color-action-1-inverse-color-hover); /** Strong button hover text/icon color */
-  --dsn-button-subtle-color: var(--dsn-color-action-1-color-default); /** Subtle button text/icon color */
-  --dsn-button-subtle-active-background-color: var(--dsn-color-action-1-bg-active); /** Subtle button active background */
-  --dsn-button-subtle-active-color: var(--dsn-color-action-1-color-active); /** Subtle button active text/icon color */
-  --dsn-button-subtle-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Subtle button hover background */
-  --dsn-button-subtle-hover-color: var(--dsn-color-action-1-color-hover); /** Subtle button hover text/icon color */
-  --dsn-button-size-default-icon-size: var(--dsn-icon-size-md); /** Default button icon size */
-  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Large button icon size */
-  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Small button icon size */
+  --dsn-heading-level-1-color: var(--dsn-heading-color); /** Tekstkleur van Heading 1 */
+  --dsn-heading-level-2-color: var(--dsn-heading-color); /** Tekstkleur van Heading 2 */
+  --dsn-heading-level-3-color: var(--dsn-heading-color); /** Tekstkleur van Heading 3 */
+  --dsn-heading-level-4-color: var(--dsn-heading-color); /** Tekstkleur van Heading 4 */
+  --dsn-heading-level-5-color: var(--dsn-heading-color); /** Tekstkleur van Heading 5 */
+  --dsn-heading-level-6-color: var(--dsn-heading-color); /** Tekstkleur van Heading 6 */
+  --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover); /** Accentkleur van form controls in hover state */
+  --dsn-form-control-hover-color: var(--dsn-form-control-color); /** Tekstkleur van form controls in hover state */
+  --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color); /** Achtergrondkleur van form controls in focus state */
+  --dsn-form-control-focus-color: var(--dsn-form-control-color); /** Tekstkleur van form controls in focus state */
+  --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active); /** Accentkleur van form controls in active state */
+  --dsn-form-control-active-color: var(--dsn-form-control-color); /** Tekstkleur van form controls in active state */
+  --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default); /** Accentkleur van form controls (checkboxes, radio buttons) */
+  --dsn-alert-icon-size: var(--dsn-icon-size-xl); /** Icoongrootte van de Alert (ook gebruikt als breedte van de gridkolom) */
+  --dsn-alert-info-background-color: var(--dsn-color-info-bg-default); /** Achtergrondkleur voor info variant (standaard) */
+  --dsn-alert-info-border-color: var(--dsn-color-info-border-default); /** Borderkleur voor info variant (standaard) */
+  --dsn-alert-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant (standaard) */
+  --dsn-alert-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant (standaard) */
+  --dsn-breadcrumb-navigation-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
+  --dsn-breadcrumb-navigation-link-hover-color: var(--dsn-color-action-2-color-hover); /** Linkkleur op hover */
+  --dsn-breadcrumb-navigation-link-active-color: var(--dsn-color-action-2-color-active); /** Linkkleur op active */
+  --dsn-breadcrumb-navigation-separator-size: var(--dsn-icon-size-sm); /** Grootte van het scheidingsicoon — sm (kleiner dan terug-icoon) */
+  --dsn-breadcrumb-navigation-icon-size: var(--dsn-icon-size-sm); /** Grootte van het terug-icoon — sm (consistent met Link size small) */
+  --dsn-button-default-border-color: var(--dsn-color-action-1-border-default); /** Border van de default button */
+  --dsn-button-default-color: var(--dsn-color-action-1-color-default); /** Tekst-/icoonkleur van de default button */
+  --dsn-button-default-active-background-color: var(--dsn-color-action-1-bg-active); /** Achtergrond van de default button op active */
+  --dsn-button-default-active-border-color: var(--dsn-color-action-1-border-active); /** Border van de default button op active */
+  --dsn-button-default-active-color: var(--dsn-color-action-1-color-active); /** Tekst-/icoonkleur van de default button op active */
+  --dsn-button-default-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Achtergrond van de default button op hover */
+  --dsn-button-default-hover-border-color: var(--dsn-color-action-1-border-hover); /** Border van de default button op hover */
+  --dsn-button-default-hover-color: var(--dsn-color-action-1-color-hover); /** Tekst-/icoonkleur van de default button op hover */
+  --dsn-button-strong-background-color: var(--dsn-color-action-1-inverse-bg-default); /** Achtergrond van de strong button */
+  --dsn-button-strong-color: var(--dsn-color-action-1-inverse-color-default); /** Tekst-/icoonkleur van de strong button */
+  --dsn-button-strong-active-background-color: var(--dsn-color-action-1-inverse-bg-active); /** Achtergrond van de strong button op active */
+  --dsn-button-strong-active-color: var(--dsn-color-action-1-inverse-color-active); /** Tekst-/icoonkleur van de strong button op active */
+  --dsn-button-strong-hover-background-color: var(--dsn-color-action-1-inverse-bg-hover); /** Achtergrond van de strong button op hover */
+  --dsn-button-strong-hover-color: var(--dsn-color-action-1-inverse-color-hover); /** Tekst-/icoonkleur van de strong button op hover */
+  --dsn-button-subtle-color: var(--dsn-color-action-1-color-default); /** Tekst-/icoonkleur van de subtle button */
+  --dsn-button-subtle-active-background-color: var(--dsn-color-action-1-bg-active); /** Achtergrond van de subtle button op active */
+  --dsn-button-subtle-active-color: var(--dsn-color-action-1-color-active); /** Tekst-/icoonkleur van de subtle button op active */
+  --dsn-button-subtle-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Achtergrond van de subtle button op hover */
+  --dsn-button-subtle-hover-color: var(--dsn-color-action-1-color-hover); /** Tekst-/icoonkleur van de subtle button op hover */
+  --dsn-button-size-default-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de default button */
+  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
+  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
   --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
-  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Text color for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font family for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font size for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font weight for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line height for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-margin-block-end: var(--dsn-form-field-label-margin-block-end-with-description); /** Space below the legend before the checkbox options (uses smaller margin like when description follows) */
+  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font-size van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font-gewicht van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line-height van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-margin-block-end: var(--dsn-form-field-label-margin-block-end-with-description); /** Ruimte onder de legend voor de checkbox-opties (gebruikt de kleinere margin zoals wanneer een beschrijving volgt) */
   --dsn-checkbox-background-color: var(--dsn-form-control-background-color);
   --dsn-checkbox-border-color: var(--dsn-form-control-border-color);
   --dsn-checkbox-active-background-color: var(--dsn-form-control-active-background-color);
@@ -1195,33 +1217,33 @@
   --dsn-checkbox-indeterminate-disabled-color: var(--dsn-form-control-disabled-color);
   --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
   --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
-  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
-  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
+  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
+  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Kleur van het summary-label (volgt Link via action-2) */
+  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Kleur van het summary-label op hover */
+  --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Kleur van het summary-label op active */
+  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
-  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
-  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
-  --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
-  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
-  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
-  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
-  --dsn-file-input-font-weight: var(--dsn-form-control-font-weight); /** File input font weight */
-  --dsn-file-input-line-height: var(--dsn-form-control-line-height); /** File input line height */
-  --dsn-file-input-disabled-color: var(--dsn-form-control-disabled-color); /** Muted text color for disabled state */
+  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst */
+  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** Font-familie van het bestandsinvoerveld */
+  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** Font-size van het bestandsinvoerveld */
+  --dsn-file-input-font-weight: var(--dsn-form-control-font-weight); /** Font-gewicht van het bestandsinvoerveld */
+  --dsn-file-input-line-height: var(--dsn-form-control-line-height); /** Line-height van het bestandsinvoerveld */
+  --dsn-file-input-disabled-color: var(--dsn-form-control-disabled-color); /** Gedempte tekstkleur voor de disabled staat */
   --dsn-file-box-shadow-hover: var(--dsn-box-shadow-md); /** Hogere elevatie bij hover — zelfde als Card hover */
   --dsn-file-media-icon-size: var(--dsn-icon-size-md);
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
-  --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Error message icon size */
-  --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icon size for positive and warning variants */
-  --dsn-link-color: var(--dsn-color-action-2-color-default); /** Link text color */
-  --dsn-link-icon-size: var(--dsn-icon-size-md); /** Link icon size */
-  --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Link underline color */
-  --dsn-link-active-color: var(--dsn-color-action-2-color-active); /** Link active text color */
-  --dsn-link-hover-color: var(--dsn-color-action-2-color-hover); /** Link hover text color */
-  --dsn-link-size-default-icon-size: var(--dsn-icon-size-md); /** Default link icon size */
-  --dsn-link-size-large-icon-size: var(--dsn-icon-size-lg); /** Large link icon size */
-  --dsn-link-size-small-icon-size: var(--dsn-icon-size-sm); /** Small link icon size */
+  --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de foutmelding */
+  --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icoongrootte voor positive en warning varianten */
+  --dsn-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
+  --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
+  --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
+  --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
+  --dsn-link-active-color: var(--dsn-color-action-2-color-active); /** Tekstkleur van de link op active */
+  --dsn-link-hover-color: var(--dsn-color-action-2-color-hover); /** Tekstkleur van de link op hover */
+  --dsn-link-size-default-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de default link */
+  --dsn-link-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large link */
+  --dsn-link-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small link */
   --dsn-menu-item-icon-size: var(--dsn-icon-size-md); /** Gedeeld: icoongrootte */
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
@@ -1232,28 +1254,28 @@
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
-  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina — blijft bg-active */
+  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-active-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: active achtergrondkleur voor de actieve pagina */
   --dsn-modal-dialog-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het dialoogvenster — hoogste elevatie (lg) */
   --dsn-modal-dialog-heading-color: var(--dsn-heading-color); /** Kleur van de dialoogvenster-heading */
-  --dsn-note-icon-size: var(--dsn-icon-size-xl); /** Note icon size (also used as grid column width) */
-  --dsn-note-info-background-color: var(--dsn-color-info-bg-default); /** Background color for info variant */
-  --dsn-note-info-border-inline-start-color: var(--dsn-color-info-border-default); /** Left border color for info variant */
-  --dsn-note-info-color: var(--dsn-color-info-color-document); /** Text color for info variant */
-  --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icon color for info variant */
+  --dsn-note-icon-size: var(--dsn-icon-size-xl); /** Icoongrootte van de Note (ook gebruikt als breedte van de gridkolom) */
+  --dsn-note-info-background-color: var(--dsn-color-info-bg-default); /** Achtergrondkleur voor info variant */
+  --dsn-note-info-border-inline-start-color: var(--dsn-color-info-border-default); /** Kleur van de linkerborder voor info variant */
+  --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
+  --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
-  --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Text color for the legend (reuses form field label) */
-  --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font family for the legend (reuses form field label) */
-  --dsn-radio-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font size for the legend (reuses form field label) */
-  --dsn-radio-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font weight for the legend (reuses form field label) */
-  --dsn-radio-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line height for the legend (reuses form field label) */
-  --dsn-radio-group-legend-margin-block-end: var(--dsn-form-field-label-margin-block-end-with-description); /** Space below the legend before the radio options (uses smaller margin like when description follows) */
+  --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font-size van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font-gewicht van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line-height van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-margin-block-end: var(--dsn-form-field-label-margin-block-end-with-description); /** Ruimte onder de legend voor de radio-opties (gebruikt de kleinere margin zoals wanneer een beschrijving volgt) */
   --dsn-radio-background-color: var(--dsn-form-control-background-color);
   --dsn-radio-border-color: var(--dsn-form-control-border-color);
-  --dsn-radio-color: var(--dsn-form-control-border-color); /** Inner circle color in default state */
+  --dsn-radio-color: var(--dsn-form-control-border-color); /** Kleur van de binnenste cirkel in de standaard staat */
   --dsn-radio-active-background-color: var(--dsn-form-control-active-background-color);
   --dsn-radio-active-border-color: var(--dsn-form-control-active-border-color);
   --dsn-radio-active-color: var(--dsn-form-control-active-border-color);
@@ -1270,64 +1292,65 @@
   --dsn-radio-invalid-color: var(--dsn-form-control-invalid-border-color);
   --dsn-radio-checked-disabled-background-color: var(--dsn-form-control-disabled-accent-color);
   --dsn-radio-checked-disabled-border-color: var(--dsn-form-control-disabled-border-color);
-  --dsn-radio-checked-disabled-color: var(--dsn-form-control-disabled-color); /** Inner circle color - dark text color for contrast against disabled accent background */
+  --dsn-radio-checked-disabled-color: var(--dsn-form-control-disabled-color); /** Kleur van de binnenste cirkel — donkere tekstkleur voor contrast op de disabled accentachtergrond */
   --dsn-radio-checked-focus-border-color: var(--dsn-form-control-focus-border-color);
-  --dsn-search-input-icon-size: var(--dsn-icon-size-md); /** Search input icon size */
-  --dsn-select-icon-color: var(--dsn-color-action-1-color-default); /** Chevron icon color — same as subtle button icon color */
-  --dsn-select-icon-size: var(--dsn-icon-size-md); /** Chevron-down icon size — matches the medium icon size */
-  --dsn-status-badge-icon-size: var(--dsn-icon-size-sm); /** Status badge icon size */
-  --dsn-status-badge-info-background-color: var(--dsn-color-info-bg-default); /** Background color for info variant */
-  --dsn-status-badge-info-color: var(--dsn-color-info-color-default); /** Text color for info variant */
-  --dsn-text-area-background-color: var(--dsn-form-control-background-color); /** Text area background color */
-  --dsn-text-area-border-color: var(--dsn-form-control-border-color); /** Text area border color */
-  --dsn-text-area-border-radius: var(--dsn-form-control-border-radius); /** Text area border radius */
-  --dsn-text-area-border-width: var(--dsn-form-control-border-width); /** Text area border width */
-  --dsn-text-area-color: var(--dsn-form-control-color); /** Text area text color */
-  --dsn-text-area-font-family: var(--dsn-form-control-font-family); /** Text area font family */
-  --dsn-text-area-font-size: var(--dsn-form-control-font-size); /** Text area font size */
-  --dsn-text-area-font-weight: var(--dsn-form-control-font-weight); /** Text area font weight */
-  --dsn-text-area-line-height: var(--dsn-form-control-line-height); /** Text area line height */
-  --dsn-text-area-padding-block-end: var(--dsn-form-control-padding-block-end); /** Text area bottom padding */
-  --dsn-text-area-padding-block-start: var(--dsn-form-control-padding-block-start); /** Text area top padding */
-  --dsn-text-area-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Text area right padding */
-  --dsn-text-area-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Text area left padding */
-  --dsn-text-area-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Text area disabled background */
-  --dsn-text-area-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Text area disabled border */
-  --dsn-text-area-disabled-color: var(--dsn-form-control-disabled-color); /** Text area disabled text color */
-  --dsn-text-area-focus-border-color: var(--dsn-form-control-focus-border-color); /** Text area focus border */
-  --dsn-text-area-placeholder-color: var(--dsn-form-control-placeholder-color); /** Text area placeholder color */
-  --dsn-text-area-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Text area invalid background */
-  --dsn-text-area-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Text area invalid border */
-  --dsn-text-area-invalid-color: var(--dsn-form-control-color); /** Text area invalid text color */
-  --dsn-text-area-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Text area read-only background */
-  --dsn-text-area-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Text area read-only border */
-  --dsn-text-area-read-only-color: var(--dsn-form-control-read-only-color); /** Text area read-only text color */
-  --dsn-text-input-background-color: var(--dsn-form-control-background-color); /** Text input background color */
-  --dsn-text-input-border-color: var(--dsn-form-control-border-color); /** Text input border color */
-  --dsn-text-input-border-radius: var(--dsn-form-control-border-radius); /** Text input border radius */
-  --dsn-text-input-border-width: var(--dsn-form-control-border-width); /** Text input border width */
-  --dsn-text-input-color: var(--dsn-form-control-color); /** Text input text color */
-  --dsn-text-input-font-family: var(--dsn-form-control-font-family); /** Text input font family */
-  --dsn-text-input-font-size: var(--dsn-form-control-font-size); /** Text input font size */
-  --dsn-text-input-font-weight: var(--dsn-form-control-font-weight); /** Text input font weight */
-  --dsn-text-input-line-height: var(--dsn-form-control-line-height); /** Text input line height */
-  --dsn-text-input-padding-block-end: var(--dsn-form-control-padding-block-end); /** Text input bottom padding */
-  --dsn-text-input-padding-block-start: var(--dsn-form-control-padding-block-start); /** Text input top padding */
-  --dsn-text-input-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Text input right padding */
-  --dsn-text-input-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Text input left padding */
-  --dsn-text-input-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Text input disabled background */
-  --dsn-text-input-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Text input disabled border */
-  --dsn-text-input-disabled-color: var(--dsn-form-control-disabled-color); /** Text input disabled text color */
-  --dsn-text-input-focus-border-color: var(--dsn-form-control-focus-border-color); /** Text input focus border */
-  --dsn-text-input-placeholder-color: var(--dsn-form-control-placeholder-color); /** Text input placeholder color */
-  --dsn-text-input-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Text input invalid background */
-  --dsn-text-input-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Text input invalid border */
-  --dsn-text-input-invalid-color: var(--dsn-form-control-color); /** Text input invalid text color */
-  --dsn-text-input-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Text input read-only background */
-  --dsn-text-input-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Text input read-only border */
-  --dsn-text-input-read-only-color: var(--dsn-form-control-read-only-color); /** Text input read-only text color */
-  --dsn-time-input-icon-color: var(--dsn-color-action-2-color-default); /** Clock icon color (interactive, action color) */
-  --dsn-time-input-icon-hover-color: var(--dsn-color-action-2-color-hover); /** Clock icon hover color */
+  --dsn-search-input-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van het zoekinvoerveld */
+  --dsn-select-icon-color: var(--dsn-color-action-1-color-default); /** Kleur van het chevron-icoon — gelijk aan de icoonkleur van de subtle button */
+  --dsn-select-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-down icoon — gelijk aan de medium icoongrootte */
+  --dsn-status-badge-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de StatusBadge */
+  --dsn-status-badge-info-background-color: var(--dsn-color-info-bg-default); /** Achtergrondkleur voor info variant */
+  --dsn-status-badge-info-color: var(--dsn-color-info-color-default); /** Tekstkleur voor info variant */
+  --dsn-text-area-background-color: var(--dsn-form-control-background-color); /** Achtergrondkleur van het tekstveld */
+  --dsn-text-area-border-color: var(--dsn-form-control-border-color); /** Borderkleur van het tekstveld */
+  --dsn-text-area-border-radius: var(--dsn-form-control-border-radius); /** Border-radius van het tekstveld */
+  --dsn-text-area-border-width: var(--dsn-form-control-border-width); /** Border-breedte van het tekstveld */
+  --dsn-text-area-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstveld */
+  --dsn-text-area-font-family: var(--dsn-form-control-font-family); /** Font-familie van het tekstveld */
+  --dsn-text-area-font-size: var(--dsn-form-control-font-size); /** Font-size van het tekstveld */
+  --dsn-text-area-font-weight: var(--dsn-form-control-font-weight); /** Font-gewicht van het tekstveld */
+  --dsn-text-area-line-height: var(--dsn-form-control-line-height); /** Line-height van het tekstveld */
+  --dsn-text-area-padding-block-end: var(--dsn-form-control-padding-block-end); /** Onderste padding van het tekstveld */
+  --dsn-text-area-padding-block-start: var(--dsn-form-control-padding-block-start); /** Bovenste padding van het tekstveld */
+  --dsn-text-area-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Rechter padding van het tekstveld */
+  --dsn-text-area-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Linker padding van het tekstveld */
+  --dsn-text-area-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Achtergrond van het tekstveld op disabled */
+  --dsn-text-area-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Border van het tekstveld op disabled */
+  --dsn-text-area-disabled-color: var(--dsn-form-control-disabled-color); /** Tekstkleur van het tekstveld op disabled */
+  --dsn-text-area-focus-border-color: var(--dsn-form-control-focus-border-color); /** Border van het tekstveld op focus */
+  --dsn-text-area-placeholder-color: var(--dsn-form-control-placeholder-color); /** Plaatshouderkleur van het tekstveld */
+  --dsn-text-area-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Achtergrond van het tekstveld bij ongeldige invoer */
+  --dsn-text-area-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Border van het tekstveld bij ongeldige invoer */
+  --dsn-text-area-invalid-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstveld bij ongeldige invoer */
+  --dsn-text-area-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Achtergrond van het tekstveld op read-only */
+  --dsn-text-area-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Border van het tekstveld op read-only */
+  --dsn-text-area-read-only-color: var(--dsn-form-control-read-only-color); /** Tekstkleur van het tekstveld op read-only */
+  --dsn-text-input-background-color: var(--dsn-form-control-background-color); /** Achtergrondkleur van het tekstinvoerveld */
+  --dsn-text-input-border-color: var(--dsn-form-control-border-color); /** Borderkleur van het tekstinvoerveld */
+  --dsn-text-input-border-radius: var(--dsn-form-control-border-radius); /** Border-radius van het tekstinvoerveld */
+  --dsn-text-input-border-width: var(--dsn-form-control-border-width); /** Border-breedte van het tekstinvoerveld */
+  --dsn-text-input-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstinvoerveld */
+  --dsn-text-input-font-family: var(--dsn-form-control-font-family); /** Font-familie van het tekstinvoerveld */
+  --dsn-text-input-font-size: var(--dsn-form-control-font-size); /** Font-size van het tekstinvoerveld */
+  --dsn-text-input-font-weight: var(--dsn-form-control-font-weight); /** Font-gewicht van het tekstinvoerveld */
+  --dsn-text-input-line-height: var(--dsn-form-control-line-height); /** Line-height van het tekstinvoerveld */
+  --dsn-text-input-padding-block-end: var(--dsn-form-control-padding-block-end); /** Onderste padding van het tekstinvoerveld */
+  --dsn-text-input-padding-block-start: var(--dsn-form-control-padding-block-start); /** Bovenste padding van het tekstinvoerveld */
+  --dsn-text-input-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Rechter padding van het tekstinvoerveld */
+  --dsn-text-input-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Linker padding van het tekstinvoerveld */
+  --dsn-text-input-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Achtergrond van het tekstinvoerveld op disabled */
+  --dsn-text-input-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Border van het tekstinvoerveld op disabled */
+  --dsn-text-input-disabled-color: var(--dsn-form-control-disabled-color); /** Tekstkleur van het tekstinvoerveld op disabled */
+  --dsn-text-input-focus-border-color: var(--dsn-form-control-focus-border-color); /** Border van het tekstinvoerveld op focus */
+  --dsn-text-input-placeholder-color: var(--dsn-form-control-placeholder-color); /** Plaatshouderkleur van het tekstinvoerveld */
+  --dsn-text-input-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Achtergrond van het tekstinvoerveld bij ongeldige invoer */
+  --dsn-text-input-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Border van het tekstinvoerveld bij ongeldige invoer */
+  --dsn-text-input-invalid-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstinvoerveld bij ongeldige invoer */
+  --dsn-text-input-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Achtergrond van het tekstinvoerveld op read-only */
+  --dsn-text-input-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Border van het tekstinvoerveld op read-only */
+  --dsn-text-input-read-only-color: var(--dsn-form-control-read-only-color); /** Tekstkleur van het tekstinvoerveld op read-only */
+  --dsn-time-input-icon-color: var(--dsn-color-action-2-color-default); /** Kleur van het klokicoon (interactief, actie-kleur) */
+  --dsn-time-input-icon-hover-color: var(--dsn-color-action-2-color-hover); /** Kleur van het klokicoon op hover */
+  --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Rechter padding wanneer een icoon aanwezig is: (knop-padding × 2) + icoongrootte + knop-inset + ruimte */
   --dsn-checkbox-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-checkbox-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-checkbox-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1339,26 +1362,26 @@
   --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
   --dsn-radio-checked-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-focus-color: var(--dsn-form-control-focus-color);
   --dsn-radio-checked-hover-background-color: var(--dsn-form-control-hover-accent-color);
-  --dsn-search-input-padding-inline-start-with-icon: calc(var(--dsn-search-input-icon-size) + var(--dsn-search-input-icon-gap) + var(--dsn-form-control-padding-inline-start)); /** Left padding when icon is present */
-  --dsn-select-padding-inline-end-with-icon: calc(var(--dsn-select-icon-size) + var(--dsn-select-icon-gap) + var(--dsn-select-icon-inset-inline-end)); /** Right padding when icon is present: icon-size + gap + inset */
-  --dsn-text-area-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text area focus background */
-  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
-  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
-  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
-  --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
-  --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
-  --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
-  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
-  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
-  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
-  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
-  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
+  --dsn-search-input-padding-inline-start-with-icon: calc(var(--dsn-search-input-icon-size) + var(--dsn-search-input-icon-gap) + var(--dsn-form-control-padding-inline-start)); /** Linker padding wanneer een icoon aanwezig is */
+  --dsn-select-padding-inline-end-with-icon: calc(var(--dsn-select-icon-size) + var(--dsn-select-icon-gap) + var(--dsn-select-icon-inset-inline-end)); /** Rechter padding wanneer een icoon aanwezig is: icoongrootte + ruimte + inset */
+  --dsn-text-area-focus-background-color: var(--dsn-form-control-focus-background-color); /** Achtergrond van het tekstveld op focus */
+  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Kleur van de box-shadow op focus */
+  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Tekstkleur van het tekstveld op focus */
+  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Kleur van de box-shadow op hover */
+  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Kleur van de box-shadow bij ongeldige invoer */
+  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Achtergrond van het tekstinvoerveld op focus */
+  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Kleur van de box-shadow op focus */
+  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Tekstkleur van het tekstinvoerveld op focus */
+  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Kleur van de box-shadow op hover */
+  --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Kleur van de box-shadow bij ongeldige invoer */
+  --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Grootte van het klokicoon — gelijk aan de icoongrootte van de small button */
 }
 
 @media (prefers-reduced-motion: reduce) {