/**
 * NLDD Designsysteem — Rijksoverheid house fonts
 *
 * Split from variables.css so a build can leave them out: RijksSans is
 * restricted to Dutch government publications (see NOTICES.md). Without these
 * @font-face rules both family stacks fall through to their system entries on
 * their own, so no override is needed.
 */

@font-face {
	font-family: 'RijksSans';
	src: url('fonts/RijksSansWeb-Regular.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'RijksSans';
	src: url('fonts/RijksSansWeb-Italic.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('fonts/JetBrainsMono[wght].woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('fonts/JetBrainsMono-Italic[wght].woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
/**
 * NLDD Designsysteem — CSS custom properties
 */

/**
 * Auto-generated descriptive color palettes.
 *
 * Generated from scripts/reference-colors.json using scripts/generate-palette.py.
 * DO NOT EDIT BY HAND — run `npm run generate:colors` to regenerate.
 */

:root {
	/* ### Coolgray - 257.4° */

	--primitives-color-coolgray-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-coolgray-25: light-dark(oklch(0.974 0.004 257.4), oklch(0.158 0.009 257.4)); /* light: #F5F6F9 | dark: #0B0D10 */
	--primitives-color-coolgray-50: light-dark(oklch(0.947 0.007 257.4), oklch(0.201 0.011 257.4)); /* light: #EBEEF2 | dark: #13171B */
	--primitives-color-coolgray-75: light-dark(oklch(0.923 0.009 257.4), oklch(0.234 0.013 257.4)); /* light: #E2E6EB | dark: #1A1E24 */
	--primitives-color-coolgray-100: light-dark(oklch(0.898 0.011 257.4), oklch(0.261 0.015 257.4)); /* light: #D9DEE5 | dark: #20252B */
	--primitives-color-coolgray-150: light-dark(oklch(0.850 0.015 257.4), oklch(0.307 0.018 257.4)); /* light: #C8CED8 | dark: #2A3038 */
	--primitives-color-coolgray-200: light-dark(oklch(0.804 0.019 257.4), oklch(0.348 0.020 257.4)); /* light: #B7C0CC | dark: #333A45 */
	--primitives-color-coolgray-250: light-dark(oklch(0.762 0.023 257.4), oklch(0.385 0.023 257.4)); /* light: #A9B2C0 | dark: #3C4450 */
	--primitives-color-coolgray-300: light-dark(oklch(0.719 0.026 257.4), oklch(0.421 0.026 257.4)); /* light: #9AA5B5 | dark: #454E5B */
	--primitives-color-coolgray-350: light-dark(oklch(0.678 0.030 257.4), oklch(0.457 0.029 257.4)); /* light: #8C99AA | dark: #4D5867 */
	--primitives-color-coolgray-400: light-dark(oklch(0.639 0.033 257.4), oklch(0.491 0.032 257.4)); /* light: #7F8DA0 | dark: #556273 */
	--primitives-color-coolgray-450: light-dark(oklch(0.600 0.037 257.4), oklch(0.529 0.036 257.4)); /* light: #738197 | dark: #5E6C81 */
	--primitives-color-coolgray-500: light-dark(oklch(0.563 0.040 257.4), oklch(0.563 0.040 257.4)); /* light: #67778D | dark: #67778D */
	--primitives-color-coolgray-550: light-dark(oklch(0.529 0.036 257.4), oklch(0.600 0.037 257.4)); /* light: #5E6C81 | dark: #738197 */
	--primitives-color-coolgray-600: light-dark(oklch(0.491 0.032 257.4), oklch(0.639 0.033 257.4)); /* light: #556273 | dark: #7F8DA0 */
	--primitives-color-coolgray-650: light-dark(oklch(0.457 0.029 257.4), oklch(0.678 0.030 257.4)); /* light: #4D5867 | dark: #8C99AA */
	--primitives-color-coolgray-700: light-dark(oklch(0.421 0.026 257.4), oklch(0.719 0.026 257.4)); /* light: #454E5B | dark: #9AA5B5 */
	--primitives-color-coolgray-750: light-dark(oklch(0.385 0.023 257.4), oklch(0.762 0.023 257.4)); /* light: #3C4450 | dark: #A9B2C0 */
	--primitives-color-coolgray-800: light-dark(oklch(0.348 0.020 257.4), oklch(0.804 0.019 257.4)); /* light: #333A45 | dark: #B7C0CC */
	--primitives-color-coolgray-850: light-dark(oklch(0.307 0.018 257.4), oklch(0.850 0.015 257.4)); /* light: #2A3038 | dark: #C8CED8 */
	--primitives-color-coolgray-900: light-dark(oklch(0.261 0.015 257.4), oklch(0.898 0.011 257.4)); /* light: #20252B | dark: #D9DEE5 */
	--primitives-color-coolgray-925: light-dark(oklch(0.234 0.013 257.4), oklch(0.923 0.009 257.4)); /* light: #1A1E24 | dark: #E2E6EB */
	--primitives-color-coolgray-950: light-dark(oklch(0.201 0.011 257.4), oklch(0.947 0.007 257.4)); /* light: #13171B | dark: #EBEEF2 */
	--primitives-color-coolgray-975: light-dark(oklch(0.158 0.009 257.4), oklch(0.974 0.004 257.4)); /* light: #0B0D10 | dark: #F5F6F9 */
	--primitives-color-coolgray-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Lintblauw - 253.4° */

	--primitives-color-lintblauw-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-lintblauw-25: light-dark(oklch(0.973 0.013 253.4), oklch(0.158 0.015 253.4)); /* light: #F0F7FF | dark: #090D13 */
	--primitives-color-lintblauw-50: light-dark(oklch(0.947 0.024 253.4), oklch(0.202 0.024 253.4)); /* light: #E3EFFE | dark: #0F1721 */
	--primitives-color-lintblauw-75: light-dark(oklch(0.922 0.034 253.4), oklch(0.233 0.034 253.4)); /* light: #D6E7FC | dark: #121F2D */
	--primitives-color-lintblauw-100: light-dark(oklch(0.897 0.044 253.4), oklch(0.262 0.044 253.4)); /* light: #CADFFA | dark: #152539 */
	--primitives-color-lintblauw-150: light-dark(oklch(0.850 0.063 253.4), oklch(0.307 0.063 253.4)); /* light: #B1D1F7 | dark: #17314E */
	--primitives-color-lintblauw-200: light-dark(oklch(0.804 0.083 253.4), oklch(0.348 0.083 253.4)); /* light: #9AC2F4 | dark: #163B63 */
	--primitives-color-lintblauw-250: light-dark(oklch(0.760 0.097 253.4), oklch(0.387 0.097 253.4)); /* light: #85B5EE | dark: #184576 */
	--primitives-color-lintblauw-300: light-dark(oklch(0.718 0.097 253.4), oklch(0.422 0.097 253.4)); /* light: #78A7E0 | dark: #224F81 */
	--primitives-color-lintblauw-350: light-dark(oklch(0.678 0.097 253.4), oklch(0.456 0.097 253.4)); /* light: #6C9BD2 | dark: #2C598B */
	--primitives-color-lintblauw-400: light-dark(oklch(0.638 0.097 253.4), oklch(0.491 0.097 253.4)); /* light: #608FC5 | dark: #366396 */
	--primitives-color-lintblauw-450: light-dark(oklch(0.600 0.097 253.4), oklch(0.528 0.097 253.4)); /* light: #5583B9 | dark: #416DA2 */
	--primitives-color-lintblauw-500: light-dark(oklch(0.562 0.097 253.4), oklch(0.562 0.097 253.4)); /* light: #4A78AD | dark: #4A78AD */
	--primitives-color-lintblauw-550: light-dark(oklch(0.528 0.097 253.4), oklch(0.600 0.097 253.4)); /* light: #416DA2 | dark: #5583B9 */
	--primitives-color-lintblauw-600: light-dark(oklch(0.491 0.097 253.4), oklch(0.638 0.097 253.4)); /* light: #366396 | dark: #608FC5 */
	--primitives-color-lintblauw-650: light-dark(oklch(0.456 0.097 253.4), oklch(0.678 0.097 253.4)); /* light: #2C598B | dark: #6C9BD2 */
	--primitives-color-lintblauw-700: light-dark(oklch(0.422 0.097 253.4), oklch(0.718 0.097 253.4)); /* light: #224F81 | dark: #78A7E0 */
	--primitives-color-lintblauw-750: light-dark(oklch(0.387 0.097 253.4), oklch(0.760 0.097 253.4)); /* light: #184576 | dark: #85B5EE */
	--primitives-color-lintblauw-800: light-dark(oklch(0.348 0.083 253.4), oklch(0.804 0.083 253.4)); /* light: #163B63 | dark: #9AC2F4 */
	--primitives-color-lintblauw-850: light-dark(oklch(0.307 0.063 253.4), oklch(0.850 0.063 253.4)); /* light: #17314E | dark: #B1D1F7 */
	--primitives-color-lintblauw-900: light-dark(oklch(0.262 0.044 253.4), oklch(0.897 0.044 253.4)); /* light: #152539 | dark: #CADFFA */
	--primitives-color-lintblauw-925: light-dark(oklch(0.233 0.034 253.4), oklch(0.922 0.034 253.4)); /* light: #121F2D | dark: #D6E7FC */
	--primitives-color-lintblauw-950: light-dark(oklch(0.202 0.024 253.4), oklch(0.947 0.024 253.4)); /* light: #0F1721 | dark: #E3EFFE */
	--primitives-color-lintblauw-975: light-dark(oklch(0.158 0.015 253.4), oklch(0.973 0.013 253.4)); /* light: #090D13 | dark: #F0F7FF */
	--primitives-color-lintblauw-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Donkerblauw - 240.4° */

	--primitives-color-donkerblauw-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-donkerblauw-25: light-dark(oklch(0.973 0.012 240.4), oklch(0.157 0.012 240.4)); /* light: #EFF7FE | dark: #080D12 */
	--primitives-color-donkerblauw-50: light-dark(oklch(0.946 0.019 240.4), oklch(0.201 0.019 240.4)); /* light: #E3EFF9 | dark: #0E181E */
	--primitives-color-donkerblauw-75: light-dark(oklch(0.921 0.026 240.4), oklch(0.234 0.026 240.4)); /* light: #D6E8F5 | dark: #131F29 */
	--primitives-color-donkerblauw-100: light-dark(oklch(0.896 0.032 240.4), oklch(0.258 0.032 240.4)); /* light: #CBE0F1 | dark: #152632 */
	--primitives-color-donkerblauw-150: light-dark(oklch(0.848 0.045 240.4), oklch(0.305 0.045 240.4)); /* light: #B3D2E8 | dark: #183244 */
	--primitives-color-donkerblauw-200: light-dark(oklch(0.803 0.059 240.4), oklch(0.344 0.059 240.4)); /* light: #9DC4E1 | dark: #193D54 */
	--primitives-color-donkerblauw-250: light-dark(oklch(0.758 0.072 240.4), oklch(0.383 0.072 240.4)); /* light: #87B7DA | dark: #184765 */
	--primitives-color-donkerblauw-300: light-dark(oklch(0.715 0.085 240.4), oklch(0.418 0.085 240.4)); /* light: #71AAD3 | dark: #155276 */
	--primitives-color-donkerblauw-350: light-dark(oklch(0.674 0.098 240.4), oklch(0.455 0.098 240.4)); /* light: #5A9ECD | dark: #105C87 */
	--primitives-color-donkerblauw-400: light-dark(oklch(0.635 0.112 240.4), oklch(0.489 0.112 240.4)); /* light: #4293C7 | dark: #036798 */
	--primitives-color-donkerblauw-450: light-dark(oklch(0.598 0.114 240.4), oklch(0.524 0.114 240.4)); /* light: #3387BC | dark: #1571A5 */
	--primitives-color-donkerblauw-500: light-dark(oklch(0.561 0.114 240.4), oklch(0.561 0.114 240.4)); /* light: #257CB0 | dark: #257CB0 */
	--primitives-color-donkerblauw-550: light-dark(oklch(0.524 0.114 240.4), oklch(0.598 0.114 240.4)); /* light: #1571A5 | dark: #3387BC */
	--primitives-color-donkerblauw-600: light-dark(oklch(0.489 0.112 240.4), oklch(0.635 0.112 240.4)); /* light: #036798 | dark: #4293C7 */
	--primitives-color-donkerblauw-650: light-dark(oklch(0.455 0.098 240.4), oklch(0.674 0.098 240.4)); /* light: #105C87 | dark: #5A9ECD */
	--primitives-color-donkerblauw-700: light-dark(oklch(0.418 0.085 240.4), oklch(0.715 0.085 240.4)); /* light: #155276 | dark: #71AAD3 */
	--primitives-color-donkerblauw-750: light-dark(oklch(0.383 0.072 240.4), oklch(0.758 0.072 240.4)); /* light: #184765 | dark: #87B7DA */
	--primitives-color-donkerblauw-800: light-dark(oklch(0.344 0.059 240.4), oklch(0.803 0.059 240.4)); /* light: #193D54 | dark: #9DC4E1 */
	--primitives-color-donkerblauw-850: light-dark(oklch(0.305 0.045 240.4), oklch(0.848 0.045 240.4)); /* light: #183244 | dark: #B3D2E8 */
	--primitives-color-donkerblauw-900: light-dark(oklch(0.258 0.032 240.4), oklch(0.896 0.032 240.4)); /* light: #152632 | dark: #CBE0F1 */
	--primitives-color-donkerblauw-925: light-dark(oklch(0.234 0.026 240.4), oklch(0.921 0.026 240.4)); /* light: #131F29 | dark: #D6E8F5 */
	--primitives-color-donkerblauw-950: light-dark(oklch(0.201 0.019 240.4), oklch(0.946 0.019 240.4)); /* light: #0E181E | dark: #E3EFF9 */
	--primitives-color-donkerblauw-975: light-dark(oklch(0.157 0.012 240.4), oklch(0.973 0.012 240.4)); /* light: #080D12 | dark: #EFF7FE */
	--primitives-color-donkerblauw-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Hemelblauw - 246.6° */

	--primitives-color-hemelblauw-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-hemelblauw-25: light-dark(oklch(0.973 0.014 246.6), oklch(0.157 0.014 246.6)); /* light: #EFF7FF | dark: #080D13 */
	--primitives-color-hemelblauw-50: light-dark(oklch(0.948 0.022 246.6), oklch(0.201 0.022 246.6)); /* light: #E3EFFC | dark: #0E1720 */
	--primitives-color-hemelblauw-75: light-dark(oklch(0.922 0.029 246.6), oklch(0.233 0.029 246.6)); /* light: #D6E8F8 | dark: #121F2B */
	--primitives-color-hemelblauw-100: light-dark(oklch(0.896 0.036 246.6), oklch(0.260 0.036 246.6)); /* light: #CAE0F4 | dark: #152634 */
	--primitives-color-hemelblauw-150: light-dark(oklch(0.849 0.050 246.6), oklch(0.306 0.050 246.6)); /* light: #B4D1ED | dark: #193147 */
	--primitives-color-hemelblauw-200: light-dark(oklch(0.803 0.064 246.6), oklch(0.347 0.064 246.6)); /* light: #9EC3E6 | dark: #1B3C59 */
	--primitives-color-hemelblauw-250: light-dark(oklch(0.758 0.078 246.6), oklch(0.384 0.078 246.6)); /* light: #88B6E0 | dark: #1B466B */
	--primitives-color-hemelblauw-300: light-dark(oklch(0.717 0.092 246.6), oklch(0.418 0.092 246.6)); /* light: #73A9DB | dark: #19507C */
	--primitives-color-hemelblauw-350: light-dark(oklch(0.675 0.107 246.6), oklch(0.455 0.107 246.6)); /* light: #5C9DD5 | dark: #165A8E */
	--primitives-color-hemelblauw-400: light-dark(oklch(0.635 0.121 246.6), oklch(0.490 0.121 246.6)); /* light: #4691CF | dark: #1065A0 */
	--primitives-color-hemelblauw-450: light-dark(oklch(0.600 0.135 246.6), oklch(0.526 0.135 246.6)); /* light: #2C85CB | dark: #076FB3 */
	--primitives-color-hemelblauw-500: light-dark(oklch(0.562 0.147 246.6), oklch(0.562 0.147 246.6)); /* light: #007AC5 | dark: #007AC5 */
	--primitives-color-hemelblauw-550: light-dark(oklch(0.526 0.135 246.6), oklch(0.600 0.135 246.6)); /* light: #076FB3 | dark: #2C85CB */
	--primitives-color-hemelblauw-600: light-dark(oklch(0.490 0.121 246.6), oklch(0.635 0.121 246.6)); /* light: #1065A0 | dark: #4691CF */
	--primitives-color-hemelblauw-650: light-dark(oklch(0.455 0.107 246.6), oklch(0.675 0.107 246.6)); /* light: #165A8E | dark: #5C9DD5 */
	--primitives-color-hemelblauw-700: light-dark(oklch(0.418 0.092 246.6), oklch(0.717 0.092 246.6)); /* light: #19507C | dark: #73A9DB */
	--primitives-color-hemelblauw-750: light-dark(oklch(0.384 0.078 246.6), oklch(0.758 0.078 246.6)); /* light: #1B466B | dark: #88B6E0 */
	--primitives-color-hemelblauw-800: light-dark(oklch(0.347 0.064 246.6), oklch(0.803 0.064 246.6)); /* light: #1B3C59 | dark: #9EC3E6 */
	--primitives-color-hemelblauw-850: light-dark(oklch(0.306 0.050 246.6), oklch(0.849 0.050 246.6)); /* light: #193147 | dark: #B4D1ED */
	--primitives-color-hemelblauw-900: light-dark(oklch(0.260 0.036 246.6), oklch(0.896 0.036 246.6)); /* light: #152634 | dark: #CAE0F4 */
	--primitives-color-hemelblauw-925: light-dark(oklch(0.233 0.029 246.6), oklch(0.922 0.029 246.6)); /* light: #121F2B | dark: #D6E8F8 */
	--primitives-color-hemelblauw-950: light-dark(oklch(0.201 0.022 246.6), oklch(0.948 0.022 246.6)); /* light: #0E1720 | dark: #E3EFFC */
	--primitives-color-hemelblauw-975: light-dark(oklch(0.157 0.014 246.6), oklch(0.973 0.014 246.6)); /* light: #080D13 | dark: #EFF7FF */
	--primitives-color-hemelblauw-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Lichtblauw - 230.0° */

	--primitives-color-lichtblauw-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-lichtblauw-25: light-dark(oklch(0.972 0.013 230.0), oklch(0.156 0.013 230.0)); /* light: #EDF8FD | dark: #070E11 */
	--primitives-color-lichtblauw-50: light-dark(oklch(0.947 0.022 230.0), oklch(0.202 0.022 230.0)); /* light: #DFF1F9 | dark: #0B181F */
	--primitives-color-lichtblauw-75: light-dark(oklch(0.920 0.031 230.0), oklch(0.233 0.031 230.0)); /* light: #D1E9F6 | dark: #0D202A */
	--primitives-color-lichtblauw-100: light-dark(oklch(0.896 0.040 230.0), oklch(0.260 0.040 230.0)); /* light: #C3E2F3 | dark: #0C2734 */
	--primitives-color-lichtblauw-150: light-dark(oklch(0.848 0.058 230.0), oklch(0.304 0.058 230.0)); /* light: #A6D5EC | dark: #033446 */
	--primitives-color-lichtblauw-200: light-dark(oklch(0.801 0.073 230.0), oklch(0.344 0.070 230.0)); /* light: #8DC7E4 | dark: #003F56 */
	--primitives-color-lichtblauw-250: light-dark(oklch(0.757 0.073 230.0), oklch(0.381 0.073 230.0)); /* light: #7FB9D6 | dark: #064962 */
	--primitives-color-lichtblauw-300: light-dark(oklch(0.713 0.073 230.0), oklch(0.418 0.073 230.0)); /* light: #71ACC8 | dark: #16536D */
	--primitives-color-lichtblauw-350: light-dark(oklch(0.674 0.073 230.0), oklch(0.453 0.073 230.0)); /* light: #659FBB | dark: #225D77 */
	--primitives-color-lichtblauw-400: light-dark(oklch(0.635 0.073 230.0), oklch(0.488 0.073 230.0)); /* light: #5993AF | dark: #2D6781 */
	--primitives-color-lichtblauw-450: light-dark(oklch(0.596 0.073 230.0), oklch(0.523 0.073 230.0)); /* light: #4E87A3 | dark: #38728C */
	--primitives-color-lichtblauw-500: light-dark(oklch(0.559 0.073 230.0), oklch(0.559 0.073 230.0)); /* light: #437C97 | dark: #437C97 */
	--primitives-color-lichtblauw-550: light-dark(oklch(0.523 0.073 230.0), oklch(0.596 0.073 230.0)); /* light: #38728C | dark: #4E87A3 */
	--primitives-color-lichtblauw-600: light-dark(oklch(0.488 0.073 230.0), oklch(0.635 0.073 230.0)); /* light: #2D6781 | dark: #5993AF */
	--primitives-color-lichtblauw-650: light-dark(oklch(0.453 0.073 230.0), oklch(0.674 0.073 230.0)); /* light: #225D77 | dark: #659FBB */
	--primitives-color-lichtblauw-700: light-dark(oklch(0.418 0.073 230.0), oklch(0.713 0.073 230.0)); /* light: #16536D | dark: #71ACC8 */
	--primitives-color-lichtblauw-750: light-dark(oklch(0.381 0.073 230.0), oklch(0.757 0.073 230.0)); /* light: #064962 | dark: #7FB9D6 */
	--primitives-color-lichtblauw-800: light-dark(oklch(0.344 0.070 230.0), oklch(0.801 0.073 230.0)); /* light: #003F56 | dark: #8DC7E4 */
	--primitives-color-lichtblauw-850: light-dark(oklch(0.304 0.058 230.0), oklch(0.848 0.058 230.0)); /* light: #033446 | dark: #A6D5EC */
	--primitives-color-lichtblauw-900: light-dark(oklch(0.260 0.040 230.0), oklch(0.896 0.040 230.0)); /* light: #0C2734 | dark: #C3E2F3 */
	--primitives-color-lichtblauw-925: light-dark(oklch(0.233 0.031 230.0), oklch(0.920 0.031 230.0)); /* light: #0D202A | dark: #D1E9F6 */
	--primitives-color-lichtblauw-950: light-dark(oklch(0.202 0.022 230.0), oklch(0.947 0.022 230.0)); /* light: #0B181F | dark: #DFF1F9 */
	--primitives-color-lichtblauw-975: light-dark(oklch(0.156 0.013 230.0), oklch(0.972 0.013 230.0)); /* light: #070E11 | dark: #EDF8FD */
	--primitives-color-lichtblauw-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Paars - 308.6° */

	--primitives-color-paars-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-paars-25: light-dark(oklch(0.975 0.016 308.6), oklch(0.160 0.029 308.6)); /* light: #FAF4FF | dark: #110A17 */
	--primitives-color-paars-50: light-dark(oklch(0.950 0.031 308.6), oklch(0.209 0.052 308.6)); /* light: #F5E9FF | dark: #1F102A */
	--primitives-color-paars-75: light-dark(oklch(0.928 0.046 308.6), oklch(0.243 0.075 308.6)); /* light: #F0DFFF | dark: #2A143A */
	--primitives-color-paars-100: light-dark(oklch(0.904 0.061 308.6), oklch(0.272 0.097 308.6)); /* light: #EBD5FF | dark: #35154A */
	--primitives-color-paars-150: light-dark(oklch(0.859 0.091 308.6), oklch(0.322 0.127 308.6)); /* light: #E2C1FF | dark: #461963 */
	--primitives-color-paars-200: light-dark(oklch(0.817 0.121 308.6), oklch(0.363 0.127 308.6)); /* light: #DAADFF | dark: #51256F */
	--primitives-color-paars-250: light-dark(oklch(0.774 0.127 308.6), oklch(0.400 0.127 308.6)); /* light: #CD9EF3 | dark: #5B2F7B */
	--primitives-color-paars-300: light-dark(oklch(0.730 0.127 308.6), oklch(0.435 0.127 308.6)); /* light: #BF91E5 | dark: #653986 */
	--primitives-color-paars-350: light-dark(oklch(0.691 0.127 308.6), oklch(0.471 0.127 308.6)); /* light: #B285D8 | dark: #6F4490 */
	--primitives-color-paars-400: light-dark(oklch(0.651 0.127 308.6), oklch(0.505 0.127 308.6)); /* light: #A679CA | dark: #794E9B */
	--primitives-color-paars-450: light-dark(oklch(0.614 0.127 308.6), oklch(0.541 0.127 308.6)); /* light: #9A6EBE | dark: #8458A7 */
	--primitives-color-paars-500: light-dark(oklch(0.577 0.127 308.6), oklch(0.577 0.127 308.6)); /* light: #8F63B2 | dark: #8F63B2 */
	--primitives-color-paars-550: light-dark(oklch(0.541 0.127 308.6), oklch(0.614 0.127 308.6)); /* light: #8458A7 | dark: #9A6EBE */
	--primitives-color-paars-600: light-dark(oklch(0.505 0.127 308.6), oklch(0.651 0.127 308.6)); /* light: #794E9B | dark: #A679CA */
	--primitives-color-paars-650: light-dark(oklch(0.471 0.127 308.6), oklch(0.691 0.127 308.6)); /* light: #6F4490 | dark: #B285D8 */
	--primitives-color-paars-700: light-dark(oklch(0.435 0.127 308.6), oklch(0.730 0.127 308.6)); /* light: #653986 | dark: #BF91E5 */
	--primitives-color-paars-750: light-dark(oklch(0.400 0.127 308.6), oklch(0.774 0.127 308.6)); /* light: #5B2F7B | dark: #CD9EF3 */
	--primitives-color-paars-800: light-dark(oklch(0.363 0.127 308.6), oklch(0.817 0.121 308.6)); /* light: #51256F | dark: #DAADFF */
	--primitives-color-paars-850: light-dark(oklch(0.322 0.127 308.6), oklch(0.859 0.091 308.6)); /* light: #461963 | dark: #E2C1FF */
	--primitives-color-paars-900: light-dark(oklch(0.272 0.097 308.6), oklch(0.904 0.061 308.6)); /* light: #35154A | dark: #EBD5FF */
	--primitives-color-paars-925: light-dark(oklch(0.243 0.075 308.6), oklch(0.928 0.046 308.6)); /* light: #2A143A | dark: #F0DFFF */
	--primitives-color-paars-950: light-dark(oklch(0.209 0.052 308.6), oklch(0.950 0.031 308.6)); /* light: #1F102A | dark: #F5E9FF */
	--primitives-color-paars-975: light-dark(oklch(0.160 0.029 308.6), oklch(0.975 0.016 308.6)); /* light: #110A17 | dark: #FAF4FF */
	--primitives-color-paars-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Violet - 355.9° */

	--primitives-color-violet-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-violet-25: light-dark(oklch(0.975 0.014 355.9), oklch(0.162 0.023 355.9)); /* light: #FFF3F7 | dark: #16090E */
	--primitives-color-violet-50: light-dark(oklch(0.951 0.027 355.9), oklch(0.207 0.037 355.9)); /* light: #FFE8EF | dark: #251018 */
	--primitives-color-violet-75: light-dark(oklch(0.929 0.041 355.9), oklch(0.240 0.050 355.9)); /* light: #FFDDE8 | dark: #321420 */
	--primitives-color-violet-100: light-dark(oklch(0.904 0.056 355.9), oklch(0.270 0.064 355.9)); /* light: #FFD1E1 | dark: #3E1727 */
	--primitives-color-violet-150: light-dark(oklch(0.861 0.084 355.9), oklch(0.318 0.091 355.9)); /* light: #FFBBD3 | dark: #541A34 */
	--primitives-color-violet-200: light-dark(oklch(0.820 0.114 355.9), oklch(0.362 0.118 355.9)); /* light: #FFA5C6 | dark: #6A1A40 */
	--primitives-color-violet-250: light-dark(oklch(0.779 0.145 355.9), oklch(0.404 0.145 355.9)); /* light: #FF8EBA | dark: #80174B */
	--primitives-color-violet-300: light-dark(oklch(0.741 0.172 355.9), oklch(0.443 0.172 355.9)); /* light: #FD77AF | dark: #951057 */
	--primitives-color-violet-350: light-dark(oklch(0.704 0.196 355.9), oklch(0.483 0.196 355.9)); /* light: #F960A4 | dark: #AA0462 */
	--primitives-color-violet-400: light-dark(oklch(0.665 0.196 355.9), oklch(0.518 0.196 355.9)); /* light: #EB5398 | dark: #B71B6C */
	--primitives-color-violet-450: light-dark(oklch(0.627 0.196 355.9), oklch(0.554 0.196 355.9)); /* light: #DD468C | dark: #C32C76 */
	--primitives-color-violet-500: light-dark(oklch(0.590 0.196 355.9), oklch(0.590 0.196 355.9)); /* light: #D03981 | dark: #D03981 */
	--primitives-color-violet-550: light-dark(oklch(0.554 0.196 355.9), oklch(0.627 0.196 355.9)); /* light: #C32C76 | dark: #DD468C */
	--primitives-color-violet-600: light-dark(oklch(0.518 0.196 355.9), oklch(0.665 0.196 355.9)); /* light: #B71B6C | dark: #EB5398 */
	--primitives-color-violet-650: light-dark(oklch(0.483 0.196 355.9), oklch(0.704 0.196 355.9)); /* light: #AA0462 | dark: #F960A4 */
	--primitives-color-violet-700: light-dark(oklch(0.443 0.172 355.9), oklch(0.741 0.172 355.9)); /* light: #951057 | dark: #FD77AF */
	--primitives-color-violet-750: light-dark(oklch(0.404 0.145 355.9), oklch(0.779 0.145 355.9)); /* light: #80174B | dark: #FF8EBA */
	--primitives-color-violet-800: light-dark(oklch(0.362 0.118 355.9), oklch(0.820 0.114 355.9)); /* light: #6A1A40 | dark: #FFA5C6 */
	--primitives-color-violet-850: light-dark(oklch(0.318 0.091 355.9), oklch(0.861 0.084 355.9)); /* light: #541A34 | dark: #FFBBD3 */
	--primitives-color-violet-900: light-dark(oklch(0.270 0.064 355.9), oklch(0.904 0.056 355.9)); /* light: #3E1727 | dark: #FFD1E1 */
	--primitives-color-violet-925: light-dark(oklch(0.240 0.050 355.9), oklch(0.929 0.041 355.9)); /* light: #321420 | dark: #FFDDE8 */
	--primitives-color-violet-950: light-dark(oklch(0.207 0.037 355.9), oklch(0.951 0.027 355.9)); /* light: #251018 | dark: #FFE8EF */
	--primitives-color-violet-975: light-dark(oklch(0.162 0.023 355.9), oklch(0.975 0.014 355.9)); /* light: #16090E | dark: #FFF3F7 */
	--primitives-color-violet-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Robijnrood - 5.2° */

	--primitives-color-robijnrood-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-robijnrood-25: light-dark(oklch(0.975 0.013 5.2), oklch(0.160 0.023 5.2)); /* light: #FFF3F6 | dark: #16090C */
	--primitives-color-robijnrood-50: light-dark(oklch(0.952 0.025 5.2), oklch(0.207 0.035 5.2)); /* light: #FFE8ED | dark: #251015 */
	--primitives-color-robijnrood-75: light-dark(oklch(0.928 0.038 5.2), oklch(0.240 0.047 5.2)); /* light: #FFDDE4 | dark: #31151C */
	--primitives-color-robijnrood-100: light-dark(oklch(0.904 0.052 5.2), oklch(0.270 0.059 5.2)); /* light: #FFD2DA | dark: #3D1822 */
	--primitives-color-robijnrood-150: light-dark(oklch(0.861 0.079 5.2), oklch(0.318 0.083 5.2)); /* light: #FFBCCA | dark: #531D2C */
	--primitives-color-robijnrood-200: light-dark(oklch(0.818 0.107 5.2), oklch(0.361 0.107 5.2)); /* light: #FFA6BA | dark: #691E35 */
	--primitives-color-robijnrood-250: light-dark(oklch(0.778 0.131 5.2), oklch(0.402 0.131 5.2)); /* light: #FD91AB | dark: #7E1E3E */
	--primitives-color-robijnrood-300: light-dark(oklch(0.739 0.155 5.2), oklch(0.441 0.155 5.2)); /* light: #FA7C9D | dark: #931C47 */
	--primitives-color-robijnrood-350: light-dark(oklch(0.702 0.180 5.2), oklch(0.480 0.180 5.2)); /* light: #F66690 | dark: #A81750 */
	--primitives-color-robijnrood-400: light-dark(oklch(0.665 0.204 5.2), oklch(0.519 0.204 5.2)); /* light: #F34E82 | dark: #BE0B58 */
	--primitives-color-robijnrood-450: light-dark(oklch(0.629 0.217 5.2), oklch(0.555 0.217 5.2)); /* light: #EB3777 | dark: #D01161 */
	--primitives-color-robijnrood-500: light-dark(oklch(0.592 0.217 5.2), oklch(0.592 0.217 5.2)); /* light: #DD276C | dark: #DD276C */
	--primitives-color-robijnrood-550: light-dark(oklch(0.555 0.217 5.2), oklch(0.629 0.217 5.2)); /* light: #D01161 | dark: #EB3777 */
	--primitives-color-robijnrood-600: light-dark(oklch(0.519 0.204 5.2), oklch(0.665 0.204 5.2)); /* light: #BE0B58 | dark: #F34E82 */
	--primitives-color-robijnrood-650: light-dark(oklch(0.480 0.180 5.2), oklch(0.702 0.180 5.2)); /* light: #A81750 | dark: #F66690 */
	--primitives-color-robijnrood-700: light-dark(oklch(0.441 0.155 5.2), oklch(0.739 0.155 5.2)); /* light: #931C47 | dark: #FA7C9D */
	--primitives-color-robijnrood-750: light-dark(oklch(0.402 0.131 5.2), oklch(0.778 0.131 5.2)); /* light: #7E1E3E | dark: #FD91AB */
	--primitives-color-robijnrood-800: light-dark(oklch(0.361 0.107 5.2), oklch(0.818 0.107 5.2)); /* light: #691E35 | dark: #FFA6BA */
	--primitives-color-robijnrood-850: light-dark(oklch(0.318 0.083 5.2), oklch(0.861 0.079 5.2)); /* light: #531D2C | dark: #FFBCCA */
	--primitives-color-robijnrood-900: light-dark(oklch(0.270 0.059 5.2), oklch(0.904 0.052 5.2)); /* light: #3D1822 | dark: #FFD2DA */
	--primitives-color-robijnrood-925: light-dark(oklch(0.240 0.047 5.2), oklch(0.928 0.038 5.2)); /* light: #31151C | dark: #FFDDE4 */
	--primitives-color-robijnrood-950: light-dark(oklch(0.207 0.035 5.2), oklch(0.952 0.025 5.2)); /* light: #251015 | dark: #FFE8ED */
	--primitives-color-robijnrood-975: light-dark(oklch(0.160 0.023 5.2), oklch(0.975 0.013 5.2)); /* light: #16090C | dark: #FFF3F6 */
	--primitives-color-robijnrood-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Roze - 342.4° */

	--primitives-color-roze-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-roze-25: light-dark(oklch(0.975 0.016 342.4), oklch(0.160 0.019 342.4)); /* light: #FFF3FA | dark: #130A10 */
	--primitives-color-roze-50: light-dark(oklch(0.951 0.032 342.4), oklch(0.206 0.032 342.4)); /* light: #FFE7F5 | dark: #22111B */
	--primitives-color-roze-75: light-dark(oklch(0.929 0.044 342.4), oklch(0.240 0.044 342.4)); /* light: #FEDCF0 | dark: #2E1625 */
	--primitives-color-roze-100: light-dark(oklch(0.905 0.057 342.4), oklch(0.268 0.057 342.4)); /* light: #FCD1EA | dark: #381A2E */
	--primitives-color-roze-150: light-dark(oklch(0.859 0.082 342.4), oklch(0.317 0.082 342.4)); /* light: #F8BCE0 | dark: #4D1F3D */
	--primitives-color-roze-200: light-dark(oklch(0.817 0.107 342.4), oklch(0.362 0.107 342.4)); /* light: #F4A8D6 | dark: #61214D */
	--primitives-color-roze-250: light-dark(oklch(0.778 0.132 342.4), oklch(0.401 0.132 342.4)); /* light: #F094CE | dark: #75225B */
	--primitives-color-roze-300: light-dark(oklch(0.736 0.134 342.4), oklch(0.438 0.134 342.4)); /* light: #E386C0 | dark: #812C66 */
	--primitives-color-roze-350: light-dark(oklch(0.695 0.134 342.4), oklch(0.473 0.134 342.4)); /* light: #D579B4 | dark: #8C3770 */
	--primitives-color-roze-400: light-dark(oklch(0.656 0.134 342.4), oklch(0.509 0.134 342.4)); /* light: #C86DA7 | dark: #97427B */
	--primitives-color-roze-450: light-dark(oklch(0.617 0.134 342.4), oklch(0.545 0.134 342.4)); /* light: #BB629B | dark: #A34C85 */
	--primitives-color-roze-500: light-dark(oklch(0.582 0.134 342.4), oklch(0.582 0.134 342.4)); /* light: #AF5790 | dark: #AF5790 */
	--primitives-color-roze-550: light-dark(oklch(0.545 0.134 342.4), oklch(0.617 0.134 342.4)); /* light: #A34C85 | dark: #BB629B */
	--primitives-color-roze-600: light-dark(oklch(0.509 0.134 342.4), oklch(0.656 0.134 342.4)); /* light: #97427B | dark: #C86DA7 */
	--primitives-color-roze-650: light-dark(oklch(0.473 0.134 342.4), oklch(0.695 0.134 342.4)); /* light: #8C3770 | dark: #D579B4 */
	--primitives-color-roze-700: light-dark(oklch(0.438 0.134 342.4), oklch(0.736 0.134 342.4)); /* light: #812C66 | dark: #E386C0 */
	--primitives-color-roze-750: light-dark(oklch(0.401 0.132 342.4), oklch(0.778 0.132 342.4)); /* light: #75225B | dark: #F094CE */
	--primitives-color-roze-800: light-dark(oklch(0.362 0.107 342.4), oklch(0.817 0.107 342.4)); /* light: #61214D | dark: #F4A8D6 */
	--primitives-color-roze-850: light-dark(oklch(0.317 0.082 342.4), oklch(0.859 0.082 342.4)); /* light: #4D1F3D | dark: #F8BCE0 */
	--primitives-color-roze-900: light-dark(oklch(0.268 0.057 342.4), oklch(0.905 0.057 342.4)); /* light: #381A2E | dark: #FCD1EA */
	--primitives-color-roze-925: light-dark(oklch(0.240 0.044 342.4), oklch(0.929 0.044 342.4)); /* light: #2E1625 | dark: #FEDCF0 */
	--primitives-color-roze-950: light-dark(oklch(0.206 0.032 342.4), oklch(0.951 0.032 342.4)); /* light: #22111B | dark: #FFE7F5 */
	--primitives-color-roze-975: light-dark(oklch(0.160 0.019 342.4), oklch(0.975 0.016 342.4)); /* light: #130A10 | dark: #FFF3FA */
	--primitives-color-roze-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Rood - 29.5° */

	--primitives-color-rood-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-rood-25: light-dark(oklch(0.974 0.013 29.5), oklch(0.160 0.021 29.5)); /* light: #FFF4F1 | dark: #150A08 */
	--primitives-color-rood-50: light-dark(oklch(0.951 0.025 29.5), oklch(0.205 0.031 29.5)); /* light: #FFE9E5 | dark: #24110F */
	--primitives-color-rood-75: light-dark(oklch(0.927 0.037 29.5), oklch(0.238 0.042 29.5)); /* light: #FFDED9 | dark: #301713 */
	--primitives-color-rood-100: light-dark(oklch(0.903 0.051 29.5), oklch(0.266 0.052 29.5)); /* light: #FFD3CC | dark: #3B1B16 */
	--primitives-color-rood-150: light-dark(oklch(0.858 0.073 29.5), oklch(0.315 0.073 29.5)); /* light: #FDBFB5 | dark: #50211B */
	--primitives-color-rood-200: light-dark(oklch(0.814 0.094 29.5), oklch(0.358 0.094 29.5)); /* light: #F9AC9F | dark: #65251E */
	--primitives-color-rood-250: light-dark(oklch(0.773 0.115 29.5), oklch(0.398 0.115 29.5)); /* light: #F5998A | dark: #79281F */
	--primitives-color-rood-300: light-dark(oklch(0.733 0.135 29.5), oklch(0.438 0.135 29.5)); /* light: #F28675 | dark: #8D2B20 */
	--primitives-color-rood-350: light-dark(oklch(0.696 0.156 29.5), oklch(0.475 0.156 29.5)); /* light: #EE7262 | dark: #A22B20 */
	--primitives-color-rood-400: light-dark(oklch(0.658 0.177 29.5), oklch(0.513 0.177 29.5)); /* light: #EA5E4D | dark: #B62C20 */
	--primitives-color-rood-450: light-dark(oklch(0.624 0.198 29.5), oklch(0.551 0.198 29.5)); /* light: #E64837 | dark: #CC2B1F */
	--primitives-color-rood-500: light-dark(oklch(0.588 0.207 29.5), oklch(0.588 0.207 29.5)); /* light: #DD3426 | dark: #DD3426 */
	--primitives-color-rood-550: light-dark(oklch(0.551 0.198 29.5), oklch(0.624 0.198 29.5)); /* light: #CC2B1F | dark: #E64837 */
	--primitives-color-rood-600: light-dark(oklch(0.513 0.177 29.5), oklch(0.658 0.177 29.5)); /* light: #B62C20 | dark: #EA5E4D */
	--primitives-color-rood-650: light-dark(oklch(0.475 0.156 29.5), oklch(0.696 0.156 29.5)); /* light: #A22B20 | dark: #EE7262 */
	--primitives-color-rood-700: light-dark(oklch(0.438 0.135 29.5), oklch(0.733 0.135 29.5)); /* light: #8D2B20 | dark: #F28675 */
	--primitives-color-rood-750: light-dark(oklch(0.398 0.115 29.5), oklch(0.773 0.115 29.5)); /* light: #79281F | dark: #F5998A */
	--primitives-color-rood-800: light-dark(oklch(0.358 0.094 29.5), oklch(0.814 0.094 29.5)); /* light: #65251E | dark: #F9AC9F */
	--primitives-color-rood-850: light-dark(oklch(0.315 0.073 29.5), oklch(0.858 0.073 29.5)); /* light: #50211B | dark: #FDBFB5 */
	--primitives-color-rood-900: light-dark(oklch(0.266 0.052 29.5), oklch(0.903 0.051 29.5)); /* light: #3B1B16 | dark: #FFD3CC */
	--primitives-color-rood-925: light-dark(oklch(0.238 0.042 29.5), oklch(0.927 0.037 29.5)); /* light: #301713 | dark: #FFDED9 */
	--primitives-color-rood-950: light-dark(oklch(0.205 0.031 29.5), oklch(0.951 0.025 29.5)); /* light: #24110F | dark: #FFE9E5 */
	--primitives-color-rood-975: light-dark(oklch(0.160 0.021 29.5), oklch(0.974 0.013 29.5)); /* light: #150A08 | dark: #FFF4F1 */
	--primitives-color-rood-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Oranje - 52.9° */

	--primitives-color-oranje-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-oranje-25: light-dark(oklch(0.975 0.015 52.9), oklch(0.158 0.019 52.9)); /* light: #FFF4EE | dark: #130B06 */
	--primitives-color-oranje-50: light-dark(oklch(0.950 0.029 52.9), oklch(0.205 0.029 52.9)); /* light: #FFEADD | dark: #22130A */
	--primitives-color-oranje-75: light-dark(oklch(0.925 0.040 52.9), oklch(0.237 0.040 52.9)); /* light: #FDE0CE | dark: #2D190C */
	--primitives-color-oranje-100: light-dark(oklch(0.902 0.050 52.9), oklch(0.266 0.050 52.9)); /* light: #FBD6C1 | dark: #381E0C */
	--primitives-color-oranje-150: light-dark(oklch(0.855 0.071 52.9), oklch(0.313 0.071 52.9)); /* light: #F6C3A5 | dark: #4C2508 */
	--primitives-color-oranje-200: light-dark(oklch(0.812 0.092 52.9), oklch(0.355 0.092 52.9)); /* light: #F2B18A | dark: #602B00 */
	--primitives-color-oranje-250: light-dark(oklch(0.770 0.113 52.9), oklch(0.393 0.102 52.9)); /* light: #ED9F6E | dark: #6E3300 */
	--primitives-color-oranje-300: light-dark(oklch(0.729 0.134 52.9), oklch(0.431 0.111 52.9)); /* light: #E88E51 | dark: #7D3B00 */
	--primitives-color-oranje-350: light-dark(oklch(0.691 0.155 52.9), oklch(0.467 0.120 52.9)); /* light: #E47C2F | dark: #8C4200 */
	--primitives-color-oranje-400: light-dark(oklch(0.652 0.167 52.9), oklch(0.502 0.129 52.9)); /* light: #DB6D00 | dark: #9B4A00 */
	--primitives-color-oranje-450: light-dark(oklch(0.614 0.157 52.9), oklch(0.540 0.138 52.9)); /* light: #CA6400 | dark: #AA5300 */
	--primitives-color-oranje-500: light-dark(oklch(0.576 0.148 52.9), oklch(0.576 0.148 52.9)); /* light: #BA5B00 | dark: #BA5B00 */
	--primitives-color-oranje-550: light-dark(oklch(0.540 0.138 52.9), oklch(0.614 0.157 52.9)); /* light: #AA5300 | dark: #CA6400 */
	--primitives-color-oranje-600: light-dark(oklch(0.502 0.129 52.9), oklch(0.652 0.167 52.9)); /* light: #9B4A00 | dark: #DB6D00 */
	--primitives-color-oranje-650: light-dark(oklch(0.467 0.120 52.9), oklch(0.691 0.155 52.9)); /* light: #8C4200 | dark: #E47C2F */
	--primitives-color-oranje-700: light-dark(oklch(0.431 0.111 52.9), oklch(0.729 0.134 52.9)); /* light: #7D3B00 | dark: #E88E51 */
	--primitives-color-oranje-750: light-dark(oklch(0.393 0.102 52.9), oklch(0.770 0.113 52.9)); /* light: #6E3300 | dark: #ED9F6E */
	--primitives-color-oranje-800: light-dark(oklch(0.355 0.092 52.9), oklch(0.812 0.092 52.9)); /* light: #602B00 | dark: #F2B18A */
	--primitives-color-oranje-850: light-dark(oklch(0.313 0.071 52.9), oklch(0.855 0.071 52.9)); /* light: #4C2508 | dark: #F6C3A5 */
	--primitives-color-oranje-900: light-dark(oklch(0.266 0.050 52.9), oklch(0.902 0.050 52.9)); /* light: #381E0C | dark: #FBD6C1 */
	--primitives-color-oranje-925: light-dark(oklch(0.237 0.040 52.9), oklch(0.925 0.040 52.9)); /* light: #2D190C | dark: #FDE0CE */
	--primitives-color-oranje-950: light-dark(oklch(0.205 0.029 52.9), oklch(0.950 0.029 52.9)); /* light: #22130A | dark: #FFEADD */
	--primitives-color-oranje-975: light-dark(oklch(0.158 0.019 52.9), oklch(0.975 0.015 52.9)); /* light: #130B06 | dark: #FFF4EE */
	--primitives-color-oranje-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Donkergeel - 79.0° */

	--primitives-color-donkergeel-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-donkergeel-25: light-dark(oklch(0.975 0.023 79.0), oklch(0.158 0.030 79.0)); /* light: #FFF5E6 | dark: #140B01 */
	--primitives-color-donkergeel-50: light-dark(oklch(0.949 0.046 79.0), oklch(0.203 0.050 79.0)); /* light: #FFEBCD | dark: #231300 */
	--primitives-color-donkergeel-75: light-dark(oklch(0.924 0.069 79.0), oklch(0.236 0.055 79.0)); /* light: #FFE1B3 | dark: #2C1A00 */
	--primitives-color-donkergeel-100: light-dark(oklch(0.900 0.091 79.0), oklch(0.263 0.059 79.0)); /* light: #FFD898 | dark: #342000 */
	--primitives-color-donkergeel-150: light-dark(oklch(0.854 0.137 79.0), oklch(0.309 0.067 79.0)); /* light: #FFC45C | dark: #422B00 */
	--primitives-color-donkergeel-200: light-dark(oklch(0.810 0.169 79.0), oklch(0.350 0.075 79.0)); /* light: #FAB200 | dark: #4F3500 */
	--primitives-color-donkergeel-250: light-dark(oklch(0.766 0.160 79.0), oklch(0.389 0.083 79.0)); /* light: #E8A500 | dark: #5C3E00 */
	--primitives-color-donkergeel-300: light-dark(oklch(0.724 0.151 79.0), oklch(0.424 0.090 79.0)); /* light: #D89800 | dark: #684700 */
	--primitives-color-donkergeel-350: light-dark(oklch(0.682 0.142 79.0), oklch(0.460 0.097 79.0)); /* light: #C78D00 | dark: #755000 */
	--primitives-color-donkergeel-400: light-dark(oklch(0.644 0.134 79.0), oklch(0.496 0.104 79.0)); /* light: #B88200 | dark: #815A00 */
	--primitives-color-donkergeel-450: light-dark(oklch(0.604 0.126 79.0), oklch(0.531 0.111 79.0)); /* light: #A97700 | dark: #8E6300 */
	--primitives-color-donkergeel-500: light-dark(oklch(0.567 0.119 79.0), oklch(0.567 0.119 79.0)); /* light: #9B6D00 | dark: #9B6D00 */
	--primitives-color-donkergeel-550: light-dark(oklch(0.531 0.111 79.0), oklch(0.604 0.126 79.0)); /* light: #8E6300 | dark: #A97700 */
	--primitives-color-donkergeel-600: light-dark(oklch(0.496 0.104 79.0), oklch(0.644 0.134 79.0)); /* light: #815A00 | dark: #B88200 */
	--primitives-color-donkergeel-650: light-dark(oklch(0.460 0.097 79.0), oklch(0.682 0.142 79.0)); /* light: #755000 | dark: #C78D00 */
	--primitives-color-donkergeel-700: light-dark(oklch(0.424 0.090 79.0), oklch(0.724 0.151 79.0)); /* light: #684700 | dark: #D89800 */
	--primitives-color-donkergeel-750: light-dark(oklch(0.389 0.083 79.0), oklch(0.766 0.160 79.0)); /* light: #5C3E00 | dark: #E8A500 */
	--primitives-color-donkergeel-800: light-dark(oklch(0.350 0.075 79.0), oklch(0.810 0.169 79.0)); /* light: #4F3500 | dark: #FAB200 */
	--primitives-color-donkergeel-850: light-dark(oklch(0.309 0.067 79.0), oklch(0.854 0.137 79.0)); /* light: #422B00 | dark: #FFC45C */
	--primitives-color-donkergeel-900: light-dark(oklch(0.263 0.059 79.0), oklch(0.900 0.091 79.0)); /* light: #342000 | dark: #FFD898 */
	--primitives-color-donkergeel-925: light-dark(oklch(0.236 0.055 79.0), oklch(0.924 0.069 79.0)); /* light: #2C1A00 | dark: #FFE1B3 */
	--primitives-color-donkergeel-950: light-dark(oklch(0.203 0.050 79.0), oklch(0.949 0.046 79.0)); /* light: #231300 | dark: #FFEBCD */
	--primitives-color-donkergeel-975: light-dark(oklch(0.158 0.030 79.0), oklch(0.975 0.023 79.0)); /* light: #140B01 | dark: #FFF5E6 */
	--primitives-color-donkergeel-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Geel - 101.3° */

	--primitives-color-geel-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-geel-25: light-dark(oklch(0.971 0.056 101.3), oklch(0.158 0.047 101.3)); /* light: #FDF8CC | dark: #110D00 */
	--primitives-color-geel-50: light-dark(oklch(0.945 0.103 101.3), oklch(0.199 0.050 101.3)); /* light: #FBF09D | dark: #1B1600 */
	--primitives-color-geel-75: light-dark(oklch(0.920 0.150 101.3), oklch(0.232 0.054 101.3)); /* light: #FAE766 | dark: #231E00 */
	--primitives-color-geel-100: light-dark(oklch(0.895 0.184 101.3), oklch(0.258 0.058 101.3)); /* light: #F7DF17 | dark: #2A2400 */
	--primitives-color-geel-150: light-dark(oklch(0.848 0.177 101.3), oklch(0.305 0.067 101.3)); /* light: #E6CF00 | dark: #363000 */
	--primitives-color-geel-200: light-dark(oklch(0.802 0.168 101.3), oklch(0.346 0.075 101.3)); /* light: #D6C000 | dark: #423A00 */
	--primitives-color-geel-250: light-dark(oklch(0.759 0.159 101.3), oklch(0.383 0.082 101.3)); /* light: #C7B200 | dark: #4D4400 */
	--primitives-color-geel-300: light-dark(oklch(0.717 0.150 101.3), oklch(0.419 0.089 101.3)); /* light: #B8A500 | dark: #574E00 */
	--primitives-color-geel-350: light-dark(oklch(0.676 0.142 101.3), oklch(0.455 0.096 101.3)); /* light: #AA9900 | dark: #625800 */
	--primitives-color-geel-400: light-dark(oklch(0.636 0.134 101.3), oklch(0.491 0.104 101.3)); /* light: #9D8C00 | dark: #6D6200 */
	--primitives-color-geel-450: light-dark(oklch(0.600 0.126 101.3), oklch(0.525 0.111 101.3)); /* light: #918100 | dark: #786C00 */
	--primitives-color-geel-500: light-dark(oklch(0.562 0.118 101.3), oklch(0.562 0.118 101.3)); /* light: #847600 | dark: #847600 */
	--primitives-color-geel-550: light-dark(oklch(0.525 0.111 101.3), oklch(0.600 0.126 101.3)); /* light: #786C00 | dark: #918100 */
	--primitives-color-geel-600: light-dark(oklch(0.491 0.104 101.3), oklch(0.636 0.134 101.3)); /* light: #6D6200 | dark: #9D8C00 */
	--primitives-color-geel-650: light-dark(oklch(0.455 0.096 101.3), oklch(0.676 0.142 101.3)); /* light: #625800 | dark: #AA9900 */
	--primitives-color-geel-700: light-dark(oklch(0.419 0.089 101.3), oklch(0.717 0.150 101.3)); /* light: #574E00 | dark: #B8A500 */
	--primitives-color-geel-750: light-dark(oklch(0.383 0.082 101.3), oklch(0.759 0.159 101.3)); /* light: #4D4400 | dark: #C7B200 */
	--primitives-color-geel-800: light-dark(oklch(0.346 0.075 101.3), oklch(0.802 0.168 101.3)); /* light: #423A00 | dark: #D6C000 */
	--primitives-color-geel-850: light-dark(oklch(0.305 0.067 101.3), oklch(0.848 0.177 101.3)); /* light: #363000 | dark: #E6CF00 */
	--primitives-color-geel-900: light-dark(oklch(0.258 0.058 101.3), oklch(0.895 0.184 101.3)); /* light: #2A2400 | dark: #F7DF17 */
	--primitives-color-geel-925: light-dark(oklch(0.232 0.054 101.3), oklch(0.920 0.150 101.3)); /* light: #231E00 | dark: #FAE766 */
	--primitives-color-geel-950: light-dark(oklch(0.199 0.050 101.3), oklch(0.945 0.103 101.3)); /* light: #1B1600 | dark: #FBF09D */
	--primitives-color-geel-975: light-dark(oklch(0.158 0.047 101.3), oklch(0.971 0.056 101.3)); /* light: #110D00 | dark: #FDF8CC */
	--primitives-color-geel-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Donkerbruin - 34.1° */

	--primitives-color-donkerbruin-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-donkerbruin-25: light-dark(oklch(0.976 0.012 34.1), oklch(0.159 0.012 34.1)); /* light: #FFF4F2 | dark: #120B0A */
	--primitives-color-donkerbruin-50: light-dark(oklch(0.949 0.019 34.1), oklch(0.203 0.019 34.1)); /* light: #FBEAE6 | dark: #1F1411 */
	--primitives-color-donkerbruin-75: light-dark(oklch(0.925 0.027 34.1), oklch(0.238 0.027 34.1)); /* light: #F8E0DB | dark: #2A1A16 */
	--primitives-color-donkerbruin-100: light-dark(oklch(0.901 0.035 34.1), oklch(0.263 0.035 34.1)); /* light: #F4D7D0 | dark: #341F19 */
	--primitives-color-donkerbruin-150: light-dark(oklch(0.855 0.050 34.1), oklch(0.312 0.050 34.1)); /* light: #EEC5BA | dark: #472720 */
	--primitives-color-donkerbruin-200: light-dark(oklch(0.810 0.065 34.1), oklch(0.355 0.065 34.1)); /* light: #E8B3A5 | dark: #592E24 */
	--primitives-color-donkerbruin-250: light-dark(oklch(0.769 0.078 34.1), oklch(0.392 0.078 34.1)); /* light: #E1A293 | dark: #693528 */
	--primitives-color-donkerbruin-300: light-dark(oklch(0.727 0.078 34.1), oklch(0.430 0.078 34.1)); /* light: #D39587 | dark: #743F32 */
	--primitives-color-donkerbruin-350: light-dark(oklch(0.686 0.078 34.1), oklch(0.465 0.078 34.1)); /* light: #C5897A | dark: #7F483C */
	--primitives-color-donkerbruin-400: light-dark(oklch(0.646 0.078 34.1), oklch(0.500 0.078 34.1)); /* light: #B87D6F | dark: #8A5245 */
	--primitives-color-donkerbruin-450: light-dark(oklch(0.608 0.078 34.1), oklch(0.535 0.078 34.1)); /* light: #AC7263 | dark: #955C4F */
	--primitives-color-donkerbruin-500: light-dark(oklch(0.572 0.078 34.1), oklch(0.572 0.078 34.1)); /* light: #A06759 | dark: #A06759 */
	--primitives-color-donkerbruin-550: light-dark(oklch(0.535 0.078 34.1), oklch(0.608 0.078 34.1)); /* light: #955C4F | dark: #AC7263 */
	--primitives-color-donkerbruin-600: light-dark(oklch(0.500 0.078 34.1), oklch(0.646 0.078 34.1)); /* light: #8A5245 | dark: #B87D6F */
	--primitives-color-donkerbruin-650: light-dark(oklch(0.465 0.078 34.1), oklch(0.686 0.078 34.1)); /* light: #7F483C | dark: #C5897A */
	--primitives-color-donkerbruin-700: light-dark(oklch(0.430 0.078 34.1), oklch(0.727 0.078 34.1)); /* light: #743F32 | dark: #D39587 */
	--primitives-color-donkerbruin-750: light-dark(oklch(0.392 0.078 34.1), oklch(0.769 0.078 34.1)); /* light: #693528 | dark: #E1A293 */
	--primitives-color-donkerbruin-800: light-dark(oklch(0.355 0.065 34.1), oklch(0.810 0.065 34.1)); /* light: #592E24 | dark: #E8B3A5 */
	--primitives-color-donkerbruin-850: light-dark(oklch(0.312 0.050 34.1), oklch(0.855 0.050 34.1)); /* light: #472720 | dark: #EEC5BA */
	--primitives-color-donkerbruin-900: light-dark(oklch(0.263 0.035 34.1), oklch(0.901 0.035 34.1)); /* light: #341F19 | dark: #F4D7D0 */
	--primitives-color-donkerbruin-925: light-dark(oklch(0.238 0.027 34.1), oklch(0.925 0.027 34.1)); /* light: #2A1A16 | dark: #F8E0DB */
	--primitives-color-donkerbruin-950: light-dark(oklch(0.203 0.019 34.1), oklch(0.949 0.019 34.1)); /* light: #1F1411 | dark: #FBEAE6 */
	--primitives-color-donkerbruin-975: light-dark(oklch(0.159 0.012 34.1), oklch(0.976 0.012 34.1)); /* light: #120B0A | dark: #FFF4F2 */
	--primitives-color-donkerbruin-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Bruin - 86.4° */

	--primitives-color-bruin-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-bruin-25: light-dark(oklch(0.973 0.011 86.4), oklch(0.160 0.011 86.4)); /* light: #F9F6EE | dark: #0F0D08 */
	--primitives-color-bruin-50: light-dark(oklch(0.948 0.017 86.4), oklch(0.203 0.017 86.4)); /* light: #F3EDE2 | dark: #1A160E */
	--primitives-color-bruin-75: light-dark(oklch(0.922 0.022 86.4), oklch(0.235 0.022 86.4)); /* light: #ECE5D5 | dark: #231D12 */
	--primitives-color-bruin-100: light-dark(oklch(0.898 0.027 86.4), oklch(0.262 0.027 86.4)); /* light: #E5DDC9 | dark: #2A2415 */
	--primitives-color-bruin-150: light-dark(oklch(0.851 0.038 86.4), oklch(0.307 0.038 86.4)); /* light: #D9CDB2 | dark: #382E18 */
	--primitives-color-bruin-200: light-dark(oklch(0.805 0.049 86.4), oklch(0.349 0.049 86.4)); /* light: #CDBE9C | dark: #46381A */
	--primitives-color-bruin-250: light-dark(oklch(0.762 0.060 86.4), oklch(0.386 0.060 86.4)); /* light: #C2B086 | dark: #52411B */
	--primitives-color-bruin-300: light-dark(oklch(0.719 0.071 86.4), oklch(0.422 0.071 86.4)); /* light: #B8A270 | dark: #5E4B1A */
	--primitives-color-bruin-350: light-dark(oklch(0.679 0.082 86.4), oklch(0.457 0.082 86.4)); /* light: #AE955B | dark: #6B5418 */
	--primitives-color-bruin-400: light-dark(oklch(0.641 0.092 86.4), oklch(0.493 0.092 86.4)); /* light: #A58846 | dark: #785D15 */
	--primitives-color-bruin-450: light-dark(oklch(0.604 0.103 86.4), oklch(0.529 0.103 86.4)); /* light: #9C7C2E | dark: #86660F */
	--primitives-color-bruin-500: light-dark(oklch(0.566 0.113 86.4), oklch(0.566 0.113 86.4)); /* light: #937009 | dark: #937009 */
	--primitives-color-bruin-550: light-dark(oklch(0.529 0.103 86.4), oklch(0.604 0.103 86.4)); /* light: #86660F | dark: #9C7C2E */
	--primitives-color-bruin-600: light-dark(oklch(0.493 0.092 86.4), oklch(0.641 0.092 86.4)); /* light: #785D15 | dark: #A58846 */
	--primitives-color-bruin-650: light-dark(oklch(0.457 0.082 86.4), oklch(0.679 0.082 86.4)); /* light: #6B5418 | dark: #AE955B */
	--primitives-color-bruin-700: light-dark(oklch(0.422 0.071 86.4), oklch(0.719 0.071 86.4)); /* light: #5E4B1A | dark: #B8A270 */
	--primitives-color-bruin-750: light-dark(oklch(0.386 0.060 86.4), oklch(0.762 0.060 86.4)); /* light: #52411B | dark: #C2B086 */
	--primitives-color-bruin-800: light-dark(oklch(0.349 0.049 86.4), oklch(0.805 0.049 86.4)); /* light: #46381A | dark: #CDBE9C */
	--primitives-color-bruin-850: light-dark(oklch(0.307 0.038 86.4), oklch(0.851 0.038 86.4)); /* light: #382E18 | dark: #D9CDB2 */
	--primitives-color-bruin-900: light-dark(oklch(0.262 0.027 86.4), oklch(0.898 0.027 86.4)); /* light: #2A2415 | dark: #E5DDC9 */
	--primitives-color-bruin-925: light-dark(oklch(0.235 0.022 86.4), oklch(0.922 0.022 86.4)); /* light: #231D12 | dark: #ECE5D5 */
	--primitives-color-bruin-950: light-dark(oklch(0.203 0.017 86.4), oklch(0.948 0.017 86.4)); /* light: #1A160E | dark: #F3EDE2 */
	--primitives-color-bruin-975: light-dark(oklch(0.160 0.011 86.4), oklch(0.973 0.011 86.4)); /* light: #0F0D08 | dark: #F9F6EE */
	--primitives-color-bruin-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Donkergroen - 152.0° */

	--primitives-color-donkergroen-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-donkergroen-25: light-dark(oklch(0.973 0.010 152.0), oklch(0.156 0.010 152.0)); /* light: #F1F8F3 | dark: #090E0A */
	--primitives-color-donkergroen-50: light-dark(oklch(0.946 0.016 152.0), oklch(0.201 0.016 152.0)); /* light: #E6F0E8 | dark: #111813 */
	--primitives-color-donkergroen-75: light-dark(oklch(0.921 0.022 152.0), oklch(0.232 0.022 152.0)); /* light: #DBE9DE | dark: #162018 */
	--primitives-color-donkergroen-100: light-dark(oklch(0.895 0.028 152.0), oklch(0.258 0.028 152.0)); /* light: #D0E2D3 | dark: #19271D */
	--primitives-color-donkergroen-150: light-dark(oklch(0.846 0.040 152.0), oklch(0.303 0.040 152.0)); /* light: #BAD4C0 | dark: #1F3425 */
	--primitives-color-donkergroen-200: light-dark(oklch(0.799 0.052 152.0), oklch(0.343 0.052 152.0)); /* light: #A5C8AD | dark: #23402B */
	--primitives-color-donkergroen-250: light-dark(oklch(0.754 0.064 152.0), oklch(0.378 0.064 152.0)); /* light: #91BB9C | dark: #254B31 */
	--primitives-color-donkergroen-300: light-dark(oklch(0.710 0.076 152.0), oklch(0.412 0.076 152.0)); /* light: #7DB08A | dark: #265736 */
	--primitives-color-donkergroen-350: light-dark(oklch(0.670 0.079 152.0), oklch(0.448 0.079 152.0)); /* light: #70A37D | dark: #2F613F */
	--primitives-color-donkergroen-400: light-dark(oklch(0.631 0.079 152.0), oklch(0.484 0.079 152.0)); /* light: #649772 | dark: #3A6B48 */
	--primitives-color-donkergroen-450: light-dark(oklch(0.592 0.079 152.0), oklch(0.518 0.079 152.0)); /* light: #598B67 | dark: #437652 */
	--primitives-color-donkergroen-500: light-dark(oklch(0.555 0.079 152.0), oklch(0.555 0.079 152.0)); /* light: #4E805C | dark: #4E805C */
	--primitives-color-donkergroen-550: light-dark(oklch(0.518 0.079 152.0), oklch(0.592 0.079 152.0)); /* light: #437652 | dark: #598B67 */
	--primitives-color-donkergroen-600: light-dark(oklch(0.484 0.079 152.0), oklch(0.631 0.079 152.0)); /* light: #3A6B48 | dark: #649772 */
	--primitives-color-donkergroen-650: light-dark(oklch(0.448 0.079 152.0), oklch(0.670 0.079 152.0)); /* light: #2F613F | dark: #70A37D */
	--primitives-color-donkergroen-700: light-dark(oklch(0.412 0.076 152.0), oklch(0.710 0.076 152.0)); /* light: #265736 | dark: #7DB08A */
	--primitives-color-donkergroen-750: light-dark(oklch(0.378 0.064 152.0), oklch(0.754 0.064 152.0)); /* light: #254B31 | dark: #91BB9C */
	--primitives-color-donkergroen-800: light-dark(oklch(0.343 0.052 152.0), oklch(0.799 0.052 152.0)); /* light: #23402B | dark: #A5C8AD */
	--primitives-color-donkergroen-850: light-dark(oklch(0.303 0.040 152.0), oklch(0.846 0.040 152.0)); /* light: #1F3425 | dark: #BAD4C0 */
	--primitives-color-donkergroen-900: light-dark(oklch(0.258 0.028 152.0), oklch(0.895 0.028 152.0)); /* light: #19271D | dark: #D0E2D3 */
	--primitives-color-donkergroen-925: light-dark(oklch(0.232 0.022 152.0), oklch(0.921 0.022 152.0)); /* light: #162018 | dark: #DBE9DE */
	--primitives-color-donkergroen-950: light-dark(oklch(0.201 0.016 152.0), oklch(0.946 0.016 152.0)); /* light: #111813 | dark: #E6F0E8 */
	--primitives-color-donkergroen-975: light-dark(oklch(0.156 0.010 152.0), oklch(0.973 0.010 152.0)); /* light: #090E0A | dark: #F1F8F3 */
	--primitives-color-donkergroen-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Groen - 137.9° */

	--primitives-color-groen-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-groen-25: light-dark(oklch(0.972 0.016 137.9), oklch(0.156 0.016 137.9)); /* light: #F1F8EE | dark: #090E08 */
	--primitives-color-groen-50: light-dark(oklch(0.946 0.024 137.9), oklch(0.199 0.024 137.9)); /* light: #E6F1E2 | dark: #10190E */
	--primitives-color-groen-75: light-dark(oklch(0.919 0.032 137.9), oklch(0.230 0.032 137.9)); /* light: #DAEAD5 | dark: #152112 */
	--primitives-color-groen-100: light-dark(oklch(0.893 0.040 137.9), oklch(0.256 0.040 137.9)); /* light: #CFE3C9 | dark: #192814 */
	--primitives-color-groen-150: light-dark(oklch(0.844 0.056 137.9), oklch(0.303 0.056 137.9)); /* light: #BBD5B2 | dark: #203518 */
	--primitives-color-groen-200: light-dark(oklch(0.798 0.072 137.9), oklch(0.341 0.072 137.9)); /* light: #A7C89C | dark: #24411A */
	--primitives-color-groen-250: light-dark(oklch(0.752 0.087 137.9), oklch(0.377 0.087 137.9)); /* light: #94BC86 | dark: #284C1B */
	--primitives-color-groen-300: light-dark(oklch(0.709 0.103 137.9), oklch(0.412 0.103 137.9)); /* light: #81B170 | dark: #2C571A */
	--primitives-color-groen-350: light-dark(oklch(0.666 0.119 137.9), oklch(0.447 0.119 137.9)); /* light: #6FA55B | dark: #2F6318 */
	--primitives-color-groen-400: light-dark(oklch(0.627 0.135 137.9), oklch(0.480 0.135 137.9)); /* light: #5D9B45 | dark: #326E15 */
	--primitives-color-groen-450: light-dark(oklch(0.588 0.151 137.9), oklch(0.514 0.151 137.9)); /* light: #4B902D | dark: #347A0F */
	--primitives-color-groen-500: light-dark(oklch(0.550 0.165 137.9), oklch(0.550 0.165 137.9)); /* light: #38860A | dark: #38860A */
	--primitives-color-groen-550: light-dark(oklch(0.514 0.151 137.9), oklch(0.588 0.151 137.9)); /* light: #347A0F | dark: #4B902D */
	--primitives-color-groen-600: light-dark(oklch(0.480 0.135 137.9), oklch(0.627 0.135 137.9)); /* light: #326E15 | dark: #5D9B45 */
	--primitives-color-groen-650: light-dark(oklch(0.447 0.119 137.9), oklch(0.666 0.119 137.9)); /* light: #2F6318 | dark: #6FA55B */
	--primitives-color-groen-700: light-dark(oklch(0.412 0.103 137.9), oklch(0.709 0.103 137.9)); /* light: #2C571A | dark: #81B170 */
	--primitives-color-groen-750: light-dark(oklch(0.377 0.087 137.9), oklch(0.752 0.087 137.9)); /* light: #284C1B | dark: #94BC86 */
	--primitives-color-groen-800: light-dark(oklch(0.341 0.072 137.9), oklch(0.798 0.072 137.9)); /* light: #24411A | dark: #A7C89C */
	--primitives-color-groen-850: light-dark(oklch(0.303 0.056 137.9), oklch(0.844 0.056 137.9)); /* light: #203518 | dark: #BBD5B2 */
	--primitives-color-groen-900: light-dark(oklch(0.256 0.040 137.9), oklch(0.893 0.040 137.9)); /* light: #192814 | dark: #CFE3C9 */
	--primitives-color-groen-925: light-dark(oklch(0.230 0.032 137.9), oklch(0.919 0.032 137.9)); /* light: #152112 | dark: #DAEAD5 */
	--primitives-color-groen-950: light-dark(oklch(0.199 0.024 137.9), oklch(0.946 0.024 137.9)); /* light: #10190E | dark: #E6F1E2 */
	--primitives-color-groen-975: light-dark(oklch(0.156 0.016 137.9), oklch(0.972 0.016 137.9)); /* light: #090E08 | dark: #F1F8EE */
	--primitives-color-groen-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Mosgroen - 112.0° */

	--primitives-color-mosgroen-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-mosgroen-25: light-dark(oklch(0.973 0.012 112.0), oklch(0.158 0.012 112.0)); /* light: #F6F7EE | dark: #0D0D08 */
	--primitives-color-mosgroen-50: light-dark(oklch(0.947 0.018 112.0), oklch(0.202 0.018 112.0)); /* light: #EDEFE1 | dark: #17170E */
	--primitives-color-mosgroen-75: light-dark(oklch(0.922 0.024 112.0), oklch(0.232 0.024 112.0)); /* light: #E5E7D5 | dark: #1D1F11 */
	--primitives-color-mosgroen-100: light-dark(oklch(0.896 0.030 112.0), oklch(0.258 0.030 112.0)); /* light: #DDDFC9 | dark: #242514 */
	--primitives-color-mosgroen-150: light-dark(oklch(0.848 0.042 112.0), oklch(0.306 0.042 112.0)); /* light: #CDD0B2 | dark: #303118 */
	--primitives-color-mosgroen-200: light-dark(oklch(0.802 0.054 112.0), oklch(0.344 0.054 112.0)); /* light: #BFC29B | dark: #3A3C19 */
	--primitives-color-mosgroen-250: light-dark(oklch(0.758 0.065 112.0), oklch(0.383 0.065 112.0)); /* light: #B1B585 | dark: #444619 */
	--primitives-color-mosgroen-300: light-dark(oklch(0.716 0.077 112.0), oklch(0.418 0.077 112.0)); /* light: #A4A870 | dark: #4E5018 */
	--primitives-color-mosgroen-350: light-dark(oklch(0.675 0.089 112.0), oklch(0.453 0.089 112.0)); /* light: #989C5A | dark: #575B15 */
	--primitives-color-mosgroen-400: light-dark(oklch(0.634 0.101 112.0), oklch(0.487 0.101 112.0)); /* light: #8C9043 | dark: #616511 */
	--primitives-color-mosgroen-450: light-dark(oklch(0.596 0.113 112.0), oklch(0.523 0.113 112.0)); /* light: #81852A | dark: #6C6F09 */
	--primitives-color-mosgroen-500: light-dark(oklch(0.559 0.124 112.0), oklch(0.559 0.124 112.0)); /* light: #777A00 | dark: #777A00 */
	--primitives-color-mosgroen-550: light-dark(oklch(0.523 0.113 112.0), oklch(0.596 0.113 112.0)); /* light: #6C6F09 | dark: #81852A */
	--primitives-color-mosgroen-600: light-dark(oklch(0.487 0.101 112.0), oklch(0.634 0.101 112.0)); /* light: #616511 | dark: #8C9043 */
	--primitives-color-mosgroen-650: light-dark(oklch(0.453 0.089 112.0), oklch(0.675 0.089 112.0)); /* light: #575B15 | dark: #989C5A */
	--primitives-color-mosgroen-700: light-dark(oklch(0.418 0.077 112.0), oklch(0.716 0.077 112.0)); /* light: #4E5018 | dark: #A4A870 */
	--primitives-color-mosgroen-750: light-dark(oklch(0.383 0.065 112.0), oklch(0.758 0.065 112.0)); /* light: #444619 | dark: #B1B585 */
	--primitives-color-mosgroen-800: light-dark(oklch(0.344 0.054 112.0), oklch(0.802 0.054 112.0)); /* light: #3A3C19 | dark: #BFC29B */
	--primitives-color-mosgroen-850: light-dark(oklch(0.306 0.042 112.0), oklch(0.848 0.042 112.0)); /* light: #303118 | dark: #CDD0B2 */
	--primitives-color-mosgroen-900: light-dark(oklch(0.258 0.030 112.0), oklch(0.896 0.030 112.0)); /* light: #242514 | dark: #DDDFC9 */
	--primitives-color-mosgroen-925: light-dark(oklch(0.232 0.024 112.0), oklch(0.922 0.024 112.0)); /* light: #1D1F11 | dark: #E5E7D5 */
	--primitives-color-mosgroen-950: light-dark(oklch(0.202 0.018 112.0), oklch(0.947 0.018 112.0)); /* light: #17170E | dark: #EDEFE1 */
	--primitives-color-mosgroen-975: light-dark(oklch(0.158 0.012 112.0), oklch(0.973 0.012 112.0)); /* light: #0D0D08 | dark: #F6F7EE */
	--primitives-color-mosgroen-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */

	/* ### Mintgroen - 172.0° */

	--primitives-color-mintgroen-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0)); /* light: #FFFFFF | dark: #000000 */
	--primitives-color-mintgroen-25: light-dark(oklch(0.972 0.017 172.0), oklch(0.155 0.017 172.0)); /* light: #EBFAF4 | dark: #050F0B */
	--primitives-color-mintgroen-50: light-dark(oklch(0.943 0.029 172.0), oklch(0.199 0.029 172.0)); /* light: #DAF3EA | dark: #061A14 */
	--primitives-color-mintgroen-75: light-dark(oklch(0.918 0.041 172.0), oklch(0.229 0.041 172.0)); /* light: #CAEDE1 | dark: #03231A */
	--primitives-color-mintgroen-100: light-dark(oklch(0.892 0.053 172.0), oklch(0.254 0.052 172.0)); /* light: #B9E7D7 | dark: #002A20 */
	--primitives-color-mintgroen-150: light-dark(oklch(0.842 0.077 172.0), oklch(0.299 0.060 172.0)); /* light: #96DCC5 | dark: #00372A */
	--primitives-color-mintgroen-200: light-dark(oklch(0.793 0.098 172.0), oklch(0.336 0.067 172.0)); /* light: #74D0B4 | dark: #004233 */
	--primitives-color-mintgroen-250: light-dark(oklch(0.748 0.098 172.0), oklch(0.375 0.074 172.0)); /* light: #65C2A6 | dark: #004D3C */
	--primitives-color-mintgroen-300: light-dark(oklch(0.707 0.098 172.0), oklch(0.411 0.081 172.0)); /* light: #58B49A | dark: #005846 */
	--primitives-color-mintgroen-350: light-dark(oklch(0.665 0.098 172.0), oklch(0.446 0.088 172.0)); /* light: #4AA78D | dark: #00634F */
	--primitives-color-mintgroen-400: light-dark(oklch(0.627 0.098 172.0), oklch(0.480 0.094 172.0)); /* light: #3D9B82 | dark: #006E58 */
	--primitives-color-mintgroen-450: light-dark(oklch(0.588 0.098 172.0), oklch(0.516 0.098 172.0)); /* light: #2E8F76 | dark: #0A7961 */
	--primitives-color-mintgroen-500: light-dark(oklch(0.552 0.098 172.0), oklch(0.552 0.098 172.0)); /* light: #1F846C | dark: #1F846C */
	--primitives-color-mintgroen-550: light-dark(oklch(0.516 0.098 172.0), oklch(0.588 0.098 172.0)); /* light: #0A7961 | dark: #2E8F76 */
	--primitives-color-mintgroen-600: light-dark(oklch(0.480 0.094 172.0), oklch(0.627 0.098 172.0)); /* light: #006E58 | dark: #3D9B82 */
	--primitives-color-mintgroen-650: light-dark(oklch(0.446 0.088 172.0), oklch(0.665 0.098 172.0)); /* light: #00634F | dark: #4AA78D */
	--primitives-color-mintgroen-700: light-dark(oklch(0.411 0.081 172.0), oklch(0.707 0.098 172.0)); /* light: #005846 | dark: #58B49A */
	--primitives-color-mintgroen-750: light-dark(oklch(0.375 0.074 172.0), oklch(0.748 0.098 172.0)); /* light: #004D3C | dark: #65C2A6 */
	--primitives-color-mintgroen-800: light-dark(oklch(0.336 0.067 172.0), oklch(0.793 0.098 172.0)); /* light: #004233 | dark: #74D0B4 */
	--primitives-color-mintgroen-850: light-dark(oklch(0.299 0.060 172.0), oklch(0.842 0.077 172.0)); /* light: #00372A | dark: #96DCC5 */
	--primitives-color-mintgroen-900: light-dark(oklch(0.254 0.052 172.0), oklch(0.892 0.053 172.0)); /* light: #002A20 | dark: #B9E7D7 */
	--primitives-color-mintgroen-925: light-dark(oklch(0.229 0.041 172.0), oklch(0.918 0.041 172.0)); /* light: #03231A | dark: #CAEDE1 */
	--primitives-color-mintgroen-950: light-dark(oklch(0.199 0.029 172.0), oklch(0.943 0.029 172.0)); /* light: #061A14 | dark: #DAF3EA */
	--primitives-color-mintgroen-975: light-dark(oklch(0.155 0.017 172.0), oklch(0.972 0.017 172.0)); /* light: #050F0B | dark: #EBFAF4 */
	--primitives-color-mintgroen-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0)); /* light: #000000 | dark: #FFFFFF */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-scheme="light"]) {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

:root[data-scheme="dark"] {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root {
	color-scheme: light dark;

	/* # Primitives */

	/* ## Functional Colors */

	/* Descriptive palettes live in colors.generated.css.
	 * Each functional role points at a descriptive palette; override these
	 * aliases at :root level to theme the whole system. */

	/* ### Neutral */

	--primitives-color-neutral-0: var(--primitives-color-coolgray-0);
	--primitives-color-neutral-25: var(--primitives-color-coolgray-25);
	--primitives-color-neutral-50: var(--primitives-color-coolgray-50);
	--primitives-color-neutral-75: var(--primitives-color-coolgray-75);
	--primitives-color-neutral-100: var(--primitives-color-coolgray-100);
	--primitives-color-neutral-150: var(--primitives-color-coolgray-150);
	--primitives-color-neutral-200: var(--primitives-color-coolgray-200);
	--primitives-color-neutral-250: var(--primitives-color-coolgray-250);
	--primitives-color-neutral-300: var(--primitives-color-coolgray-300);
	--primitives-color-neutral-350: var(--primitives-color-coolgray-350);
	--primitives-color-neutral-400: var(--primitives-color-coolgray-400);
	--primitives-color-neutral-450: var(--primitives-color-coolgray-450);
	--primitives-color-neutral-500: var(--primitives-color-coolgray-500);
	--primitives-color-neutral-550: var(--primitives-color-coolgray-550);
	--primitives-color-neutral-600: var(--primitives-color-coolgray-600);
	--primitives-color-neutral-650: var(--primitives-color-coolgray-650);
	--primitives-color-neutral-700: var(--primitives-color-coolgray-700);
	--primitives-color-neutral-750: var(--primitives-color-coolgray-750);
	--primitives-color-neutral-800: var(--primitives-color-coolgray-800);
	--primitives-color-neutral-850: var(--primitives-color-coolgray-850);
	--primitives-color-neutral-900: var(--primitives-color-coolgray-900);
	--primitives-color-neutral-925: var(--primitives-color-coolgray-925);
	--primitives-color-neutral-950: var(--primitives-color-coolgray-950);
	--primitives-color-neutral-975: var(--primitives-color-coolgray-975);
	--primitives-color-neutral-1000: var(--primitives-color-coolgray-1000);

	/* ### Accent */

	--primitives-color-accent-0: var(--primitives-color-lintblauw-0);
	--primitives-color-accent-25: var(--primitives-color-lintblauw-25);
	--primitives-color-accent-50: var(--primitives-color-lintblauw-50);
	--primitives-color-accent-75: var(--primitives-color-lintblauw-75);
	--primitives-color-accent-100: var(--primitives-color-lintblauw-100);
	--primitives-color-accent-150: var(--primitives-color-lintblauw-150);
	--primitives-color-accent-200: var(--primitives-color-lintblauw-200);
	--primitives-color-accent-250: var(--primitives-color-lintblauw-250);
	--primitives-color-accent-300: var(--primitives-color-lintblauw-300);
	--primitives-color-accent-350: var(--primitives-color-lintblauw-350);
	--primitives-color-accent-400: var(--primitives-color-lintblauw-400);
	--primitives-color-accent-450: var(--primitives-color-lintblauw-450);
	--primitives-color-accent-500: var(--primitives-color-lintblauw-500);
	--primitives-color-accent-550: var(--primitives-color-lintblauw-550);
	--primitives-color-accent-600: var(--primitives-color-lintblauw-600);
	--primitives-color-accent-650: var(--primitives-color-lintblauw-650);
	--primitives-color-accent-700: var(--primitives-color-lintblauw-700);
	--primitives-color-accent-750: var(--primitives-color-lintblauw-750);
	--primitives-color-accent-800: var(--primitives-color-lintblauw-800);
	--primitives-color-accent-850: var(--primitives-color-lintblauw-850);
	--primitives-color-accent-900: var(--primitives-color-lintblauw-900);
	--primitives-color-accent-925: var(--primitives-color-lintblauw-925);
	--primitives-color-accent-950: var(--primitives-color-lintblauw-950);
	--primitives-color-accent-975: var(--primitives-color-lintblauw-975);
	--primitives-color-accent-1000: var(--primitives-color-lintblauw-1000);

	/* ### Success */

	--primitives-color-success-0: var(--primitives-color-groen-0);
	--primitives-color-success-25: var(--primitives-color-groen-25);
	--primitives-color-success-50: var(--primitives-color-groen-50);
	--primitives-color-success-75: var(--primitives-color-groen-75);
	--primitives-color-success-100: var(--primitives-color-groen-100);
	--primitives-color-success-150: var(--primitives-color-groen-150);
	--primitives-color-success-200: var(--primitives-color-groen-200);
	--primitives-color-success-250: var(--primitives-color-groen-250);
	--primitives-color-success-300: var(--primitives-color-groen-300);
	--primitives-color-success-350: var(--primitives-color-groen-350);
	--primitives-color-success-400: var(--primitives-color-groen-400);
	--primitives-color-success-450: var(--primitives-color-groen-450);
	--primitives-color-success-500: var(--primitives-color-groen-500);
	--primitives-color-success-550: var(--primitives-color-groen-550);
	--primitives-color-success-600: var(--primitives-color-groen-600);
	--primitives-color-success-650: var(--primitives-color-groen-650);
	--primitives-color-success-700: var(--primitives-color-groen-700);
	--primitives-color-success-750: var(--primitives-color-groen-750);
	--primitives-color-success-800: var(--primitives-color-groen-800);
	--primitives-color-success-850: var(--primitives-color-groen-850);
	--primitives-color-success-900: var(--primitives-color-groen-900);
	--primitives-color-success-925: var(--primitives-color-groen-925);
	--primitives-color-success-950: var(--primitives-color-groen-950);
	--primitives-color-success-975: var(--primitives-color-groen-975);
	--primitives-color-success-1000: var(--primitives-color-groen-1000);

	/* ### Warning */

	--primitives-color-warning-0: var(--primitives-color-oranje-0);
	--primitives-color-warning-25: var(--primitives-color-oranje-25);
	--primitives-color-warning-50: var(--primitives-color-oranje-50);
	--primitives-color-warning-75: var(--primitives-color-oranje-75);
	--primitives-color-warning-100: var(--primitives-color-oranje-100);
	--primitives-color-warning-150: var(--primitives-color-oranje-150);
	--primitives-color-warning-200: var(--primitives-color-oranje-200);
	--primitives-color-warning-250: var(--primitives-color-oranje-250);
	--primitives-color-warning-300: var(--primitives-color-oranje-300);
	--primitives-color-warning-350: var(--primitives-color-oranje-350);
	--primitives-color-warning-400: var(--primitives-color-oranje-400);
	--primitives-color-warning-450: var(--primitives-color-oranje-450);
	--primitives-color-warning-500: var(--primitives-color-oranje-500);
	--primitives-color-warning-550: var(--primitives-color-oranje-550);
	--primitives-color-warning-600: var(--primitives-color-oranje-600);
	--primitives-color-warning-650: var(--primitives-color-oranje-650);
	--primitives-color-warning-700: var(--primitives-color-oranje-700);
	--primitives-color-warning-750: var(--primitives-color-oranje-750);
	--primitives-color-warning-800: var(--primitives-color-oranje-800);
	--primitives-color-warning-850: var(--primitives-color-oranje-850);
	--primitives-color-warning-900: var(--primitives-color-oranje-900);
	--primitives-color-warning-925: var(--primitives-color-oranje-925);
	--primitives-color-warning-950: var(--primitives-color-oranje-950);
	--primitives-color-warning-975: var(--primitives-color-oranje-975);
	--primitives-color-warning-1000: var(--primitives-color-oranje-1000);

	/* ### Critical */

	--primitives-color-critical-0: var(--primitives-color-rood-0);
	--primitives-color-critical-25: var(--primitives-color-rood-25);
	--primitives-color-critical-50: var(--primitives-color-rood-50);
	--primitives-color-critical-75: var(--primitives-color-rood-75);
	--primitives-color-critical-100: var(--primitives-color-rood-100);
	--primitives-color-critical-150: var(--primitives-color-rood-150);
	--primitives-color-critical-200: var(--primitives-color-rood-200);
	--primitives-color-critical-250: var(--primitives-color-rood-250);
	--primitives-color-critical-300: var(--primitives-color-rood-300);
	--primitives-color-critical-350: var(--primitives-color-rood-350);
	--primitives-color-critical-400: var(--primitives-color-rood-400);
	--primitives-color-critical-450: var(--primitives-color-rood-450);
	--primitives-color-critical-500: var(--primitives-color-rood-500);
	--primitives-color-critical-550: var(--primitives-color-rood-550);
	--primitives-color-critical-600: var(--primitives-color-rood-600);
	--primitives-color-critical-650: var(--primitives-color-rood-650);
	--primitives-color-critical-700: var(--primitives-color-rood-700);
	--primitives-color-critical-750: var(--primitives-color-rood-750);
	--primitives-color-critical-800: var(--primitives-color-rood-800);
	--primitives-color-critical-850: var(--primitives-color-rood-850);
	--primitives-color-critical-900: var(--primitives-color-rood-900);
	--primitives-color-critical-925: var(--primitives-color-rood-925);
	--primitives-color-critical-950: var(--primitives-color-rood-950);
	--primitives-color-critical-975: var(--primitives-color-rood-975);
	--primitives-color-critical-1000: var(--primitives-color-rood-1000);

	/* ### Mark */

	--primitives-color-mark-0: var(--primitives-color-donkergeel-0);
	--primitives-color-mark-25: var(--primitives-color-donkergeel-25);
	--primitives-color-mark-50: var(--primitives-color-donkergeel-50);
	--primitives-color-mark-75: var(--primitives-color-donkergeel-75);
	--primitives-color-mark-100: var(--primitives-color-donkergeel-100);
	--primitives-color-mark-150: var(--primitives-color-donkergeel-150);
	--primitives-color-mark-200: var(--primitives-color-donkergeel-200);
	--primitives-color-mark-250: var(--primitives-color-donkergeel-250);
	--primitives-color-mark-300: var(--primitives-color-donkergeel-300);
	--primitives-color-mark-350: var(--primitives-color-donkergeel-350);
	--primitives-color-mark-400: var(--primitives-color-donkergeel-400);
	--primitives-color-mark-450: var(--primitives-color-donkergeel-450);
	--primitives-color-mark-500: var(--primitives-color-donkergeel-500);
	--primitives-color-mark-550: var(--primitives-color-donkergeel-550);
	--primitives-color-mark-600: var(--primitives-color-donkergeel-600);
	--primitives-color-mark-650: var(--primitives-color-donkergeel-650);
	--primitives-color-mark-700: var(--primitives-color-donkergeel-700);
	--primitives-color-mark-750: var(--primitives-color-donkergeel-750);
	--primitives-color-mark-800: var(--primitives-color-donkergeel-800);
	--primitives-color-mark-850: var(--primitives-color-donkergeel-850);
	--primitives-color-mark-900: var(--primitives-color-donkergeel-900);
	--primitives-color-mark-925: var(--primitives-color-donkergeel-925);
	--primitives-color-mark-950: var(--primitives-color-donkergeel-950);
	--primitives-color-mark-975: var(--primitives-color-donkergeel-975);
	--primitives-color-mark-1000: var(--primitives-color-donkergeel-1000);

	--primitives-color-reference-coolgray: #64748b;
	--primitives-color-reference-lintblauw: #154273;
	--primitives-color-reference-paars: #42145f;
	--primitives-color-reference-violet: #a90061;
	--primitives-color-reference-robijnrood: #ca005d;
	--primitives-color-reference-roze: #f092cd;
	--primitives-color-reference-rood: #d52b1e;
	--primitives-color-reference-oranje: #e17000;
	--primitives-color-reference-donkergeel: #ffb612;
	--primitives-color-reference-geel: #f9e11e;
	--primitives-color-reference-donkerbruin: #673327;
	--primitives-color-reference-bruin: #94710a;
	--primitives-color-reference-donkergroen: #275937;
	--primitives-color-reference-groen: #39870c;
	--primitives-color-reference-mosgroen: #777b00;
	--primitives-color-reference-mintgroen: #76d2b6;
	--primitives-color-reference-donkerblauw: #01689b;
	--primitives-color-reference-hemelblauw: #007bc7;
	--primitives-color-reference-lichtblauw: #8fcae7;

	/* ## Spacing */

	--primitives-space-0: 0px;
	--primitives-space-1: 1px;
	--primitives-space-2: 2px;
	--primitives-space-3: 3px;
	--primitives-space-4: 4px;
	--primitives-space-6: 6px;
	--primitives-space-8: 8px;
	--primitives-space-10: 10px;
	--primitives-space-12: 12px;
	--primitives-space-14: 14px;
	--primitives-space-16: 16px;
	--primitives-space-18: 18px;
	--primitives-space-20: 20px;
	--primitives-space-24: 24px;
	--primitives-space-28: 28px;
	--primitives-space-32: 32px;
	--primitives-space-40: 40px;
	--primitives-space-44: 44px;
	--primitives-space-48: 48px;
	--primitives-space-56: 56px;
	--primitives-space-64: 64px;
	--primitives-space-80: 80px;
	--primitives-space-96: 96px;

	/* ## Area */

	--primitives-area-120: 120px;
	--primitives-area-160: 160px;
	--primitives-area-200: 200px;
	--primitives-area-240: 240px;
	--primitives-area-280: 280px;
	--primitives-area-320: 320px;
	--primitives-area-360: 360px;
	--primitives-area-400: 400px;
	--primitives-area-480: 480px;
	--primitives-area-640: 640px;
	--primitives-area-720: 720px;
	--primitives-area-800: 800px;
	--primitives-area-960: 960px;
	--primitives-area-1280: 1280px;
	--primitives-area-1440: 1440px;

	/* ## Border width */

	--primitives-border-width-thin: 1px;
	--primitives-border-width-regular: 2px;

	/* ## Corner radius */

	--primitives-corner-radius-none: 0px;
	--primitives-corner-radius-xxs: 3px;
	--primitives-corner-radius-xs: 4px;
	--primitives-corner-radius-sm: 6px;
	--primitives-corner-radius-md: 8px;
	--primitives-corner-radius-lg: 10px;
	--primitives-corner-radius-xl: 12px;
	--primitives-corner-radius-xxl: 16px;
	--primitives-corner-radius-xxxl: 24px;
	--primitives-corner-radius-full: 9999px;

	/* ## Typography */

	/* Each stack ends in a system font, so the browser falls through on its own
	   when the @font-face rules are absent (see rijksoverheid-fonts.css).
	   Override these two to swap the bundled fonts out entirely: an @font-face
	   nothing refers to is never downloaded. */
	--primitives-font-family-sans-serif: RijksSans, system-ui, sans-serif;
	--primitives-font-family-monospace: 'JetBrains Mono', ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	--primitives-font-family-body: var(--primitives-font-family-sans-serif);
	--primitives-font-family-display: var(--primitives-font-family-sans-serif);

	--primitives-font-size-70: 0.79rem;    /* ~13px */
	--primitives-font-size-80: 0.889rem;   /* ~14px */
	--primitives-font-size-90: 1rem;       /* ~16px */
	--primitives-font-size-100: 1.125rem;  /* ~18px */
	--primitives-font-size-200: 1.266rem;  /* ~20px */
	--primitives-font-size-300: 1.424rem;  /* ~23px */
	--primitives-font-size-400: 1.602rem;  /* ~26px */
	--primitives-font-size-500: 1.802rem;  /* ~29px */
	--primitives-font-size-600: 2.027rem;  /* ~32px */
	--primitives-font-size-700: 2.280rem;  /* ~36px */
	--primitives-font-size-800: 2.566rem;  /* ~41px */
	--primitives-font-size-900: 2.887rem;  /* ~46px */
	--primitives-font-size-1000: 3.247rem; /* ~52px */

	--primitives-font-weight-body-hairline: 100;
	--primitives-font-weight-body-thin: 200;
	--primitives-font-weight-body-light: 300;
	--primitives-font-weight-body-regular: 400;
	--primitives-font-weight-body-medium: 475;
	--primitives-font-weight-body-semi-bold: 550;
	--primitives-font-weight-body-bold: 600;
	--primitives-font-weight-body-extra-bold: 700;
	--primitives-font-weight-body-black: 800;

	--primitives-font-weight-display-hairline: 100;
	--primitives-font-weight-display-thin: 200;
	--primitives-font-weight-display-light: 300;
	--primitives-font-weight-display-regular: 400;
	--primitives-font-weight-display-medium: 475;
	--primitives-font-weight-display-semi-bold: 550;
	--primitives-font-weight-display-bold: 600;
	--primitives-font-weight-display-extra-bold: 700;
	--primitives-font-weight-display-black: 800;

	--primitives-line-height-loose: 1.75;
	--primitives-line-height-snug: 1.5;
	--primitives-line-height-tight: 1.25;
	--primitives-line-height-flat: 1.125;

	--primitives-font-body-lg-regular-loose:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-200) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-200) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-regular-tight:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-200) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-medium-loose:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-200) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-medium-snug:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-200) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-medium-tight:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-200) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-medium-flat:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-semi-bold-loose:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-semi-bold-snug:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-semi-bold-tight:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-semi-bold-flat:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-bold-loose:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-bold-snug:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-bold-tight:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-lg-bold-flat:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-regular-loose:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-100) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-100) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-regular-tight:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-100) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-medium-loose:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-100) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-medium-snug:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-100) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-medium-tight:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-100) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-medium-flat:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-semi-bold-loose:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-semi-bold-snug:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-semi-bold-tight:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-semi-bold-flat:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-bold-loose:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-bold-snug:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-bold-tight:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-md-bold-flat:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-regular-loose:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-90) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-90) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-regular-tight:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-90) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-90) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-medium-loose:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-90) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-medium-snug:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-90) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-medium-tight:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-90) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-medium-flat:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-90) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-semi-bold-loose:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-semi-bold-snug:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-semi-bold-tight:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-semi-bold-flat:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-bold-loose:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-bold-snug:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-bold-tight:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-sm-bold-flat:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-90) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-regular-loose:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-80) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-80) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-regular-tight:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-80) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-80) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-medium-loose:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-80) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-medium-snug:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-80) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-medium-tight:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-80) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-medium-flat:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-80) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-semi-bold-loose:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-semi-bold-snug:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-semi-bold-tight:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-semi-bold-flat:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-bold-loose:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-bold-snug:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-bold-tight:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xs-bold-flat:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-80) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-regular-loose:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-70) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-70) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-regular-tight:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-70) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-70) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-medium-loose:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-70) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-medium-snug:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-70) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-medium-tight:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-70) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-medium-flat:
		var(--primitives-font-weight-body-medium)
		var(--primitives-font-size-70) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-semi-bold-loose:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-semi-bold-snug:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-semi-bold-tight:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-semi-bold-flat:
		var(--primitives-font-weight-body-semi-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-bold-loose:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-loose)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-bold-snug:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-bold-tight:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-tight)
		var(--primitives-font-family-body)
	;
	--primitives-font-body-xxs-bold-flat:
		var(--primitives-font-weight-body-bold)
		var(--primitives-font-size-70) / var(--primitives-line-height-flat)
		var(--primitives-font-family-body)
	;

	/* Monospace tokens use one font-size step smaller than the matching body
	   size. Constant character widths in monospace render denser than
	   proportional fonts, so monospace-md sits visually next to body-md
	   while using font-size-90 (16px) instead of -100 (18px). */
	--primitives-font-monospace-md-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-90) / var(--primitives-line-height-snug)
		var(--primitives-font-family-monospace)
	;
	--primitives-font-monospace-md-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-90) / var(--primitives-line-height-flat)
		var(--primitives-font-family-monospace)
	;
	--primitives-font-monospace-sm-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-80) / var(--primitives-line-height-snug)
		var(--primitives-font-family-monospace)
	;
	--primitives-font-monospace-sm-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-80) / var(--primitives-line-height-flat)
		var(--primitives-font-family-monospace)
	;
	--primitives-font-monospace-xs-regular-snug:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-70) / var(--primitives-line-height-snug)
		var(--primitives-font-family-monospace)
	;
	--primitives-font-monospace-xs-regular-flat:
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-70) / var(--primitives-line-height-flat)
		var(--primitives-font-family-monospace)
	;

	--primitives-font-display-1-sm:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-700) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-1-md:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-800) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-1-lg:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-1000) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-2-sm:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-500) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-2-md:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-600) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-2-lg:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-800) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-3-sm:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-400) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-3-md:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-400) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-3-lg:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-600) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-4-sm:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-300) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-4-md:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-300) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-4-lg:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-400) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-5-sm:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-5-md:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-5-lg:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-200) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-6-sm:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-6-md:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;
	--primitives-font-display-6-lg:
		var(--primitives-font-weight-display-bold)
		var(--primitives-font-size-100) / var(--primitives-line-height-flat)
		var(--primitives-font-family-display)
	;

	/* ## Opacity */

	--primitives-opacity-0: 0;
	--primitives-opacity-5: 0.05;
	--primitives-opacity-10: 0.1;
	--primitives-opacity-15: 0.15;
	--primitives-opacity-20: 0.2;
	--primitives-opacity-25: 0.25;
	--primitives-opacity-30: 0.3;
	--primitives-opacity-35: 0.35;
	--primitives-opacity-40: 0.4;
	--primitives-opacity-45: 0.45;
	--primitives-opacity-50: 0.5;
	--primitives-opacity-55: 0.55;
	--primitives-opacity-60: 0.6;
	--primitives-opacity-65: 0.65;
	--primitives-opacity-70: 0.7;
	--primitives-opacity-75: 0.75;
	--primitives-opacity-80: 0.8;
	--primitives-opacity-85: 0.85;
	--primitives-opacity-90: 0.9;
	--primitives-opacity-95: 0.95;
	--primitives-opacity-100: 1;
	--primitives-opacity-disabled: 0.38;

	/* ## Transition */

	--primitives-transition-duration-fast: 150ms;
	--primitives-transition-duration-medium: 200ms;
	--primitives-transition-duration-slow: 300ms;
	--primitives-transition-easing-default: ease-out;

	/* ## Box shadow */

	--primitives-box-shadows-level-1:
		0px 2px 4px 0px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.33)),
		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.27))
	;
	--primitives-box-shadows-level-2:
		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.30)),
		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18))
	;
	--primitives-box-shadows-level-3:
		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36)),
		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)),
		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))
	;
	--primitives-box-shadows-level-4:
		0px 8px 32px 0px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.30)),
		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06))
	;
	--primitives-box-shadows-level-5:
		0px 16px 64px 0px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.33)),
		0px 8px 32px 0px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.27)),
		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.09)),
		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06))
	;
	--primitives-box-shadows-level-6:
		0px 32px 128px 0px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48)),
		0px 16px 64px 0px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.30)),
		0px 8px 32px 0px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.09)),
		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06))
	;


	/* # Semantics */

	/* ## Brand
	   Width of the rijkslogo ribbon (wapenlint); per the rijkshuisstijl this
	   measure also drives the rounded-corner radius of shape elements
	   (0.5X-3X of the ribbon width). */

	--semantics-brand-ribbon-sm-width: var(--primitives-space-40);
	--semantics-brand-ribbon-md-width: var(--primitives-space-44);
	--semantics-brand-ribbon-lg-width: var(--primitives-space-48);

	/* ## Dividers */

	--semantics-dividers-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
	--semantics-dividers-thickness: var(--primitives-border-width-thin);

	/* ## Surfaces */

	--semantics-surfaces-border-width: var(--semantics-dividers-thickness);
	--semantics-surfaces-corner-radius: var(--primitives-corner-radius-lg);
	--semantics-surfaces-ring-thickness: var(--primitives-border-width-regular);
	--semantics-surfaces-base-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-100));
	--semantics-surfaces-base-border-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
	--semantics-surfaces-tinted-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-75));
	--semantics-surfaces-tinted-border-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));

	/* ## Text */

	--semantics-text-max-width: 40em;


	/* ## Content */

	--semantics-content-color: light-dark(var(--primitives-color-neutral-800), var(--primitives-color-neutral-900));
	--semantics-content-secondary-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
	--semantics-content-secondary-opacity: 75%;
	/* Black or white on the current color, whichever reads. The threshold is the
	   relative luminance where the two give the same contrast, Y = (sqrt(21) - 1) / 20,
	   so the one that is picked always clears 4.5:1. Lightness would be the wrong
	   input: it is perceptual, and it parts ways with luminance per hue. `/ 1` keeps
	   the text opaque on a translucent fill. Replaced by contrast-color() below
	   wherever the browser has it. */
	--semantics-content-contrast-color: color(from currentColor xyz clamp(0, (0.1791 / y - 1) * infinity, 1) clamp(0, (0.1791 / y - 1) * infinity, 1) clamp(0, (0.1791 / y - 1) * infinity, 1) / 1);

	/* The same question asked of the engine, which knows the rendered color
	   rather than the one a formula can reach. Nested here so both halves of the
	   answer stand together. */
	@supports (color: contrast-color(red)) {
		--semantics-content-contrast-color: contrast-color(currentColor);
	}

	--semantics-content-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
	--semantics-content-critical-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
	--semantics-content-warning-color: light-dark(var(--primitives-color-warning-600), var(--primitives-color-warning-650));
	--semantics-content-success-color: light-dark(var(--primitives-color-success-600), var(--primitives-color-success-650));
	--semantics-content-mark-background-color: light-dark(var(--primitives-color-mark-100), var(--primitives-color-mark-200));
	--semantics-content-mark-color: light-dark(var(--primitives-color-mark-900), var(--primitives-color-mark-800));

	/* ## Categories
	   Distinguishing colors that tell groups apart, per color in three styles:
	   - filled:    saturated field (badges, progress-bar segments)
	   - tinted:    soft tint with colored text (tags, banner)
	   - reference: the actual rijkshuisstijl brand color, identical in light and dark (hero)
	   Every style has a background, a highlight-border and primary and secondary content. */

	/* neutral */
	--semantics-categories-neutral-filled-background-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-450));
	--semantics-categories-neutral-filled-highlight-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-500));
	--semantics-categories-neutral-filled-content-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-1000));
	--semantics-categories-neutral-filled-content-secondary-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-1000));
	--semantics-categories-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
	--semantics-categories-neutral-tinted-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
	--semantics-categories-neutral-tinted-content-color: var(--primitives-color-neutral-750);
	--semantics-categories-neutral-tinted-content-secondary-color: var(--primitives-color-neutral-750);
	--semantics-categories-neutral-reference-background-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-400));
	--semantics-categories-neutral-reference-highlight-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-450));
	--semantics-categories-neutral-reference-content-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-1000));
	--semantics-categories-neutral-reference-content-secondary-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-1000));

	/* accent */
	--semantics-categories-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-400));
	--semantics-categories-accent-filled-highlight-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-500));
	--semantics-categories-accent-filled-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-1000));
	--semantics-categories-accent-filled-content-secondary-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-1000));
	--semantics-categories-accent-tinted-background-color: light-dark(var(--primitives-color-accent-50), var(--primitives-color-accent-75));
	--semantics-categories-accent-tinted-highlight-border-color: light-dark(var(--primitives-color-accent-100), var(--primitives-color-accent-150));
	--semantics-categories-accent-tinted-content-color: var(--primitives-color-accent-700);
	--semantics-categories-accent-tinted-content-secondary-color: var(--primitives-color-accent-700);
	--semantics-categories-accent-reference-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-250));
	--semantics-categories-accent-reference-highlight-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-200));
	--semantics-categories-accent-reference-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-1000));
	--semantics-categories-accent-reference-content-secondary-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-1000));

	/* critical */
	--semantics-categories-critical-filled-background-color: light-dark(var(--primitives-color-critical-650), var(--primitives-color-critical-450));
	--semantics-categories-critical-filled-highlight-border-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-500));
	--semantics-categories-critical-filled-content-color: light-dark(var(--primitives-color-critical-0), var(--primitives-color-critical-1000));
	--semantics-categories-critical-filled-content-secondary-color: light-dark(var(--primitives-color-critical-0), var(--primitives-color-critical-1000));
	--semantics-categories-critical-tinted-background-color: light-dark(var(--primitives-color-critical-50), var(--primitives-color-critical-75));
	--semantics-categories-critical-tinted-highlight-border-color: light-dark(var(--primitives-color-critical-100), var(--primitives-color-critical-150));
	--semantics-categories-critical-tinted-content-color: var(--primitives-color-critical-600);
	--semantics-categories-critical-tinted-content-secondary-color: var(--primitives-color-critical-600);
	--semantics-categories-critical-reference-background-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-450));
	--semantics-categories-critical-reference-highlight-border-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-400));
	--semantics-categories-critical-reference-content-color: light-dark(var(--primitives-color-critical-0), var(--primitives-color-critical-1000));
	--semantics-categories-critical-reference-content-secondary-color: light-dark(var(--primitives-color-critical-0), var(--primitives-color-critical-1000));

	/* warning */
	--semantics-categories-warning-filled-background-color: light-dark(var(--primitives-color-warning-400), var(--primitives-color-warning-600));
	--semantics-categories-warning-filled-highlight-border-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-650));
	--semantics-categories-warning-filled-content-color: light-dark(var(--primitives-color-warning-1000), var(--primitives-color-warning-0));
	--semantics-categories-warning-filled-content-secondary-color: light-dark(var(--primitives-color-warning-1000), var(--primitives-color-warning-0));
	--semantics-categories-warning-tinted-background-color: light-dark(var(--primitives-color-warning-50), var(--primitives-color-warning-75));
	--semantics-categories-warning-tinted-highlight-border-color: light-dark(var(--primitives-color-warning-100), var(--primitives-color-warning-150));
	--semantics-categories-warning-tinted-content-color: var(--primitives-color-warning-650);
	--semantics-categories-warning-tinted-content-secondary-color: var(--primitives-color-warning-650);
	--semantics-categories-warning-reference-background-color: light-dark(var(--primitives-color-warning-400), var(--primitives-color-warning-600));
	--semantics-categories-warning-reference-highlight-border-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-550));
	--semantics-categories-warning-reference-content-color: light-dark(var(--primitives-color-warning-1000), var(--primitives-color-warning-0));
	--semantics-categories-warning-reference-content-secondary-color: light-dark(var(--primitives-color-warning-1000), var(--primitives-color-warning-0));

	/* success */
	--semantics-categories-success-filled-background-color: var(--primitives-color-success-500);
	--semantics-categories-success-filled-highlight-border-color: var(--primitives-color-success-550);
	--semantics-categories-success-filled-content-color: light-dark(var(--primitives-color-success-0), var(--primitives-color-success-1000));
	--semantics-categories-success-filled-content-secondary-color: light-dark(var(--primitives-color-success-0), var(--primitives-color-success-1000));
	--semantics-categories-success-tinted-background-color: light-dark(var(--primitives-color-success-50), var(--primitives-color-success-75));
	--semantics-categories-success-tinted-highlight-border-color: light-dark(var(--primitives-color-success-100), var(--primitives-color-success-150));
	--semantics-categories-success-tinted-content-color: var(--primitives-color-success-650);
	--semantics-categories-success-tinted-content-secondary-color: var(--primitives-color-success-650);
	--semantics-categories-success-reference-background-color: var(--primitives-color-success-500);
	--semantics-categories-success-reference-highlight-border-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-450));
	--semantics-categories-success-reference-content-color: light-dark(var(--primitives-color-success-0), var(--primitives-color-success-1000));
	--semantics-categories-success-reference-content-secondary-color: light-dark(var(--primitives-color-success-0), var(--primitives-color-success-1000));

	/* lintblauw */
	--semantics-categories-lintblauw-filled-background-color: light-dark(var(--primitives-color-lintblauw-750), var(--primitives-color-lintblauw-400));
	--semantics-categories-lintblauw-filled-highlight-border-color: light-dark(var(--primitives-color-lintblauw-800), var(--primitives-color-lintblauw-500));
	--semantics-categories-lintblauw-filled-content-color: light-dark(var(--primitives-color-lintblauw-0), var(--primitives-color-lintblauw-1000));
	--semantics-categories-lintblauw-filled-content-secondary-color: light-dark(var(--primitives-color-lintblauw-0), var(--primitives-color-lintblauw-1000));
	--semantics-categories-lintblauw-tinted-background-color: light-dark(var(--primitives-color-lintblauw-50), var(--primitives-color-lintblauw-75));
	--semantics-categories-lintblauw-tinted-highlight-border-color: light-dark(var(--primitives-color-lintblauw-100), var(--primitives-color-lintblauw-150));
	--semantics-categories-lintblauw-tinted-content-color: var(--primitives-color-lintblauw-700);
	--semantics-categories-lintblauw-tinted-content-secondary-color: var(--primitives-color-lintblauw-700);
	--semantics-categories-lintblauw-reference-background-color: light-dark(var(--primitives-color-lintblauw-750), var(--primitives-color-lintblauw-250));
	--semantics-categories-lintblauw-reference-highlight-border-color: light-dark(var(--primitives-color-lintblauw-800), var(--primitives-color-lintblauw-200));
	--semantics-categories-lintblauw-reference-content-color: light-dark(var(--primitives-color-lintblauw-0), var(--primitives-color-lintblauw-1000));
	--semantics-categories-lintblauw-reference-content-secondary-color: light-dark(var(--primitives-color-lintblauw-0), var(--primitives-color-lintblauw-1000));

	/* donkerblauw */
	--semantics-categories-donkerblauw-filled-background-color: light-dark(var(--primitives-color-donkerblauw-600), var(--primitives-color-donkerblauw-400));
	--semantics-categories-donkerblauw-filled-highlight-border-color: light-dark(var(--primitives-color-donkerblauw-650), var(--primitives-color-donkerblauw-500));
	--semantics-categories-donkerblauw-filled-content-color: light-dark(var(--primitives-color-donkerblauw-0), var(--primitives-color-donkerblauw-1000));
	--semantics-categories-donkerblauw-filled-content-secondary-color: light-dark(var(--primitives-color-donkerblauw-0), var(--primitives-color-donkerblauw-1000));
	--semantics-categories-donkerblauw-tinted-background-color: light-dark(var(--primitives-color-donkerblauw-50), var(--primitives-color-donkerblauw-75));
	--semantics-categories-donkerblauw-tinted-highlight-border-color: light-dark(var(--primitives-color-donkerblauw-100), var(--primitives-color-donkerblauw-150));
	--semantics-categories-donkerblauw-tinted-content-color: var(--primitives-color-donkerblauw-700);
	--semantics-categories-donkerblauw-tinted-content-secondary-color: var(--primitives-color-donkerblauw-700);
	--semantics-categories-donkerblauw-reference-background-color: light-dark(var(--primitives-color-donkerblauw-600), var(--primitives-color-donkerblauw-400));
	--semantics-categories-donkerblauw-reference-highlight-border-color: light-dark(var(--primitives-color-donkerblauw-650), var(--primitives-color-donkerblauw-350));
	--semantics-categories-donkerblauw-reference-content-color: light-dark(var(--primitives-color-donkerblauw-0), var(--primitives-color-donkerblauw-1000));
	--semantics-categories-donkerblauw-reference-content-secondary-color: light-dark(var(--primitives-color-donkerblauw-0), var(--primitives-color-donkerblauw-1000));

	/* hemelblauw */
	--semantics-categories-hemelblauw-filled-background-color: var(--primitives-color-hemelblauw-500);
	--semantics-categories-hemelblauw-filled-highlight-border-color: var(--primitives-color-hemelblauw-550);
	--semantics-categories-hemelblauw-filled-content-color: light-dark(var(--primitives-color-hemelblauw-0), var(--primitives-color-hemelblauw-1000));
	--semantics-categories-hemelblauw-filled-content-secondary-color: light-dark(var(--primitives-color-hemelblauw-0), var(--primitives-color-hemelblauw-1000));
	--semantics-categories-hemelblauw-tinted-background-color: light-dark(var(--primitives-color-hemelblauw-50), var(--primitives-color-hemelblauw-75));
	--semantics-categories-hemelblauw-tinted-highlight-border-color: light-dark(var(--primitives-color-hemelblauw-100), var(--primitives-color-hemelblauw-150));
	--semantics-categories-hemelblauw-tinted-content-color: var(--primitives-color-hemelblauw-650);
	--semantics-categories-hemelblauw-tinted-content-secondary-color: var(--primitives-color-hemelblauw-650);
	--semantics-categories-hemelblauw-reference-background-color: var(--primitives-color-hemelblauw-500);
	--semantics-categories-hemelblauw-reference-highlight-border-color: light-dark(var(--primitives-color-hemelblauw-550), var(--primitives-color-hemelblauw-450));
	--semantics-categories-hemelblauw-reference-content-color: light-dark(var(--primitives-color-hemelblauw-0), var(--primitives-color-hemelblauw-1000));
	--semantics-categories-hemelblauw-reference-content-secondary-color: light-dark(var(--primitives-color-hemelblauw-0), var(--primitives-color-hemelblauw-1000));

	/* lichtblauw */
	--semantics-categories-lichtblauw-filled-background-color: light-dark(var(--primitives-color-lichtblauw-350), var(--primitives-color-lichtblauw-800));
	--semantics-categories-lichtblauw-filled-highlight-border-color: light-dark(var(--primitives-color-lichtblauw-450), var(--primitives-color-lichtblauw-850));
	--semantics-categories-lichtblauw-filled-content-color: light-dark(var(--primitives-color-lichtblauw-1000), var(--primitives-color-lichtblauw-0));
	--semantics-categories-lichtblauw-filled-content-secondary-color: light-dark(var(--primitives-color-lichtblauw-1000), var(--primitives-color-lichtblauw-0));
	--semantics-categories-lichtblauw-tinted-background-color: light-dark(var(--primitives-color-lichtblauw-50), var(--primitives-color-lichtblauw-75));
	--semantics-categories-lichtblauw-tinted-highlight-border-color: light-dark(var(--primitives-color-lichtblauw-100), var(--primitives-color-lichtblauw-150));
	--semantics-categories-lichtblauw-tinted-content-color: var(--primitives-color-lichtblauw-650);
	--semantics-categories-lichtblauw-tinted-content-secondary-color: var(--primitives-color-lichtblauw-650);
	--semantics-categories-lichtblauw-reference-background-color: light-dark(var(--primitives-color-lichtblauw-200), var(--primitives-color-lichtblauw-800));
	--semantics-categories-lichtblauw-reference-highlight-border-color: light-dark(var(--primitives-color-lichtblauw-250), var(--primitives-color-lichtblauw-750));
	--semantics-categories-lichtblauw-reference-content-color: light-dark(var(--primitives-color-lichtblauw-1000), var(--primitives-color-lichtblauw-0));
	--semantics-categories-lichtblauw-reference-content-secondary-color: light-dark(var(--primitives-color-lichtblauw-1000), var(--primitives-color-lichtblauw-0));

	/* paars */
	--semantics-categories-paars-filled-background-color: light-dark(var(--primitives-color-paars-850), var(--primitives-color-paars-400));
	--semantics-categories-paars-filled-highlight-border-color: light-dark(var(--primitives-color-paars-900), var(--primitives-color-paars-500));
	--semantics-categories-paars-filled-content-color: light-dark(var(--primitives-color-paars-0), var(--primitives-color-paars-1000));
	--semantics-categories-paars-filled-content-secondary-color: light-dark(var(--primitives-color-paars-0), var(--primitives-color-paars-1000));
	--semantics-categories-paars-tinted-background-color: light-dark(var(--primitives-color-paars-50), var(--primitives-color-paars-75));
	--semantics-categories-paars-tinted-highlight-border-color: light-dark(var(--primitives-color-paars-100), var(--primitives-color-paars-150));
	--semantics-categories-paars-tinted-content-color: var(--primitives-color-paars-750);
	--semantics-categories-paars-tinted-content-secondary-color: var(--primitives-color-paars-750);
	--semantics-categories-paars-reference-background-color: light-dark(var(--primitives-color-paars-850), var(--primitives-color-paars-150));
	--semantics-categories-paars-reference-highlight-border-color: light-dark(var(--primitives-color-paars-900), var(--primitives-color-paars-100));
	--semantics-categories-paars-reference-content-color: light-dark(var(--primitives-color-paars-0), var(--primitives-color-paars-1000));
	--semantics-categories-paars-reference-content-secondary-color: light-dark(var(--primitives-color-paars-0), var(--primitives-color-paars-1000));

	/* violet */
	--semantics-categories-violet-filled-background-color: light-dark(var(--primitives-color-violet-650), var(--primitives-color-violet-400));
	--semantics-categories-violet-filled-highlight-border-color: light-dark(var(--primitives-color-violet-700), var(--primitives-color-violet-500));
	--semantics-categories-violet-filled-content-color: light-dark(var(--primitives-color-violet-0), var(--primitives-color-violet-1000));
	--semantics-categories-violet-filled-content-secondary-color: light-dark(var(--primitives-color-violet-0), var(--primitives-color-violet-1000));
	--semantics-categories-violet-tinted-background-color: light-dark(var(--primitives-color-violet-50), var(--primitives-color-violet-75));
	--semantics-categories-violet-tinted-highlight-border-color: light-dark(var(--primitives-color-violet-100), var(--primitives-color-violet-150));
	--semantics-categories-violet-tinted-content-color: var(--primitives-color-violet-650);
	--semantics-categories-violet-tinted-content-secondary-color: var(--primitives-color-violet-650);
	--semantics-categories-violet-reference-background-color: light-dark(var(--primitives-color-violet-650), var(--primitives-color-violet-350));
	--semantics-categories-violet-reference-highlight-border-color: light-dark(var(--primitives-color-violet-700), var(--primitives-color-violet-300));
	--semantics-categories-violet-reference-content-color: light-dark(var(--primitives-color-violet-0), var(--primitives-color-violet-1000));
	--semantics-categories-violet-reference-content-secondary-color: light-dark(var(--primitives-color-violet-0), var(--primitives-color-violet-1000));

	/* robijnrood */
	--semantics-categories-robijnrood-filled-background-color: light-dark(var(--primitives-color-robijnrood-600), var(--primitives-color-robijnrood-400));
	--semantics-categories-robijnrood-filled-highlight-border-color: light-dark(var(--primitives-color-robijnrood-650), var(--primitives-color-robijnrood-500));
	--semantics-categories-robijnrood-filled-content-color: light-dark(var(--primitives-color-robijnrood-0), var(--primitives-color-robijnrood-1000));
	--semantics-categories-robijnrood-filled-content-secondary-color: light-dark(var(--primitives-color-robijnrood-0), var(--primitives-color-robijnrood-1000));
	--semantics-categories-robijnrood-tinted-background-color: light-dark(var(--primitives-color-robijnrood-50), var(--primitives-color-robijnrood-75));
	--semantics-categories-robijnrood-tinted-highlight-border-color: light-dark(var(--primitives-color-robijnrood-100), var(--primitives-color-robijnrood-150));
	--semantics-categories-robijnrood-tinted-content-color: var(--primitives-color-robijnrood-600);
	--semantics-categories-robijnrood-tinted-content-secondary-color: var(--primitives-color-robijnrood-600);
	--semantics-categories-robijnrood-reference-background-color: light-dark(var(--primitives-color-robijnrood-550), var(--primitives-color-robijnrood-450));
	--semantics-categories-robijnrood-reference-highlight-border-color: light-dark(var(--primitives-color-robijnrood-600), var(--primitives-color-robijnrood-400));
	--semantics-categories-robijnrood-reference-content-color: light-dark(var(--primitives-color-robijnrood-0), var(--primitives-color-robijnrood-1000));
	--semantics-categories-robijnrood-reference-content-secondary-color: light-dark(var(--primitives-color-robijnrood-0), var(--primitives-color-robijnrood-1000));

	/* roze */
	--semantics-categories-roze-filled-background-color: light-dark(var(--primitives-color-roze-350), var(--primitives-color-roze-750));
	--semantics-categories-roze-filled-highlight-border-color: light-dark(var(--primitives-color-roze-450), var(--primitives-color-roze-800));
	--semantics-categories-roze-filled-content-color: light-dark(var(--primitives-color-roze-1000), var(--primitives-color-roze-0));
	--semantics-categories-roze-filled-content-secondary-color: light-dark(var(--primitives-color-roze-1000), var(--primitives-color-roze-0));
	--semantics-categories-roze-tinted-background-color: light-dark(var(--primitives-color-roze-50), var(--primitives-color-roze-75));
	--semantics-categories-roze-tinted-highlight-border-color: light-dark(var(--primitives-color-roze-100), var(--primitives-color-roze-150));
	--semantics-categories-roze-tinted-content-color: var(--primitives-color-roze-650);
	--semantics-categories-roze-tinted-content-secondary-color: var(--primitives-color-roze-650);
	--semantics-categories-roze-reference-background-color: light-dark(var(--primitives-color-roze-250), var(--primitives-color-roze-750));
	--semantics-categories-roze-reference-highlight-border-color: light-dark(var(--primitives-color-roze-300), var(--primitives-color-roze-700));
	--semantics-categories-roze-reference-content-color: light-dark(var(--primitives-color-roze-1000), var(--primitives-color-roze-0));
	--semantics-categories-roze-reference-content-secondary-color: light-dark(var(--primitives-color-roze-1000), var(--primitives-color-roze-0));

	/* rood */
	--semantics-categories-rood-filled-background-color: light-dark(var(--primitives-color-rood-550), var(--primitives-color-rood-450));
	--semantics-categories-rood-filled-highlight-border-color: light-dark(var(--primitives-color-rood-600), var(--primitives-color-rood-500));
	--semantics-categories-rood-filled-content-color: light-dark(var(--primitives-color-rood-0), var(--primitives-color-rood-1000));
	--semantics-categories-rood-filled-content-secondary-color: light-dark(var(--primitives-color-rood-0), var(--primitives-color-rood-1000));
	--semantics-categories-rood-tinted-background-color: light-dark(var(--primitives-color-rood-50), var(--primitives-color-rood-75));
	--semantics-categories-rood-tinted-highlight-border-color: light-dark(var(--primitives-color-rood-100), var(--primitives-color-rood-150));
	--semantics-categories-rood-tinted-content-color: var(--primitives-color-rood-600);
	--semantics-categories-rood-tinted-content-secondary-color: var(--primitives-color-rood-600);
	--semantics-categories-rood-reference-background-color: light-dark(var(--primitives-color-rood-550), var(--primitives-color-rood-450));
	--semantics-categories-rood-reference-highlight-border-color: light-dark(var(--primitives-color-rood-600), var(--primitives-color-rood-400));
	--semantics-categories-rood-reference-content-color: light-dark(var(--primitives-color-rood-0), var(--primitives-color-rood-1000));
	--semantics-categories-rood-reference-content-secondary-color: light-dark(var(--primitives-color-rood-0), var(--primitives-color-rood-1000));

	/* oranje */
	--semantics-categories-oranje-filled-background-color: light-dark(var(--primitives-color-oranje-400), var(--primitives-color-oranje-600));
	--semantics-categories-oranje-filled-highlight-border-color: light-dark(var(--primitives-color-oranje-450), var(--primitives-color-oranje-650));
	--semantics-categories-oranje-filled-content-color: light-dark(var(--primitives-color-oranje-1000), var(--primitives-color-oranje-0));
	--semantics-categories-oranje-filled-content-secondary-color: light-dark(var(--primitives-color-oranje-1000), var(--primitives-color-oranje-0));
	--semantics-categories-oranje-tinted-background-color: light-dark(var(--primitives-color-oranje-50), var(--primitives-color-oranje-75));
	--semantics-categories-oranje-tinted-highlight-border-color: light-dark(var(--primitives-color-oranje-100), var(--primitives-color-oranje-150));
	--semantics-categories-oranje-tinted-content-color: var(--primitives-color-oranje-650);
	--semantics-categories-oranje-tinted-content-secondary-color: var(--primitives-color-oranje-650);
	--semantics-categories-oranje-reference-background-color: light-dark(var(--primitives-color-oranje-400), var(--primitives-color-oranje-600));
	--semantics-categories-oranje-reference-highlight-border-color: light-dark(var(--primitives-color-oranje-450), var(--primitives-color-oranje-550));
	--semantics-categories-oranje-reference-content-color: light-dark(var(--primitives-color-oranje-1000), var(--primitives-color-oranje-0));
	--semantics-categories-oranje-reference-content-secondary-color: light-dark(var(--primitives-color-oranje-1000), var(--primitives-color-oranje-0));

	/* donkergeel */
	--semantics-categories-donkergeel-filled-background-color: light-dark(var(--primitives-color-donkergeel-350), var(--primitives-color-donkergeel-800));
	--semantics-categories-donkergeel-filled-highlight-border-color: light-dark(var(--primitives-color-donkergeel-450), var(--primitives-color-donkergeel-850));
	--semantics-categories-donkergeel-filled-content-color: light-dark(var(--primitives-color-donkergeel-1000), var(--primitives-color-donkergeel-0));
	--semantics-categories-donkergeel-filled-content-secondary-color: light-dark(var(--primitives-color-donkergeel-1000), var(--primitives-color-donkergeel-0));
	--semantics-categories-donkergeel-tinted-background-color: light-dark(var(--primitives-color-donkergeel-50), var(--primitives-color-donkergeel-75));
	--semantics-categories-donkergeel-tinted-highlight-border-color: light-dark(var(--primitives-color-donkergeel-100), var(--primitives-color-donkergeel-150));
	--semantics-categories-donkergeel-tinted-content-color: var(--primitives-color-donkergeel-650);
	--semantics-categories-donkergeel-tinted-content-secondary-color: var(--primitives-color-donkergeel-650);
	--semantics-categories-donkergeel-reference-background-color: light-dark(var(--primitives-color-donkergeel-200), var(--primitives-color-donkergeel-800));
	--semantics-categories-donkergeel-reference-highlight-border-color: light-dark(var(--primitives-color-donkergeel-250), var(--primitives-color-donkergeel-750));
	--semantics-categories-donkergeel-reference-content-color: light-dark(var(--primitives-color-donkergeel-1000), var(--primitives-color-donkergeel-0));
	--semantics-categories-donkergeel-reference-content-secondary-color: light-dark(var(--primitives-color-donkergeel-1000), var(--primitives-color-donkergeel-0));

	/* geel */
	--semantics-categories-geel-filled-background-color: light-dark(var(--primitives-color-geel-350), var(--primitives-color-geel-900));
	--semantics-categories-geel-filled-highlight-border-color: light-dark(var(--primitives-color-geel-450), var(--primitives-color-geel-950));
	--semantics-categories-geel-filled-content-color: light-dark(var(--primitives-color-geel-1000), var(--primitives-color-geel-0));
	--semantics-categories-geel-filled-content-secondary-color: light-dark(var(--primitives-color-geel-1000), var(--primitives-color-geel-0));
	--semantics-categories-geel-tinted-background-color: light-dark(var(--primitives-color-geel-50), var(--primitives-color-geel-75));
	--semantics-categories-geel-tinted-highlight-border-color: light-dark(var(--primitives-color-geel-100), var(--primitives-color-geel-150));
	--semantics-categories-geel-tinted-content-color: var(--primitives-color-geel-650);
	--semantics-categories-geel-tinted-content-secondary-color: var(--primitives-color-geel-650);
	--semantics-categories-geel-reference-background-color: light-dark(var(--primitives-color-geel-100), var(--primitives-color-geel-900));
	--semantics-categories-geel-reference-highlight-border-color: light-dark(var(--primitives-color-geel-150), var(--primitives-color-geel-850));
	--semantics-categories-geel-reference-content-color: light-dark(var(--primitives-color-geel-1000), var(--primitives-color-geel-0));
	--semantics-categories-geel-reference-content-secondary-color: light-dark(var(--primitives-color-geel-1000), var(--primitives-color-geel-0));

	/* donkerbruin */
	--semantics-categories-donkerbruin-filled-background-color: light-dark(var(--primitives-color-donkerbruin-750), var(--primitives-color-donkerbruin-400));
	--semantics-categories-donkerbruin-filled-highlight-border-color: light-dark(var(--primitives-color-donkerbruin-800), var(--primitives-color-donkerbruin-500));
	--semantics-categories-donkerbruin-filled-content-color: light-dark(var(--primitives-color-donkerbruin-0), var(--primitives-color-donkerbruin-1000));
	--semantics-categories-donkerbruin-filled-content-secondary-color: light-dark(var(--primitives-color-donkerbruin-0), var(--primitives-color-donkerbruin-1000));
	--semantics-categories-donkerbruin-tinted-background-color: light-dark(var(--primitives-color-donkerbruin-50), var(--primitives-color-donkerbruin-75));
	--semantics-categories-donkerbruin-tinted-highlight-border-color: light-dark(var(--primitives-color-donkerbruin-100), var(--primitives-color-donkerbruin-150));
	--semantics-categories-donkerbruin-tinted-content-color: var(--primitives-color-donkerbruin-700);
	--semantics-categories-donkerbruin-tinted-content-secondary-color: var(--primitives-color-donkerbruin-700);
	--semantics-categories-donkerbruin-reference-background-color: light-dark(var(--primitives-color-donkerbruin-750), var(--primitives-color-donkerbruin-250));
	--semantics-categories-donkerbruin-reference-highlight-border-color: light-dark(var(--primitives-color-donkerbruin-800), var(--primitives-color-donkerbruin-200));
	--semantics-categories-donkerbruin-reference-content-color: light-dark(var(--primitives-color-donkerbruin-0), var(--primitives-color-donkerbruin-1000));
	--semantics-categories-donkerbruin-reference-content-secondary-color: light-dark(var(--primitives-color-donkerbruin-0), var(--primitives-color-donkerbruin-1000));

	/* bruin */
	--semantics-categories-bruin-filled-background-color: var(--primitives-color-bruin-500);
	--semantics-categories-bruin-filled-highlight-border-color: var(--primitives-color-bruin-550);
	--semantics-categories-bruin-filled-content-color: light-dark(var(--primitives-color-bruin-0), var(--primitives-color-bruin-1000));
	--semantics-categories-bruin-filled-content-secondary-color: light-dark(var(--primitives-color-bruin-0), var(--primitives-color-bruin-1000));
	--semantics-categories-bruin-tinted-background-color: light-dark(var(--primitives-color-bruin-50), var(--primitives-color-bruin-75));
	--semantics-categories-bruin-tinted-highlight-border-color: light-dark(var(--primitives-color-bruin-100), var(--primitives-color-bruin-150));
	--semantics-categories-bruin-tinted-content-color: var(--primitives-color-bruin-700);
	--semantics-categories-bruin-tinted-content-secondary-color: var(--primitives-color-bruin-700);
	--semantics-categories-bruin-reference-background-color: var(--primitives-color-bruin-500);
	--semantics-categories-bruin-reference-highlight-border-color: light-dark(var(--primitives-color-bruin-550), var(--primitives-color-bruin-450));
	--semantics-categories-bruin-reference-content-color: light-dark(var(--primitives-color-bruin-0), var(--primitives-color-bruin-1000));
	--semantics-categories-bruin-reference-content-secondary-color: light-dark(var(--primitives-color-bruin-0), var(--primitives-color-bruin-1000));

	/* donkergroen */
	--semantics-categories-donkergroen-filled-background-color: light-dark(var(--primitives-color-donkergroen-700), var(--primitives-color-donkergroen-400));
	--semantics-categories-donkergroen-filled-highlight-border-color: light-dark(var(--primitives-color-donkergroen-750), var(--primitives-color-donkergroen-500));
	--semantics-categories-donkergroen-filled-content-color: light-dark(var(--primitives-color-donkergroen-0), var(--primitives-color-donkergroen-1000));
	--semantics-categories-donkergroen-filled-content-secondary-color: light-dark(var(--primitives-color-donkergroen-0), var(--primitives-color-donkergroen-1000));
	--semantics-categories-donkergroen-tinted-background-color: light-dark(var(--primitives-color-donkergroen-50), var(--primitives-color-donkergroen-75));
	--semantics-categories-donkergroen-tinted-highlight-border-color: light-dark(var(--primitives-color-donkergroen-100), var(--primitives-color-donkergroen-150));
	--semantics-categories-donkergroen-tinted-content-color: var(--primitives-color-donkergroen-700);
	--semantics-categories-donkergroen-tinted-content-secondary-color: var(--primitives-color-donkergroen-700);
	--semantics-categories-donkergroen-reference-background-color: light-dark(var(--primitives-color-donkergroen-700), var(--primitives-color-donkergroen-300));
	--semantics-categories-donkergroen-reference-highlight-border-color: light-dark(var(--primitives-color-donkergroen-750), var(--primitives-color-donkergroen-250));
	--semantics-categories-donkergroen-reference-content-color: light-dark(var(--primitives-color-donkergroen-0), var(--primitives-color-donkergroen-1000));
	--semantics-categories-donkergroen-reference-content-secondary-color: light-dark(var(--primitives-color-donkergroen-0), var(--primitives-color-donkergroen-1000));

	/* groen */
	--semantics-categories-groen-filled-background-color: var(--primitives-color-groen-500);
	--semantics-categories-groen-filled-highlight-border-color: var(--primitives-color-groen-550);
	--semantics-categories-groen-filled-content-color: light-dark(var(--primitives-color-groen-0), var(--primitives-color-groen-1000));
	--semantics-categories-groen-filled-content-secondary-color: light-dark(var(--primitives-color-groen-0), var(--primitives-color-groen-1000));
	--semantics-categories-groen-tinted-background-color: light-dark(var(--primitives-color-groen-50), var(--primitives-color-groen-75));
	--semantics-categories-groen-tinted-highlight-border-color: light-dark(var(--primitives-color-groen-100), var(--primitives-color-groen-150));
	--semantics-categories-groen-tinted-content-color: var(--primitives-color-groen-650);
	--semantics-categories-groen-tinted-content-secondary-color: var(--primitives-color-groen-650);
	--semantics-categories-groen-reference-background-color: var(--primitives-color-groen-500);
	--semantics-categories-groen-reference-highlight-border-color: light-dark(var(--primitives-color-groen-550), var(--primitives-color-groen-450));
	--semantics-categories-groen-reference-content-color: light-dark(var(--primitives-color-groen-0), var(--primitives-color-groen-1000));
	--semantics-categories-groen-reference-content-secondary-color: light-dark(var(--primitives-color-groen-0), var(--primitives-color-groen-1000));

	/* mosgroen */
	--semantics-categories-mosgroen-filled-background-color: var(--primitives-color-mosgroen-500);
	--semantics-categories-mosgroen-filled-highlight-border-color: var(--primitives-color-mosgroen-550);
	--semantics-categories-mosgroen-filled-content-color: light-dark(var(--primitives-color-mosgroen-0), var(--primitives-color-mosgroen-1000));
	--semantics-categories-mosgroen-filled-content-secondary-color: light-dark(var(--primitives-color-mosgroen-0), var(--primitives-color-mosgroen-1000));
	--semantics-categories-mosgroen-tinted-background-color: light-dark(var(--primitives-color-mosgroen-50), var(--primitives-color-mosgroen-75));
	--semantics-categories-mosgroen-tinted-highlight-border-color: light-dark(var(--primitives-color-mosgroen-100), var(--primitives-color-mosgroen-150));
	--semantics-categories-mosgroen-tinted-content-color: var(--primitives-color-mosgroen-650);
	--semantics-categories-mosgroen-tinted-content-secondary-color: var(--primitives-color-mosgroen-650);
	--semantics-categories-mosgroen-reference-background-color: var(--primitives-color-mosgroen-500);
	--semantics-categories-mosgroen-reference-highlight-border-color: light-dark(var(--primitives-color-mosgroen-550), var(--primitives-color-mosgroen-450));
	--semantics-categories-mosgroen-reference-content-color: light-dark(var(--primitives-color-mosgroen-0), var(--primitives-color-mosgroen-1000));
	--semantics-categories-mosgroen-reference-content-secondary-color: light-dark(var(--primitives-color-mosgroen-0), var(--primitives-color-mosgroen-1000));

	/* mintgroen */
	--semantics-categories-mintgroen-filled-background-color: light-dark(var(--primitives-color-mintgroen-350), var(--primitives-color-mintgroen-800));
	--semantics-categories-mintgroen-filled-highlight-border-color: light-dark(var(--primitives-color-mintgroen-450), var(--primitives-color-mintgroen-850));
	--semantics-categories-mintgroen-filled-content-color: light-dark(var(--primitives-color-mintgroen-1000), var(--primitives-color-mintgroen-0));
	--semantics-categories-mintgroen-filled-content-secondary-color: light-dark(var(--primitives-color-mintgroen-1000), var(--primitives-color-mintgroen-0));
	--semantics-categories-mintgroen-tinted-background-color: light-dark(var(--primitives-color-mintgroen-50), var(--primitives-color-mintgroen-75));
	--semantics-categories-mintgroen-tinted-highlight-border-color: light-dark(var(--primitives-color-mintgroen-100), var(--primitives-color-mintgroen-150));
	--semantics-categories-mintgroen-tinted-content-color: var(--primitives-color-mintgroen-650);
	--semantics-categories-mintgroen-tinted-content-secondary-color: var(--primitives-color-mintgroen-650);
	--semantics-categories-mintgroen-reference-background-color: light-dark(var(--primitives-color-mintgroen-200), var(--primitives-color-mintgroen-800));
	--semantics-categories-mintgroen-reference-highlight-border-color: light-dark(var(--primitives-color-mintgroen-250), var(--primitives-color-mintgroen-750));
	--semantics-categories-mintgroen-reference-content-color: light-dark(var(--primitives-color-mintgroen-1000), var(--primitives-color-mintgroen-0));
	--semantics-categories-mintgroen-reference-content-secondary-color: light-dark(var(--primitives-color-mintgroen-1000), var(--primitives-color-mintgroen-0));

	/* ## Links */

	--semantics-links-color: light-dark(var(--primitives-color-accent-600), var(--primitives-color-accent-650));
	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-accent-650), var(--primitives-color-accent-700));
	--semantics-links-is-active-color: light-dark(var(--primitives-color-accent-700), var(--primitives-color-accent-750));

	/* ## Blockquotes */

	--semantics-blockquotes-max-width: var(--primitives-area-720);
	--semantics-blockquotes-sm-spacing: calc(var(--primitives-font-size-200) * var(--primitives-line-height-snug));
	--semantics-blockquotes-md-spacing: calc(var(--primitives-font-size-300) * var(--primitives-line-height-snug));
	--semantics-blockquotes-border: var(--primitives-border-width-regular) solid var(--semantics-content-color);
	--semantics-blockquotes-sm-quote-font:
		italic
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-200) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--semantics-blockquotes-md-quote-font:
		italic
		var(--primitives-font-weight-body-regular)
		var(--primitives-font-size-300) / var(--primitives-line-height-snug)
		var(--primitives-font-family-body)
	;
	--semantics-blockquotes-sm-attribution-font: var(--primitives-font-body-xs-regular-flat);
	--semantics-blockquotes-md-attribution-font: var(--primitives-font-body-sm-regular-flat);

	/* ## Controls */

	--semantics-controls-xs-min-size: var(--primitives-space-24);
	--semantics-controls-sm-min-size: var(--primitives-space-32);
	--semantics-controls-md-min-size: var(--primitives-space-44);
	--semantics-controls-lg-min-size: var(--primitives-space-56);

	--semantics-controls-lg-inline-padding: var(--primitives-space-16);
	--semantics-controls-md-inline-padding: var(--primitives-space-12);
	--semantics-controls-sm-inline-padding: var(--primitives-space-10);
	--semantics-controls-xs-inline-padding: var(--primitives-space-6);

	--semantics-controls-lg-block-padding: var(--primitives-space-12);
	--semantics-controls-md-block-padding: var(--primitives-space-10);
	--semantics-controls-sm-block-padding: var(--primitives-space-6);
	--semantics-controls-xs-block-padding: var(--primitives-space-4);

	--semantics-controls-xs-corner-radius: var(--primitives-corner-radius-xs);
	--semantics-controls-sm-corner-radius: var(--primitives-corner-radius-sm);
	--semantics-controls-md-corner-radius: var(--primitives-corner-radius-md);
	--semantics-controls-lg-corner-radius: var(--primitives-corner-radius-md);

	--semantics-controls-is-highlighted-indicator-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
	--semantics-controls-is-highlighted-contrast-color: var(--primitives-color-neutral-0);
	--semantics-controls-is-highlighted-is-hovered-indicator-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--semantics-controls-is-highlighted-is-hovered-contrast-color: var(--primitives-color-neutral-0);
	--semantics-controls-is-highlighted-is-active-indicator-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-controls-is-highlighted-is-active-contrast-color: var(--primitives-color-neutral-0);

	--semantics-controls-is-dragging-opacity: var(--primitives-opacity-40);

	--semantics-controls-link-cursor: default;

	/* ## Buttons */

	--semantics-buttons-xs-primary-text-font: var(--primitives-font-body-xs-medium-flat);
	--semantics-buttons-xs-supporting-text-font: var(--primitives-font-body-xxs-regular-flat);
	--semantics-buttons-sm-primary-text-font: var(--primitives-font-body-sm-medium-flat);
	--semantics-buttons-sm-supporting-text-font: var(--primitives-font-body-xxs-regular-flat);
	--semantics-buttons-md-primary-text-font: var(--primitives-font-body-md-medium-flat);
	--semantics-buttons-md-supporting-text-font: var(--primitives-font-body-xs-regular-flat);
	--semantics-buttons-lg-primary-text-font: var(--primitives-font-body-lg-medium-flat);
	--semantics-buttons-lg-supporting-text-font: var(--primitives-font-body-sm-regular-flat);

	--semantics-buttons-xs-divider-length: var(--primitives-space-14);
	--semantics-buttons-sm-divider-length: var(--primitives-space-20);
	--semantics-buttons-md-divider-length: var(--primitives-space-28);
	--semantics-buttons-lg-divider-length: var(--primitives-space-32);

	--semantics-buttons-xs-gap: var(--primitives-space-2);
	--semantics-buttons-sm-gap: var(--primitives-space-4);
	--semantics-buttons-md-gap: var(--primitives-space-6);
	--semantics-buttons-lg-gap: var(--primitives-space-6);

	--semantics-buttons-xs-icon-size: var(--primitives-space-16);
	--semantics-buttons-sm-icon-size: var(--primitives-space-18);
	--semantics-buttons-md-icon-size: var(--primitives-space-20);
	--semantics-buttons-lg-icon-size: var(--primitives-space-24);

	--semantics-buttons-xs-has-supporting-text-icon-size: var(--primitives-space-16);
	--semantics-buttons-sm-has-supporting-text-icon-size: var(--primitives-space-18);
	--semantics-buttons-md-has-supporting-text-icon-size: var(--primitives-space-24);
	--semantics-buttons-lg-has-supporting-text-icon-size: var(--primitives-space-32);

	--semantics-buttons-xs-is-icon-only-icon-size: var(--primitives-space-16);
	--semantics-buttons-sm-is-icon-only-icon-size: var(--primitives-space-20);
	--semantics-buttons-md-is-icon-only-icon-size: var(--primitives-space-24);
	--semantics-buttons-lg-is-icon-only-icon-size: var(--primitives-space-28);

	--semantics-buttons-xs-inline-padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-icon-size)) / 2);
	--semantics-buttons-sm-inline-padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-icon-size)) / 2);
	--semantics-buttons-md-inline-padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-icon-size)) / 2);
	--semantics-buttons-lg-inline-padding: calc((var(--semantics-controls-lg-min-size) - var(--semantics-buttons-lg-icon-size)) / 2);

	--semantics-buttons-xs-has-supporting-text-inline-padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-has-supporting-text-icon-size)) / 2);
	--semantics-buttons-sm-has-supporting-text-inline-padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-has-supporting-text-icon-size)) / 2);
	--semantics-buttons-md-has-supporting-text-inline-padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-has-supporting-text-icon-size)) / 2);
	--semantics-buttons-lg-has-supporting-text-inline-padding: calc((var(--semantics-controls-lg-min-size) - var(--semantics-buttons-lg-has-supporting-text-icon-size)) / 2);

	--semantics-buttons-xs-is-icon-only-inline-padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-is-icon-only-icon-size)) / 2);
	--semantics-buttons-sm-is-icon-only-inline-padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-is-icon-only-icon-size)) / 2);
	--semantics-buttons-md-is-icon-only-inline-padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-is-icon-only-icon-size)) / 2);
	--semantics-buttons-lg-is-icon-only-inline-padding: calc((var(--semantics-controls-lg-min-size) - var(--semantics-buttons-lg-is-icon-only-icon-size)) / 2);

	--semantics-buttons-neutral-base-background-color: var(--semantics-surfaces-base-background-color);
	--semantics-buttons-neutral-base-content-color: var(--primitives-color-neutral-900);
	--semantics-buttons-neutral-base-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--semantics-buttons-neutral-base-divider-color: var(--primitives-color-neutral-200);
	--semantics-buttons-neutral-base-highlight-border-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
	--semantics-buttons-neutral-base-is-hovered-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-150));
	--semantics-buttons-neutral-base-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--semantics-buttons-neutral-base-is-hovered-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-base-is-hovered-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-700));
	--semantics-buttons-neutral-base-is-active-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
	--semantics-buttons-neutral-base-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--semantics-buttons-neutral-base-is-active-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-base-is-active-content-secondary-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-750));
	--semantics-buttons-neutral-base-is-expanded-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
	--semantics-buttons-neutral-base-is-expanded-highlight-border-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-300));
	--semantics-buttons-neutral-base-is-expanded-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-base-is-expanded-content-secondary-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-750));
	--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
	--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-350));
	--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-base-is-expanded-is-hovered-content-secondary-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-800));
	--semantics-buttons-neutral-base-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
	--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-300), var(--primitives-color-neutral-400));
	--semantics-buttons-neutral-base-is-expanded-is-active-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-base-is-expanded-is-active-content-secondary-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-850));
	--semantics-buttons-neutral-base-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--semantics-buttons-neutral-base-is-selected-highlight-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--semantics-buttons-neutral-base-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
	--semantics-buttons-neutral-base-is-selected-content-secondary-color: var(--semantics-controls-is-highlighted-contrast-color);
	--semantics-buttons-neutral-base-is-selected-is-hovered-background-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
	--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-buttons-neutral-base-is-selected-is-hovered-content-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
	--semantics-buttons-neutral-base-is-selected-is-hovered-content-secondary-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
	--semantics-buttons-neutral-base-is-selected-is-active-background-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
	--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
	--semantics-buttons-neutral-base-is-selected-is-active-content-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);
	--semantics-buttons-neutral-base-is-selected-is-active-content-secondary-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);

	--semantics-buttons-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
	--semantics-buttons-neutral-tinted-content-color: var(--primitives-color-neutral-900);
	--semantics-buttons-neutral-tinted-content-secondary-color: var(--primitives-color-neutral-750);
	--semantics-buttons-neutral-tinted-divider-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-350));
	--semantics-buttons-neutral-tinted-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
	--semantics-buttons-neutral-tinted-is-hovered-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--semantics-buttons-neutral-tinted-is-hovered-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-800));
	--semantics-buttons-neutral-tinted-is-active-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--semantics-buttons-neutral-tinted-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
	--semantics-buttons-neutral-tinted-is-active-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-tinted-is-active-content-secondary-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
	--semantics-buttons-neutral-tinted-is-expanded-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
	--semantics-buttons-neutral-tinted-is-expanded-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-tinted-is-expanded-content-secondary-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-secondary-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
	--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
	--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-300), var(--primitives-color-neutral-450));
	--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-tinted-is-expanded-is-active-content-secondary-color: light-dark(var(--primitives-color-neutral-750), var(--primitives-color-neutral-900));
	--semantics-buttons-neutral-tinted-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--semantics-buttons-neutral-tinted-is-selected-highlight-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--semantics-buttons-neutral-tinted-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
	--semantics-buttons-neutral-tinted-is-selected-content-secondary-color: var(--semantics-controls-is-highlighted-contrast-color);
	--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
	--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
	--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-secondary-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
	--semantics-buttons-neutral-tinted-is-selected-is-active-background-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
	--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
	--semantics-buttons-neutral-tinted-is-selected-is-active-content-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);
	--semantics-buttons-neutral-tinted-is-selected-is-active-content-secondary-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);

	--semantics-buttons-neutral-transparent-content-color: var(--primitives-color-neutral-900);
	--semantics-buttons-neutral-transparent-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--semantics-buttons-neutral-transparent-is-hovered-content-color: var(--primitives-color-neutral-950);
	--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--semantics-buttons-neutral-transparent-is-active-content-color: var(--primitives-color-neutral-1000);
	--semantics-buttons-neutral-transparent-is-active-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--semantics-buttons-neutral-transparent-is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
	--semantics-buttons-neutral-transparent-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
	--semantics-buttons-neutral-transparent-is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
	--semantics-buttons-neutral-transparent-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
	--semantics-buttons-neutral-transparent-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
	--semantics-buttons-neutral-transparent-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
	--semantics-buttons-neutral-transparent-is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
	--semantics-buttons-neutral-transparent-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
	--semantics-buttons-neutral-transparent-is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);

	--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
	--semantics-buttons-accent-filled-content-color: var(--primitives-color-accent-0);
	--semantics-buttons-accent-filled-content-secondary-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-100));
	--semantics-buttons-accent-filled-divider-color: light-dark(var(--primitives-color-accent-500), var(--primitives-color-accent-450));
	--semantics-buttons-accent-filled-highlight-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--semantics-buttons-accent-filled-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--semantics-buttons-accent-filled-is-hovered-highlight-border-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-buttons-accent-filled-is-hovered-content-color: var(--primitives-color-accent-0);
	--semantics-buttons-accent-filled-is-hovered-content-secondary-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-100));
	--semantics-buttons-accent-filled-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-buttons-accent-filled-is-active-highlight-border-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
	--semantics-buttons-accent-filled-is-active-content-color: var(--primitives-color-accent-0);
	--semantics-buttons-accent-filled-is-active-content-secondary-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-100));
	--semantics-buttons-accent-filled-is-expanded-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-buttons-accent-filled-is-expanded-highlight-border-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
	--semantics-buttons-accent-filled-is-expanded-content-color: var(--primitives-color-accent-0);
	--semantics-buttons-accent-filled-is-expanded-content-secondary-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-100));
	--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
	--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color: light-dark(var(--primitives-color-accent-950), var(--primitives-color-accent-850));
	--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color: var(--primitives-color-accent-0);
	--semantics-buttons-accent-filled-is-expanded-is-hovered-content-secondary-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-100));
	--semantics-buttons-accent-filled-is-expanded-is-active-background-color: light-dark(var(--primitives-color-accent-950), var(--primitives-color-accent-850));
	--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color: light-dark(var(--primitives-color-accent-1000), var(--primitives-color-accent-900));
	--semantics-buttons-accent-filled-is-expanded-is-active-content-color: var(--primitives-color-accent-0);
	--semantics-buttons-accent-filled-is-expanded-is-active-content-secondary-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-100));

	--semantics-buttons-accent-transparent-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
	--semantics-buttons-accent-transparent-content-secondary-color: light-dark(var(--primitives-color-accent-550), var(--primitives-color-accent-650));
	--semantics-buttons-accent-transparent-is-hovered-content-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--semantics-buttons-accent-transparent-is-hovered-content-secondary-color: light-dark(var(--primitives-color-accent-550), var(--primitives-color-accent-650));
	--semantics-buttons-accent-transparent-is-active-content-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--semantics-buttons-accent-transparent-is-active-content-secondary-color: light-dark(var(--primitives-color-accent-550), var(--primitives-color-accent-650));
	--semantics-buttons-accent-transparent-is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
	--semantics-buttons-accent-transparent-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
	--semantics-buttons-accent-transparent-is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
	--semantics-buttons-accent-transparent-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
	--semantics-buttons-accent-transparent-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
	--semantics-buttons-accent-transparent-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
	--semantics-buttons-accent-transparent-is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
	--semantics-buttons-accent-transparent-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
	--semantics-buttons-accent-transparent-is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);

	--semantics-buttons-critical-tinted-background-color: light-dark(var(--primitives-color-critical-75), var(--primitives-color-critical-150));
	--semantics-buttons-critical-tinted-content-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-700));
	--semantics-buttons-critical-tinted-content-secondary-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-700));
	--semantics-buttons-critical-tinted-highlight-border-color: light-dark(var(--primitives-color-critical-150), var(--primitives-color-critical-200));
	--semantics-buttons-critical-tinted-is-hovered-background-color: light-dark(var(--primitives-color-critical-100), var(--primitives-color-critical-200));
	--semantics-buttons-critical-tinted-is-hovered-highlight-border-color: light-dark(var(--primitives-color-critical-150), var(--primitives-color-critical-250));
	--semantics-buttons-critical-tinted-is-hovered-content-color: light-dark(var(--primitives-color-critical-650), var(--primitives-color-critical-750));
	--semantics-buttons-critical-tinted-is-hovered-content-secondary-color: light-dark(var(--primitives-color-critical-650), var(--primitives-color-critical-750));
	--semantics-buttons-critical-tinted-is-active-background-color: light-dark(var(--primitives-color-critical-150), var(--primitives-color-critical-250));
	--semantics-buttons-critical-tinted-is-active-highlight-border-color: light-dark(var(--primitives-color-critical-200), var(--primitives-color-critical-300));
	--semantics-buttons-critical-tinted-is-active-content-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-800));
	--semantics-buttons-critical-tinted-is-active-content-secondary-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-800));
	--semantics-buttons-critical-tinted-is-expanded-background-color: light-dark(var(--primitives-color-critical-150), var(--primitives-color-critical-300));
	--semantics-buttons-critical-tinted-is-expanded-highlight-border-color: light-dark(var(--primitives-color-critical-200), var(--primitives-color-critical-350));
	--semantics-buttons-critical-tinted-is-expanded-content-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-850));
	--semantics-buttons-critical-tinted-is-expanded-content-secondary-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-850));
	--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-critical-200), var(--primitives-color-critical-350));
	--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color: light-dark(var(--primitives-color-critical-250), var(--primitives-color-critical-400));
	--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color: light-dark(var(--primitives-color-critical-800), var(--primitives-color-critical-900));
	--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-secondary-color: light-dark(var(--primitives-color-critical-800), var(--primitives-color-critical-900));
	--semantics-buttons-critical-tinted-is-expanded-is-active-background-color: light-dark(var(--primitives-color-critical-250), var(--primitives-color-critical-400));
	--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color: light-dark(var(--primitives-color-critical-300), var(--primitives-color-critical-450));
	--semantics-buttons-critical-tinted-is-expanded-is-active-content-color: light-dark(var(--primitives-color-critical-850), var(--primitives-color-critical-950));
	--semantics-buttons-critical-tinted-is-expanded-is-active-content-secondary-color: light-dark(var(--primitives-color-critical-850), var(--primitives-color-critical-950));

	--semantics-buttons-critical-transparent-content-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
	--semantics-buttons-critical-transparent-content-secondary-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));
	--semantics-buttons-critical-transparent-is-hovered-content-color: light-dark(var(--primitives-color-critical-650), var(--primitives-color-critical-700));
	--semantics-buttons-critical-transparent-is-hovered-content-secondary-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));
	--semantics-buttons-critical-transparent-is-active-content-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-750));
	--semantics-buttons-critical-transparent-is-active-content-secondary-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));

	/* ### Buttons — inherit (on-color)
	   For buttons on colored surfaces: the values derive from currentColor
	   at used-value time (currentColor stays unresolved inside tokens,
	   unlike var()). The filled label prefers the surface color via
	   --context-parent-background-color — that indirection lives in the
	   component (a var() here would freeze against :root); these tokens
	   carry the white/black contrast flip as its fallback. */

	--semantics-buttons-inherit-tinted-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 20%, transparent);
	--semantics-buttons-inherit-tinted-content-color: currentColor;
	--semantics-buttons-inherit-tinted-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-color);
	--semantics-buttons-inherit-tinted-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
	--semantics-buttons-inherit-tinted-divider-color: color-mix(in oklab, currentColor 35%, transparent);

	--semantics-buttons-inherit-filled-background-color: currentColor;
	--semantics-buttons-inherit-filled-content-color: var(--semantics-content-contrast-color);
	--semantics-buttons-inherit-filled-content-secondary-color: currentColor;
	--semantics-buttons-inherit-filled-highlight-border-color: currentColor;
	--semantics-buttons-inherit-filled-divider-color: color-mix(in oklab, var(--semantics-content-contrast-color) 25%, transparent);

	/* ## Input fields */

	--semantics-input-fields-border-width: var(--primitives-border-width-regular);
	--semantics-input-fields-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--semantics-input-fields-border: var(--semantics-input-fields-border-width) solid var(--semantics-input-fields-border-color);
	--semantics-input-fields-background-color: var(--semantics-surfaces-base-background-color);
	--semantics-input-fields-placeholder-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--semantics-input-fields-is-valid-border-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-650));
	--semantics-input-fields-is-valid-icon-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-650));
	--semantics-input-fields-is-invalid-border-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));
	--semantics-input-fields-is-invalid-icon-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));
	--semantics-input-fields-is-read-only-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
	--semantics-input-fields-is-read-only-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
	--semantics-input-fields-is-autofill-background-color: light-dark(var(--primitives-color-mark-50), var(--primitives-color-mark-950));
	--semantics-input-fields-is-autofill-content-color: light-dark(var(--primitives-color-mark-800), var(--primitives-color-mark-200));

	--semantics-input-fields-xs-text-font: var(--primitives-font-body-xs-regular-flat);
	/* Font for an xs <select> on touch: iOS Safari auto-zooms inputs below 16px,
	   so this must stay >= 16px. */
	--semantics-input-fields-native-select-font: var(--primitives-font-body-sm-regular-snug);
	--semantics-input-fields-sm-text-font: var(--primitives-font-body-sm-regular-flat);
	--semantics-input-fields-sm-mask-font: 400 var(--primitives-font-size-90)/var(--primitives-line-height-flat) Verdana, system-ui;
	--semantics-input-fields-md-text-font: var(--primitives-font-body-md-regular-flat);
	--semantics-input-fields-md-mask-font: 400 var(--primitives-font-size-100)/var(--primitives-line-height-flat) Verdana, system-ui;

	--semantics-input-fields-xs-validation-icon-size: var(--primitives-space-16);
	--semantics-input-fields-sm-validation-icon-size: var(--primitives-space-20);
	--semantics-input-fields-md-validation-icon-size: var(--primitives-space-24);

	/* ## Forms */

	--semantics-forms-fields-gap: var(--primitives-space-16);
	--semantics-forms-sections-gap: var(--primitives-space-24);
	--semantics-forms-label-column-width: var(--primitives-area-240);
	--semantics-forms-columns-gap: var(--primitives-space-8);
	--semantics-forms-section-title-font: var(--primitives-font-body-lg-bold-tight);
	--semantics-forms-section-supporting-text-font: var(--primitives-font-body-md-regular-tight);

	/* ## Grab handles */

	--semantics-grab-handles-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
	--semantics-grab-handles-grip-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-750));

	/* ## Tables */

	--semantics-tables-corner-radius: var(--semantics-surfaces-corner-radius);
	--semantics-tables-border-color: var(--semantics-dividers-color);
	--semantics-tables-border-width: var(--semantics-dividers-thickness);
	--semantics-tables-column-gap: var(--primitives-space-8);
	--semantics-tables-row-min-height: var(--semantics-controls-md-min-size);
	--semantics-tables-row-padding-block: var(--primitives-space-8);
	--semantics-tables-row-padding-inline: var(--primitives-space-12);
	--semantics-tables-row-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--semantics-tables-row-is-selected-content-color: var(--primitives-color-neutral-1000);

	/* ## Page sections */

	--semantics-page-sections-body-max-width: var(--primitives-area-1280);

	--semantics-page-sections-sm-margin-inline: var(--primitives-space-16);
	--semantics-page-sections-sm-margin-block: var(--primitives-space-16);
	--semantics-page-sections-sm-gap: var(--primitives-space-16);
	--semantics-page-sections-md-margin-inline: var(--primitives-space-40);
	--semantics-page-sections-md-margin-block: var(--primitives-space-32);
	--semantics-page-sections-md-gap: var(--primitives-space-24);
	--semantics-page-sections-lg-margin-inline: var(--primitives-space-56);
	--semantics-page-sections-lg-margin-block: var(--primitives-space-48);
	--semantics-page-sections-lg-gap: var(--primitives-space-32);

	/* ## Overlays */

	--semantics-overlays-backdrop-color: light-dark(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.40));
	--semantics-overlays-corner-radius: var(--primitives-corner-radius-none);
	--semantics-overlays-inset: var(--primitives-space-16);
	--semantics-overlays-box-shadow: var(--primitives-box-shadows-level-5);

	/* ## Sheets */

	--semantics-sheets-side-animation-duration: var(--primitives-transition-duration-medium);
	--semantics-sheets-side-md-width: var(--primitives-area-360);
	--semantics-sheets-side-lg-width: var(--primitives-area-480);
	--semantics-sheets-bottom-top-inset: var(--primitives-space-48);
	--semantics-sheets-bottom-md-inline-inset: var(--primitives-space-48);
	--semantics-sheets-bottom-lg-inline-inset: var(--primitives-space-80);
	--semantics-sheets-bottom-animation-duration: var(--primitives-transition-duration-slow);

	/* ## Focus ring */

	--semantics-focus-ring-outline: var(--primitives-border-width-regular) solid var(--primitives-color-accent-600);
	--semantics-focus-ring-outline-offset: var(--primitives-border-width-regular);
	--semantics-focus-ring-box-shadow: 0 0 0 calc(var(--primitives-border-width-regular) * 3) var(--semantics-surfaces-base-background-color);

	/* # Components */

	/* ## Avatar */

	--components-avatar-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
	--components-avatar-content-color: var(--primitives-color-neutral-800);
	--components-avatar-corner-radius: var(--primitives-corner-radius-full);
	--components-avatar-organization-corner-radius: var(--primitives-corner-radius-md);

	/* ## Badge */

	--components-badge-corner-radius: var(--primitives-corner-radius-full);
	--components-badge-border-width: var(--primitives-border-width-thin);

	/* ## Banner */

	--components-banner-corner-radius: var(--semantics-surfaces-corner-radius);
	--components-banner-md-padding: var(--primitives-space-12);
	--components-banner-md-icon-size: var(--primitives-space-32);
	--components-banner-sm-padding: var(--primitives-space-8);
	--components-banner-sm-icon-size: var(--primitives-space-24);
	--components-banner-content-color: var(--semantics-content-color);

	/* ## Box */

	--components-box-background-color: var(--semantics-surfaces-tinted-background-color);
	--components-box-base-background-color: var(--semantics-surfaces-base-background-color);
	--components-box-border-width: var(--semantics-surfaces-border-width);
	--components-box-border-color: var(--semantics-surfaces-tinted-border-color);
	--components-box-base-border-color: var(--semantics-surfaces-base-border-color);
	--components-box-critical-background-color: var(--semantics-categories-critical-tinted-background-color);
	--components-box-critical-border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
	--components-box-padding: var(--primitives-space-16);

	/* ## Button group */

	--components-button-group-sm-gap: var(--primitives-space-6);
	--components-button-group-md-gap: var(--primitives-space-8);

	/* ## Card */

	--components-card-background-color: var(--semantics-surfaces-base-background-color);
	--components-card-tinted-background-color: var(--semantics-surfaces-tinted-background-color);
	--components-card-corner-radius: var(--semantics-surfaces-corner-radius);
	--components-card-box-shadow: none;
	--components-card-highlight-border-width: var(--semantics-surfaces-border-width);
	--components-card-highlight-border-color: var(--semantics-surfaces-base-border-color);
	--components-card-tinted-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
	--components-card-is-hovered-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-150));
	--components-card-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--components-card-is-active-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
	--components-card-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--components-card-tinted-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-100));
	--components-card-tinted-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--components-card-tinted-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-150));
	--components-card-tinted-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));

	/* ## Checkbox */

	--components-checkbox-border-width: var(--primitives-border-width-regular);
	--components-checkbox-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--components-checkbox-background-color: var(--semantics-surfaces-base-background-color);
	--components-checkbox-is-hovered-border-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
	--components-checkbox-is-active-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-750));
	--components-checkbox-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-checkbox-is-selected-border-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-checkbox-is-selected-icon-color: var(--semantics-controls-is-highlighted-contrast-color);
	--components-checkbox-is-selected-is-hovered-background-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
	--components-checkbox-is-selected-is-hovered-border-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
	--components-checkbox-is-selected-is-hovered-icon-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
	--components-checkbox-is-selected-is-active-background-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
	--components-checkbox-is-selected-is-active-border-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
	--components-checkbox-is-selected-is-active-icon-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);

	/* ## Collection */

	--components-collection-sm-gap: var(--primitives-space-16);
	--components-collection-md-gap: var(--primitives-space-24);
	--components-collection-lg-gap: var(--primitives-space-24);

	/* ## Document tab bar */

	--components-document-tab-bar-tab-title-font: var(--primitives-font-body-sm-medium-flat);

	/* ## File field */

	--components-file-field-background-color: var(--semantics-surfaces-tinted-background-color);
	--components-file-field-highlight-border-width: var(--semantics-surfaces-border-width);
	--components-file-field-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
	--components-file-field-value-color: var(--semantics-content-color);
	--components-file-field-is-empty-value-color: var(--semantics-content-secondary-color);

	/* ## Icon — rijkskleuren

	   Shade per rijkskleur picked to keep ≥400 shade distance from the
	   surface it's painted on (default = neutral-0 / dark mode = neutral-100;
	   tinted = neutral-25 / neutral-75). Within that contrast budget the
	   shade closest to --primitives-color-reference-X is preferred. Middle
	   shades (500) are self-mirroring so a single ref is used. */

	--components-icon-color-lintblauw-color: light-dark(var(--primitives-color-lintblauw-750), var(--primitives-color-lintblauw-500));
	--components-icon-color-donkerblauw-color: light-dark(var(--primitives-color-donkerblauw-600), var(--primitives-color-donkerblauw-500));
	--components-icon-color-hemelblauw-color: var(--primitives-color-hemelblauw-500);
	--components-icon-color-lichtblauw-color: light-dark(var(--primitives-color-lichtblauw-450), var(--primitives-color-lichtblauw-800));
	--components-icon-color-paars-color: light-dark(var(--primitives-color-paars-850), var(--primitives-color-paars-500));
	--components-icon-color-violet-color: light-dark(var(--primitives-color-violet-650), var(--primitives-color-violet-500));
	--components-icon-color-robijnrood-color: light-dark(var(--primitives-color-robijnrood-550), var(--primitives-color-robijnrood-500));
	--components-icon-color-roze-color: light-dark(var(--primitives-color-roze-450), var(--primitives-color-roze-750));
	--components-icon-color-rood-color: light-dark(var(--primitives-color-rood-550), var(--primitives-color-rood-500));
	--components-icon-color-oranje-color: light-dark(var(--primitives-color-oranje-450), var(--primitives-color-oranje-600));
	--components-icon-color-donkergeel-color: light-dark(var(--primitives-color-donkergeel-450), var(--primitives-color-donkergeel-800));
	--components-icon-color-geel-color: light-dark(var(--primitives-color-geel-450), var(--primitives-color-geel-900));
	--components-icon-color-donkerbruin-color: light-dark(var(--primitives-color-donkerbruin-750), var(--primitives-color-donkerbruin-500));
	--components-icon-color-bruin-color: var(--primitives-color-bruin-500);
	--components-icon-color-donkergroen-color: light-dark(var(--primitives-color-donkergroen-700), var(--primitives-color-donkergroen-500));
	--components-icon-color-groen-color: var(--primitives-color-groen-500);
	--components-icon-color-mosgroen-color: var(--primitives-color-mosgroen-500);
	--components-icon-color-mintgroen-color: light-dark(var(--primitives-color-mintgroen-450), var(--primitives-color-mintgroen-800));

	/* ## Image */

	--components-image-corner-radius: var(--primitives-corner-radius-none);
	--components-image-rounded-corner-radius: var(--semantics-controls-md-corner-radius);
	--components-image-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
	--components-image-error-text-color: var(--semantics-content-color);
	--components-image-error-font: var(--primitives-font-body-sm-regular-snug);
	--components-image-caption-gap: var(--primitives-space-4);
	--components-image-caption-color: var(--semantics-content-color);
	--components-image-caption-font: var(--primitives-font-body-sm-regular-tight);
	--components-image-credit-color: var(--semantics-content-secondary-color);
	--components-image-credit-font: var(--primitives-font-body-sm-regular-tight);

	/* ## Inline dialog */

	--components-inline-dialog-icon-color: var(--semantics-content-color);
	--components-inline-dialog-icon-secondary-color: var(--semantics-content-secondary-color);
	--components-inline-dialog-icon-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
	--components-inline-dialog-icon-critical-color: var(--primitives-color-critical-500);
	--components-inline-dialog-icon-warning-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-650));
	--components-inline-dialog-icon-success-color: var(--primitives-color-success-500);

	/* ## Notification */

	--components-notification-background-color: var(--semantics-surfaces-base-background-color);
	--components-notification-corner-radius: var(--semantics-overlays-corner-radius);
	--components-notification-box-shadow: var(--semantics-overlays-box-shadow);
	--components-notification-icon-success-color: var(--primitives-color-success-500);
	--components-notification-icon-neutral-color: var(--semantics-content-secondary-color);
	--components-notification-icon-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-350));
	--components-notification-icon-warning-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-250));
	--components-notification-icon-critical-color: var(--primitives-color-critical-500);
	--components-notification-text-font: var(--primitives-font-body-md-bold-tight);
	--components-notification-supporting-text-font: var(--primitives-font-body-sm-regular-tight);
	--components-notification-supporting-text-color: var(--semantics-content-secondary-color);

	/* ## Keyboard shortcut */

	--components-keyboard-shortcut-sm-size: var(--primitives-space-20);
	--components-keyboard-shortcut-md-size: var(--primitives-space-24);
	--components-keyboard-shortcut-background-color: var(--semantics-surfaces-tinted-background-color);
	--components-keyboard-shortcut-content-color: var(--semantics-content-color);
	--components-keyboard-shortcut-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
	--components-keyboard-shortcut-border-width: var(--primitives-border-width-thin);
	--components-keyboard-shortcut-corner-radius: var(--primitives-corner-radius-xs);
	--components-keyboard-shortcut-separator-color: var(--semantics-content-secondary-color);

	/* ## Code

	   Token colors used by nldd-code's Prism syntax highlighting.
	   Solarized-inspired, mapped to descriptive DS palettes. Consumers
	   can override per-instance on `nldd-code` to swap the theme. */

	--components-code-viewer-token-comment-color: var(--semantics-content-secondary-color);
	--components-code-viewer-token-punctuation-color: var(--semantics-content-color);
	--components-code-viewer-token-keyword-color: var(--primitives-color-donkergeel-650);
	--components-code-viewer-token-string-color: var(--primitives-color-groen-650);
	--components-code-viewer-token-number-color: var(--primitives-color-oranje-650);
	--components-code-viewer-token-boolean-color: var(--primitives-color-oranje-650);
	--components-code-viewer-token-null-color: var(--primitives-color-oranje-650);
	--components-code-viewer-token-function-color: var(--primitives-color-lintblauw-650);
	--components-code-viewer-token-class-color: var(--primitives-color-donkergeel-650);
	--components-code-viewer-token-builtin-color: var(--primitives-color-donkergeel-650);
	--components-code-viewer-token-tag-color: var(--primitives-color-groen-650);
	--components-code-viewer-token-attr-name-color: var(--primitives-color-lintblauw-650);
	--components-code-viewer-token-attr-value-color: var(--primitives-color-mintgroen-650);
	--components-code-viewer-token-property-color: var(--primitives-color-lintblauw-650);
	--components-code-viewer-token-selector-color: var(--primitives-color-donkergeel-650);
	--components-code-viewer-token-atrule-color: var(--primitives-color-groen-650);
	--components-code-viewer-token-regex-color: var(--primitives-color-rood-650);
	--components-code-viewer-token-url-color: var(--primitives-color-mintgroen-650);
	--components-code-viewer-token-operator-color: var(--primitives-color-groen-650);
	--components-code-viewer-token-constant-color: var(--primitives-color-oranje-650);
	--components-code-viewer-token-deleted-color: var(--primitives-color-rood-650);
	--components-code-viewer-token-inserted-color: var(--primitives-color-groen-650);
	--components-code-viewer-token-important-color: var(--primitives-color-rood-650);
	--components-code-viewer-token-symbol-color: var(--primitives-color-violet-650);
	--components-code-viewer-token-entity-color: var(--primitives-color-paars-650);
	--components-code-viewer-token-variable-color: var(--primitives-color-lintblauw-650);

	/* ## List */

	--components-list-drag-placeholder-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));

	--components-list-item-sm-padding-block: var(--primitives-space-6);
	--components-list-item-md-padding-block: var(--primitives-space-10);
	--components-list-item-indicator-corner-radius: var(--primitives-corner-radius-sm);
	--components-list-item-indicator-inline-inset: var(--primitives-space-8);
	--components-list-item-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
	--components-list-item-is-hovered-content-color: var(--primitives-color-neutral-1000);
	--components-list-item-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
	--components-list-item-is-active-content-color: var(--primitives-color-neutral-1000);
	--components-list-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--components-list-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
	--components-list-item-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--components-list-item-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
	--components-list-item-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--components-list-item-is-selected-content-color: var(--primitives-color-neutral-1000);
	--components-list-item-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
	--components-list-item-is-selected-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
	--components-list-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-list-item-is-highlighted-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
	--components-list-item-is-highlighted-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
	--components-list-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);

	/* ## Menu */

	--components-menu-box-shadow: var(--primitives-box-shadows-level-5);
	--components-menu-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
	--components-menu-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
	--components-menu-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
	--components-menu-item-is-destructive-content-color: var(--semantics-content-critical-color);
	--components-menu-item-is-destructive-is-highlighted-background-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
	--components-menu-item-is-destructive-is-highlighted-content-color: var(--primitives-color-neutral-0);

	/* ## Menu bar */

	--components-menu-bar-item-font: var(--primitives-font-body-md-medium-flat);
	--components-menu-bar-item-inline-padding: var(--primitives-space-8);
	--components-menu-bar-item-content-color: var(--primitives-color-accent-750);
	--components-menu-bar-item-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
	--components-menu-bar-item-is-expanded-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
	--components-menu-bar-item-is-expanded-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
	--components-menu-bar-item-is-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-menu-bar-item-is-current-indicator-height: var(--primitives-space-4);

	/* ## Page footer */

	--components-page-footer-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
	--components-page-footer-divider-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-150));
	--components-page-footer-legal-bar-item-color: var(--semantics-content-secondary-color);

	/* ## Popover */

	--components-popover-default-width: var(--primitives-area-320);

	/* ## Progress bar */

	--components-progress-bar-corner-radius: var(--primitives-corner-radius-full);
	--components-progress-bar-distribution-corner-radius: var(--primitives-corner-radius-xxs);
	--components-progress-bar-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
	--components-progress-bar-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
	--components-progress-bar-track-border-width: var(--primitives-border-width-thin);
	--components-progress-bar-progress-segment-indicator-gap: var(--primitives-space-1);
	--components-progress-bar-distribution-segment-indicator-gap: var(--primitives-space-2);
	--components-progress-bar-segment-indicator-min-width: var(--primitives-space-2);
	--components-progress-bar-sm-height: var(--primitives-space-4);
	--components-progress-bar-md-height: var(--primitives-space-8);
	--components-progress-bar-lg-height: var(--primitives-space-16);
	--components-progress-bar-caption-gap: var(--primitives-space-6);
	--components-progress-bar-text-color: var(--semantics-content-color);
	--components-progress-bar-supporting-text-color: var(--semantics-content-secondary-color);
	--components-progress-bar-text-font: var(--primitives-font-body-md-regular-tight);
	--components-progress-bar-supporting-text-font: var(--primitives-font-body-md-regular-tight);

	--components-progress-bar-segment-indicator-border-width: var(--primitives-border-width-thin);

	/* ## Progress circle */

	--components-progress-circle-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
	--components-progress-circle-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
	--components-progress-circle-caption-gap: var(--primitives-space-8);
	--components-progress-circle-text-color: var(--semantics-content-color);
	--components-progress-circle-text-font: var(--primitives-font-body-md-regular-tight);
	--components-progress-circle-supporting-text-color: var(--semantics-content-secondary-color);
	--components-progress-circle-supporting-text-font: var(--primitives-font-body-sm-regular-tight);
	/* Segment gap is intentionally hard-coded in progress-circle.ts as 1px /
	   2px (visual gap) and scaled per render into SVG user units, so that the
	   gap stays a consistent pixel width across every host size. Exposing it
	   as a degree-based token (as it used to be) made the gap drift visually
	   on small / large rings; the constants moved into TS and the tokens
	   were dropped. */

	/* ## Radio button */

	--components-radio-button-border-width: var(--primitives-border-width-regular);
	--components-radio-button-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--components-radio-button-background-color: var(--semantics-surfaces-base-background-color);
	--components-radio-button-is-hovered-border-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
	--components-radio-button-is-active-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-750));
	--components-radio-button-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-radio-button-is-selected-border-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-radio-button-is-selected-inner-shape-border-width: var(--primitives-border-width-regular);
	--components-radio-button-is-selected-inner-shape-border-color: var(--semantics-controls-is-highlighted-contrast-color);
	--components-radio-button-is-selected-is-hovered-background-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
	--components-radio-button-is-selected-is-hovered-border-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
	--components-radio-button-is-selected-is-hovered-inner-shape-border-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
	--components-radio-button-is-selected-is-active-background-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
	--components-radio-button-is-selected-is-active-border-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
	--components-radio-button-is-selected-is-active-inner-shape-border-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);

	/* ## Rich text */

	--components-rich-text-grid-size: calc(var(--primitives-font-size-100) * var(--primitives-line-height-snug));
	--components-rich-text-main-max-width: var(--primitives-area-720);
	--components-rich-text-wide-max-width: var(--primitives-area-800);
	--components-rich-text-centered-wide-max-width: var(--primitives-area-960);
	--components-rich-text-spacing-flat: var(--primitives-space-0);
	--components-rich-text-spacing-tight: calc(var(--components-rich-text-grid-size) / 4);
	--components-rich-text-spacing-snug: calc(var(--components-rich-text-grid-size) / 2);
	--components-rich-text-spacing-loose: var(--components-rich-text-grid-size);

	/* ## Sidebar Section */

	--components-sidebar-section-sidebar-box-background-color: var(--semantics-surfaces-tinted-background-color);
	--components-sidebar-section-sidebar-box-highlight-border-color: var(--semantics-surfaces-tinted-border-color);

	/* ## Status bar */

	--components-status-bar-height: var(--semantics-controls-xs-min-size);

	/* Interaction states darken the filled background by one palette step on
	   hover and two on active, in both light and dark mode — so every variant
	   deepens consistently instead of borrowing the decorative highlight-border
	   color (which is not always darker than its own fill). */
	--components-status-bar-neutral-background-color: var(--semantics-categories-neutral-filled-background-color);
	--components-status-bar-neutral-is-hovered-background-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-500));
	--components-status-bar-neutral-is-active-background-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-550));
	--components-status-bar-neutral-content-color: var(--semantics-categories-neutral-filled-content-color);
	--components-status-bar-accent-background-color: var(--semantics-categories-accent-filled-background-color);
	--components-status-bar-accent-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-450));
	--components-status-bar-accent-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-500));
	--components-status-bar-accent-content-color: var(--semantics-categories-accent-filled-content-color);
	--components-status-bar-success-background-color: var(--semantics-categories-success-filled-background-color);
	--components-status-bar-success-is-hovered-background-color: var(--primitives-color-success-550);
	--components-status-bar-success-is-active-background-color: var(--primitives-color-success-600);
	--components-status-bar-success-content-color: var(--semantics-categories-success-filled-content-color);
	--components-status-bar-warning-background-color: var(--semantics-categories-warning-filled-background-color);
	--components-status-bar-warning-is-hovered-background-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-650));
	--components-status-bar-warning-is-active-background-color: light-dark(var(--primitives-color-warning-500), var(--primitives-color-warning-700));
	--components-status-bar-warning-content-color: var(--semantics-categories-warning-filled-content-color);
	--components-status-bar-critical-background-color: var(--semantics-categories-critical-filled-background-color);
	--components-status-bar-critical-is-hovered-background-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-500));
	--components-status-bar-critical-is-active-background-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-550));
	--components-status-bar-critical-content-color: var(--semantics-categories-critical-filled-content-color);

	/* ## Switch */

	--components-switch-border-width: var(--primitives-border-width-regular);
	--components-switch-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--components-switch-background-color: var(--semantics-surfaces-base-background-color);
	--components-switch-thumb-border-width: var(--primitives-border-width-regular);
	--components-switch-thumb-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--components-switch-thumb-background-color: var(--semantics-surfaces-base-background-color);
	--components-switch-icon-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
	--components-switch-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
	--components-switch-is-selected-thumb-background-color: var(--semantics-controls-is-highlighted-contrast-color);
	--components-switch-is-selected-icon-color: var(--semantics-controls-is-highlighted-indicator-color);

	/* ## Tag */

	--components-tag-sm-corner-radius: var(--primitives-corner-radius-xxs);
	--components-tag-md-corner-radius: var(--primitives-corner-radius-xs);

	/* ## Timeline track cell */

	--components-timeline-track-cell-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
	--components-timeline-track-cell-future-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));

	/* ## Toggle button */

	--components-toggle-button-group-xs-gap: var(--primitives-space-4);
	--components-toggle-button-group-sm-gap: var(--primitives-space-6);
	--components-toggle-button-group-md-gap: var(--primitives-space-8);

	/* ## Toolbar */

	--components-toolbar-sm-gap: var(--primitives-space-6);
	--components-toolbar-md-gap: var(--primitives-space-8);
	--components-toolbar-lg-gap: var(--primitives-space-8);

	/* ## Tooltip */

	--components-tooltip-background-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-750));
	--components-tooltip-content-color: var(--primitives-color-neutral-0);
	--components-tooltip-box-shadow: var(--primitives-box-shadows-level-2);

	/* ## Top navigation bar */

	--components-top-navigation-bar-title-sm-font: var(--primitives-font-display-6-sm);
	--components-top-navigation-bar-title-md-font: var(--primitives-font-display-5-sm);
	--components-top-navigation-bar-title-lg-font: var(--primitives-font-display-4-sm);

	/* ## Top title bar */

	--components-top-title-bar-divider-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-350));

	/* ## Window */

	--components-window-default-width: var(--primitives-area-640);
}

