@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  line-height: 1.15;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0.01em 0 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

*, :after, :before {
  box-sizing: inherit;
}

body.overlay-open {
  overflow: hidden;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  margin: 0;
  overflow: visible;
  padding: 0;
  text-align: inherit;
  width: auto;
}

button:not(:disabled) {
  cursor: pointer;
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

fieldset[disabled] {
  opacity: 0.5;
}

iframe {
  border: 0;
}

:root, [ks-inverted], [ks-theme] {
  --g-link--font-weight:var(--ks-font-weight-regular);
  --g-link--text-decoration:underline;
  --g-link--text-decoration-hover:inherit;
  --g-link--color:var(--ks-text-color-default-interactive);
  --g-link--color-hover:var(--ks-text-color-default-interactive-hover);
  --g-link--background:transparent;
  --g-link--border-radius:0;
  --g-topic--color:var(--ks-text-color-default);
  --g-topic--font:var(--ks-font-display-l);
  --g-topic--font-weight:var(--ks-font-weight-bold);
  --c-rich-text--font:var(--ks-font-copy-m);
  --c-rich-text--vertical-spacing:var(--ks-spacing-m);
  --c-rich-text--horizontal-spacing:1em;
  --c-rich-text--color:var(--ks-text-color-default);
  --c-rich-text--font-weight:var(--ks-font-weight-regular);
  --c-rich-text_headline--color:var(--ks-text-color-default);
  --c-rich-text_headline--font:var(--ks-font-display-m);
  --c-rich-text_headline--font-weight:var(--ks-font-weight-bold);
  --c-rich-text_headline--margin:0.75em 0 0.5em;
}

h1, h2, h3, h4, h5, h6 {
  --g-link--font-weight:var(--c-rich-text_headline--font-weight);
}

a:not(.c-button) {
  background: var(--g-link--background);
  border-radius: var(--g-link--border-radius);
  color: var(--g-link--color);
  font-weight: var(--g-link--font-weight);
  -webkit-text-decoration: var(--g-link--text-decoration);
  text-decoration: var(--g-link--text-decoration);
  transition: 0.15s;
}

a:not(.c-button):focus, a:not(.c-button):hover {
  background: var(--g-link--background-hover);
  color: var(--g-link--color-hover);
  -webkit-text-decoration: var(--g-link--text-decoration-hover);
  text-decoration: var(--g-link--text-decoration-hover);
}

img {
  height: auto;
  margin-bottom: 0;
  max-width: 100%;
  vertical-align: top;
}

figure {
  margin: 0;
}

figure img {
  width: 100%;
}

caption, figcaption {
  font: var(--ks-font-interface-xs);
  font-style: italic;
  padding-top: 0.35em;
}

video {
  height: auto;
  max-width: 100%;
  vertical-align: top;
  width: 100%;
}

kbd {
  border: var(--ks-border-width-default) solid var(--ks-color-fg-to-bg-8);
  border-radius: var(--ks-border-radius-control);
  box-shadow: 0 1px 0 var(--ks-color-fg-alpha-8);
  display: inline-block;
  font: var(--ks-font-interface-s);
  margin: 0 0.1em;
  padding: 0.1em 0.5em 0;
  vertical-align: 0.1em;
  white-space: nowrap;
}

html:not(.js) img.lazyload {
  display: none !important;
}

.hidden-visually {
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hidden, [hidden] {
  display: none !important;
}

h1 {
  --c-rich-text_headline--font:var(--ks-font-display-xxl);
}

h2 {
  --c-rich-text_headline--font:var(--ks-font-display-xl);
}

h3 {
  --c-rich-text_headline--font:var(--ks-font-display-l);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, :after, :before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
@media print {
  .no-print {
    display: none;
  }
}
@container rich-text (min-width: 640px) {
  :root, [ks-inverted], [ks-theme] {
    --c-rich-text_headline--margin:1.5em 0 1em;
  }
}
:root, [ks-inverted], [ks-theme] {
  --dsa-text-color-on-primary-base: var(--ks-brand-color-on-primary);
  --dsa-text-color-on-primary-inverted-base: var(--ks-brand-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_transparent--box-shadow: var(--ks-box-shadow-surface);
  --dsa-overlay-box_opaque--background-color: var(--ks-color-bg-alpha-2);
  --dsa-overlay-box_opaque--backdrop-filter: blur(20px);
  --dsa-overlay-box_opaque--box-shadow: var(--ks-box-shadow-surface);
  --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+ */
}
.playground-preview-page .l-section .l-section__content > * {
  position: relative;
  z-index: 100000;
}

.color-frame {
  width: 100px;
  height: 100px;
  border: var(--ks-border-width-default) 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: var(--ks-border-width-default) 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: var(--ks-border-width-default) 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: var(--ks-border-width-default) 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 {
  --ks-brand-color-primary: #3065c0;
  --ks-brand-color-primary-inverted: #4e83e0;
  --ks-brand-color-onPrimary: #ffffff;
  --ks-brand-color-onPrimary-inverted: #ffffff;
  --ks-brand-color-bg: #ffffff;
  --ks-brand-color-bg-inverted: #0f203e;
  --ks-brand-color-fg: #06081f;
  --ks-brand-color-fg-inverted: #ffffff;
  --ks-brand-color-link: #3065c0;
  --ks-brand-color-link-inverted: #98b2e0;
  --ks-brand-color-positive: #23831b;
  --ks-brand-color-positive-inverted: #6edb64;
  --ks-brand-color-negative: #ff1a57;
  --ks-brand-color-negative-inverted: #d21d48;
  --ks-brand-color-notice: #64c2db;
  --ks-brand-color-notice-inverted: #00718f;
  --ks-brand-color-informative: #64c2db;
  --ks-brand-color-informative-inverted: #00718f;
  --ks-brand-color-scale-1: 95%;
  --ks-brand-color-scale-2: 85%;
  --ks-brand-color-scale-3: 73%;
  --ks-brand-color-scale-4: 61%;
  --ks-brand-color-scale-5: 50%;
  --ks-brand-color-scale-6: 39%;
  --ks-brand-color-scale-7: 27%;
  --ks-brand-color-scale-8: 15%;
  --ks-brand-color-scale-9: 5%;
  --ks-brand-font-family-display: Montserrat,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
  --ks-brand-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-brand-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-brand-font-family-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ks-brand-font-weight-light: 300;
  --ks-brand-font-weight-regular: 400;
  --ks-brand-font-weight-medium: 500;
  --ks-brand-font-weight-semi-bold: 600;
  --ks-brand-font-weight-bold: 700;
  --ks-brand-font-size-display-base: 20px;
  --ks-brand-font-size-display-shrink-factor: 1.5;
  --ks-brand-font-size-display-grow-factor: 1.5;
  --ks-brand-font-size-display-bp-factor: 1.5;
  --ks-brand-font-size-copy-base: 16px;
  --ks-brand-font-size-copy-shrink-factor: 1.5;
  --ks-brand-font-size-copy-grow-factor: 1.5;
  --ks-brand-font-size-copy-bp-factor: 1.5;
  --ks-brand-font-size-interface-base: 16px;
  --ks-brand-font-size-interface-shrink-factor: 1.5;
  --ks-brand-font-size-interface-grow-factor: 1.5;
  --ks-brand-font-size-interface-bp-factor: 1.5;
  --ks-brand-font-size-mono-base: 16px;
  --ks-brand-font-size-mono-shrink-factor: 1.5;
  --ks-brand-font-size-mono-grow-factor: 1.5;
  --ks-brand-font-size-mono-bp-factor: 1.5;
  --ks-brand-spacing-factor: 1.5;
  --ks-brand-spacing-shrink-factor: 1.5;
  --ks-brand-spacing-grow-factor: 1.5;
  --ks-brand-spacing-bp-factor: 1.5;
  --ks-brand-border-width-default: 1px;
  --ks-brand-border-radius-factor: 1.5;
  --ks-brand-box-shadow-blur-factor: 1.5;
  --ks-brand-box-shadow-opacity-factor: 1.5;
  --ks-brand-box-shadow-spread-factor: 1.5;
  --ks-brand-duration-factor: 1.5;
}

:root {
  /* Interpolated scaling tokens using normalized input and max tokens */
  --font-size-display-shrink-factor: calc(
    1 + (var(--ks-brand-font-size-display-shrink-factor) - 1) * (var(--font-size-display-shrink-factor-max, 0.65) - 1)
  );
  --font-size-display-grow-factor: calc(
    1 + (var(--ks-brand-font-size-display-grow-factor) - 1) * (var(--font-size-display-grow-factor-max, 1.75) - 1)
  );
  --font-size-display-bp-factor: calc(
    1 + (var(--ks-brand-font-size-display-bp-factor) - 1) * (var(--font-size-display-bp-factor-max, 1.04) - 1)
  );
  --font-size-copy-shrink-factor: calc(
    1 + (var(--ks-brand-font-size-copy-shrink-factor) - 1) * (var(--font-size-copy-shrink-factor-max, 0.65) - 1)
  );
  --font-size-copy-grow-factor: calc(
    1 + (var(--ks-brand-font-size-copy-grow-factor) - 1) * (var(--font-size-copy-grow-factor-max, 1.75) - 1)
  );
  --font-size-copy-bp-factor: calc(
    1 + (var(--ks-brand-font-size-copy-bp-factor) - 1) * (var(--font-size-copy-bp-factor-max, 1.04) - 1)
  );
  --font-size-interface-shrink-factor: calc(
    1 + (var(--ks-brand-font-size-interface-shrink-factor) - 1) *
      (var(--font-size-interface-shrink-factor-max, 0.65) - 1)
  );
  --font-size-interface-grow-factor: calc(
    1 + (var(--ks-brand-font-size-interface-grow-factor) - 1) * (var(--font-size-interface-grow-factor-max, 1.75) - 1)
  );
  --font-size-interface-bp-factor: calc(
    1 + (var(--ks-brand-font-size-interface-bp-factor) - 1) * (var(--font-size-interface-bp-factor-max, 1.04) - 1)
  );
  --font-size-mono-shrink-factor: calc(
    1 + (var(--ks-brand-font-size-mono-shrink-factor) - 1) * (var(--font-size-mono-shrink-factor-max, 0.65) - 1)
  );
  --font-size-mono-grow-factor: calc(
    1 + (var(--ks-brand-font-size-mono-grow-factor) - 1) * (var(--font-size-mono-grow-factor-max, 1.75) - 1)
  );
  --font-size-mono-bp-factor: calc(
    1 + (var(--ks-brand-font-size-mono-bp-factor) - 1) * (var(--font-size-mono-bp-factor-max, 1.04) - 1)
  );
  --ks-scale-spacing-shrink-factor: calc(
    1 + (var(--ks-brand-spacing-shrink-factor) - 1) * (var(--ks-scale-spacing-shrink-factor-max, 0.5) - 1)
  );
  --ks-scale-spacing-grow-factor: calc(
    1 + (var(--ks-brand-spacing-grow-factor) - 1) * (var(--ks-scale-spacing-grow-factor-max, 2) - 1)
  );
  --spacing-bp-factor: calc(
    1 + (var(--ks-brand-spacing-bp-factor) - 1) * (var(--ks-scale-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 */
  --ks-scale-spacing-shrink-factor: calc(
    1 + (var(--ks-brand-spacing-shrink-factor) - 1) * (var(--ks-scale-spacing-shrink-factor-max, 0.5) - 1)
  );
  --ks-scale-spacing-grow-factor: calc(
    1 + (var(--ks-brand-spacing-grow-factor) - 1) * (var(--ks-scale-spacing-grow-factor-max, 2) - 1)
  );
  --spacing-bp-factor: calc(
    1 + (var(--ks-brand-spacing-bp-factor) - 1) * (var(--ks-scale-spacing-bp-factor-max, 1.05) - 1)
  );
}

/* Set max values for your scales */
: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;
  --ks-scale-spacing-shrink-factor-max: 0.35;
  --ks-scale-spacing-grow-factor-max: 1.8;
  --ks-scale-spacing-bp-factor-max: 1.02;
}

:root,
[ks-theme] {
  --ks-color-primary-base: var(--ks-brand-color-primary);
  --ks-color-primary-inverted-base: var(--ks-brand-color-primary-inverted);
  --ks-color-on-primary-base: var(--ks-brand-color-onPrimary);
  --ks-color-on-primary-inverted-base: var(--ks-brand-color-onPrimary-inverted);
  --ks-color-fg-base: var(--ks-brand-color-fg);
  --ks-color-fg-inverted-base: var(--ks-brand-color-fg-inverted);
  --ks-color-bg-base: var(--ks-brand-color-bg);
  --ks-color-bg-inverted-base: var(--ks-brand-color-bg-inverted);
  --ks-color-link-base: var(--ks-brand-color-link);
  --ks-color-link-inverted-base: var(--ks-brand-color-link-inverted);
  --ks-color-positive-base: var(--ks-brand-color-positive);
  --ks-color-positive-inverted-base: var(--ks-brand-color-positive-inverted);
  --ks-color-negative-base: var(--ks-brand-color-negative);
  --ks-color-negative-inverted-base: var(--ks-brand-color-negative-inverted);
  --ks-color-informative-base: var(--ks-brand-color-informative);
  --ks-color-informative-inverted-base: var(--ks-brand-color-informative-inverted);
  --ks-color-notice-base: var(--ks-brand-color-notice);
  --ks-color-notice-inverted-base: var(--ks-brand-color-notice-inverted);
}

:root {
  --ks-color-primary: var(--ks-color-primary-base);
  --ks-color-primary-inverted: var(--ks-color-primary-inverted-base);
  --ks-color-on-primary: var(--ks-color-on-primary-base);
  --ks-color-on-primary-inverted: var(--ks-color-on-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-on-primary: var(--ks-color-on-primary-inverted-base);
  --ks-color-on-primary-inverted: var(--ks-color-on-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(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-primary-alpha-2: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-primary-alpha-3: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-primary-alpha-4: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-primary-alpha-5: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-primary-alpha-6: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-primary-alpha-7: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-primary-alpha-8: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-primary-alpha-9: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-primary-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-primary-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-primary-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-primary-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-primary-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-primary-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-primary-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-primary-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-primary-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-primary-to-bg-1: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-2: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-3: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-4: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-5: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-6: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-7: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-8: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-bg)
  );
  --ks-color-primary-to-bg-9: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-primary-to-fg-1: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-2: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-3: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-4: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-5: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-6: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-7: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-8: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-fg)
  );
  --ks-color-primary-to-fg-9: color-mix(
    in srgb,
    var(--ks-color-primary) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
  --ks-color-fg-alpha-1: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-1, 10%), transparent);
  --ks-color-fg-alpha-2: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-2, 20%), transparent);
  --ks-color-fg-alpha-3: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-3, 30%), transparent);
  --ks-color-fg-alpha-4: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-4, 40%), transparent);
  --ks-color-fg-alpha-5: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-5, 50%), transparent);
  --ks-color-fg-alpha-6: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-6, 60%), transparent);
  --ks-color-fg-alpha-7: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-7, 70%), transparent);
  --ks-color-fg-alpha-8: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-8, 80%), transparent);
  --ks-color-fg-alpha-9: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-9, 90%), transparent);
  --ks-color-fg-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-fg-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-fg-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-fg-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-fg-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-fg-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-fg-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-fg-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-fg-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-fg-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-fg-to-bg-1: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-1, 10%), var(--ks-color-bg));
  --ks-color-fg-to-bg-2: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-2, 20%), var(--ks-color-bg));
  --ks-color-fg-to-bg-3: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-3, 30%), var(--ks-color-bg));
  --ks-color-fg-to-bg-4: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-4, 40%), var(--ks-color-bg));
  --ks-color-fg-to-bg-5: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-5, 50%), var(--ks-color-bg));
  --ks-color-fg-to-bg-6: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-6, 60%), var(--ks-color-bg));
  --ks-color-fg-to-bg-7: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-7, 70%), var(--ks-color-bg));
  --ks-color-fg-to-bg-8: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-8, 80%), var(--ks-color-bg));
  --ks-color-fg-to-bg-9: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-bg-alpha-1: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-1, 10%), transparent);
  --ks-color-bg-alpha-2: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-2, 20%), transparent);
  --ks-color-bg-alpha-3: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-3, 30%), transparent);
  --ks-color-bg-alpha-4: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-4, 40%), transparent);
  --ks-color-bg-alpha-5: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-5, 50%), transparent);
  --ks-color-bg-alpha-6: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-6, 60%), transparent);
  --ks-color-bg-alpha-7: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-7, 70%), transparent);
  --ks-color-bg-alpha-8: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-8, 80%), transparent);
  --ks-color-bg-alpha-9: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-9, 90%), transparent);
  --ks-color-bg-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-bg-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-bg-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-bg-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-bg-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-bg-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-bg-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-bg-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-bg-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-bg-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-bg-to-fg-1: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-1, 10%), var(--ks-color-fg));
  --ks-color-bg-to-fg-2: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-2, 20%), var(--ks-color-fg));
  --ks-color-bg-to-fg-3: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-3, 30%), var(--ks-color-fg));
  --ks-color-bg-to-fg-4: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-4, 40%), var(--ks-color-fg));
  --ks-color-bg-to-fg-5: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-5, 50%), var(--ks-color-fg));
  --ks-color-bg-to-fg-6: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-6, 60%), var(--ks-color-fg));
  --ks-color-bg-to-fg-7: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-7, 70%), var(--ks-color-fg));
  --ks-color-bg-to-fg-8: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-8, 80%), var(--ks-color-fg));
  --ks-color-bg-to-fg-9: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
  --ks-color-link-alpha-1: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-1, 10%), transparent);
  --ks-color-link-alpha-2: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-2, 20%), transparent);
  --ks-color-link-alpha-3: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-3, 30%), transparent);
  --ks-color-link-alpha-4: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-4, 40%), transparent);
  --ks-color-link-alpha-5: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-5, 50%), transparent);
  --ks-color-link-alpha-6: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-6, 60%), transparent);
  --ks-color-link-alpha-7: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-7, 70%), transparent);
  --ks-color-link-alpha-8: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-8, 80%), transparent);
  --ks-color-link-alpha-9: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-9, 90%), transparent);
  --ks-color-link-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-link-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-link-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-link-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-link-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-link-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-link-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-link-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-link-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-link-to-bg-1: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-2: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-3: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-4: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-5: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-6: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-7: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-8: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-bg)
  );
  --ks-color-link-to-bg-9: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-link-to-fg-1: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-2: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-3: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-4: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-5: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-6: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-7: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-8: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-fg)
  );
  --ks-color-link-to-fg-9: color-mix(
    in srgb,
    var(--ks-color-link) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
  --ks-color-positive-alpha-1: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-positive-alpha-2: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-positive-alpha-3: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-positive-alpha-4: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-positive-alpha-5: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-positive-alpha-6: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-positive-alpha-7: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-positive-alpha-8: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-positive-alpha-9: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-positive-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-positive-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-positive-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-positive-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-positive-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-positive-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-positive-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-positive-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-positive-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-positive-to-bg-1: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-2: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-3: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-4: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-5: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-6: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-7: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-8: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-bg)
  );
  --ks-color-positive-to-bg-9: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-positive-to-fg-1: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-2: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-3: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-4: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-5: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-6: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-7: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-8: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-fg)
  );
  --ks-color-positive-to-fg-9: color-mix(
    in srgb,
    var(--ks-color-positive) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
  --ks-color-negative-alpha-1: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-negative-alpha-2: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-negative-alpha-3: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-negative-alpha-4: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-negative-alpha-5: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-negative-alpha-6: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-negative-alpha-7: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-negative-alpha-8: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-negative-alpha-9: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-negative-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-negative-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-negative-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-negative-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-negative-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-negative-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-negative-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-negative-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-negative-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-negative-to-bg-1: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-2: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-3: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-4: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-5: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-6: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-7: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-8: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-bg)
  );
  --ks-color-negative-to-bg-9: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-negative-to-fg-1: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-2: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-3: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-4: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-5: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-6: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-7: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-8: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-fg)
  );
  --ks-color-negative-to-fg-9: color-mix(
    in srgb,
    var(--ks-color-negative) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
  --ks-color-informative-alpha-1: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-informative-alpha-2: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-informative-alpha-3: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-informative-alpha-4: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-informative-alpha-5: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-informative-alpha-6: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-informative-alpha-7: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-informative-alpha-8: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-informative-alpha-9: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-informative-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-informative-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-informative-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-informative-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-informative-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-informative-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-informative-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-informative-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-informative-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-informative-to-bg-1: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-2: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-3: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-4: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-5: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-6: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-7: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-8: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-bg)
  );
  --ks-color-informative-to-bg-9: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-informative-to-fg-1: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-2: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-3: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-4: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-5: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-6: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-7: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-8: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-fg)
  );
  --ks-color-informative-to-fg-9: color-mix(
    in srgb,
    var(--ks-color-informative) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
  --ks-color-notice-alpha-1: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%), transparent);
  --ks-color-notice-alpha-2: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%), transparent);
  --ks-color-notice-alpha-3: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%), transparent);
  --ks-color-notice-alpha-4: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%), transparent);
  --ks-color-notice-alpha-5: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%), transparent);
  --ks-color-notice-alpha-6: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%), transparent);
  --ks-color-notice-alpha-7: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%), transparent);
  --ks-color-notice-alpha-8: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%), transparent);
  --ks-color-notice-alpha-9: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%), transparent);
  --ks-color-notice-inverted-alpha-1: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
    transparent
  );
  --ks-color-notice-inverted-alpha-2: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
    transparent
  );
  --ks-color-notice-inverted-alpha-3: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
    transparent
  );
  --ks-color-notice-inverted-alpha-4: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
    transparent
  );
  --ks-color-notice-inverted-alpha-5: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
    transparent
  );
  --ks-color-notice-inverted-alpha-6: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
    transparent
  );
  --ks-color-notice-inverted-alpha-7: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
    transparent
  );
  --ks-color-notice-inverted-alpha-8: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
    transparent
  );
  --ks-color-notice-inverted-alpha-9: color-mix(
    in srgb,
    var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
    transparent
  );
  --ks-color-notice-to-bg-1: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-2: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-3: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-4: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-5: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-6: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-7: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-8: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-bg)
  );
  --ks-color-notice-to-bg-9: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-bg-inverted)
  );
  --ks-color-notice-to-fg-1: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-2: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-3: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-4: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-5: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-6: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-7: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-8: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%),
    var(--ks-color-fg)
  );
  --ks-color-notice-to-fg-9: color-mix(
    in srgb,
    var(--ks-color-notice) var(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-color-scale-9, 90%),
    var(--ks-color-fg-inverted)
  );
}

