@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/global.css

@@ -291,56 +291,4050 @@ h3 {
     --c-rich-text_headline--margin:1.5em 0 1em;
   }
 }
+:root, [ks-inverted], [ks-theme] {
+  --dsa-text-color-on-primary-base: var(--color-on-primary);
+  --dsa-text-color-on-primary-inverted-base: var(--color-on-primary-inverted);
+  --dsa-overlay--background-color: var(--ks-color-fg-alpha-4);
+  --dsa-overlay-box_transparent--background-color: var(--ks-color-bg-alpha-4);
+  --dsa-overlay-box_transparent--backdrop-filter: blur(16px);
+  --dsa-overlay-box_opaque--background-color: var(--ks-color-bg-alpha-2);
+  --dsa-overlay-box_opaque--backdrop-filter: blur(20px);
+  --dsa-overlay-box--text-color: var(--ks-color-fg);
+  --dsa-overlay-text--shadow-base: 0 0 10px var(--ks-color-fg-alpha-3);
+  --dsa-overlay-text--shadow-inverted-base: 0 0 10px var(--ks-color-fg-alpha-3-inverted);
+  --dsa-overlay-text--text-color-base: var(--ks-text-color-display-inverted);
+  --dsa-overlay-text--text-color-inverted-base: var(--ks-text-color-display);
+  --dsa-topic--font: var(--ks-font-display-m);
+  --dsa-topic--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-topic--color: var(--ks-text-color-display);
+  --dsa-topic--font-family: var(--ks-font-family-display);
+  --dsa-link--font-weight: var(--ks-font-weight-medium);
+  --dsa-link--color: var(--ks-text-color-default-interactive);
+  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
+  --dsa-link--text-decoration: none;
+  --dsa-link--text-decoration_hover: none;
+  --dsa-typo--highlight: var(--ks-color-primary);
+  --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
+  --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
+}
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-content--horizontal-spacing: var(--ks-spacing-inset-xl);
+  }
+}
+:root, [ks-inverted], [ks-theme] {
+  --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
+  --dsa-content--width_default: calc(var(--ks-font-size-copy-m) * 50);
+  --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 72);
+  --dsa-content--width_max: 100vw;
+  --dsa-content--width_full: 100vw;
+  --dsa-tile--width_smallest: calc(var(--ks-font-size-copy-m) * 10);
+  --dsa-tile--width_small: calc(var(--ks-font-size-copy-m) * 14);
+  --dsa-tile--width_medium: calc(var(--ks-font-size-copy-m) * 20);
+  --dsa-tile--width_large: calc(var(--ks-font-size-copy-m) * 28);
+  --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 42);
+  --dsa-logo--height: 2rem;
+}
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-logo--height: 2.25rem;
+  }
+}
+@media (min-width: 62em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-logo--height: 2.5rem;
+  }
+}
+:root, [ks-inverted], [ks-theme] {
+  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
+}
+
+/* inter-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: 400;
+  src: url("static/fonts/systemics/Montserrat-Regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: 500;
+  src: url("static/fonts/systemics/Montserrat-Medium.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: 600;
+  src: url("static/fonts/systemics/Montserrat-SemiBold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: 700;
+  src: url("static/fonts/systemics/Montserrat-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+.color-frame {
+  width: 100px;
+  height: 100px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.color-swatches {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+}
+.color-swatches[ks-inverted=true] {
+  background-color: rgb(33, 31, 36);
+  padding: 1em;
+}
+.color-swatches > div {
+  border-style: solid;
+  width: 100px;
+  height: 50px;
+  display: flex;
+  gap: var(--ks-spacing-s);
+}
+
+.color-frame {
+  width: 100px;
+  height: 100px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.color-test {
+  background-color: var(--ks-color-test);
+}
+
+.color-swatches {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+}
+.color-swatches[ks-inverted=true] {
+  background-color: rgb(33, 31, 36);
+  padding: 1em;
+}
+.color-swatches > div {
+  width: 100px;
+  height: 50px;
+  display: flex;
+  gap: var(--ks-spacing-s);
+}
+
+.color-frame {
+  width: 100px;
+  height: 100px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.color-test {
+  background-color: var(--ks-color-test);
+}
+
+.color-swatches {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+}
+.color-swatches[ks-inverted=true] {
+  background-color: rgb(33, 31, 36);
+  padding: 1em;
+}
+.color-swatches > div {
+  width: 100px;
+  height: 50px;
+  display: flex;
+  gap: var(--ks-spacing-s);
+}
+
+.font-sizes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.font-sizes-display {
+  font-family: var(--ks-font-family-display, sans-serif);
+}
+.font-sizes-interface {
+  font-family: var(--ks-font-family-interface, sans-serif);
+}
+.font-sizes-copy {
+  font-family: var(--ks-font-family-copy, sans-serif);
+}
+.font-sizes-mono {
+  font-family: var(--ks-font-family-mono, monospace);
+}
+
+.font-size-display-xxs {
+  font: var(--ks-font-display-xxs);
+}
+.font-size-display-xs {
+  font: var(--ks-font-display-xs);
+}
+.font-size-display-s {
+  font: var(--ks-font-display-s);
+}
+.font-size-display-m {
+  font: var(--ks-font-display-m);
+}
+.font-size-display-l {
+  font: var(--ks-font-display-l);
+}
+.font-size-display-xl {
+  font: var(--ks-font-display-xl);
+}
+.font-size-display-xxl {
+  font: var(--ks-font-display-xxl);
+}
+.font-size-copy-xxs {
+  font-size: var(--ks-font-size-copy-xxs);
+}
+.font-size-copy-xs {
+  font-size: var(--ks-font-size-copy-xs);
+}
+.font-size-copy-s {
+  font-size: var(--ks-font-size-copy-s);
+}
+.font-size-copy-m {
+  font-size: var(--ks-font-size-copy-m);
+}
+.font-size-copy-l {
+  font-size: var(--ks-font-size-copy-l);
+}
+.font-size-copy-xl {
+  font-size: var(--ks-font-size-copy-xl);
+}
+.font-size-copy-xxl {
+  font-size: var(--ks-font-size-copy-xxl);
+}
+.font-size-interface-xxs {
+  font-size: var(--ks-font-size-interface-xxs);
+}
+.font-size-interface-xs {
+  font-size: var(--ks-font-size-interface-xs);
+}
+.font-size-interface-s {
+  font-size: var(--ks-font-size-interface-s);
+}
+.font-size-interface-m {
+  font-size: var(--ks-font-size-interface-m);
+}
+.font-size-interface-l {
+  font-size: var(--ks-font-size-interface-l);
+}
+.font-size-interface-xl {
+  font-size: var(--ks-font-size-interface-xl);
+}
+.font-size-interface-xxl {
+  font-size: var(--ks-font-size-interface-xxl);
+}
+.font-size-mono-xxs {
+  font-size: var(--ks-font-size-mono-xxs);
+}
+.font-size-mono-xs {
+  font-size: var(--ks-font-size-mono-xs);
+}
+.font-size-mono-s {
+  font-size: var(--ks-font-size-mono-s);
+}
+.font-size-mono-m {
+  font-size: var(--ks-font-size-mono-m);
+}
+.font-size-mono-l {
+  font-size: var(--ks-font-size-mono-l);
+}
+.font-size-mono-xl {
+  font-size: var(--ks-font-size-mono-xl);
+}
+.font-size-mono-xxl {
+  font-size: var(--ks-font-size-mono-xxl);
+}
+.font-size-base-xxs {
+  font-size: var(--ks-font-size-xxs);
+}
+.font-size-base-xs {
+  font-size: var(--ks-font-size-xs);
+}
+.font-size-base-s {
+  font-size: var(--ks-font-size-s);
+}
+.font-size-base-m {
+  font-size: var(--ks-font-size-m);
+}
+.font-size-base-l {
+  font-size: var(--ks-font-size-l);
+}
+.font-size-base-xl {
+  font-size: var(--ks-font-size-xl);
+}
+.font-size-base-xxl {
+  font-size: var(--ks-font-size-xxl);
+}
+
+.spacings {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.spacing {
+  height: 26px;
+  background-color: rgb(0, 0, 0);
+  position: relative;
+}
+
+.spacing-xxs {
+  width: var(--ks-spacing-xxs);
+}
+
+.spacing-xs {
+  width: var(--ks-spacing-xs);
+}
+
+.spacing-s {
+  width: var(--ks-spacing-s);
+}
+
+.spacing-m {
+  width: var(--ks-spacing-m);
+}
+
+.spacing-l {
+  width: var(--ks-spacing-l);
+}
+
+.spacing-xl {
+  width: var(--ks-spacing-xl);
+}
+
+.spacing-xxl {
+  width: var(--ks-spacing-xxl);
+}
+
+.shadows-row {
+  gap: 20px;
+  margin-bottom: 60px;
+}
+.shadows-card .shadow {
+  height: 400px;
+  width: 300px;
+  box-shadow: var(--ks-box-shadow-card);
+  background-color: var(--ks-background-color-default);
+}
+.shadows-card .shadow:hover {
+  box-shadow: var(--ks-box-shadow-card-hover);
+}
+.shadows-surface .shadow {
+  height: 400px;
+  width: 100%;
+}
+
+.shadow {
+  transition: var(--ks-transition-hover);
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.border-preview {
+  width: 100px;
+  height: 100px;
+}
+
+.border-preview-radius {
+  border: 1px solid black;
+}
+
+.transition-preview {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+}
+.transition-preview:hover {
+  transform: scale(1.1);
+}
+
+.preview-page {
+  max-width: 900px;
+  margin: auto;
+  padding-top: 15vh;
+  padding-bottom: 15vh;
+  padding-left: 4vw;
+  padding-right: 4vw;
+}
+
+:root {
+  --color-primary: #3065c0;
+  --color-primary-inverted: #4e83e0;
+  --color-on-primary: var(--color-fg-inverted);
+  --color-on-primary-inverted: var(--color-fg);
+  --color-bg: #fff;
+  --color-bg-inverted: #0f203e;
+  --color-fg: #06081f;
+  --color-fg-inverted: #fff;
+  --color-link: #3065c0;
+  --color-link-inverted: #98b2e0;
+  --color-positive: #23831b;
+  --color-positive-inverted: #6edb64;
+  --color-negative: #ff1a57;
+  --color-negative-inverted: #d21d48;
+  --color-informative: #64c2db;
+  --color-informative-inverted: #00718f;
+  --color-notice: #64c2db;
+  --color-notice-inverted: #00718f;
+  --color-scale-9: 5%;
+  --color-scale-8: 15%;
+  --color-scale-7: 27%;
+  --color-scale-6: 39%;
+  --color-scale-5: 50%;
+  --color-scale-4: 61%;
+  --color-scale-3: 73%;
+  --color-scale-2: 85%;
+  --color-scale-1: 95%;
+}
+
+:root {
+  --ks-font-family-display: Montserrat, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-font-family-copy:
+    system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande",
+    "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
+    "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+  --ks-font-family-interface:
+    system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande",
+    "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
+    "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+  --ks-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --ks-font-weight-light: 300;
+  --ks-font-weight-regular: 400;
+  --ks-font-weight-medium: 500;
+  --ks-font-weight-semi-bold: 600;
+  --ks-font-weight-bold: 700;
+}
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+:root {
+  --font-size-display-base: 20px;
+  --font-size-display-shrink-factor-input: 1.5;
+  --font-size-display-grow-factor-input: 1.5;
+  --font-size-display-bp-factor-input: 1.5;
+  --font-size-copy-base: 16px;
+  --font-size-copy-shrink-factor-input: 1.5;
+  --font-size-copy-grow-factor-input: 1.5;
+  --font-size-copy-bp-factor-input: 1.5;
+  --font-size-interface-base: 16px;
+  --font-size-interface-shrink-factor-input: 1.5;
+  --font-size-interface-grow-factor-input: 1.5;
+  --font-size-interface-bp-factor-input: 1.5;
+  --font-size-mono-base: 16px;
+  --font-size-mono-shrink-factor-input: 1.5;
+  --font-size-mono-grow-factor-input: 1.5;
+  --font-size-mono-bp-factor-input: 1.5;
+}
+
+:root {
+  --spacing-base: 16px;
+  --spacing-shrink-factor-input: 1.5;
+  --spacing-grow-factor-input: 1.5;
+  --spacing-bp-factor-input: 1.5;
+}
+
+:root {
+  --ks-border-width-default: 1px;
+  --ks-border-width-emphasized: 2px;
+  --ks-border-radius-control: var(--ks-spacing-xs);
+  --ks-border-radius-card: var(--ks-spacing-s);
+  --ks-border-radius-surface: var(--ks-spacing-m);
+}
+
+:root {
+  /* Interpolated scaling tokens using normalized input and max tokens */
+  --font-size-display-shrink-factor: calc(
+    1 + (var(--font-size-display-shrink-factor-input) - 1) * (var(--font-size-display-shrink-factor-max, 0.65) - 1)
+  );
+  --font-size-display-grow-factor: calc(
+    1 + (var(--font-size-display-grow-factor-input) - 1) * (var(--font-size-display-grow-factor-max, 1.75) - 1)
+  );
+  --font-size-display-bp-factor: calc(
+    1 + (var(--font-size-display-bp-factor-input) - 1) * (var(--font-size-display-bp-factor-max, 1.04) - 1)
+  );
+  --font-size-copy-shrink-factor: calc(
+    1 + (var(--font-size-copy-shrink-factor-input) - 1) * (var(--font-size-copy-shrink-factor-max, 0.65) - 1)
+  );
+  --font-size-copy-grow-factor: calc(
+    1 + (var(--font-size-copy-grow-factor-input) - 1) * (var(--font-size-copy-grow-factor-max, 1.75) - 1)
+  );
+  --font-size-copy-bp-factor: calc(
+    1 + (var(--font-size-copy-bp-factor-input) - 1) * (var(--font-size-copy-bp-factor-max, 1.04) - 1)
+  );
+  --font-size-interface-shrink-factor: calc(
+    1 + (var(--font-size-interface-shrink-factor-input) - 1) * (var(--font-size-interface-shrink-factor-max, 0.65) - 1)
+  );
+  --font-size-interface-grow-factor: calc(
+    1 + (var(--font-size-interface-grow-factor-input) - 1) * (var(--font-size-interface-grow-factor-max, 1.75) - 1)
+  );
+  --font-size-interface-bp-factor: calc(
+    1 + (var(--font-size-interface-bp-factor-input) - 1) * (var(--font-size-interface-bp-factor-max, 1.04) - 1)
+  );
+  --font-size-mono-shrink-factor: calc(
+    1 + (var(--font-size-mono-shrink-factor-input) - 1) * (var(--font-size-mono-shrink-factor-max, 0.65) - 1)
+  );
+  --font-size-mono-grow-factor: calc(
+    1 + (var(--font-size-mono-grow-factor-input) - 1) * (var(--font-size-mono-grow-factor-max, 1.75) - 1)
+  );
+  --font-size-mono-bp-factor: calc(
+    1 + (var(--font-size-mono-bp-factor-input) - 1) * (var(--font-size-mono-bp-factor-max, 1.04) - 1)
+  );
+  --spacing-shrink-factor: calc(
+    1 + (var(--spacing-shrink-factor-input) - 1) * (var(--spacing-shrink-factor-max, 0.5) - 1)
+  );
+  --spacing-grow-factor: calc(1 + (var(--spacing-grow-factor-input) - 1) * (var(--spacing-grow-factor-max, 2) - 1));
+  --spacing-bp-factor: calc(1 + (var(--spacing-bp-factor-input) - 1) * (var(--spacing-bp-factor-max, 1.05) - 1));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  /* Interpolated scaling tokens using normalized input and max tokens */
+  --spacing-shrink-factor: calc(
+    1 + (var(--spacing-shrink-factor-input) - 1) * (var(--spacing-shrink-factor-max, 0.5) - 1)
+  );
+  --spacing-grow-factor: calc(1 + (var(--spacing-grow-factor-input) - 1) * (var(--spacing-grow-factor-max, 2) - 1));
+  --spacing-bp-factor: calc(1 + (var(--spacing-bp-factor-input) - 1) * (var(--spacing-bp-factor-max, 1.05) - 1));
+}
+
+:root {
+  --font-size-display-shrink-factor-max: 0.825;
+  --font-size-display-grow-factor-max: 1.35;
+  --font-size-display-bp-factor-max: 1.015;
+  --font-size-copy-shrink-factor-max: 0.825;
+  --font-size-copy-grow-factor-max: 1.35;
+  --font-size-copy-bp-factor-max: 1.015;
+  --font-size-interface-shrink-factor-max: 0.825;
+  --font-size-interface-grow-factor-max: 1.35;
+  --font-size-interface-bp-factor-max: 1.015;
+  --font-size-mono-shrink-factor-max: 0.825;
+  --font-size-mono-grow-factor-max: 1.35;
+  --font-size-mono-bp-factor-max: 1.015;
+  --spacing-shrink-factor-max: 0.35;
+  --spacing-grow-factor-max: 1.8;
+  --spacing-bp-factor-max: 1.02;
+}
+
+:root,
+[ks-theme] {
+  --ks-color-primary-base: var(--color-primary);
+  --ks-color-primary-inverted-base: var(--color-primary-inverted);
+  --ks-color-fg-base: var(--color-fg);
+  --ks-color-fg-inverted-base: var(--color-fg-inverted);
+  --ks-color-bg-base: var(--color-bg);
+  --ks-color-bg-inverted-base: var(--color-bg-inverted);
+  --ks-color-link-base: var(--color-link);
+  --ks-color-link-inverted-base: var(--color-link-inverted);
+  --ks-color-positive-base: var(--color-positive);
+  --ks-color-positive-inverted-base: var(--color-positive-inverted);
+  --ks-color-negative-base: var(--color-negative);
+  --ks-color-negative-inverted-base: var(--color-negative-inverted);
+  --ks-color-informative-base: var(--color-informative);
+  --ks-color-informative-inverted-base: var(--color-informative-inverted);
+  --ks-color-notice-base: var(--color-notice);
+  --ks-color-notice-inverted-base: var(--color-notice-inverted);
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false] {
+  --ks-color-primary: var(--ks-color-primary-base);
+  --ks-color-primary-inverted: var(--ks-color-primary-inverted-base);
+  --ks-color-fg: var(--ks-color-fg-base);
+  --ks-color-fg-inverted: var(--ks-color-fg-inverted-base);
+  --ks-color-bg: var(--ks-color-bg-base);
+  --ks-color-bg-inverted: var(--ks-color-bg-inverted-base);
+  --ks-color-link: var(--ks-color-link-base);
+  --ks-color-link-inverted: var(--ks-color-link-inverted-base);
+  --ks-color-positive: var(--ks-color-positive-base);
+  --ks-color-positive-inverted: var(--ks-color-positive-inverted-base);
+  --ks-color-negative: var(--ks-color-negative-base);
+  --ks-color-negative-inverted: var(--ks-color-negative-inverted-base);
+  --ks-color-informative: var(--ks-color-informative-base);
+  --ks-color-informative-inverted: var(--ks-color-informative-inverted-base);
+  --ks-color-notice: var(--ks-color-notice-base);
+  --ks-color-notice-inverted: var(--ks-color-notice-inverted-base);
+}
+
+[ks-inverted=true] {
+  --ks-color-primary: var(--ks-color-primary-inverted-base);
+  --ks-color-primary-inverted: var(--ks-color-primary-base);
+  --ks-color-fg: var(--ks-color-fg-inverted-base);
+  --ks-color-fg-inverted: var(--ks-color-fg-base);
+  --ks-color-bg: var(--ks-color-bg-inverted-base);
+  --ks-color-bg-inverted: var(--ks-color-bg-base);
+  --ks-color-positive: var(--ks-color-positive-inverted-base);
+  --ks-color-positive-inverted: var(--ks-color-positive-base);
+  --ks-color-negative: var(--ks-color-negative-inverted-base);
+  --ks-color-negative-inverted: var(--ks-color-negative-base);
+  --ks-color-informative: var(--ks-color-informative-inverted-base);
+  --ks-color-informative-inverted: var(--ks-color-informative-base);
+  --ks-color-notice: var(--ks-color-notice-inverted-base);
+  --ks-color-notice-inverted: var(--ks-color-notice-base);
+}
+
+:root,
+[ks-inverted],
+[ks-inverted=true],
+[ks-inverted=false] {
+  --ks-color-primary-alpha-1: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-1, 10%), transparent);
+  --ks-color-primary-alpha-2: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-2, 20%), transparent);
+  --ks-color-primary-alpha-3: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-3, 30%), transparent);
+  --ks-color-primary-alpha-4: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-4, 40%), transparent);
+  --ks-color-primary-alpha-5: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-5, 50%), transparent);
+  --ks-color-primary-alpha-6: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-6, 60%), transparent);
+  --ks-color-primary-alpha-7: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-7, 70%), transparent);
+  --ks-color-primary-alpha-8: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-8, 80%), transparent);
+  --ks-color-primary-alpha-9: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-9, 90%), transparent);
+  --ks-color-primary-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-primary-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-primary-to-bg-1: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-1, 10%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-2: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-2, 20%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-3: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-3, 30%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-4: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-4, 40%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-5: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-5, 50%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-6: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-6, 60%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-7: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-7, 70%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-8: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-8, 80%), var(--ks-color-bg));
+  --ks-color-primary-to-bg-9: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-9, 90%), var(--ks-color-bg));
+  --ks-color-primary-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-primary-to-fg-1: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-1, 10%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-2: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-2, 20%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-3: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-3, 30%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-4: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-4, 40%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-5: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-5, 50%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-6: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-6, 60%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-7: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-7, 70%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-8: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-8, 80%), var(--ks-color-fg));
+  --ks-color-primary-to-fg-9: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-9, 90%), var(--ks-color-fg));
+  --ks-color-primary-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-primary-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-primary-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-fg-alpha-1: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-1, 10%), transparent);
+  --ks-color-fg-alpha-2: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-2, 20%), transparent);
+  --ks-color-fg-alpha-3: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-3, 30%), transparent);
+  --ks-color-fg-alpha-4: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-4, 40%), transparent);
+  --ks-color-fg-alpha-5: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-5, 50%), transparent);
+  --ks-color-fg-alpha-6: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-6, 60%), transparent);
+  --ks-color-fg-alpha-7: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-7, 70%), transparent);
+  --ks-color-fg-alpha-8: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-8, 80%), transparent);
+  --ks-color-fg-alpha-9: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-9, 90%), transparent);
+  --ks-color-fg-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-fg-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-fg-to-bg-1: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-1, 10%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-2: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-2, 20%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-3: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-3, 30%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-4: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-4, 40%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-5: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-5, 50%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-6: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-6, 60%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-7: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-7, 70%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-8: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-8, 80%), var(--ks-color-bg));
+  --ks-color-fg-to-bg-9: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-9, 90%), var(--ks-color-bg));
+  --ks-color-fg-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-fg-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-fg-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-bg-alpha-1: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-1, 10%), transparent);
+  --ks-color-bg-alpha-2: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-2, 20%), transparent);
+  --ks-color-bg-alpha-3: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-3, 30%), transparent);
+  --ks-color-bg-alpha-4: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-4, 40%), transparent);
+  --ks-color-bg-alpha-5: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-5, 50%), transparent);
+  --ks-color-bg-alpha-6: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-6, 60%), transparent);
+  --ks-color-bg-alpha-7: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-7, 70%), transparent);
+  --ks-color-bg-alpha-8: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-8, 80%), transparent);
+  --ks-color-bg-alpha-9: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-9, 90%), transparent);
+  --ks-color-bg-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-bg-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-bg-to-fg-1: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-1, 10%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-2: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-2, 20%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-3: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-3, 30%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-4: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-4, 40%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-5: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-5, 50%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-6: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-6, 60%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-7: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-7, 70%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-8: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-8, 80%), var(--ks-color-fg));
+  --ks-color-bg-to-fg-9: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-9, 90%), var(--ks-color-fg));
+  --ks-color-bg-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-bg-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-bg-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-alpha-1: color-mix(in srgb, var(--ks-color-link) var(--color-scale-1, 10%), transparent);
+  --ks-color-link-alpha-2: color-mix(in srgb, var(--ks-color-link) var(--color-scale-2, 20%), transparent);
+  --ks-color-link-alpha-3: color-mix(in srgb, var(--ks-color-link) var(--color-scale-3, 30%), transparent);
+  --ks-color-link-alpha-4: color-mix(in srgb, var(--ks-color-link) var(--color-scale-4, 40%), transparent);
+  --ks-color-link-alpha-5: color-mix(in srgb, var(--ks-color-link) var(--color-scale-5, 50%), transparent);
+  --ks-color-link-alpha-6: color-mix(in srgb, var(--ks-color-link) var(--color-scale-6, 60%), transparent);
+  --ks-color-link-alpha-7: color-mix(in srgb, var(--ks-color-link) var(--color-scale-7, 70%), transparent);
+  --ks-color-link-alpha-8: color-mix(in srgb, var(--ks-color-link) var(--color-scale-8, 80%), transparent);
+  --ks-color-link-alpha-9: color-mix(in srgb, var(--ks-color-link) var(--color-scale-9, 90%), transparent);
+  --ks-color-link-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-link-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-link-to-bg-1: color-mix(in srgb, var(--ks-color-link) var(--color-scale-1, 10%), var(--ks-color-bg));
+  --ks-color-link-to-bg-2: color-mix(in srgb, var(--ks-color-link) var(--color-scale-2, 20%), var(--ks-color-bg));
+  --ks-color-link-to-bg-3: color-mix(in srgb, var(--ks-color-link) var(--color-scale-3, 30%), var(--ks-color-bg));
+  --ks-color-link-to-bg-4: color-mix(in srgb, var(--ks-color-link) var(--color-scale-4, 40%), var(--ks-color-bg));
+  --ks-color-link-to-bg-5: color-mix(in srgb, var(--ks-color-link) var(--color-scale-5, 50%), var(--ks-color-bg));
+  --ks-color-link-to-bg-6: color-mix(in srgb, var(--ks-color-link) var(--color-scale-6, 60%), var(--ks-color-bg));
+  --ks-color-link-to-bg-7: color-mix(in srgb, var(--ks-color-link) var(--color-scale-7, 70%), var(--ks-color-bg));
+  --ks-color-link-to-bg-8: color-mix(in srgb, var(--ks-color-link) var(--color-scale-8, 80%), var(--ks-color-bg));
+  --ks-color-link-to-bg-9: color-mix(in srgb, var(--ks-color-link) var(--color-scale-9, 90%), var(--ks-color-bg));
+  --ks-color-link-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-link-to-fg-1: color-mix(in srgb, var(--ks-color-link) var(--color-scale-1, 10%), var(--ks-color-fg));
+  --ks-color-link-to-fg-2: color-mix(in srgb, var(--ks-color-link) var(--color-scale-2, 20%), var(--ks-color-fg));
+  --ks-color-link-to-fg-3: color-mix(in srgb, var(--ks-color-link) var(--color-scale-3, 30%), var(--ks-color-fg));
+  --ks-color-link-to-fg-4: color-mix(in srgb, var(--ks-color-link) var(--color-scale-4, 40%), var(--ks-color-fg));
+  --ks-color-link-to-fg-5: color-mix(in srgb, var(--ks-color-link) var(--color-scale-5, 50%), var(--ks-color-fg));
+  --ks-color-link-to-fg-6: color-mix(in srgb, var(--ks-color-link) var(--color-scale-6, 60%), var(--ks-color-fg));
+  --ks-color-link-to-fg-7: color-mix(in srgb, var(--ks-color-link) var(--color-scale-7, 70%), var(--ks-color-fg));
+  --ks-color-link-to-fg-8: color-mix(in srgb, var(--ks-color-link) var(--color-scale-8, 80%), var(--ks-color-fg));
+  --ks-color-link-to-fg-9: color-mix(in srgb, var(--ks-color-link) var(--color-scale-9, 90%), var(--ks-color-fg));
+  --ks-color-link-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-link-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-link-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-alpha-1: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-1, 10%), transparent);
+  --ks-color-positive-alpha-2: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-2, 20%), transparent);
+  --ks-color-positive-alpha-3: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-3, 30%), transparent);
+  --ks-color-positive-alpha-4: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-4, 40%), transparent);
+  --ks-color-positive-alpha-5: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-5, 50%), transparent);
+  --ks-color-positive-alpha-6: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-6, 60%), transparent);
+  --ks-color-positive-alpha-7: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-7, 70%), transparent);
+  --ks-color-positive-alpha-8: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-8, 80%), transparent);
+  --ks-color-positive-alpha-9: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-9, 90%), transparent);
+  --ks-color-positive-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-positive-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-positive-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-1, 10%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-2, 20%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-3, 30%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-4, 40%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-5, 50%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-6, 60%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-7, 70%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-8, 80%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-9, 90%),
+    var(--ks-color-bg)
+  );
+  --ks-color-positive-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-positive-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-1, 10%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-2, 20%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-3, 30%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-4, 40%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-5, 50%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-6, 60%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-7, 70%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-8, 80%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-positive) var(--color-scale-9, 90%),
+    var(--ks-color-fg)
+  );
+  --ks-color-positive-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-positive-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-positive-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-alpha-1: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-1, 10%), transparent);
+  --ks-color-negative-alpha-2: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-2, 20%), transparent);
+  --ks-color-negative-alpha-3: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-3, 30%), transparent);
+  --ks-color-negative-alpha-4: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-4, 40%), transparent);
+  --ks-color-negative-alpha-5: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-5, 50%), transparent);
+  --ks-color-negative-alpha-6: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-6, 60%), transparent);
+  --ks-color-negative-alpha-7: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-7, 70%), transparent);
+  --ks-color-negative-alpha-8: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-8, 80%), transparent);
+  --ks-color-negative-alpha-9: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-9, 90%), transparent);
+  --ks-color-negative-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-negative-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-negative-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-1, 10%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-2, 20%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-3, 30%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-4, 40%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-5, 50%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-6, 60%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-7, 70%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-8, 80%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-9, 90%),
+    var(--ks-color-bg)
+  );
+  --ks-color-negative-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-negative-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-1, 10%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-2, 20%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-3, 30%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-4, 40%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-5, 50%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-6, 60%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-7, 70%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-8, 80%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-negative) var(--color-scale-9, 90%),
+    var(--ks-color-fg)
+  );
+  --ks-color-negative-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-negative-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-negative-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-informative-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-informative-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-informative-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-informative-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-informative-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-informative-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-informative-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-informative-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-informative-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-informative-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-1, 10%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-2, 20%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-3, 30%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-4, 40%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-5, 50%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-6, 60%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-7, 70%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-8, 80%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-9, 90%),
+    var(--ks-color-bg)
+  );
+  --ks-color-informative-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-informative-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-1, 10%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-2, 20%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-3, 30%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-4, 40%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-5, 50%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-6, 60%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-7, 70%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-8, 80%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-informative) var(--color-scale-9, 90%),
+    var(--ks-color-fg)
+  );
+  --ks-color-informative-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-informative-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-informative-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-alpha-1: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-1, 10%), transparent);
+  --ks-color-notice-alpha-2: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-2, 20%), transparent);
+  --ks-color-notice-alpha-3: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-3, 30%), transparent);
+  --ks-color-notice-alpha-4: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-4, 40%), transparent);
+  --ks-color-notice-alpha-5: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-5, 50%), transparent);
+  --ks-color-notice-alpha-6: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-6, 60%), transparent);
+  --ks-color-notice-alpha-7: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-7, 70%), transparent);
+  --ks-color-notice-alpha-8: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-8, 80%), transparent);
+  --ks-color-notice-alpha-9: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-9, 90%), transparent);
+  --ks-color-notice-inverted-alpha-1: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-1, 10%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-2: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-2, 20%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-3: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-3, 30%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-4: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-4, 40%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-5: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-5, 50%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-6: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-6, 60%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-7: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-7, 70%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-8: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-8, 80%),
+    transparent
+  );
+  --ks-color-notice-inverted-alpha-9: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-9, 90%),
+    transparent
+  );
+  --ks-color-notice-to-bg-1: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-1, 10%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-2: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-2, 20%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-3: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-3, 30%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-4: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-4, 40%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-5: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-5, 50%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-6: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-6, 60%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-7: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-7, 70%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-8: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-8, 80%), var(--ks-color-bg));
+  --ks-color-notice-to-bg-9: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-9, 90%), var(--ks-color-bg));
+  --ks-color-notice-inverted-to-bg-1: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-2: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-3: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-4: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-5: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-6: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-7: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-8: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-inverted-to-bg-9: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-bg-inverted)
+  );
+  --ks-color-notice-to-fg-1: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-1, 10%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-2: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-2, 20%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-3: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-3, 30%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-4: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-4, 40%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-5: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-5, 50%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-6: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-6, 60%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-7: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-7, 70%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-8: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-8, 80%), var(--ks-color-fg));
+  --ks-color-notice-to-fg-9: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-9, 90%), var(--ks-color-fg));
+  --ks-color-notice-inverted-to-fg-1: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-1, 10%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-2: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-2, 20%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-3: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-3, 30%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-4: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-4, 40%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-5: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-5, 50%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-6: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-6, 60%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-7: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-7, 70%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-8: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-8, 80%),
+    var(--ks-color-fg-inverted)
+  );
+  --ks-color-notice-inverted-to-fg-9: color-mix(
+    in srgb,
+    var(--ks-color-notice-inverted) var(--color-scale-9, 90%),
+    var(--ks-color-fg-inverted)
+  );
+}
+
+:root,
+[ks-inverted=true],
+[ks-inverted=false],
+[ks-theme] {
+  --ks-line-height-display-base-factor: 1.15;
+  --ks-line-height-display-shrink-factor: 1;
+  --ks-line-height-display-grow-factor: 1;
+  --ks-line-height-display-xxs: calc(
+    var(--ks-line-height-display-xs) * calc(var(--ks-line-height-display-shrink-factor) * 1)
+  );
+  --ks-line-height-display-xs: calc(
+    var(--ks-line-height-display-s) * calc(var(--ks-line-height-display-shrink-factor) * 1)
+  );
+  --ks-line-height-display-s: calc(
+    var(--ks-line-height-display-m) * calc(var(--ks-line-height-display-shrink-factor) * 1)
+  );
+  --ks-line-height-display-m: var(--ks-line-height-display-base-factor);
+  --ks-line-height-display-l: calc(var(--ks-line-height-display-m) * var(--ks-line-height-display-grow-factor));
+  --ks-line-height-display-xl: calc(var(--ks-line-height-display-l) * var(--ks-line-height-display-grow-factor));
+  --ks-line-height-display-xxl: calc(var(--ks-line-height-display-xl) * var(--ks-line-height-display-grow-factor));
+  --ks-line-height-copy-base-factor: 1.5;
+  --ks-line-height-copy-shrink-factor: 1;
+  --ks-line-height-copy-grow-factor: 1;
+  --ks-line-height-copy-xxs: calc(var(--ks-line-height-copy-xs) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
+  --ks-line-height-copy-xs: calc(var(--ks-line-height-copy-s) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
+  --ks-line-height-copy-s: calc(var(--ks-line-height-copy-m) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
+  --ks-line-height-copy-m: var(--ks-line-height-copy-base-factor);
+  --ks-line-height-copy-l: calc(var(--ks-line-height-copy-m) * var(--ks-line-height-copy-grow-factor));
+  --ks-line-height-copy-xl: calc(var(--ks-line-height-copy-l) * var(--ks-line-height-copy-grow-factor));
+  --ks-line-height-copy-xxl: calc(var(--ks-line-height-copy-xl) * var(--ks-line-height-copy-grow-factor));
+  --ks-line-height-interface-base-factor: 1.5;
+  --ks-line-height-interface-shrink-factor: 1;
+  --ks-line-height-interface-grow-factor: 1;
+  --ks-line-height-interface-xxs: calc(
+    var(--ks-line-height-interface-xs) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
+  );
+  --ks-line-height-interface-xs: calc(
+    var(--ks-line-height-interface-s) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
+  );
+  --ks-line-height-interface-s: calc(
+    var(--ks-line-height-interface-m) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
+  );
+  --ks-line-height-interface-m: var(--ks-line-height-interface-base-factor);
+  --ks-line-height-interface-l: calc(var(--ks-line-height-interface-m) * var(--ks-line-height-interface-grow-factor));
+  --ks-line-height-interface-xl: calc(var(--ks-line-height-interface-l) * var(--ks-line-height-interface-grow-factor));
+  --ks-line-height-interface-xxl: calc(
+    var(--ks-line-height-interface-xl) * var(--ks-line-height-interface-grow-factor)
+  );
+  --ks-line-height-mono-base-factor: 1.5;
+  --ks-line-height-mono-shrink-factor: 1;
+  --ks-line-height-mono-grow-factor: 1;
+  --ks-line-height-mono-xxs: calc(var(--ks-line-height-mono-xs) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
+  --ks-line-height-mono-xs: calc(var(--ks-line-height-mono-s) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
+  --ks-line-height-mono-s: calc(var(--ks-line-height-mono-m) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
+  --ks-line-height-mono-m: var(--ks-line-height-mono-base-factor);
+  --ks-line-height-mono-l: calc(var(--ks-line-height-mono-m) * var(--ks-line-height-mono-grow-factor));
+  --ks-line-height-mono-xl: calc(var(--ks-line-height-mono-l) * var(--ks-line-height-mono-grow-factor));
+  --ks-line-height-mono-xxl: calc(var(--ks-line-height-mono-xl) * var(--ks-line-height-mono-grow-factor));
+  --ks-font-display-xxs: var(--ks-font-size-display-xxs) / var(--ks-line-height-display-xxs)
+    var(--ks-font-family-display);
+  --ks-font-display-xs: var(--ks-font-size-display-xs) / var(--ks-line-height-display-xs) var(--ks-font-family-display);
+  --ks-font-display-s: var(--ks-font-size-display-s) / var(--ks-line-height-display-s) var(--ks-font-family-display);
+  --ks-font-display-m: var(--ks-font-size-display-m) / var(--ks-line-height-display-m) var(--ks-font-family-display);
+  --ks-font-display-l: var(--ks-font-size-display-l) / var(--ks-line-height-display-l) var(--ks-font-family-display);
+  --ks-font-display-xl: var(--ks-font-size-display-xl) / var(--ks-line-height-display-xl) var(--ks-font-family-display);
+  --ks-font-display-xxl: var(--ks-font-size-display-xxl) / var(--ks-line-height-display-xxl)
+    var(--ks-font-family-display);
+  --ks-font-copy-xxs: var(--ks-font-size-copy-xxs) / var(--ks-line-height-copy-xxs) var(--ks-font-family-copy);
+  --ks-font-copy-xs: var(--ks-font-size-copy-xs) / var(--ks-line-height-copy-xs) var(--ks-font-family-copy);
+  --ks-font-copy-s: var(--ks-font-size-copy-s) / var(--ks-line-height-copy-s) var(--ks-font-family-copy);
+  --ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(--ks-font-family-copy);
+  --ks-font-copy-l: var(--ks-font-size-copy-l) / var(--ks-line-height-copy-l) var(--ks-font-family-copy);
+  --ks-font-copy-xl: var(--ks-font-size-copy-xl) / var(--ks-line-height-copy-xl) var(--ks-font-family-copy);
+  --ks-font-copy-xxl: var(--ks-font-size-copy-xxl) / var(--ks-line-height-copy-xxl) var(--ks-font-family-copy);
+  --ks-font-interface-xxs: var(--ks-font-size-interface-xxs) / var(--ks-line-height-interface-xxs)
+    var(--ks-font-family-interface);
+  --ks-font-interface-xs: var(--ks-font-size-interface-xs) / var(--ks-line-height-interface-xs)
+    var(--ks-font-family-interface);
+  --ks-font-interface-s: var(--ks-font-size-interface-s) / var(--ks-line-height-interface-s)
+    var(--ks-font-family-interface);
+  --ks-font-interface-m: var(--ks-font-size-interface-m) / var(--ks-line-height-interface-m)
+    var(--ks-font-family-interface);
+  --ks-font-interface-l: var(--ks-font-size-interface-l) / var(--ks-line-height-interface-l)
+    var(--ks-font-family-interface);
+  --ks-font-interface-xl: var(--ks-font-size-interface-xl) / var(--ks-line-height-interface-xl)
+    var(--ks-font-family-interface);
+  --ks-font-interface-xxl: var(--ks-font-size-interface-xxl) / var(--ks-line-height-interface-xxl)
+    var(--ks-font-family-interface);
+  --ks-font-mono-xxs: var(--ks-font-size-mono-xxs) / var(--ks-line-height-mono-xxs) var(--ks-font-family-mono);
+  --ks-font-mono-xs: var(--ks-font-size-mono-xs) / var(--ks-line-height-mono-xs) var(--ks-font-family-mono);
+  --ks-font-mono-s: var(--ks-font-size-mono-s) / var(--ks-line-height-mono-s) var(--ks-font-family-mono);
+  --ks-font-mono-m: var(--ks-font-size-mono-m) / var(--ks-line-height-mono-m) var(--ks-font-family-mono);
+  --ks-font-mono-l: var(--ks-font-size-mono-l) / var(--ks-line-height-mono-l) var(--ks-font-family-mono);
+  --ks-font-mono-xl: var(--ks-font-size-mono-xl) / var(--ks-line-height-mono-xl) var(--ks-font-family-mono);
+  --ks-font-mono-xxl: var(--ks-font-size-mono-xxl) / var(--ks-line-height-mono-xxl) var(--ks-font-family-mono);
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --font-size-display-xxs-bp-factor: calc(1 * var(--font-size-display-bp-factor));
+  --font-size-display-xs-bp-factor: calc(var(--font-size-display-xxs-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-s-bp-factor: calc(var(--font-size-display-xs-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-m-bp-factor: calc(var(--font-size-display-s-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-l-bp-factor: calc(var(--font-size-display-m-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-xl-bp-factor: calc(var(--font-size-display-l-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-xxl-bp-factor: calc(var(--font-size-display-xl-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-copy-xxs-bp-factor: calc(1 * var(--font-size-copy-bp-factor));
+  --font-size-copy-xs-bp-factor: calc(var(--font-size-copy-xxs-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-s-bp-factor: calc(var(--font-size-copy-xs-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-m-bp-factor: calc(var(--font-size-copy-s-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-l-bp-factor: calc(var(--font-size-copy-m-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-xl-bp-factor: calc(var(--font-size-copy-l-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-xxl-bp-factor: calc(var(--font-size-copy-xl-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-interface-xxs-bp-factor: calc(1 * var(--font-size-interface-bp-factor));
+  --font-size-interface-xs-bp-factor: calc(
+    var(--font-size-interface-xxs-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-s-bp-factor: calc(
+    var(--font-size-interface-xs-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-m-bp-factor: calc(
+    var(--font-size-interface-s-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-l-bp-factor: calc(
+    var(--font-size-interface-m-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-xl-bp-factor: calc(
+    var(--font-size-interface-l-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-xxl-bp-factor: calc(
+    var(--font-size-interface-xl-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-mono-xxs-bp-factor: calc(1 * var(--font-size-mono-bp-factor));
+  --font-size-mono-xs-bp-factor: calc(var(--font-size-mono-xxs-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-s-bp-factor: calc(var(--font-size-mono-xs-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-m-bp-factor: calc(var(--font-size-mono-s-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-l-bp-factor: calc(var(--font-size-mono-m-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-xl-bp-factor: calc(var(--font-size-mono-l-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-xxl-bp-factor: calc(var(--font-size-mono-xl-bp-factor) * var(--font-size-mono-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs-base: calc(
+    var(--ks-font-size-display-xs-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-xs-base: calc(
+    var(--ks-font-size-display-s-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-s-base: calc(
+    var(--ks-font-size-display-m-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-m-base: var(--font-size-display-base);
+  --ks-font-size-display-l-base: calc(var(--ks-font-size-display-m-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-display-xl-base: calc(var(--ks-font-size-display-l-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-display-xxl-base: calc(var(--ks-font-size-display-xl-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-copy-xxs-base: calc(var(--ks-font-size-copy-xs-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-xs-base: calc(var(--ks-font-size-copy-s-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-s-base: calc(var(--ks-font-size-copy-m-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-m-base: var(--font-size-copy-base);
+  --ks-font-size-copy-l-base: calc(var(--ks-font-size-copy-m-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-copy-xl-base: calc(var(--ks-font-size-copy-l-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-copy-xxl-base: calc(var(--ks-font-size-copy-xl-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-interface-xxs-base: calc(
+    var(--ks-font-size-interface-xs-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-xs-base: calc(
+    var(--ks-font-size-interface-s-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-s-base: calc(
+    var(--ks-font-size-interface-m-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-m-base: var(--font-size-interface-base);
+  --ks-font-size-interface-l-base: calc(var(--ks-font-size-interface-m-base) * var(--font-size-interface-grow-factor));
+  --ks-font-size-interface-xl-base: calc(var(--ks-font-size-interface-l-base) * var(--font-size-interface-grow-factor));
+  --ks-font-size-interface-xxl-base: calc(
+    var(--ks-font-size-interface-xl-base) * var(--font-size-interface-grow-factor)
+  );
+  --ks-font-size-mono-xxs-base: calc(var(--ks-font-size-mono-xs-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-xs-base: calc(var(--ks-font-size-mono-s-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-s-base: calc(var(--ks-font-size-mono-m-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-m-base: var(--font-size-mono-base);
+  --ks-font-size-mono-l-base: calc(var(--ks-font-size-mono-m-base) * var(--font-size-mono-grow-factor));
+  --ks-font-size-mono-xl-base: calc(var(--ks-font-size-mono-l-base) * var(--font-size-mono-grow-factor));
+  --ks-font-size-mono-xxl-base: calc(var(--ks-font-size-mono-xl-base) * var(--font-size-mono-grow-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs-bp-factor-phone: calc(1 * var(--font-size-display-xxs-bp-factor));
+  --ks-font-size-display-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xxs-bp-factor-phone) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xxs-bp-factor-tablet) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xxs-bp-factor-laptop) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-phone: calc(1 * var(--font-size-display-xs-bp-factor));
+  --ks-font-size-display-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xs-bp-factor-phone) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xs-bp-factor-tablet) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xs-bp-factor-laptop) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-phone: calc(1 * var(--font-size-display-s-bp-factor));
+  --ks-font-size-display-s-bp-factor-tablet: calc(
+    var(--ks-font-size-display-s-bp-factor-phone) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-laptop: calc(
+    var(--ks-font-size-display-s-bp-factor-tablet) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-desktop: calc(
+    var(--ks-font-size-display-s-bp-factor-laptop) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-phone: calc(1 * var(--font-size-display-m-bp-factor));
+  --ks-font-size-display-m-bp-factor-tablet: calc(
+    var(--ks-font-size-display-m-bp-factor-phone) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-laptop: calc(
+    var(--ks-font-size-display-m-bp-factor-tablet) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-desktop: calc(
+    var(--ks-font-size-display-m-bp-factor-laptop) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-phone: calc(1 * var(--font-size-display-l-bp-factor));
+  --ks-font-size-display-l-bp-factor-tablet: calc(
+    var(--ks-font-size-display-l-bp-factor-phone) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-laptop: calc(
+    var(--ks-font-size-display-l-bp-factor-tablet) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-desktop: calc(
+    var(--ks-font-size-display-l-bp-factor-laptop) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-phone: calc(1 * var(--font-size-display-xl-bp-factor));
+  --ks-font-size-display-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xl-bp-factor-phone) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xl-bp-factor-tablet) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xl-bp-factor-laptop) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-phone: calc(1 * var(--font-size-display-xxl-bp-factor));
+  --ks-font-size-display-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xxl-bp-factor-phone) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xxl-bp-factor-tablet) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xxl-bp-factor-laptop) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-phone: calc(1 * var(--font-size-copy-xxs-bp-factor));
+  --ks-font-size-copy-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-phone) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-tablet) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-laptop) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-phone: calc(1 * var(--font-size-copy-xs-bp-factor));
+  --ks-font-size-copy-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xs-bp-factor-phone) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xs-bp-factor-tablet) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xs-bp-factor-laptop) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-phone: calc(1 * var(--font-size-copy-s-bp-factor));
+  --ks-font-size-copy-s-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-s-bp-factor-phone) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-s-bp-factor-tablet) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-s-bp-factor-laptop) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-phone: calc(1 * var(--font-size-copy-m-bp-factor));
+  --ks-font-size-copy-m-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-m-bp-factor-phone) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-m-bp-factor-tablet) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-m-bp-factor-laptop) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-phone: calc(1 * var(--font-size-copy-l-bp-factor));
+  --ks-font-size-copy-l-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-l-bp-factor-phone) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-l-bp-factor-tablet) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-l-bp-factor-laptop) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-phone: calc(1 * var(--font-size-copy-xl-bp-factor));
+  --ks-font-size-copy-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xl-bp-factor-phone) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xl-bp-factor-tablet) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xl-bp-factor-laptop) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-phone: calc(1 * var(--font-size-copy-xxl-bp-factor));
+  --ks-font-size-copy-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-phone) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-tablet) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-laptop) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-phone: calc(1 * var(--font-size-interface-xxs-bp-factor));
+  --ks-font-size-interface-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-phone) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-tablet) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-laptop) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-phone: calc(1 * var(--font-size-interface-xs-bp-factor));
+  --ks-font-size-interface-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xs-bp-factor-phone) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xs-bp-factor-tablet) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xs-bp-factor-laptop) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-phone: calc(1 * var(--font-size-interface-s-bp-factor));
+  --ks-font-size-interface-s-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-s-bp-factor-phone) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-s-bp-factor-tablet) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-s-bp-factor-laptop) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-phone: calc(1 * var(--font-size-interface-m-bp-factor));
+  --ks-font-size-interface-m-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-m-bp-factor-phone) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-m-bp-factor-tablet) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-m-bp-factor-laptop) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-phone: calc(1 * var(--font-size-interface-l-bp-factor));
+  --ks-font-size-interface-l-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-l-bp-factor-phone) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-l-bp-factor-tablet) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-l-bp-factor-laptop) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-phone: calc(1 * var(--font-size-interface-xl-bp-factor));
+  --ks-font-size-interface-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xl-bp-factor-phone) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xl-bp-factor-tablet) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xl-bp-factor-laptop) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-phone: calc(1 * var(--font-size-interface-xxl-bp-factor));
+  --ks-font-size-interface-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-phone) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-tablet) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-laptop) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-phone: calc(1 * var(--font-size-mono-xxs-bp-factor));
+  --ks-font-size-mono-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-phone) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-tablet) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-laptop) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-phone: calc(1 * var(--font-size-mono-xs-bp-factor));
+  --ks-font-size-mono-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xs-bp-factor-phone) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xs-bp-factor-tablet) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xs-bp-factor-laptop) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-phone: calc(1 * var(--font-size-mono-s-bp-factor));
+  --ks-font-size-mono-s-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-s-bp-factor-phone) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-s-bp-factor-tablet) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-s-bp-factor-laptop) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-phone: calc(1 * var(--font-size-mono-m-bp-factor));
+  --ks-font-size-mono-m-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-m-bp-factor-phone) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-m-bp-factor-tablet) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-m-bp-factor-laptop) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-phone: calc(1 * var(--font-size-mono-l-bp-factor));
+  --ks-font-size-mono-l-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-l-bp-factor-phone) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-l-bp-factor-tablet) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-l-bp-factor-laptop) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-phone: calc(1 * var(--font-size-mono-xl-bp-factor));
+  --ks-font-size-mono-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xl-bp-factor-phone) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xl-bp-factor-tablet) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xl-bp-factor-laptop) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-phone: calc(1 * var(--font-size-mono-xxl-bp-factor));
+  --ks-font-size-mono-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-phone) * var(--font-size-mono-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-tablet) * var(--font-size-mono-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-laptop) * var(--font-size-mono-xxl-bp-factor)
+  );
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs: calc(var(--ks-font-size-display-xxs-base) * var(--ks-font-size-display-xxs-bp-factor, 1));
+  --ks-font-size-display-xs: calc(var(--ks-font-size-display-xs-base) * var(--ks-font-size-display-xs-bp-factor, 1));
+  --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-s-bp-factor, 1));
+  --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-m-bp-factor, 1));
+  --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-l-bp-factor, 1));
+  --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-xl-bp-factor, 1));
+  --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-xxl-bp-factor, 1));
+  --ks-font-size-copy-xxs: calc(var(--ks-font-size-copy-xxs-base) * var(--ks-font-size-copy-xxs-bp-factor, 1));
+  --ks-font-size-copy-xs: calc(var(--ks-font-size-copy-xs-base) * var(--ks-font-size-copy-xs-bp-factor, 1));
+  --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-s-bp-factor, 1));
+  --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-m-bp-factor, 1));
+  --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-l-bp-factor, 1));
+  --ks-font-size-copy-xl: calc(var(--ks-font-size-copy-xl-base) * var(--ks-font-size-copy-xl-bp-factor, 1));
+  --ks-font-size-copy-xxl: calc(var(--ks-font-size-copy-xxl-base) * var(--ks-font-size-copy-xxl-bp-factor, 1));
+  --ks-font-size-interface-xxs: calc(
+    var(--ks-font-size-interface-xxs-base) * var(--ks-font-size-interface-xxs-bp-factor, 1)
+  );
+  --ks-font-size-interface-xs: calc(
+    var(--ks-font-size-interface-xs-base) * var(--ks-font-size-interface-xs-bp-factor, 1)
+  );
+  --ks-font-size-interface-s: calc(var(--ks-font-size-interface-s-base) * var(--ks-font-size-interface-s-bp-factor, 1));
+  --ks-font-size-interface-m: calc(var(--ks-font-size-interface-m-base) * var(--ks-font-size-interface-m-bp-factor, 1));
+  --ks-font-size-interface-l: calc(var(--ks-font-size-interface-l-base) * var(--ks-font-size-interface-l-bp-factor, 1));
+  --ks-font-size-interface-xl: calc(
+    var(--ks-font-size-interface-xl-base) * var(--ks-font-size-interface-xl-bp-factor, 1)
+  );
+  --ks-font-size-interface-xxl: calc(
+    var(--ks-font-size-interface-xxl-base) * var(--ks-font-size-interface-xxl-bp-factor, 1)
+  );
+  --ks-font-size-mono-xxs: calc(var(--ks-font-size-mono-xxs-base) * var(--ks-font-size-mono-xxs-bp-factor, 1));
+  --ks-font-size-mono-xs: calc(var(--ks-font-size-mono-xs-base) * var(--ks-font-size-mono-xs-bp-factor, 1));
+  --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-s-bp-factor, 1));
+  --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-m-bp-factor, 1));
+  --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-l-bp-factor, 1));
+  --ks-font-size-mono-xl: calc(var(--ks-font-size-mono-xl-base) * var(--ks-font-size-mono-xl-bp-factor, 1));
+  --ks-font-size-mono-xxl: calc(var(--ks-font-size-mono-xxl-base) * var(--ks-font-size-mono-xxl-bp-factor, 1));
+}
+
+@media (min-width: 36em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-phone);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-phone);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-phone);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-phone);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-phone);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-phone);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-phone);
+    --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-phone);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-phone);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-phone);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-phone);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-phone);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-phone);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-phone);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-phone);
+    --ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-phone);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-phone);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-phone);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-phone);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-phone);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-phone);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-phone);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-phone);
+    --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-phone);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-phone);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-phone);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-phone);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-phone);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-phone);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-phone);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-phone);
+  }
+}
+@media (min-width: 48em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-tablet);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-tablet);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-tablet);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-tablet);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-tablet);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-tablet);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-tablet);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-tablet);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-tablet);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-tablet);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-tablet);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-tablet);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-tablet);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-tablet);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-tablet);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-tablet);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-tablet);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-tablet);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-tablet);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-tablet);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-tablet);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-tablet);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-tablet);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-tablet);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-tablet);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-tablet);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-tablet);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-tablet);
+  }
+}
+@media (min-width: 62em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-laptop);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-laptop);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-laptop);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-laptop);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-laptop);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-laptop);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-laptop);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-laptop);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-laptop);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-laptop);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-laptop);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-laptop);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-laptop);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-laptop);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-laptop);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-laptop);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-laptop);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-laptop);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-laptop);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-laptop);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-laptop);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-laptop);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-laptop);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-laptop);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-laptop);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-laptop);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-laptop);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-laptop);
+  }
+}
+@media (min-width: 75em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-desktop);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-desktop);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-desktop);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-desktop);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-desktop);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-desktop);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-desktop);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-desktop);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-desktop);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-desktop);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-desktop);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-desktop);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-desktop);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-desktop);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-desktop);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-desktop);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-desktop);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-desktop);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-desktop);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-desktop);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-desktop);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-desktop);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-desktop);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-desktop);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-desktop);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-desktop);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-desktop);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-desktop);
+  }
+}
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
+  --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
+  --spacing-s-bp-factor: calc(var(--spacing-xs-bp-factor) * var(--spacing-bp-factor));
+  --spacing-m-bp-factor: calc(var(--spacing-s-bp-factor) * var(--spacing-bp-factor));
+  --spacing-l-bp-factor: calc(var(--spacing-m-bp-factor) * var(--spacing-bp-factor));
+  --spacing-xl-bp-factor: calc(var(--spacing-l-bp-factor) * var(--spacing-bp-factor));
+  --spacing-xxl-bp-factor: calc(var(--spacing-xl-bp-factor) * var(--spacing-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs-base: calc(var(--ks-spacing-xs-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-m-base: var(--spacing-base);
+  --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--spacing-grow-factor));
+  --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--spacing-grow-factor));
+  --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--spacing-grow-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-tablet: calc(var(--ks-spacing-xxs-bp-factor-phone) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-laptop: calc(var(--ks-spacing-xxs-bp-factor-tablet) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-desktop: calc(var(--ks-spacing-xxs-bp-factor-laptop) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xs-bp-factor-phone: calc(1 * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--spacing-xs-bp-factor));
+  --ks-spacing-s-bp-factor-phone: calc(1 * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--spacing-s-bp-factor));
+  --ks-spacing-m-bp-factor-phone: calc(1 * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--spacing-m-bp-factor));
+  --ks-spacing-l-bp-factor-phone: calc(1 * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--spacing-l-bp-factor));
+  --ks-spacing-xl-bp-factor-phone: calc(1 * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-tablet: calc(var(--ks-spacing-xxl-bp-factor-phone) * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-laptop: calc(var(--ks-spacing-xxl-bp-factor-tablet) * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-desktop: calc(var(--ks-spacing-xxl-bp-factor-laptop) * var(--spacing-xxl-bp-factor));
+}
+
 :root,
-[ks-inverted],
-[ks-theme] {
-  --dsa-text-color-on-primary-base: var(--ks-color-fg);
-  --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg-inverted);
-  --dsa-topic--font: var(--ks-font-display-m);
-  --dsa-topic--font-weight: var(--ks-font-weight-medium);
-  --dsa-topic--color: var(--ks-text-color-display);
-  --dsa-topic--font-family: var(--ks-font-family-display);
-  --dsa-link--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-link--color: var(--ks-text-color-default-interactive);
-  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
-  --dsa-link--text-decoration: underline;
-  --dsa-link--text-decoration_hover: underline;
-  --dsa-typo--highlight: linear-gradient(90deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
-  --dsa-content--spacing: var(--ks-spacing-inset-l);
-  --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
-  --dsa-content--width_default: calc(var(--ks-font-size-copy-m) * 50);
-  --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 64);
-  --dsa-content--width_max: 100vw;
-  --dsa-content--width_full: 100vw;
-  --dsa-tile--width_smallest: calc(var(--ks-font-size-copy-m) * 10);
-  --dsa-tile--width_small: calc(var(--ks-font-size-copy-m) * 14);
-  --dsa-tile--width_medium: calc(var(--ks-font-size-copy-m) * 20);
-  --dsa-tile--width_large: calc(var(--ks-font-size-copy-m) * 28);
-  --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 38);
-  --dsa-logo--height: 2.25rem;
-  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-stack-xxs: var(--ks-spacing-xxs);
+  --ks-spacing-stack-xs: var(--ks-spacing-xs);
+  --ks-spacing-stack-s: var(--ks-spacing-s);
+  --ks-spacing-stack-m: var(--ks-spacing-m);
+  --ks-spacing-stack-l: var(--ks-spacing-l);
+  --ks-spacing-stack-xl: var(--ks-spacing-xl);
+  --ks-spacing-stack-xxl: var(--ks-spacing-xxl);
+  --ks-spacing-inline-xxs: var(--ks-spacing-xxs);
+  --ks-spacing-inline-xs: var(--ks-spacing-xs);
+  --ks-spacing-inline-s: var(--ks-spacing-s);
+  --ks-spacing-inline-m: var(--ks-spacing-m);
+  --ks-spacing-inline-l: var(--ks-spacing-l);
+  --ks-spacing-inline-xl: var(--ks-spacing-xl);
+  --ks-spacing-inline-xxl: var(--ks-spacing-xxl);
+  --ks-spacing-inset-xxs: var(--ks-spacing-xxs);
+  --ks-spacing-inset-xs: var(--ks-spacing-xs);
+  --ks-spacing-inset-s: var(--ks-spacing-s);
+  --ks-spacing-inset-m: var(--ks-spacing-m);
+  --ks-spacing-inset-l: var(--ks-spacing-l);
+  --ks-spacing-inset-xl: var(--ks-spacing-xl);
+  --ks-spacing-inset-xxl: var(--ks-spacing-xxl);
+  --ks-spacing-inset-squish-xxs: var(--ks-spacing-xs) var(--ks-spacing-xxs);
+  --ks-spacing-inset-squish-xs: var(--ks-spacing-s) var(--ks-spacing-xs);
+  --ks-spacing-inset-squish-s: var(--ks-spacing-m) var(--ks-spacing-s);
+  --ks-spacing-inset-squish-m: var(--ks-spacing-l) var(--ks-spacing-m);
+  --ks-spacing-inset-squish-l: var(--ks-spacing-xl) var(--ks-spacing-l);
+  --ks-spacing-inset-squish-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
+  --ks-spacing-inset-squish-xxl: calc(var(--ks-spacing-xxl) * 1.25) var(--ks-spacing-xxl);
+  --ks-spacing-inset-squish-xxs: var(--ks-spacing-xxs) var(--ks-spacing-xs);
+  --ks-spacing-inset-squish-xs: var(--ks-spacing-xs) var(--ks-spacing-s);
+  --ks-spacing-inset-squish-s: var(--ks-spacing-s) var(--ks-spacing-m);
+  --ks-spacing-inset-squish-m: var(--ks-spacing-m) var(--ks-spacing-l);
+  --ks-spacing-inset-squish-l: var(--ks-spacing-l) var(--ks-spacing-xl);
+  --ks-spacing-inset-squish-xl: var(--ks-spacing-xl) var(--ks-spacing-xxl);
+  --ks-spacing-inset-squish-xxl: var(--ks-spacing-xxl) calc(var(--ks-spacing-xxxl) * 1.25);
 }
