@dsn-starter-kit/design-tokens 4.0.0 → 4.2.0

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

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --dsn-text-font-family-default: IBM Plex Sans, sans-serif; /** Standaard lettertype voor bodytekst */
-  --dsn-text-font-family-monospace: IBM Plex Mono, monospace; /** Monospace lettertype voor code */
+  --dsn-text-font-family-default: Fira Sans, sans-serif; /** Standaard lettertype voor bodytekst */
+  --dsn-text-font-family-monospace: Fira Mono, monospace; /** Monospace lettertype voor code */
   --dsn-text-font-weight-default: 400; /** Regulier gewicht */
   --dsn-text-font-weight-bold: 700; /** Vet gewicht */
   --dsn-text-max-inline-size: 65ch; /** Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten) */
@@ -22,7 +22,7 @@
   --dsn-text-font-size-2xl: 2rem; /** 2XL text - 32px (fixed) */
   --dsn-text-font-size-3xl: 2.5rem; /** 3XL text - 40px (fixed) */
   --dsn-text-font-size-4xl: 3rem; /** 4XL text - 48px (fixed) */
-  --dsn-heading-font-family: IBM Plex Sans, sans-serif; /** Lettertype voor koppen */
+  --dsn-heading-font-family: Fira Sans, sans-serif; /** Lettertype voor koppen */
   --dsn-heading-font-weight: 700; /** Vet gewicht voor koppen */
   --dsn-space-none: 0px; /** Geen afstand */
   --dsn-space-base: 0.5rem; /** 8px - Basiseenheid voor het 8pt-rastersysteem */
@@ -124,171 +124,171 @@
   --dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); /** Elementen die het scherm verlaten (accelereren) */
   --dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); /** Elementen die van positie wisselen */
   --dsn-transition-easing-linear: linear; /** Progress bars, loaders */
