@kickstartds/ds-agency-premium 1.3.30 → 1.3.32--canary.565.63e8986.0

package/dist/global.css

@@ -608,6 +608,1105 @@ h3 {
   font-style: normal;
   font-display: swap;
 }
+.spacings {
+  border: 2px solid white;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.spacing {
+  height: 26px;
+  background-color: var(--ks-color-fg-alpha-4);
+  position: relative;
+}
+
+.spacing-xxs {
+  width: calc(var(--ks-spacing-xxs) * 1);
+}
+
+.spacing-xs {
+  width: calc(var(--ks-spacing-xs) * 1);
+}
+
+.spacing-s {
+  width: calc(var(--ks-spacing-s) * 1);
+}
+
+.spacing-m {
+  width: calc(var(--ks-spacing-m) * 1);
+}
+
+.spacing-l {
+  width: calc(var(--ks-spacing-l) * 1);
+}
+
+.spacing-xl {
+  width: calc(var(--ks-spacing-xl) * 1);
+}
+
+.spacing-xxl {
+  width: calc(var(--ks-spacing-xxl) * 1);
+}
+
+.font-sizes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.font-sizes-display {
+  font-family: var(--ks-font-family-display);
+}
+.font-sizes-interface {
+  font-family: var(--ks-font-family-interface);
+}
+.font-sizes-copy {
+  font-family: var(--ks-font-family-copy);
+}
+.font-sizes-mono {
+  font-family: var(--ks-font-family-mono);
+}
+
+.font-size {
+  color: var(--ks-color-fg);
+}
+.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);
+}
+
+:root {
+  --global-shrink-factor: 0.8;
+  --global-grow-factor: 1.2;
+  --global-bp-factor: 1.02;
+}
+
+:root {
+  --color-test: #ff00ff;
+  --color-test-inverted: #00f2ff;
+}
+
+:root,
+[ks-theme] {
+  --ks-color-test-base: var(--color-test);
+  --ks-color-test-inverted-base: var(--color-test-inverted);
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false] {
+  --ks-color-test: var(--ks-color-test-base);
+  --ks-color-test-inverted: var(--ks-color-test-inverted-base);
+}
+
+[ks-inverted=true] {
+  --ks-color-test: var(--ks-color-test-inverted-base);
+  --ks-color-test-inverted: var(--ks-color-test-base);
+}
+
+:root,
+[ks-inverted],
+[ks-inverted=true],
+[ks-inverted=false] {
+  --ks-color-test-alpha-1: color-mix(in srgb, var(--ks-color-test) 10%, transparent);
+  --ks-color-test-alpha-2: color-mix(in srgb, var(--ks-color-test) 20%, transparent);
+  --ks-color-test-alpha-3: color-mix(in srgb, var(--ks-color-test) 30%, transparent);
+  --ks-color-test-alpha-4: color-mix(in srgb, var(--ks-color-test) 40%, transparent);
+  --ks-color-test-alpha-5: color-mix(in srgb, var(--ks-color-test) 50%, transparent);
+  --ks-color-test-alpha-6: color-mix(in srgb, var(--ks-color-test) 60%, transparent);
+  --ks-color-test-alpha-7: color-mix(in srgb, var(--ks-color-test) 70%, transparent);
+  --ks-color-test-alpha-8: color-mix(in srgb, var(--ks-color-test) 80%, transparent);
+  --ks-color-test-alpha-9: color-mix(in srgb, var(--ks-color-test) 90%, transparent);
+  --ks-color-test-alpha-1-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 10%, transparent);
+  --ks-color-test-alpha-2-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 20%, transparent);
+  --ks-color-test-alpha-3-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 30%, transparent);
+  --ks-color-test-alpha-4-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 40%, transparent);
+  --ks-color-test-alpha-5-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 50%, transparent);
+  --ks-color-test-alpha-6-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 60%, transparent);
+  --ks-color-test-alpha-7-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 70%, transparent);
+  --ks-color-test-alpha-8-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 80%, transparent);
+  --ks-color-test-alpha-9-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 90%, transparent);
+  --ks-color-test-to-bg-1: color-mix(in srgb, var(--ks-color-test) 10%, var(--ks-color-bg));
+  --ks-color-test-to-bg-2: color-mix(in srgb, var(--ks-color-test) 20%, var(--ks-color-bg));
+  --ks-color-test-to-bg-3: color-mix(in srgb, var(--ks-color-test) 30%, var(--ks-color-bg));
+  --ks-color-test-to-bg-4: color-mix(in srgb, var(--ks-color-test) 40%, var(--ks-color-bg));
+  --ks-color-test-to-bg-5: color-mix(in srgb, var(--ks-color-test) 50%, var(--ks-color-bg));
+  --ks-color-test-to-bg-6: color-mix(in srgb, var(--ks-color-test) 60%, var(--ks-color-bg));
+  --ks-color-test-to-bg-7: color-mix(in srgb, var(--ks-color-test) 70%, var(--ks-color-bg));
+  --ks-color-test-to-bg-8: color-mix(in srgb, var(--ks-color-test) 80%, var(--ks-color-bg));
+  --ks-color-test-to-bg-9: color-mix(in srgb, var(--ks-color-test) 90%, var(--ks-color-bg));
+  --ks-color-test-inverted-to-bg-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, var(--ks-color-bg-inverted));
+  --ks-color-test-to-fg-1: color-mix(in srgb, var(--ks-color-test) 10%, var(--ks-color-fg));
+  --ks-color-test-to-fg-2: color-mix(in srgb, var(--ks-color-test) 20%, var(--ks-color-fg));
+  --ks-color-test-to-fg-3: color-mix(in srgb, var(--ks-color-test) 30%, var(--ks-color-fg));
+  --ks-color-test-to-fg-4: color-mix(in srgb, var(--ks-color-test) 40%, var(--ks-color-fg));
+  --ks-color-test-to-fg-5: color-mix(in srgb, var(--ks-color-test) 50%, var(--ks-color-fg));
+  --ks-color-test-to-fg-6: color-mix(in srgb, var(--ks-color-test) 60%, var(--ks-color-fg));
+  --ks-color-test-to-fg-7: color-mix(in srgb, var(--ks-color-test) 70%, var(--ks-color-fg));
+  --ks-color-test-to-fg-8: color-mix(in srgb, var(--ks-color-test) 80%, var(--ks-color-fg));
+  --ks-color-test-to-fg-9: color-mix(in srgb, var(--ks-color-test) 90%, var(--ks-color-fg));
+  --ks-color-test-to-fg-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, var(--ks-color-fg-inverted));
+}
+
+:root,
+[ks-theme] {
+  --ks-background-color-test-base: var(--ks-color-test);
+  --ks-background-color-test-inverted-base: var(--ks-color-test-inverted);
+}
+
+:root {
+  --ks-background-color-test: var(--ks-background-color-test-base);
+  --ks-background-color-test-inverted: var(--ks-background-color-test-inverted-base);
+}
+
+[ks-inverted=true] {
+  --ks-background-color-test: var(--ks-background-color-test-inverted-base);
+  --ks-background-color-test-inverted: var(--ks-background-color-test-base);
+}
+
+:root,
+[ks-inverted=true],
+[ks-inverted=false],
+[ks-theme] {
+  --ks-font-family-display: Fredoka, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-font-family-copy: Mulish, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --ks-font-family-interface: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI",
+    "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen",
+    "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+  --ks-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --ks-font-weight-light: 300;
+  --ks-font-weight-regular: 400;
+  --ks-font-weight-medium: 500;
+  --ks-font-weight-semi-bold: 600;
+  --ks-font-weight-bold: 700;
+  --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-copy-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-copy-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-base: 16px;
+  --font-size-display-shrink-factor: 0.8;
+  --font-size-display-grow-factor: 1.3;
+  --font-size-display-bp-factor: 1.02;
+  --font-size-copy-shrink-factor: 0.8;
+  --font-size-copy-grow-factor: 1.2;
+  --font-size-copy-bp-factor: 1.01;
+  --font-size-interface-shrink-factor: 0.8;
+  --font-size-interface-grow-factor: 1.2;
+  --font-size-interface-bp-factor: 1.01;
+  --font-size-mono-shrink-factor: 0.8;
+  --font-size-mono-grow-factor: 1.2;
+  --font-size-mono-bp-factor: 1.01;
+  --font-size-display-xxs-bp-factor: calc(1 * var(--font-size-display-bp-factor));
+  --font-size-display-xs-bp-factor: calc(var(--font-size-display-xxs-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-s-bp-factor: calc(var(--font-size-display-xs-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-m-bp-factor: calc(var(--font-size-display-s-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-l-bp-factor: calc(var(--font-size-display-m-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-xl-bp-factor: calc(var(--font-size-display-l-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-xxl-bp-factor: calc(var(--font-size-display-xl-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-copy-xxs-bp-factor: calc(1 * var(--font-size-copy-bp-factor));
+  --font-size-copy-xs-bp-factor: calc(var(--font-size-copy-xxs-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-s-bp-factor: calc(var(--font-size-copy-xs-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-m-bp-factor: calc(var(--font-size-copy-s-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-l-bp-factor: calc(var(--font-size-copy-m-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-xl-bp-factor: calc(var(--font-size-copy-l-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-xxl-bp-factor: calc(var(--font-size-copy-xl-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-interface-xxs-bp-factor: calc(1 * var(--font-size-interface-bp-factor));
+  --font-size-interface-xs-bp-factor: calc(
+    var(--font-size-interface-xxs-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-s-bp-factor: calc(
+    var(--font-size-interface-xs-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-m-bp-factor: calc(
+    var(--font-size-interface-s-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-l-bp-factor: calc(
+    var(--font-size-interface-m-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-xl-bp-factor: calc(
+    var(--font-size-interface-l-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-xxl-bp-factor: calc(
+    var(--font-size-interface-xl-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-mono-xxs-bp-factor: calc(1 * var(--font-size-mono-bp-factor));
+  --font-size-mono-xs-bp-factor: calc(var(--font-size-mono-xxs-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-s-bp-factor: calc(var(--font-size-mono-xs-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-m-bp-factor: calc(var(--font-size-mono-s-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-l-bp-factor: calc(var(--font-size-mono-m-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-xl-bp-factor: calc(var(--font-size-mono-l-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-xxl-bp-factor: calc(var(--font-size-mono-xl-bp-factor) * var(--font-size-mono-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs-base: calc(
+    var(--ks-font-size-display-xs-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-xs-base: calc(
+    var(--ks-font-size-display-s-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-s-base: calc(
+    var(--ks-font-size-display-m-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-m-base: var(--font-size-base);
+  --ks-font-size-display-l-base: calc(var(--ks-font-size-display-m-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-display-xl-base: calc(var(--ks-font-size-display-l-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-display-xxl-base: calc(var(--ks-font-size-display-xl-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-copy-xxs-base: calc(var(--ks-font-size-copy-xs-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-xs-base: calc(var(--ks-font-size-copy-s-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-s-base: calc(var(--ks-font-size-copy-m-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-m-base: var(--font-size-base);
+  --ks-font-size-copy-l-base: calc(var(--ks-font-size-copy-m-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-copy-xl-base: calc(var(--ks-font-size-copy-l-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-copy-xxl-base: calc(var(--ks-font-size-copy-xl-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-interface-xxs-base: calc(
+    var(--ks-font-size-interface-xs-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-xs-base: calc(
+    var(--ks-font-size-interface-s-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-s-base: calc(
+    var(--ks-font-size-interface-m-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-m-base: var(--font-size-base);
+  --ks-font-size-interface-l-base: calc(var(--ks-font-size-interface-m-base) * var(--font-size-interface-grow-factor));
+  --ks-font-size-interface-xl-base: calc(var(--ks-font-size-interface-l-base) * var(--font-size-interface-grow-factor));
+  --ks-font-size-interface-xxl-base: calc(
+    var(--ks-font-size-interface-xl-base) * var(--font-size-interface-grow-factor)
+  );
+  --ks-font-size-mono-xxs-base: calc(var(--ks-font-size-mono-xs-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-xs-base: calc(var(--ks-font-size-mono-s-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-s-base: calc(var(--ks-font-size-mono-m-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-m-base: var(--font-size-base);
+  --ks-font-size-mono-l-base: calc(var(--ks-font-size-mono-m-base) * var(--font-size-mono-grow-factor));
+  --ks-font-size-mono-xl-base: calc(var(--ks-font-size-mono-l-base) * var(--font-size-mono-grow-factor));
+  --ks-font-size-mono-xxl-base: calc(var(--ks-font-size-mono-xl-base) * var(--font-size-mono-grow-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs-bp-factor-phone: calc(1 * var(--font-size-display-xxs-bp-factor));
+  --ks-font-size-display-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xxs-bp-factor-phone) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xxs-bp-factor-tablet) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xxs-bp-factor-laptop) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-phone: calc(1 * var(--font-size-display-xs-bp-factor));
+  --ks-font-size-display-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xs-bp-factor-phone) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xs-bp-factor-tablet) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xs-bp-factor-laptop) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-phone: calc(1 * var(--font-size-display-s-bp-factor));
+  --ks-font-size-display-s-bp-factor-tablet: calc(
+    var(--ks-font-size-display-s-bp-factor-phone) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-laptop: calc(
+    var(--ks-font-size-display-s-bp-factor-tablet) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-desktop: calc(
+    var(--ks-font-size-display-s-bp-factor-laptop) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-phone: calc(1 * var(--font-size-display-m-bp-factor));
+  --ks-font-size-display-m-bp-factor-tablet: calc(
+    var(--ks-font-size-display-m-bp-factor-phone) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-laptop: calc(
+    var(--ks-font-size-display-m-bp-factor-tablet) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-desktop: calc(
+    var(--ks-font-size-display-m-bp-factor-laptop) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-phone: calc(1 * var(--font-size-display-l-bp-factor));
+  --ks-font-size-display-l-bp-factor-tablet: calc(
+    var(--ks-font-size-display-l-bp-factor-phone) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-laptop: calc(
+    var(--ks-font-size-display-l-bp-factor-tablet) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-desktop: calc(
+    var(--ks-font-size-display-l-bp-factor-laptop) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-phone: calc(1 * var(--font-size-display-xl-bp-factor));
+  --ks-font-size-display-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xl-bp-factor-phone) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xl-bp-factor-tablet) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xl-bp-factor-laptop) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-phone: calc(1 * var(--font-size-display-xxl-bp-factor));
+  --ks-font-size-display-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xxl-bp-factor-phone) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xxl-bp-factor-tablet) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xxl-bp-factor-laptop) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-phone: calc(1 * var(--font-size-copy-xxs-bp-factor));
+  --ks-font-size-copy-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-phone) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-tablet) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-laptop) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-phone: calc(1 * var(--font-size-copy-xs-bp-factor));
+  --ks-font-size-copy-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xs-bp-factor-phone) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xs-bp-factor-tablet) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xs-bp-factor-laptop) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-phone: calc(1 * var(--font-size-copy-s-bp-factor));
+  --ks-font-size-copy-s-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-s-bp-factor-phone) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-s-bp-factor-tablet) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-s-bp-factor-laptop) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-phone: calc(1 * var(--font-size-copy-m-bp-factor));
+  --ks-font-size-copy-m-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-m-bp-factor-phone) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-m-bp-factor-tablet) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-m-bp-factor-laptop) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-phone: calc(1 * var(--font-size-copy-l-bp-factor));
+  --ks-font-size-copy-l-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-l-bp-factor-phone) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-l-bp-factor-tablet) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-l-bp-factor-laptop) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-phone: calc(1 * var(--font-size-copy-xl-bp-factor));
+  --ks-font-size-copy-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xl-bp-factor-phone) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xl-bp-factor-tablet) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xl-bp-factor-laptop) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-phone: calc(1 * var(--font-size-copy-xxl-bp-factor));
+  --ks-font-size-copy-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-phone) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-tablet) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-laptop) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-phone: calc(1 * var(--font-size-interface-xxs-bp-factor));
+  --ks-font-size-interface-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-phone) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-tablet) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-laptop) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-phone: calc(1 * var(--font-size-interface-xs-bp-factor));
+  --ks-font-size-interface-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xs-bp-factor-phone) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xs-bp-factor-tablet) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xs-bp-factor-laptop) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-phone: calc(1 * var(--font-size-interface-s-bp-factor));
+  --ks-font-size-interface-s-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-s-bp-factor-phone) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-s-bp-factor-tablet) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-s-bp-factor-laptop) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-phone: calc(1 * var(--font-size-interface-m-bp-factor));
+  --ks-font-size-interface-m-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-m-bp-factor-phone) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-m-bp-factor-tablet) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-m-bp-factor-laptop) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-phone: calc(1 * var(--font-size-interface-l-bp-factor));
+  --ks-font-size-interface-l-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-l-bp-factor-phone) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-l-bp-factor-tablet) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-l-bp-factor-laptop) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-phone: calc(1 * var(--font-size-interface-xl-bp-factor));
+  --ks-font-size-interface-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xl-bp-factor-phone) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xl-bp-factor-tablet) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xl-bp-factor-laptop) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-phone: calc(1 * var(--font-size-interface-xxl-bp-factor));
+  --ks-font-size-interface-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-phone) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-tablet) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-laptop) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-phone: calc(1 * var(--font-size-mono-xxs-bp-factor));
+  --ks-font-size-mono-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-phone) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-tablet) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-laptop) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-phone: calc(1 * var(--font-size-mono-xs-bp-factor));
+  --ks-font-size-mono-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xs-bp-factor-phone) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xs-bp-factor-tablet) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xs-bp-factor-laptop) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-phone: calc(1 * var(--font-size-mono-s-bp-factor));
+  --ks-font-size-mono-s-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-s-bp-factor-phone) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-s-bp-factor-tablet) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-s-bp-factor-laptop) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-phone: calc(1 * var(--font-size-mono-m-bp-factor));
+  --ks-font-size-mono-m-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-m-bp-factor-phone) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-m-bp-factor-tablet) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-m-bp-factor-laptop) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-phone: calc(1 * var(--font-size-mono-l-bp-factor));
+  --ks-font-size-mono-l-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-l-bp-factor-phone) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-l-bp-factor-tablet) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-l-bp-factor-laptop) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-phone: calc(1 * var(--font-size-mono-xl-bp-factor));
+  --ks-font-size-mono-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xl-bp-factor-phone) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xl-bp-factor-tablet) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xl-bp-factor-laptop) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-phone: calc(1 * var(--font-size-mono-xxl-bp-factor));
+  --ks-font-size-mono-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-phone) * var(--font-size-mono-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-tablet) * var(--font-size-mono-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-laptop) * var(--font-size-mono-xxl-bp-factor)
+  );
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs: calc(var(--ks-font-size-display-xxs-base) * var(--ks-font-size-display-xxs-bp-factor, 1));
+  --ks-font-size-display-xs: calc(var(--ks-font-size-display-xs-base) * var(--ks-font-size-display-xs-bp-factor, 1));
+  --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-s-bp-factor, 1));
+  --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-m-bp-factor, 1));
+  --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-l-bp-factor, 1));
+  --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-xl-bp-factor, 1));
+  --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-xxl-bp-factor, 1));
+  --ks-font-size-copy-xxs: calc(var(--ks-font-size-copy-xxs-base) * var(--ks-font-size-copy-xxs-bp-factor, 1));
+  --ks-font-size-copy-xs: calc(var(--ks-font-size-copy-xs-base) * var(--ks-font-size-copy-xs-bp-factor, 1));
+  --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-s-bp-factor, 1));
+  --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-m-bp-factor, 1));
+  --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-l-bp-factor, 1));
+  --ks-font-size-copy-xl: calc(var(--ks-font-size-copy-xl-base) * var(--ks-font-size-copy-xl-bp-factor, 1));
+  --ks-font-size-copy-xxl: calc(var(--ks-font-size-copy-xxl-base) * var(--ks-font-size-copy-xxl-bp-factor, 1));
+  --ks-font-size-interface-xxs: calc(
+    var(--ks-font-size-interface-xxs-base) * var(--ks-font-size-interface-xxs-bp-factor, 1)
+  );
+  --ks-font-size-interface-xs: calc(
+    var(--ks-font-size-interface-xs-base) * var(--ks-font-size-interface-xs-bp-factor, 1)
+  );
+  --ks-font-size-interface-s: calc(var(--ks-font-size-interface-s-base) * var(--ks-font-size-interface-s-bp-factor, 1));
+  --ks-font-size-interface-m: calc(var(--ks-font-size-interface-m-base) * var(--ks-font-size-interface-m-bp-factor, 1));
+  --ks-font-size-interface-l: calc(var(--ks-font-size-interface-l-base) * var(--ks-font-size-interface-l-bp-factor, 1));
+  --ks-font-size-interface-xl: calc(
+    var(--ks-font-size-interface-xl-base) * var(--ks-font-size-interface-xl-bp-factor, 1)
+  );
+  --ks-font-size-interface-xxl: calc(
+    var(--ks-font-size-interface-xxl-base) * var(--ks-font-size-interface-xxl-bp-factor, 1)
+  );
+  --ks-font-size-mono-xxs: calc(var(--ks-font-size-mono-xxs-base) * var(--ks-font-size-mono-xxs-bp-factor, 1));
+  --ks-font-size-mono-xs: calc(var(--ks-font-size-mono-xs-base) * var(--ks-font-size-mono-xs-bp-factor, 1));
+  --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-s-bp-factor, 1));
+  --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-m-bp-factor, 1));
+  --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-l-bp-factor, 1));
+  --ks-font-size-mono-xl: calc(var(--ks-font-size-mono-xl-base) * var(--ks-font-size-mono-xl-bp-factor, 1));
+  --ks-font-size-mono-xxl: calc(var(--ks-font-size-mono-xxl-base) * var(--ks-font-size-mono-xxl-bp-factor, 1));
+}
+
+@media (min-width: 36em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-phone);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-phone);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-phone);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-phone);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-phone);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-phone);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-phone);
+    --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-phone);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-phone);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-phone);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-phone);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-phone);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-phone);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-phone);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-phone);
+    --ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-phone);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-phone);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-phone);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-phone);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-phone);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-phone);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-phone);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-phone);
+    --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-phone);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-phone);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-phone);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-phone);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-phone);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-phone);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-phone);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-phone);
+  }
+}
+@media (min-width: 48em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-tablet);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-tablet);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-tablet);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-tablet);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-tablet);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-tablet);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-tablet);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-tablet);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-tablet);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-tablet);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-tablet);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-tablet);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-tablet);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-tablet);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-tablet);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-tablet);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-tablet);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-tablet);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-tablet);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-tablet);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-tablet);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-tablet);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-tablet);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-tablet);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-tablet);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-tablet);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-tablet);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-tablet);
+  }
+}
+@media (min-width: 62em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-laptop);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-laptop);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-laptop);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-laptop);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-laptop);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-laptop);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-laptop);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-laptop);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-laptop);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-laptop);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-laptop);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-laptop);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-laptop);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-laptop);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-laptop);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-laptop);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-laptop);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-laptop);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-laptop);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-laptop);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-laptop);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-laptop);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-laptop);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-laptop);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-laptop);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-laptop);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-laptop);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-laptop);
+  }
+}
+@media (min-width: 75em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-desktop);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-desktop);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-desktop);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-desktop);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-desktop);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-desktop);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-desktop);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-desktop);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-desktop);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-desktop);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-desktop);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-desktop);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-desktop);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-desktop);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-desktop);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-desktop);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-desktop);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-desktop);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-desktop);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-desktop);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-desktop);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-desktop);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-desktop);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-desktop);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-desktop);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-desktop);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-desktop);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-desktop);
+  }
+}
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --spacing-base: 16px;
+  --spacing-shrink-factor: calc(var(--global-shrink-factor) * 1);
+  --spacing-grow-factor: calc(var(--global-grow-factor) * 1);
+  --spacing-bp-factor: calc(var(--global-bp-factor) * 1);
+  --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
+  --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
+  --spacing-s-bp-factor: calc(var(--spacing-xs-bp-factor) * var(--spacing-bp-factor));
+  --spacing-m-bp-factor: calc(var(--spacing-s-bp-factor) * var(--spacing-bp-factor));
+  --spacing-l-bp-factor: calc(var(--spacing-m-bp-factor) * var(--spacing-bp-factor));
+  --spacing-xl-bp-factor: calc(var(--spacing-l-bp-factor) * var(--spacing-bp-factor));
+  --spacing-xxl-bp-factor: calc(var(--spacing-xl-bp-factor) * var(--spacing-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs-base: calc(var(--ks-spacing-xs-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-m-base: var(--spacing-base);
+  --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--spacing-grow-factor));
+  --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--spacing-grow-factor));
+  --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--spacing-grow-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-tablet: calc(var(--ks-spacing-xxs-bp-factor-phone) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-laptop: calc(var(--ks-spacing-xxs-bp-factor-tablet) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-desktop: calc(var(--ks-spacing-xxs-bp-factor-laptop) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xs-bp-factor-phone: calc(1 * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--spacing-xs-bp-factor));
+  --ks-spacing-s-bp-factor-phone: calc(1 * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--spacing-s-bp-factor));
+  --ks-spacing-m-bp-factor-phone: calc(1 * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--spacing-m-bp-factor));
+  --ks-spacing-l-bp-factor-phone: calc(1 * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--spacing-l-bp-factor));
+  --ks-spacing-xl-bp-factor-phone: calc(1 * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-tablet: calc(var(--ks-spacing-xxl-bp-factor-phone) * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-laptop: calc(var(--ks-spacing-xxl-bp-factor-tablet) * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-desktop: calc(var(--ks-spacing-xxl-bp-factor-laptop) * var(--spacing-xxl-bp-factor));
+}
+
+:root,
+[ks-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));
+  --ks-spacing-stack: calc(var(--ks-spacing-stack-base) * var(--ks-spacing-stack-bp-factor, 1));
+  --ks-spacing-inline: calc(var(--ks-spacing-inline-base) * var(--ks-spacing-inline-bp-factor, 1));
+  --ks-spacing-inset: calc(var(--ks-spacing-inset-base) * var(--ks-spacing-inset-bp-factor, 1));
+  --ks-spacing-inset-squish: calc(var(--ks-spacing-inset-squish-base) * var(--ks-spacing-inset-squish-bp-factor, 1));
+  --ks-spacing-inset-stretch: calc(var(--ks-spacing-inset-stretch-base) * var(--ks-spacing-inset-stretch-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-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);
+  }
+}
 @font-face {
   font-family: "Google Sans 18pt";
   font-style: normal;