-@media (min-width: 48em) {
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs: calc(var(--ks-spacing-xxs-base) * var(--ks-spacing-xxs-bp-factor, 1));
+  --ks-spacing-xs: calc(var(--ks-spacing-xs-base) * var(--ks-spacing-xs-bp-factor, 1));
+  --ks-spacing-s: calc(var(--ks-spacing-s-base) * var(--ks-spacing-s-bp-factor, 1));
+  --ks-spacing-m: calc(var(--ks-spacing-m-base) * var(--ks-spacing-m-bp-factor, 1));
+  --ks-spacing-l: calc(var(--ks-spacing-l-base) * var(--ks-spacing-l-bp-factor, 1));
+  --ks-spacing-xl: calc(var(--ks-spacing-xl-base) * var(--ks-spacing-xl-bp-factor, 1));
+  --ks-spacing-xxl: calc(var(--ks-spacing-xxl-base) * var(--ks-spacing-xxl-bp-factor, 1));
+}
+
+@media (min-width: 36em) {
   :root,
-  [ks-inverted],
-  [ks-theme] {
-    --dsa-content--spacing: var(--ks-spacing-inset-xl);
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-phone);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-phone);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-phone);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-phone);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-phone);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-phone);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-phone);
   }
 }
 @media (min-width: 48em) {
   :root,
-  [ks-inverted],
-  [ks-theme] {
-    --dsa-logo--height: 2.5rem;
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-tablet);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-tablet);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-tablet);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-tablet);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-tablet);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-tablet);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-tablet);
   }
 }
 @media (min-width: 62em) {
   :root,
-  [ks-inverted],
-  [ks-theme] {
-    --dsa-logo--height: 3rem;
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-laptop);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-laptop);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-laptop);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-laptop);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-laptop);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-laptop);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-laptop);
+  }
+}
+@media (min-width: 75em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-desktop);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-desktop);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-desktop);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-desktop);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-desktop);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-desktop);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
   }
 }