:root,
[ks-inverted=true],
[ks-inverted=false],
[ks-theme] {
  --ks-font-family-display: var(--ks-brand-font-family-display);
  --ks-font-family-copy: var(--ks-brand-font-family-copy);
  --ks-font-family-interface: var(--ks-brand-font-family-interface);
  --ks-font-family-mono: var(--ks-brand-font-family-mono);
  --ks-font-weight-light: var(--ks-brand-font-weight-light);
  --ks-font-weight-regular: var(--ks-brand-font-weight-regular);
  --ks-font-weight-medium: var(--ks-brand-font-weight-medium);
  --ks-font-weight-semi-bold: var(--ks-brand-font-weight-semi-bold);
  --ks-font-weight-bold: var(--ks-brand-font-weight-bold);
  --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(--ks-brand-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(--ks-brand-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(--ks-brand-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(--ks-brand-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] {
  --ks-scale-spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
  --ks-scale-spacing-xs-bp-factor: calc(var(--ks-scale-spacing-xxs-bp-factor) * var(--spacing-bp-factor));
  --ks-scale-spacing-s-bp-factor: calc(var(--ks-scale-spacing-xs-bp-factor) * var(--spacing-bp-factor));
  --ks-scale-spacing-m-bp-factor: calc(var(--ks-scale-spacing-s-bp-factor) * var(--spacing-bp-factor));
  --ks-scale-spacing-l-bp-factor: calc(var(--ks-scale-spacing-m-bp-factor) * var(--spacing-bp-factor));
  --ks-scale-spacing-xl-bp-factor: calc(var(--ks-scale-spacing-l-bp-factor) * var(--spacing-bp-factor));
  --ks-scale-spacing-xxl-bp-factor: calc(var(--ks-scale-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) * var(--ks-scale-spacing-shrink-factor));
  --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * var(--ks-scale-spacing-shrink-factor));
  --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * var(--ks-scale-spacing-shrink-factor));
  --ks-spacing-m-base: calc((var(--ks-brand-spacing-factor) - 0.5) * var(--ks-font-size-copy-m));
  --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--ks-scale-spacing-grow-factor));
  --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--ks-scale-spacing-grow-factor));
  --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--ks-scale-spacing-grow-factor));
}