:root[data-scheme="light"] {
	color-scheme: light;
}

:root[data-scheme="dark"] {
	color-scheme: dark;
}
@layer reset {
	html:has(nldd-app-view),
	html:has(nldd-app-view) body {
		margin: 0;
		height: 100%;
	}

	/* Components set their own typography inside their shadow root, but text the
	   consumer writes in the light DOM fell back to the browser default, so every
	   app solved it with its own `body { font: … }`, each one slightly different.
	   Inside @layer reset, so any consumer rule beats it without effort. */
	html:has(nldd-app-view) body {
		font: var(--primitives-font-body-md-regular-snug);
		color: var(--semantics-content-color);
	}
}
/* # Host */

nldd-rich-text {
	--_spacing: var(--components-rich-text-spacing-snug);
	--_wide-max-width: var(--components-rich-text-wide-max-width);
	--_wide-bleed-width: calc(
		(var(--_wide-max-width) - var(--components-rich-text-main-max-width)) / 2
	);
	--_main-shortfall: max(
		0px,
		calc(100% - var(--components-rich-text-main-max-width))
	);
	--_dt-width: var(--primitives-area-200);
	--_dl-column-gap: var(--primitives-space-16);
	--_dl-gap: calc(var(--_spacing) / 2);

	container-type: inline-size;
	box-sizing: border-box;
	display: grid;
	width: 100%;
	grid-template-columns:
		[full-start]   0
		[wide-start]   0
		[main-start]   minmax(0, var(--components-rich-text-main-max-width))
		[main-end]     min(calc(var(--_wide-bleed-width) * 2), var(--_main-shortfall))
		[wide-end]     1fr
		[full-end];
	row-gap: var(--_spacing);
	color: var(--semantics-content-color);
	font: var(--primitives-font-body-md-regular-snug);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

nldd-rich-text[centered] {
	--_wide-max-width: var(--components-rich-text-centered-wide-max-width);

	grid-template-columns:
		[full-start]   1fr
		[wide-start]   min(var(--_wide-bleed-width), calc(var(--_main-shortfall) / 2))
		[main-start]   minmax(0, var(--components-rich-text-main-max-width))
		[main-end]     min(var(--_wide-bleed-width), calc(var(--_main-shortfall) / 2))
		[wide-end]     1fr
		[full-end];
}

nldd-rich-text[spacing="flat"]  { --_spacing: var(--components-rich-text-spacing-flat); }
nldd-rich-text[spacing="tight"] { --_spacing: var(--components-rich-text-spacing-tight); }
nldd-rich-text[spacing="loose"] { --_spacing: var(--components-rich-text-spacing-loose); }

nldd-rich-text[hidden] {
	display: none;
}

/* # Color inherit
   color="inherit" makes all text follow the surface's text color (e.g. a
   filled-categories panel that sets a pure white/black content color).
   Links keep the underline as their affordance and signal hover with a
   thicker line instead of a color shift; figcaption takes the same color
   at the system-wide secondary opacity tier. Known v1 gaps: inline code,
   mark, tables and hr keep their own surfaces. */

nldd-rich-text[color="inherit"] {
	color: inherit;
}

nldd-rich-text[color="inherit"] a {
	color: currentColor;
	/* Pin the underline to the inherited color in every state. The hover rule
	   below only changes thickness, so without this an underline could keep the
	   default link blue and leak it against a colored surface. */
	text-decoration-color: currentColor;
}

nldd-rich-text[color="inherit"] a:hover {
	color: currentColor;
	text-decoration-thickness: var(--primitives-border-width-regular);
}

nldd-rich-text[color="inherit"] a:active {
	color: currentColor;
}

nldd-rich-text[color="inherit"] figcaption {
	color: color-mix(in oklab, currentColor var(--semantics-content-secondary-opacity), transparent);
}

/* # Child placement
   Text reads at the main measure; everything else (components, tables,
   code) gets the full span by default so new components automatically
   receive room. justify-self: start makes that room available without
   forcing it: width-100% children fill the span, the rest shrinkwraps.
   In the left-aligned layout the full/wide start lines collapse onto
   main-start, so `full` and `wide` read as rightward bleed there and as
   symmetric spans in [centered]. */

nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) {
	display: contents;
}