+:root {
+  --ks-border-radius-pill: 999px;
+  --ks-border-radius-circle: 50%;
+}
+
+:root,
+[ks-theme] {
+  --ks-box-shadow-card-base: 0 2px 8px 0 var(--ks-color-fg-alpha-8);
+  --ks-box-shadow-card-hover-base: 0 4px 16px 0 var(--ks-color-fg-alpha-7);
+  --ks-box-shadow-card-inverted-base: 0 2px 8px 0 var(--ks-color-fg-inverted-alpha-7);
+  --ks-box-shadow-card-inverted-hover-base: 0 4px 16px 0 var(--ks-color-fg-inverted-alpha-6);
+  --ks-box-shadow-control-base: 0 1px 2px 0 var(--ks-color-fg-alpha-7);
+  --ks-box-shadow-control-hover-base: 0 2px 4px 0 var(--ks-color-fg-alpha-8);
+  --ks-box-shadow-control-inverted-base: 0 1px 2px 0 var(--ks-color-fg-inverted-alpha-6);
+  --ks-box-shadow-control-inverted-hover-base: 0 2px 4px 0 var(--ks-color-fg-inverted-alpha-7);
+  --ks-box-shadow-surface-base: 0 8px 20px 0 var(--ks-color-fg-alpha-8);
+  --ks-box-shadow-surface-hover-base: 0 10px 26px 0 var(--ks-color-fg-alpha-7);
+  --ks-box-shadow-surface-inverted-base: 0 8px 20px 0 var(--ks-color-fg-inverted-alpha-8);
+  --ks-box-shadow-surface-inverted-hover-base: 0 10px 26px 0 var(--ks-color-fg-inverted-alpha-7);
+}
+
+:root {
+  --ks-box-shadow-card: var(--ks-box-shadow-card-base);
+  --ks-box-shadow-card-inverted: var(--ks-box-shadow-card-inverted-base);
+  --ks-box-shadow-control: var(--ks-box-shadow-control-base);
+  --ks-box-shadow-control-inverted: var(--ks-box-shadow-control-inverted-base);
+  --ks-box-shadow-surface: var(--ks-box-shadow-surface-base);
+  --ks-box-shadow-surface-inverted: var(--ks-box-shadow-surface-inverted-base);
+  --ks-box-shadow-card-hover: var(--ks-box-shadow-card-hover-base);
+  --ks-box-shadow-card-inverted-hover: var(--ks-box-shadow-card-inverted-hover-base);
+  --ks-box-shadow-control-hover: var(--ks-box-shadow-control-hover-base);
+  --ks-box-shadow-control-inverted-hover: var(--ks-box-shadow-control-inverted-hover-base);
+  --ks-box-shadow-surface-hover: var(--ks-box-shadow-surface-hover-base);
+  --ks-box-shadow-surface-inverted-hover: var(--ks-box-shadow-surface-inverted-hover-base);
+}
+
+[ks-inverted=true] {
+  --ks-box-shadow-card: var(--ks-box-shadow-card-inverted-base);
+  --ks-box-shadow-card-inverted: var(--ks-box-shadow-card-base);
+  --ks-box-shadow-control: var(--ks-box-shadow-control-inverted-base);
+  --ks-box-shadow-control-inverted: var(--ks-box-shadow-control-base);
+  --ks-box-shadow-surface: var(--ks-box-shadow-surface-inverted-base);
+  --ks-box-shadow-surface-inverted: var(--ks-box-shadow-surface-base);
+  --ks-box-shadow-card-hover: var(--ks-box-shadow-card-inverted-hover-base);
+  --ks-box-shadow-card-inverted-hover: var(--ks-box-shadow-card-hover-base);
+  --ks-box-shadow-control-hover: var(--ks-box-shadow-control-inverted-hover-base);
+  --ks-box-shadow-control-inverted-hover: var(--ks-box-shadow-control-hover-base);
+  --ks-box-shadow-surface-hover: var(--ks-box-shadow-surface-inverted-hover-base);
+  --ks-box-shadow-surface-inverted-hover: var(--ks-box-shadow-surface-hover-base);
+}
+
+:root {
+  --ks-duration-immediate: 50ms;
+  --ks-duration-fast: 100ms;
+  --ks-duration-medium: 150ms;
+  --ks-duration-slow: 300ms;
+  --ks-timing-function-bounce: cubic-bezier(0.17, 1, 0.5, 1.5);
+  --ks-timing-function-ease-out: ease-out;
+  --ks-timing-function-ease-in: ease-in;
+  --ks-timing-function-ease-in-out: ease-in-out;
+  --ks-timing-function-linear: linear;
+  --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
+  --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
+  --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
+}
+
+:root,
+[ks-theme] {
+  --ks-text-color-default-base: var(--ks-color-fg-alpha-3);
+  --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-2);
+  --ks-text-color-default-interactive-base: var(--ks-color-link);
+  --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted);
+  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-to-fg-4);
+  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-alpha-4);
+  --ks-text-color-default-interactive-active-base: var(--ks-color-link);
+  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted);
+  --ks-text-color-default-interactive-selected-base: var(--ks-color-link);
+  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted);
+  --ks-text-color-copy-base: var(--ks-color-fg-alpha-3);
+  --ks-text-color-copy-inverted-base: var(--ks-color-fg-inverted-alpha-3);
+  --ks-text-color-copy-interactive-base: var(--ks-color-link);
+  --ks-text-color-copy-inverted-interactive-base: var(--ks-color-link-inverted);
+  --ks-text-color-copy-interactive-hover-base: var(--ks-color-link-to-fg-2);
+  --ks-text-color-copy-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2);
+  --ks-text-color-copy-interactive-active-base: var(--ks-color-link-to-fg-3);
+  --ks-text-color-copy-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2);
+  --ks-text-color-copy-interactive-selected-base: var(--ks-color-link-to-fg-3);
+  --ks-text-color-copy-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-2);
+  --ks-text-color-display-base: var(--ks-color-fg);
+  --ks-text-color-display-inverted-base: var(--ks-color-fg-inverted);
+  --ks-text-color-display-interactive-base: var(--ks-color-link);
+  --ks-text-color-display-inverted-interactive-base: var(--ks-color-link-inverted);
+  --ks-text-color-display-interactive-hover-base: var(--ks-color-link-to-fg-2);
+  --ks-text-color-display-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2);
+  --ks-text-color-display-interactive-active-base: var(--ks-color-link-to-fg-3);
+  --ks-text-color-display-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2);
+  --ks-text-color-display-interactive-selected-base: var(--ks-color-link-to-fg-3);
+  --ks-text-color-display-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-2);
+  --ks-text-color-interface-base: var(--ks-color-fg-alpha-2);
+  --ks-text-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-4);
+  --ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-4);
+  --ks-text-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-3);
+  --ks-text-color-interface-interactive-hover-base: var(--ks-color-fg);
+  --ks-text-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted);
+  --ks-text-color-interface-interactive-active-base: var(--ks-color-fg);
+  --ks-text-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted);
+  --ks-text-color-interface-interactive-selected-base: var(--ks-color-fg);
+  --ks-text-color-interface-inverted-interactive-selected-base: var(--ks-color-fg-inverted);
+  --ks-text-color-card-base: var(--ks-color-fg-alpha-2);
+  --ks-text-color-card-inverted-base: var(--ks-color-fg-inverted-alpha-2);
+  --ks-text-color-card-interactive-base: var(--ks-color-fg);
+  --ks-text-color-card-inverted-interactive-base: var(--ks-color-fg-inverted);
+  --ks-text-color-card-interactive-hover-base: var(--ks-color-fg);
+  --ks-text-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted);
+  --ks-text-color-card-interactive-active-base: var(--ks-color-fg);
+  --ks-text-color-card-inverted-interactive-active-base: var(--ks-color-fg-inverted);
+  --ks-text-color-card-interactive-selected-base: var(--ks-color-fg);
+  --ks-text-color-card-inverted-interactive-selected-base: var(--ks-color-fg-inverted);
+  --ks-text-color-primary-base: var(--ks-color-primary);
+  --ks-text-color-primary-inverted-base: var(--ks-color-primary-inverted);
+  --ks-text-color-primary-interactive-base: var(--ks-color-primary);
+  --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-alpha-2);
+  --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-alpha-2);
+  --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-2);
+  --ks-text-color-primary-interactive-active-base: var(--ks-color-primary-alpha-2);
+  --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-2);
+  --ks-text-color-primary-interactive-selected-base: var(--ks-color-primary-alpha-2);
+  --ks-text-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-2);
+  --ks-text-color-positive-base: var(--ks-color-positive);
+  --ks-text-color-positive-inverted-base: var(--ks-color-positive-inverted);
+  --ks-text-color-positive-interactive-base: var(--ks-color-positive);
+  --ks-text-color-positive-inverted-interactive-base: var(--ks-color-positive-inverted-alpha-2);
+  --ks-text-color-positive-interactive-hover-base: var(--ks-color-positive-alpha-2);
+  --ks-text-color-positive-inverted-interactive-hover-base: var(--ks-color-positive-inverted-alpha-2);
+  --ks-text-color-positive-interactive-active-base: var(--ks-color-positive-alpha-2);
+  --ks-text-color-positive-inverted-interactive-active-base: var(--ks-color-positive-inverted-alpha-2);
+  --ks-text-color-positive-interactive-selected-base: var(--ks-color-positive-alpha-2);
+  --ks-text-color-positive-inverted-interactive-selected-base: var(--ks-color-positive-inverted-alpha-2);
+  --ks-text-color-informative-base: var(--ks-color-informative);
+  --ks-text-color-informative-inverted-base: var(--ks-color-informative-inverted);
+  --ks-text-color-informative-interactive-base: var(--ks-color-informative);
+  --ks-text-color-informative-inverted-interactive-base: var(--ks-color-informative-inverted-alpha-2);
+  --ks-text-color-informative-interactive-hover-base: var(--ks-color-informative-alpha-2);
+  --ks-text-color-informative-inverted-interactive-hover-base: var(--ks-color-informative-inverted-alpha-2);
+  --ks-text-color-informative-interactive-active-base: var(--ks-color-informative-alpha-2);
+  --ks-text-color-informative-inverted-interactive-active-base: var(--ks-color-informative-inverted-alpha-2);
+  --ks-text-color-informative-interactive-selected-base: var(--ks-color-informative-alpha-2);
+  --ks-text-color-informative-inverted-interactive-selected-base: var(--ks-color-informative-inverted-alpha-2);
+  --ks-text-color-notice-base: var(--ks-color-notice);
+  --ks-text-color-notice-inverted-base: var(--ks-color-notice-inverted);
+  --ks-text-color-notice-interactive-base: var(--ks-color-notice);
+  --ks-text-color-notice-inverted-interactive-base: var(--ks-color-notice-inverted-alpha-2);
+  --ks-text-color-notice-interactive-hover-base: var(--ks-color-notice-alpha-2);
+  --ks-text-color-notice-inverted-interactive-hover-base: var(--ks-color-notice-inverted-alpha-2);
+  --ks-text-color-notice-interactive-active-base: var(--ks-color-notice-alpha-2);
+  --ks-text-color-notice-inverted-interactive-active-base: var(--ks-color-notice-inverted-alpha-2);
+  --ks-text-color-notice-interactive-selected-base: var(--ks-color-notice-alpha-2);
+  --ks-text-color-notice-inverted-interactive-selected-base: var(--ks-color-notice-inverted-alpha-2);
+  --ks-text-color-negative-base: var(--ks-color-negative);
+  --ks-text-color-negative-inverted-base: var(--ks-color-negative-inverted);
+  --ks-text-color-negative-interactive-base: var(--ks-color-negative);
+  --ks-text-color-negative-inverted-interactive-base: var(--ks-color-negative-inverted-alpha-2);
+  --ks-text-color-negative-interactive-hover-base: var(--ks-color-negative-alpha-2);
+  --ks-text-color-negative-inverted-interactive-hover-base: var(--ks-color-negative-inverted-alpha-2);
+  --ks-text-color-negative-interactive-active-base: var(--ks-color-negative-alpha-2);
+  --ks-text-color-negative-inverted-interactive-active-base: var(--ks-color-negative-inverted-alpha-2);
+  --ks-text-color-negative-interactive-selected-base: var(--ks-color-negative-alpha-2);
+  --ks-text-color-negative-inverted-interactive-selected-base: var(--ks-color-negative-inverted-alpha-2);
+}
+
+:root {
+  --ks-text-color-default: var(--ks-text-color-default-base);
+  --ks-text-color-default-inverted: var(--ks-text-color-default-inverted-base);
+  --ks-text-color-default-interactive: var(--ks-text-color-default-interactive-base);
+  --ks-text-color-default-inverted-interactive: var(--ks-text-color-default-inverted-interactive-base);
+  --ks-text-color-default-interactive-hover: var(--ks-text-color-default-interactive-hover-base);
+  --ks-text-color-default-inverted-interactive-hover: var(--ks-text-color-default-inverted-interactive-hover-base);
+  --ks-text-color-default-interactive-active: var(--ks-text-color-default-interactive-active-base);
+  --ks-text-color-default-inverted-interactive-active: var(--ks-text-color-default-inverted-interactive-active-base);
+  --ks-text-color-default-interactive-selected: var(--ks-text-color-default-interactive-selected-base);
+  --ks-text-color-default-inverted-interactive-selected: var(
+    --ks-text-color-default-inverted-interactive-selected-base
+  );
+  --ks-text-color-copy: var(--ks-text-color-copy-base);
+  --ks-text-color-copy-inverted: var(--ks-text-color-copy-inverted-base);
+  --ks-text-color-copy-interactive: var(--ks-text-color-copy-interactive-base);
+  --ks-text-color-copy-inverted-interactive: var(--ks-text-color-copy-inverted-interactive-base);
+  --ks-text-color-copy-interactive-hover: var(--ks-text-color-copy-interactive-hover-base);
+  --ks-text-color-copy-inverted-interactive-hover: var(--ks-text-color-copy-inverted-interactive-hover-base);
+  --ks-text-color-copy-interactive-active: var(--ks-text-color-copy-interactive-active-base);
+  --ks-text-color-copy-inverted-interactive-active: var(--ks-text-color-copy-inverted-interactive-active-base);
+  --ks-text-color-copy-interactive-selected: var(--ks-text-color-copy-interactive-selected-base);
+  --ks-text-color-copy-inverted-interactive-selected: var(--ks-text-color-copy-inverted-interactive-selected-base);
+  --ks-text-color-display: var(--ks-text-color-display-base);
+  --ks-text-color-display-inverted: var(--ks-text-color-display-inverted-base);
+  --ks-text-color-display-interactive: var(--ks-text-color-display-interactive-base);
+  --ks-text-color-display-inverted-interactive: var(--ks-text-color-display-inverted-interactive-base);
+  --ks-text-color-display-interactive-hover: var(--ks-text-color-display-interactive-hover-base);
+  --ks-text-color-display-inverted-interactive-hover: var(--ks-text-color-display-inverted-interactive-hover-base);
+  --ks-text-color-display-interactive-active: var(--ks-text-color-display-interactive-active-base);
+  --ks-text-color-display-inverted-interactive-active: var(--ks-text-color-display-inverted-interactive-active-base);
+  --ks-text-color-display-interactive-selected: var(--ks-text-color-display-interactive-selected-base);
+  --ks-text-color-display-inverted-interactive-selected: var(
+    --ks-text-color-display-inverted-interactive-selected-base
+  );
+  --ks-text-color-interface: var(--ks-text-color-interface-base);
+  --ks-text-color-interface-inverted: var(--ks-text-color-interface-inverted-base);
+  --ks-text-color-interface-interactive: var(--ks-text-color-interface-interactive-base);
+  --ks-text-color-interface-inverted-interactive: var(--ks-text-color-interface-inverted-interactive-base);
+  --ks-text-color-interface-interactive-hover: var(--ks-text-color-interface-interactive-hover-base);
+  --ks-text-color-interface-inverted-interactive-hover: var(--ks-text-color-interface-inverted-interactive-hover-base);
+  --ks-text-color-interface-interactive-active: var(--ks-text-color-interface-interactive-active-base);
+  --ks-text-color-interface-inverted-interactive-active: var(
+    --ks-text-color-interface-inverted-interactive-active-base
+  );
+  --ks-text-color-interface-interactive-selected: var(--ks-text-color-interface-interactive-selected-base);
+  --ks-text-color-interface-inverted-interactive-selected: var(
+    --ks-text-color-interface-inverted-interactive-selected-base
+  );
+  --ks-text-color-card: var(--ks-text-color-card-base);
+  --ks-text-color-card-inverted: var(--ks-text-color-card-inverted-base);
+  --ks-text-color-card-interactive: var(--ks-text-color-card-interactive-base);
+  --ks-text-color-card-inverted-interactive: var(--ks-text-color-card-inverted-interactive-base);
+  --ks-text-color-card-interactive-hover: var(--ks-text-color-card-interactive-hover-base);
+  --ks-text-color-card-inverted-interactive-hover: var(--ks-text-color-card-inverted-interactive-hover-base);
+  --ks-text-color-card-interactive-active: var(--ks-text-color-card-interactive-active-base);
+  --ks-text-color-card-inverted-interactive-active: var(--ks-text-color-card-inverted-interactive-active-base);
+  --ks-text-color-card-interactive-selected: var(--ks-text-color-card-interactive-selected-base);
+  --ks-text-color-card-inverted-interactive-selected: var(--ks-text-color-card-inverted-interactive-selected-base);
+  --ks-text-color-primary: var(--ks-text-color-primary-base);
+  --ks-text-color-primary-inverted: var(--ks-text-color-primary-inverted-base);
+  --ks-text-color-primary-interactive: var(--ks-text-color-primary-interactive-base);
+  --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-inverted-interactive-base);
+  --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
+  --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
+  --ks-text-color-primary-interactive-active: var(--ks-text-color-primary-interactive-active-base);
+  --ks-text-color-primary-inverted-interactive-active: var(--ks-text-color-primary-inverted-interactive-active-base);
+  --ks-text-color-primary-interactive-selected: var(--ks-text-color-primary-interactive-selected-base);
+  --ks-text-color-primary-inverted-interactive-selected: var(
+    --ks-text-color-primary-inverted-interactive-selected-base
+  );
+  --ks-text-color-positive: var(--ks-text-color-positive-base);
+  --ks-text-color-positive-inverted: var(--ks-text-color-positive-inverted-base);
+  --ks-text-color-positive-interactive: var(--ks-text-color-positive-interactive-base);
+  --ks-text-color-positive-inverted-interactive: var(--ks-text-color-positive-inverted-interactive-base);
+  --ks-text-color-positive-interactive-hover: var(--ks-text-color-positive-interactive-hover-base);
+  --ks-text-color-positive-inverted-interactive-hover: var(--ks-text-color-positive-inverted-interactive-hover-base);
+  --ks-text-color-positive-interactive-active: var(--ks-text-color-positive-interactive-active-base);
+  --ks-text-color-positive-inverted-interactive-active: var(--ks-text-color-positive-inverted-interactive-active-base);
+  --ks-text-color-positive-interactive-selected: var(--ks-text-color-positive-interactive-selected-base);
+  --ks-text-color-positive-inverted-interactive-selected: var(
+    --ks-text-color-positive-inverted-interactive-selected-base
+  );
+  --ks-text-color-informative: var(--ks-text-color-informative-base);
+  --ks-text-color-informative-inverted: var(--ks-text-color-informative-inverted-base);
+  --ks-text-color-informative-interactive: var(--ks-text-color-informative-interactive-base);
+  --ks-text-color-informative-inverted-interactive: var(--ks-text-color-informative-inverted-interactive-base);
+  --ks-text-color-informative-interactive-hover: var(--ks-text-color-informative-interactive-hover-base);
+  --ks-text-color-informative-inverted-interactive-hover: var(
+    --ks-text-color-informative-inverted-interactive-hover-base
+  );
+  --ks-text-color-informative-interactive-active: var(--ks-text-color-informative-interactive-active-base);
+  --ks-text-color-informative-inverted-interactive-active: var(
+    --ks-text-color-informative-inverted-interactive-active-base
+  );
+  --ks-text-color-informative-interactive-selected: var(--ks-text-color-informative-interactive-selected-base);
+  --ks-text-color-informative-inverted-interactive-selected: var(
+    --ks-text-color-informative-inverted-interactive-selected-base
+  );
+  --ks-text-color-notice: var(--ks-text-color-notice-base);
+  --ks-text-color-notice-inverted: var(--ks-text-color-notice-inverted-base);
+  --ks-text-color-notice-interactive: var(--ks-text-color-notice-interactive-base);
+  --ks-text-color-notice-inverted-interactive: var(--ks-text-color-notice-inverted-interactive-base);
+  --ks-text-color-notice-interactive-hover: var(--ks-text-color-notice-interactive-hover-base);
+  --ks-text-color-notice-inverted-interactive-hover: var(--ks-text-color-notice-inverted-interactive-hover-base);
+  --ks-text-color-notice-interactive-active: var(--ks-text-color-notice-interactive-active-base);
+  --ks-text-color-notice-inverted-interactive-active: var(--ks-text-color-notice-inverted-interactive-active-base);
+  --ks-text-color-notice-interactive-selected: var(--ks-text-color-notice-interactive-selected-base);
+  --ks-text-color-notice-inverted-interactive-selected: var(--ks-text-color-notice-inverted-interactive-selected-base);
+  --ks-text-color-negative: var(--ks-text-color-negative-base);
+  --ks-text-color-negative-inverted: var(--ks-text-color-negative-inverted-base);
+  --ks-text-color-negative-interactive: var(--ks-text-color-negative-interactive-base);
+  --ks-text-color-negative-inverted-interactive: var(--ks-text-color-negative-inverted-interactive-base);
+  --ks-text-color-negative-interactive-hover: var(--ks-text-color-negative-interactive-hover-base);
+  --ks-text-color-negative-inverted-interactive-hover: var(--ks-text-color-negative-inverted-interactive-hover-base);
+  --ks-text-color-negative-interactive-active: var(--ks-text-color-negative-interactive-active-base);
+  --ks-text-color-negative-inverted-interactive-active: var(--ks-text-color-negative-inverted-interactive-active-base);
+  --ks-text-color-negative-interactive-selected: var(--ks-text-color-negative-interactive-selected-base);
+  --ks-text-color-negative-inverted-interactive-selected: var(
+    --ks-text-color-negative-inverted-interactive-selected-base
+  );
+}
+
+[ks-inverted=true] {
+  --ks-text-color-default: var(--ks-text-color-default-inverted-base);
+  --ks-text-color-default-inverted: var(--ks-text-color-default-base);
+  --ks-text-color-default-interactive: var(--ks-text-color-default-inverted-interactive-base);
+  --ks-text-color-default-inverted-interactive: var(--ks-text-color-default-interactive-base);
+  --ks-text-color-default-interactive-hover: var(--ks-text-color-default-inverted-interactive-hover-base);
+  --ks-text-color-default-inverted-interactive-hover: var(--ks-text-color-default-interactive-hover-base);
+  --ks-text-color-default-interactive-active: var(--ks-text-color-default-inverted-interactive-active-base);
+  --ks-text-color-default-inverted-interactive-active: var(--ks-text-color-default-interactive-active-base);
+  --ks-text-color-default-interactive-selected: var(--ks-text-color-default-inverted-interactive-selected-base);
+  --ks-text-color-default-inverted-interactive-selected: var(--ks-text-color-default-interactive-selected-base);
+  --ks-text-color-copy: var(--ks-text-color-copy-inverted-base);
+  --ks-text-color-copy-inverted: var(--ks-text-color-copy-base);
+  --ks-text-color-copy-interactive: var(--ks-text-color-copy-inverted-interactive-base);
+  --ks-text-color-copy-inverted-interactive: var(--ks-text-color-copy-interactive-base);
+  --ks-text-color-copy-interactive-hover: var(--ks-text-color-copy-inverted-interactive-hover-base);
+  --ks-text-color-copy-inverted-interactive-hover: var(--ks-text-color-copy-interactive-hover-base);
+  --ks-text-color-copy-interactive-active: var(--ks-text-color-copy-inverted-interactive-active-base);
+  --ks-text-color-copy-inverted-interactive-active: var(--ks-text-color-copy-interactive-active-base);
+  --ks-text-color-copy-interactive-selected: var(--ks-text-color-copy-inverted-interactive-selected-base);
+  --ks-text-color-copy-inverted-interactive-selected: var(--ks-text-color-copy-interactive-selected-base);
+  --ks-text-color-display: var(--ks-text-color-display-inverted-base);
+  --ks-text-color-display-inverted: var(--ks-text-color-display-base);
+  --ks-text-color-display-interactive: var(--ks-text-color-display-inverted-interactive-base);
+  --ks-text-color-display-inverted-interactive: var(--ks-text-color-display-interactive-base);
+  --ks-text-color-display-interactive-hover: var(--ks-text-color-display-inverted-interactive-hover-base);
+  --ks-text-color-display-inverted-interactive-hover: var(--ks-text-color-display-interactive-hover-base);
+  --ks-text-color-display-interactive-active: var(--ks-text-color-display-inverted-interactive-active-base);
+  --ks-text-color-display-inverted-interactive-active: var(--ks-text-color-display-interactive-active-base);
+  --ks-text-color-display-interactive-selected: var(--ks-text-color-display-inverted-interactive-selected-base);
+  --ks-text-color-display-inverted-interactive-selected: var(--ks-text-color-display-interactive-selected-base);
+  --ks-text-color-interface: var(--ks-text-color-interface-inverted-base);
+  --ks-text-color-interface-inverted: var(--ks-text-color-interface-base);
+  --ks-text-color-interface-interactive: var(--ks-text-color-interface-inverted-interactive-base);
+  --ks-text-color-interface-inverted-interactive: var(--ks-text-color-interface-interactive-base);
+  --ks-text-color-interface-interactive-hover: var(--ks-text-color-interface-inverted-interactive-hover-base);
+  --ks-text-color-interface-inverted-interactive-hover: var(--ks-text-color-interface-interactive-hover-base);
+  --ks-text-color-interface-interactive-active: var(--ks-text-color-interface-inverted-interactive-active-base);
+  --ks-text-color-interface-inverted-interactive-active: var(--ks-text-color-interface-interactive-active-base);
+  --ks-text-color-interface-interactive-selected: var(--ks-text-color-interface-inverted-interactive-selected-base);
+  --ks-text-color-interface-inverted-interactive-selected: var(--ks-text-color-interface-interactive-selected-base);
+  --ks-text-color-card: var(--ks-text-color-card-inverted-base);
+  --ks-text-color-card-inverted: var(--ks-text-color-card-base);
+  --ks-text-color-card-interactive: var(--ks-text-color-card-inverted-interactive-base);
+  --ks-text-color-card-inverted-interactive: var(--ks-text-color-card-interactive-base);
+  --ks-text-color-card-interactive-hover: var(--ks-text-color-card-inverted-interactive-hover-base);
+  --ks-text-color-card-inverted-interactive-hover: var(--ks-text-color-card-interactive-hover-base);
+  --ks-text-color-card-interactive-active: var(--ks-text-color-card-inverted-interactive-active-base);
+  --ks-text-color-card-inverted-interactive-active: var(--ks-text-color-card-interactive-active-base);
+  --ks-text-color-card-interactive-selected: var(--ks-text-color-card-inverted-interactive-selected-base);
+  --ks-text-color-card-inverted-interactive-selected: var(--ks-text-color-card-interactive-selected-base);
+  --ks-text-color-primary: var(--ks-text-color-primary-inverted-base);
+  --ks-text-color-primary-inverted: var(--ks-text-color-primary-base);
+  --ks-text-color-primary-interactive: var(--ks-text-color-primary-inverted-interactive-base);
+  --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-interactive-base);
+  --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
+  --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
+  --ks-text-color-primary-interactive-active: var(--ks-text-color-primary-inverted-interactive-active-base);
+  --ks-text-color-primary-inverted-interactive-active: var(--ks-text-color-primary-interactive-active-base);
+  --ks-text-color-primary-interactive-selected: var(--ks-text-color-primary-inverted-interactive-selected-base);
+  --ks-text-color-primary-inverted-interactive-selected: var(--ks-text-color-primary-interactive-selected-base);
+  --ks-text-color-positive: var(--ks-text-color-positive-inverted-base);
+  --ks-text-color-positive-inverted: var(--ks-text-color-positive-base);
+  --ks-text-color-positive-interactive: var(--ks-text-color-positive-inverted-interactive-base);
+  --ks-text-color-positive-inverted-interactive: var(--ks-text-color-positive-interactive-base);
+  --ks-text-color-positive-interactive-hover: var(--ks-text-color-positive-inverted-interactive-hover-base);
+  --ks-text-color-positive-inverted-interactive-hover: var(--ks-text-color-positive-interactive-hover-base);
+  --ks-text-color-positive-interactive-active: var(--ks-text-color-positive-inverted-interactive-active-base);
+  --ks-text-color-positive-inverted-interactive-active: var(--ks-text-color-positive-interactive-active-base);
+  --ks-text-color-positive-interactive-selected: var(--ks-text-color-positive-inverted-interactive-selected-base);
+  --ks-text-color-positive-inverted-interactive-selected: var(--ks-text-color-positive-interactive-selected-base);
+  --ks-text-color-informative: var(--ks-text-color-informative-inverted-base);
+  --ks-text-color-informative-inverted: var(--ks-text-color-informative-base);
+  --ks-text-color-informative-interactive: var(--ks-text-color-informative-inverted-interactive-base);
+  --ks-text-color-informative-inverted-interactive: var(--ks-text-color-informative-interactive-base);
+  --ks-text-color-informative-interactive-hover: var(--ks-text-color-informative-inverted-interactive-hover-base);
+  --ks-text-color-informative-inverted-interactive-hover: var(--ks-text-color-informative-interactive-hover-base);
+  --ks-text-color-informative-interactive-active: var(--ks-text-color-informative-inverted-interactive-active-base);
+  --ks-text-color-informative-inverted-interactive-active: var(--ks-text-color-informative-interactive-active-base);
+  --ks-text-color-informative-interactive-selected: var(--ks-text-color-informative-inverted-interactive-selected-base);
+  --ks-text-color-informative-inverted-interactive-selected: var(--ks-text-color-informative-interactive-selected-base);
+  --ks-text-color-notice: var(--ks-text-color-notice-inverted-base);
+  --ks-text-color-notice-inverted: var(--ks-text-color-notice-base);
+  --ks-text-color-notice-interactive: var(--ks-text-color-notice-inverted-interactive-base);
+  --ks-text-color-notice-inverted-interactive: var(--ks-text-color-notice-interactive-base);
+  --ks-text-color-notice-interactive-hover: var(--ks-text-color-notice-inverted-interactive-hover-base);
+  --ks-text-color-notice-inverted-interactive-hover: var(--ks-text-color-notice-interactive-hover-base);
+  --ks-text-color-notice-interactive-active: var(--ks-text-color-notice-inverted-interactive-active-base);
+  --ks-text-color-notice-inverted-interactive-active: var(--ks-text-color-notice-interactive-active-base);
+  --ks-text-color-notice-interactive-selected: var(--ks-text-color-notice-inverted-interactive-selected-base);
+  --ks-text-color-notice-inverted-interactive-selected: var(--ks-text-color-notice-interactive-selected-base);
+  --ks-text-color-negative: var(--ks-text-color-negative-inverted-base);
+  --ks-text-color-negative-inverted: var(--ks-text-color-negative-base);
+  --ks-text-color-negative-interactive: var(--ks-text-color-negative-inverted-interactive-base);
+  --ks-text-color-negative-inverted-interactive: var(--ks-text-color-negative-interactive-base);
+  --ks-text-color-negative-interactive-hover: var(--ks-text-color-negative-inverted-interactive-hover-base);
+  --ks-text-color-negative-inverted-interactive-hover: var(--ks-text-color-negative-interactive-hover-base);
+  --ks-text-color-negative-interactive-active: var(--ks-text-color-negative-inverted-interactive-active-base);
+  --ks-text-color-negative-inverted-interactive-active: var(--ks-text-color-negative-interactive-active-base);
+  --ks-text-color-negative-interactive-selected: var(--ks-text-color-negative-inverted-interactive-selected-base);
+  --ks-text-color-negative-inverted-interactive-selected: var(--ks-text-color-negative-interactive-selected-base);
+}
+
+:root,
+[ks-theme] {
+  --ks-border-color-accent-base: var(--ks-color-primary-to-bg-8);
+  --ks-border-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8);
+  --ks-border-color-clear-base: var(--ks-color-transparent);
+  --ks-border-color-clear-inverted-base: var(--ks-color-transparent);
+  --ks-border-color-clear-interactive-base: var(--ks-color-transparent);
+  --ks-border-color-clear-inverted-interactive-base: var(--ks-color-transparent);
+  --ks-border-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8);
+  --ks-border-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7);
+  --ks-border-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7);
+  --ks-border-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6);
+  --ks-border-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6);
+  --ks-border-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5);
+  --ks-border-color-default-base: var(--ks-color-fg-alpha-8);
+  --ks-border-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-8);
+  --ks-border-color-interface-base: var(--ks-color-primary-alpha-8);
+  --ks-border-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-8);
+  --ks-border-color-interface-interactive-base: var(--ks-color-fg-alpha-7);
+  --ks-border-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-7);
+  --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-8);
+  --ks-border-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-8);
+  --ks-border-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-5);
+  --ks-border-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-5);
+  --ks-border-color-interface-interactive-active-base: var(--ks-color-primary);
+  --ks-border-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-5);
+  --ks-border-color-interface-interactive-selected-base: var(--ks-color-primary);
+  --ks-border-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
+  --ks-border-color-card-base: var(--ks-color-fg-alpha-9);
+  --ks-border-color-card-inverted-base: var(--ks-color-fg-inverted-alpha-9);
+  --ks-border-color-card-interactive-base: var(--ks-color-fg-alpha-8);
+  --ks-border-color-card-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-5);
+  --ks-border-color-card-interactive-disabled-base: var(--ks-color-fg-alpha-8);
+  --ks-border-color-card-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-2);
+  --ks-border-color-card-interactive-hover-base: var(--ks-color-fg-alpha-5);
+  --ks-border-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-3);
+  --ks-border-color-card-interactive-active-base: var(--ks-color-fg-alpha-3);
+  --ks-border-color-card-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-1);
+  --ks-border-color-card-interactive-selected-base: var(--ks-color-primary);
+  --ks-border-color-card-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
+  --ks-border-color-primary-base: var(--ks-color-primary);
+  --ks-border-color-primary-inverted-base: var(--ks-color-primary-inverted);
+  --ks-border-color-primary-interactive-base: var(--ks-color-primary);
+  --ks-border-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
+  --ks-border-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-2);
+  --ks-border-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-2);
+  --ks-border-color-primary-interactive-active-base: var(--ks-color-primary-to-bg-3);
+  --ks-border-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-to-bg-3);
+  --ks-border-color-primary-interactive-selected-base: var(--ks-color-primary);
+  --ks-border-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
+  --ks-border-color-primary-translucent-base: var(--ks-color-primary-alpha-2);
+  --ks-border-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-2);
+  --ks-border-color-positive-base: var(--ks-color-positive);
+  --ks-border-color-positive-inverted-base: var(--ks-color-positive-inverted);
+  --ks-border-color-positive-interactive-base: var(--ks-color-positive);
+  --ks-border-color-positive-inverted-interactive-base: var(--ks-color-positive-inverted);
+  --ks-border-color-positive-interactive-hover-base: var(--ks-color-positive-to-bg-2);
+  --ks-border-color-positive-inverted-interactive-hover-base: var(--ks-color-positive-inverted-to-bg-2);
+  --ks-border-color-positive-interactive-active-base: var(--ks-color-positive-to-bg-3);
+  --ks-border-color-positive-inverted-interactive-active-base: var(--ks-color-positive-inverted-to-bg-3);
+  --ks-border-color-positive-interactive-selected-base: var(--ks-color-positive);
+  --ks-border-color-positive-inverted-interactive-selected-base: var(--ks-color-positive-inverted);
+  --ks-border-color-positive-translucent-base: var(--ks-color-positive-alpha-2);
+  --ks-border-color-positive-inverted-translucent-base: var(--ks-color-positive-inverted-alpha-2);
+  --ks-border-color-informative-base: var(--ks-color-informative);
+  --ks-border-color-informative-inverted-base: var(--ks-color-informative-inverted);
+  --ks-border-color-informative-interactive-base: var(--ks-color-informative);
+  --ks-border-color-informative-inverted-interactive-base: var(--ks-color-informative-inverted);
+  --ks-border-color-informative-interactive-hover-base: var(--ks-color-informative-to-bg-2);
+  --ks-border-color-informative-inverted-interactive-hover-base: var(--ks-color-informative-inverted-to-bg-2);
+  --ks-border-color-informative-interactive-active-base: var(--ks-color-informative-to-bg-3);
+  --ks-border-color-informative-inverted-interactive-active-base: var(--ks-color-informative-inverted-to-bg-3);
+  --ks-border-color-informative-interactive-selected-base: var(--ks-color-informative);
+  --ks-border-color-informative-inverted-interactive-selected-base: var(--ks-color-informative-inverted);
+  --ks-border-color-informative-translucent-base: var(--ks-color-informative-alpha-2);
+  --ks-border-color-informative-inverted-translucent-base: var(--ks-color-informative-inverted-alpha-2);
+  --ks-border-color-notice-base: var(--ks-color-notice);
+  --ks-border-color-notice-inverted-base: var(--ks-color-notice-inverted);
+  --ks-border-color-notice-interactive-base: var(--ks-color-notice);
+  --ks-border-color-notice-inverted-interactive-base: var(--ks-color-notice-inverted);
+  --ks-border-color-notice-interactive-hover-base: var(--ks-color-notice-to-bg-2);
+  --ks-border-color-notice-inverted-interactive-hover-base: var(--ks-color-notice-inverted-to-bg-2);
+  --ks-border-color-notice-interactive-active-base: var(--ks-color-notice-to-bg-3);
+  --ks-border-color-notice-inverted-interactive-active-base: var(--ks-color-notice-inverted-to-bg-3);
+  --ks-border-color-notice-interactive-selected-base: var(--ks-color-notice);
+  --ks-border-color-notice-inverted-interactive-selected-base: var(--ks-color-notice-inverted);
+  --ks-border-color-notice-translucent-base: var(--ks-color-notice-alpha-2);
+  --ks-border-color-notice-inverted-translucent-base: var(--ks-color-notice-inverted-alpha-2);
+  --ks-border-color-negative-base: var(--ks-color-negative);
+  --ks-border-color-negative-inverted-base: var(--ks-color-negative-inverted);
+  --ks-border-color-negative-interactive-base: var(--ks-color-negative);
+  --ks-border-color-negative-inverted-interactive-base: var(--ks-color-negative-inverted);
+  --ks-border-color-negative-interactive-hover-base: var(--ks-color-negative-to-bg-2);
+  --ks-border-color-negative-inverted-interactive-hover-base: var(--ks-color-negative-inverted-to-bg-2);
+  --ks-border-color-negative-interactive-active-base: var(--ks-color-negative-to-bg-3);
+  --ks-border-color-negative-inverted-interactive-active-base: var(--ks-color-negative-inverted-to-bg-3);
+  --ks-border-color-negative-interactive-selected-base: var(--ks-color-negative);
+  --ks-border-color-negative-inverted-interactive-selected-base: var(--ks-color-negative-inverted);
+  --ks-border-color-negative-translucent-base: var(--ks-color-negative-alpha-2);
+  --ks-border-color-negative-inverted-translucent-base: var(--ks-color-negative-inverted-alpha-2);
+}
+
+:root {
+  --ks-border-color-accent: var(--ks-border-color-accent-base);
+  --ks-border-color-accent-inverted: var(--ks-border-color-accent-inverted-base);
+  --ks-border-color-clear: var(--ks-border-color-clear-base);
+  --ks-border-color-clear-inverted: var(--ks-border-color-clear-inverted-base);
+  --ks-border-color-clear-interactive: var(--ks-border-color-clear-interactive-base);
+  --ks-border-color-clear-inverted-interactive: var(--ks-border-color-clear-inverted-interactive-base);
+  --ks-border-color-clear-interactive-hover: var(--ks-border-color-clear-interactive-hover-base);
+  --ks-border-color-clear-inverted-interactive-hover: var(--ks-border-color-clear-inverted-interactive-hover-base);
+  --ks-border-color-clear-interactive-active: var(--ks-border-color-clear-interactive-active-base);
+  --ks-border-color-clear-inverted-interactive-active: var(--ks-border-color-clear-inverted-interactive-active-base);
+  --ks-border-color-clear-interactive-selected: var(--ks-border-color-clear-interactive-selected-base);
+  --ks-border-color-clear-inverted-interactive-selected: var(
+    --ks-border-color-clear-inverted-interactive-selected-base
+  );
+  --ks-border-color-default: var(--ks-border-color-default-base);
+  --ks-border-color-default-inverted: var(--ks-border-color-default-inverted-base);
+  --ks-border-color-interface: var(--ks-border-color-interface-base);
+  --ks-border-color-interface-inverted: var(--ks-border-color-interface-inverted-base);
+  --ks-border-color-interface-interactive: var(--ks-border-color-interface-interactive-base);
+  --ks-border-color-interface-inverted-interactive: var(--ks-border-color-interface-inverted-interactive-base);
+  --ks-border-color-interface-interactive-disabled: var(--ks-border-color-interface-interactive-disabled-base);
+  --ks-border-color-interface-inverted-interactive-disabled: var(
+    --ks-border-color-interface-inverted-interactive-disabled-base
+  );
+  --ks-border-color-interface-interactive-hover: var(--ks-border-color-interface-interactive-hover-base);
+  --ks-border-color-interface-inverted-interactive-hover: var(
+    --ks-border-color-interface-inverted-interactive-hover-base
+  );
+  --ks-border-color-interface-interactive-active: var(--ks-border-color-interface-interactive-active-base);
+  --ks-border-color-interface-inverted-interactive-active: var(
+    --ks-border-color-interface-inverted-interactive-active-base
+  );
+  --ks-border-color-interface-interactive-selected: var(--ks-border-color-interface-interactive-selected-base);
+  --ks-border-color-interface-inverted-interactive-selected: var(
+    --ks-border-color-interface-inverted-interactive-selected-base
+  );
+  --ks-border-color-card: var(--ks-border-color-card-base);
+  --ks-border-color-card-inverted: var(--ks-border-color-card-inverted-base);
+  --ks-border-color-card-interactive: var(--ks-border-color-card-interactive-base);
+  --ks-border-color-card-inverted-interactive: var(--ks-border-color-card-inverted-interactive-base);
+  --ks-border-color-card-interactive-disabled: var(--ks-border-color-card-interactive-disabled-base);
+  --ks-border-color-card-inverted-interactive-disabled: var(--ks-border-color-card-inverted-interactive-disabled-base);
+  --ks-border-color-card-interactive-hover: var(--ks-border-color-card-interactive-hover-base);
+  --ks-border-color-card-inverted-interactive-hover: var(--ks-border-color-card-inverted-interactive-hover-base);
+  --ks-border-color-card-interactive-active: var(--ks-border-color-card-interactive-active-base);
+  --ks-border-color-card-inverted-interactive-active: var(--ks-border-color-card-inverted-interactive-active-base);
+  --ks-border-color-card-interactive-selected: var(--ks-border-color-card-interactive-selected-base);
+  --ks-border-color-card-inverted-interactive-selected: var(--ks-border-color-card-inverted-interactive-selected-base);
+  --ks-border-color-primary: var(--ks-border-color-primary-base);
+  --ks-border-color-primary-inverted: var(--ks-border-color-primary-inverted-base);
+  --ks-border-color-primary-interactive: var(--ks-border-color-primary-interactive-base);
+  --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-inverted-interactive-base);
+  --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
+  --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
+  --ks-border-color-primary-interactive-active: var(--ks-border-color-primary-interactive-active-base);
+  --ks-border-color-primary-inverted-interactive-active: var(
+    --ks-border-color-primary-inverted-interactive-active-base
+  );
+  --ks-border-color-primary-interactive-selected: var(--ks-border-color-primary-interactive-selected-base);
+  --ks-border-color-primary-inverted-interactive-selected: var(
+    --ks-border-color-primary-inverted-interactive-selected-base
+  );
+  --ks-border-color-primary-translucent: var(--ks-border-color-primary-translucent-base);
+  --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-inverted-translucent-base);
+  --ks-border-color-positive: var(--ks-border-color-positive-base);
+  --ks-border-color-positive-inverted: var(--ks-border-color-positive-inverted-base);
+  --ks-border-color-positive-interactive: var(--ks-border-color-positive-interactive-base);
+  --ks-border-color-positive-inverted-interactive: var(--ks-border-color-positive-inverted-interactive-base);
+  --ks-border-color-positive-interactive-hover: var(--ks-border-color-positive-interactive-hover-base);
+  --ks-border-color-positive-inverted-interactive-hover: var(
+    --ks-border-color-positive-inverted-interactive-hover-base
+  );
+  --ks-border-color-positive-interactive-active: var(--ks-border-color-positive-interactive-active-base);
+  --ks-border-color-positive-inverted-interactive-active: var(
+    --ks-border-color-positive-inverted-interactive-active-base
+  );
+  --ks-border-color-positive-interactive-selected: var(--ks-border-color-positive-interactive-selected-base);
+  --ks-border-color-positive-inverted-interactive-selected: var(
+    --ks-border-color-positive-inverted-interactive-selected-base
+  );
+  --ks-border-color-positive-translucent: var(--ks-border-color-positive-translucent-base);
+  --ks-border-color-positive-inverted-translucent: var(--ks-border-color-positive-inverted-translucent-base);
+  --ks-border-color-informative: var(--ks-border-color-informative-base);
+  --ks-border-color-informative-inverted: var(--ks-border-color-informative-inverted-base);
+  --ks-border-color-informative-interactive: var(--ks-border-color-informative-interactive-base);
+  --ks-border-color-informative-inverted-interactive: var(--ks-border-color-informative-inverted-interactive-base);
+  --ks-border-color-informative-interactive-hover: var(--ks-border-color-informative-interactive-hover-base);
+  --ks-border-color-informative-inverted-interactive-hover: var(
+    --ks-border-color-informative-inverted-interactive-hover-base
+  );
+  --ks-border-color-informative-interactive-active: var(--ks-border-color-informative-interactive-active-base);
+  --ks-border-color-informative-inverted-interactive-active: var(
+    --ks-border-color-informative-inverted-interactive-active-base
+  );
+  --ks-border-color-informative-interactive-selected: var(--ks-border-color-informative-interactive-selected-base);
+  --ks-border-color-informative-inverted-interactive-selected: var(
+    --ks-border-color-informative-inverted-interactive-selected-base
+  );
+  --ks-border-color-informative-translucent: var(--ks-border-color-informative-translucent-base);
+  --ks-border-color-informative-inverted-translucent: var(--ks-border-color-informative-inverted-translucent-base);
+  --ks-border-color-notice: var(--ks-border-color-notice-base);
+  --ks-border-color-notice-inverted: var(--ks-border-color-notice-inverted-base);
+  --ks-border-color-notice-interactive: var(--ks-border-color-notice-interactive-base);
+  --ks-border-color-notice-inverted-interactive: var(--ks-border-color-notice-inverted-interactive-base);
+  --ks-border-color-notice-interactive-hover: var(--ks-border-color-notice-interactive-hover-base);
+  --ks-border-color-notice-inverted-interactive-hover: var(--ks-border-color-notice-inverted-interactive-hover-base);
+  --ks-border-color-notice-interactive-active: var(--ks-border-color-notice-interactive-active-base);
+  --ks-border-color-notice-inverted-interactive-active: var(--ks-border-color-notice-inverted-interactive-active-base);
+  --ks-border-color-notice-interactive-selected: var(--ks-border-color-notice-interactive-selected-base);
+  --ks-border-color-notice-inverted-interactive-selected: var(
+    --ks-border-color-notice-inverted-interactive-selected-base
+  );
+  --ks-border-color-notice-translucent: var(--ks-border-color-notice-translucent-base);
+  --ks-border-color-notice-inverted-translucent: var(--ks-border-color-notice-inverted-translucent-base);
+  --ks-border-color-negative: var(--ks-border-color-negative-base);
+  --ks-border-color-negative-inverted: var(--ks-border-color-negative-inverted-base);
+  --ks-border-color-negative-interactive: var(--ks-border-color-negative-interactive-base);
+  --ks-border-color-negative-inverted-interactive: var(--ks-border-color-negative-inverted-interactive-base);
+  --ks-border-color-negative-interactive-hover: var(--ks-border-color-negative-interactive-hover-base);
+  --ks-border-color-negative-inverted-interactive-hover: var(
+    --ks-border-color-negative-inverted-interactive-hover-base
+  );
+  --ks-border-color-negative-interactive-active: var(--ks-border-color-negative-interactive-active-base);
+  --ks-border-color-negative-inverted-interactive-active: var(
+    --ks-border-color-negative-inverted-interactive-active-base
+  );
+  --ks-border-color-negative-interactive-selected: var(--ks-border-color-negative-interactive-selected-base);
+  --ks-border-color-negative-inverted-interactive-selected: var(
+    --ks-border-color-negative-inverted-interactive-selected-base
+  );
+  --ks-border-color-negative-translucent: var(--ks-border-color-negative-translucent-base);
+  --ks-border-color-negative-inverted-translucent: var(--ks-border-color-negative-inverted-translucent-base);
+}
+
+[ks-inverted=true] {
+  --ks-border-color-accent: var(--ks-border-color-accent-inverted-base);
+  --ks-border-color-accent-inverted: var(--ks-border-color-accent-base);
+  --ks-border-color-clear: var(--ks-border-color-clear-inverted-base);
+  --ks-border-color-clear-inverted: var(--ks-border-color-clear-base);
+  --ks-border-color-clear-interactive: var(--ks-border-color-clear-inverted-interactive-base);
+  --ks-border-color-clear-inverted-interactive: var(--ks-border-color-clear-interactive-base);
+  --ks-border-color-clear-interactive-hover: var(--ks-border-color-clear-inverted-interactive-hover-base);
+  --ks-border-color-clear-inverted-interactive-hover: var(--ks-border-color-clear-interactive-hover-base);
+  --ks-border-color-clear-interactive-active: var(--ks-border-color-clear-inverted-interactive-active-base);
+  --ks-border-color-clear-inverted-interactive-active: var(--ks-border-color-clear-interactive-active-base);
+  --ks-border-color-clear-interactive-selected: var(--ks-border-color-clear-inverted-interactive-selected-base);
+  --ks-border-color-clear-inverted-interactive-selected: var(--ks-border-color-clear-interactive-selected-base);
+  --ks-border-color-default: var(--ks-border-color-default-inverted-base);
+  --ks-border-color-default-inverted: var(--ks-border-color-default-base);
+  --ks-border-color-interface: var(--ks-border-color-interface-inverted-base);
+  --ks-border-color-interface-inverted: var(--ks-border-color-interface-base);
+  --ks-border-color-interface-interactive: var(--ks-border-color-interface-inverted-interactive-base);
+  --ks-border-color-interface-inverted-interactive: var(--ks-border-color-interface-interactive-base);
+  --ks-border-color-interface-interactive-disabled: var(--ks-border-color-interface-inverted-interactive-disabled-base);
+  --ks-border-color-interface-inverted-interactive-disabled: var(--ks-border-color-interface-interactive-disabled-base);
+  --ks-border-color-interface-interactive-hover: var(--ks-border-color-interface-inverted-interactive-hover-base);
+  --ks-border-color-interface-inverted-interactive-hover: var(--ks-border-color-interface-interactive-hover-base);
+  --ks-border-color-interface-interactive-active: var(--ks-border-color-interface-inverted-interactive-active-base);
+  --ks-border-color-interface-inverted-interactive-active: var(--ks-border-color-interface-interactive-active-base);
+  --ks-border-color-interface-interactive-selected: var(--ks-border-color-interface-inverted-interactive-selected-base);
+  --ks-border-color-interface-inverted-interactive-selected: var(--ks-border-color-interface-interactive-selected-base);
+  --ks-border-color-card: var(--ks-border-color-card-inverted-base);
+  --ks-border-color-card-inverted: var(--ks-border-color-card-base);
+  --ks-border-color-card-interactive: var(--ks-border-color-card-inverted-interactive-base);
+  --ks-border-color-card-inverted-interactive: var(--ks-border-color-card-interactive-base);
+  --ks-border-color-card-interactive-disabled: var(--ks-border-color-card-inverted-interactive-disabled-base);
+  --ks-border-color-card-inverted-interactive-disabled: var(--ks-border-color-card-interactive-disabled-base);
+  --ks-border-color-card-interactive-hover: var(--ks-border-color-card-inverted-interactive-hover-base);
+  --ks-border-color-card-inverted-interactive-hover: var(--ks-border-color-card-interactive-hover-base);
+  --ks-border-color-card-interactive-active: var(--ks-border-color-card-inverted-interactive-active-base);
+  --ks-border-color-card-inverted-interactive-active: var(--ks-border-color-card-interactive-active-base);
+  --ks-border-color-card-interactive-selected: var(--ks-border-color-card-inverted-interactive-selected-base);
+  --ks-border-color-card-inverted-interactive-selected: var(--ks-border-color-card-interactive-selected-base);
+  --ks-border-color-primary: var(--ks-border-color-primary-inverted-base);
+  --ks-border-color-primary-inverted: var(--ks-border-color-primary-base);
+  --ks-border-color-primary-interactive: var(--ks-border-color-primary-inverted-interactive-base);
+  --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-interactive-base);
+  --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
+  --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
+  --ks-border-color-primary-interactive-active: var(--ks-border-color-primary-inverted-interactive-active-base);
+  --ks-border-color-primary-inverted-interactive-active: var(--ks-border-color-primary-interactive-active-base);
+  --ks-border-color-primary-interactive-selected: var(--ks-border-color-primary-inverted-interactive-selected-base);
+  --ks-border-color-primary-inverted-interactive-selected: var(--ks-border-color-primary-interactive-selected-base);
+  --ks-border-color-primary-translucent: var(--ks-border-color-primary-inverted-translucent-base);
+  --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-translucent-base);
+  --ks-border-color-positive: var(--ks-border-color-positive-inverted-base);
+  --ks-border-color-positive-inverted: var(--ks-border-color-positive-base);
+  --ks-border-color-positive-interactive: var(--ks-border-color-positive-inverted-interactive-base);
+  --ks-border-color-positive-inverted-interactive: var(--ks-border-color-positive-interactive-base);
+  --ks-border-color-positive-interactive-hover: var(--ks-border-color-positive-inverted-interactive-hover-base);
+  --ks-border-color-positive-inverted-interactive-hover: var(--ks-border-color-positive-interactive-hover-base);
+  --ks-border-color-positive-interactive-active: var(--ks-border-color-positive-inverted-interactive-active-base);
+  --ks-border-color-positive-inverted-interactive-active: var(--ks-border-color-positive-interactive-active-base);
+  --ks-border-color-positive-interactive-selected: var(--ks-border-color-positive-inverted-interactive-selected-base);
+  --ks-border-color-positive-inverted-interactive-selected: var(--ks-border-color-positive-interactive-selected-base);
+  --ks-border-color-positive-translucent: var(--ks-border-color-positive-inverted-translucent-base);
+  --ks-border-color-positive-inverted-translucent: var(--ks-border-color-positive-translucent-base);
+  --ks-border-color-informative: var(--ks-border-color-informative-inverted-base);
+  --ks-border-color-informative-inverted: var(--ks-border-color-informative-base);
+  --ks-border-color-informative-interactive: var(--ks-border-color-informative-inverted-interactive-base);
+  --ks-border-color-informative-inverted-interactive: var(--ks-border-color-informative-interactive-base);
+  --ks-border-color-informative-interactive-hover: var(--ks-border-color-informative-inverted-interactive-hover-base);
+  --ks-border-color-informative-inverted-interactive-hover: var(--ks-border-color-informative-interactive-hover-base);
+  --ks-border-color-informative-interactive-active: var(--ks-border-color-informative-inverted-interactive-active-base);
+  --ks-border-color-informative-inverted-interactive-active: var(--ks-border-color-informative-interactive-active-base);
+  --ks-border-color-informative-interactive-selected: var(
+    --ks-border-color-informative-inverted-interactive-selected-base
+  );
+  --ks-border-color-informative-inverted-interactive-selected: var(
+    --ks-border-color-informative-interactive-selected-base
+  );
+  --ks-border-color-informative-translucent: var(--ks-border-color-informative-inverted-translucent-base);
+  --ks-border-color-informative-inverted-translucent: var(--ks-border-color-informative-translucent-base);
+  --ks-border-color-notice: var(--ks-border-color-notice-inverted-base);
+  --ks-border-color-notice-inverted: var(--ks-border-color-notice-base);
+  --ks-border-color-notice-interactive: var(--ks-border-color-notice-inverted-interactive-base);
+  --ks-border-color-notice-inverted-interactive: var(--ks-border-color-notice-interactive-base);
+  --ks-border-color-notice-interactive-hover: var(--ks-border-color-notice-inverted-interactive-hover-base);
+  --ks-border-color-notice-inverted-interactive-hover: var(--ks-border-color-notice-interactive-hover-base);
+  --ks-border-color-notice-interactive-active: var(--ks-border-color-notice-inverted-interactive-active-base);
+  --ks-border-color-notice-inverted-interactive-active: var(--ks-border-color-notice-interactive-active-base);
+  --ks-border-color-notice-interactive-selected: var(--ks-border-color-notice-inverted-interactive-selected-base);
+  --ks-border-color-notice-inverted-interactive-selected: var(--ks-border-color-notice-interactive-selected-base);
+  --ks-border-color-notice-translucent: var(--ks-border-color-notice-inverted-translucent-base);
+  --ks-border-color-notice-inverted-translucent: var(--ks-border-color-notice-translucent-base);
+  --ks-border-color-negative: var(--ks-border-color-negative-inverted-base);
+  --ks-border-color-negative-inverted: var(--ks-border-color-negative-base);
+  --ks-border-color-negative-interactive: var(--ks-border-color-negative-inverted-interactive-base);
+  --ks-border-color-negative-inverted-interactive: var(--ks-border-color-negative-interactive-base);
+  --ks-border-color-negative-interactive-hover: var(--ks-border-color-negative-inverted-interactive-hover-base);
+  --ks-border-color-negative-inverted-interactive-hover: var(--ks-border-color-negative-interactive-hover-base);
+  --ks-border-color-negative-interactive-active: var(--ks-border-color-negative-inverted-interactive-active-base);
+  --ks-border-color-negative-inverted-interactive-active: var(--ks-border-color-negative-interactive-active-base);
+  --ks-border-color-negative-interactive-selected: var(--ks-border-color-negative-inverted-interactive-selected-base);
+  --ks-border-color-negative-inverted-interactive-selected: var(--ks-border-color-negative-interactive-selected-base);
+  --ks-border-color-negative-translucent: var(--ks-border-color-negative-inverted-translucent-base);
+  --ks-border-color-negative-inverted-translucent: var(--ks-border-color-negative-translucent-base);
+}
+
+:root,
+[ks-theme] {
+  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9);
+  --ks-background-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8);
+  --ks-background-color-bold-base: var(--ks-color-primary-to-bg-6);
+  --ks-background-color-bold-inverted-base: var(--ks-color-primary-inverted-to-bg-6);
+  --ks-background-color-clear-base: var(--ks-color-transparent);
+  --ks-background-color-clear-inverted-base: var(--ks-color-transparent);
+  --ks-background-color-clear-interactive-base: var(--ks-color-transparent);
+  --ks-background-color-clear-inverted-interactive-base: var(--ks-color-transparent);
+  --ks-background-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8);
+  --ks-background-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7);
+  --ks-background-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7);
+  --ks-background-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6);
+  --ks-background-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6);
+  --ks-background-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5);
+  --ks-background-color-default-base: var(--ks-color-bg);
+  --ks-background-color-default-inverted-base: var(--ks-color-bg-inverted);
+  --ks-background-color-interface-base: var(--ks-color-fg-alpha-9);
+  --ks-background-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-9);
+  --ks-background-color-interface-interactive-base: var(--ks-color-fg-alpha-8);
+  --ks-background-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-8);
+  --ks-background-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-9);
+  --ks-background-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-9);
+  --ks-background-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-7);
+  --ks-background-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-6);
+  --ks-background-color-interface-interactive-active-base: var(--ks-color-fg-alpha-6);
+  --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6);
+  --ks-background-color-interface-interactive-selected-base: var(--ks-color-primary);
+  --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
+  --ks-background-color-card-base: var(--ks-color-fg-alpha-9);
+  --ks-background-color-card-inverted-base: var(--ks-color-fg-inverted-to-bg-9);
+  --ks-background-color-card-interactive-base: var(--ks-color-bg);
+  --ks-background-color-card-inverted-interactive-base: var(--ks-color-fg-inverted-to-bg-9);
+  --ks-background-color-card-interactive-disabled-base: var(--ks-color-bg-alpha-7);
+  --ks-background-color-card-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-7);
+  --ks-background-color-card-interactive-hover-base: var(--ks-color-bg-alpha-9);
+  --ks-background-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-9);
+  --ks-background-color-card-interactive-active-base: var(--ks-color-bg-alpha-9);
+  --ks-background-color-card-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-9);
+  --ks-background-color-card-interactive-selected-base: var(--ks-color-bg);
+  --ks-background-color-card-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
+  --ks-background-color-primary-base: var(--ks-color-primary);
+  --ks-background-color-primary-inverted-base: var(--ks-color-primary-inverted);
+  --ks-background-color-primary-interactive-base: var(--ks-color-primary);
+  --ks-background-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
+  --ks-background-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-2);
+  --ks-background-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-2);
+  --ks-background-color-primary-interactive-active-base: var(--ks-color-primary-to-bg-2);
+  --ks-background-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-to-bg-2);
+  --ks-background-color-primary-interactive-selected-base: var(--ks-color-primary-to-bg-4);
+  --ks-background-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted-to-bg-4);
+  --ks-background-color-primary-translucent-base: var(--ks-color-primary-alpha-5);
+  --ks-background-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-5);
+  --ks-background-color-positive-base: var(--ks-color-positive);
+  --ks-background-color-positive-inverted-base: var(--ks-color-positive-inverted);
+  --ks-background-color-positive-interactive-base: var(--ks-color-positive);
+  --ks-background-color-positive-inverted-interactive-base: var(--ks-color-positive-inverted);
+  --ks-background-color-positive-interactive-hover-base: var(--ks-color-positive-to-bg-2);
+  --ks-background-color-positive-inverted-interactive-hover-base: var(--ks-color-positive-inverted-to-bg-2);
+  --ks-background-color-positive-interactive-active-base: var(--ks-color-positive-to-bg-2);
+  --ks-background-color-positive-inverted-interactive-active-base: var(--ks-color-positive-inverted-to-bg-2);
+  --ks-background-color-positive-interactive-selected-base: var(--ks-color-positive-to-bg-4);
+  --ks-background-color-positive-inverted-interactive-selected-base: var(--ks-color-positive-inverted-to-bg-4);
+  --ks-background-color-positive-translucent-base: var(--ks-color-positive-alpha-5);
+  --ks-background-color-positive-inverted-translucent-base: var(--ks-color-positive-inverted-alpha-5);
+  --ks-background-color-informative-base: var(--ks-color-informative);
+  --ks-background-color-informative-inverted-base: var(--ks-color-informative-inverted);
+  --ks-background-color-informative-interactive-base: var(--ks-color-informative);
+  --ks-background-color-informative-inverted-interactive-base: var(--ks-color-informative-inverted);
+  --ks-background-color-informative-interactive-hover-base: var(--ks-color-informative-to-bg-2);
+  --ks-background-color-informative-inverted-interactive-hover-base: var(--ks-color-informative-inverted-to-bg-2);
+  --ks-background-color-informative-interactive-active-base: var(--ks-color-informative-to-bg-2);
+  --ks-background-color-informative-inverted-interactive-active-base: var(--ks-color-informative-inverted-to-bg-2);
+  --ks-background-color-informative-interactive-selected-base: var(--ks-color-informative-to-bg-4);
+  --ks-background-color-informative-inverted-interactive-selected-base: var(--ks-color-informative-inverted-to-bg-4);
+  --ks-background-color-informative-translucent-base: var(--ks-color-informative-alpha-5);
+  --ks-background-color-informative-inverted-translucent-base: var(--ks-color-informative-inverted-alpha-5);
+  --ks-background-color-notice-base: var(--ks-color-notice);
+  --ks-background-color-notice-inverted-base: var(--ks-color-notice-inverted);
+  --ks-background-color-notice-interactive-base: var(--ks-color-notice);
+  --ks-background-color-notice-inverted-interactive-base: var(--ks-color-notice-inverted);
+  --ks-background-color-notice-interactive-hover-base: var(--ks-color-notice-to-bg-2);
+  --ks-background-color-notice-inverted-interactive-hover-base: var(--ks-color-notice-inverted-to-bg-2);
+  --ks-background-color-notice-interactive-active-base: var(--ks-color-notice-to-bg-2);
+  --ks-background-color-notice-inverted-interactive-active-base: var(--ks-color-notice-inverted-to-bg-2);
+  --ks-background-color-notice-interactive-selected-base: var(--ks-color-notice-to-bg-4);
+  --ks-background-color-notice-inverted-interactive-selected-base: var(--ks-color-notice-inverted-to-bg-4);
+  --ks-background-color-notice-translucent-base: var(--ks-color-notice-alpha-5);
+  --ks-background-color-notice-inverted-translucent-base: var(--ks-color-notice-inverted-alpha-5);
+  --ks-background-color-negative-base: var(--ks-color-negative);
+  --ks-background-color-negative-inverted-base: var(--ks-color-negative-inverted);
+  --ks-background-color-negative-interactive-base: var(--ks-color-negative);
+  --ks-background-color-negative-inverted-interactive-base: var(--ks-color-negative-inverted);
+  --ks-background-color-negative-interactive-hover-base: var(--ks-color-negative-to-bg-2);
+  --ks-background-color-negative-inverted-interactive-hover-base: var(--ks-color-negative-inverted-to-bg-2);
+  --ks-background-color-negative-interactive-active-base: var(--ks-color-negative-to-bg-2);
+  --ks-background-color-negative-inverted-interactive-active-base: var(--ks-color-negative-inverted-to-bg-2);
+  --ks-background-color-negative-interactive-selected-base: var(--ks-color-negative-to-bg-4);
+  --ks-background-color-negative-inverted-interactive-selected-base: var(--ks-color-negative-inverted-to-bg-4);
+  --ks-background-color-negative-translucent-base: var(--ks-color-negative-alpha-5);
+  --ks-background-color-negative-inverted-translucent-base: var(--ks-color-negative-inverted-alpha-5);
+}
+
+:root {
+  --ks-background-color-accent: var(--ks-background-color-accent-base);
+  --ks-background-color-accent-inverted: var(--ks-background-color-accent-inverted-base);
+  --ks-background-color-bold: var(--ks-background-color-bold-base);
+  --ks-background-color-bold-inverted: var(--ks-background-color-bold-inverted-base);
+  --ks-background-color-clear: var(--ks-background-color-clear-base);
+  --ks-background-color-clear-inverted: var(--ks-background-color-clear-inverted-base);
+  --ks-background-color-clear-interactive: var(--ks-background-color-clear-interactive-base);
+  --ks-background-color-clear-inverted-interactive: var(--ks-background-color-clear-inverted-interactive-base);
+  --ks-background-color-clear-interactive-hover: var(--ks-background-color-clear-interactive-hover-base);
+  --ks-background-color-clear-inverted-interactive-hover: var(
+    --ks-background-color-clear-inverted-interactive-hover-base
+  );
+  --ks-background-color-clear-interactive-active: var(--ks-background-color-clear-interactive-active-base);
+  --ks-background-color-clear-inverted-interactive-active: var(
+    --ks-background-color-clear-inverted-interactive-active-base
+  );
+  --ks-background-color-clear-interactive-selected: var(--ks-background-color-clear-interactive-selected-base);
+  --ks-background-color-clear-inverted-interactive-selected: var(
+    --ks-background-color-clear-inverted-interactive-selected-base
+  );
+  --ks-background-color-default: var(--ks-background-color-default-base);
+  --ks-background-color-default-inverted: var(--ks-background-color-default-inverted-base);
+  --ks-background-color-interface: var(--ks-background-color-interface-base);
+  --ks-background-color-interface-inverted: var(--ks-background-color-interface-inverted-base);
+  --ks-background-color-interface-interactive: var(--ks-background-color-interface-interactive-base);
+  --ks-background-color-interface-inverted-interactive: var(--ks-background-color-interface-inverted-interactive-base);
+  --ks-background-color-interface-interactive-disabled: var(--ks-background-color-interface-interactive-disabled-base);
+  --ks-background-color-interface-inverted-interactive-disabled: var(
+    --ks-background-color-interface-inverted-interactive-disabled-base
+  );
+  --ks-background-color-interface-interactive-hover: var(--ks-background-color-interface-interactive-hover-base);
+  --ks-background-color-interface-inverted-interactive-hover: var(
+    --ks-background-color-interface-inverted-interactive-hover-base
+  );
+  --ks-background-color-interface-interactive-active: var(--ks-background-color-interface-interactive-active-base);
+  --ks-background-color-interface-inverted-interactive-active: var(
+    --ks-background-color-interface-inverted-interactive-active-base
+  );
+  --ks-background-color-interface-interactive-selected: var(--ks-background-color-interface-interactive-selected-base);
+  --ks-background-color-interface-inverted-interactive-selected: var(
+    --ks-background-color-interface-inverted-interactive-selected-base
+  );
+  --ks-background-color-card: var(--ks-background-color-card-base);
+  --ks-background-color-card-inverted: var(--ks-background-color-card-inverted-base);
+  --ks-background-color-card-interactive: var(--ks-background-color-card-interactive-base);
+  --ks-background-color-card-inverted-interactive: var(--ks-background-color-card-inverted-interactive-base);
+  --ks-background-color-card-interactive-disabled: var(--ks-background-color-card-interactive-disabled-base);
+  --ks-background-color-card-inverted-interactive-disabled: var(
+    --ks-background-color-card-inverted-interactive-disabled-base
+  );
+  --ks-background-color-card-interactive-hover: var(--ks-background-color-card-interactive-hover-base);
+  --ks-background-color-card-inverted-interactive-hover: var(
+    --ks-background-color-card-inverted-interactive-hover-base
+  );
+  --ks-background-color-card-interactive-active: var(--ks-background-color-card-interactive-active-base);
+  --ks-background-color-card-inverted-interactive-active: var(
+    --ks-background-color-card-inverted-interactive-active-base
+  );
+  --ks-background-color-card-interactive-selected: var(--ks-background-color-card-interactive-selected-base);
+  --ks-background-color-card-inverted-interactive-selected: var(
+    --ks-background-color-card-inverted-interactive-selected-base
+  );
+  --ks-background-color-primary: var(--ks-background-color-primary-base);
+  --ks-background-color-primary-inverted: var(--ks-background-color-primary-inverted-base);
+  --ks-background-color-primary-interactive: var(--ks-background-color-primary-interactive-base);
+  --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-inverted-interactive-base);
+  --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
+  --ks-background-color-primary-inverted-interactive-hover: var(
+    --ks-background-color-primary-inverted-interactive-hover-base
+  );
+  --ks-background-color-primary-interactive-active: var(--ks-background-color-primary-interactive-active-base);
+  --ks-background-color-primary-inverted-interactive-active: var(
+    --ks-background-color-primary-inverted-interactive-active-base
+  );
+  --ks-background-color-primary-interactive-selected: var(--ks-background-color-primary-interactive-selected-base);
+  --ks-background-color-primary-inverted-interactive-selected: var(
+    --ks-background-color-primary-inverted-interactive-selected-base
+  );
+  --ks-background-color-primary-translucent: var(--ks-background-color-primary-translucent-base);
+  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-inverted-translucent-base);
+  --ks-background-color-positive: var(--ks-background-color-positive-base);
+  --ks-background-color-positive-inverted: var(--ks-background-color-positive-inverted-base);
+  --ks-background-color-positive-interactive: var(--ks-background-color-positive-interactive-base);
+  --ks-background-color-positive-inverted-interactive: var(--ks-background-color-positive-inverted-interactive-base);
+  --ks-background-color-positive-interactive-hover: var(--ks-background-color-positive-interactive-hover-base);
+  --ks-background-color-positive-inverted-interactive-hover: var(
+    --ks-background-color-positive-inverted-interactive-hover-base
+  );
+  --ks-background-color-positive-interactive-active: var(--ks-background-color-positive-interactive-active-base);
+  --ks-background-color-positive-inverted-interactive-active: var(
+    --ks-background-color-positive-inverted-interactive-active-base
+  );
+  --ks-background-color-positive-interactive-selected: var(--ks-background-color-positive-interactive-selected-base);
+  --ks-background-color-positive-inverted-interactive-selected: var(
+    --ks-background-color-positive-inverted-interactive-selected-base
+  );
+  --ks-background-color-positive-translucent: var(--ks-background-color-positive-translucent-base);
+  --ks-background-color-positive-inverted-translucent: var(--ks-background-color-positive-inverted-translucent-base);
+  --ks-background-color-informative: var(--ks-background-color-informative-base);
+  --ks-background-color-informative-inverted: var(--ks-background-color-informative-inverted-base);
+  --ks-background-color-informative-interactive: var(--ks-background-color-informative-interactive-base);
+  --ks-background-color-informative-inverted-interactive: var(
+    --ks-background-color-informative-inverted-interactive-base
+  );
+  --ks-background-color-informative-interactive-hover: var(--ks-background-color-informative-interactive-hover-base);
+  --ks-background-color-informative-inverted-interactive-hover: var(
+    --ks-background-color-informative-inverted-interactive-hover-base
+  );
+  --ks-background-color-informative-interactive-active: var(--ks-background-color-informative-interactive-active-base);
+  --ks-background-color-informative-inverted-interactive-active: var(
+    --ks-background-color-informative-inverted-interactive-active-base
+  );
+  --ks-background-color-informative-interactive-selected: var(
+    --ks-background-color-informative-interactive-selected-base
+  );
+  --ks-background-color-informative-inverted-interactive-selected: var(
+    --ks-background-color-informative-inverted-interactive-selected-base
+  );
+  --ks-background-color-informative-translucent: var(--ks-background-color-informative-translucent-base);
+  --ks-background-color-informative-inverted-translucent: var(
+    --ks-background-color-informative-inverted-translucent-base
+  );
+  --ks-background-color-notice: var(--ks-background-color-notice-base);
+  --ks-background-color-notice-inverted: var(--ks-background-color-notice-inverted-base);
+  --ks-background-color-notice-interactive: var(--ks-background-color-notice-interactive-base);
+  --ks-background-color-notice-inverted-interactive: var(--ks-background-color-notice-inverted-interactive-base);
+  --ks-background-color-notice-interactive-hover: var(--ks-background-color-notice-interactive-hover-base);
+  --ks-background-color-notice-inverted-interactive-hover: var(
+    --ks-background-color-notice-inverted-interactive-hover-base
+  );
+  --ks-background-color-notice-interactive-active: var(--ks-background-color-notice-interactive-active-base);
+  --ks-background-color-notice-inverted-interactive-active: var(
+    --ks-background-color-notice-inverted-interactive-active-base
+  );
+  --ks-background-color-notice-interactive-selected: var(--ks-background-color-notice-interactive-selected-base);
+  --ks-background-color-notice-inverted-interactive-selected: var(
+    --ks-background-color-notice-inverted-interactive-selected-base
+  );
+  --ks-background-color-notice-translucent: var(--ks-background-color-notice-translucent-base);
+  --ks-background-color-notice-inverted-translucent: var(--ks-background-color-notice-inverted-translucent-base);
+  --ks-background-color-negative: var(--ks-background-color-negative-base);
+  --ks-background-color-negative-inverted: var(--ks-background-color-negative-inverted-base);
+  --ks-background-color-negative-interactive: var(--ks-background-color-negative-interactive-base);
+  --ks-background-color-negative-inverted-interactive: var(--ks-background-color-negative-inverted-interactive-base);
+  --ks-background-color-negative-interactive-hover: var(--ks-background-color-negative-interactive-hover-base);
+  --ks-background-color-negative-inverted-interactive-hover: var(
+    --ks-background-color-negative-inverted-interactive-hover-base
+  );
+  --ks-background-color-negative-interactive-active: var(--ks-background-color-negative-interactive-active-base);
+  --ks-background-color-negative-inverted-interactive-active: var(
+    --ks-background-color-negative-inverted-interactive-active-base
+  );
+  --ks-background-color-negative-interactive-selected: var(--ks-background-color-negative-interactive-selected-base);
+  --ks-background-color-negative-inverted-interactive-selected: var(
+    --ks-background-color-negative-inverted-interactive-selected-base
+  );
+  --ks-background-color-negative-translucent: var(--ks-background-color-negative-translucent-base);
+  --ks-background-color-negative-inverted-translucent: var(--ks-background-color-negative-inverted-translucent-base);
+}
+
+[ks-inverted=true] {
+  --ks-background-color-accent: var(--ks-background-color-accent-inverted-base);
+  --ks-background-color-accent-inverted: var(--ks-background-color-accent-base);
+  --ks-background-color-bold: var(--ks-background-color-bold-inverted-base);
+  --ks-background-color-bold-inverted: var(--ks-background-color-bold-base);
+  --ks-background-color-clear: var(--ks-background-color-clear-inverted-base);
+  --ks-background-color-clear-inverted: var(--ks-background-color-clear-base);
+  --ks-background-color-clear-interactive: var(--ks-background-color-clear-inverted-interactive-base);
+  --ks-background-color-clear-inverted-interactive: var(--ks-background-color-clear-interactive-base);
+  --ks-background-color-clear-interactive-hover: var(--ks-background-color-clear-inverted-interactive-hover-base);
+  --ks-background-color-clear-inverted-interactive-hover: var(--ks-background-color-clear-interactive-hover-base);
+  --ks-background-color-clear-interactive-active: var(--ks-background-color-clear-inverted-interactive-active-base);
+  --ks-background-color-clear-inverted-interactive-active: var(--ks-background-color-clear-interactive-active-base);
+  --ks-background-color-clear-interactive-selected: var(--ks-background-color-clear-inverted-interactive-selected-base);
+  --ks-background-color-clear-inverted-interactive-selected: var(--ks-background-color-clear-interactive-selected-base);
+  --ks-background-color-default: var(--ks-background-color-default-inverted-base);
+  --ks-background-color-default-inverted: var(--ks-background-color-default-base);
+  --ks-background-color-interface: var(--ks-background-color-interface-inverted-base);
+  --ks-background-color-interface-inverted: var(--ks-background-color-interface-base);
+  --ks-background-color-interface-interactive: var(--ks-background-color-interface-inverted-interactive-base);
+  --ks-background-color-interface-inverted-interactive: var(--ks-background-color-interface-interactive-base);
+  --ks-background-color-interface-interactive-disabled: var(
+    --ks-background-color-interface-inverted-interactive-disabled-base
+  );
+  --ks-background-color-interface-inverted-interactive-disabled: var(
+    --ks-background-color-interface-interactive-disabled-base
+  );
+  --ks-background-color-interface-interactive-hover: var(
+    --ks-background-color-interface-inverted-interactive-hover-base
+  );
+  --ks-background-color-interface-inverted-interactive-hover: var(
+    --ks-background-color-interface-interactive-hover-base
+  );
+  --ks-background-color-interface-interactive-active: var(
+    --ks-background-color-interface-inverted-interactive-active-base
+  );
+  --ks-background-color-interface-inverted-interactive-active: var(
+    --ks-background-color-interface-interactive-active-base
+  );
+  --ks-background-color-interface-interactive-selected: var(
+    --ks-background-color-interface-inverted-interactive-selected-base
+  );
+  --ks-background-color-interface-inverted-interactive-selected: var(
+    --ks-background-color-interface-interactive-selected-base
+  );
+  --ks-background-color-card: var(--ks-background-color-card-inverted-base);
+  --ks-background-color-card-inverted: var(--ks-background-color-card-base);
+  --ks-background-color-card-interactive: var(--ks-background-color-card-inverted-interactive-base);
+  --ks-background-color-card-inverted-interactive: var(--ks-background-color-card-interactive-base);
+  --ks-background-color-card-interactive-disabled: var(--ks-background-color-card-inverted-interactive-disabled-base);
+  --ks-background-color-card-inverted-interactive-disabled: var(--ks-background-color-card-interactive-disabled-base);
+  --ks-background-color-card-interactive-hover: var(--ks-background-color-card-inverted-interactive-hover-base);
+  --ks-background-color-card-inverted-interactive-hover: var(--ks-background-color-card-interactive-hover-base);
+  --ks-background-color-card-interactive-active: var(--ks-background-color-card-inverted-interactive-active-base);
+  --ks-background-color-card-inverted-interactive-active: var(--ks-background-color-card-interactive-active-base);
+  --ks-background-color-card-interactive-selected: var(--ks-background-color-card-inverted-interactive-selected-base);
+  --ks-background-color-card-inverted-interactive-selected: var(--ks-background-color-card-interactive-selected-base);
+  --ks-background-color-primary: var(--ks-background-color-primary-inverted-base);
+  --ks-background-color-primary-inverted: var(--ks-background-color-primary-base);
+  --ks-background-color-primary-interactive: var(--ks-background-color-primary-inverted-interactive-base);
+  --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-interactive-base);
+  --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-inverted-interactive-hover-base);
+  --ks-background-color-primary-inverted-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
+  --ks-background-color-primary-interactive-active: var(--ks-background-color-primary-inverted-interactive-active-base);
+  --ks-background-color-primary-inverted-interactive-active: var(--ks-background-color-primary-interactive-active-base);
+  --ks-background-color-primary-interactive-selected: var(
+    --ks-background-color-primary-inverted-interactive-selected-base
+  );
+  --ks-background-color-primary-inverted-interactive-selected: var(
+    --ks-background-color-primary-interactive-selected-base
+  );
+  --ks-background-color-primary-translucent: var(--ks-background-color-primary-inverted-translucent-base);
+  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-translucent-base);
+  --ks-background-color-positive: var(--ks-background-color-positive-inverted-base);
+  --ks-background-color-positive-inverted: var(--ks-background-color-positive-base);
+  --ks-background-color-positive-interactive: var(--ks-background-color-positive-inverted-interactive-base);
+  --ks-background-color-positive-inverted-interactive: var(--ks-background-color-positive-interactive-base);
+  --ks-background-color-positive-interactive-hover: var(--ks-background-color-positive-inverted-interactive-hover-base);
+  --ks-background-color-positive-inverted-interactive-hover: var(--ks-background-color-positive-interactive-hover-base);
+  --ks-background-color-positive-interactive-active: var(
+    --ks-background-color-positive-inverted-interactive-active-base
+  );
+  --ks-background-color-positive-inverted-interactive-active: var(
+    --ks-background-color-positive-interactive-active-base
+  );
+  --ks-background-color-positive-interactive-selected: var(
+    --ks-background-color-positive-inverted-interactive-selected-base
+  );
+  --ks-background-color-positive-inverted-interactive-selected: var(
+    --ks-background-color-positive-interactive-selected-base
+  );
+  --ks-background-color-positive-translucent: var(--ks-background-color-positive-inverted-translucent-base);
+  --ks-background-color-positive-inverted-translucent: var(--ks-background-color-positive-translucent-base);
+  --ks-background-color-informative: var(--ks-background-color-informative-inverted-base);
+  --ks-background-color-informative-inverted: var(--ks-background-color-informative-base);
+  --ks-background-color-informative-interactive: var(--ks-background-color-informative-inverted-interactive-base);
+  --ks-background-color-informative-inverted-interactive: var(--ks-background-color-informative-interactive-base);
+  --ks-background-color-informative-interactive-hover: var(
+    --ks-background-color-informative-inverted-interactive-hover-base
+  );
+  --ks-background-color-informative-inverted-interactive-hover: var(
+    --ks-background-color-informative-interactive-hover-base
+  );
+  --ks-background-color-informative-interactive-active: var(
+    --ks-background-color-informative-inverted-interactive-active-base
+  );
+  --ks-background-color-informative-inverted-interactive-active: var(
+    --ks-background-color-informative-interactive-active-base
+  );
+  --ks-background-color-informative-interactive-selected: var(
+    --ks-background-color-informative-inverted-interactive-selected-base
+  );
+  --ks-background-color-informative-inverted-interactive-selected: var(
+    --ks-background-color-informative-interactive-selected-base
+  );
+  --ks-background-color-informative-translucent: var(--ks-background-color-informative-inverted-translucent-base);
+  --ks-background-color-informative-inverted-translucent: var(--ks-background-color-informative-translucent-base);
+  --ks-background-color-notice: var(--ks-background-color-notice-inverted-base);
+  --ks-background-color-notice-inverted: var(--ks-background-color-notice-base);
+  --ks-background-color-notice-interactive: var(--ks-background-color-notice-inverted-interactive-base);
+  --ks-background-color-notice-inverted-interactive: var(--ks-background-color-notice-interactive-base);
+  --ks-background-color-notice-interactive-hover: var(--ks-background-color-notice-inverted-interactive-hover-base);
+  --ks-background-color-notice-inverted-interactive-hover: var(--ks-background-color-notice-interactive-hover-base);
+  --ks-background-color-notice-interactive-active: var(--ks-background-color-notice-inverted-interactive-active-base);
+  --ks-background-color-notice-inverted-interactive-active: var(--ks-background-color-notice-interactive-active-base);
+  --ks-background-color-notice-interactive-selected: var(
+    --ks-background-color-notice-inverted-interactive-selected-base
+  );
+  --ks-background-color-notice-inverted-interactive-selected: var(
+    --ks-background-color-notice-interactive-selected-base
+  );
+  --ks-background-color-notice-translucent: var(--ks-background-color-notice-inverted-translucent-base);
+  --ks-background-color-notice-inverted-translucent: var(--ks-background-color-notice-translucent-base);
+  --ks-background-color-negative: var(--ks-background-color-negative-inverted-base);
+  --ks-background-color-negative-inverted: var(--ks-background-color-negative-base);
+  --ks-background-color-negative-interactive: var(--ks-background-color-negative-inverted-interactive-base);
+  --ks-background-color-negative-inverted-interactive: var(--ks-background-color-negative-interactive-base);
+  --ks-background-color-negative-interactive-hover: var(--ks-background-color-negative-inverted-interactive-hover-base);
+  --ks-background-color-negative-inverted-interactive-hover: var(--ks-background-color-negative-interactive-hover-base);
+  --ks-background-color-negative-interactive-active: var(
+    --ks-background-color-negative-inverted-interactive-active-base
+  );
+  --ks-background-color-negative-inverted-interactive-active: var(
+    --ks-background-color-negative-interactive-active-base
+  );
+  --ks-background-color-negative-interactive-selected: var(
+    --ks-background-color-negative-inverted-interactive-selected-base
+  );
+  --ks-background-color-negative-inverted-interactive-selected: var(
+    --ks-background-color-negative-interactive-selected-base
+  );
+  --ks-background-color-negative-translucent: var(--ks-background-color-negative-inverted-translucent-base);
+  --ks-background-color-negative-inverted-translucent: var(--ks-background-color-negative-translucent-base);
+}
 
 .l-container--blog-teaser {
   /* stylelint-disable-next-line property-no-unknown */
@@ -355,7 +4349,7 @@ h3 {
   --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
   --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
-  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
+  --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
   --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
   --dsa-blog-teaser__copy--margin-top: 0.5em;
   --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
@@ -387,7 +4381,7 @@ h3 {
   --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
   --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
   --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
-  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--ks-text-color-copy));
 }
 .dsa-blog-teaser.c-post-teaser .c-tag-label {
   --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));