:root,
[ks-theme],
[ks-inverted=false],
[ks-inverted=true] {
  --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xxs-bp-factor));
  --ks-spacing-xxs-bp-factor-tablet: calc(
    var(--ks-spacing-xxs-bp-factor-phone) * var(--ks-scale-spacing-xxs-bp-factor)
  );
  --ks-spacing-xxs-bp-factor-laptop: calc(
    var(--ks-spacing-xxs-bp-factor-tablet) * var(--ks-scale-spacing-xxs-bp-factor)
  );
  --ks-spacing-xxs-bp-factor-desktop: calc(
    var(--ks-spacing-xxs-bp-factor-laptop) * var(--ks-scale-spacing-xxs-bp-factor)
  );
  --ks-spacing-xs-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xs-bp-factor));
  --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--ks-scale-spacing-xs-bp-factor));
  --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--ks-scale-spacing-xs-bp-factor));
  --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--ks-scale-spacing-xs-bp-factor));
  --ks-spacing-s-bp-factor-phone: calc(1 * var(--ks-scale-spacing-s-bp-factor));
  --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--ks-scale-spacing-s-bp-factor));
  --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--ks-scale-spacing-s-bp-factor));
  --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--ks-scale-spacing-s-bp-factor));
  --ks-spacing-m-bp-factor-phone: calc(1 * var(--ks-scale-spacing-m-bp-factor));
  --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--ks-scale-spacing-m-bp-factor));
  --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--ks-scale-spacing-m-bp-factor));
  --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--ks-scale-spacing-m-bp-factor));
  --ks-spacing-l-bp-factor-phone: calc(1 * var(--ks-scale-spacing-l-bp-factor));
  --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--ks-scale-spacing-l-bp-factor));
  --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--ks-scale-spacing-l-bp-factor));
  --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--ks-scale-spacing-l-bp-factor));
  --ks-spacing-xl-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xl-bp-factor));
  --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--ks-scale-spacing-xl-bp-factor));
  --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--ks-scale-spacing-xl-bp-factor));
  --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--ks-scale-spacing-xl-bp-factor));
  --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xxl-bp-factor));
  --ks-spacing-xxl-bp-factor-tablet: calc(
    var(--ks-spacing-xxl-bp-factor-phone) * var(--ks-scale-spacing-xxl-bp-factor)
  );
  --ks-spacing-xxl-bp-factor-laptop: calc(
    var(--ks-spacing-xxl-bp-factor-tablet) * var(--ks-scale-spacing-xxl-bp-factor)
  );
  --ks-spacing-xxl-bp-factor-desktop: calc(
    var(--ks-spacing-xxl-bp-factor-laptop) * var(--ks-scale-spacing-xxl-bp-factor)
  );
}