-  --dsn-color-neutral-bg-document: #111111; /** Documentachtergrond */
-  --dsn-color-neutral-bg-elevated: #111111; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-neutral-bg-subtle: #040404; /** Subtiele achtergrond */
-  --dsn-color-neutral-bg-default: #1d1d1d; /** Standaard achtergrond */
-  --dsn-color-neutral-bg-hover: #262626; /** Achtergrond in hover state */
-  --dsn-color-neutral-bg-active: #2e2e2e; /** Achtergrond in active state */
-  --dsn-color-neutral-border-subtle: #3e3e3e; /** Subtiele rand */
-  --dsn-color-neutral-border-default: #686868; /** Standaard rand */
-  --dsn-color-neutral-border-hover: #727272; /** Rand in hover state */
-  --dsn-color-neutral-border-active: #7c7c7c; /** Rand in active state */
-  --dsn-color-neutral-color-default: #ababab; /** Standaard tekstkleur */
-  --dsn-color-neutral-color-hover: #bbbbbb; /** Tekst in hover state */
-  --dsn-color-neutral-color-active: #cccccc; /** Tekst in active state */
-  --dsn-color-neutral-color-subtle: #8b8b8b; /** Subtiele tekstkleur */
-  --dsn-color-neutral-color-document: #f1f1f1; /** Documenttekstkleur */
-  --dsn-color-accent-1-bg-document: #001126; /** Documentachtergrond */
-  --dsn-color-accent-1-bg-elevated: #001126; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-accent-1-bg-subtle: #000409; /** Subtiele achtergrond */
-  --dsn-color-accent-1-bg-default: #001d40; /** Standaard achtergrond */
-  --dsn-color-accent-1-bg-hover: #002551; /** Achtergrond in hover state */
-  --dsn-color-accent-1-bg-active: #002d62; /** Achtergrond in active state */
-  --dsn-color-accent-1-border-subtle: #003b81; /** Subtiele rand */
-  --dsn-color-accent-1-border-default: #3169ad; /** Standaard rand */
-  --dsn-color-accent-1-border-hover: #3f74b2; /** Rand in hover state */
-  --dsn-color-accent-1-border-active: #4e7fb8; /** Rand in active state */
-  --dsn-color-accent-1-color-default: #8faed2; /** Standaard tekstkleur */
-  --dsn-color-accent-1-color-hover: #a5bedb; /** Tekst in hover state */
-  --dsn-color-accent-1-color-active: #bbcee4; /** Tekst in active state */
-  --dsn-color-accent-1-color-subtle: #648ec1; /** Subtiele tekstkleur */
-  --dsn-color-accent-1-color-document: #ecf1f7; /** Documenttekstkleur */
-  --dsn-color-negative-bg-document: #1c0000; /** Documentachtergrond */
-  --dsn-color-negative-bg-elevated: #1c0000; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-negative-bg-subtle: #060000; /** Subtiele achtergrond */
-  --dsn-color-negative-bg-default: #2e0000; /** Standaard achtergrond */
-  --dsn-color-negative-bg-hover: #3d0000; /** Achtergrond in hover state */
-  --dsn-color-negative-bg-active: #4c0000; /** Achtergrond in active state */
-  --dsn-color-negative-border-subtle: #820000; /** Subtiele rand */
-  --dsn-color-negative-border-default: #e74848; /** Standaard rand */
-  --dsn-color-negative-border-hover: #ec6d6d; /** Rand in hover state */
-  --dsn-color-negative-border-active: #f19191; /** Rand in active state */
-  --dsn-color-negative-color-default: #f9b1b1; /** Standaard tekstkleur */
-  --dsn-color-negative-color-hover: #fbc3c3; /** Tekst in hover state */
-  --dsn-color-negative-color-active: #fcd5d5; /** Tekst in active state */
-  --dsn-color-negative-color-subtle: #eb8181; /** Subtiele tekstkleur */
-  --dsn-color-negative-color-document: #feeded; /** Documenttekstkleur */
-  --dsn-color-positive-bg-document: #001509; /** Documentachtergrond */
-  --dsn-color-positive-bg-elevated: #001509; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-positive-bg-subtle: #000802; /** Subtiele achtergrond */
-  --dsn-color-positive-bg-default: #002312; /** Standaard achtergrond */
-  --dsn-color-positive-bg-hover: #003019; /** Achtergrond in hover state */
-  --dsn-color-positive-bg-active: #003e1f; /** Achtergrond in active state */
-  --dsn-color-positive-border-subtle: #00481b; /** Subtiele rand */
-  --dsn-color-positive-border-default: #1ba158; /** Standaard rand */
-  --dsn-color-positive-border-hover: #3bb470; /** Rand in hover state */
-  --dsn-color-positive-border-active: #5bc788; /** Rand in active state */
-  --dsn-color-positive-color-default: #8ad3a6; /** Standaard tekstkleur */
-  --dsn-color-positive-color-hover: #a3dcba; /** Tekst in hover state */
-  --dsn-color-positive-color-active: #bce5ce; /** Tekst in active state */
-  --dsn-color-positive-color-subtle: #6ac495; /** Subtiele tekstkleur */
-  --dsn-color-positive-color-document: #e4f5ea; /** Documenttekstkleur */
-  --dsn-color-warning-bg-document: #190f04; /** Documentachtergrond */
-  --dsn-color-warning-bg-elevated: #190f04; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-warning-bg-subtle: #0b0501; /** Subtiele achtergrond */
-  --dsn-color-warning-bg-default: #2b1a09; /** Standaard achtergrond */
-  --dsn-color-warning-bg-hover: #3c250d; /** Achtergrond in hover state */
-  --dsn-color-warning-bg-active: #4d2f10; /** Achtergrond in active state */
-  --dsn-color-warning-border-subtle: #5a3511; /** Subtiele rand */
-  --dsn-color-warning-border-default: #d37f25; /** Standaard rand */
-  --dsn-color-warning-border-hover: #de9843; /** Rand in hover state */
-  --dsn-color-warning-border-active: #e9b062; /** Rand in active state */
-  --dsn-color-warning-color-default: #ffb46b; /** Standaard tekstkleur */
-  --dsn-color-warning-color-hover: #ffc38b; /** Tekst in hover state */
-  --dsn-color-warning-color-active: #ffd2aa; /** Tekst in active state */
-  --dsn-color-warning-color-subtle: #f3a453; /** Subtiele tekstkleur */
-  --dsn-color-warning-color-document: #ffeedd; /** Documenttekstkleur */
-  --dsn-color-neutral-inverse-bg-document: #fbfbfb; /** Documentachtergrond (inverse) */
-  --dsn-color-neutral-inverse-bg-elevated: #fbfbfb; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-neutral-inverse-bg-subtle: #f1f1f1; /** Subtiele achtergrond (inverse) */
-  --dsn-color-neutral-inverse-bg-default: #ababab; /** Standaard achtergrond (inverse) */
-  --dsn-color-neutral-inverse-bg-hover: #bbbbbb; /** Achtergrond in hover state (inverse) */
-  --dsn-color-neutral-inverse-bg-active: #cccccc; /** Achtergrond in active state (inverse) */
-  --dsn-color-neutral-inverse-border-subtle: #bfbfbf; /** Subtiele rand (inverse) */
-  --dsn-color-neutral-inverse-border-default: #3e3e3e; /** Standaard rand (inverse) */
-  --dsn-color-neutral-inverse-border-hover: #2e2e2e; /** Rand in hover state (inverse) */
-  --dsn-color-neutral-inverse-border-active: #1d1d1d; /** Rand in active state (inverse) */
-  --dsn-color-neutral-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
-  --dsn-color-neutral-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
-  --dsn-color-neutral-inverse-color-active: #000000; /** Tekst in active state (inverse) */
-  --dsn-color-neutral-inverse-color-subtle: #3e3e3e; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-neutral-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
-  --dsn-color-accent-1-inverse-bg-document: #dcebf9; /** Documentachtergrond (inverse) */
-  --dsn-color-accent-1-inverse-bg-elevated: #dcebf9; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-accent-1-inverse-bg-subtle: #ecf1f7; /** Subtiele achtergrond (inverse) */
-  --dsn-color-accent-1-inverse-bg-default: #8faed2; /** Standaard achtergrond (inverse) */
-  --dsn-color-accent-1-inverse-bg-hover: #a5bedb; /** Achtergrond in hover state (inverse) */
-  --dsn-color-accent-1-inverse-bg-active: #bbcee4; /** Achtergrond in active state (inverse) */
-  --dsn-color-accent-1-inverse-border-subtle: #b0c6df; /** Subtiele rand (inverse) */
-  --dsn-color-accent-1-inverse-border-default: #003b81; /** Standaard rand (inverse) */
-  --dsn-color-accent-1-inverse-border-hover: #002d62; /** Rand in hover state (inverse) */
-  --dsn-color-accent-1-inverse-border-active: #001d40; /** Rand in active state (inverse) */
-  --dsn-color-accent-1-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
-  --dsn-color-accent-1-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
-  --dsn-color-accent-1-inverse-color-active: #000000; /** Tekst in active state (inverse) */
-  --dsn-color-accent-1-inverse-color-subtle: #003b81; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-accent-1-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
-  --dsn-color-info-inverse-bg-document: #dcebf9; /** Documentachtergrond (inverse) */
-  --dsn-color-info-inverse-bg-elevated: #dcebf9; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-info-inverse-bg-subtle: #ecf1f7; /** Subtiele achtergrond (inverse) */
-  --dsn-color-info-inverse-bg-default: #8faed2; /** Standaard achtergrond (inverse) */
-  --dsn-color-info-inverse-bg-hover: #a5bedb; /** Achtergrond in hover state (inverse) */
-  --dsn-color-info-inverse-bg-active: #bbcee4; /** Achtergrond in active state (inverse) */
-  --dsn-color-info-inverse-border-subtle: #b0c6df; /** Subtiele rand (inverse) */
-  --dsn-color-info-inverse-border-default: #003b81; /** Standaard rand (inverse) */
-  --dsn-color-info-inverse-border-hover: #002d62; /** Rand in hover state (inverse) */
-  --dsn-color-info-inverse-border-active: #001d40; /** Rand in active state (inverse) */
-  --dsn-color-info-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
-  --dsn-color-info-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
-  --dsn-color-info-inverse-color-active: #000000; /** Tekst in active state (inverse) */
-  --dsn-color-info-inverse-color-subtle: #003b81; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-info-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
-  --dsn-color-negative-inverse-bg-document: #fcdada; /** Documentachtergrond (inverse) */
-  --dsn-color-negative-inverse-bg-elevated: #fcdada; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-negative-inverse-bg-subtle: #feeded; /** Subtiele achtergrond (inverse) */
-  --dsn-color-negative-inverse-bg-default: #f9b1b1; /** Standaard achtergrond (inverse) */
-  --dsn-color-negative-inverse-bg-hover: #fbc3c3; /** Achtergrond in hover state (inverse) */
-  --dsn-color-negative-inverse-bg-active: #fcd5d5; /** Achtergrond in active state (inverse) */
-  --dsn-color-negative-inverse-border-subtle: #f3abab; /** Subtiele rand (inverse) */
-  --dsn-color-negative-inverse-border-default: #820000; /** Standaard rand (inverse) */
-  --dsn-color-negative-inverse-border-hover: #4c0000; /** Rand in hover state (inverse) */
-  --dsn-color-negative-inverse-border-active: #2e0000; /** Rand in active state (inverse) */
-  --dsn-color-negative-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
-  --dsn-color-negative-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
-  --dsn-color-negative-inverse-color-active: #000000; /** Tekst in active state (inverse) */
-  --dsn-color-negative-inverse-color-subtle: #820000; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-negative-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
-  --dsn-color-positive-inverse-bg-document: #cce8d7; /** Documentachtergrond (inverse) */
-  --dsn-color-positive-inverse-bg-elevated: #cce8d7; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-positive-inverse-bg-subtle: #e4f5ea; /** Subtiele achtergrond (inverse) */
-  --dsn-color-positive-inverse-bg-default: #8ad3a6; /** Standaard achtergrond (inverse) */
-  --dsn-color-positive-inverse-bg-hover: #a3dcba; /** Achtergrond in hover state (inverse) */
-  --dsn-color-positive-inverse-bg-active: #bce5ce; /** Achtergrond in active state (inverse) */
-  --dsn-color-positive-inverse-border-subtle: #7dca9e; /** Subtiele rand (inverse) */
-  --dsn-color-positive-inverse-border-default: #00481b; /** Standaard rand (inverse) */
-  --dsn-color-positive-inverse-border-hover: #003e1f; /** Rand in hover state (inverse) */
-  --dsn-color-positive-inverse-border-active: #002312; /** Rand in active state (inverse) */
-  --dsn-color-positive-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
-  --dsn-color-positive-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
-  --dsn-color-positive-inverse-color-active: #000000; /** Tekst in active state (inverse) */
-  --dsn-color-positive-inverse-color-subtle: #00481b; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-positive-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
-  --dsn-color-warning-inverse-bg-document: #ffeac6; /** Documentachtergrond (inverse) */
-  --dsn-color-warning-inverse-bg-elevated: #ffeac6; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-warning-inverse-bg-subtle: #ffeedd; /** Subtiele achtergrond (inverse) */
-  --dsn-color-warning-inverse-bg-default: #ffb46b; /** Standaard achtergrond (inverse) */
-  --dsn-color-warning-inverse-bg-hover: #ffc38b; /** Achtergrond in hover state (inverse) */
-  --dsn-color-warning-inverse-bg-active: #ffd2aa; /** Achtergrond in active state (inverse) */
-  --dsn-color-warning-inverse-border-subtle: #ffa754; /** Subtiele rand (inverse) */
-  --dsn-color-warning-inverse-border-default: #5a3511; /** Standaard rand (inverse) */
-  --dsn-color-warning-inverse-border-hover: #4d2f10; /** Rand in hover state (inverse) */
-  --dsn-color-warning-inverse-border-active: #2b1a09; /** Rand in active state (inverse) */
-  --dsn-color-warning-inverse-color-default: #000000; /** Standaard tekstkleur (inverse) */
-  --dsn-color-warning-inverse-color-hover: #000000; /** Tekst in hover state (inverse) */
-  --dsn-color-warning-inverse-color-active: #000000; /** Tekst in active state (inverse) */
-  --dsn-color-warning-inverse-color-subtle: #5a3511; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-warning-inverse-color-document: #000000; /** Documenttekstkleur (inverse) */
+  --dsn-color-neutral-bg-document: oklch(0.12 0 0); /** Documentachtergrond */
+  --dsn-color-neutral-bg-elevated: oklch(0.155 0 0); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-bg-subtle: oklch(0.175 0 0); /** Subtiele achtergrond */
+  --dsn-color-neutral-bg-default: oklch(0.23 0 0); /** Standaard achtergrond */
+  --dsn-color-neutral-bg-hover: oklch(0.26 0 0); /** Achtergrond in hover state */
+  --dsn-color-neutral-bg-active: oklch(0.29 0 0); /** Achtergrond in active state */
+  --dsn-color-neutral-border-subtle: oklch(0.38 0 0); /** Subtiele rand */
+  --dsn-color-neutral-border-default: oklch(0.52 0 0); /** Standaard rand */
+  --dsn-color-neutral-border-hover: oklch(0.56 0 0); /** Rand in hover state */
+  --dsn-color-neutral-border-active: oklch(0.6 0 0); /** Rand in active state */
+  --dsn-color-neutral-color-default: oklch(0.72 0 0); /** Standaard tekstkleur */
+  --dsn-color-neutral-color-hover: oklch(0.76 0 0); /** Tekst in hover state */
+  --dsn-color-neutral-color-active: oklch(0.8 0 0); /** Tekst in active state */
+  --dsn-color-neutral-color-subtle: oklch(0.68 0 0); /** Subtiele tekstkleur */
+  --dsn-color-neutral-color-document: oklch(0.93 0 0); /** Documenttekstkleur */
+  --dsn-color-accent-1-bg-document: oklch(0.12 0.02 255.8); /** Documentachtergrond */
+  --dsn-color-accent-1-bg-elevated: oklch(0.155 0.023 255.8); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-accent-1-bg-subtle: oklch(0.175 0.026 255.8); /** Subtiele achtergrond */
+  --dsn-color-accent-1-bg-default: oklch(0.23 0.029 255.8); /** Standaard achtergrond */
+  --dsn-color-accent-1-bg-hover: oklch(0.26 0.033 255.8); /** Achtergrond in hover state */
+  --dsn-color-accent-1-bg-active: oklch(0.29 0.036 255.8); /** Achtergrond in active state */
+  --dsn-color-accent-1-border-subtle: oklch(0.38 0.073 255.8); /** Subtiele rand */
+  --dsn-color-accent-1-border-default: oklch(0.52 0.163 255.8); /** Standaard rand */
+  --dsn-color-accent-1-border-hover: oklch(0.56 0.19 255.8); /** Rand in hover state */
+  --dsn-color-accent-1-border-active: oklch(0.6 0.203 255.8); /** Rand in active state */
+  --dsn-color-accent-1-color-default: oklch(0.72 0.131 255.8); /** Standaard tekstkleur */
+  --dsn-color-accent-1-color-hover: oklch(0.76 0.125 255.8); /** Tekst in hover state */
+  --dsn-color-accent-1-color-active: oklch(0.8 0.102 255.8); /** Tekst in active state */
+  --dsn-color-accent-1-color-subtle: oklch(0.68 0.133 255.8); /** Subtiele tekstkleur */
+  --dsn-color-accent-1-color-document: oklch(0.93 0.024 255.8); /** Documenttekstkleur */
+  --dsn-color-negative-bg-document: oklch(0.12 0.029 29.2); /** Documentachtergrond */
+  --dsn-color-negative-bg-elevated: oklch(0.155 0.034 29.2); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-negative-bg-subtle: oklch(0.175 0.039 29.2); /** Subtiele achtergrond */
+  --dsn-color-negative-bg-default: oklch(0.23 0.043 29.2); /** Standaard achtergrond */
+  --dsn-color-negative-bg-hover: oklch(0.26 0.048 29.2); /** Achtergrond in hover state */
+  --dsn-color-negative-bg-active: oklch(0.29 0.053 29.2); /** Achtergrond in active state */
+  --dsn-color-negative-border-subtle: oklch(0.38 0.108 29.2); /** Subtiele rand */
+  --dsn-color-negative-border-default: oklch(0.54 0.222 29.2); /** Standaard rand */
+  --dsn-color-negative-border-hover: oklch(0.58 0.238 29.2); /** Rand in hover state */
+  --dsn-color-negative-border-active: oklch(0.62 0.254 29.2); /** Rand in active state */
+  --dsn-color-negative-color-default: oklch(0.72 0.175 29.2); /** Standaard tekstkleur */
+  --dsn-color-negative-color-hover: oklch(0.76 0.143 29.2); /** Tekst in hover state */
+  --dsn-color-negative-color-active: oklch(0.8 0.115 29.2); /** Tekst in active state */
+  --dsn-color-negative-color-subtle: oklch(0.68 0.197 29.2); /** Subtiele tekstkleur */
+  --dsn-color-negative-color-document: oklch(0.93 0.036 29.2); /** Documenttekstkleur */
+  --dsn-color-positive-bg-document: oklch(0.12 0.019 148.2); /** Documentachtergrond */
+  --dsn-color-positive-bg-elevated: oklch(0.155 0.022 148.2); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-positive-bg-subtle: oklch(0.175 0.025 148.2); /** Subtiele achtergrond */
+  --dsn-color-positive-bg-default: oklch(0.23 0.028 148.2); /** Standaard achtergrond */
+  --dsn-color-positive-bg-hover: oklch(0.26 0.031 148.2); /** Achtergrond in hover state */
+  --dsn-color-positive-bg-active: oklch(0.29 0.034 148.2); /** Achtergrond in active state */
+  --dsn-color-positive-border-subtle: oklch(0.38 0.07 148.2); /** Subtiele rand */
+  --dsn-color-positive-border-default: oklch(0.52 0.15 148.2); /** Standaard rand */
+  --dsn-color-positive-border-hover: oklch(0.56 0.161 148.2); /** Rand in hover state */
+  --dsn-color-positive-border-active: oklch(0.6 0.173 148.2); /** Rand in active state */
+  --dsn-color-positive-color-default: oklch(0.72 0.125 148.2); /** Standaard tekstkleur */
+  --dsn-color-positive-color-hover: oklch(0.76 0.135 148.2); /** Tekst in hover state */
+  --dsn-color-positive-color-active: oklch(0.8 0.145 148.2); /** Tekst in active state */
+  --dsn-color-positive-color-subtle: oklch(0.68 0.127 148.2); /** Subtiele tekstkleur */
+  --dsn-color-positive-color-document: oklch(0.93 0.023 148.2); /** Documenttekstkleur */
+  --dsn-color-warning-bg-document: oklch(0.12 0.023 58.3); /** Documentachtergrond */
+  --dsn-color-warning-bg-elevated: oklch(0.155 0.026 58.3); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-warning-bg-subtle: oklch(0.175 0.03 58.3); /** Subtiele achtergrond */
+  --dsn-color-warning-bg-default: oklch(0.23 0.034 58.3); /** Standaard achtergrond */
+  --dsn-color-warning-bg-hover: oklch(0.26 0.038 58.3); /** Achtergrond in hover state */
+  --dsn-color-warning-bg-active: oklch(0.29 0.042 58.3); /** Achtergrond in active state */
+  --dsn-color-warning-border-subtle: oklch(0.38 0.085 58.3); /** Subtiele rand */
+  --dsn-color-warning-border-default: oklch(0.525 0.125 58.3); /** Standaard rand */
+  --dsn-color-warning-border-hover: oklch(0.565 0.135 58.3); /** Rand in hover state */
+  --dsn-color-warning-border-active: oklch(0.605 0.144 58.3); /** Rand in active state */
+  --dsn-color-warning-color-default: oklch(0.72 0.151 58.3); /** Standaard tekstkleur */
+  --dsn-color-warning-color-hover: oklch(0.76 0.163 58.3); /** Tekst in hover state */
+  --dsn-color-warning-color-active: oklch(0.8 0.138 58.3); /** Tekst in active state */
+  --dsn-color-warning-color-subtle: oklch(0.68 0.154 58.3); /** Subtiele tekstkleur */
+  --dsn-color-warning-color-document: oklch(0.93 0.028 58.3); /** Documenttekstkleur */
+  --dsn-color-neutral-inverse-bg-document: oklch(0.615 0 0); /** Documentachtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-elevated: oklch(0.655 0 0); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-inverse-bg-subtle: oklch(0.645 0 0); /** Subtiele achtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-default: oklch(0.585 0 0); /** Standaard achtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-hover: oklch(0.625 0 0); /** Achtergrond in hover state (inverse) */
+  --dsn-color-neutral-inverse-bg-active: oklch(0.665 0 0); /** Achtergrond in active state (inverse) */
+  --dsn-color-neutral-inverse-border-subtle: oklch(0.38 0 0); /** Subtiele rand (inverse) */
+  --dsn-color-neutral-inverse-border-default: oklch(0.32 0 0); /** Standaard rand (inverse) */
+  --dsn-color-neutral-inverse-border-hover: oklch(0.28 0 0); /** Rand in hover state (inverse) */
+  --dsn-color-neutral-inverse-border-active: oklch(0.24 0 0); /** Rand in active state (inverse) */
+  --dsn-color-neutral-inverse-color-default: oklch(0.12 0 0); /** Standaard tekstkleur (inverse) */
+  --dsn-color-neutral-inverse-color-hover: oklch(0.1 0 0); /** Tekst in hover state (inverse) */
+  --dsn-color-neutral-inverse-color-active: oklch(0.08 0 0); /** Tekst in active state (inverse) */
+  --dsn-color-neutral-inverse-color-subtle: oklch(0.17 0 0); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-neutral-inverse-color-document: oklch(0.12 0 0); /** Documenttekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-bg-document: oklch(0.615 0.106 255.8); /** Documentachtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-elevated: oklch(0.655 0.098 255.8); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-accent-1-inverse-bg-subtle: oklch(0.645 0.122 255.8); /** Subtiele achtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-default: oklch(0.585 0.147 255.8); /** Standaard achtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-hover: oklch(0.625 0.176 255.8); /** Achtergrond in hover state (inverse) */
+  --dsn-color-accent-1-inverse-bg-active: oklch(0.665 0.18 255.8); /** Achtergrond in active state (inverse) */
+  --dsn-color-accent-1-inverse-border-subtle: oklch(0.38 0.117 255.8); /** Subtiele rand (inverse) */
+  --dsn-color-accent-1-inverse-border-default: oklch(0.32 0.098 255.8); /** Standaard rand (inverse) */
+  --dsn-color-accent-1-inverse-border-hover: oklch(0.28 0.095 255.8); /** Rand in hover state (inverse) */
+  --dsn-color-accent-1-inverse-border-active: oklch(0.24 0.081 255.8); /** Rand in active state (inverse) */
+  --dsn-color-accent-1-inverse-color-default: oklch(0.12 0.02 255.8); /** Standaard tekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-color-hover: oklch(0.1 0.02 255.8); /** Tekst in hover state (inverse) */
+  --dsn-color-accent-1-inverse-color-active: oklch(0.08 0.02 255.8); /** Tekst in active state (inverse) */
+  --dsn-color-accent-1-inverse-color-subtle: oklch(0.17 0.058 255.8); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-color-document: oklch(0.12 0.02 255.8); /** Documenttekstkleur (inverse) */
+  --dsn-color-info-inverse-bg-document: oklch(0.615 0.106 255.8); /** Documentachtergrond (inverse) */
+  --dsn-color-info-inverse-bg-elevated: oklch(0.655 0.098 255.8); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-info-inverse-bg-subtle: oklch(0.645 0.122 255.8); /** Subtiele achtergrond (inverse) */
+  --dsn-color-info-inverse-bg-default: oklch(0.585 0.147 255.8); /** Standaard achtergrond (inverse) */
+  --dsn-color-info-inverse-bg-hover: oklch(0.625 0.176 255.8); /** Achtergrond in hover state (inverse) */
+  --dsn-color-info-inverse-bg-active: oklch(0.665 0.18 255.8); /** Achtergrond in active state (inverse) */
+  --dsn-color-info-inverse-border-subtle: oklch(0.38 0.117 255.8); /** Subtiele rand (inverse) */
+  --dsn-color-info-inverse-border-default: oklch(0.32 0.098 255.8); /** Standaard rand (inverse) */
+  --dsn-color-info-inverse-border-hover: oklch(0.28 0.095 255.8); /** Rand in hover state (inverse) */
+  --dsn-color-info-inverse-border-active: oklch(0.24 0.081 255.8); /** Rand in active state (inverse) */
+  --dsn-color-info-inverse-color-default: oklch(0.12 0.02 255.8); /** Standaard tekstkleur (inverse) */
+  --dsn-color-info-inverse-color-hover: oklch(0.1 0.02 255.8); /** Tekst in hover state (inverse) */
+  --dsn-color-info-inverse-color-active: oklch(0.08 0.02 255.8); /** Tekst in active state (inverse) */
+  --dsn-color-info-inverse-color-subtle: oklch(0.17 0.058 255.8); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-info-inverse-color-document: oklch(0.12 0.02 255.8); /** Documenttekstkleur (inverse) */
+  --dsn-color-negative-inverse-bg-document: oklch(0.635 0.157 29.2); /** Documentachtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-elevated: oklch(0.675 0.145 29.2); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-negative-inverse-bg-subtle: oklch(0.665 0.181 29.2); /** Subtiele achtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-default: oklch(0.605 0.217 29.2); /** Standaard achtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-hover: oklch(0.645 0.241 29.2); /** Achtergrond in hover state (inverse) */
+  --dsn-color-negative-inverse-bg-active: oklch(0.685 0.204 29.2); /** Achtergrond in active state (inverse) */
+  --dsn-color-negative-inverse-border-subtle: oklch(0.39 0.16 29.2); /** Subtiele rand (inverse) */
+  --dsn-color-negative-inverse-border-default: oklch(0.33 0.135 29.2); /** Standaard rand (inverse) */
+  --dsn-color-negative-inverse-border-hover: oklch(0.29 0.119 29.2); /** Rand in hover state (inverse) */
+  --dsn-color-negative-inverse-border-active: oklch(0.25 0.103 29.2); /** Rand in active state (inverse) */
+  --dsn-color-negative-inverse-color-default: oklch(0.12 0.029 29.2); /** Standaard tekstkleur (inverse) */
+  --dsn-color-negative-inverse-color-hover: oklch(0.1 0.029 29.2); /** Tekst in hover state (inverse) */
+  --dsn-color-negative-inverse-color-active: oklch(0.08 0.029 29.2); /** Tekst in active state (inverse) */
+  --dsn-color-negative-inverse-color-subtle: oklch(0.17 0.07 29.2); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-negative-inverse-color-document: oklch(0.12 0.029 29.2); /** Documenttekstkleur (inverse) */
+  --dsn-color-positive-inverse-bg-document: oklch(0.61 0.101 148.2); /** Documentachtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-elevated: oklch(0.65 0.094 148.2); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-positive-inverse-bg-subtle: oklch(0.64 0.117 148.2); /** Subtiele achtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-default: oklch(0.58 0.14 148.2); /** Standaard achtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-hover: oklch(0.62 0.168 148.2); /** Achtergrond in hover state (inverse) */
+  --dsn-color-positive-inverse-bg-active: oklch(0.66 0.19 148.2); /** Achtergrond in active state (inverse) */
+  --dsn-color-positive-inverse-border-subtle: oklch(0.38 0.109 148.2); /** Subtiele rand (inverse) */
+  --dsn-color-positive-inverse-border-default: oklch(0.32 0.092 148.2); /** Standaard rand (inverse) */
+  --dsn-color-positive-inverse-border-hover: oklch(0.28 0.081 148.2); /** Rand in hover state (inverse) */
+  --dsn-color-positive-inverse-border-active: oklch(0.24 0.069 148.2); /** Rand in active state (inverse) */
+  --dsn-color-positive-inverse-color-default: oklch(0.12 0.019 148.2); /** Standaard tekstkleur (inverse) */
+  --dsn-color-positive-inverse-color-hover: oklch(0.1 0.019 148.2); /** Tekst in hover state (inverse) */
+  --dsn-color-positive-inverse-color-active: oklch(0.08 0.019 148.2); /** Tekst in active state (inverse) */
+  --dsn-color-positive-inverse-color-subtle: oklch(0.17 0.049 148.2); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-positive-inverse-color-document: oklch(0.12 0.019 148.2); /** Documenttekstkleur (inverse) */
+  --dsn-color-warning-inverse-bg-document: oklch(0.696 0.123 58.3); /** Documentachtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-elevated: oklch(0.736 0.113 58.3); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-warning-inverse-bg-subtle: oklch(0.726 0.142 58.3); /** Subtiele achtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-default: oklch(0.666 0.159 58.3); /** Standaard achtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-hover: oklch(0.706 0.168 58.3); /** Achtergrond in hover state (inverse) */
+  --dsn-color-warning-inverse-bg-active: oklch(0.746 0.178 58.3); /** Achtergrond in active state (inverse) */
+  --dsn-color-warning-inverse-border-subtle: oklch(0.456 0.109 58.3); /** Subtiele rand (inverse) */
+  --dsn-color-warning-inverse-border-default: oklch(0.396 0.094 58.3); /** Standaard rand (inverse) */
+  --dsn-color-warning-inverse-border-hover: oklch(0.356 0.085 58.3); /** Rand in hover state (inverse) */
+  --dsn-color-warning-inverse-border-active: oklch(0.316 0.075 58.3); /** Rand in active state (inverse) */
+  --dsn-color-warning-inverse-color-default: oklch(0.12 0.023 58.3); /** Standaard tekstkleur (inverse) */
+  --dsn-color-warning-inverse-color-hover: oklch(0.1 0.023 58.3); /** Tekst in hover state (inverse) */
+  --dsn-color-warning-inverse-color-active: oklch(0.08 0.019 58.3); /** Tekst in active state (inverse) */
+  --dsn-color-warning-inverse-color-subtle: oklch(0.17 0.041 58.3); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-warning-inverse-color-document: oklch(0.12 0.023 58.3); /** Documenttekstkleur (inverse) */
   --dsn-color-transparent: rgba(0, 0, 0, 0); /** Volledig transparant — voor onzichtbare achtergronden en randen */
   --dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent); /** Scherpe schaduwlaag — direct licht, dichtbij het object */
   --dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent); /** Diffuse schaduwlaag — omgevingslicht, verder weg */
@@ -593,7 +593,7 @@
   --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Tekst in active state (inverse) — secundaire acties (links, navigatie) */
   --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie) */
   --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Documenttekstkleur (inverse) — secundaire acties (links, navigatie) */
-  --dsn-backdrop-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van de backdrop — altijd donker, ongeacht dark mode. Gebruikt neutral.bg-document (#111111) zodat de overlay donker blijft in dark mode. */
+  --dsn-backdrop-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van de backdrop — altijd donker, ongeacht dark mode. Gebruikt neutral.bg-document zodat de overlay donker blijft in dark mode. */
   --dsn-backdrop-z-index: var(--dsn-z-index-400); /** Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600) */
   --dsn-action-group-column-gap: var(--dsn-space-inline-lg); /** Horizontal gap between actions in horizontal direction */
   --dsn-action-group-row-gap: var(--dsn-space-row-lg); /** Vertical gap between wrapped rows in horizontal direction */
@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);