nldd-rich-text > *,
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > * {
	grid-column: full;
	justify-self: start;
}

nldd-rich-text[centered] > *,
nldd-rich-text[centered] > div:only-child:not([class], [style], [role], [data-width]) > * {
	justify-self: center;
}

nldd-rich-text > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote),
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote) {
	grid-column: main;
	/* Fill the main column so short text blocks keep a shared left edge —
	   justify-self: center would otherwise float a shrinkwrapped heading
	   loose from the paragraphs below it. border-box keeps padded elements
	   (ul/ol list indent) inside the column. */
	box-sizing: border-box;
	width: 100%;
}

/* nldd-table stays on the generic full default; use data-width to
   override per table. */
nldd-rich-text > :is(img, figure, video, iframe, table),
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(img, figure, video, iframe, table) {
	grid-column: wide;
}

nldd-rich-text > :is(pre, nldd-code-viewer),
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(pre, nldd-code-viewer) {
	width: 100%;
}

/* Per-item override for editors; wins on specificity from every default
   above. */
nldd-rich-text > [data-width="main"],
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > [data-width="main"] {
	grid-column: main;
}

nldd-rich-text > [data-width="wide"],
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > [data-width="wide"] {
	grid-column: wide;
}

nldd-rich-text > [data-width="full"],
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > [data-width="full"] {
	grid-column: full;
}