@@ -440,85 +4434,144 @@ h3 {
   margin-bottom: var(--dsa-blog-teaser__topic--margin-bottom, 0.35em);
 }
 
+.c-form-check-group {
+  --dsa-check-group__label--color: var(--ks-text-color-interface);
+  --dsa-check-group__label--font: var(--ks-font-interface-s);
+  --dsa-check-group__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-check-group__label--padding-bottom: 0.25em;
+}
+
 .c-form-check {
-  --dsa-form-check--border: var(--ks-border-width-default) solid;
-  --dsa-form-check--border-color: var(--ks-border-color-interface-interactive);
-  --dsa-form-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
-  --dsa-form-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
-  --dsa-form-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
-  --dsa-form-check--background: var(--ks-background-color-interface-interactive);
-  --dsa-form-check--background_checked: var(--ks-color-secondary);
-  --dsa-form-check--shadow_focus: 0 0 4px 0;
-  --dsa-form-check__checkmark--color: var(--dsa-text-color-on-primary);
+  --dsa-check--background: transparent;
+  --dsa-check--background_checked: var(--ks-color-primary);
+  --dsa-check--background_active: transparent;
+  --dsa-check--border: var(--ks-border-width-default) solid;
+  --dsa-check--border-color: var(--ks-border-color-interface-interactive);
+  --dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
+  --dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
+  --dsa-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
+  --dsa-check--size: 1.5em;
+  --dsa-check--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
+  --dsa-check_box--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-check--size) / 4));
+  --dsa-check_radio--border-radius: var(--ks-border-radius-circle);
+  --dsa-check_radio__checkmark--size: calc(var(--dsa-check--size) * 0.5);
+  --dsa-check__checkmark--color: var(--dsa-text-color-on-primary);
+  --dsa-check__label--font: var(--ks-font-interface-s);
+  --dsa-check__label--font-weight: var(--ks-font-weight-regular);
+  --dsa-check__label--color: var(--ks-text-color-interface);
+  --dsa-check__label--margin-left: 0.5em;
 }
 
 .c-form-field {
-  --dsa-form-field--color: var(--ks-text-color-interface);
-  --dsa-form-field--border: var(--ks-border-width-default) solid;
-  --dsa-form-field--border-color: var(--ks-border-color-interface-interactive);
-  --dsa-form-field--border-color_hover: var(--ks-border-color-interface-interactive-hover);
-  --dsa-form-field--border-color_focus: var(--ks-border-color-interface-interactive-active);
-  --dsa-form-field--background: var(--ks-background-color-interface-interactive);
-  --dsa-form-field--shadow_focus: 0 0 4px 0;
-  --dsa-form-field__placeholder--color: var(--ks-color-fg-alpha-5);
+  --dsa-input--color: var(--ks-text-color-interface);
+  --dsa-input--border: var(--ks-border-width-default) solid;
+  --dsa-input--border-color: var(--ks-border-color-interface-interactive);
+  --dsa-input--border-color_hover: var(--ks-border-color-interface-interactive-hover);
+  --dsa-input--border-color_focus: var(--ks-border-color-interface-interactive-active);
+  --dsa-input--border-color_active: var(--ks-border-color-interface-interactive-active);
+  --dsa-input__label--padding-bottom: 0.25em;
+  --dsa-input__label--color: var(--ks-text-color-interface);
+  --dsa-input__label--font: var(--ks-font-interface-s);
+  --dsa-input__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-input--font: var(--ks-font-interface-s);
+  --dsa-input--background: transparent;
+  --dsa-input--background_focus: transparent;
+  --dsa-input--padding: 0.4rem 0.75rem 0.35rem;
+  --dsa-input--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
+  --dsa-input__placeholder--color: var(--ks-color-fg-alpha-5);
 }
 
 :root .c-form-check, [ks-inverted] .c-form-check, [ks-theme] .c-form-check {
-  --c-form-check_box--size: var(--dsa-form-check--size, 1rem);
-  --c-form-check_box--border: var(--dsa-form-check--border, var(--ks-border-width-default)) solid;
-  --c-form-check_box--border-color: var(--dsa-form-check--border-color, var(--ks-border-color-interface-interactive));
+  --c-form-check_box--size: var(--dsa-check--size, 1.125em);
+  --c-form-check_box--border: var(--dsa-check--border, var(--ks-border-width-default) solid);
+  --c-form-check_box--border-color: var(--dsa-check--border-color, var(--ks-border-color-interface-interactive));
   --c-form-check_box-hover--border-color: var(
-    --dsa-form-check--border-color_hover,
+    --dsa-check--border-color_hover,
     var(--ks-border-color-interface-interactive-hover)
   );
   --c-form-check_box-focus--border-color: var(
-    --dsa-form-check--border-color_focus,
+    --dsa-check--border-color_focus,
     var(--ks-border-color-interface-interactive-active)
   );
   --c-form-check_box-checked--border-color: var(
-    --dsa-form-check--border-color_checked,
+    --dsa-check--border-color_checked,
     var(--ks-border-color-interface-interactive-selected)
   );
-  --c-form-check_box--background: var(--dsa-form-check--background, var(--ks-background-color-interface-interactive));
+  --c-form-check_box--background: var(--dsa-check--background, var(--ks-background-color-interface-interactive));
   --c-form-check_box-checked--background: var(
-    --dsa-form-check--background_checked,
+    --dsa-check--background_checked,
     var(--ks-background-color-interface-interactive-selected)
   );
-  --c-form-check_box-focus--shadow: var(--dsa-form-check--shadow_focus, 0 0 4px 0);
-  --c-form-check_checkmark--color: var(--dsa-form-check__checkmark--color, var(--dsa-text-color-on-primary));
+  --c-form-check_checkmark--color: var(--dsa-check__checkmark--color, var(--dsa-text-color-on-primary));
+  --c-form-check_box--border-radius: var(--dsa-check--border-radius, 2px);
+  --c-form-check_box-focus--shadow: var(--dsa-check--shadow_focus, 0 0 4px 0);
+  --c-form-check_checkmark--size: var(--dsa-check_radio__checkmark--size, calc(var(--dsa-check--size) * 0.5));
+  font: var(--dsa-check__label--font, var(--ks-font-interface-s));
+  font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
+  color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive));
+}
+:root .c-form-check__label, [ks-inverted] .c-form-check__label, [ks-theme] .c-form-check__label {
+  margin-left: var(--dsa-check__label--margin-left, 0.5em);
+}
+:root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
+  --c-form-check_box--border-radius: var(
+    --dsa-check_box--border-radius,
+    min(4px, calc(var(--dsa-check--size) / 4))
+  );
+}
+:root .c-form-check--radio, [ks-inverted] .c-form-check--radio, [ks-theme] .c-form-check--radio {
+  --c-form-check_box--border-radius: var(--dsa-check_radio--border-radius, var(--ks-border-radius-circle));
+}
+:root .c-form-check-group__label, [ks-inverted] .c-form-check-group__label, [ks-theme] .c-form-check-group__label {
+  color: var(--dsa-check-group__label--color, var(--ks-text-color-interface));
+  font: var(--dsa-check-group__label--font, var(--ks-font-interface-s));
+  font-weight: var(--dsa-check-group__label--font-weight, var(--ks-font-weight-semi-bold));
+  padding-bottom: var(--dsa-check-group__label--padding-bottom, 0.25em);
 }
 :root .c-form-field, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
