@dsn-starter-kit/design-tokens 1.0.0

package/dist/scss/_variables.scss

@@ -0,0 +1,1351 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$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: clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem); // Small text - 14px to 17px (fluid)
+$dsn-text-font-size-md: clamp(1rem, 0.875rem + 0.375vw, 1.28125rem); // Medium text - 16px to 20.5px (fluid)
+$dsn-text-font-size-lg: clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem); // Large text - 20px to 24.5px (fluid)
+$dsn-text-font-size-xl: clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem); // Extra large text - 24px to 31px (fluid)
+$dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); // 2XL text - 32px to 41px (fluid)
+$dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); // 3XL text - 40px to 53px (fluid)
+$dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); // 4XL text - 48px to 66px (fluid)
+$dsn-heading-font-family: IBM Plex Sans, sans-serif; // Font family for headings
+$dsn-heading-font-weight: 700; // Bold weight for headings
+$dsn-space-none: 0px; // No spacing
+$dsn-space-base: 0.5rem; // 8px - Base unit for 8pt grid system
+$dsn-space-block-2xs: calc(0.5rem * 0.125); // 1px - Vertical spacing within components
+$dsn-space-block-xs: calc(0.5rem * 0.25); // 2px - Vertical spacing within components
+$dsn-space-block-sm: calc(0.5rem * 0.5); // 4px - Vertical spacing within components
+$dsn-space-block-md: calc(0.5rem * 1); // 8px - Vertical spacing within components
+$dsn-space-block-lg: calc(0.5rem * 1.5); // 12px - Vertical spacing within components
+$dsn-space-block-xl: calc(0.5rem * 2); // 16px - Vertical spacing within components
+$dsn-space-block-2xl: calc(0.5rem * 2.5); // 20px - Vertical spacing within components
+$dsn-space-block-3xl: calc(0.5rem * 3); // 24px - Vertical spacing within components
+$dsn-space-block-4xl: calc(0.5rem * 4); // 32px - Vertical spacing within components
+$dsn-space-block-5xl: calc(0.5rem * 6); // 48px - Vertical spacing within components
+$dsn-space-block-6xl: calc(0.5rem * 8); // 64px - Vertical spacing within components
+$dsn-space-inline-2xs: calc(0.5rem * 0.125); // 1px - Horizontal spacing within components
+$dsn-space-inline-xs: calc(0.5rem * 0.25); // 2px - Horizontal spacing within components
+$dsn-space-inline-sm: calc(0.5rem * 0.5); // 4px - Horizontal spacing within components
+$dsn-space-inline-md: calc(0.5rem * 1); // 8px - Horizontal spacing within components
+$dsn-space-inline-lg: calc(0.5rem * 1.5); // 12px - Horizontal spacing within components
+$dsn-space-inline-xl: calc(0.5rem * 2); // 16px - Horizontal spacing within components
+$dsn-space-inline-2xl: calc(0.5rem * 2.5); // 20px - Horizontal spacing within components
+$dsn-space-inline-3xl: calc(0.5rem * 3); // 24px - Horizontal spacing within components
+$dsn-space-inline-4xl: calc(0.5rem * 4); // 32px - Horizontal spacing within components
+$dsn-space-inline-5xl: calc(0.5rem * 6); // 48px - Horizontal spacing within components
+$dsn-space-inline-6xl: calc(0.5rem * 8); // 64px - Horizontal spacing within components
+$dsn-space-text-3xs: calc(0.5rem * 0.125); // 1px - Spacing between text and icons
+$dsn-space-text-2xs: calc(0.5rem * 0.25); // 2px - Spacing between text and icons
+$dsn-space-text-xs: calc(0.5rem * 0.25); // 2px - Spacing between text and icons
+$dsn-space-text-sm: calc(0.5rem * 0.5); // 4px - Spacing between text and icons
+$dsn-space-text-md: calc(0.5rem * 1); // 8px - Spacing between text and icons
+$dsn-space-text-lg: calc(0.5rem * 1.5); // 12px - Spacing between text and icons
+$dsn-space-text-xl: calc(0.5rem * 2); // 16px - Spacing between text and icons
+$dsn-space-text-2xl: calc(0.5rem * 2.5); // 20px - Spacing between text and icons
+$dsn-space-text-3xl: calc(0.5rem * 3); // 24px - Spacing between text and icons
+$dsn-space-column-2xs: calc(0.5rem * 0.125); // 1px - Horizontal spacing between components
+$dsn-space-column-xs: calc(0.5rem * 0.25); // 2px - Horizontal spacing between components
+$dsn-space-column-sm: calc(0.5rem * 0.5); // 4px - Horizontal spacing between components
+$dsn-space-column-md: calc(0.5rem * 1); // 8px - Horizontal spacing between components
+$dsn-space-column-lg: calc(0.5rem * 1.5); // 12px - Horizontal spacing between components
+$dsn-space-column-xl: calc(0.5rem * 2); // 16px - Horizontal spacing between components
+$dsn-space-column-2xl: calc(0.5rem * 2.5); // 20px - Horizontal spacing between components
+$dsn-space-column-3xl: calc(0.5rem * 3); // 24px - Horizontal spacing between components
+$dsn-space-column-4xl: calc(0.5rem * 4); // 32px - Horizontal spacing between components
+$dsn-space-column-5xl: calc(0.5rem * 8); // 64px - Horizontal spacing between components
+$dsn-space-column-6xl: calc(0.5rem * 20); // 160px - Horizontal spacing between components
+$dsn-space-row-2xs: calc(0.5rem * 0.125); // 1px - Vertical spacing between components
+$dsn-space-row-xs: calc(0.5rem * 0.25); // 2px - Vertical spacing between components
+$dsn-space-row-sm: calc(0.5rem * 0.5); // 4px - Vertical spacing between components
+$dsn-space-row-md: calc(0.5rem * 1); // 8px - Vertical spacing between components
+$dsn-space-row-lg: calc(0.5rem * 1.5); // 12px - Vertical spacing between components
+$dsn-space-row-xl: calc(0.5rem * 2); // 16px - Vertical spacing between components
+$dsn-space-row-2xl: calc(0.5rem * 2.5); // 20px - Vertical spacing between components
+$dsn-space-row-3xl: calc(0.5rem * 3); // 24px - Vertical spacing between components
+$dsn-space-row-4xl: calc(0.5rem * 4); // 32px - Vertical spacing between components
+$dsn-space-row-5xl: calc(0.5rem * 8); // 64px - Vertical spacing between components
+$dsn-space-row-6xl: calc(0.5rem * 20); // 160px - Vertical spacing between components
+$dsn-pointer-target-min-block-size: 3rem; // WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target
+$dsn-pointer-target-min-inline-size: 3rem; // WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target
+$dsn-border-radius-square: 0px; // No border radius — square corners
+$dsn-border-radius-sm: 4px; // Small border radius
+$dsn-border-radius-md: 8px; // Medium border radius
+$dsn-border-radius-lg: 16px; // Large border radius
+$dsn-border-radius-round: 999px; // Fully rounded (pills, circles)
+$dsn-border-width-none: 0px; // No border width
+$dsn-border-width-thin: 1px; // Thin border
+$dsn-border-width-medium: 2px; // Medium border
+$dsn-border-width-thick: 4px; // Thick border
+$dsn-focus-outline-offset: 0px; // Focus outline offset
+$dsn-focus-outline-style: dashed; // Focus outline style
+$dsn-focus-outline-width: 2px; // Focus outline width
+$dsn-focus-background-color: #ffdd00; // Focus indicator background
+$dsn-focus-color: #0b0c0c; // Focus indicator text color
+$dsn-focus-outline-color: #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-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: $dsn-color-neutral-color-document; // Heading text color
+$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Heading 1 font family
+$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Heading 1 font size
+$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Heading 1 font weight
+$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Heading 1 line height
+$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Heading 1 bottom margin
+$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Heading 2 font family
+$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Heading 2 font size
+$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Heading 2 font weight
+$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Heading 2 line height
+$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Heading 2 bottom margin
+$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Heading 3 font family
+$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Heading 3 font size
+$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Heading 3 font weight
+$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Heading 3 line height
+$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Heading 3 bottom margin
+$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Heading 4 font family
+$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Heading 4 font size
+$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Heading 4 font weight
+$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Heading 4 line height
+$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Heading 4 bottom margin
+$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Heading 5 font family
+$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Heading 5 font size
+$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Heading 5 font weight
+$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Heading 5 line height
+$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Heading 5 bottom margin
+$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Heading 6 font family
+$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Heading 6 font size
+$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Heading 6 font weight
+$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Heading 6 line height
+$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Heading 6 bottom margin
+$dsn-icon-size-sm: calc($dsn-text-font-size-sm * $dsn-text-line-height-sm); // Fluid icon size - coupled to font-size.sm × line-height.sm
+$dsn-icon-size-md: calc($dsn-text-font-size-md * $dsn-text-line-height-md); // Fluid icon size - coupled to font-size.md × line-height.md
+$dsn-icon-size-lg: calc($dsn-text-font-size-lg * $dsn-text-line-height-lg); // Fluid icon size - coupled to font-size.lg × line-height.lg
+$dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // Fluid icon size - coupled to font-size.xl × line-height.xl
+$dsn-icon-size-2xl: calc($dsn-text-font-size-2xl * $dsn-text-line-height-2xl); // Fluid icon size - coupled to font-size.2xl × line-height.2xl
+$dsn-icon-size-3xl: calc($dsn-text-font-size-3xl * $dsn-text-line-height-3xl); // Fluid icon size - coupled to font-size.3xl × line-height.3xl
+$dsn-icon-size-4xl: calc($dsn-text-font-size-4xl * $dsn-text-line-height-4xl); // Fluid icon size - coupled to font-size.4xl × line-height.4xl
+$dsn-form-control-font-family: $dsn-text-font-family-default; // Form control font family
+$dsn-form-control-font-size: $dsn-text-font-size-md; // Form control font size
+$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Form control font weight
+$dsn-form-control-line-height: $dsn-text-line-height-md; // Form control line height
+$dsn-form-control-padding-block-start: $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: $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: $dsn-space-inline-lg; // Form control left padding
+$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Form control right padding
+$dsn-form-control-border-radius: $dsn-border-radius-square; // Form control border radius
+$dsn-form-control-border-width: $dsn-border-width-thin; // Form control border width
+$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Form control hover border width
+$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Form control hover background
+$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Form control hover border
+$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Form control focus border width
+$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Form control focus border
+$dsn-form-control-active-border-width: $dsn-border-width-medium; // Form control active border width
+$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Form control active background
+$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Form control active border
+$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Form control invalid border width
+$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Form control invalid background
+$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Form control invalid border
+$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Form control invalid text color
+$dsn-form-control-background-color: $dsn-color-neutral-bg-document; // Form control background
+$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Form control border
+$dsn-form-control-color: $dsn-color-neutral-color-document; // Form control text color
+$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Form control placeholder text color
+$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Form control disabled accent color
+$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Form control disabled background
+$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Form control disabled border
+$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Form control disabled text color
+$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Form control read-only background
+$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Form control read-only border
+$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Form control read-only text color
+$dsn-box-shadow-sm: 0 1px 2px 0 $dsn-color-shadow-direct, 0 2px 4px 0 $dsn-color-shadow-ambient, 0 0 0 1px $dsn-color-shadow-highlight; // Kleine elevatie — cards, chips, kleine floating elementen
+$dsn-box-shadow-md: 0 2px 4px 0 $dsn-color-shadow-direct, 0 8px 16px 0 $dsn-color-shadow-ambient, 0 0 0 1px $dsn-color-shadow-highlight; // Middelgrote elevatie — dropdowns, date pickers, tooltips
+$dsn-box-shadow-lg: 0 4px 8px 0 $dsn-color-shadow-direct, 0 16px 32px 0 $dsn-color-shadow-ambient, 0 0 0 1px $dsn-color-shadow-highlight; // Grote elevatie — modals, dialogen, side panels
+$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-color-accent-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
+$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
+$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Default background
+$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
+$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Active state background
+$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
+$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Default border
+$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
+$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Active state border
+$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Default text color
+$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
+$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Active state text
+$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
+$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Document text color
+$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-color-accent-3-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
+$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
+$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Default background
+$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
+$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Active state background
+$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
+$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Default border
+$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
+$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Active state border
+$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Default text color
+$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
+$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Active state text
+$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
+$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Document text color
+$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Document background - Primary actions (buttons)
+$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background - Primary actions (buttons)
+$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background - Primary actions (buttons)
+$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Default background - Primary actions (buttons)
+$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background - Primary actions (buttons)
+$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Active state background - Primary actions (buttons)
+$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border - Primary actions (buttons)
+$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Default border - Primary actions (buttons)
+$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Hover state border - Primary actions (buttons)
+$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Active state border - Primary actions (buttons)
+$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Default text color - Primary actions (buttons)
+$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Hover state text - Primary actions (buttons)
+$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Active state text - Primary actions (buttons)
+$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color - Primary actions (buttons)
+$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Document text color - Primary actions (buttons)
+$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Document background - Secondary actions (links, navigation)
+$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background - Secondary actions (links, navigation)
+$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background - Secondary actions (links, navigation)
+$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Default background - Secondary actions (links, navigation)
+$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background - Secondary actions (links, navigation)
+$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Active state background - Secondary actions (links, navigation)
+$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border - Secondary actions (links, navigation)
+$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Default border - Secondary actions (links, navigation)
+$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Hover state border - Secondary actions (links, navigation)
+$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Active state border - Secondary actions (links, navigation)
+$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Default text color - Secondary actions (links, navigation)
+$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Hover state text - Secondary actions (links, navigation)
+$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Active state text - Secondary actions (links, navigation)
+$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color - Secondary actions (links, navigation)
+$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Document text color - Secondary actions (links, navigation)
+$dsn-color-info-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-color-info-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
+$dsn-color-info-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
+$dsn-color-info-bg-default: $dsn-color-accent-1-bg-default; // Default background
+$dsn-color-info-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
+$dsn-color-info-bg-active: $dsn-color-accent-1-bg-active; // Active state background
+$dsn-color-info-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
+$dsn-color-info-border-default: $dsn-color-accent-1-border-default; // Default border
+$dsn-color-info-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
+$dsn-color-info-border-active: $dsn-color-accent-1-border-active; // Active state border
+$dsn-color-info-color-default: $dsn-color-accent-1-color-default; // Default text color
+$dsn-color-info-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
+$dsn-color-info-color-active: $dsn-color-accent-1-color-active; // Active state text
+$dsn-color-info-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
+$dsn-color-info-color-document: $dsn-color-accent-1-color-document; // Document text color
+$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Document background (inverse)
+$dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
+$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtle background (inverse)
+$dsn-color-accent-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Default background (inverse)
+$dsn-color-accent-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Hover state background (inverse)
+$dsn-color-accent-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Active state background (inverse)
+$dsn-color-accent-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtle border (inverse)
+$dsn-color-accent-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Default border (inverse)
+$dsn-color-accent-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Hover state border (inverse)
+$dsn-color-accent-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Active state border (inverse)
+$dsn-color-accent-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Default text color (inverse)
+$dsn-color-accent-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Hover state text (inverse)
+$dsn-color-accent-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Active state text (inverse)
+$dsn-color-accent-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtle text color (inverse)
+$dsn-color-accent-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Document text color (inverse)
+$dsn-color-accent-3-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Document background (inverse)
+$dsn-color-accent-3-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
+$dsn-color-accent-3-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtle background (inverse)
+$dsn-color-accent-3-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Default background (inverse)
+$dsn-color-accent-3-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Hover state background (inverse)
+$dsn-color-accent-3-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Active state background (inverse)
+$dsn-color-accent-3-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtle border (inverse)
+$dsn-color-accent-3-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Default border (inverse)
+$dsn-color-accent-3-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Hover state border (inverse)
+$dsn-color-accent-3-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Active state border (inverse)
+$dsn-color-accent-3-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Default text color (inverse)
+$dsn-color-accent-3-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Hover state text (inverse)
+$dsn-color-accent-3-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Active state text (inverse)
+$dsn-color-accent-3-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtle text color (inverse)
+$dsn-color-accent-3-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Document text color (inverse)
+$dsn-color-action-1-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Document background (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtle background (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Default background (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Hover state background (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Active state background (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtle border (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Default border (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Hover state border (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Active state border (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Default text color (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Hover state text (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Active state text (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtle text color (inverse) - Primary actions (buttons)
+$dsn-color-action-1-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Document text color (inverse) - Primary actions (buttons)
+$dsn-color-action-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Document background (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtle background (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Default background (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Hover state background (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Active state background (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtle border (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Default border (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Hover state border (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Active state border (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Default text color (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Hover state text (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Active state text (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtle text color (inverse) - Secondary actions (links, navigation)
+$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Document text color (inverse) - Secondary actions (links, navigation)
+$dsn-backdrop-background-color: $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: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
+$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
+$dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
+$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border radius (square by default; themes can override to add rounded corners)
+$dsn-alert-border-width: $dsn-border-width-medium; // Alert border width (left border only)
+$dsn-alert-column-gap: $dsn-space-inline-md; // Gap between icon and content
+$dsn-alert-padding-block: $dsn-space-block-xl; // Vertical padding
+$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontal padding
+$dsn-alert-row-gap: $dsn-space-row-md; // Gap between heading and body
+$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
+$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Border color for negative variant
+$dsn-alert-negative-color: $dsn-color-negative-color-document; // Text color for negative variant
+$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icon color for negative variant
+$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
+$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Border color for positive variant
+$dsn-alert-positive-color: $dsn-color-positive-color-document; // Text color for positive variant
+$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icon color for positive variant
+$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
+$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Border color for warning variant
+$dsn-alert-warning-color: $dsn-color-warning-color-document; // Text color for warning variant
+$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icon color for warning variant
+$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Gap between breadcrumb items
+$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font size — sm (consistent met Link size small)
+$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font weight
+$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line height — sm (consistent met Link size small)
+$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Current page item color
+$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimum touch/click target height
+$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical padding to reach min-block-size
+$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
+$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
+$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
+$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
+$dsn-button-border-width: $dsn-border-width-thin; // Button border width
+$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
+$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font weight
+$dsn-button-line-height: $dsn-text-line-height-md; // Button line height
+$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Button minimum block size (WCAG 2.5.5 touch target)
+$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Button minimum inline size (WCAG 2.5.5 touch target)
+$dsn-button-default-background-color: $dsn-color-transparent; // Default button background
+$dsn-button-default-negative-background-color: $dsn-color-transparent; // Default negative button background
+$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Default negative button border
+$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Default negative button text/icon color
+$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Default negative button active background
+$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Default negative button active border
+$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Default negative button active text/icon color
+$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Default negative button hover background
+$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Default negative button hover border
+$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Default negative button hover text/icon color
+$dsn-button-default-positive-background-color: $dsn-color-transparent; // Default positive button background
+$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Default positive button border
+$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Default positive button text/icon color
+$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Default positive button active background
+$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Default positive button active border
+$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Default positive button active text/icon color
+$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Default positive button hover background
+$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Default positive button hover border
+$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Default positive button hover text/icon color
+$dsn-button-strong-border-color: $dsn-color-transparent; // Strong button border
+$dsn-button-strong-active-border-color: $dsn-color-transparent; // Strong button active border
+$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Strong button hover border
+$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Strong negative button background
+$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Strong negative button border
+$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Strong negative button text/icon color
+$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Strong negative button active background
+$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Strong negative button active border
+$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Strong negative button active text/icon color
+$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Strong negative button hover background
+$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Strong negative button hover border
+$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Strong negative button hover text/icon color
+$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Strong positive button background
+$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Strong positive button border
+$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Strong positive button text/icon color
+$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Strong positive button active background
+$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Strong positive button active border
+$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Strong positive button active text/icon color
+$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Strong positive button hover background
+$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Strong positive button hover border
+$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Strong positive button hover text/icon color
+$dsn-button-subtle-background-color: $dsn-color-transparent; // Subtle button background
+$dsn-button-subtle-border-color: $dsn-color-transparent; // Subtle button border
+$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Subtle button active border
+$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Subtle button hover border
+$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Subtle negative button background
+$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Subtle negative button border
+$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Subtle negative button text/icon color
+$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Subtle negative button active background
+$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Subtle negative button active border
+$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Subtle negative button active text/icon color
+$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Subtle negative button hover background
+$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Subtle negative button hover border
+$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Subtle negative button hover text/icon color
+$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Subtle positive button background
+$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Subtle positive button border
+$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Subtle positive button text/icon color
+$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Subtle positive button active background
+$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Subtle positive button active border
+$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Subtle positive button active text/icon color
+$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Subtle positive button hover background
+$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Subtle positive button hover border
+$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Subtle positive button hover text/icon color
+$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Disabled button background — neutral scale, variant-independent
+$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Disabled button text/icon color — neutral scale, variant-independent
+$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Disabled button border color — neutral scale, variant-independent
+$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Default button font size
+$dsn-button-size-default-gap: $dsn-space-text-sm; // Default button gap between icon and text
+$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Default button icon-only padding
+$dsn-button-size-default-padding-block: $dsn-space-block-md; // Default button vertical padding
+$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Default button horizontal padding
+$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Large button font size
+$dsn-button-size-large-gap: $dsn-space-text-md; // Large button gap between icon and text
+$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Large button icon-only padding
+$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Large button vertical padding
+$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Large button horizontal padding
+$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Small button font size
+$dsn-button-size-small-gap: $dsn-space-text-sm; // Small button gap between icon and text
+$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Small button icon-only padding
+$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Small button vertical padding
+$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Small button horizontal padding
+$dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
+$dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
+$dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
+$dsn-card-border-width: $dsn-border-width-thin; // Randbreedte van de card
+$dsn-card-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de card
+$dsn-card-body-padding-block: $dsn-space-block-xl; // Verticale padding van de card body (16px)
+$dsn-card-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card body (16px)
+$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de card body (12px)
+$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de card footer (24px)
+$dsn-card-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card footer (16px)
+$dsn-card-image-placeholder-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de afbeeldingsplaceholder
+$dsn-card-image-placeholder-color: $dsn-color-neutral-color-subtle; // Kleur van het icoon in de afbeeldingsplaceholder
+$dsn-card-heading-font-family: $dsn-heading-font-family; // Lettertype van de card heading
+$dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de card heading
+$dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
+$dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
+$dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
+$dsn-checkbox-group-border-width: $dsn-border-width-none; // No border by default for fieldset
+$dsn-checkbox-group-gap: $dsn-space-block-sm; // Space between checkbox options in the group
+$dsn-checkbox-group-margin: $dsn-space-none; // No margin by default for fieldset
+$dsn-checkbox-group-padding: $dsn-space-none; // No padding by default for fieldset
+$dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
+$dsn-checkbox-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
+$dsn-checkbox-border-radius: $dsn-border-radius-square; // Square corners for checkbox
+$dsn-checkbox-border-width: $dsn-border-width-thin;
+$dsn-checkbox-active-border-width: $dsn-border-width-medium;
+$dsn-checkbox-checked-border-width: $dsn-border-width-thin;
+$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Check icon color
+$dsn-checkbox-focus-border-width: $dsn-border-width-medium;
+$dsn-checkbox-hover-border-width: $dsn-border-width-medium;
+$dsn-checkbox-invalid-border-width: $dsn-border-width-medium;
+$dsn-checkbox-checked-active-border-width: $dsn-border-width-medium;
+$dsn-checkbox-checked-active-color: $dsn-color-neutral-inverse-color-default;
+$dsn-checkbox-checked-focus-border-width: $dsn-border-width-medium;
+$dsn-checkbox-checked-hover-border-width: $dsn-border-width-medium;
+$dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
+$dsn-checkbox-indeterminate-border-width: $dsn-border-width-thin;
+$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Indeterminate icon (minus) color
+$dsn-checkbox-indeterminate-active-border-width: $dsn-border-width-medium;
+$dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
+$dsn-checkbox-indeterminate-focus-border-width: $dsn-border-width-medium;
+$dsn-checkbox-indeterminate-hover-border-width: $dsn-border-width-medium;
+$dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
+$dsn-container-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur — bg-elevated voor visuele scheiding van de pagina
+$dsn-container-border-color: $dsn-color-neutral-border-subtle; // Subtiele border — minder prominent dan border-default
+$dsn-container-border-radius: $dsn-border-radius-md;
+$dsn-container-border-width: $dsn-border-width-thin;
+$dsn-container-color: $dsn-color-neutral-color-document; // Tekstkleur — altijd de volledige document-kleur voor leesbaarheid
+$dsn-container-padding-block: $dsn-space-block-3xl;
+$dsn-container-padding-inline: $dsn-space-inline-3xl;
+$dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month and year inputs
+$dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
+$dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
+$dsn-date-input-icon-gap: $dsn-space-text-md; // Gap between calendar button and input text
+$dsn-details-row-gap: $dsn-space-row-md; // Vertical gap between summary and content
+$dsn-details-summary-gap: $dsn-space-text-sm; // Gap between chevron icon and label text
+$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Left border color for visual grouping
+$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Left border width
+$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Left padding — aligns content with label text
+$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Right padding
+$dsn-details-content-padding-block: $dsn-space-block-xl; // Top and bottom padding
+$dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
+$dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
+$dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
+$dsn-drawer-border-width: $dsn-border-width-thin; // Randbreedte van het zijpaneel
+$dsn-drawer-border-color: $dsn-color-neutral-border-subtle; // Randkleur van het zijpaneel
+$dsn-drawer-heading-font-family: $dsn-heading-font-family; // Lettertype van de zijpaneel-heading
+$dsn-drawer-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de zijpaneel-heading
+$dsn-drawer-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de zijpaneel-heading
+$dsn-drawer-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de zijpaneel-heading
+$dsn-drawer-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-drawer-header-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de header (16px)
+$dsn-drawer-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header (16px)
+$dsn-drawer-body-padding-block: $dsn-space-block-3xl; // Verticale padding van de body (24px)
+$dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de body (16px)
+$dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
+$dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
+$dsn-drawer-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
+$dsn-file-input-column-gap: $dsn-space-text-lg; // Gap between file-selector-button and filename text
+$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // File input minimum height (WCAG touch target)
+$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // File input minimum width (WCAG touch target)
+$dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
+$dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
+$dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
+$dsn-file-border-radius: $dsn-border-radius-md;
+$dsn-file-border-width: $dsn-border-width-thin;
+$dsn-file-border-color: $dsn-color-neutral-border-subtle;
+$dsn-file-border-color-hover: $dsn-color-neutral-border-default; // Iets prominentere rand bij hover — signaleert interactiviteit
+$dsn-file-border-color-active: $dsn-color-neutral-border-default; // Zelfde als hover
+$dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur in de error state — zelfde schaal als FormFieldset bij invalid
+$dsn-file-padding-block: $dsn-space-block-lg;
+$dsn-file-padding-inline: $dsn-space-inline-xl;
+$dsn-file-gap: $dsn-space-inline-lg; // Horizontale ruimte tussen media-vlak, content en actions
+$dsn-file-content-gap: $dsn-space-block-xs; // Verticale ruimte tussen naam, meta en error message
+$dsn-file-name-color: $dsn-color-neutral-color-default;
+$dsn-file-name-font-weight: $dsn-text-font-weight-bold; // Bold gewicht benadrukt de bestandsnaam als primaire informatie
+$dsn-file-meta-color: $dsn-color-neutral-color-subtle; // Subtielere kleur legt visuele hiërarchie vast t.o.v. de naam
+$dsn-file-meta-font-size: $dsn-text-font-size-md;
+$dsn-file-media-border-radius: $dsn-border-radius-sm;
+$dsn-file-media-background-color: $dsn-color-neutral-bg-default;
+$dsn-file-media-icon-color: $dsn-color-neutral-color-subtle;
+$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
+$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Form field description text color
+$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Form field description font family
+$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Form field description font size
+$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Form field description font weight
+$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Form field description line height
+$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Space below description before form control
+$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
+$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Form field error message font family
+$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Form field error message font size
+$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Form field error message font weight
+$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Space between icon and error message text
+$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Form field error message line height
+$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Space below error message before form control
+$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Form field label suffix text color
+$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Form field label suffix font family
+$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Form field label suffix font size
+$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Form field label suffix font weight
+$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Form field label suffix line height
+$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Space between label text and suffix text
+$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Form field label text color
+$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Form field label font family
+$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Form field label font size
+$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Form field label font weight
+$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Form field label line height
+$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Space below label before form control (when no description follows)
+$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Space below label when description follows
+$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Form field status text color (subtle for non-critical info)
+$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Form field status font family
+$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Form field status font size
+$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Form field status font weight
+$dsn-form-field-status-gap: $dsn-space-text-sm; // Gap between icon and text (positive and warning variants)
+$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Form field status line height
+$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Space above status message after form control
+$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Text color for positive variant
+$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Text color for warning variant
+$dsn-form-field-margin-block-end: $dsn-space-none; // Bottom margin of form field container
+$dsn-form-field-margin-block-start: $dsn-space-none; // Top margin of form field container
+$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Left border color for invalid form fields
+$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Left border width for invalid form fields
+$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Left padding for invalid form fields (to accommodate border)
+$dsn-grid-gutter: $dsn-space-column-xl; // Horizontal gap between grid columns (overridden to column.md in information-dense)
+$dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (overridden to column.md in information-dense)
+$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
+$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
+$dsn-hero-padding-inline: $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: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero — licht blauw accent-1
+$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
+$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
+$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
+$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
+$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
+$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
+$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
+$dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
+$dsn-image-caption-margin-block-start: $dsn-space-row-sm; // Kleine ademruimte tussen afbeelding en bijschrift
+$dsn-link-gap: $dsn-space-text-sm; // Link gap between icon and text
+$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Link disabled text color
+$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Default link font size
+$dsn-link-size-default-gap: $dsn-space-text-sm; // Default link gap between icon and text
+$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Large link font size
+$dsn-link-size-large-gap: $dsn-space-text-md; // Large link gap between icon and text
+$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Small link font size
+$dsn-link-size-small-gap: $dsn-space-text-sm; // Small link gap between icon and text
+$dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
+$dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
+$dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
+$dsn-menu-item-font-weight: $dsn-text-font-weight-default; // Gedeeld: letterdikte — regular voor navigatie-items
+$dsn-menu-item-line-height: $dsn-text-line-height-md; // Gedeeld: regelhoogte
+$dsn-menu-item-padding-block: $dsn-space-block-md; // Gedeeld: verticale padding
+$dsn-menu-item-padding-inline: $dsn-space-inline-lg; // Gedeeld: horizontale padding
+$dsn-menu-item-gap: $dsn-space-inline-md; // Gedeeld: ruimte tussen icoon, label en badge
+$dsn-menu-item-min-block-size: $dsn-pointer-target-min-block-size; // Gedeeld: minimale raakbare hoogte — WCAG pointer target
+$dsn-menu-item-background-color: $dsn-color-transparent; // Gedeeld: standaard achtergrondkleur
+$dsn-menu-link-level-indent: $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: $dsn-text-font-weight-bold; // MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk
+$dsn-menu-gap-vertical: $dsn-space-block-md; // Kleine ruimte tussen items in verticale oriëntatie
+$dsn-menu-gap-horizontal: $dsn-space-inline-sm; // Ruimte tussen items in horizontale oriëntatie
+$dsn-modal-dialog-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
+$dsn-modal-dialog-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het dialoogvenster — bg-elevated benadrukt elevatie boven de pagina
+$dsn-modal-dialog-border-radius: $dsn-border-radius-lg; // Afgeronde hoeken van het dialoogvenster (12px)
+$dsn-modal-dialog-border-width: $dsn-border-width-thin; // Randbreedte van het dialoogvenster
+$dsn-modal-dialog-border-color: $dsn-color-neutral-border-subtle; // Randkleur van het dialoogvenster
+$dsn-modal-dialog-heading-font-family: $dsn-heading-font-family; // Lettertype van de dialoogvenster-heading
+$dsn-modal-dialog-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de dialoogvenster-heading
+$dsn-modal-dialog-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de dialoogvenster-heading
+$dsn-modal-dialog-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de dialoogvenster-heading
+$dsn-modal-dialog-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-modal-dialog-header-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de header (16px)
+$dsn-modal-dialog-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header (16px)
+$dsn-modal-dialog-body-padding-block: $dsn-space-block-3xl; // Verticale padding van de body (24px)
+$dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de body (16px)
+$dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
+$dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
+$dsn-modal-dialog-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
+$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Note left border width
+$dsn-note-column-gap: $dsn-space-inline-md; // Gap between icon and content
+$dsn-note-padding-block: $dsn-space-block-xl; // Vertical padding
+$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontal padding inline-end
+$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontal padding inline-start (after the border)
+$dsn-note-row-gap: $dsn-space-row-md; // Gap between heading and body
+$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
+$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Left border color for negative variant
+$dsn-note-negative-color: $dsn-color-negative-color-document; // Text color for negative variant
+$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icon color for negative variant
+$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Background color for neutral variant (default)
+$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Left border color for neutral variant (default)
+$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Text color for neutral variant (default)
+$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icon color for neutral variant (default)
+$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
+$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Left border color for positive variant
+$dsn-note-positive-color: $dsn-color-positive-color-document; // Text color for positive variant
+$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icon color for positive variant
+$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
+$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Left border color for warning variant
+$dsn-note-warning-color: $dsn-color-warning-color-document; // Text color for warning variant
+$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icon color for warning variant
+$dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
+$dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
+$dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
+$dsn-number-badge-padding-block: $dsn-space-none; // Verticale padding
+$dsn-number-badge-padding-inline: $dsn-space-inline-sm; // Horizontale padding
+$dsn-number-badge-border-radius: $dsn-border-radius-round; // Pill-vorm via volledig ronde border-radius
+$dsn-number-badge-border-width: $dsn-border-width-thin; // Transparante border voor forced-colors / High Contrast mode ondersteuning
+$dsn-number-badge-border-color: $dsn-color-transparent; // Transparant by default; zichtbaar in forced-colors / High Contrast mode
+$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant (wit op donkere achtergrond)
+$dsn-number-badge-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrondkleur voor negative variant
+$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant (wit op donkere achtergrond)
+$dsn-number-badge-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrondkleur voor positive variant
+$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant (wit op donkere achtergrond)
+$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
+$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
+$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
+$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant (wit op donkere achtergrond)
+$dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
+$dsn-option-label-color: $dsn-color-neutral-color-document;
+$dsn-option-label-font-family: $dsn-text-font-family-default;
+$dsn-option-label-font-size: $dsn-text-font-size-md;
+$dsn-option-label-font-weight: $dsn-text-font-weight-default;
+$dsn-option-label-line-height: $dsn-text-line-height-md;
+$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Ordered list text color
+$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Ordered list font family
+$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Ordered list font size
+$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Ordered list font weight
+$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Ordered list max width for readability
+$dsn-ordered-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Ordered list line height
+$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Ordered list bottom margin
+$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Number marker color
+$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Ordered list left indentation
+$dsn-page-body-padding-inline: $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: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter — merkkleur accent-1 als huisstijldrager
+$dsn-page-footer-border-block-start-width: $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: $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: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
+$dsn-page-footer-slot-gap: $dsn-space-block-xl; // Verticale witruimte tussen gestapelde slots op small viewport
+$dsn-page-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer-binnenbalk — zelfde schaal als PageHeader masthead en navbar
+$dsn-page-header-background-color: $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: $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: $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: $dsn-space-block-md; // Verticale padding van de header-binnenbalk
+$dsn-page-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header-binnenbalk — zelfde schaal als masthead en navbar
+$dsn-page-header-z-index: $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: $dsn-color-neutral-bg-document; // Masthead achtergrond — zelfde neutrale kleur als pagina-achtergrond
+$dsn-page-header-masthead-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de masthead
+$dsn-page-header-masthead-padding-inline: $dsn-space-inline-xl; // Horizontale padding masthead — zelfde als navbar
+$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
+$dsn-page-header-navbar-padding-inline: $dsn-space-inline-xl; // Horizontale padding navigatiebalk — zelfde als masthead
+$dsn-page-header-secondary-nav-gap: $dsn-space-column-3xl; // Witruimte tussen servicemenu (Menu) en zoekveld in de masthead
+$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
+$dsn-page-header-search-panel-padding-block: $dsn-space-block-md; // Verticale padding van het zoekpaneel
+$dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizontale padding van het zoekpaneel
+$dsn-page-header-compact-background-color: $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: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
+$dsn-page-header-compact-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar
+$dsn-paragraph-color: $dsn-color-neutral-color-document; // Paragraph text color
+$dsn-paragraph-font-family: $dsn-text-font-family-default; // Paragraph font family
+$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Paragraph font weight
+$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Paragraph max width for readability
+$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Default paragraph font size
+$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Default paragraph line height
+$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Default paragraph bottom margin
+$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Lead paragraph font size
+$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Lead paragraph line height
+$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Lead paragraph bottom margin
+$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Small print paragraph font size
+$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Small print paragraph line height
+$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Small print paragraph bottom margin
+$dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
+$dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
+$dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
+$dsn-popover-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de popover (8px) — ronder dan form inputs, passend bij het zwevende karakter
+$dsn-popover-z-index: $dsn-z-index-350; // Z-index van de popover — boven sticky headers (300), lager dan backdrop (400)
+$dsn-popover-heading-font-family: $dsn-heading-font-family; // Lettertype van de popover-heading
+$dsn-popover-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de popover-heading
+$dsn-popover-heading-font-size: $dsn-text-font-size-md; // Tekstgrootte van de popover-heading (compacter dan ModalDialog)
+$dsn-popover-heading-line-height: $dsn-text-line-height-md; // Regelafstand van de popover-heading
+$dsn-popover-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-popover-header-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de header (16px)
+$dsn-popover-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header (16px)
+$dsn-popover-body-padding-block: $dsn-space-block-xl; // Verticale padding van de body (16px)
+$dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de body (16px)
+$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
+$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
+$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
+$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
+$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
+$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
+$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
+$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
+$dsn-radio-group-border-width: $dsn-border-width-none; // No border by default for fieldset
+$dsn-radio-group-gap: $dsn-space-block-sm; // Space between radio options in the group
+$dsn-radio-group-margin: $dsn-space-none; // No margin by default for fieldset
+$dsn-radio-group-padding: $dsn-space-none; // No padding by default for fieldset
+$dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
+$dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
+$dsn-radio-border-width: $dsn-border-width-thin;
+$dsn-radio-active-border-width: $dsn-border-width-medium;
+$dsn-radio-checked-border-width: $dsn-border-width-thin;
+$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Inner circle color when checked
+$dsn-radio-focus-border-width: $dsn-border-width-medium;
+$dsn-radio-hover-border-width: $dsn-border-width-medium;
+$dsn-radio-invalid-border-width: $dsn-border-width-medium;
+$dsn-radio-checked-active-border-width: $dsn-border-width-medium;
+$dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
+$dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
+$dsn-radio-checked-hover-border-width: $dsn-border-width-medium;
+$dsn-radio-checked-hover-color: $dsn-color-neutral-inverse-color-default;
+$dsn-search-input-icon-gap: $dsn-space-text-md; // Gap between search icon and input text
+$dsn-select-icon-gap: $dsn-space-text-md; // Gap between chevron icon and select text
+$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Distance from the inline-end border to the chevron icon (8px)
+$dsn-skip-link-z-index: $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: $dsn-space-block-md; // Verticale padding van de skip-link
+$dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
+$dsn-skip-link-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de skip-link
+$dsn-skip-link-offset-block-start: $dsn-space-block-md; // Afstand van de bovenkant van het viewport bij focus
+$dsn-skip-link-offset-inline-start: $dsn-space-inline-md; // Afstand van de linkerkant (of rechterkant in RTL) van het viewport bij focus
+$dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie
+$dsn-spinner-color: $dsn-color-accent-1-color-default; // Kleur van de draaiende boog
+$dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
+$dsn-spinner-gap-size: $dsn-space-inline-md; // Ruimte tussen spinner en label
+$dsn-status-badge-border-color: $dsn-color-transparent; // Status badge border color (transparent by default; visible in forced-colors / High Contrast mode)
+$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Status badge border radius
+$dsn-status-badge-border-width: $dsn-border-width-thin; // Status badge border width
+$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Status badge font size
+$dsn-status-badge-gap: $dsn-space-text-sm; // Gap between icon and label
+$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Status badge line height
+$dsn-status-badge-padding-block: $dsn-space-block-xs; // Vertical padding
+$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontal padding
+$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
+$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Text color for negative variant
+$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Background color for neutral variant
+$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Text color for neutral variant
+$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
+$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Text color for positive variant
+$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
+$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Text color for warning variant
+$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Color of the row separator border
+$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Width of the row separator border
+$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontal gap between columns in the grid layout
+$dsn-summary-list-row-padding-block: $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: $dsn-color-neutral-color-document; // Text color of the key cell
+$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Bold weight distinguishes the key from the value visually
+$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Text color of the value cell
+$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Gap between multiple action links in a single row
+$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra space above the actions cell in the stacked (mobile) layout
+$dsn-table-caption-color: $dsn-color-neutral-color-document;
+$dsn-table-caption-font-family: $dsn-heading-font-family;
+$dsn-table-caption-font-size: $dsn-text-font-size-xl;
+$dsn-table-caption-font-weight: $dsn-heading-font-weight;
+$dsn-table-caption-line-height: $dsn-text-line-height-xl;
+$dsn-table-cell-padding-block-end: $dsn-space-block-lg;
+$dsn-table-cell-padding-block-start: $dsn-space-block-lg;
+$dsn-table-cell-padding-inline-end: $dsn-space-inline-xl;
+$dsn-table-cell-padding-inline-start: $dsn-space-inline-xl;
+$dsn-table-header-border-block-end-color: $dsn-color-neutral-border-subtle;
+$dsn-table-header-border-block-end-width: $dsn-border-width-medium;
+$dsn-table-header-color: $dsn-color-neutral-color-document;
+$dsn-table-header-cell-font-weight: $dsn-text-font-weight-bold;
+$dsn-table-row-border-block-end-color: $dsn-color-neutral-border-subtle;
+$dsn-table-row-border-block-end-width: $dsn-border-width-thin;
+$dsn-table-footer-border-block-start-color: $dsn-color-neutral-border-subtle;
+$dsn-table-footer-border-block-start-width: $dsn-border-width-medium;
+$dsn-table-footer-color: $dsn-color-neutral-color-document;
+$dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
+$dsn-table-wrapper-background-color: $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: $dsn-color-shadow-scroll; // Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen
+$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Text area minimum height
+$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Text area minimum width
+$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Text area focus box shadow spread (creates thicker border effect)
+$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Text area hover box shadow spread (creates thicker border effect)
+$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Text area invalid box shadow spread (creates thicker border effect)
+$dsn-text-input-column-gap: $dsn-space-text-lg; // Gap between text and icons (for future icon support)
+$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Text input minimum height (WCAG touch target)
+$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Text input minimum width (WCAG touch target)
+$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Text input focus box shadow spread (creates thicker border effect)
+$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Text input hover box shadow spread (creates thicker border effect)
+$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Text input invalid box shadow spread (creates thicker border effect)
+$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the clock button (4px)
+$dsn-time-input-icon-gap: $dsn-space-text-md; // Gap between clock button and input text
+$dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
+$dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
+$dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
+$dsn-unordered-list-font-weight: $dsn-text-font-weight-default; // Unordered list font weight
+$dsn-unordered-list-max-inline-size: $dsn-text-max-inline-size; // Unordered list max width for readability
+$dsn-unordered-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list line height
+$dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
+$dsn-unordered-list-marker-color: $dsn-color-accent-1-color-default; // Bullet marker color
+$dsn-unordered-list-padding-inline-start: $dsn-space-inline-3xl; // Unordered list left indentation
+$dsn-heading-level-1-color: $dsn-heading-color; // Heading 1 text color
+$dsn-heading-level-2-color: $dsn-heading-color; // Heading 2 text color
+$dsn-heading-level-3-color: $dsn-heading-color; // Heading 3 text color
+$dsn-heading-level-4-color: $dsn-heading-color; // Heading 4 text color
+$dsn-heading-level-5-color: $dsn-heading-color; // Heading 5 text color
+$dsn-heading-level-6-color: $dsn-heading-color; // Heading 6 text color
+$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Form control hover accent color
+$dsn-form-control-hover-color: $dsn-form-control-color; // Form control hover text color
+$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Form control focus background
+$dsn-form-control-focus-color: $dsn-form-control-color; // Form control focus text color
+$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Form control active accent color
+$dsn-form-control-active-color: $dsn-form-control-color; // Form control active text color
+$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Form control accent color (checkboxes, radio buttons)
+$dsn-alert-icon-size: $dsn-icon-size-xl; // Alert icon size (also used as grid column width)
+$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Background color for info variant (default)
+$dsn-alert-info-border-color: $dsn-color-info-border-default; // Border color for info variant (default)
+$dsn-alert-info-color: $dsn-color-info-color-document; // Text color for info variant (default)
+$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icon color for info variant (default)
+$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Link text color
+$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Link hover color
+$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Link active color
+$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Separator icon size — sm (kleiner dan terug-icoon)
+$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Back-icon size — sm (consistent met Link size small)
+$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Default button border
+$dsn-button-default-color: $dsn-color-action-1-color-default; // Default button text/icon color
+$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Default button active background
+$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Default button active border
+$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Default button active text/icon color
+$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Default button hover background
+$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Default button hover border
+$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Default button hover text/icon color
+$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Strong button background
+$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Strong button text/icon color
+$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Strong button active background
+$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Strong button active text/icon color
+$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Strong button hover background
+$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Strong button hover text/icon color
+$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Subtle button text/icon color
+$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Subtle button active background
+$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Subtle button active text/icon color
+$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Subtle button hover background
+$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Subtle button hover text/icon color
+$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Default button icon size
+$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Large button icon size
+$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Small button icon size
+$dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
+$dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
+$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
+$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
+$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
+$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font weight for the legend (reuses form field label)
+$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line height for the legend (reuses form field label)
+$dsn-checkbox-group-legend-margin-block-end: $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: $dsn-form-control-background-color;
+$dsn-checkbox-border-color: $dsn-form-control-border-color;
+$dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
+$dsn-checkbox-active-border-color: $dsn-form-control-active-border-color;
+$dsn-checkbox-disabled-background-color: $dsn-form-control-disabled-background-color;
+$dsn-checkbox-disabled-border-color: $dsn-form-control-disabled-border-color;
+$dsn-checkbox-focus-border-color: $dsn-form-control-focus-border-color;
+$dsn-checkbox-hover-background-color: $dsn-form-control-hover-background-color;
+$dsn-checkbox-hover-border-color: $dsn-form-control-hover-border-color;
+$dsn-checkbox-invalid-background-color: $dsn-form-control-invalid-background-color;
+$dsn-checkbox-invalid-border-color: $dsn-form-control-invalid-border-color;
+$dsn-checkbox-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
+$dsn-checkbox-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
+$dsn-checkbox-checked-disabled-color: $dsn-form-control-disabled-color;
+$dsn-checkbox-checked-focus-border-color: $dsn-form-control-focus-border-color;
+$dsn-checkbox-indeterminate-disabled-background-color: $dsn-form-control-disabled-accent-color;
+$dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-border-color;
+$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
+$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
+$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
+$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
+$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
+$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
+$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
+$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
+$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
+$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
+$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
+$dsn-file-input-font-weight: $dsn-form-control-font-weight; // File input font weight
+$dsn-file-input-line-height: $dsn-form-control-line-height; // File input line height
+$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Muted text color for disabled state
+$dsn-file-box-shadow-hover: $dsn-box-shadow-md; // Hogere elevatie bij hover — zelfde als Card hover
+$dsn-file-media-icon-size: $dsn-icon-size-md;
+$dsn-file-status-icon-size: $dsn-icon-size-md;
+$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
+$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icon size for positive and warning variants
+$dsn-link-color: $dsn-color-action-2-color-default; // Link text color
+$dsn-link-icon-size: $dsn-icon-size-md; // Link icon size
+$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Link underline color
+$dsn-link-active-color: $dsn-color-action-2-color-active; // Link active text color
+$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Link hover text color
+$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Default link icon size
+$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Large link icon size
+$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Small link icon size
+$dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
+$dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
+$dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
+$dsn-menu-item-hover-background-color: $dsn-color-action-2-bg-hover; // Gedeeld: hover achtergrondkleur
+$dsn-menu-item-active-color: $dsn-color-action-2-color-active; // Gedeeld: active tekstkleur
+$dsn-menu-item-active-background-color: $dsn-color-action-2-bg-active; // Gedeeld: active achtergrondkleur
+$dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina
+$dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
+$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
+$dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
+$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina — blijft bg-active
+$dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina
+$dsn-menu-link-current-active-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: active achtergrondkleur voor de actieve pagina
+$dsn-modal-dialog-box-shadow: $dsn-box-shadow-lg; // Schaduw van het dialoogvenster — hoogste elevatie (lg)
+$dsn-modal-dialog-heading-color: $dsn-heading-color; // Kleur van de dialoogvenster-heading
+$dsn-note-icon-size: $dsn-icon-size-xl; // Note icon size (also used as grid column width)
+$dsn-note-info-background-color: $dsn-color-info-bg-default; // Background color for info variant
+$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Left border color for info variant
+$dsn-note-info-color: $dsn-color-info-color-document; // Text color for info variant
+$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icon color for info variant
+$dsn-option-label-disabled-color: $dsn-form-control-disabled-color;
+$dsn-popover-box-shadow: $dsn-box-shadow-md; // Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals
+$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
+$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
+$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
+$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
+$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font weight for the legend (reuses form field label)
+$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line height for the legend (reuses form field label)
+$dsn-radio-group-legend-margin-block-end: $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: $dsn-form-control-background-color;
+$dsn-radio-border-color: $dsn-form-control-border-color;
+$dsn-radio-color: $dsn-form-control-border-color; // Inner circle color in default state
+$dsn-radio-active-background-color: $dsn-form-control-active-background-color;
+$dsn-radio-active-border-color: $dsn-form-control-active-border-color;
+$dsn-radio-active-color: $dsn-form-control-active-border-color;
+$dsn-radio-disabled-background-color: $dsn-form-control-disabled-background-color;
+$dsn-radio-disabled-border-color: $dsn-form-control-disabled-border-color;
+$dsn-radio-disabled-color: $dsn-form-control-disabled-border-color;
+$dsn-radio-focus-border-color: $dsn-form-control-focus-border-color;
+$dsn-radio-focus-color: $dsn-form-control-focus-border-color;
+$dsn-radio-hover-background-color: $dsn-form-control-hover-background-color;
+$dsn-radio-hover-border-color: $dsn-form-control-hover-border-color;
+$dsn-radio-hover-color: $dsn-form-control-hover-border-color;
+$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
+$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
+$dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
+$dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
+$dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
+$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Inner circle color - dark text color for contrast against disabled accent background
+$dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
+$dsn-search-input-icon-size: $dsn-icon-size-md; // Search input icon size
+$dsn-select-icon-color: $dsn-color-action-1-color-default; // Chevron icon color — same as subtle button icon color
+$dsn-select-icon-size: $dsn-icon-size-md; // Chevron-down icon size — matches the medium icon size
+$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Status badge icon size
+$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Background color for info variant
+$dsn-status-badge-info-color: $dsn-color-info-color-default; // Text color for info variant
+$dsn-text-area-background-color: $dsn-form-control-background-color; // Text area background color
+$dsn-text-area-border-color: $dsn-form-control-border-color; // Text area border color
+$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Text area border radius
+$dsn-text-area-border-width: $dsn-form-control-border-width; // Text area border width
+$dsn-text-area-color: $dsn-form-control-color; // Text area text color
+$dsn-text-area-font-family: $dsn-form-control-font-family; // Text area font family
+$dsn-text-area-font-size: $dsn-form-control-font-size; // Text area font size
+$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Text area font weight
+$dsn-text-area-line-height: $dsn-form-control-line-height; // Text area line height
+$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Text area bottom padding
+$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Text area top padding
+$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Text area right padding
+$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Text area left padding
+$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Text area disabled background
+$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Text area disabled border
+$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Text area disabled text color
+$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Text area focus border
+$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Text area placeholder color
+$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Text area invalid background
+$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Text area invalid border
+$dsn-text-area-invalid-color: $dsn-form-control-color; // Text area invalid text color
+$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Text area read-only background
+$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Text area read-only border
+$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Text area read-only text color
+$dsn-text-input-background-color: $dsn-form-control-background-color; // Text input background color
+$dsn-text-input-border-color: $dsn-form-control-border-color; // Text input border color
+$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Text input border radius
+$dsn-text-input-border-width: $dsn-form-control-border-width; // Text input border width
+$dsn-text-input-color: $dsn-form-control-color; // Text input text color
+$dsn-text-input-font-family: $dsn-form-control-font-family; // Text input font family
+$dsn-text-input-font-size: $dsn-form-control-font-size; // Text input font size
+$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Text input font weight
+$dsn-text-input-line-height: $dsn-form-control-line-height; // Text input line height
+$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Text input bottom padding
+$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Text input top padding
+$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Text input right padding
+$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Text input left padding
+$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Text input disabled background
+$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Text input disabled border
+$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Text input disabled text color
+$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Text input focus border
+$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Text input placeholder color
+$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Text input invalid background
+$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Text input invalid border
+$dsn-text-input-invalid-color: $dsn-form-control-color; // Text input invalid text color
+$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Text input read-only background
+$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Text input read-only border
+$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Text input read-only text color
+$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Clock icon color (interactive, action color)
+$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Clock icon hover color
+$dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
+$dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
+$dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
+$dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background-color;
+$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
+$dsn-checkbox-checked-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-checkbox-indeterminate-background-color: $dsn-form-control-accent-color;
+$dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-accent-color;
+$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
+$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
+$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
+$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
+$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
+$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
+$dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
+$dsn-radio-checked-focus-color: $dsn-form-control-focus-color;
+$dsn-radio-checked-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-search-input-padding-inline-start-with-icon: calc($dsn-search-input-icon-size + $dsn-search-input-icon-gap + $dsn-form-control-padding-inline-start); // Left padding when icon is present
+$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); // Right padding when icon is present: icon-size + gap + inset
+$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Text area focus background
+$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
+$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
+$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
+$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
+$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
+$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
+$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
+$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
+$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color