nldd-rich-text > :first-child,
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :first-child {
	margin-top: 0;
}

nldd-rich-text > :last-child,
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :last-child {
	margin-bottom: 0;
}

nldd-rich-text *:focus-visible {
	outline: var(--semantics-focus-ring-outline);
	outline-offset: var(--semantics-focus-ring-outline-offset);
	box-shadow: var(--semantics-focus-ring-box-shadow);
}

nldd-rich-text *:focus:not(:focus-visible) {
	outline: none;
}


/* # Headings */

nldd-rich-text :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--_spacing);
	margin-bottom: 0;
	text-wrap: balance;
}


/* # Heading 1 */

nldd-rich-text h1 {
	@container (max-width: 640px) {
		font: var(--primitives-font-display-1-sm);
	}

	@container (min-width: 641px) and (max-width: 1007px) {
		font: var(--primitives-font-display-1-md);
	}

	@container (min-width: 1008px) {
		font: var(--primitives-font-display-1-lg);
	}
}


/* # Heading 2 */

nldd-rich-text h2 {
	@container (max-width: 640px) {
		font: var(--primitives-font-display-2-sm);
	}

	@container (min-width: 641px) and (max-width: 1007px) {
		font: var(--primitives-font-display-2-md);
	}

	@container (min-width: 1008px) {
		font: var(--primitives-font-display-2-lg);
	}
}