:root,
[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-stretch-xxs: var(--ks-spacing-xs) var(--ks-spacing-xxs);
  --ks-spacing-inset-stretch-xs: var(--ks-spacing-s) var(--ks-spacing-xs);
  --ks-spacing-inset-stretch-s: var(--ks-spacing-m) var(--ks-spacing-s);
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
  --ks-spacing-inset-stretch-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);
}

: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-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-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-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-inverted] {
  --ks-border-divider: var(--ks-border-width-default) solid var(--ks-border-color-interface);
  --ks-border-card: var(--ks-border-width-default) solid var(--ks-border-color-card);
  --ks-border-card-interactive: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
  --ks-border-control: var(--ks-border-width-default) solid var(--ks-border-color-interface);
  --ks-border-surface: var(--ks-border-width-default) solid var(--ks-border-color-surface);
  --ks-border-width-default: var(--ks-brand-border-width-default);
  --ks-border-width-emphasized: var(--ks-brand-border-width-emphasized);
  /*
    Border-radius scaling:
    If --ks-brand-border-radius-factor is 1, border-radius = 0 (no radius)
    If --ks-brand-border-radius-factor is 2, border-radius = 2 × --ks-spacing-m
    Formula: (factor - 1) * 2 * spacing-m
  */
  --ks-border-radius-control: calc((var(--ks-brand-border-radius-factor) - 1) * 3 * var(--ks-spacing-m) * 0.25);
  --ks-border-radius-card: calc((var(--ks-brand-border-radius-factor) - 1) * 3 * var(--ks-spacing-m) * 0.5);
  --ks-border-radius-surface: calc((var(--ks-brand-border-radius-factor) - 1) * 3 * var(--ks-spacing-m) * 0.75);
  --ks-border-radius-pill: 999px;
  --ks-border-radius-circle: 50%;
}