-  --c-form-field--border: var(--dsa-form-field--border, var(--ks-border-width-default)) solid;
-  --c-form-field--border-color: var(--dsa-form-field--border-color, var(--ks-border-color-interface-interactive));
+  --c-form-field_label--padding: 0 0 var(--dsa-input__label--padding-bottom, 0.25em) 0;
+  --c-form-field--border: var(--dsa-input--border, var(--ks-border-width-default) solid);
+  --c-form-field--border-color: var(--dsa-input--border-color, var(--ks-border-color-interface-interactive));
   --c-form-field-hover--border-color: var(
-    --dsa-form-field--border-color_hover,
+    --dsa-input--border-color_hover,
     var(--ks-border-color-interface-interactive-hover)
   );
   --c-form-field-focus--border-color: var(
-    --dsa-form-field--border-color_focus,
+    --dsa-input--border-color_focus,
     var(--ks-border-color-interface-interactive-active)
   );
-  --c-form-field--background: var(--dsa-form-field--background, var(--ks-background-color-interface-interactive));
-  --c-form-field_focus--shadow: var(--dsa-form-field--shadow_focus, 0 0 4px 0);
+  --c-form-field--background: var(--dsa-input--background, var(--ks-background-color-interface-interactive));
+  --c-form-field_focus--shadow: var(--dsa-input--shadow_focus, 0 0 4px 0);
   --c-form-field--background-disabled: var(
     --ks-background-color-interface-interactive-disabled,
     var(--ks-background-color-interface-interactive-disabled)
   );