/* # Heading 3 */

nldd-rich-text h3 {
	@container (max-width: 640px) {
		font: var(--primitives-font-display-3-sm);
	}

	@container (min-width: 641px) and (max-width: 1007px) {
		font: var(--primitives-font-display-3-md);
	}

	@container (min-width: 1008px) {
		font: var(--primitives-font-display-3-lg);
	}
}


/* # Heading 4 */

nldd-rich-text h4 {
	@container (max-width: 640px) {
		font: var(--primitives-font-display-4-sm);
	}

	@container (min-width: 641px) and (max-width: 1007px) {
		font: var(--primitives-font-display-4-md);
	}

	@container (min-width: 1008px) {
		font: var(--primitives-font-display-4-lg);
	}
}


/* # Heading 5 */

nldd-rich-text h5 {
	@container (max-width: 640px) {
		font: var(--primitives-font-display-5-sm);
	}

	@container (min-width: 641px) and (max-width: 1007px) {
		font: var(--primitives-font-display-5-md);
	}

	@container (min-width: 1008px) {
		font: var(--primitives-font-display-5-lg);
	}
}


/* # Heading 6 */

nldd-rich-text h6 {
	@container (max-width: 640px) {
		font: var(--primitives-font-display-6-sm);
	}

	@container (min-width: 641px) and (max-width: 1007px) {
		font: var(--primitives-font-display-6-md);
	}

	@container (min-width: 1008px) {
		font: var(--primitives-font-display-6-lg);
	}
}