:root,
[ks-theme] {
  /*
    Box-shadow blur scaling:
    If --ks-brand-box-shadow-blur-factor is 1, blur = 0px
    If --ks-brand-box-shadow-blur-factor is 2, blur = 2 × --ks-spacing-m
    Formula: (factor - 1) * 2 * spacing-m
  */
  --ks-brand-box-shadow-control-blur: calc(
    (var(--ks-brand-box-shadow-blur-factor) - 1) * 2 * var(--ks-spacing-m) * 0.15
  );
  --ks-brand-box-shadow-card-blur: calc((var(--ks-brand-box-shadow-blur-factor) - 1) * 2 * var(--ks-spacing-m) * 0.5);
  --ks-brand-box-shadow-surface-blur: calc(
    (var(--ks-brand-box-shadow-blur-factor) - 1) * 2 * var(--ks-spacing-m) * 0.75
  );
  /*
    Opacity scaling:
    If --ks-brand-box-shadow-opacity-factor is 1, opacity = 0
    If --ks-brand-box-shadow-opacity-factor is 2, opacity = 1
    Formula: (factor - 1) * 1
  */
  --ks-box-shadow-opacity: calc((var(--ks-brand-box-shadow-opacity-factor) - 1) * 0.5);
  /*
    Spread scaling:
    If --ks-brand-box-shadow-spread-factor is 1, spread = -spacing-m
    If --ks-brand-box-shadow-spread-factor is 1.5, spread = 0
    If --ks-brand-box-shadow-spread-factor is 2, spread = spacing-m
    Formula: (spread-factor - 1.5) * 2 * spacing-m
    Example values:
      1   → -spacing-m
      1.5 → 0
      2   → spacing-m
  */
  --ks-box-shadow-spread: calc((var(--ks-brand-box-shadow-spread-factor) - 1.5) * 2 * var(--ks-spacing-m));
  --ks-box-shadow-card-base: 0 var(--ks-brand-box-shadow-card-blur) calc(var(--ks-brand-box-shadow-card-blur) * 3)
    var(--ks-box-shadow-spread) rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-card-hover-base: 0 var(--ks-brand-box-shadow-card-blur) calc(var(--ks-brand-box-shadow-card-blur) * 3)
    var(--ks-box-shadow-spread) rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-card-inverted-base: 0 var(--ks-brand-box-shadow-card-blur)
    calc(var(--ks-brand-box-shadow-card-blur) * 3) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-card-inverted-hover-base: 0 var(--ks-brand-box-shadow-card-blur)
    calc(var(--ks-brand-box-shadow-card-blur) * 3) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-control-base: 0 var(--ks-brand-box-shadow-control-blur)
    calc(var(--ks-brand-box-shadow-control-blur) * 2.5) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-control-hover-base: 0 var(--ks-brand-box-shadow-control-blur)
    calc(var(--ks-brand-box-shadow-control-blur) * 2.5) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-control-inverted-base: 0 var(--ks-brand-box-shadow-control-blur)
    calc(var(--ks-brand-box-shadow-control-blur) * 2.5) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-control-inverted-hover-base: 0 var(--ks-brand-box-shadow-control-blur)
    calc(var(--ks-brand-box-shadow-control-blur) * 2.5) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-surface-base: 0 var(--ks-brand-box-shadow-surface-blur)
    calc(var(--ks-brand-box-shadow-surface-blur) * 2) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-surface-hover-base: 0 var(--ks-brand-box-shadow-surface-blur) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-surface-inverted-base: 0 var(--ks-brand-box-shadow-surface-blur)
    calc(var(--ks-brand-box-shadow-surface-blur) * 2) var(--ks-box-shadow-spread)
    rgba(0, 0, 0, var(--ks-box-shadow-opacity));
  --ks-box-shadow-surface-inverted-hover-base: 0 calc(var(--ks-brand-box-shadow-surface-blur) * 2)
    var(--ks-box-shadow-spread) rgba(0, 0, 0, var(--ks-box-shadow-opacity));
}