-  --c-form-field--color: var(--dsa-form-field--color, var(--ks-text-color-interface));
+  --c-form-field--color: var(--dsa-input--color, var(--ks-text-color-interface));
   --c-form-field_hover--border-color: var(
-    --dsa-form-field--border-color_hover,
+    --dsa-input--border-color_hover,
     var(--ks-border-color-interface-interactive-hover)
   );
   --c-form-field_focus--border-color: var(
-    --dsa-form-field--border-color_active,
+    --dsa-input--border-color_active,
     var(--ks-border-color-interface-interactive-active)
   );
-  --c-form-field_focus--shadow: 0 0 4px -1px;
   --c-form-field_icon--size: calc(var(--ks-line-height-interface-m) * 0.75em);
   --c-form-field_icon--color: var(--ks-color-fg-alpha-3);
+  --c-form-field_label--color: var(--dsa-input__label--color, var(--ks-text-color-interface));
+}
+:root .c-form-field__input, [ks-inverted] .c-form-field__input, [ks-theme] .c-form-field__input {
+  font: var(--dsa-input--font, var(--ks-font-interface-m));
+  padding: var(--dsa-input--padding, 0.4rem 0.75rem 0.35rem);
 }
 :root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder {
-  color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
+  color: var(--dsa-input__placeholder--color, var(--ks-color-fg-alpha-5));
+}
+:root .c-form-field__input:focus, [ks-inverted] .c-form-field__input:focus, [ks-theme] .c-form-field__input:focus {
+  background-color: var(--dsa-input--background_focus, var(--ks-background-color-interface-interactive-active));
+}
+:root .c-form-field__label, [ks-inverted] .c-form-field__label, [ks-theme] .c-form-field__label {
+  font: var(--dsa-input__label--font, var(--ks-font-interface-s));
+  font-weight: var(--dsa-input__label--font-weight, var(--ks-font-weight-regular));
 }
 
 :root {
@@ -554,141 +4607,13 @@ h3 {
   --c-lightbox--error-text-color: var(--ks-color-error) !important;
 }
 
-@font-face {
-  font-family: "Fredoka";
-  src: url("static/fonts/dsa/Fredoka-Regular.woff") format("woff2"), url("static/fonts/dsa/Fredoka-Regular.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Fredoka";
-  src: url("static/fonts/dsa/Fredoka-SemiBold.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-SemiBold.woff") format("woff");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Fredoka";
-  src: url("static/fonts/dsa/Fredoka-Medium.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Medium.woff") format("woff");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Fredoka";
-  src: url("static/fonts/dsa/Fredoka-Light.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Light.woff") format("woff");
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Fredoka";
-  src: url("static/fonts/dsa/Fredoka-Bold.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Bold.woff") format("woff");
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Mulish";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("static/fonts/dsa/Mulish-Regular.woff2") format("woff2"), url("static/fonts/dsa/Mulish-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Mulish";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("static/fonts/dsa/Mulish-600.woff2") format("woff2"), url("static/fonts/dsa/Mulish-600.woff") format("woff"); /* Legacy iOS */
-}
-@font-face {
-  font-family: "Mulish";
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("static/fonts/dsa/Mulish-800.woff2") format("woff2"), url("static/fonts/dsa/Mulish-800.woff") format("woff");
-}
-@font-face {
-  font-family: "Mulish";
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("static/fonts/dsa/Mulish-300.woff2") format("woff2"), url("static/fonts/dsa/Mulish-300.woff") format("woff");
-}
-@font-face {
-  font-family: "NovelPro";
-  src: url("static/fonts/business/novelpro-regular.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "NovelSansPro";
-  src: url("static/fonts/business/novelsanspro-regular.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "NovelSansPro";
-  src: url("static/fonts/business/novelsanspro-bold.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "TeleNeo";
-  src: url("static/fonts/telekom/teleneo-thin-woff-data.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "TeleNeo";
-  src: url("static/fonts/telekom/teleneo-medium-woff-data.woff") format("woff");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "TeleNeo";
-  src: url("static/fonts/telekom/teleneo-bold-woff-data.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "TeleNeo";
-  src: url("static/fonts/telekom/teleneo-extrabold-woff-data.woff") format("woff");
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Google Sans 18pt";
-  font-style: normal;
-  font-weight: normal;
-  src: url("static/fonts/google/google-sans-18pt.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Google Sans Display";
-  font-style: normal;
-  font-weight: normal;
-  src: url("static/fonts/google/google-sans-display.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Google Sans Text";
-  font-style: normal;
-  font-weight: normal;
-  src: url("static/fonts/google/google-sans-text.woff2") format("woff2");
-}
 :root, [ks-inverted], [ks-theme] {
   --dsa-rich-text__headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-medium));
   --dsa-rich-text__headline--color: var(--dsa-headline--color, var(--ks-text-color-display));
+  --dsa-rich-text__headline--margin: 1.25em 0 0.5em;
   --dsa-rich-text--color: var(--ks-text-color-copy);
   --dsa-rich-text--font: var(--ks-font-copy-m);
+  --dsa-rich-text--vertical-spacing: 1em 0 0;
 }
 
 :root, [ks-inverted], [ks-theme] {
@@ -702,16 +4627,16 @@ body.sb-show-main.sb-main-padded {
   padding: 0 !important;
 }
 
+.preview--wrapper {
+  background-color: #1f213d;
+  padding: 2rem;
+}
 .preview {
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
   padding: 42px 29px;
   background-color: var(--ks-background-color-default);
   border-radius: var(--ks-border-radius-card);
 }
-.preview--wrapper {
-  background-color: #1f213d;
-  padding: 2rem;
-}
 
 body {
   background: var(--ks-background-color-default);
@@ -721,6 +4646,18 @@ hr.c-divider {
   --c-divider--background: var(--ks-border-color-accent);
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 :root, [ks-inverted], [ks-theme] {
   --g-link--font-weight: var(--dsa-link--font-weight, var(--ks-font-weight-semi-bold));
   --g-link--text-decoration: var(--dsa-link--text-decoration, underline);
@@ -748,9 +4685,17 @@ hr.c-divider {
 #root {
   --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-base);
   --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-inverted-base);
+  --dsa-overlay-text--shadow: var(--dsa-overlay-text--shadow-base);
+  --dsa-overlay-text--shadow-inverted: var(--dsa-overlay-text--shadow-inverted-base);
+  --dsa-overlay-text--text-color: var(--dsa-overlay-text--text-color-base);
+  --dsa-overlay-text--text-color-inverted: var(--dsa-overlay-text--text-color-inverted-base);
 }
 
 [ks-inverted=true] {
   --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-inverted-base);
   --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-base);
+  --dsa-overlay-text--shadow: var(--dsa-overlay-text--shadow-inverted-base);
+  --dsa-overlay-text--shadow-inverted: var(--dsa-overlay-text--shadow-base);
+  --dsa-overlay-text--text-color: var(--dsa-overlay-text--text-color-inverted-base);
+  --dsa-overlay-text--text-color-inverted: var(--dsa-overlay-text--text-color-base);
 }