/* # Paragraph */

nldd-rich-text p {
	margin: 0;
	/* Safety net, independent of [hyphens]: lets long URLs and Dutch compounds
	   break as soon as they are wider than the column, instead of overflowing
	   at narrow (mobile) widths. break-word (not anywhere) leaves the grid
	   min-content size alone, so the main column stays intact. */
	overflow-wrap: break-word;
	text-wrap: pretty;
}


/* # Hyphenation */

/* Opt-in through [hyphens]; only works with a correct `lang` on the page. */
nldd-rich-text[hyphens] :is(p, li, dd) {
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	hyphenate-limit-chars: 6 3 3;
}


/* # Lists */

nldd-rich-text ul {
	margin: 0;
	padding-left: var(--components-rich-text-grid-size);
	list-style-type: disc;
}

nldd-rich-text ol {
	margin: 0;
	padding-left: var(--components-rich-text-grid-size);
	list-style-type: decimal;
}

nldd-rich-text > :is(ul, ol),
nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(ul, ol) {
	margin-block: calc(var(--_spacing) / -2);
}

nldd-rich-text ol > li > ol {
	list-style-type: lower-alpha;
}


/* # List Item */

nldd-rich-text li {
	margin: calc(var(--_spacing) / 2) 0;
	padding: 0;
	/* Zelfde vangnet als p: lange strings breken i.p.v. overlopen. */
	overflow-wrap: break-word;
	text-wrap: pretty;
}