: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-base: calc(150ms * (var(--ks-brand-duration-factor) - 0.5));
  --ks-duration-immediate: calc(var(--ks-duration-base) / 4);
  --ks-duration-fast: calc(var(--ks-duration-base) / 2);
  --ks-duration-medium: var(--ks-duration-base);
  --ks-duration-slow: calc(var(--ks-duration-base) * 2);
  --ks-timing-function-bounce: cubic-bezier(0.15, 1, 0.5, 1.25);
  --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);
  --ks-transition-toggle: var(--ks-duration-fast) var(--ks-timing-function-ease-in-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-on-primary-base: var(--ks-color-on-primary);
  --ks-text-color-on-primary-inverted-base: var(--ks-color-on-primary-inverted);
  --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-on-primary: var(--ks-text-color-on-primary-base);
  --ks-text-color-on-primary-inverted: var(--ks-text-color-on-primary-inverted-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-on-primary: var(--ks-text-color-on-primary-inverted-base);
  --ks-text-color-on-primary-inverted: var(--ks-text-color-on-primary-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-fg-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-8);
  --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-primary-alpha-8);
  --ks-background-color-card-inverted-base: var(--ks-color-primary-inverted-alpha-8);
  --ks-background-color-card-interactive-base: var(--ks-color-bg);
  --ks-background-color-card-inverted-interactive-base: var(--ks-color-bg-inverted);
  --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);
  --ks-background-color-card-inverted-interactive-hover-base: var(--ks-color-bg-inverted);
  --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 */
  container-name: blog-teaser;
}

