@dsn-starter-kit/design-tokens 1.0.0

package/dist/css/start-light-information-dense.css

@@ -0,0 +1,1364 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+: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-size-sm: 0.875rem; /** Small text - 14px (fixed) */
+  --dsn-text-font-size-md: 1rem; /** Medium text - 16px (fixed) */
+  --dsn-text-font-size-lg: 1.25rem; /** Large text - 20px (fixed) */
+  --dsn-text-font-size-xl: 1.5rem; /** Extra large text - 24px (fixed) */
+  --dsn-text-font-size-2xl: 2rem; /** 2XL text - 32px (fixed) */
+  --dsn-text-font-size-3xl: 2.5rem; /** 3XL text - 40px (fixed) */
+  --dsn-text-font-size-4xl: 3rem; /** 4XL text - 48px (fixed) */
+  --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: #0b0c0c; /** Focus outline color */
+  --dsn-focus-inverse-outline-color: #ffffff; /** Focus outline color for use on tinted/dark backgrounds - 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-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 */
+  --dsn-z-index-400: 400; /** Verduisterende laag — Backdrop achter modals en drawers */
+  --dsn-z-index-500: 500; /** Modale lagen — ModalDialog, Drawer */
+  --dsn-z-index-600: 600; /** Altijd bovenaan — SkipLink (toegankelijkheid) */
+  --dsn-transition-duration-instant: 0ms; /** State-changes die onmiddellijk moeten aanvoelen */
+  --dsn-transition-duration-fast: 100ms; /** Subtiele hover-states, kleur-transitions */
+  --dsn-transition-duration-normal: 200ms; /** Standaard UI-transitions */
+  --dsn-transition-duration-slow: 350ms; /** Grotere bewegingen, accordions */
+  --dsn-transition-duration-slower: 500ms; /** Complexe animaties, page-level transitions */
+  --dsn-transition-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); /** Algemeen — equivalent van CSS ease */
+  --dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); /** Elementen die het scherm binnenkomen (decelereren) */
+  --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: #fcfcfc; /** Document background */
+  --dsn-color-neutral-bg-elevated: #fcfcfc; /** 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: #f6f6f6; /** Subtle background */
+  --dsn-color-neutral-bg-default: #f1f1f1; /** Default background */
+  --dsn-color-neutral-bg-hover: #ebebeb; /** Hover state background */
+  --dsn-color-neutral-bg-active: #e5e5e5; /** Active state background */
+  --dsn-color-neutral-border-subtle: #c4c4c4; /** Subtle border */
+  --dsn-color-neutral-border-default: #868686; /** Default border */
+  --dsn-color-neutral-border-hover: #7c7c7c; /** Hover state border */
+  --dsn-color-neutral-border-active: #727272; /** Active state border */
+  --dsn-color-neutral-color-default: #595959; /** Default text color */
+  --dsn-color-neutral-color-hover: #4b4b4b; /** Hover state text */
+  --dsn-color-neutral-color-active: #3e3e3e; /** Active state text */
+  --dsn-color-neutral-color-subtle: #636363; /** Subtle text color */
+  --dsn-color-neutral-color-document: #1b1b1b; /** Document text color */
+  --dsn-color-accent-1-bg-document: #fbfcfd; /** Document background */
+  --dsn-color-accent-1-bg-elevated: #fbfcfd; /** 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: #f4f7fa; /** Subtle background */
+  --dsn-color-accent-1-bg-default: #ecf1f7; /** Default background */
+  --dsn-color-accent-1-bg-hover: #e4ecf4; /** Hover state background */
+  --dsn-color-accent-1-bg-active: #dde6f1; /** Active state background */
+  --dsn-color-accent-1-border-subtle: #b0c6df; /** Subtle border */
+  --dsn-color-accent-1-border-default: #5c89be; /** Default border */
+  --dsn-color-accent-1-border-hover: #4e7fb8; /** Hover state border */
+  --dsn-color-accent-1-border-active: #3f74b2; /** Active state border */
+  --dsn-color-accent-1-color-default: #1b59a4; /** Default text color */
+  --dsn-color-accent-1-color-hover: #04499a; /** Hover state text */
+  --dsn-color-accent-1-color-active: #003b81; /** Active state text */
+  --dsn-color-accent-1-color-subtle: #2964aa; /** Subtle text color */
+  --dsn-color-accent-1-color-document: #001b3c; /** Document text color */
+  --dsn-color-negative-bg-document: #fffbfb; /** Document background */
+  --dsn-color-negative-bg-elevated: #fffbfb; /** 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: #fef4f4; /** Subtle background */
+  --dsn-color-negative-bg-default: #feeded; /** Default background */
+  --dsn-color-negative-bg-hover: #fde6e6; /** Hover state background */
+  --dsn-color-negative-bg-active: #fddede; /** Active state background */
+  --dsn-color-negative-border-subtle: #f9b1b1; /** Subtle border */
+  --dsn-color-negative-border-default: #f14848; /** Default border */
+  --dsn-color-negative-border-hover: #ef2929; /** Hover state border */
+  --dsn-color-negative-border-active: #e60000; /** Active state border */
+  --dsn-color-negative-color-default: #b70000; /** Default text color */
+  --dsn-color-negative-color-hover: #9c0000; /** Hover state text */
+  --dsn-color-negative-color-active: #930000; /** Active state text */
+  --dsn-color-negative-color-subtle: #ca0000; /** Subtle text color */
+  --dsn-color-negative-color-document: #410000; /** Document text color */
+  --dsn-color-positive-bg-document: #fafdfb; /** Document background */
+  --dsn-color-positive-bg-elevated: #fafdfb; /** 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: #eff9f3; /** Subtle background */
+  --dsn-color-positive-bg-default: #e4f5ea; /** Default background */
+  --dsn-color-positive-bg-hover: #d9f1e2; /** Hover state background */
+  --dsn-color-positive-bg-active: #ceedd9; /** Active state background */
+  --dsn-color-positive-border-subtle: #8ad3a6; /** Subtle border */
+  --dsn-color-positive-border-default: #009b3a; /** Default border */
+  --dsn-color-positive-border-hover: #009036; /** Hover state border */
+  --dsn-color-positive-border-active: #008432; /** Active state border */
+  --dsn-color-positive-color-default: #006827; /** Default text color */
+  --dsn-color-positive-color-hover: #005821; /** Hover state text */
+  --dsn-color-positive-color-active: #00481b; /** Active state text */
+  --dsn-color-positive-color-subtle: #00732b; /** Subtle text color */
+  --dsn-color-positive-color-document: #00210c; /** Document text color */
+  --dsn-color-warning-bg-document: #fffcf8; /** Document background */
+  --dsn-color-warning-bg-elevated: #fffcf8; /** 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: #fff5eb; /** Subtle background */
+  --dsn-color-warning-bg-default: #ffeedd; /** Default background */
+  --dsn-color-warning-bg-hover: #ffe7d0; /** Hover state background */
+  --dsn-color-warning-bg-active: #ffe0c2; /** Active state background */
+  --dsn-color-warning-border-subtle: #ffb46b; /** Subtle border */
+  --dsn-color-warning-border-default: #c8700e; /** Default border */
+  --dsn-color-warning-border-hover: #b86810; /** Hover state border */
+  --dsn-color-warning-border-active: #a96011; /** Active state border */
+  --dsn-color-warning-color-default: #844c12; /** Default text color */
+  --dsn-color-warning-color-hover: #6f4012; /** Hover state text */
+  --dsn-color-warning-color-active: #5a3511; /** Active state text */
+  --dsn-color-warning-color-subtle: #935412; /** Subtle text color */
+  --dsn-color-warning-color-document: #27190a; /** Document text color */
+  --dsn-color-neutral-inverse-bg-document: #242424; /** Document background (inverse) */
+  --dsn-color-neutral-inverse-bg-elevated: #242424; /** 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: #1b1b1b; /** Subtle background (inverse) */
+  --dsn-color-neutral-inverse-bg-default: #595959; /** Default background (inverse) */
+  --dsn-color-neutral-inverse-bg-hover: #4b4b4b; /** Hover state background (inverse) */
+  --dsn-color-neutral-inverse-bg-active: #3e3e3e; /** Active state background (inverse) */
+  --dsn-color-neutral-inverse-border-subtle: #474747; /** Subtle border (inverse) */
+  --dsn-color-neutral-inverse-border-default: #c9c9c9; /** Default border (inverse) */
+  --dsn-color-neutral-inverse-border-hover: #d4d4d4; /** Hover state border (inverse) */
+  --dsn-color-neutral-inverse-border-active: #dfdfdf; /** Active state border (inverse) */
+  --dsn-color-neutral-inverse-color-default: #ffffff; /** Default text color (inverse) */
+  --dsn-color-neutral-inverse-color-hover: #ffffff; /** Hover state text (inverse) */
+  --dsn-color-neutral-inverse-color-active: #ffffff; /** Active state text (inverse) */
+  --dsn-color-neutral-inverse-color-subtle: #c4c4c4; /** Subtle text color (inverse) */
+  --dsn-color-neutral-inverse-color-document: #ffffff; /** Document text color (inverse) */
+  --dsn-color-accent-1-inverse-bg-document: #00234d; /** Document background (inverse) */
+  --dsn-color-accent-1-inverse-bg-elevated: #00234d; /** 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: #001b3c; /** Subtle background (inverse) */
+  --dsn-color-accent-1-inverse-bg-default: #1b59a4; /** Default background (inverse) */
+  --dsn-color-accent-1-inverse-bg-hover: #04499a; /** Hover state background (inverse) */
+  --dsn-color-accent-1-inverse-bg-active: #003b81; /** Active state background (inverse) */
+  --dsn-color-accent-1-inverse-border-subtle: #004494; /** Subtle border (inverse) */
+  --dsn-color-accent-1-inverse-border-default: #b8cbe2; /** Default border (inverse) */
+  --dsn-color-accent-1-inverse-border-hover: #c6d6e8; /** Hover state border (inverse) */
+  --dsn-color-accent-1-inverse-border-active: #d5e1ee; /** Active state border (inverse) */
+  --dsn-color-accent-1-inverse-color-default: #ffffff; /** Default text color (inverse) */
+  --dsn-color-accent-1-inverse-color-hover: #ffffff; /** Hover state text (inverse) */
+  --dsn-color-accent-1-inverse-color-active: #ffffff; /** Active state text (inverse) */
+  --dsn-color-accent-1-inverse-color-subtle: #b0c6df; /** Subtle text color (inverse) */
+  --dsn-color-accent-1-inverse-color-document: #ffffff; /** Document text color (inverse) */
+  --dsn-color-info-inverse-bg-document: #00234d; /** Document background (inverse) */
+  --dsn-color-info-inverse-bg-elevated: #00234d; /** 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: #001b3c; /** Subtle background (inverse) */
+  --dsn-color-info-inverse-bg-default: #1b59a4; /** Default background (inverse) */
+  --dsn-color-info-inverse-bg-hover: #04499a; /** Hover state background (inverse) */
+  --dsn-color-info-inverse-bg-active: #003b81; /** Active state background (inverse) */
+  --dsn-color-info-inverse-border-subtle: #004494; /** Subtle border (inverse) */
+  --dsn-color-info-inverse-border-default: #b8cbe2; /** Default border (inverse) */
+  --dsn-color-info-inverse-border-hover: #c6d6e8; /** Hover state border (inverse) */
+  --dsn-color-info-inverse-border-active: #d5e1ee; /** Active state border (inverse) */
+  --dsn-color-info-inverse-color-default: #ffffff; /** Default text color (inverse) */
+  --dsn-color-info-inverse-color-hover: #ffffff; /** Hover state text (inverse) */
+  --dsn-color-info-inverse-color-active: #ffffff; /** Active state text (inverse) */
+  --dsn-color-info-inverse-color-subtle: #b0c6df; /** Subtle text color (inverse) */
+  --dsn-color-info-inverse-color-document: #ffffff; /** Document text color (inverse) */
+  --dsn-color-negative-inverse-bg-document: #510000; /** Document background (inverse) */
+  --dsn-color-negative-inverse-bg-elevated: #510000; /** 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: #410000; /** Subtle background (inverse) */
+  --dsn-color-negative-inverse-bg-default: #b70000; /** Default background (inverse) */
+  --dsn-color-negative-inverse-bg-hover: #9c0000; /** Hover state background (inverse) */
+  --dsn-color-negative-inverse-bg-active: #820000; /** Active state background (inverse) */
+  --dsn-color-negative-inverse-border-subtle: #930000; /** Subtle border (inverse) */
+  --dsn-color-negative-inverse-border-default: #fab9b9; /** Default border (inverse) */
+  --dsn-color-negative-inverse-border-hover: #fbc8c8; /** Hover state border (inverse) */
+  --dsn-color-negative-inverse-border-active: #fcd7d7; /** Active state border (inverse) */
+  --dsn-color-negative-inverse-color-default: #ffffff; /** Default text color (inverse) */
+  --dsn-color-negative-inverse-color-hover: #ffffff; /** Hover state text (inverse) */
+  --dsn-color-negative-inverse-color-active: #ffffff; /** Active state text (inverse) */
+  --dsn-color-negative-inverse-color-subtle: #f9b1b1; /** Subtle text color (inverse) */
+  --dsn-color-negative-inverse-color-document: #ffffff; /** Document text color (inverse) */
+  --dsn-color-positive-inverse-bg-document: #002b10; /** Document background (inverse) */
+  --dsn-color-positive-inverse-bg-elevated: #002b10; /** 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: #00210c; /** Subtle background (inverse) */
+  --dsn-color-positive-inverse-bg-default: #006827; /** Default background (inverse) */
+  --dsn-color-positive-inverse-bg-hover: #005821; /** Hover state background (inverse) */
+  --dsn-color-positive-inverse-bg-active: #00481b; /** Active state background (inverse) */
+  --dsn-color-positive-inverse-border-subtle: #00531f; /** Subtle border (inverse) */
+  --dsn-color-positive-inverse-border-default: #96d8ae; /** Default border (inverse) */
+  --dsn-color-positive-inverse-border-hover: #ace0c0; /** Hover state border (inverse) */
+  --dsn-color-positive-inverse-border-active: #c3e9d1; /** Active state border (inverse) */
+  --dsn-color-positive-inverse-color-default: #ffffff; /** Default text color (inverse) */
+  --dsn-color-positive-inverse-color-hover: #ffffff; /** Hover state text (inverse) */
+  --dsn-color-positive-inverse-color-active: #ffffff; /** Active state text (inverse) */
+  --dsn-color-positive-inverse-color-subtle: #8ad3a6; /** Subtle text color (inverse) */
+  --dsn-color-positive-inverse-color-document: #ffffff; /** Document text color (inverse) */
+  --dsn-color-warning-inverse-bg-document: #331f0d; /** Document background (inverse) */
+  --dsn-color-warning-inverse-bg-elevated: #331f0d; /** 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: #27190a; /** Subtle background (inverse) */
+  --dsn-color-warning-inverse-bg-default: #844c12; /** Default background (inverse) */
+  --dsn-color-warning-inverse-bg-hover: #6f4012; /** Hover state background (inverse) */
+  --dsn-color-warning-inverse-bg-active: #5a3511; /** Active state background (inverse) */
+  --dsn-color-warning-inverse-border-subtle: #683c12; /** Subtle border (inverse) */
+  --dsn-color-warning-inverse-border-default: #ffbc7a; /** Default border (inverse) */
+  --dsn-color-warning-inverse-border-hover: #ffcb98; /** Hover state border (inverse) */
+  --dsn-color-warning-inverse-border-active: #ffd9b4; /** Active state border (inverse) */
+  --dsn-color-warning-inverse-color-default: #ffffff; /** Default text color (inverse) */
+  --dsn-color-warning-inverse-color-hover: #ffffff; /** Hover state text (inverse) */
+  --dsn-color-warning-inverse-color-active: #ffffff; /** Active state text (inverse) */
+  --dsn-color-warning-inverse-color-subtle: #ffb46b; /** Subtle text color (inverse) */
+  --dsn-color-warning-inverse-color-document: #ffffff; /** 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 12%, transparent); /** Scherpe schaduwlaag — direct licht, dichtbij het object */
+  --dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent); /** Diffuse schaduwlaag — omgevingslicht, verder weg */
+  --dsn-color-shadow-highlight: rgba(0, 0, 0, 0); /** Outline-laag — transparent in light mode (no-op) */
+  --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15); /** Scroll-affordance schaduw voor horizontaal scrollbare tabellen */
+  --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-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-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-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-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-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-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-gutter: calc(0.5rem * 1); /** Compactere kolomafstand voor information-dense project types (8px = space.column.md) */
+  --dsn-grid-row-gap: calc(0.5rem * 1); /** Compactere rij-afstand voor information-dense project types (8px = space.column.md) */
+  --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-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 */
+  --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
+  --dsn-page-max-inline-size: 75rem; /** Maximale breedte van de paginainhoud binnen page-level componenten. Achtergronden lopen altijd full-bleed; __inner containers gebruiken dit token om de inhoudsbreedte te beperken. */
+  --dsn-password-input-padding-inline-end: 3rem; /** Password input right padding - extra space for password manager icons */
+  --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-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-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-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-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 */
+  --dsn-icon-size-xl: calc(var(--dsn-text-font-size-xl) * var(--dsn-text-line-height-xl)); /** Fluid icon size - coupled to font-size.xl × line-height.xl */
+  --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-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-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-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-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-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-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-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-backdrop-background-color: var(--dsn-color-neutral-inverse-bg-document); /** Achtergrondkleur van de backdrop — altijd donker, ongeacht light mode. Gebruikt neutral-inverse.bg-document (#242424) zodat de overlay donker blijft in light 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-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-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) */
+  --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
+  --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
+  --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
+  --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
+  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
+  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
+  --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
+  --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
+  --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
+  --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
+  --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
+  --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-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-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-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);
+  --dsn-checkbox-checked-active-border-width: var(--dsn-border-width-medium);
+  --dsn-checkbox-checked-active-color: var(--dsn-color-neutral-inverse-color-default);
+  --dsn-checkbox-checked-focus-border-width: var(--dsn-border-width-medium);
+  --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-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);
+  --dsn-checkbox-indeterminate-hover-border-width: var(--dsn-border-width-medium);
+  --dsn-checkbox-indeterminate-hover-color: var(--dsn-color-neutral-inverse-color-default);
+  --dsn-container-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur — bg-elevated voor visuele scheiding van de pagina */
+  --dsn-container-border-color: var(--dsn-color-neutral-border-subtle); /** Subtiele border — minder prominent dan border-default */
+  --dsn-container-border-radius: var(--dsn-border-radius-md);
+  --dsn-container-border-width: var(--dsn-border-width-thin);
+  --dsn-container-color: var(--dsn-color-neutral-color-document); /** Tekstkleur — altijd de volledige document-kleur voor leesbaarheid */
+  --dsn-container-padding-block: var(--dsn-space-block-3xl);
+  --dsn-container-padding-inline: var(--dsn-space-inline-3xl);
+  --dsn-date-input-group-gap: var(--dsn-space-inline-md); /** Gap between the day, month and year inputs */
+  --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-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 */
+  --dsn-drawer-border-width: var(--dsn-border-width-thin); /** Randbreedte van het zijpaneel */
+  --dsn-drawer-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van het zijpaneel */
+  --dsn-drawer-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de zijpaneel-heading */
+  --dsn-drawer-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de zijpaneel-heading */
+  --dsn-drawer-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de zijpaneel-heading */
+  --dsn-drawer-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de zijpaneel-heading */
+  --dsn-drawer-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-drawer-header-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de header (16px) */
+  --dsn-drawer-header-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de header (16px) */
+  --dsn-drawer-body-padding-block: var(--dsn-space-block-3xl); /** Verticale padding van de body (24px) */
+  --dsn-drawer-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de body (16px) */
+  --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-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 */
+  --dsn-file-border-radius: var(--dsn-border-radius-md);
+  --dsn-file-border-width: var(--dsn-border-width-thin);
+  --dsn-file-border-color: var(--dsn-color-neutral-border-subtle);
+  --dsn-file-border-color-hover: var(--dsn-color-neutral-border-default); /** Iets prominentere rand bij hover — signaleert interactiviteit */
+  --dsn-file-border-color-active: var(--dsn-color-neutral-border-default); /** Zelfde als hover */
+  --dsn-file-border-color-error: var(--dsn-color-negative-border-default); /** Randkleur in de error state — zelfde schaal als FormFieldset bij invalid */
+  --dsn-file-padding-block: var(--dsn-space-block-lg);
+  --dsn-file-padding-inline: var(--dsn-space-inline-xl);
+  --dsn-file-gap: var(--dsn-space-inline-lg); /** Horizontale ruimte tussen media-vlak, content en actions */
+  --dsn-file-content-gap: var(--dsn-space-block-xs); /** Verticale ruimte tussen naam, meta en error message */
+  --dsn-file-name-color: var(--dsn-color-neutral-color-default);
+  --dsn-file-name-font-weight: var(--dsn-text-font-weight-bold); /** Bold gewicht benadrukt de bestandsnaam als primaire informatie */
+  --dsn-file-meta-color: var(--dsn-color-neutral-color-subtle); /** Subtielere kleur legt visuele hiërarchie vast t.o.v. de naam */
+  --dsn-file-meta-font-size: var(--dsn-text-font-size-md);
+  --dsn-file-media-border-radius: var(--dsn-border-radius-sm);
+  --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-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-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-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-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-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 */
+  --dsn-menu-item-font-weight: var(--dsn-text-font-weight-default); /** Gedeeld: letterdikte — regular voor navigatie-items */
+  --dsn-menu-item-line-height: var(--dsn-text-line-height-md); /** Gedeeld: regelhoogte */
+  --dsn-menu-item-padding-block: var(--dsn-space-block-md); /** Gedeeld: verticale padding */
+  --dsn-menu-item-padding-inline: var(--dsn-space-inline-lg); /** Gedeeld: horizontale padding */
+  --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
+  --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
+  --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
+  --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
+  --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
+  --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
+  --dsn-menu-gap-horizontal: var(--dsn-space-inline-sm); /** Ruimte tussen items in horizontale oriëntatie */
+  --dsn-modal-dialog-z-index: var(--dsn-z-index-500); /** Positionering boven de backdrop (400) en onder de skip-link (600) */
+  --dsn-modal-dialog-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van het dialoogvenster — bg-elevated benadrukt elevatie boven de pagina */
+  --dsn-modal-dialog-border-radius: var(--dsn-border-radius-lg); /** Afgeronde hoeken van het dialoogvenster (12px) */
+  --dsn-modal-dialog-border-width: var(--dsn-border-width-thin); /** Randbreedte van het dialoogvenster */
+  --dsn-modal-dialog-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van het dialoogvenster */
+  --dsn-modal-dialog-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de dialoogvenster-heading */
+  --dsn-modal-dialog-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de dialoogvenster-heading */
+  --dsn-modal-dialog-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de dialoogvenster-heading */
+  --dsn-modal-dialog-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de dialoogvenster-heading */
+  --dsn-modal-dialog-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-modal-dialog-header-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de header (16px) */
+  --dsn-modal-dialog-header-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de header (16px) */
+  --dsn-modal-dialog-body-padding-block: var(--dsn-space-block-3xl); /** Verticale padding van de body (24px) */
+  --dsn-modal-dialog-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de body (16px) */
+  --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-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 */
+  --dsn-number-badge-padding-block: var(--dsn-space-none); /** Verticale padding */
+  --dsn-number-badge-padding-inline: var(--dsn-space-inline-sm); /** Horizontale padding */
+  --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-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-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-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-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-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-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-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-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-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-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-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-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 */
+  --dsn-popover-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de popover (8px) — ronder dan form inputs, passend bij het zwevende karakter */
+  --dsn-popover-z-index: var(--dsn-z-index-350); /** Z-index van de popover — boven sticky headers (300), lager dan backdrop (400) */
+  --dsn-popover-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de popover-heading */
+  --dsn-popover-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de popover-heading */
+  --dsn-popover-heading-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de popover-heading (compacter dan ModalDialog) */
+  --dsn-popover-heading-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de popover-heading */
+  --dsn-popover-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-popover-header-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de header (16px) */
+  --dsn-popover-header-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de header (16px) */
+  --dsn-popover-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de body (16px) */
+  --dsn-popover-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de body (16px) */
+  --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-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
+  --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
+  --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-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-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);
+  --dsn-radio-checked-active-border-width: var(--dsn-border-width-medium);
+  --dsn-radio-checked-active-color: var(--dsn-color-neutral-inverse-color-default);
+  --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-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 */
+  --dsn-skip-link-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de skip-link */
+  --dsn-skip-link-offset-block-start: var(--dsn-space-block-md); /** Afstand van de bovenkant van het viewport bij focus */
+  --dsn-skip-link-offset-inline-start: var(--dsn-space-inline-md); /** Afstand van de linkerkant (of rechterkant in RTL) van het viewport bij focus */
+  --dsn-spinner-stroke-width: var(--dsn-border-width-medium); /** Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie */
+  --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-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);
+  --dsn-table-caption-font-weight: var(--dsn-heading-font-weight);
+  --dsn-table-caption-line-height: var(--dsn-text-line-height-xl);
+  --dsn-table-cell-padding-block-end: var(--dsn-space-block-lg);
+  --dsn-table-cell-padding-block-start: var(--dsn-space-block-lg);
+  --dsn-table-cell-padding-inline-end: var(--dsn-space-inline-xl);
+  --dsn-table-cell-padding-inline-start: var(--dsn-space-inline-xl);
+  --dsn-table-header-border-block-end-color: var(--dsn-color-neutral-border-subtle);
+  --dsn-table-header-border-block-end-width: var(--dsn-border-width-medium);
+  --dsn-table-header-color: var(--dsn-color-neutral-color-document);
+  --dsn-table-header-cell-font-weight: var(--dsn-text-font-weight-bold);
+  --dsn-table-row-border-block-end-color: var(--dsn-color-neutral-border-subtle);
+  --dsn-table-row-border-block-end-width: var(--dsn-border-width-thin);
+  --dsn-table-footer-border-block-start-color: var(--dsn-color-neutral-border-subtle);
+  --dsn-table-footer-border-block-start-width: var(--dsn-border-width-medium);
+  --dsn-table-footer-color: var(--dsn-color-neutral-color-document);
+  --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-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 */
+  --dsn-unordered-list-font-weight: var(--dsn-text-font-weight-default); /** Unordered list font weight */
+  --dsn-unordered-list-max-inline-size: var(--dsn-text-max-inline-size); /** Unordered list max width for readability */
+  --dsn-unordered-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-unordered-list-line-height: var(--dsn-text-line-height-md); /** Unordered list line height */
+  --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-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-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);
+  --dsn-checkbox-active-border-color: var(--dsn-form-control-active-border-color);
+  --dsn-checkbox-disabled-background-color: var(--dsn-form-control-disabled-background-color);
+  --dsn-checkbox-disabled-border-color: var(--dsn-form-control-disabled-border-color);
+  --dsn-checkbox-focus-border-color: var(--dsn-form-control-focus-border-color);
+  --dsn-checkbox-hover-background-color: var(--dsn-form-control-hover-background-color);
+  --dsn-checkbox-hover-border-color: var(--dsn-form-control-hover-border-color);
+  --dsn-checkbox-invalid-background-color: var(--dsn-form-control-invalid-background-color);
+  --dsn-checkbox-invalid-border-color: var(--dsn-form-control-invalid-border-color);
+  --dsn-checkbox-checked-disabled-background-color: var(--dsn-form-control-disabled-accent-color);
+  --dsn-checkbox-checked-disabled-border-color: var(--dsn-form-control-disabled-border-color);
+  --dsn-checkbox-checked-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-checkbox-checked-focus-border-color: var(--dsn-form-control-focus-border-color);
+  --dsn-checkbox-indeterminate-disabled-background-color: var(--dsn-form-control-disabled-accent-color);
+  --dsn-checkbox-indeterminate-disabled-border-color: var(--dsn-form-control-disabled-border-color);
+  --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-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
+  --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-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
+  --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-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-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 */
+  --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
+  --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
+  --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
+  --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
+  --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-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-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-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-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);
+  --dsn-radio-disabled-background-color: var(--dsn-form-control-disabled-background-color);
+  --dsn-radio-disabled-border-color: var(--dsn-form-control-disabled-border-color);
+  --dsn-radio-disabled-color: var(--dsn-form-control-disabled-border-color);
+  --dsn-radio-focus-border-color: var(--dsn-form-control-focus-border-color);
+  --dsn-radio-focus-color: var(--dsn-form-control-focus-border-color);
+  --dsn-radio-hover-background-color: var(--dsn-form-control-hover-background-color);
+  --dsn-radio-hover-border-color: var(--dsn-form-control-hover-border-color);
+  --dsn-radio-hover-color: var(--dsn-form-control-hover-border-color);
+  --dsn-radio-invalid-background-color: var(--dsn-form-control-invalid-background-color);
+  --dsn-radio-invalid-border-color: var(--dsn-form-control-invalid-border-color);
+  --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-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-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);
+  --dsn-checkbox-checked-focus-background-color: var(--dsn-form-control-focus-background-color);
+  --dsn-checkbox-checked-focus-color: var(--dsn-form-control-focus-color);
+  --dsn-checkbox-checked-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-checkbox-indeterminate-background-color: var(--dsn-form-control-accent-color);
+  --dsn-checkbox-indeterminate-active-background-color: var(--dsn-form-control-active-accent-color);
+  --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-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-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-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-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dsn-transition-duration-instant: 0ms;
+    --dsn-transition-duration-fast: 0ms;
+    --dsn-transition-duration-normal: 0ms;
+    --dsn-transition-duration-slow: 0ms;
+    --dsn-transition-duration-slower: 0ms;
+  }
+}