nldd-rich-text li > * + * {
	margin-top: var(--_spacing);
}


/* # Definition list */

nldd-rich-text dl {
	margin: 0;
	display: grid;
	column-gap: var(--_dl-column-gap);

	@container (max-width: 640px) {
		grid-template-columns: 1fr;
	}

	@container (min-width: 641px) {
		grid-template-columns: var(--_dt-width) 1fr;
	}
}

nldd-rich-text dt {
	font-weight: var(--primitives-font-weight-body-bold);

	@container (min-width: 641px) {
		grid-column: 1;
	}
}

nldd-rich-text dd {
	margin-inline: 0;
	text-wrap: pretty;

	@container (min-width: 641px) {
		grid-column: 2;
	}
}

/* Gap before each new definition group: a dt that starts a group, i.e. the
   first dt after the previous group's dd. (The old dt:not(:first-child) also
   gapped a second, synonym dt within the same group.) */
nldd-rich-text dd + dt {
	margin-top: var(--_dl-gap);
}

/* Wide-viewport companion: in the two-column grid the new group's dd shares
   its row with that group-starting dt, so it needs the same top margin to
   stay aligned. */
nldd-rich-text dd + dt + dd {
	@container (min-width: 641px) {
		margin-top: var(--_dl-gap);
	}
}