.dsa-blog-teaser {
  --dsa-blog-teaser--background: transparent;
  --dsa-blog-teaser--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-xs);
  --dsa-blog-teaser__topic--font: var(--dsa-topic--font);
  --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-l);
  --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(--ks-text-color-copy);
  --dsa-blog-teaser__copy--color_hover: var(--ks-color-fg);
  --dsa-blog-teaser__copy--margin-top: 0.5em;
  --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
  --dsa-blog-teaser__meta--color: var(--ks-text-color-interface);
  --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
  --dsa-blog-teaser__avatar--size: 2em;
  --dsa-blog-teaser__image--border-radius: var(--ks-border-radius-card);
  --dsa-blog-teaser__image--transition: var(--ks-transition-fade);
  --dsa-blog-teaser__image--transform: scale(1.05);
}
@container blog-teaser (min-width: 640px) {
  .dsa-blog-teaser {
    --dsa-blog-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
    --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xl);
    --dsa-blog-teaser__copy--font: var(--ks-font-copy-m);
    --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
  }
}
@container blog-teaser (min-width: 1000px) {
  .dsa-blog-teaser {
    --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xxl);
  }
}

.l-container--post-teaser {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: post-teaser;
}

.dsa-blog-teaser.c-post-teaser {
  --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(--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));
}
.dsa-blog-teaser.c-post-teaser .c-teaser {
  overflow: visible;
  cursor: pointer;
}
.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-rich-text {
  color: var(--dsa-blog-teaser__copy--color_hover, var(--ks-text-color-interface-interactive-hover));
}
.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-rich-text > :not(.c-post-meta) {
  text-decoration: none;
}
.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-post-teaser__image img {
  transform: var(--dsa-blog-teaser__image--transform, scale(1.05));
}
.dsa-blog-teaser.c-post-teaser .c-post-teaser__image {
  overflow: hidden;
  border-radius: var(--dsa-blog-teaser__image--border-radius, var(--ks-border-radius-card));
}
.dsa-blog-teaser.c-post-teaser .c-post-teaser__image img {
  transition: var(--dsa-blog-teaser__image--transition, var(--ks-transition-fade));
  transition-property: transform;
}
.dsa-blog-teaser.c-post-teaser .c-post-meta {
  --c-post-meta_author--font-weight: var(--ks-font-weight-semi-bold);
  --c-post-meta--gap: 0.5em 0.75em;
  --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
  --c-post-meta_item--gap: 0.35em;
  --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
  --c-post-meta_author--avatar-size: var(--dsa-blog-teaser__avatar--size, 2em);
  --c-post-meta_author--gap: 0.35em;
  --c-post-meta_author--font-weight: var(
    --dsa-blog-teaser__meta__author--font-weight,
    var(--ks-font-weight-semi-bold)
  );
  margin: 0;
}
.dsa-blog-teaser.c-post-teaser .l-container--rich-text {
  margin: 0;
}
.dsa-blog-teaser.c-post-teaser .c-rich-text {
  font: var(--dsa-blog-teaser__copy--font, var(--ks-font-copy-m));
  transition: var(--ks-transition-hover);
  transition-property: color;
  display: flex;
  flex-direction: column;
  gap: var(--c-post-teaser--gap);
}
.dsa-blog-teaser.c-post-teaser .c-teaser__topic {
  font: var(--dsa-blog-teaser__topic--font, var(--dsa-topic--font, var(--ks-font-display-m)));
  font-size: var(--dsa-blog-teaser__topic--font-size);
  font-weight: var(--dsa-blog-teaser__topic--font-weight, var(--dsa-topic--font-weight)) !important;
  text-align: left;
  transition: var(--ks-transition-hover);
  transition-property: text-shadow;
  margin-bottom: var(--dsa-blog-teaser__topic--margin-bottom, 0.35em);
}

