@nldd/design-system 0.8.37

package/dist/css/settings.css

@@ -0,0 +1,1201 @@
+/**
+ * NLDD Design System — CSS variables & fonts
+ */
+
+@import "./palettes.generated.css";
+
+@font-face {
+	font-family: 'RijksSansVF';
+	src: url('../fonts/RijksSansVF-Regular.ttf') format('truetype-variations');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'RijksSansVF';
+	src: url('../fonts/RijksSansVF-Italic.ttf') format('truetype-variations');
+	font-weight: 100 900;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'IBM Plex Mono';
+	src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'IBM Plex Mono';
+	src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@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 palettes.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;
+
+	/* ## Breakpoints */
+
+	--primitives-breakpoint-sm-min: 320px;
+	--primitives-breakpoint-sm-max: 640px;
+	--primitives-breakpoint-md-min: 641px;
+	--primitives-breakpoint-md-max: 1007px;
+	--primitives-breakpoint-lg-min: 1008px;
+
+	/* ## 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: 9px;
+	--primitives-corner-radius-lg: 13px;
+	--primitives-corner-radius-xl: 18px;
+	--primitives-corner-radius-xxl: 24px;
+	--primitives-corner-radius-xxxl: 31px;
+	--primitives-corner-radius-full: 9999px;
+
+	/* ## Typography */
+
+	--primitives-font-family-sans-serif-fallback: system-ui, sans-serif;
+	--primitives-font-family-sans-serif: RijksSansVF, system-ui, sans-serif;
+	--primitives-font-family-serif-fallback: serif;
+	--primitives-font-family-serif: RijksoverheidSerif, serif;
+	--primitives-font-family-monospace-fallback: monospace;
+	--primitives-font-family-monospace: 'IBM Plex Mono', monospace;
+	--primitives-font-family-body-fallback: var(--primitives-font-family-sans-serif-fallback);
+	--primitives-font-family-body: var(--primitives-font-family-sans-serif);
+	--primitives-font-family-display-fallback: var(--primitives-font-family-sans-serif-fallback);
+	--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: 450;
+	--primitives-font-weight-body-semi-bold: 475;
+	--primitives-font-weight-body-bold: 500;
+	--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: 450;
+	--primitives-font-weight-display-semi-bold: 475;
+	--primitives-font-weight-display-bold: 500;
+	--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-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-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-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-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-bold-flat:
+		var(--primitives-font-weight-body-bold)
+		var(--primitives-font-size-70) / 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-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-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;
+	--primitives-opacity-dragging: 0.4;
+
+	/* ## 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-shadow-opacity-factor: 1;
+
+	@media (prefers-color-scheme: dark) {
+		&:not([data-scheme="light"]) {
+			--primitives-box-shadow-opacity-factor: 3;
+		}
+	}
+
+	&[data-scheme="dark"] {
+		--primitives-box-shadow-opacity-factor: 3;
+	}
+
+	--primitives-box-shadows-level-1:
+		0px 2px 4px 0px rgba(0, 0, 0, calc(0.11 * var(--primitives-box-shadow-opacity-factor))),
+		0px 0px 2px 0px rgba(0, 0, 0, calc(0.09 * var(--primitives-box-shadow-opacity-factor)))
+	;
+	--primitives-box-shadows-level-2:
+		0px 2px 8px 0px rgba(0, 0, 0, calc(0.1 * var(--primitives-box-shadow-opacity-factor))),
+		0px 1px 4px 0px rgba(0, 0, 0, calc(0.08 * var(--primitives-box-shadow-opacity-factor))),
+		0px 0px 2px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor)))
+	;
+	--primitives-box-shadows-level-3:
+		0px 4px 16px 0px rgba(0, 0, 0, calc(0.12 * var(--primitives-box-shadow-opacity-factor))),
+		0px 2px 8px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
+		0px 1px 4px 0px rgba(0, 0, 0, calc(0.05 * var(--primitives-box-shadow-opacity-factor))),
+		0px 0px 2px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor)))
+	;
+	--primitives-box-shadows-level-4:
+		0px 8px 32px 0px rgba(0, 0, 0, calc(0.1 * var(--primitives-box-shadow-opacity-factor))),
+		0px 4px 16px 0px rgba(0, 0, 0, calc(0.08 * var(--primitives-box-shadow-opacity-factor))),
+		0px 2px 8px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
+		0px 1px 4px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor))),
+		0px 0px 2px 0px rgba(0, 0, 0, calc(0.02 * var(--primitives-box-shadow-opacity-factor)))
+	;
+	--primitives-box-shadows-level-5:
+		0px 16px 64px 0px rgba(0, 0, 0, calc(0.11 * var(--primitives-box-shadow-opacity-factor))),
+		0px 8px 32px 0px rgba(0, 0, 0, calc(0.09 * var(--primitives-box-shadow-opacity-factor))),
+		0px 4px 16px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
+		0px 2px 8px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor))),
+		0px 1px 4px 0px rgba(0, 0, 0, calc(0.03 * var(--primitives-box-shadow-opacity-factor))),
+		0px 0px 2px 0px rgba(0, 0, 0, calc(0.02 * var(--primitives-box-shadow-opacity-factor)))
+	;
+	--primitives-box-shadows-level-6:
+		0px 32px 128px 0px rgba(0, 0, 0, calc(0.16 * var(--primitives-box-shadow-opacity-factor))),
+		0px 16px 64px 0px rgba(0, 0, 0, calc(0.1 * var(--primitives-box-shadow-opacity-factor))),
+		0px 8px 32px 0px rgba(0, 0, 0, calc(0.08 * var(--primitives-box-shadow-opacity-factor))),
+		0px 4px 16px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
+		0px 2px 8px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor))),
+		0px 1px 4px 0px rgba(0, 0, 0, calc(0.03 * var(--primitives-box-shadow-opacity-factor))),
+		0px 0px 2px 0px rgba(0, 0, 0, calc(0.02 * var(--primitives-box-shadow-opacity-factor)))
+	;
+
+
+	/* # Semantics */
+
+	/* ## Surfaces */
+
+	--semantics-surfaces-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-100));
+	--semantics-surfaces-tinted-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-75));
+
+	/* ## Content */
+
+	--semantics-content-color: light-dark(var(--primitives-color-neutral-800), var(--primitives-color-neutral-850));
+	--semantics-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
+	--semantics-content-error-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
+	--semantics-content-success-color: light-dark(var(--primitives-color-success-600), var(--primitives-color-success-650));
+
+	/* ## Links */
+
+	--semantics-links-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-600));
+	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-650));
+	--semantics-links-is-active-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-700));
+
+	/* ## 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-corner-radius: var(--primitives-corner-radius-xxxl);
+	--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-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-md-block-padding: var(--primitives-space-12);
+	--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(--semantics-surfaces-background-color);
+	--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(--semantics-surfaces-background-color);
+	--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(--semantics-surfaces-background-color);
+
+	--semantics-controls-link-cursor: default;
+
+	/* ## Buttons */
+
+	--semantics-buttons-md-font: var(--primitives-font-body-md-bold-flat);
+	--semantics-buttons-sm-font: var(--primitives-font-body-sm-bold-flat);
+	--semantics-buttons-xs-font: var(--primitives-font-body-xs-bold-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-md-gap: var(--primitives-space-6);
+	--semantics-buttons-sm-gap: var(--primitives-space-4);
+	--semantics-buttons-xs-gap: var(--primitives-space-3);
+
+	--semantics-buttons-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
+	--semantics-buttons-neutral-tinted-content-color: light-dark(var(--primitives-color-neutral-900), var(--primitives-color-neutral-900));
+	--semantics-buttons-neutral-tinted-secondary-content-color: light-dark(var(--primitives-color-neutral-750), 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-is-hovered-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--semantics-buttons-neutral-tinted-is-hovered-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-hovered-secondary-content-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-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
+	--semantics-buttons-neutral-tinted-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+	--semantics-buttons-neutral-tinted-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
+	--semantics-buttons-neutral-tinted-is-selected-secondary-content-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-content-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
+	--semantics-buttons-neutral-tinted-is-selected-is-hovered-secondary-content-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-content-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);
+	--semantics-buttons-neutral-tinted-is-selected-is-active-secondary-content-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);
+
+	--semantics-buttons-neutral-transparent-content-color: light-dark(var(--primitives-color-neutral-900), var(--primitives-color-neutral-900));
+	--semantics-buttons-neutral-transparent-is-hovered-content-color: light-dark(var(--primitives-color-neutral-950), var(--primitives-color-neutral-950));
+	--semantics-buttons-neutral-transparent-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+
+	--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--semantics-buttons-accent-filled-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--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-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--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-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+
+	--semantics-buttons-accent-outlined-border-thickness: var(--primitives-border-width-regular);
+	--semantics-buttons-accent-outlined-border-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--semantics-buttons-accent-outlined-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--semantics-buttons-accent-outlined-is-hovered-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
+	--semantics-buttons-accent-outlined-is-hovered-content-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
+	--semantics-buttons-accent-outlined-is-active-border-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+	--semantics-buttons-accent-outlined-is-active-content-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+
+	--semantics-buttons-accent-transparent-content-color: light-dark(var(--primitives-color-accent-750), 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-active-content-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+
+	--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-650), var(--primitives-color-critical-700));
+	--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-content-color: light-dark(var(--primitives-color-critical-700), 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-content-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-800));
+
+	/* ## Input fields */
+
+	--semantics-input-fields-border-thickness: 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-thickness) solid var(--semantics-input-fields-border-color);
+	--semantics-input-fields-background-color: var(--semantics-surfaces-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-150));
+
+	--semantics-input-fields-xs-text-font: var(--primitives-font-body-xs-regular-flat);
+	/* Font for the invisible native <select>: Safari derives the option popup size from this,
+	   and 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-gap: var(--primitives-space-16);
+	--semantics-forms-gap-tight: var(--primitives-space-8);
+	--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-subtitle-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));
+
+	/* ## Dividers */
+
+	--semantics-dividers-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
+	--semantics-dividers-thickness: var(--primitives-border-width-thin);
+
+	/* ## 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-32);
+	--semantics-page-sections-md-margin-block: var(--primitives-space-24);
+	--semantics-page-sections-md-gap: var(--primitives-space-24);
+	--semantics-page-sections-lg-margin-inline: var(--primitives-space-48);
+	--semantics-page-sections-lg-margin-block: var(--primitives-space-32);
+	--semantics-page-sections-lg-gap: var(--primitives-space-24);
+
+	/* ## Overlays */
+
+	--semantics-overlays-backdrop-opacity-factor: 1;
+
+	@media (prefers-color-scheme: dark) {
+		&:not([data-scheme="light"]) {
+			--semantics-overlays-backdrop-opacity-factor: 2;
+		}
+	}
+
+	&[data-scheme="dark"] {
+		--semantics-overlays-backdrop-opacity-factor: 2;
+	}
+
+	--semantics-overlays-backdrop-color: rgba(0, 0, 0, calc(0.2 * var(--semantics-overlays-backdrop-opacity-factor)));
+	--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-background-color);
+
+
+	/* # Components */
+
+	/* ## Badge */
+
+	--components-badge-corner-radius: var(--primitives-corner-radius-full);
+	--components-badge-critical-background-color: var(--primitives-color-critical-550);
+	--components-badge-critical-content-color: var(--primitives-color-critical-0);
+	--components-badge-accent-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--components-badge-accent-content-color: var(--primitives-color-accent-0);
+	--components-badge-neutral-background-color: var(--primitives-color-neutral-800);
+	--components-badge-neutral-content-color: var(--primitives-color-neutral-0);
+	--components-badge-warning-background-color: var(--primitives-color-warning-300);
+	--components-badge-warning-content-color: var(--primitives-color-warning-1000);
+	--components-badge-success-background-color: var(--primitives-color-success-550);
+	--components-badge-success-content-color: var(--primitives-color-success-0);
+
+	/* ## Box */
+
+	--components-box-background-color: var(--semantics-surfaces-tinted-background-color);
+	--components-box-on-tinted-background-color: var(--semantics-surfaces-background-color);
+	--components-box-corner-radius: var(--primitives-corner-radius-xl);
+	--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-background-color);
+	--components-card-corner-radius: var(--primitives-corner-radius-none);
+	--components-card-box-shadow: var(--primitives-box-shadows-level-2);
+
+	/* ## Checkbox */
+
+	--components-checkbox-border-thickness: 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-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-bold-flat);
+
+	/* ## Form field */
+
+	--components-form-field-gap: var(--primitives-space-2);
+
+	/* ## 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-thickness: 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);
+
+	/* ## List */
+
+	--components-list-corner-radius: var(--semantics-controls-md-corner-radius);
+	--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-md);
+	--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-selected-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
+	--components-list-item-is-selected-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+	--components-list-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
+	--components-list-item-is-dragging-opacity: var(--primitives-opacity-dragging);
+
+	/* ## 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);
+
+	/* ## Menu bar */
+
+	--components-menu-bar-item-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-750));
+	--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);
+	--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-open-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-menu-bar-item-font: var(--primitives-font-body-md-bold-flat);
+	--components-menu-bar-item-inline-padding: var(--primitives-space-8);
+
+	/* ## Popover */
+
+	--components-popover-default-width: var(--primitives-area-320);
+
+	/* ## Radio button */
+
+	--components-radio-button-border-thickness: 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-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-thickness: 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-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);
+
+	/* ## Switch */
+
+	--components-switch-border-thickness: 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-background-color);
+	--components-switch-thumb-border-thickness: 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-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);
+	--components-tag-neutral-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-150));
+	--components-tag-neutral-content-color: var(--primitives-color-neutral-800);
+	--components-tag-accent-background-color: light-dark(var(--primitives-color-accent-75), var(--primitives-color-accent-150));
+	--components-tag-accent-content-color: var(--primitives-color-accent-750);
+	--components-tag-success-background-color: light-dark(var(--primitives-color-success-75), var(--primitives-color-success-150));
+	--components-tag-success-content-color: var(--primitives-color-success-750);
+	--components-tag-warning-background-color: light-dark(var(--primitives-color-warning-75), var(--primitives-color-warning-150));
+	--components-tag-warning-content-color: var(--primitives-color-warning-750);
+	--components-tag-critical-background-color: light-dark(var(--primitives-color-critical-75), var(--primitives-color-critical-150));
+	--components-tag-critical-content-color: var(--primitives-color-critical-750);
+
+	/* ## Title */
+
+	--components-title-sm-overline-font: var(--primitives-font-body-sm-regular-tight);
+	--components-title-sm-subtitle-font: var(--primitives-font-body-md-regular-tight);
+
+	--components-title-md-overline-font: var(--primitives-font-body-sm-regular-tight);
+	--components-title-md-subtitle-font: var(--primitives-font-body-md-regular-tight);
+
+	--components-title-lg-overline-font: var(--primitives-font-body-md-regular-tight);
+	--components-title-lg-subtitle-font: var(--primitives-font-body-md-regular-tight);
+
+	/* ## 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);
+
+	/* ## 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;
+}