/* # Link */

nldd-rich-text a {
	border-radius: var(--primitives-corner-radius-xxs);
	color: var(--semantics-links-color);
	text-decoration: underline;
	text-underline-offset: var(--primitives-space-2);
	cursor: pointer;

	&:hover {
		color: var(--semantics-links-is-hovered-color);
	}

	&:active {
		color: var(--semantics-links-is-active-color);
	}
}


/* # Strong and Bold */

nldd-rich-text strong,
nldd-rich-text b {
	color: inherit;
	font-weight: var(--primitives-font-weight-body-bold);
}


/* # Emphasis and Italic */

nldd-rich-text em,
nldd-rich-text i {
	color: inherit;
	font-style: italic;
}


/* # Code */

nldd-rich-text code {
	padding: var(--primitives-space-4);
	border-radius: var(--semantics-controls-xs-corner-radius);
	background-color: var(--semantics-surfaces-tinted-background-color);
	font-family: var(--primitives-font-family-monospace);
	font-size: 0.85em;
}

/* Inside table cells, let long code tokens (e.g. type_spec.precision) break so
   they don't force a column wide; in running text code stays intact. */
nldd-rich-text :is(th, td) code {
	overflow-wrap: anywhere;
}

/* A markdown renderer emits a fenced block as `<pre><code>`, so the frame goes
   on the pre: it is the block-level element, and `code` stays inline. Without
   overflow-x a long line escapes the element and stretches every ancestor,
   which shows up as a card that ignores its own width. */
nldd-rich-text pre {
	box-sizing: border-box;
	margin: 0;
	padding: var(--primitives-space-16);
	border-radius: var(--semantics-surfaces-corner-radius);
	/* Inner box-shadow paints the ring inside the radius without taking layout
	   space, same as nldd-box, nldd-banner and nldd-code-viewer. Without it the
	   block is invisible on a tinted surface: identical background, no edge. */
	box-shadow: inset 0 0 0 var(--semantics-surfaces-border-width) var(--semantics-surfaces-tinted-border-color);
	background-color: var(--semantics-surfaces-tinted-background-color);
	font: var(--primitives-font-monospace-sm-regular-snug);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;

	/* forced-colors strips box-shadow, so restore the frame with a real border.
	   Same fallback as nldd-box, nldd-banner and nldd-list. */
	@media (forced-colors: active) {
		border: var(--semantics-surfaces-border-width) solid CanvasText;
	}
}

/* The tinted chip is for inline code. Inside a pre it paints once per rendered
   line, so the block hands it back and lets the pre carry the frame. */
nldd-rich-text pre > code {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	font: inherit;
}


/* # Mark */

nldd-rich-text mark {
	padding: var(--primitives-space-1) var(--primitives-space-2);
	border-radius: var(--semantics-controls-xs-corner-radius);
	background-color: var(--semantics-content-mark-background-color);
	color: var(--semantics-content-mark-color);
}


/* # Figure */

nldd-rich-text figure {
	display: flex;
	flex-direction: column;
	gap: var(--primitives-space-8);
	margin: 0;
}


/* # Figure Caption */

nldd-rich-text figcaption {
	color: var(--semantics-content-secondary-color);
	font: var(--primitives-font-body-xs-regular-snug);
	text-align: left;
	text-wrap: pretty;
}


/* # Blockquote */

nldd-rich-text blockquote {
	display: flex;
	flex-direction: column;
	gap: calc(var(--semantics-blockquotes-md-spacing) / 2);
	margin-block: max(
		0px,
		calc(var(--semantics-blockquotes-md-spacing) - var(--_spacing))
	);
	margin-inline: 0;
	padding-inline: var(--semantics-blockquotes-md-spacing);
	border-left: var(--semantics-blockquotes-border);
	font: var(--semantics-blockquotes-md-quote-font);
	text-wrap: pretty;

	@container (max-width: 640px) {
		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
		margin-block: max(
			0px,
			calc(var(--semantics-blockquotes-sm-spacing) - var(--_spacing))
		);
		padding-inline: var(--semantics-blockquotes-sm-spacing);
		font: var(--semantics-blockquotes-sm-quote-font);
	}
}

nldd-rich-text blockquote > p {
	margin: 0;
}


/* # Inline Quote */

nldd-rich-text q {
	font-style: italic;

	&::before {
		content: open-quote;
	}

	&::after {
		content: close-quote;
	}
}


/* # Image */

nldd-rich-text img {
	display: block;
	border-radius: var(--semantics-controls-md-corner-radius);
	max-width: 100%;
	height: auto;
}


/* # Horizontal Rule */

nldd-rich-text hr {
	margin: 0;
	border: none;
	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
	/* An hr has no content, so the justify-self: start default would
	   shrinkwrap it to zero width. */
	width: 100%;
}


/* # Table */

nldd-rich-text table {
	display: block;
	/* Mobile scroll: the block shrinks to its content (so the border hugs
	   narrow tables) but caps at the container, scrolling when the columns
	   need more room. width: auto would instead fill 100% as a block. */
	width: max-content;
	max-width: 100%;
	margin-block: max(
		0px,
		calc(var(--components-rich-text-spacing-snug) - var(--_spacing))
	);
	border-collapse: separate;
	border-spacing: 0;
	border: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
	border-radius: var(--semantics-tables-corner-radius);
	background-color: var(--semantics-surfaces-base-background-color);
	font: var(--primitives-font-body-md-regular-tight);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;

	@container (min-width: 641px) {
		display: table;
		width: 100%;
		overflow-x: unset;
		scrollbar-width: unset;
	}
}

/* ## Table Row */

nldd-rich-text tr {
	/* Row min-height: `min-height` does not apply to a table-cell per spec, so
	   set it on the row, where `height` acts as a minimum. Mirrors nldd-table. */
	height: var(--semantics-tables-row-min-height);
}

/* ## Table Header Cell */

nldd-rich-text th {
	min-width: var(--primitives-area-160);
	padding-block: var(--semantics-tables-row-padding-block);
	padding-inline: calc(var(--semantics-tables-column-gap) / 2);
	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
	font: var(--primitives-font-body-md-bold-tight);
	text-align: start;

	@container (min-width: 641px) {
		min-width: unset;
	}
}

/* ## Table Data Cell */

nldd-rich-text td {
	min-width: var(--primitives-area-160);
	padding-block: var(--semantics-tables-row-padding-block);
	padding-inline: calc(var(--semantics-tables-column-gap) / 2);
	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
	font: var(--primitives-font-body-md-regular-tight);
	text-align: left;

	@container (min-width: 641px) {
		min-width: unset;
	}
}

/* ## Table Outer Cells */

nldd-rich-text tr > :is(th, td):first-child {
	padding-inline-start: var(--semantics-tables-row-padding-inline);
}

nldd-rich-text tr > :is(th, td):last-child {
	padding-inline-end: var(--semantics-tables-row-padding-inline);
}

/* ## Table Last Row */

/* Only the final BODY row drops its bottom border (the table's own border
   closes it off). Without the `tbody` scope an unscoped `tr:last-child` also
   matches the header row — it is the last (only) child of `thead` — which
   wrongly stripped the header underline on tables that render a `<thead>`. */
nldd-rich-text tbody tr:last-child > :is(th, td) {
	border-bottom: none;
}
/* # Host */

nldd-form-section {
	display: block;
	box-sizing: border-box;
}

nldd-form-section[hidden] {
	display: none;
}

/* A margin and not padding, so it collapses with the gap the form puts under
   the previous child: 16 and 24 next to each other are 24, not 40. Padding
   collapses with nothing and would have made it 32. */

nldd-form > form > nldd-form-section:not(:first-child) {
	margin-block-start: var(--semantics-forms-sections-gap);
}

/* The :has() guard also settles the cascade: a physical margin-bottom and a
   logical margin-block-end for the same side are decided on declaration order,
   not specificity, so without it the outcome would depend on the load order of
   the files. */

nldd-form > form > nldd-form-section:has(~ *:not([hidden]):not([type='hidden'])) {
	margin-block-end: var(--semantics-forms-sections-gap);
}


/* # Block (fieldset) — reset native styles */

nldd-form-section > fieldset.form-section {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: block;
	width: 100%;
}


/* # Header (rendered as <legend>, must be direct child of <fieldset>).
   Title and supporting text are spans inside the legend so screen readers read
   them together as the group label. */

nldd-form-section .form-section__header {
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}

nldd-form-section .form-section__header[hidden] {
	display: none;
}


/* # Title */

nldd-form-section .form-section__title {
	display: block;
	color: var(--semantics-content-color);
	font: var(--semantics-forms-section-title-font);
}


/* # Supporting text */

nldd-form-section .form-section__supporting-text {
	display: block;
	color: var(--semantics-content-secondary-color);
	font: var(--semantics-forms-section-supporting-text-font);
}


/* # Main — gets margin-top to separate from header. When no header is
   rendered (no text + no supporting-text), main is the first child of
   the fieldset and the margin collapses via :first-child.

   Closer to the heading than a section stands to what came before it: the
   heading belongs to what is under it, and the same distance on both sides
   would leave it floating between the two. */

nldd-form-section > fieldset.form-section > .form-section__main {
	display: block;
	margin-top: var(--primitives-space-8);
}

nldd-form-section > fieldset.form-section > .form-section__main:first-child {
	margin-top: 0;
}

/* # Vertical rhythm within a section

   Same rule and same reason as in form.css: the gap hangs on the bottom, and
   the :has() guard keeps a trailing gap off the last visible child. */

nldd-form-section .form-section__main > *:has(~ *:not([hidden]):not([type='hidden'])) {
	margin-bottom: var(--semantics-forms-fields-gap);
}
/* # Host */

nldd-form {
	container-type: inline-size;
	display: block;
}

nldd-form[hidden] {
	display: none;
}

nldd-form > form {
	display: block;
}

/* # Vertical rhythm

   The gap hangs on the BOTTOM of the preceding child, not on the top of the
   following one. Hidden children (formset management inputs, framework
   bookkeeping) generate no box, so a top margin would let them push the first
   visible field down; a bottom margin on them renders nothing. The :has()
   guard keeps the rhythm from adding a trailing gap when the remaining
   children are all hidden. */

nldd-form > form > *:has(~ *:not([hidden]):not([type='hidden'])) {
	margin-bottom: var(--semantics-forms-fields-gap);
}

/* A margin, so it collapses with the one the rhythm above puts under the last
   child: 16 and 24 next to each other are 24, not 40. Here rather than on the
   component's own :host, because a consumer reset overrides a host declaration
   and this is a distance between siblings, not something the element paints. */

nldd-form nldd-form-actions {
	margin-top: var(--semantics-forms-sections-gap);
}
/* Reduce FOUC — flash of unstyled / not-yet-upgraded web components.
 *
 * Bundled into the global stylesheet, so importing
 * '@nldd/design-system/styles' pulls it in. Also importable on its own:
 *   import '@nldd/design-system/styles/fouc';
 * (or, in an Astro layout, in the frontmatter — it applies to the whole page).
 *
 * Keeps the page hidden until every custom element on it has upgraded (:defined),
 * or a 200ms fallback — whichever comes first, so the page still reveals if a
 * component never loads. Note the :defined check is page-wide: ANY undefined
 * custom element on the page (including a non-NLDD one) holds the page hidden
 * until it upgrades or the fallback fires. Pure CSS, no JS.
 *
 * Based on https://dev.to/stuffbreaker/reducing-fouc-with-web-components-1jnh
 */
body {
	/* The always-on animation reveals — and, via `forwards`, keeps revealed — after
	   the fallback delay, so a later-added undefined element can't re-hide the page. */
	animation: nldd-fouc-reveal 0s linear 200ms forwards;
}

body:has(:not(:defined)) {
	opacity: 0;
}

@keyframes nldd-fouc-reveal {
	to {
		opacity: 1;
	}
}