:root {
  --dsa-lightbox--background-color: var(--ks-background-color-default);
  --dsa-lightbox__placeholder--background: var(--ks-color-fg-to-bg-1);
  --dsa-lightbox--root-z-index: var(--ks-depth-modal);
  --dsa-lightbox__button--color: var(--ks-text-color-on-primary);
  --dsa-lightbox__counter--shadow: var(--ks-color-fg-inverted);
  --dsa-lightbox__counter--font: var(--ks-font-interface-s);
  --dsa-lightbox__counter--color: var(--ks-color-fg);
}

.pswp .pswp__img {
  object-fit: contain;
}
.pswp .pswp__caption {
  background-color: var(--das-lightbox__caption--background-color, var(--ks-color-bg-alpha-5));
  color: var(--dsa-lightbox__caption--color, var(--ks-color-fg));
}
.pswp .pswp__counter {
  font: var(--dsa-lightbox__counter--font);
  color: var(--dsa-lightbox__counter--color);
  opacity: 1;
}

:root {
  --c-lightbox--bg: var(--dsa-lightbox--background-color, var(--ks-background-color-default)) !important;
  --c-lightbox--placeholder-bg: var(--dsa-lightbox__placeholder--background, var(--ks-color-fg-to-bg-1)) !important;
  --c-lightbox--root-z-index: var(--dsa-lightbox--root-z-index, var(--ks-depth-modal)) !important;
  --c-lightbox--icon-color: var(--dsa-lightbox__button--color, var(--ks-text-color-on-primary)) !important;
  --c-lightbox--icon-color-secondary: var(--dsa-lightbox__counter--shadow, var(--ks-color-fg-inverted)) !important;
  --c-lightbox--stroke-width: 0px !important;
  --c-lightbox--error-text-color: var(--ks-color-error) !important;
}

: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] {
  --c-rich-text--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
  --c-rich-text--color: var(--dsa-rich-text--color, var(--ks-text-color-default));
  --c-rich-text_headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-bold));
  --c-rich-text_headline--color: var(--dsa-headline--color, var(--ks-text-color-primary));
}

body.sb-show-main.sb-main-padded {
  padding: 0 !important;
}

.preview--wrapper {
  background-color: var(--ks-color-primary-to-bg-8);
  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);
}

body {
  background: var(--ks-background-color-default);
}

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);
  --g-link--text-decoration-hover: var(--dsa-link--text-decoration_hover, none);
  --g-link--color: var(--dsa-link--color, var(--ks-text-color-default-interactive));
  --g-link--color-hover: var(--dsa-link--color_hover, var(--ks-text-color-default-interactive-hover));
  --g-link--background: var(--dsa-link--background, transparent);
  --g-link--border-radius: var(--dsa-link--border-radius, 0);
  --g-topic--color: var(--dsa-topic--color, var(--ks-text-color-default));
  --g-topic--font: var(--dsa-topic--font, var(--ks-font-display-l));
  --g-topic--font-weight: var(--dsa-topic--font-weight, var(--ks-font-weight-bold));
  --c-rich-text--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
  --c-rich-text--vertical-spacing: var(--dsa-rich-text--vertical-spacing, var(--ks-spacing-m));
  --c-rich-text--horizontal-spacing: var(--dsa-rich-text--horizontal-spacing, 1em);
  --c-rich-text--color: var(--dsa-rich-text--color, var(--ks-text-color-default));
  --c-rich-text--font-weight: var(--dsa-rich-text--font-weight, var(--ks-font-weight-regular));
  --c-rich-text_headline--color: var(--dsa-rich-text__headline--color, var(--ks-text-color-display));
  --c-rich-text_headline--font: var(--dsa-rich-text__headline--font, var(--ks-font-display-m));
  --c-rich-text_headline--font-weight: var(--dsa-rich-text__headline--font-weight, var(--ks-font-weight-medium));
  --c-rich-text_headline--margin: var(--dsa-rich-text__headline--margin, 0.75em 0 0.5em);
}

[ks-inverted=false],
:root,
#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);
}