@dialpad/dialtone 7.10.1 → 7.10.2

package/lib/dist/css/dialtone.css

@@ -456,8 +456,8 @@ body {
   --avatar-gradient: conic-gradient(from var(--avatar-gradient-angle) at 50% 50%, var(--avatar-gradient-stop-1) 0deg, var(--avatar-gradient-stop-2) 180deg, var(--avatar-gradient-stop-3) 360deg);
   --avatar-size-shape: var(--size-600);
   --avatar-size-text: var(--fs-200);
-  --avatar-presence-position-right: var(--sun2);
-  --avatar-presence-position-bottom: var(--sun2);
+  --avatar-presence-position-right: calc(var(--space-200) * -1);
+  --avatar-presence-position-bottom: calc(var(--space-200) * -1);
   position: relative;
   display: flex;
   align-items: center;
@@ -486,38 +486,38 @@ body {
 }
 .d-avatar--xs {
   --avatar-size-shape: calc(var(--size-500) + var(--size-200));
-  --avatar-presence-position-right: var(--sun4);
-  --avatar-presence-position-bottom: var(--sun4);
+  --avatar-presence-position-right: calc(var(--space-300) * -1);
+  --avatar-presence-position-bottom: calc(var(--space-300) * -1);
 }
 .d-avatar--sm {
   --avatar-size-shape: calc(var(--size-500) + var(--size-400));
   --avatar-size-text: var(--fs-100);
-  --avatar-presence-position-right: var(--sun2);
-  --avatar-presence-position-bottom: var(--sun2);
+  --avatar-presence-position-right: calc(var(--space-200) * -1);
+  --avatar-presence-position-bottom: calc(var(--space-200) * -1);
 }
 .d-avatar--md {
   --avatar-size-shape: var(--size-600);
   --avatar-size-text: var(--fs-200);
-  --avatar-presence-position-right: var(--sun1);
-  --avatar-presence-position-bottom: var(--sun1);
+  --avatar-presence-position-right: calc(var(--space-100) * -1);
+  --avatar-presence-position-bottom: calc(var(--space-100) * -1);
 }
 .d-avatar--lg {
   --avatar-size-shape: calc(var(--size-600) + var(--size-500));
   --avatar-size-text: var(--fs-300);
-  --avatar-presence-position-right: var(--su1);
-  --avatar-presence-position-bottom: var(--su1);
+  --avatar-presence-position-right: var(--space-100);
+  --avatar-presence-position-bottom: var(--space-100);
 }
 .d-avatar--xl {
   --avatar-size-shape: var(--size-700);
   --avatar-size-text: var(--fs-400);
-  --avatar-presence-position-right: var(--su4);
-  --avatar-presence-position-bottom: var(--su4);
+  --avatar-presence-position-right: var(--space-300);
+  --avatar-presence-position-bottom: var(--space-300);
 }
 .d-badge {
   --badge-color-text: var(--fc-primary);
   --badge-color-background: var(--black-200);
   --badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
-  --badge-border-radius: var(--size-300);
+  --badge-radius: var(--size-300);
   --badge-line-height: var(--size-500);
   --badge-font-size: var(--fs-100);
   --badge-font-weight: var(--fw-semibold);
@@ -541,10 +541,10 @@ body {
   text-align: center;
   text-transform: var(--badge-text-case);
   background-color: var(--badge-color-background);
-  border-radius: var(--badge-border-radius);
+  border-radius: var(--badge-radius);
 }
 .d-badge--count {
-  --badge-border-radius: var(--br-pill);
+  --badge-radius: var(--br-pill);
   --badge-padding-x: calc(var(--space-400) - var(--space-100));
   --badge-padding-y: var(--space-300);
 }
@@ -561,11 +561,11 @@ body {
   --badge-color-background: var(--red-100);
 }
 .d-badge--bulletin {
-  --badge-color-text: var(--fc-primary-inverted);
+  --badge-color-text: var(--white);
   --badge-color-background: var(--purple-400);
 }
 .d-badge--ai {
-  --badge-color-text: var(--fc-primary-inverted);
+  --badge-color-text: var(--white);
   --badge-color-background: var(--magenta-300);
   background-image: var(--badge-color-background-ai);
 }
@@ -587,7 +587,7 @@ body {
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  min-height: var(--su48);
+  min-height: calc(var(--size-300) * 12);
   color: var(--banner--fc);
   font-size: var(--fs-200);
   line-height: var(--lh6);
@@ -596,7 +596,7 @@ body {
   box-shadow: none;
 }
 .d-banner[aria-hidden='true'] {
-  --topbar-height: var(--sun64);
+  --topbar-height: calc(var(--size-3) * 16);
   visibility: hidden;
   opacity: 0;
 }
@@ -619,7 +619,7 @@ body {
   max-width: 128rem;
   min-height: 100%;
   margin: 0 auto;
-  padding: var(--su8);
+  padding: var(--space-400);
 }
 .d-banner__dialog .d-notice__content {
   flex-direction: row;
@@ -676,18 +676,18 @@ body {
 .d-breadcrumbs .d-breadcrumbs__item {
   position: relative;
   margin: 0;
-  margin-left: var(--su6);
+  margin-left: var(--space-400);
   padding: 0;
   list-style: none;
 }
 .d-breadcrumbs .d-breadcrumbs__item:not(:last-of-type) {
-  margin-right: var(--su12);
+  margin-right: calc(var(--space-400) + var(--space-300));
 }
 .d-breadcrumbs .d-breadcrumbs__item:not(:last-of-type)::before {
   position: absolute;
-  right: var(--sun12);
-  margin-top: var(--su1);
-  color: var(--muted-color);
+  right: calc(calc(var(--space-400) + var(--space-300)) * -1);
+  margin-top: calc(var(--space-100) * -1);
+  color: var(--fc-tertiary);
   content: '/';
 }
 .d-breadcrumbs .d-breadcrumbs__item--selected .d-link {
@@ -701,26 +701,26 @@ body {
   color: var(--inverted-color);
 }
 .d-btn {
-  --button--fc: var(--primary-color);
-  --button--bgc: transparent;
-  --button--bc: transparent;
-  --button--br: var(--base--corner-radius);
+  --button-color-text: var(--purple-400);
+  --button-color-background: transparent;
+  --button-color-border: transparent;
+  --button-radius: var(--size-300);
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: calc(var(--su8) - var(--su1));
-  color: var(--button--fc);
+  padding: calc(var(--space-400) - var(--space-100));
+  color: var(--button-color-text);
   font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
   text-transform: inherit;
   text-decoration: none;
   vertical-align: middle;
-  background-color: var(--button--bgc);
-  border: 0.1rem solid var(--button--bc);
-  border-radius: var(--button--br);
+  background-color: var(--button-color-background);
+  border: var(--size-100) solid var(--button-color-border);
+  border-radius: var(--button-radius);
   box-shadow: var(--button--bs);
   cursor: pointer;
   transition-timing-function: var(--ttf-in-out);
@@ -730,14 +730,14 @@ body {
   fill: currentColor;
 }
 .d-btn:hover {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  3%);
+  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button-color-background: hsla(var(--purple-400-hsl)  /  3%);
 }
 .d-btn:active,
 .d-btn.d-btn--active,
 .d-btn.d-btn--active:active {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  9%);
+  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button-color-background: hsla(var(--purple-400-hsl)  /  9%);
 }
 .d-btn.focus-visible.js-focus-visible, .js-focus-visible .d-btn.focus-visible {
   outline: none;
@@ -759,7 +759,7 @@ body {
   height: 1.6rem;
 }
 .d-btn--xs {
-  padding: calc(var(--su6) - var(--su1)) calc(var(--su8) - var(--su1));
+  padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100));
   font-size: var(--fs-100);
 }
 .d-btn--xs .d-btn__icon .d-svg {
@@ -767,7 +767,7 @@ body {
   height: 1.2rem;
 }
 .d-btn--sm {
-  padding: calc(var(--su6) - var(--su1)) calc(var(--su8) - var(--su1));
+  padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100));
   font-size: var(--fs-200);
   line-height: var(--lh6);
 }
@@ -776,7 +776,7 @@ body {
   height: 1.4rem;
 }
 .d-btn--lg {
-  padding: calc(var(--su12) - var(--su1)) calc(var(--su16) - var(--su1));
+  padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100));
   font-size: var(--fs-300);
 }
 .d-btn--lg .d-btn__icon .d-svg {
@@ -784,7 +784,7 @@ body {
   height: 2rem;
 }
 .d-btn--xl {
-  padding: calc(var(--su12) - var(--su1)) calc(var(--su16) - var(--su1));
+  padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100));
   font-size: var(--fs-300);
   line-height: var(--lh8);
 }
@@ -806,13 +806,13 @@ body {
 }
 .d-btn__icon--left,
 .d-btn__icon--right {
-  margin-top: var(--sun4);
-  margin-bottom: var(--sun4);
+  margin-top: calc(var(--space-300) * -1);
+  margin-bottom: calc(var(--space-300) * -1);
 }
 .d-btn__icon--top,
 .d-btn__icon--bottom {
-  margin-right: var(--sun4);
-  margin-left: var(--sun4);
+  margin-right: calc(var(--space-300) * -1);
+  margin-left: calc(var(--space-300) * -1);
 }
 .d-btn__icon--left,
 .d-btn__icon--top {
@@ -823,42 +823,42 @@ body {
   order: 1;
 }
 .d-btn__icon--left:not(:only-child) {
-  margin-left: var(--sun2);
+  margin-left: calc(var(--space-200) * -1);
 }
 .d-btn__icon--right:not(:only-child) {
-  margin-right: var(--sun2);
+  margin-right: calc(var(--space-200) * -1);
 }
 .d-btn__icon--left ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--right {
-  margin-left: var(--su4);
+  margin-left: var(--space-300);
 }
 .d-btn__icon--right ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--left {
-  margin-right: var(--su4);
+  margin-right: var(--space-300);
 }
 .d-btn__icon--top ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--bottom {
-  margin-top: var(--su4);
+  margin-top: var(--space-300);
 }
 .d-btn__icon--bottom ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--top {
-  margin-bottom: var(--su4);
+  margin-bottom: var(--space-300);
 }
 .d-btn--circle {
-  --button--fc: var(--black-800);
-  --button--br: var(--br-circle);
-  padding: calc(var(--su8) + var(--su1));
+  --button-color-text: var(--black-800);
+  --button-radius: var(--br-circle);
+  padding: calc(var(--space-400) + var(--space-100));
   transition-duration: 150ms;
 }
 .d-btn--circle:hover {
-  --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+  --button-color-text: var(--muted-color-hover);
+  --button-color-background: hsla(var(--black-800-hsl)  /  3%);
 }
 .d-btn--circle:active,
 .d-btn--circle.d-btn--active,
 .d-btn--circle.d-btn--active:active {
-  --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
+  --button-color-text: var(--muted-color-hover);
+  --button-color-background: hsla(var(--black-800-hsl)  /  9%);
 }
 .d-btn--circle.focus-visible.js-focus-visible, .js-focus-visible .d-btn--circle.focus-visible {
   box-shadow: var(--bs-focus-ring-circle);
@@ -873,53 +873,53 @@ body {
   display: none;
 }
 .d-btn--circle.d-btn--outlined {
-  --button--bc: var(--black-700);
+  --button-color-border: var(--black-700);
 }
 .d-btn--circle.d-btn--xs {
-  padding: calc(var(--su8) - var(--su1));
-  --button--br: var(--br-circle);
+  padding: calc(var(--space-400) - var(--space-100));
+  --button-radius: var(--br-circle);
 }
 .d-btn--circle.d-btn--sm {
-  padding: var(--su8);
-  --button--br: var(--br-circle);
+  padding: var(--space-400);
+  --button-radius: var(--br-circle);
 }
 .d-btn--circle.d-btn--lg {
-  padding: calc(var(--su12) + var(--su1));
-  --button--br: var(--br-circle);
+  padding: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
+  --button-radius: var(--br-circle);
 }
 .d-btn--circle.d-btn--xl {
-  padding: calc(var(--su16) - var(--su1));
-  --button--br: var(--br-circle);
+  padding: calc(var(--space-500) - var(--space-100));
+  --button-radius: var(--br-circle);
 }
 .d-btn--outlined {
-  --button--bc: var(--primary-color);
+  --button-color-border: var(--purple-400);
 }
 .d-btn--primary {
-  --button--fc: var(--white);
-  --button--bgc: var(--primary-color);
+  --button-color-text: var(--white);
+  --button-color-background: var(--purple-400);
 }
 .d-btn--primary:hover {
-  --button--fc: var(--white);
-  --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+  --button-color-text: var(--white);
+  --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 5%));
 }
 .d-btn--primary:active,
 .d-btn--primary.d-btn--active,
 .d-btn--primary.d-btn--active:active {
-  --button--fc: var(--white);
-  --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
+  --button-color-text: var(--white);
+  --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 10%));
 }
 .d-btn--muted {
-  --button--fc: var(--muted-color);
+  --button-color-text: var(--muted-color);
 }
 .d-btn--muted:hover {
-  --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+  --button-color-text: var(--muted-color-hover);
+  --button-color-background: hsla(var(--black-800-hsl)  /  3%);
 }
 .d-btn--muted:active,
 .d-btn--muted.d-btn--active,
 .d-btn--muted.d-btn--active:active {
-  --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
+  --button-color-text: var(--muted-color-hover);
+  --button-color-background: hsla(var(--black-800-hsl)  /  9%);
 }
 .d-btn--muted.focus-visible.js-focus-visible, .js-focus-visible .d-btn--muted.focus-visible {
   box-shadow: var(--bs-focus-ring-muted);
@@ -928,20 +928,20 @@ body {
   box-shadow: var(--bs-focus-ring-muted);
 }
 .d-btn--muted.d-btn--outlined {
-  --button--bc: var(--black-600);
+  --button-color-border: var(--black-600);
 }
 .d-btn--danger {
-  --button--fc: var(--error-color);
+  --button-color-text: var(--error-color);
 }
 .d-btn--danger:hover {
-  --button--fc: var(--error-color-hover);
-  --button--bgc: hsla(var(--error-color-hsl)  /  6%);
+  --button-color-text: var(--error-color-hover);
+  --button-color-background: hsla(var(--error-color-hsl)  /  6%);
 }
 .d-btn--danger:active,
 .d-btn--danger.d-btn--active,
 .d-btn--danger.d-btn--active:active {
-  --button--fc: var(--error-color-hover);
-  --button--bgc: hsla(var(--error-color-hsl)  /  20%);
+  --button-color-text: var(--error-color-hover);
+  --button-color-background: hsla(var(--error-color-hsl)  /  20%);
 }
 .d-btn--danger.focus-visible.js-focus-visible, .js-focus-visible .d-btn--danger.focus-visible {
   box-shadow: var(--bs-focus-ring-error);
@@ -950,35 +950,35 @@ body {
   box-shadow: var(--bs-focus-ring-error);
 }
 .d-btn--danger.d-btn--outlined {
-  --button--bc: var(--error-color);
+  --button-color-border: var(--error-color);
 }
 .d-btn--danger.d-btn--primary {
-  --button--fc: var(--white);
-  --button--bgc: var(--error-color);
+  --button-color-text: var(--white);
+  --button-color-background: var(--error-color);
 }
 .d-btn--danger.d-btn--primary:hover {
-  --button--fc: var(--white);
-  --button--bgc: hsl(var(--red-300-h), var(--red-300-s), 40%);
+  --button-color-text: var(--white);
+  --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 40%);
 }
 .d-btn--danger.d-btn--primary:active,
 .d-btn--danger.d-btn--primary.d-btn--active,
 .d-btn--danger.d-btn--primary.d-btn--active:active {
-  --button--fc: var(--white);
-  --button--bgc: hsl(var(--red-300-h), var(--red-300-s), 27%);
+  --button-color-text: var(--white);
+  --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 27%);
 }
 .d-btn--inverted {
-  --button--fc: var(--white);
-  --button--bgc: transparent;
+  --button-color-text: var(--white);
+  --button-color-background: transparent;
 }
 .d-btn--inverted:hover {
-  --button--fc: var(--white);
-  --button--bgc: hsla(var(--white-hsl)  /  15%);
+  --button-color-text: var(--white);
+  --button-color-background: hsla(var(--white-hsl)  /  15%);
 }
 .d-btn--inverted:active,
 .d-btn--inverted.d-btn--active,
 .d-btn--inverted.d-btn--active:active {
-  --button--fc: var(--white);
-  --button--bgc: hsla(var(--white-hsl)  /  30%);
+  --button-color-text: var(--white);
+  --button-color-background: hsla(var(--white-hsl)  /  30%);
 }
 .d-btn--inverted.focus-visible.js-focus-visible, .js-focus-visible .d-btn--inverted.focus-visible {
   box-shadow: var(--bs-focus-ring-inverted);
@@ -987,24 +987,24 @@ body {
   box-shadow: var(--bs-focus-ring-inverted);
 }
 .d-btn--inverted.d-btn--outlined {
-  --button--bc: var(--white);
+  --button-color-border: var(--white);
 }
 .d-btn--inverted.d-btn--primary {
-  --button--fc: var(--primary-color);
-  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
+  --button-color-text: var(--purple-400);
+  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 }
 .d-btn--inverted.d-btn--primary:hover {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
+  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
 }
 .d-btn--inverted.d-btn--primary:active,
 .d-btn--inverted.d-btn--primary.d-btn--active,
 .d-btn--inverted.d-btn--primary.d-btn--active:active {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
+  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
 }
 .d-btn--icon-only {
-  padding: calc(var(--su8) + var(--su1));
+  padding: calc(var(--space-400) + var(--space-100));
 }
 .d-btn--icon-only .d-btn__icon {
   margin: unset;
@@ -1019,9 +1019,9 @@ body {
 }
 .d-btn--loading::before {
   position: absolute;
-  width: var(--su16);
-  height: var(--su16);
-  border: var(--su2) solid currentColor;
+  width: var(--size-500);
+  height: var(--size-500);
+  border: var(--size-200) solid currentColor;
   border-left-color: transparent !important;
   border-radius: var(--br-circle);
   animation: d-loading-circle 900ms infinite linear;
@@ -1046,10 +1046,10 @@ body {
   background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
 }
 .d-btn--brand.focus-visible.js-focus-visible, .js-focus-visible .d-btn--brand.focus-visible {
-  box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l)  /  90%);
+  box-shadow: 0 0 0 var(--space-100) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l)  /  90%);
 }
 .d-btn--brand:focus-visible {
-  box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l)  /  90%);
+  box-shadow: 0 0 0 var(--space-100) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l)  /  90%);
 }
 .d-btn--brand:active {
   background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
@@ -1059,8 +1059,8 @@ body {
   justify-content: center;
   width: 2em;
   height: 2em;
-  margin-right: var(--su8);
-  margin-left: var(--sun4);
+  margin-right: var(--space-400);
+  margin-left: calc(var(--space-300) * -1);
   background-color: var(--white);
   border-radius: var(--br2);
 }
@@ -1099,7 +1099,7 @@ body {
   flex-direction: column;
   justify-content: center;
   background: var(--white);
-  border-radius: var(--su4);
+  border-radius: var(--size-300);
   box-shadow: var(--bs-card);
 }
 .d-card__header {
@@ -1107,16 +1107,16 @@ body {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: var(--su8) var(--su8) 0 var(--su16);
+  padding: var(--size-500) var(--size-500) 0;
 }
 .d-card__content {
-  padding: var(--su16);
+  padding: var(--size-500);
   overflow-y: auto;
 }
 .d-card__footer {
   display: flex;
   align-items: center;
-  padding: var(--su8);
+  padding: 0 var(--size-500) var(--size-500);
 }
 .d-chip {
   position: relative;
@@ -1124,29 +1124,29 @@ body {
   align-items: center;
 }
 .d-chip__label {
-  --chip--fc: var(--fc-primary);
-  --chip--bgc: var(--black-200);
-  --chip--br: var(--su102);
+  --chip-color-text: var(--fc-primary);
+  --chip-color-background: var(--black-200);
+  --chip-border-radius: var(--br-pill);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: var(--su4) var(--su8);
-  color: var(--chip--fc);
+  padding: var(--space-300) var(--space-400);
+  color: var(--chip-color-text);
   font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
-  background-color: var(--chip--bgc);
+  background-color: var(--chip-color-background);
   border: none;
-  border-radius: var(--chip--br);
+  border-radius: var(--chip-border-radius);
   transition-timing-function: var(--ttf-in-out);
   transition-duration: 75ms;
   transition-property: background-color;
 }
 .d-chip__label:not(:only-child)::after {
   flex-shrink: 0;
-  width: calc(var(--su16) + var(--su2));
-  height: calc(var(--su16) + var(--su2));
+  width: calc(var(--size-500) + var(--space-200));
+  height: calc(var(--size-500) + var(--space-200));
   content: '';
 }
 .d-chip__label:is(a),
@@ -1160,14 +1160,14 @@ body {
 .d-chip__label:is(button):hover,
 .d-chip__label:is([role='button']):hover,
 .d-chip__label:is([role='link']):hover {
-  --chip--bgc: var(--black-300);
+  --chip-color-background: var(--black-300);
   text-decoration: none;
 }
 .d-chip__label:is(a):active,
 .d-chip__label:is(button):active,
 .d-chip__label:is([role='button']):active,
 .d-chip__label:is([role='link']):active {
-  --chip--bgc: var(--black-400);
+  --chip-color-background: var(--black-400);
 }
 .d-chip__label:is(a).focus-visible.js-focus-visible,
 .js-focus-visible .d-chip__label:is(a).focus-visible,
@@ -1188,34 +1188,34 @@ body {
   box-shadow: var(--bs-focus-ring-muted);
 }
 .d-chip__label .d-avatar {
-  --avatar-size-shape: var(--su24);
-  margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
+  --avatar-size-shape: calc(var(--size-600) - var(--space-400));
+  margin: calc(var(--space-200) * -1) var(--space-300) calc(var(--space-200) * -1) calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .d-chip__label .d-svg {
   width: 1.8rem;
   height: 1.8rem;
 }
 .d-chip__close {
-  --button--fc: var(--primary-color);
-  --button--bgc: transparent;
-  --button--bc: transparent;
-  --button--br: var(--base--corner-radius);
+  --button-color-text: var(--purple-400);
+  --button-color-background: transparent;
+  --button-color-border: transparent;
+  --button-radius: var(--size-300);
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: calc(var(--su8) - var(--su1));
-  color: var(--button--fc);
+  padding: calc(var(--space-400) - var(--space-100));
+  color: var(--button-color-text);
   font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
   text-transform: inherit;
   text-decoration: none;
   vertical-align: middle;
-  background-color: var(--button--bgc);
-  border: 0.1rem solid var(--button--bc);
-  border-radius: var(--button--br);
+  background-color: var(--button-color-background);
+  border: var(--size-100) solid var(--button-color-border);
+  border-radius: var(--button-radius);
   box-shadow: var(--button--bs);
   cursor: pointer;
   transition-timing-function: var(--ttf-in-out);
@@ -1223,24 +1223,24 @@ body {
   transition-property: background-color, border, box-shadow;
   user-select: none;
   fill: currentColor;
-  --button--fc: var(--black-800);
-  --button--br: var(--br-circle);
-  padding: calc(var(--su8) + var(--su1));
+  --button-color-text: var(--black-800);
+  --button-radius: var(--br-circle);
+  padding: calc(var(--space-400) + var(--space-100));
   transition-duration: 150ms;
   position: absolute;
-  right: var(--su2);
-  padding: calc(var(--su2) + var(--su1));
-  border-width: var(--su0);
+  right: var(--space-200);
+  padding: calc(var(--space-200) + var(--space-100));
+  border-width: 0;
 }
 .d-chip__close:hover {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  3%);
+  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button-color-background: hsla(var(--purple-400-hsl)  /  3%);
 }
 .d-chip__close:active,
 .d-chip__close.d-btn--active,
 .d-chip__close.d-btn--active:active {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  9%);
+  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button-color-background: hsla(var(--purple-400-hsl)  /  9%);
 }
 .d-chip__close.focus-visible.js-focus-visible, .js-focus-visible .d-chip__close.focus-visible {
   outline: none;
@@ -1262,14 +1262,14 @@ body {
   height: 1.6rem;
 }
 .d-chip__close:hover {
-  --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+  --button-color-text: var(--muted-color-hover);
+  --button-color-background: hsla(var(--black-800-hsl)  /  3%);
 }
 .d-chip__close:active,
 .d-chip__close.d-btn--active,
 .d-chip__close.d-btn--active:active {
-  --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
+  --button-color-text: var(--muted-color-hover);
+  --button-color-background: hsla(var(--black-800-hsl)  /  9%);
 }
 .d-chip__close.focus-visible.js-focus-visible, .js-focus-visible .d-chip__close.focus-visible {
   box-shadow: var(--bs-focus-ring-circle);
@@ -1284,23 +1284,23 @@ body {
   display: none;
 }
 .d-chip__close.d-btn--outlined {
-  --button--bc: var(--black-700);
+  --button-color-border: var(--black-700);
 }
 .d-chip__close.d-btn--xs {
-  padding: calc(var(--su8) - var(--su1));
-  --button--br: var(--br-circle);
+  padding: calc(var(--space-400) - var(--space-100));
+  --button-radius: var(--br-circle);
 }
 .d-chip__close.d-btn--sm {
-  padding: var(--su8);
-  --button--br: var(--br-circle);
+  padding: var(--space-400);
+  --button-radius: var(--br-circle);
 }
 .d-chip__close.d-btn--lg {
-  padding: calc(var(--su12) + var(--su1));
-  --button--br: var(--br-circle);
+  padding: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
+  --button-radius: var(--br-circle);
 }
 .d-chip__close.d-btn--xl {
-  padding: calc(var(--su16) - var(--su1));
-  --button--br: var(--br-circle);
+  padding: calc(var(--space-500) - var(--space-100));
+  --button-radius: var(--br-circle);
 }
 .d-chip__close::before {
   position: absolute;
@@ -1319,14 +1319,14 @@ body {
   height: 1.8rem;
 }
 .d-chip__icon {
-  padding-right: var(--su4);
+  padding-right: var(--space-300);
   line-height: 0;
 }
 .d-chip__label--active {
   background-color: var(--black-400);
 }
 .d-chip__label--xs {
-  padding: var(--su2) var(--su6);
+  padding: var(--space-200) calc(var(--space-200) + var(--space-300));
   font-size: var(--fs-100);
 }
 .d-chip__label--xs .d-svg {
@@ -1335,28 +1335,28 @@ body {
 }
 .d-chip__label--xs:not(:only-child)::after {
   flex-shrink: 0;
-  width: var(--su12);
-  height: var(--su12);
+  width: calc(var(--size-400) + var(--size-300));
+  height: calc(var(--size-400) + var(--size-300));
   content: '';
 }
 .d-chip__label--xs .d-avatar {
-  --avatar-size-shape: var(--su16);
-  margin-right: var(--su4);
-  margin-left: var(--sun4);
+  --avatar-size-shape: var(--size-500);
+  margin-right: var(--space-300);
+  margin-left: calc(var(--space-300) * -1);
 }
 .d-chip__close--xs {
-  padding: var(--su1);
+  padding: var(--space-100);
 }
 .d-chip__close--xs::before {
-  width: var(--su24);
-  height: var(--su24);
+  width: calc(var(--size-600) - var(--size-400));
+  height: calc(var(--size-600) - var(--size-400));
 }
 .d-chip__close--xs .d-btn__icon .d-svg {
   width: 1.4rem;
   height: 1.4rem;
 }
 .d-chip__label--sm {
-  padding: var(--su2) var(--su8);
+  padding: var(--space-200) var(--space-400);
   font-size: var(--fs-200);
 }
 .d-chip__label--sm .d-svg {
@@ -1365,29 +1365,29 @@ body {
 }
 .d-chip__label--sm:not(:only-child)::after {
   flex-shrink: 0;
-  width: calc(var(--su12) + var(--su2));
-  height: calc(var(--su12) + var(--su2));
+  width: calc(var(--size-500) - var(--size-200));
+  height: calc(var(--size-500) - var(--size-200));
   content: '';
 }
 .d-chip__label--sm .d-avatar {
-  --avatar-size-shape: calc(var(--su24) - var(--su4));
-  margin-right: var(--su4);
-  margin-left: var(--sun6);
+  --avatar-size-shape: calc(var(--size-500) + var(--size-300));
+  margin-right: var(--space-300);
+  margin-left: calc(var(--space-300) + var(--space-200));
 }
 .d-chip__close--sm {
-  padding: var(--su2);
+  padding: var(--space-200);
 }
 .d-chip__close--sm::before {
-  width: var(--su24);
-  height: var(--su24);
+  width: calc(var(--size-600) - var(--space-400));
+  height: calc(var(--size-600) - var(--space-400));
 }
 .d-chip__close--sm .d-btn__icon .d-svg {
   width: 1.6rem;
   height: 1.6rem;
 }
 fieldset {
-  min-width: var(--su0);
-  padding: var(--su0);
+  min-width: 0;
+  padding: 0;
   border: none;
 }
 .d-label {
@@ -1396,7 +1396,7 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200));
   color: currentColor;
   font-weight: 700;
   font-size: var(--fs-200);
@@ -1428,7 +1428,7 @@ legend .d-label {
 .d-description {
   display: flex;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200));
   color: var(--black-600);
   font-size: var(--fs-100);
   font-family: inherit;
@@ -1436,7 +1436,7 @@ legend .d-label {
   fill: currentColor;
 }
 .d-label + .d-description {
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .d-description--lg {
   font-size: var(--fs-200);
@@ -1449,8 +1449,9 @@ legend .d-label {
 .d-validation-message {
   --validation--fc: var(--fc-tertiary);
   display: inline-flex;
+  gap: var(--space-300);
   align-items: flex-start;
-  margin-top: var(--su6);
+  margin-top: calc(var(--space-300) + var(--space-200));
   color: var(--validation--fc);
   font-weight: inherit;
   font-size: var(--fs-100);
@@ -1458,10 +1459,9 @@ legend .d-label {
   line-height: var(--lh4);
 }
 .d-validation-message::before {
-  width: var(--su16);
-  min-width: var(--su16);
-  height: var(--su16);
-  margin-right: var(--su4);
+  width: var(--size-500);
+  min-width: var(--size-500);
+  height: var(--size-500);
   content: '';
 }
 .d-validation-message--warning {
@@ -1488,24 +1488,24 @@ legend .d-label {
 .d-input,
 .d-textarea,
 .d-input__wrapper {
-  --input--focus-bc: var(--primary-color);
-  --input--bc: var(--black-600);
-  --input--bgc: var(--white);
-  --input--fc: var(--black-800);
+  --input-color-border-focus: var(--purple-400);
+  --input-color-border: var(--black-600);
+  --input-color-background: var(--white);
+  --input-color-text: var(--black-800);
   position: relative;
   display: inline-flex;
   flex: 1 0%;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  padding: 0.7rem var(--su8);
-  color: var(--input--fc);
+  padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
+  color: var(--input-color-text);
   font-weight: inherit;
   font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
-  background-color: var(--input--bgc);
-  border: 1px solid var(--input--bc);
+  background-color: var(--input-color-background);
+  border: 1px solid var(--input-color-border);
   border-radius: var(--base--corner-radius);
   outline: none;
   box-shadow: none;
@@ -1529,7 +1529,7 @@ legend .d-label {
 .d-input:focus-within,
 .d-textarea:focus-within,
 .d-input__wrapper:focus-within {
-  --input--bc: var(--input--focus-bc);
+  --input-color-border: var(--input-color-border-focus);
   outline: 0;
   box-shadow: var(--bs-focus-ring) !important;
 }
@@ -1539,9 +1539,9 @@ legend .d-label {
 .d-input[read-only],
 .d-textarea[read-only],
 .d-input__wrapper[read-only] {
-  --input--bc: var(--black-400) !important;
-  --input--bgc: var(--black-300);
-  --input--fc: var(--fc-disabled);
+  --input-color-border: var(--black-400) !important;
+  --input-color-background: var(--black-300);
+  --input-color-text: var(--fc-disabled);
 }
 .d-input[disabled]:focus,
 .d-textarea[disabled]:focus,
@@ -1574,10 +1574,10 @@ legend .d-label {
   padding: 0;
 }
 .d-input__wrapper .d-input-icon.d-input-icon--right {
-  margin-right: var(--su8);
+  margin-right: var(--space-400);
 }
 .d-input__wrapper .d-input-icon.d-input-icon--left {
-  margin-left: var(--su8);
+  margin-left: var(--space-400);
 }
 .d-input__wrapper .d-input,
 .d-input__wrapper .d-textarea {
@@ -1593,15 +1593,15 @@ legend .d-label {
 }
 .d-input__wrapper .d-input.d-input-icon--right,
 .d-input__wrapper .d-textarea.d-input-icon--right {
-  padding-right: var(--su6);
+  padding-right: calc(var(--space-300) + var(--space-200));
 }
 .d-input__wrapper .d-input.d-input-icon--left,
 .d-input__wrapper .d-textarea.d-input-icon--left {
-  padding-left: var(--su6);
+  padding-left: calc(var(--space-300) + var(--space-200));
 }
 .d-input.d-input--xs {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: var(--space-100 / 2);
+  padding-bottom: calc(var(--space-400) + var(--space-100));
   font-size: var(--fs-100);
 }
 .d-input.d-input--xs .d-btn__icon {
@@ -1609,8 +1609,9 @@ legend .d-label {
   height: 1.4rem;
 }
 .d-input.d-input--sm {
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  --padding-y: calc(var(--space-300) + var(--space-200));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-200);
 }
 .d-input.d-input--sm .d-btn__icon {
@@ -1618,8 +1619,9 @@ legend .d-label {
   height: 1.6rem;
 }
 .d-input.d-input--lg {
-  padding-top: 1.1rem;
-  padding-bottom: 1.1rem;
+  --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-300);
 }
 .d-input.d-input--lg .d-btn__icon {
@@ -1627,8 +1629,9 @@ legend .d-label {
   height: 2rem;
 }
 .d-input.d-input--xl {
-  padding-top: 1.3rem;
-  padding-bottom: 1.3rem;
+  --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-300);
 }
 .d-input.d-input--xl .d-btn__icon {
@@ -1636,44 +1639,47 @@ legend .d-label {
   height: 2.4rem;
 }
 .d-textarea {
-  min-height: 8rem;
+  min-height: calc(var(--size-300) * 20);
   vertical-align: top;
 }
 .d-textarea--xs {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: var(--space-100 / 2);
+  padding-bottom: calc(var(--space-400) + var(--space-100));
   font-size: var(--fs-100);
-  min-height: 4rem;
+  min-height: calc(var(--size-300) * 10);
 }
 .d-textarea--xs .d-btn__icon {
   width: 1.4rem;
   height: 1.4rem;
 }
 .d-textarea--sm {
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  --padding-y: calc(var(--space-300) + var(--space-200));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-200);
-  min-height: 4.8rem;
+  min-height: calc(var(--size-300) * 12);
 }
 .d-textarea--sm .d-btn__icon {
   width: 1.6rem;
   height: 1.6rem;
 }
 .d-textarea--lg {
-  padding-top: 1.1rem;
-  padding-bottom: 1.1rem;
+  --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-300);
-  min-height: 9.2rem;
+  min-height: calc(var(--size-300) * 23);
 }
 .d-textarea--lg .d-btn__icon {
   width: 2rem;
   height: 2rem;
 }
 .d-textarea--xl {
-  padding-top: 1.3rem;
-  padding-bottom: 1.3rem;
+  --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-300);
-  min-height: 10rem;
+  min-height: calc(var(--size-300) * 25);
 }
 .d-textarea--xl .d-btn__icon {
   width: 2.4rem;
@@ -1681,8 +1687,8 @@ legend .d-label {
 }
 .d-input--warning,
 .d-textarea--warning {
-  --input--bc: var(--warning-color) !important;
-  --input--focus-bc: var(--warning-color);
+  --input-color-border: var(--warning-color) !important;
+  --input-color-border-focus: var(--warning-color);
 }
 .d-input--warning:focus,
 .d-textarea--warning:focus,
@@ -1692,8 +1698,8 @@ legend .d-label {
 }
 .d-input--error,
 .d-textarea--error {
-  --input--bc: var(--error-color) !important;
-  --input--focus-bc: var(--error-color);
+  --input-color-border: var(--error-color) !important;
+  --input-color-border-focus: var(--error-color);
 }
 .d-input--error:focus,
 .d-textarea--error:focus,
@@ -1703,8 +1709,8 @@ legend .d-label {
 }
 .d-input--success,
 .d-textarea--success {
-  --input--bc: var(--success-color) !important;
-  --input--focus-bc: var(--success-color);
+  --input-color-border: var(--success-color) !important;
+  --input-color-border-focus: var(--success-color);
 }
 .d-input--success:focus,
 .d-textarea--success:focus,
@@ -1713,11 +1719,11 @@ legend .d-label {
   box-shadow: var(--bs-focus-ring-success) !important;
 }
 .d-input-icon {
-  --input-icon-size: 1.6rem;
+  --input-icon-size: var(--size-500);
   z-index: var(--zi-base1);
   display: inline-flex;
   align-items: center;
-  height: 3.6rem;
+  height: calc(var(--size-300) * 9);
   margin: 0;
   line-height: 0;
 }
@@ -1726,25 +1732,25 @@ legend .d-label {
   height: var(--input-icon-size);
 }
 .d-input-icon.d-input--xs {
-  height: 2.8rem;
+  height: calc(var(--size-600) - var(--size-300));
 }
 .d-input-icon--xs {
   --input-icon-size: 1.2rem;
 }
 .d-input-icon.d-input--sm {
-  height: 3.2rem;
+  height: var(--size-600);
 }
 .d-input-icon--sm {
   --input-icon-size: 1.4rem;
 }
 .d-input-icon.d-input--lg {
-  height: 4.8rem;
+  height: calc(var(--size-300) * 12);
 }
 .d-input-icon--lg {
   --input-icon-size: 2rem;
 }
 .d-input-icon.d-input--xl {
-  height: 5.6rem;
+  height: calc(var(--size-300) * 14);
 }
 .d-input-icon--xl {
   --input-icon-size: 2.4rem;
@@ -1755,9 +1761,9 @@ legend .d-label {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  margin: var(--su0);
-  padding: var(--su0);
-  color: var(--primary-color);
+  margin: 0;
+  padding: 0;
+  color: var(--purple-400);
   font: inherit;
   text-decoration: underline;
   background-color: transparent;
@@ -1769,19 +1775,19 @@ legend .d-label {
   fill: currentColor;
 }
 .d-link:hover {
-  color: var(--primary-color-hover);
+  color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
   text-decoration: none;
   cursor: pointer;
 }
 .d-link.focus-visible.js-focus-visible, .js-focus-visible .d-link.focus-visible {
   border-radius: var(--br4);
   outline: none;
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
 }
 .d-link:focus-visible {
   border-radius: var(--br4);
   outline: none;
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
 }
 .d-link--warning {
   color: var(--fc-warning);
@@ -1790,10 +1796,10 @@ legend .d-label {
   color: var(--fc-warning-hover);
 }
 .d-link--warning.focus-visible.js-focus-visible, .js-focus-visible .d-link--warning.focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-warning);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
 }
 .d-link--warning:focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-warning);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
 }
 .d-link--danger {
   color: var(--fc-error);
@@ -1802,10 +1808,10 @@ legend .d-label {
   color: var(--error-color-hover);
 }
 .d-link--danger.focus-visible.js-focus-visible, .js-focus-visible .d-link--danger.focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-error);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
 }
 .d-link--danger:focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-error);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
 }
 .d-link--success {
   color: var(--fc-success);
@@ -1814,10 +1820,10 @@ legend .d-label {
   color: var(--success-color-hover);
 }
 .d-link--success.focus-visible.js-focus-visible, .js-focus-visible .d-link--success.focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-success);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
 }
 .d-link--success:focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-success);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
 }
 .d-link--muted {
   color: var(--muted-color);
@@ -1826,10 +1832,10 @@ legend .d-label {
   color: var(--muted-color-hover);
 }
 .d-link--muted.focus-visible.js-focus-visible, .js-focus-visible .d-link--muted.focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-muted);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
 }
 .d-link--muted:focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-muted);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
 }
 .d-link[disabled],
 .d-link--disabled {
@@ -1852,10 +1858,10 @@ legend .d-label {
   color: var(--inverted-color-hover);
 }
 .d-link--inverted.focus-visible.js-focus-visible, .js-focus-visible .d-link--inverted.focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-inverted);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
 }
 .d-link--inverted:focus-visible {
-  box-shadow: 0 0 0 var(--su2) var(--focus-ring-inverted);
+  box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
 }
 .d-link--inverted-disabled {
   color: var(--black-500);
@@ -1877,7 +1883,7 @@ legend .d-label {
 .d-list-group--header,
 .d-list-group--link {
   display: block;
-  padding: var(--su4) var(--su24);
+  padding: var(--size-300) calc(var(--size-300) * 6);
 }
 .d-list-group--header {
   font-weight: var(--fw-bold);
@@ -1891,21 +1897,21 @@ legend .d-label {
 }
 .d-list-group--link:hover {
   color: var(--black-900);
-  background-color: hsla(var(--primary-color-hsl)  /  85%);
+  background-color: hsla(var(--purple-400-hsl)  /  85%);
 }
 .d-list-group--link-selected {
   color: var(--white);
-  background-color: var(--primary-color);
+  background-color: var(--purple-400);
 }
 .d-list-group--link-selected:hover {
   color: var(--white);
-  background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
+  background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
 }
 .d-modal {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  60%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  60%);
+  --modal-dialog-color-background: var(--white);
+  --modal-dialog-color-text: var(--fc-tertiary);
+  --modal-header-color-text: var(--fc-secondary);
   position: fixed;
   top: 0;
   right: 0;
@@ -1916,18 +1922,15 @@ legend .d-label {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
-  background-color: var(--modal--bgc);
+  padding: var(--space-600);
+  background-color: var(--modal-color-background);
   backface-visibility: hidden;
   visibility: hidden;
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
 .d-modal--transparent {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  85%);
   position: fixed;
   top: 0;
   right: 0;
@@ -1938,7 +1941,7 @@ legend .d-label {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
+  padding: var(--space-600);
   background-color: var(--d-bgc-transparent);
   backface-visibility: hidden;
   visibility: hidden;
@@ -1949,13 +1952,13 @@ legend .d-label {
   position: relative;
   z-index: var(--zi-hide);
   width: 100%;
-  max-width: var(--size628);
+  max-width: calc(var(--size-300) * 157);
   max-height: 100%;
   overflow-y: auto;
-  color: var(--modal-dialog--fc);
+  color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh8);
-  background-color: var(--modal-dialog--bgc);
+  background-color: var(--modal-dialog-color-background);
   border-radius: var(--br8);
   box-shadow: var(--bs-card);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
@@ -1974,42 +1977,44 @@ legend .d-label {
   opacity: 1;
 }
 .d-modal__footer {
+  --modal-footer-padding: calc(var(--space-300) * 6);
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  padding: 0 var(--su24) var(--su24) var(--su24);
+  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
 }
 .d-modal__footer > :not(:first-child) {
-  margin-right: var(--su4);
+  margin-right: var(--space-300);
 }
 .d-modal__footer > :not(:last-child) {
-  margin-left: var(--su4);
+  margin-left: var(--space-300);
 }
 .d-modal__header {
+  --modal-header-padding: calc(var(--space-300) * 6);
   margin: 0 !important;
-  padding: var(--su24) var(--su24) 0;
-  color: var(--modal-header--fc);
+  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
+  color: var(--modal-header-color-text);
   font-weight: var(--fw-bold);
   font-size: var(--fs-300);
   line-height: var(--lh4);
 }
 .d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0;
-  padding: var(--su4) var(--su24);
+  margin: calc(var(--space-300) * 3) 0;
+  padding: var(--space-300) calc(var(--space-300) * 6);
 }
 .d-modal__close {
   position: absolute;
-  top: var(--su8);
-  right: var(--su8);
+  top: var(--space-400);
+  right: var(--space-400);
   margin: 0 !important;
 }
 .d-modal__banner {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12) var(--su24);
+  max-width: calc(var(--size-300) * 157);
+  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
   font-size: var(--fs-200);
   line-height: var(--lh4);
   background-color: var(--gold-100);
@@ -2033,19 +2038,19 @@ legend .d-label {
   transform: unset !important;
 }
 .d-modal--full .d-modal__header {
-  padding: var(--su32) var(--su32) 0;
+  padding: var(--space-600) var(--space-600) 0;
 }
 .d-modal--full .d-modal__content {
   padding-right: 0;
-  padding-left: var(--su32);
+  padding-left: var(--space-600);
 }
 .d-modal--full .d-modal__footer {
   margin-top: auto !important;
-  padding: 0 var(--su24) var(--su32) var(--su32);
+  padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600);
 }
 .d-modal--full .d-modal__banner {
   max-width: unset;
-  padding: var(--su12) var(--su32);
+  padding: calc(var(--space-300) * 3) var(--space-600);
   border-radius: 0;
 }
 .d-modal__dialog--scrollable {
@@ -2057,7 +2062,7 @@ legend .d-label {
   overflow-y: auto;
 }
 .d-modal--danger {
-  --modal-header--fc: var(--fc-dark);
+  --modal-header-color-text: var(--fc-secondary);
 }
 .d-modal--animate {
   z-index: var(--zi-hide) !important;
@@ -2106,7 +2111,7 @@ legend .d-label {
 }
 .d-toast-wrapper {
   position: absolute;
-  top: var(--su32);
+  top: var(--size-600);
   left: 50%;
   transform: translateX(-50%);
 }
@@ -2114,19 +2119,19 @@ legend .d-label {
   margin-top: 0.8rem !important;
 }
 .d-toast {
-  --toast--bgc: var(--black-100);
-  --toast--fc: var(--fc-primary);
+  --toast-color-background: var(--black-100);
+  --toast-color-text: var(--fc-primary);
   z-index: var(--zi-notification);
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  margin-bottom: var(--su8);
-  padding: var(--su12);
-  color: var(--toast--fc);
+  max-width: calc(var(--size-300) * 157);
+  margin-bottom: var(--space-400);
+  padding: calc(var(--space-300) * 3);
+  color: var(--toast-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh6);
   word-break: normal;
-  background-color: var(--toast--bgc);
+  background-color: var(--toast-color-background);
   border-radius: var(--br4);
   box-shadow: var(--bs-md) !important;
 }
@@ -2147,45 +2152,45 @@ legend .d-label {
   align-items: center;
 }
 .d-toast__dialog .d-notice__content {
-  margin-right: var(--su16);
+  margin-right: var(--space-500);
 }
 .d-toast__dialog .d-notice__actions {
-  margin-left: var(--su32);
+  margin-left: var(--space-600);
 }
 .d-toast.d-toast--important {
-  --toast--bgc: var(--black-800);
-  --toast--fc: var(--black-100);
+  --toast-color-background: var(--black-800);
+  --toast-color-text: var(--black-100);
 }
 .d-toast--error {
-  --toast--bgc: var(--red-100);
-  --toast--fc: var(--red-500);
+  --toast-color-background: var(--red-100);
+  --toast-color-text: var(--red-500);
 }
 .d-toast--error.d-toast--important {
-  --toast--bgc: var(--red-300);
-  --toast--fc: var(--white);
+  --toast-color-background: var(--red-300);
+  --toast-color-text: var(--white);
 }
 .d-toast--info {
-  --toast--bgc: var(--purple-100);
-  --toast--fc: var(--fc-primary);
+  --toast-color-background: var(--purple-100);
+  --toast-color-text: var(--fc-primary);
 }
 .d-toast--info.d-toast--important {
-  --toast--bgc: var(--purple-400);
-  --toast--fc: var(--white);
+  --toast-color-background: var(--purple-400);
+  --toast-color-text: var(--white);
 }
 .d-toast--success {
-  --toast--bgc: var(--green-100);
-  --toast--fc: var(--green-500);
+  --toast-color-background: var(--green-100);
+  --toast-color-text: var(--green-500);
 }
 .d-toast--success.d-toast--important {
-  --toast--bgc: var(--green-200);
-  --toast--fc: var(--green-500);
+  --toast-color-background: var(--green-200);
+  --toast-color-text: var(--green-500);
 }
 .d-toast--warning {
-  --toast--bgc: var(--gold-100);
+  --toast-color-background: var(--gold-100);
 }
 .d-toast--warning.d-toast--important {
-  --toast--bgc: var(--gold-200);
-  --toast--fc: var(--fc-primary);
+  --toast-color-background: var(--gold-200);
+  --toast-color-text: var(--fc-primary);
 }
 .d-toast--chat .d-notice__icon,
 .d-toast--chat .d-toast__meta {
@@ -2200,7 +2205,7 @@ legend .d-label {
 }
 .d-toast--organizer,
 .d-toast--viewing {
-  border-top: var(--su4) solid var(--magenta-300);
+  border-top: var(--size-300) solid var(--magenta-300);
 }
 .d-toast--organizer .d-notice__icon,
 .d-toast--viewing .d-notice__icon {
@@ -2209,7 +2214,7 @@ legend .d-label {
 .d-toast--chat,
 .d-toast--organizer,
 .d-toast--viewing {
-  --toast--bgc: var(--white);
+  --toast-color-background: var(--white);
 }
 .d-toast--chat .d-notice__icon,
 .d-toast--organizer .d-notice__icon,
@@ -2224,22 +2229,22 @@ legend .d-label {
   justify-content: center;
 }
 .d-notice {
-  --notice--bgc: var(--black-100);
-  --notice--fc: var(--fc-primary);
+  --notice-color-background: var(--black-100);
+  --notice-color-text: var(--fc-primary);
   display: flex;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12);
-  color: var(--notice--fc);
+  max-width: calc(var(--size-300) * 157);
+  padding: calc(var(--space-300) * 3);
+  color: var(--notice-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh6);
-  background-color: var(--notice--bgc);
+  background-color: var(--notice-color-background);
   border-radius: var(--br4);
 }
 .d-toast .d-notice {
-  max-width: var(--size464);
+  max-width: calc(var(--size-300) * 116);
   box-shadow: var(--bs-sm);
   pointer-events: all;
 }
@@ -2247,7 +2252,7 @@ legend .d-label {
   display: flex;
   flex: 1 auto;
   flex-direction: column;
-  margin-right: var(--su16);
+  margin-right: var(--space-500);
 }
 .d-notice__actions {
   display: flex;
@@ -2260,7 +2265,7 @@ legend .d-label {
 .d-notice__icon {
   display: flex;
   flex: 0 auto;
-  margin-right: var(--su8);
+  margin-right: var(--space-400);
   color: inherit;
 }
 .d-notice__title {
@@ -2268,14 +2273,14 @@ legend .d-label {
   font-size: inherit;
 }
 .d-notice.d-notice--important {
-  --notice--bgc: var(--black-800);
-  --notice--fc: var(--black-100);
+  --notice-color-background: var(--black-800);
+  --notice-color-text: var(--black-100);
 }
 .d-notice--error,
 .d-banner--error,
 .d-toast--error {
-  --notice--bgc: var(--red-100);
-  --notice--fc: var(--red-500);
+  --notice-color-background: var(--red-100);
+  --notice-color-text: var(--red-500);
 }
 .d-notice--error.d-notice--important,
 .d-banner--error.d-notice--important,
@@ -2286,13 +2291,13 @@ legend .d-label {
 .d-notice--error.d-toast--important,
 .d-banner--error.d-toast--important,
 .d-toast--error.d-toast--important {
-  --notice--bgc: var(--red-300);
-  --notice--fc: var(--white);
+  --notice-color-background: var(--red-300);
+  --notice-color-text: var(--white);
 }
 .d-notice--info,
 .d-banner--info,
 .d-toast--info {
-  --notice--bgc: var(--purple-100);
+  --notice-color-background: var(--purple-100);
 }
 .d-notice--info.d-notice--important,
 .d-banner--info.d-notice--important,
@@ -2303,14 +2308,14 @@ legend .d-label {
 .d-notice--info.d-toast--important,
 .d-banner--info.d-toast--important,
 .d-toast--info.d-toast--important {
-  --notice--bgc: var(--purple-400);
-  --notice--fc: var(--white);
+  --notice-color-background: var(--purple-400);
+  --notice-color-text: var(--white);
 }
 .d-notice--success,
 .d-banner--success,
 .d-toast--success {
-  --notice--bgc: var(--green-100);
-  --notice--fc: var(--green-500);
+  --notice-color-background: var(--green-100);
+  --notice-color-text: var(--green-500);
 }
 .d-notice--success.d-notice--important,
 .d-banner--success.d-notice--important,
@@ -2321,13 +2326,13 @@ legend .d-label {
 .d-notice--success.d-toast--important,
 .d-banner--success.d-toast--important,
 .d-toast--success.d-toast--important {
-  --notice--bgc: var(--green-200);
-  --notice--fc: var(--green-500);
+  --notice-color-background: var(--green-200);
+  --notice-color-text: var(--green-500);
 }
 .d-notice--warning,
 .d-banner--warning,
 .d-toast--warning {
-  --notice--bgc: var(--gold-100);
+  --notice-color-background: var(--gold-100);
 }
 .d-notice--warning.d-notice--important,
 .d-banner--warning.d-notice--important,
@@ -2338,8 +2343,8 @@ legend .d-label {
 .d-notice--warning.d-toast--important,
 .d-banner--warning.d-toast--important,
 .d-toast--warning.d-toast--important {
-  --notice--bgc: var(--gold-200);
-  --notice--fc: var(--fc-primary);
+  --notice-color-background: var(--gold-200);
+  --notice-color-text: var(--fc-primary);
 }
 .d-popover__dialog {
   display: grid;
@@ -2347,7 +2352,7 @@ legend .d-label {
   overflow: auto;
   background-color: var(--white);
   border-color: var(--black-400);
-  border-radius: var(--su8);
+  border-radius: var(--br8);
   box-shadow: var(--bs-card);
 }
 .d-popover__dialog,
@@ -2368,10 +2373,10 @@ legend .d-label {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
 }
 .d-popover__header {
@@ -2380,12 +2385,12 @@ legend .d-label {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-bottom: var(--su1) solid var(--black-300);
+  border-bottom: var(--size-100) solid var(--black-300);
 }
 .d-popover__footer {
   display: flex;
@@ -2393,30 +2398,30 @@ legend .d-label {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-top: var(--su1) solid var(--black-300);
+  border-top: var(--size-100) solid var(--black-300);
 }
 .d-checkbox,
 .d-radio {
-  --check-radio--color: var(--primary-color);
-  --check-radio--bc: var(--black-600);
-  --check-radio--bgc: var(--white);
+  --check-radio-color: var(--purple-400);
+  --check-radio-color-border: var(--black-600);
+  --check-radio-color-background: var(--white);
   flex: 0 auto;
   align-self: flex-start;
 }
 @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
   .d-checkbox,
   .d-radio {
-    width: 1em;
-    height: 1em;
+    width: var(--size-500);
+    height: var(--size-500);
     margin: 0;
     font-size: inherit;
-    background-color: var(--check-radio--bgc);
-    border: var(--su1) solid var(--check-radio--bc);
+    background-color: var(--check-radio-color-background);
+    border: var(--size-100) solid var(--check-radio-color-border);
     outline: 0;
     box-shadow: none;
     cursor: pointer;
@@ -2436,7 +2441,7 @@ legend .d-label {
   .js-focus-visible .d-checkbox:checked.focus-visible,
   .d-radio:checked.focus-visible.js-focus-visible,
   .js-focus-visible .d-radio:checked.focus-visible {
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color-border: var(--check-radio-color);
     outline: 0;
     box-shadow: var(--bs-focus-ring);
   }
@@ -2444,30 +2449,31 @@ legend .d-label {
   .d-radio:focus-visible,
   .d-checkbox:checked:focus-visible,
   .d-radio:checked:focus-visible {
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color-border: var(--check-radio-color);
     outline: 0;
     box-shadow: var(--bs-focus-ring);
   }
   .d-checkbox:checked,
   .d-radio:checked {
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color-border: var(--check-radio-color);
   }
 }
 .d-checkbox[disabled],
 .d-radio[disabled],
 .d-checkbox--disabled,
 .d-radio--disabled {
-  --check-radio--color: var(--fc-disabled);
-  --check-radio--bc: var(--black-400);
-  --check-radio--bgc: var(--black-300);
+  --check-radio-color: var(--fc-disabled);
+  --check-radio-color-border: var(--black-400);
+  --check-radio-color-background: var(--black-300);
   cursor: not-allowed;
 }
 .d-checkbox-group,
 .d-radio-group {
   display: flex;
-  padding-right: var(--su1);
-  padding-bottom: var(--su2);
-  padding-left: var(--su1);
+  gap: var(--space-400);
+  padding-right: var(--space-100);
+  padding-bottom: var(--space-200);
+  padding-left: var(--space-100);
 }
 .d-checkbox-group.d-checkbox-group--disabled .d-checkbox__label,
 .d-radio-group.d-checkbox-group--disabled .d-checkbox__label,
@@ -2484,13 +2490,12 @@ legend .d-label {
 .d-radio__input {
   display: flex;
   align-self: flex-start;
-  padding-top: var(--su2);
+  padding-top: calc(var(--space-200) + var(--space-100));
 }
 .d-checkbox__copy,
 .d-radio__copy {
   display: inline-flex;
   flex-direction: column;
-  margin-left: var(--su8);
 }
 .d-checkbox__label,
 .d-radio__label {
@@ -2521,42 +2526,42 @@ legend .d-label {
     border-radius: var(--br2);
   }
   .d-checkbox:checked {
-    --check-radio--bgc: var(--check-radio--color);
+    --check-radio-color-background: var(--check-radio-color);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
   }
   .d-checkbox:checked[disabled] {
-    --check-radio--bgc: var(--black-300);
+    --check-radio-color-background: var(--black-300);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
   }
   .d-checkbox--disabled:checked {
-    --check-radio--bgc: var(--black-300);
+    --check-radio-color-background: var(--black-300);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
   }
   .d-checkbox--indeterminate,
   .d-checkbox:indeterminate {
-    --check-radio--bgc: var(--check-radio--color);
+    --check-radio-color-background: var(--check-radio-color);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
   }
   .d-checkbox--indeterminate[disabled],
   .d-checkbox:indeterminate[disabled] {
-    --check-radio--bgc: var(--black-300);
+    --check-radio-color-background: var(--black-300);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
   }
   .d-checkbox--indeterminate.d-checkbox--disabled,
   .d-checkbox:indeterminate.d-checkbox--disabled {
-    --check-radio--bgc: var(--black-300);
+    --check-radio-color-background: var(--black-300);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
   }
   .d-checkbox[disabled],
   .d-checkbox--disabled {
-    --check-radio--color: var(--fc-disabled);
-    --check-radio--bc: var(--black-400);
-    --check-radio--bgc: var(--black-300);
+    --check-radio-color: var(--fc-disabled);
+    --check-radio-color-border: var(--black-400);
+    --check-radio-color-background: var(--black-300);
   }
 }
 .d-checkbox--warning {
-  --check-radio--color: var(--warning-color);
-  --check-radio--bc: var(--check-radio--color);
+  --check-radio-color: var(--warning-color);
+  --check-radio-color-border: var(--check-radio-color);
 }
 .d-checkbox--warning.focus-visible.js-focus-visible,
 .js-focus-visible .d-checkbox--warning.focus-visible,
@@ -2569,8 +2574,8 @@ legend .d-label {
   box-shadow: var(--bs-focus-ring-warning);
 }
 .d-checkbox--error {
-  --check-radio--color: var(--error-color);
-  --check-radio--bc: var(--check-radio--color);
+  --check-radio-color: var(--error-color);
+  --check-radio-color-border: var(--check-radio-color);
 }
 .d-checkbox--error.focus-visible.js-focus-visible,
 .js-focus-visible .d-checkbox--error.focus-visible,
@@ -2583,8 +2588,8 @@ legend .d-label {
   box-shadow: var(--bs-focus-ring-error);
 }
 .d-checkbox--success {
-  --check-radio--color: var(--success-color);
-  --check-radio--bc: var(--check-radio--color);
+  --check-radio-color: var(--success-color);
+  --check-radio-color-border: var(--check-radio-color);
 }
 .d-checkbox--success.focus-visible.js-focus-visible,
 .js-focus-visible .d-checkbox--success.focus-visible,
@@ -2602,78 +2607,77 @@ legend .d-label {
   }
   .d-radio[disabled],
   .d-radio--disabled {
-    --check-radio--color: var(--fc-disabled);
-    --check-radio--bc: var(--black-400);
-    --check-radio--bgc: var(--black-300);
+    --check-radio-color: var(--fc-disabled);
+    --check-radio-color-border: var(--black-400);
+    --check-radio-color-background: var(--black-300);
   }
   .d-radio.focus-visible.js-focus-visible,
   .js-focus-visible .d-radio.focus-visible,
   .d-radio:checked.focus-visible.js-focus-visible,
   .js-focus-visible .d-radio:checked.focus-visible {
-    box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
+    box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
   }
   .d-radio:focus-visible,
   .d-radio:checked:focus-visible {
-    box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
+    box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
   }
   .d-radio:checked {
-    --check-radio--bgc: var(--check-radio--color);
-    box-shadow: inset 0 0 0 var(--su2) var(--white);
+    --check-radio-color-background: var(--check-radio-color);
+    box-shadow: inset 0 0 0 var(--size-200) var(--white);
   }
   .d-radio:checked[disabled] {
-    --check-radio--bgc: var(--black-400);
+    --check-radio-color-background: var(--black-400);
   }
   .d-radio--disabled:checked {
-    --check-radio--bgc: var(--black-400);
+    --check-radio-color-background: var(--black-400);
   }
 }
 .d-radio--warning {
-  --check-radio--color: var(--warning-color);
-  --check-radio--bc: var(--check-radio--color);
+  --check-radio-color: var(--warning-color);
+  --check-radio-color-border: var(--check-radio-color);
 }
 .d-radio--warning.focus-visible.js-focus-visible,
 .js-focus-visible .d-radio--warning.focus-visible,
 .d-radio--warning:checked.focus-visible.js-focus-visible,
 .js-focus-visible .d-radio--warning:checked.focus-visible {
-  box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
+  box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--space-200) var(--white);
 }
 .d-radio--warning:focus-visible,
 .d-radio--warning:checked:focus-visible {
-  box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
+  box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--space-200) var(--white);
 }
 .d-radio--error {
-  --check-radio--color: var(--error-color);
-  --check-radio--bc: var(--check-radio--color);
+  --check-radio-color: var(--error-color);
+  --check-radio-color-border: var(--check-radio-color);
 }
 .d-radio--error.focus-visible.js-focus-visible,
 .js-focus-visible .d-radio--error.focus-visible,
 .d-radio--error:checked.focus-visible.js-focus-visible,
 .js-focus-visible .d-radio--error:checked.focus-visible {
-  box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
+  box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--space-200) var(--white);
 }
 .d-radio--error:focus-visible,
 .d-radio--error:checked:focus-visible {
-  box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
+  box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--space-200) var(--white);
 }
 .d-radio--success {
-  --check-radio--color: var(--success-color);
-  --check-radio--bc: var(--check-radio--color);
+  --check-radio-color: var(--success-color);
+  --check-radio-color-border: var(--check-radio-color);
 }
 .d-radio--success.focus-visible.js-focus-visible,
 .js-focus-visible .d-radio--success.focus-visible,
 .d-radio--success:checked.focus-visible.js-focus-visible,
 .js-focus-visible .d-radio--success:checked.focus-visible {
-  box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
+  box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--space-200) var(--white);
 }
 .d-radio--success:focus-visible,
 .d-radio--success:checked:focus-visible {
-  box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
+  box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--space-200) var(--white);
 }
 .d-select {
-  --select--bc: var(--black-500);
-  --select--bgc: var(--white);
-  --select--fc: var(--black-800);
-  --select--bs: var(--focus-ring);
+  --select-color-border: var(--black-500);
+  --select-color-background: var(--white);
+  --select-color-text: var(--black-800);
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
@@ -2707,8 +2711,8 @@ legend .d-label {
   font-size: var(--fs-200);
 }
 .d-select--xs .d-select__input {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: var(--space-100 / 2);
+  padding-bottom: calc(var(--space-400) + var(--space-100));
   font-size: var(--fs-100);
 }
 .d-select--xs .d-select__input .d-btn__icon {
@@ -2719,8 +2723,9 @@ legend .d-label {
   font-size: var(--fs-200);
 }
 .d-select--sm .d-select__input {
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  --padding-y: calc(var(--space-300) + var(--space-200));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-200);
 }
 .d-select--sm .d-select__input .d-btn__icon {
@@ -2731,8 +2736,9 @@ legend .d-label {
   font-size: var(--fs-300);
 }
 .d-select--lg .d-select__input {
-  padding-top: 1.1rem;
-  padding-bottom: 1.1rem;
+  --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200)));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-300);
 }
 .d-select--lg .d-select__input .d-btn__icon {
@@ -2743,8 +2749,9 @@ legend .d-label {
   font-size: var(--fs-300);
 }
 .d-select--xl .d-select__input {
-  padding-top: 1.3rem;
-  padding-bottom: 1.3rem;
+  --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
+  padding-top: var(--padding-y);
+  padding-bottom: var(--padding-y);
   font-size: var(--fs-300);
 }
 .d-select--xl .d-select__input .d-btn__icon {
@@ -2752,39 +2759,40 @@ legend .d-label {
   height: 2.4rem;
 }
 .d-select__input {
+  --select-input-padding: calc(var(--space-400) - var(--space-100)) 2em calc(var(--space-400) - var(--space-100)) var(--space-400);
   height: 100%;
-  padding: 0.7rem 2em 0.7rem 0.8rem !important;
-  color: var(--select--fc);
-  background-color: var(--select--bgc);
-  border-color: var(--select--bc);
+  padding: var(--select-input-padding) !important;
+  color: var(--select-color-text);
+  background-color: var(--select-color-background);
+  border-color: var(--select-color-border);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  --input--focus-bc: var(--primary-color);
-  --input--bc: var(--black-600);
-  --input--bgc: var(--white);
-  --input--fc: var(--black-800);
+  --input-color-border-focus: var(--purple-400);
+  --input-color-border: var(--black-600);
+  --input-color-background: var(--white);
+  --input-color-text: var(--black-800);
   position: relative;
   display: inline-flex;
   flex: 1 0%;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  padding: 0.7rem var(--su8);
-  color: var(--input--fc);
+  padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
+  color: var(--input-color-text);
   font-weight: inherit;
   font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
-  background-color: var(--input--bgc);
-  border: 1px solid var(--input--bc);
+  background-color: var(--input-color-background);
+  border: 1px solid var(--input-color-border);
   border-radius: var(--base--corner-radius);
   outline: none;
   box-shadow: none;
   transition-timing-function: var(--ttf-in-out);
   transition-duration: 100ms;
   transition-property: border, box-shadow, background-color;
-  --select--bc: var(--black-600);
+  --select-color-border: var(--black-600);
 }
 .d-select__input::placeholder {
   color: var(--fc-placeholder);
@@ -2794,15 +2802,15 @@ legend .d-label {
 }
 .d-select__input:focus,
 .d-select__input:focus-within {
-  --input--bc: var(--input--focus-bc);
+  --input-color-border: var(--input-color-border-focus);
   outline: 0;
   box-shadow: var(--bs-focus-ring) !important;
 }
 .d-select__input[disabled],
 .d-select__input[read-only] {
-  --input--bc: var(--black-400) !important;
-  --input--bgc: var(--black-300);
-  --input--fc: var(--fc-disabled);
+  --input-color-border: var(--black-400) !important;
+  --input-color-background: var(--black-300);
+  --input-color-text: var(--fc-disabled);
 }
 .d-select__input[disabled]:focus,
 .d-select__input[read-only]:focus,
@@ -2818,7 +2826,7 @@ legend .d-label {
   cursor: not-allowed;
 }
 .d-select__input:focus {
-  --select--bc: var(--primary-color);
+  --select-color-border: var(--purple-400);
   box-shadow: var(--bs-focus-ring);
 }
 .d-select__input:disabled {
@@ -2837,24 +2845,24 @@ legend .d-label {
   display: none;
 }
 .d-select__input--success {
-  --select--bc: var(--success-color);
+  --select-color-border: var(--success-color);
 }
 .d-select__input--success:focus {
-  --select--bc: var(--success-color);
+  --select-color-border: var(--success-color);
   box-shadow: var(--bs-focus-ring-success) !important;
 }
 .d-select__input--error {
-  --select--bc: var(--error-color);
+  --select-color-border: var(--error-color);
 }
 .d-select__input--error:focus {
-  --select--bc: var(--error-color);
+  --select-color-border: var(--error-color);
   box-shadow: var(--bs-focus-ring-error) !important;
 }
 .d-select__input--warning {
-  --select--bc: var(--warning-color);
+  --select-color-border: var(--warning-color);
 }
 .d-select__input--warning:focus {
-  --select--bc: var(--warning-color);
+  --select-color-border: var(--warning-color);
   box-shadow: var(--bs-focus-ring-warning) !important;
 }
 .d-select--disabled::before,
@@ -2864,9 +2872,9 @@ legend .d-label {
 .skeleton-placeholder {
   display: flex;
   width: 100%;
-  background: var(--placeholder-from-color, #D2D2D2);
+  background: var(--placeholder-from-color, var(--black-300));
   animation-duration: 1000ms;
-  fill: var(--placeholder-from-color, #D2D2D2);
+  fill: var(--placeholder-from-color, var(--black-300));
   stroke: none;
 }
 .skeleton-placeholder--animate {
@@ -2875,77 +2883,77 @@ legend .d-label {
 }
 @keyframes placeholder-throb {
   10% {
-    background: var(--placeholder-from-color, #D2D2D2);
-    fill: var(--placeholder-from-color, #D2D2D2);
+    background: var(--placeholder-from-color, var(--black-300));
+    fill: var(--placeholder-from-color, var(--black-300));
   }
   50% {
-    background: var(--placeholder-to-color, #E9E9E9);
-    fill: var(--placeholder-to-color, #E9E9E9);
+    background: var(--placeholder-to-color, var(--black-200));
+    fill: var(--placeholder-to-color, var(--black-200));
   }
   90% {
-    background: var(--placeholder-from-color, #D2D2D2);
-    fill: var(--placeholder-from-color, #D2D2D2);
+    background: var(--placeholder-from-color, var(--black-300));
+    fill: var(--placeholder-from-color, var(--black-300));
   }
 }
 .d-table {
-  --table--th: var(--black-700);
-  --table--td: var(--black-600);
-  --table--bc: var(--black-400);
+  --table-color-th: var(--black-700);
+  --table-color-td: var(--black-600);
+  --table-color-border: var(--black-400);
   display: table;
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
-  margin: var(--su0);
+  margin: 0;
   font-size: var(--fs-200);
   line-height: var(--lh2);
   border-collapse: collapse;
   border-spacing: 0;
 }
 .d-table .d-table__caption {
-  margin-bottom: var(--su8);
-  color: var(--table--th);
+  margin-bottom: var(--space-400);
+  color: var(--table-color-th);
   font-weight: var(--fw-bold);
   font-size: var(--fs-200);
   text-align: unset !important;
 }
 .d-table thead {
-  border-bottom: var(--su2) solid var(--table--bc);
+  border-bottom: var(--size-200) solid var(--table-color-border);
 }
 .d-table thead th {
   font-size: var(--fs-100);
   text-transform: uppercase;
 }
 .d-table th {
-  color: var(--table--th);
+  color: var(--table-color-th);
   font-weight: var(--fw-bold);
 }
 .d-table td {
-  color: var(--table--td);
+  color: var(--table-color-td);
 }
 .d-table th,
 .d-table td {
-  padding: var(--su16);
+  padding: var(--space-500);
   text-align: left;
-  border-bottom: var(--su1) solid var(--table--bc);
+  border-bottom: var(--size-100) solid var(--table-color-border);
 }
 .d-table tbody + tbody tr:first-of-type td,
 .d-table tbody + tbody tr:first-of-type th {
-  border-top: var(--su2) solid var(--table--bc);
+  border-top: var(--size-200) solid var(--table-color-border);
 }
 .d-table tbody tr:last-of-type td,
 .d-table tbody tr:last-of-type th {
   border-bottom-width: 0;
 }
 .d-table--inverted {
-  --table--th: var(--black-200);
-  --table--td: var(--black-400);
-  --table--bc: var(--black-200);
+  --table-color-th: var(--black-200);
+  --table-color-td: var(--black-400);
+  --table-color-border: var(--black-200);
 }
 .d-table--striped tr:nth-child(even) {
-  background-color: hsl(var(--black-500-h), var(--black-500-s), var(--black-500-l), 0.1);
+  background-color: hsl(var(--black-400-h), var(--black-400-s), var(--black-400-l), 0.1);
 }
 .d-table--striped.d-table--inverted tr:nth-child(even) {
-  background-color: hsl(var(--black-200-h), var(--black-200-s), var(--black-200-l), 0.1);
+  background-color: hsl(var(--black-300-h), var(--black-300-s), var(--black-300-l), 0.1);
 }
 .d-tablist {
   position: relative;
@@ -2960,27 +2968,27 @@ legend .d-label {
   bottom: 0;
   left: 0;
   z-index: var(--zi-base1);
-  height: var(--su1);
+  height: var(--size-100);
   background-color: var(--black-400);
   content: '';
 }
 .d-tab {
-  --tab--bgc: hsla(var(--white-hsl)  /  0%);
-  --tab--fc: inherit;
-  --tab--oc: var(--focus-ring);
+  --tab-color-background: hsla(var(--white-hsl)  /  0%);
+  --tab-color-text: inherit;
+  --tab-color-shadow: var(--focus-ring);
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  margin: 0 var(--su2);
-  padding: var(--su12);
-  color: var(--tab--fc);
+  margin: 0 var(--space-200);
+  padding: calc(var(--space-300) * 3);
+  color: var(--tab-color-text);
   font: inherit;
   line-height: 1;
-  background-color: var(--tab--bgc);
+  background-color: var(--tab-color-background);
   border: 0;
-  border-radius: var(--br4) var(--br4) 0 0;
+  border-radius: var(--size-300) var(--size-300) 0 0;
   cursor: pointer;
   transition-timing-function: var(--ttf-in-out);
   transition-duration: var(--td50);
@@ -2998,21 +3006,21 @@ legend .d-label {
   right: 0;
   bottom: 0;
   left: 0;
-  height: var(--su2);
-  background-color: var(--tab--bgc);
+  height: var(--size-200);
+  background-color: var(--tab-color-background);
   content: '';
 }
 .d-tab.focus-visible.js-focus-visible, .js-focus-visible .d-tab.focus-visible {
   outline: none;
-  box-shadow: 0 0 0 var(--su2) var(--tab--oc);
+  box-shadow: 0 0 0 var(--size-200) var(--tab-color-shadow);
 }
 .d-tab:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 var(--su2) var(--tab--oc);
+  box-shadow: 0 0 0 var(--size-200) var(--tab-color-shadow);
 }
 .d-tab:hover {
-  --tab--bgc: var(--black-100);
-  --tab--fc: var(--fc-primary);
+  --tab-color-background: var(--black-100);
+  --tab-color-text: var(--fc-primary);
 }
 @media (prefers-reduced-motion) {
   .d-tab {
@@ -3020,41 +3028,41 @@ legend .d-label {
   }
 }
 .d-tab--selected {
-  --tab--fc: var(--primary-color);
+  --tab-color-text: var(--purple-400);
   z-index: var(--zi-selected);
 }
 .d-tab--selected:hover {
-  --tab--bgc: hsla(var(--primary-color-hsl)  /  10%);
-  --tab--fc: var(--primary-color-hover);
+  --tab-color-background: hsla(var(--purple-400-hsl)  /  10%);
+  --tab-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
 }
 .d-tab--selected::after,
 .d-tab--selected:hover::after {
-  --tab--bgc: var(--primary-color);
+  --tab-color-background: var(--purple-400);
 }
 .d-tablist--inverted {
-  --tab--fc: var(--white);
+  --tab-color-text: var(--white);
 }
 .d-tablist--inverted::after {
   background-color: hsla(var(--purple-600-hsl)  /  50%);
 }
 .d-tablist--inverted .d-tab {
-  --tab--fc: var(--white);
+  --tab-color-text: var(--white);
 }
 .d-tablist--inverted .d-tab:hover {
-  --tab--bgc: hsla(var(--white-hsl)  /  10%);
+  --tab-color-background: hsla(var(--white-hsl)  /  10%);
 }
 .d-tablist--inverted .d-tab--selected {
-  --tab--fc: var(--white);
-  --tab--oc: var(--white);
+  --tab-color-text: var(--white);
+  --tab-color-shadow: var(--white);
 }
 .d-tablist--inverted .d-tab--selected::after {
-  --tab--bgc: currentColor;
+  --tab-color-background: currentColor;
 }
 .d-tablist--sm {
   font-size: var(--fs-100);
 }
 .d-tablist--sm .d-tab {
-  padding: var(--su12);
+  padding: calc(var(--space-300) * 3);
 }
 .d-tooltip-container {
   position: relative;
@@ -3063,26 +3071,26 @@ legend .d-label {
   justify-content: center;
 }
 .d-tooltip {
-  --tooltip--bgc: var(--black-800);
-  --tooltip--fc: var(--white);
+  --tooltip-color-background: var(--black-800);
+  --tooltip-color-text: var(--white);
   z-index: var(--zi-tooltip);
-  max-width: var(--size216);
-  padding: var(--su8);
-  color: var(--tooltip--fc);
+  max-width: calc(var(--size-300) * 54);
+  padding: var(--space-400);
+  color: var(--tooltip-color-text);
   font-size: var(--fs-100);
   line-height: var(--lh-300);
   text-align: center;
-  background-color: var(--tooltip--bgc);
-  border-radius: var(--br4);
+  background-color: var(--tooltip-color-background);
+  border-radius: var(--size-300);
 }
 .d-tooltip::after {
   position: absolute;
-  border: var(--su6) solid transparent;
+  border: calc(var(--size-300) + var(--size-200)) solid transparent;
   content: '';
 }
 .d-tooltip--inverted {
-  --tooltip--bgc: var(--black-200);
-  --tooltip--fc: var(--black-700);
+  --tooltip-color-background: var(--black-200);
+  --tooltip-color-text: var(--black-700);
 }
 .d-tooltip--hide,
 .d-tooltip--hover .d-tooltip {
@@ -3113,8 +3121,8 @@ legend .d-label {
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-  top: calc(100% + var(--su12));
-  transform: translateY(var(--su16));
+  top: calc(100% + calc(var(--space-300) * 3));
+  transform: translateY(var(--space-500));
 }
 .d-tooltip__arrow-tippy--bottom-start::after,
 .d-tooltip__arrow-tippy--bottom::after,
@@ -3122,9 +3130,9 @@ legend .d-label {
 .d-tooltip__arrow--top-left::after,
 .d-tooltip__arrow--top-center::after,
 .d-tooltip__arrow--top-right::after {
-  top: var(--sun6);
+  top: calc(calc(var(--space-300) + var(--space-200)) * -1);
   border-top-width: 0;
-  border-bottom-color: var(--tooltip--bgc);
+  border-bottom-color: var(--tooltip-color-background);
 }
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow-tippy--top,
@@ -3132,8 +3140,8 @@ legend .d-label {
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-  bottom: calc(100% + var(--su12));
-  transform: translateY(var(--sun16));
+  bottom: calc(100% + calc(var(--space-300) * 3));
+  transform: translateY(calc(var(--space-500) * -1));
 }
 .d-tooltip__arrow-tippy--top-start::after,
 .d-tooltip__arrow-tippy--top::after,
@@ -3141,40 +3149,40 @@ legend .d-label {
 .d-tooltip__arrow--bottom-left::after,
 .d-tooltip__arrow--bottom-center::after,
 .d-tooltip__arrow--bottom-right::after {
-  bottom: var(--sun6);
-  border-top-color: var(--tooltip--bgc);
+  bottom: calc(calc(var(--space-300) + var(--space-200)) * -1);
+  border-top-color: var(--tooltip-color-background);
   border-bottom-width: 0;
 }
 .d-tooltip__arrow-tippy--bottom-start,
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-  left: var(--sun2);
+  left: calc(var(--space-200) * -1);
 }
 .d-tooltip__arrow-tippy--bottom-start::after,
 .d-tooltip__arrow-tippy--top-start::after,
 .d-tooltip__arrow--top-left::after,
 .d-tooltip__arrow--bottom-left::after {
-  left: var(--su16);
+  left: var(--space-500);
 }
 .d-tooltip__arrow-tippy--bottom::after,
 .d-tooltip__arrow-tippy--top::after,
 .d-tooltip__arrow--top-center::after,
 .d-tooltip__arrow--bottom-center::after {
   left: 50%;
-  margin-left: var(--sun6);
+  margin-left: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .d-tooltip__arrow-tippy--bottom-end,
 .d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-  right: var(--sun2);
+  right: calc(var(--space-200) * -1);
 }
 .d-tooltip__arrow-tippy--bottom-end::after,
 .d-tooltip__arrow-tippy--top-end::after,
 .d-tooltip__arrow--top-right::after,
 .d-tooltip__arrow--bottom-right::after {
-  right: var(--su16);
+  right: var(--space-500);
 }
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow-tippy--left,
@@ -3182,8 +3190,8 @@ legend .d-label {
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-  right: calc(100% + var(--su12));
-  transform: translateX(var(--sun16));
+  right: calc(100% + calc(var(--space-300) * 3));
+  transform: translateX(calc(var(--space-500) * -1));
 }
 .d-tooltip__arrow-tippy--left-start::after,
 .d-tooltip__arrow-tippy--left::after,
@@ -3191,9 +3199,9 @@ legend .d-label {
 .d-tooltip__arrow--right-top::after,
 .d-tooltip__arrow--right-center::after,
 .d-tooltip__arrow--right-bottom::after {
-  right: var(--sun6);
+  right: calc(calc(var(--space-300) + var(--space-200)) * -1);
   border-right-width: 0;
-  border-left-color: var(--tooltip--bgc);
+  border-left-color: var(--tooltip-color-background);
 }
 .d-tooltip__arrow-tippy--right-start,
 .d-tooltip__arrow-tippy--right,
@@ -3201,8 +3209,8 @@ legend .d-label {
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-  left: calc(100% + var(--su12));
-  transform: translateX(var(--su16));
+  left: calc(100% + calc(var(--space-300) * 3));
+  transform: translateX(var(--space-500));
 }
 .d-tooltip__arrow-tippy--right-start::after,
 .d-tooltip__arrow-tippy--right::after,
@@ -3210,124 +3218,124 @@ legend .d-label {
 .d-tooltip__arrow--left-top::after,
 .d-tooltip__arrow--left-center::after,
 .d-tooltip__arrow--left-bottom::after {
-  left: var(--sun6);
-  border-right-color: var(--tooltip--bgc);
+  left: calc(calc(var(--space-300) + var(--space-200)) * -1);
+  border-right-color: var(--tooltip-color-background);
   border-left-width: 0;
 }
 .d-tooltip__arrow-tippy--right-start,
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-  top: var(--sun1);
+  top: calc(var(--space-100) * -1);
 }
 .d-tooltip__arrow-tippy--right-start::after,
 .d-tooltip__arrow-tippy--left-start::after,
 .d-tooltip__arrow--right-top::after,
 .d-tooltip__arrow--left-top::after {
-  top: var(--su8);
+  top: var(--space-400);
 }
 .d-tooltip__arrow-tippy--right::after,
 .d-tooltip__arrow-tippy--left::after,
 .d-tooltip__arrow--right-center::after,
 .d-tooltip__arrow--left-center::after {
   top: 50%;
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .d-tooltip__arrow-tippy--right-end,
 .d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-  bottom: var(--sun1);
+  bottom: calc(var(--space-100) * -1);
 }
 .d-tooltip__arrow-tippy--right-end::after,
 .d-tooltip__arrow-tippy--left-end::after,
 .d-tooltip__arrow--right-bottom::after,
 .d-tooltip__arrow--left-bottom::after {
-  bottom: var(--su8);
+  bottom: var(--space-400);
 }
 .d-toggle {
-  --toggle-ta: var(--ttf-in-out);
-  --toggle-ts: var(--td200);
-  --toggle-bgc: var(--black-400);
-  --toggle-height: var(--su24);
-  --toggle-width: var(--su48);
-  --toggle-icon-size: var(--su16);
+  --toggle-transition-timing-function: var(--ttf-in-out);
+  --toggle-transition-speed: var(--td200);
+  --toggle-color-background: var(--black-400);
+  --toggle-size-height: calc(var(--size-300) * 6);
+  --toggle-size-width: calc(var(--size-300) * 12);
+  --toggle-size-icon: var(--size-500);
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  width: var(--toggle-width);
-  height: var(--toggle-height);
+  width: var(--toggle-size-width);
+  height: var(--toggle-size-height);
   padding: 0;
   line-height: var(--lh4);
   vertical-align: middle;
-  background-color: var(--toggle-bgc);
-  border: var(--su1) solid var(--toggle-bgc);
-  border-radius: var(--toggle-width);
+  background-color: var(--toggle-color-background);
+  border: var(--size-100) solid var(--toggle-color-background);
+  border-radius: var(--toggle-size-width);
   cursor: pointer;
 }
 .d-toggle__inner {
   position: absolute;
-  top: calc(var(--su4) - var(--su1));
-  left: var(--su24);
-  width: var(--toggle-icon-size);
-  height: var(--toggle-icon-size);
+  top: calc(var(--space-300) - var(--space-100));
+  left: calc(var(--space-300) * 6);
+  width: var(--toggle-size-icon);
+  height: var(--toggle-size-icon);
   color: var(--white);
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjM4MTI4IDUuMzgxMjhDNS43MjI5OSA1LjAzOTU3IDYuMjc3MDEgNS4wMzk1NyA2LjYxODcyIDUuMzgxMjhMMTIgMTAuNzYyNkwxNy4zODEzIDUuMzgxMjhDMTcuNzIzIDUuMDM5NTcgMTguMjc3IDUuMDM5NTcgMTguNjE4NyA1LjM4MTI4QzE4Ljk2MDQgNS43MjI5OSAxOC45NjA0IDYuMjc3MDEgMTguNjE4NyA2LjYxODcyTDEzLjIzNzQgMTJMMTguNjE4NyAxNy4zODEzQzE4Ljk2MDQgMTcuNzIzIDE4Ljk2MDQgMTguMjc3IDE4LjYxODcgMTguNjE4N0MxOC4yNzcgMTguOTYwNCAxNy43MjMgMTguOTYwNCAxNy4zODEzIDE4LjYxODdMMTIgMTMuMjM3NEw2LjYxODcyIDE4LjYxODdDNi4yNzcwMSAxOC45NjA0IDUuNzIyOTkgMTguOTYwNCA1LjM4MTI4IDE4LjYxODdDNS4wMzk1NyAxOC4yNzcgNS4wMzk1NyAxNy43MjMgNS4zODEyOCAxNy4zODEzTDEwLjc2MjYgMTJMNS4zODEyOCA2LjYxODcyQzUuMDM5NTcgNi4yNzcwMSA1LjAzOTU3IDUuNzIyOTkgNS4zODEyOCA1LjM4MTI4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
   background-repeat: no-repeat;
   background-size: cover;
 }
 .d-toggle--small .d-toggle__inner {
-  top: var(--su1);
-  left: calc(var(--su16) + var(--su1));
+  top: var(--space-100);
+  left: calc(var(--space-500) + var(--space-100));
 }
 .d-toggle--indeterminate .d-toggle__inner {
   display: none;
 }
 .d-toggle::after {
   position: absolute;
-  top: var(--su1);
-  left: var(--su1);
-  width: calc(var(--toggle-icon-size) + var(--su4));
-  height: calc(var(--toggle-icon-size) + var(--su4));
+  top: var(--space-100);
+  left: var(--space-100);
+  width: calc(var(--toggle-size-icon) + var(--size-300));
+  height: calc(var(--toggle-size-icon) + var(--size-300));
   background-color: var(--white);
   border-radius: var(--br-circle);
   cursor: pointer;
-  transition: left var(--toggle-ts) var(--toggle-ta);
+  transition: left var(--toggle-transition-speed) var(--toggle-transition-timing-function);
   content: ' ';
 }
 .d-toggle--small {
-  --toggle-height: calc(var(--su16) + var(--su2));
-  --toggle-width: calc(var(--su32) + var(--su4));
-  --toggle-icon-size: calc(var(--su12) + var(--su2));
+  --toggle-size-height: calc(var(--size-500) + var(--size-200));
+  --toggle-size-width: calc(var(--size-600) + var(--size-300));
+  --toggle-size-icon: calc(var(--size-500) - var(--size-200));
 }
 .d-toggle--small::before {
   position: absolute;
-  top: calc(var(--su4) * -1);
+  top: calc(var(--space-300) * -1);
   right: 0;
-  bottom: calc(var(--su4) * -1);
+  bottom: calc(var(--space-300) * -1);
   left: 0;
   content: '';
 }
 .d-toggle--small::after {
-  width: var(--toggle-icon-size);
-  height: var(--toggle-icon-size);
+  width: var(--toggle-size-icon);
+  height: var(--toggle-size-icon);
 }
 .d-toggle--checked {
-  --toggle-bgc: var(--primary-color);
+  --toggle-color-background: var(--purple-400);
 }
 .d-toggle--checked .d-toggle__inner {
-  left: var(--su6);
+  left: calc(var(--space-300) + var(--space-200));
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
 }
 .d-toggle--checked.d-toggle--small .d-toggle__inner {
-  left: calc(var(--su2) + var(--su1));
+  left: calc(var(--space-100) + var(--space-200));
 }
 .d-toggle--checked::after {
-  left: calc(var(--su24) + var(--su1));
+  left: calc(calc(var(--space-300) * 6) + var(--space-100));
 }
 .d-toggle--checked.d-toggle--small::after {
-  right: var(--su1);
-  left: calc(var(--su16) + var(--su2) + var(--su1));
+  right: var(--space-100);
+  left: calc(calc(var(--space-300) * 5) - var(--space-100));
 }
 .d-toggle--indeterminate__inner {
   display: none;
@@ -3355,21 +3363,22 @@ legend .d-label {
   transition-property: none;
 }
 .d-toggle-group {
-  gap: var(--su8);
+  gap: var(--space-400);
 }
 .d-presence {
   --presence-color-border-base: var(--black-100);
   --presence-color-border-offline: var(--black-400);
-  --presence-color-background-base: var(--white);
+  --presence-color-background-base: var(--black-400);
   --presence-color-background-active: var(--green-400);
   --presence-color-background-busy: var(--red-300);
   --presence-color-background-away: var(--gold-300);
   --presence-color-background-offline: var(--white);
+  --presence-size: var(--size-200);
   display: inline-block;
   box-sizing: border-box;
   border-color: var(--presence-color-border-base);
   border-style: solid;
-  border-width: var(--size-200);
+  border-width: var(--presence-size);
   border-radius: var(--br-circle);
 }
 .d-presence__inner {
@@ -3396,7 +3405,7 @@ legend .d-label {
   border-width: var(--size-200);
 }
 .d-icon {
-  --icon-base-scale: 0.8rem;
+  --icon-base-scale: var(--size-400);
   --icon-size-100: calc(var(--icon-base-scale) * 1.5);
   --icon-size-200: calc(var(--icon-base-scale) * 1.75);
   --icon-size-300: calc(var(--icon-base-scale) * 2.25);
@@ -6446,13 +6455,13 @@ body.theme-dark .d\:d-bgg-to-black-700 {
 }
 .d-bgg-pattern {
   position: relative;
-  padding-left: var(--su24) !important;
+  padding-left: calc(var(--space-300) * 6) !important;
 }
 .d-bgg-pattern::after {
   position: absolute;
-  top: var(--su1);
-  bottom: var(--su1);
-  left: var(--su1);
+  top: var(--space-100);
+  bottom: var(--space-100);
+  left: var(--space-100);
   min-width: 2rem;
   min-height: 2rem;
   background-image: var(--bgg-pattern);
@@ -6532,27 +6541,27 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-color: unset !important;
 }
 .d-ba {
-  border: var(--su1) solid !important;
+  border: var(--size-100) solid !important;
 }
 .d-bt {
-  border-top: var(--su1) solid !important;
+  border-top: var(--size-100) solid !important;
 }
 .d-br {
-  border-right: var(--su1) solid !important;
+  border-right: var(--size-100) solid !important;
 }
 .d-bb {
-  border-bottom: var(--su1) solid !important;
+  border-bottom: var(--size-100) solid !important;
 }
 .d-bl {
-  border-left: var(--su1) solid !important;
+  border-left: var(--size-100) solid !important;
 }
 .d-bx {
-  border-right: var(--su1) solid !important;
-  border-left: var(--su1) solid !important;
+  border-right: var(--size-100) solid !important;
+  border-left: var(--size-100) solid !important;
 }
 .d-by {
-  border-top: var(--su1) solid !important;
-  border-bottom: var(--su1) solid !important;
+  border-top: var(--size-100) solid !important;
+  border-bottom: var(--size-100) solid !important;
 }
 .d-ba-none {
   border: none !important;
@@ -6787,10 +6796,10 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-style: unset !important;
 }
 .d-baw0 {
-  border-width: var(--su0) !important;
+  border-width: 0 !important;
 }
 .d-baw1 {
-  border-width: var(--su1) !important;
+  border-width: var(--size-100) !important;
 }
 .d-baw2 {
   border-width: var(--su2) !important;
@@ -6802,10 +6811,10 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-width: var(--su6) !important;
 }
 .d-btw0 {
-  border-top-width: var(--su0) !important;
+  border-top-width: 0 !important;
 }
 .d-btw1 {
-  border-top-width: var(--su1) !important;
+  border-top-width: var(--size-100) !important;
 }
 .d-btw2 {
   border-top-width: var(--su2) !important;
@@ -6817,10 +6826,10 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-top-width: var(--su6) !important;
 }
 .d-brw0 {
-  border-right-width: var(--su0) !important;
+  border-right-width: 0 !important;
 }
 .d-brw1 {
-  border-right-width: var(--su1) !important;
+  border-right-width: var(--size-100) !important;
 }
 .d-brw2 {
   border-right-width: var(--su2) !important;
@@ -6832,10 +6841,10 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-right-width: var(--su6) !important;
 }
 .d-bbw0 {
-  border-bottom-width: var(--su0) !important;
+  border-bottom-width: 0 !important;
 }
 .d-bbw1 {
-  border-bottom-width: var(--su1) !important;
+  border-bottom-width: var(--size-100) !important;
 }
 .d-bbw2 {
   border-bottom-width: var(--su2) !important;
@@ -6847,10 +6856,10 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-bottom-width: var(--su6) !important;
 }
 .d-blw0 {
-  border-left-width: var(--su0) !important;
+  border-left-width: 0 !important;
 }
 .d-blw1 {
-  border-left-width: var(--su1) !important;
+  border-left-width: var(--size-100) !important;
 }
 .d-blw2 {
   border-left-width: var(--su2) !important;
@@ -6862,12 +6871,12 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-left-width: var(--su6) !important;
 }
 .d-bxw0 {
-  border-right-width: var(--su0) !important;
-  border-left-width: var(--su0) !important;
+  border-right-width: 0 !important;
+  border-left-width: 0 !important;
 }
 .d-bxw1 {
-  border-right-width: var(--su1) !important;
-  border-left-width: var(--su1) !important;
+  border-right-width: var(--size-100) !important;
+  border-left-width: var(--size-100) !important;
 }
 .d-bxw2 {
   border-right-width: var(--su2) !important;
@@ -6882,12 +6891,12 @@ body.theme-dark .d\:d-bgg-to-black-700 {
   border-left-width: var(--su6) !important;
 }
 .d-byw0 {
-  border-top-width: var(--su0) !important;
-  border-bottom-width: var(--su0) !important;
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important;
 }
 .d-byw1 {
-  border-top-width: var(--su1) !important;
-  border-bottom-width: var(--su1) !important;
+  border-top-width: var(--size-100) !important;
+  border-bottom-width: var(--size-100) !important;
 }
 .d-byw2 {
   border-top-width: var(--su2) !important;
@@ -15981,7 +15990,7 @@ body.theme-dark .d\:d-bgg-to-0 {
   cursor: none !important;
 }
 .d-ol-focusring {
-  outline: solid var(--su4) var(--focus-ring) !important;
+  outline: solid var(--size-300) var(--focus-ring) !important;
 }
 .d-ol-none {
   outline: 0 !important;
@@ -19502,8 +19511,8 @@ h6,
 p,
 ol,
 ul {
-  margin-top: var(--su0);
-  margin-bottom: var(--su0);
+  margin-top: 0;
+  margin-bottom: 0;
 }
 .d-body-base {
   line-height: var(--lh-400);
@@ -19965,7 +19974,7 @@ ul {
 }
 html,
 body {
-  margin: var(--su0);
+  margin: 0;
   /* stylelint-disable-next-line meowtec/no-px */
   font-size: 10px;
 }
@@ -20343,18 +20352,18 @@ body {
   --size1140: 114rem;
   --size1268: 126.8rem;
   --size1340: 134rem;
-  --bs-sm: 0 var(--su2) var(--su4) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  15%);
-  --bs-md: 0 var(--su2) var(--su8) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  25%);
-  --bs-lg: 0 var(--su2) var(--su12) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  30%);
-  --bs-xl: 0 var(--su2) var(--su16) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  30%);
-  --bs-card: 0 var(--su2) var(--su16) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  8%), 0 var(--su2) var(--su4) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  4%), 0 var(--su1) var(--su2) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  3%);
-  --bs-focus-ring: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring);
-  --bs-focus-ring-error: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-error);
-  --bs-focus-ring-success: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-success);
-  --bs-focus-ring-warning: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-warning);
-  --bs-focus-ring-circle: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--black-400);
-  --bs-focus-ring-muted: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--black-500);
-  --bs-focus-ring-inverted: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
+  --bs-sm: 0 var(--size-200) var(--size-300) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  15%);
+  --bs-md: 0 var(--size-200) var(--size-400) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  25%);
+  --bs-lg: 0 var(--size-200) calc(var(--size-300) * 3) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  30%);
+  --bs-xl: 0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  30%);
+  --bs-card: 0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  8%), 0 var(--size-200) var(--size-300) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  4%), 0 var(--size-100) var(--size-200) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l)  /  3%);
+  --bs-focus-ring: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring);
+  --bs-focus-ring-error: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-error);
+  --bs-focus-ring-success: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-success);
+  --bs-focus-ring-warning: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-warning);
+  --bs-focus-ring-circle: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--black-400);
+  --bs-focus-ring-muted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--black-500);
+  --bs-focus-ring-inverted: 0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
   --ttf-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
   --ttf-out: cubic-bezier(0.23, 1, 0.32, 1);
   --td0: 0s;
@@ -20382,14 +20391,14 @@ body {
   --bgg-pattern-slanted-stripes-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU2xhbnRlZCBTdHJpcGVzIExpZ2h0IiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fc2xhbnRlZFN0cmlwZXNMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTggMEgwdjRsOC00ek0wIDV2NGwxMi02VjBoLTJMMCA1ek0xMiAyMHYtMWwtMiAxaDJ6TTggMjBsNC0ydi00TDAgMjBoOHpNMCAxOWwxMi02VjlMMCAxNXY0ek0wIDE0bDEyLTZWNEwwIDEwdjR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
   --bgg-pattern-steps-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU3RlcHMgTGlnaHQiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19zdGVwc0xpZ2h0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMCAwdi41YTEuNSAxLjUgMCAxMDMgMFYwSDB6TTEwIDIwYTIgMiAwIDAwMi0ydi0xLjVhMS41IDEuNSAwIDAwLTMgMHYuNUgyYTIgMiAwIDAwLTIgMnYxaDEwek0wIDEzLjVhMS41IDEuNSAwIDAwMyAwVjEzaDdhMiAyIDAgMDAyLTJWOS41YTEuNSAxLjUgMCAwMC0zIDB2LjVIMmEyIDIgMCAwMC0yIDJ2MS41ek0wIDYuNWExLjUgMS41IDAgMTAzIDBWNmg3YTIgMiAwIDAwMi0yVjIuNWExLjUgMS41IDAgMDAtMyAwVjNIMmEyIDIgMCAwMC0yIDJ2MS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
   --bgg-pattern-stripe-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU3RyaXBlIExpZ2h0IiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fc3RyaXBlTGlnaHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik00IDIwSDJWMGgydjIwek05IDIwSDVWMGg0djIwek0xMiAyMGgtMlYwaDJ2MjB6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
-  --br0: var(--su0);
-  --br2: var(--su2);
-  --br4: var(--su4);
-  --br8: var(--su8);
-  --br12: var(--su12);
-  --br16: var(--su16);
-  --br24: var(--su24);
-  --br32: var(--su32);
+  --br0: 0;
+  --br2: var(--size-200);
+  --br4: var(--size-300);
+  --br8: var(--size-400);
+  --br12: calc(var(--size-400) + var(--size-300));
+  --br16: var(--size-500);
+  --br24: calc(var(--size-600) - var(--size-400));
+  --br32: var(--size-600);
   --br-circle: 50%;
   --br-pill: 100em;
   --icon12: 1.2rem;
@@ -20490,7 +20499,7 @@ body {
   --focus-ring-error: hsla(var(--error-color-hsl)  /  75%);
   --focus-ring-muted: var(--focus-ring);
   --focus-ring-inverted: hsla(var(--inverted-color-hsl)  /  50%);
-  --input-button__padding: 0.7rem var(--su8);
+  --input-button__padding: calc(var(--space-400) - var(--space-100)) var(--space-400);
   --input-button__text-size: var(--fs-200);
   --input-button__line-height: var(--lh4);
   --input-button__icon-size: 1.8rem;
@@ -20504,7 +20513,7 @@ body {
   --nav-background-color-s: var(--purple-600-s);
   --nav-background-color-l: var(--purple-600-l);
   --nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
-  --topbar-height: var(--su64);
+  --topbar-height: var(--size-700);
   --base--font-size: var(--fs-200);
   --base--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Adjusted', 'Segoe UI', SFMono, 'Helvetica Neue', Cantarell, Ubuntu, Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --base--line-height: var(--lh-300);
@@ -20741,7 +20750,7 @@ body.theme-dark {
 .sm\:d-description {
   display: flex;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200));
   color: var(--black-600);
   font-size: var(--fs-100);
   font-family: inherit;
@@ -20749,7 +20758,7 @@ body.theme-dark {
   fill: currentColor;
 }
 .sm\:d-label + .d-description {
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .sm\:d-description--lg {
   font-size: var(--fs-200);
@@ -21099,10 +21108,10 @@ body.theme-dark {
   display: unset !important;
 }
 .sm\:d-modal {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  60%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  60%);
+  --modal-dialog-color-background: var(--white);
+  --modal-dialog-color-text: var(--fc-tertiary);
+  --modal-header-color-text: var(--fc-secondary);
   position: fixed;
   top: 0;
   right: 0;
@@ -21113,18 +21122,15 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
-  background-color: var(--modal--bgc);
+  padding: var(--space-600);
+  background-color: var(--modal-color-background);
   backface-visibility: hidden;
   visibility: hidden;
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
 .sm\:d-modal--transparent {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  85%);
   position: fixed;
   top: 0;
   right: 0;
@@ -21135,7 +21141,7 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
+  padding: var(--space-600);
   background-color: var(--d-bgc-transparent);
   backface-visibility: hidden;
   visibility: hidden;
@@ -21146,13 +21152,13 @@ body.theme-dark {
   position: relative;
   z-index: var(--zi-hide);
   width: 100%;
-  max-width: var(--size628);
+  max-width: calc(var(--size-300) * 157);
   max-height: 100%;
   overflow-y: auto;
-  color: var(--modal-dialog--fc);
+  color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh8);
-  background-color: var(--modal-dialog--bgc);
+  background-color: var(--modal-dialog-color-background);
   border-radius: var(--br8);
   box-shadow: var(--bs-card);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
@@ -21171,42 +21177,44 @@ body.theme-dark {
   opacity: 1;
 }
 .sm\:d-modal__footer {
+  --modal-footer-padding: calc(var(--space-300) * 6);
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  padding: 0 var(--su24) var(--su24) var(--su24);
+  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
 }
 .sm\:d-modal__footer > :not(:first-child) {
-  margin-right: var(--su4);
+  margin-right: var(--space-300);
 }
 .sm\:d-modal__footer > :not(:last-child) {
-  margin-left: var(--su4);
+  margin-left: var(--space-300);
 }
 .sm\:d-modal__header {
+  --modal-header-padding: calc(var(--space-300) * 6);
   margin: 0 !important;
-  padding: var(--su24) var(--su24) 0;
-  color: var(--modal-header--fc);
+  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
+  color: var(--modal-header-color-text);
   font-weight: var(--fw-bold);
   font-size: var(--fs-300);
   line-height: var(--lh4);
 }
 .sm\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0;
-  padding: var(--su4) var(--su24);
+  margin: calc(var(--space-300) * 3) 0;
+  padding: var(--space-300) calc(var(--space-300) * 6);
 }
 .sm\:d-modal__close {
   position: absolute;
-  top: var(--su8);
-  right: var(--su8);
+  top: var(--space-400);
+  right: var(--space-400);
   margin: 0 !important;
 }
 .sm\:d-modal__banner {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12) var(--su24);
+  max-width: calc(var(--size-300) * 157);
+  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
   font-size: var(--fs-200);
   line-height: var(--lh4);
   background-color: var(--gold-100);
@@ -21230,19 +21238,19 @@ body.theme-dark {
   transform: unset !important;
 }
 .sm\:d-modal--full .d-modal__header {
-  padding: var(--su32) var(--su32) 0;
+  padding: var(--space-600) var(--space-600) 0;
 }
 .sm\:d-modal--full .d-modal__content {
   padding-right: 0;
-  padding-left: var(--su32);
+  padding-left: var(--space-600);
 }
 .sm\:d-modal--full .d-modal__footer {
   margin-top: auto !important;
-  padding: 0 var(--su24) var(--su32) var(--su32);
+  padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600);
 }
 .sm\:d-modal--full .d-modal__banner {
   max-width: unset;
-  padding: var(--su12) var(--su32);
+  padding: calc(var(--space-300) * 3) var(--space-600);
   border-radius: 0;
 }
 .sm\:d-modal__dialog--scrollable {
@@ -21254,7 +21262,7 @@ body.theme-dark {
   overflow-y: auto;
 }
 .sm\:d-modal--danger {
-  --modal-header--fc: var(--fc-dark);
+  --modal-header-color-text: var(--fc-secondary);
 }
 .sm\:d-modal--animate {
   z-index: var(--zi-hide) !important;
@@ -22155,7 +22163,7 @@ body.theme-dark {
   overflow: auto;
   background-color: var(--white);
   border-color: var(--black-400);
-  border-radius: var(--su8);
+  border-radius: var(--br8);
   box-shadow: var(--bs-card);
 }
 .sm\:d-popover__dialog,
@@ -22176,10 +22184,10 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
 }
 .sm\:d-popover__header {
@@ -22188,12 +22196,12 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-bottom: var(--su1) solid var(--black-300);
+  border-bottom: var(--size-100) solid var(--black-300);
 }
 .sm\:d-popover__footer {
   display: flex;
@@ -22201,26 +22209,27 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-top: var(--su1) solid var(--black-300);
+  border-top: var(--size-100) solid var(--black-300);
 }
 .sm\:d-presence {
   --presence-color-border-base: var(--black-100);
   --presence-color-border-offline: var(--black-400);
-  --presence-color-background-base: var(--white);
+  --presence-color-background-base: var(--black-400);
   --presence-color-background-active: var(--green-400);
   --presence-color-background-busy: var(--red-300);
   --presence-color-background-away: var(--gold-300);
   --presence-color-background-offline: var(--white);
+  --presence-size: var(--size-200);
   display: inline-block;
   box-sizing: border-box;
   border-color: var(--presence-color-border-base);
   border-style: solid;
-  border-width: var(--size-200);
+  border-width: var(--presence-size);
   border-radius: var(--br-circle);
 }
 .sm\:d-presence__inner {
@@ -23054,7 +23063,7 @@ body.theme-dark {
 .md\:d-description {
   display: flex;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200));
   color: var(--black-600);
   font-size: var(--fs-100);
   font-family: inherit;
@@ -23062,7 +23071,7 @@ body.theme-dark {
   fill: currentColor;
 }
 .md\:d-label + .d-description {
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .md\:d-description--lg {
   font-size: var(--fs-200);
@@ -23412,10 +23421,10 @@ body.theme-dark {
   display: unset !important;
 }
 .md\:d-modal {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  60%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  60%);
+  --modal-dialog-color-background: var(--white);
+  --modal-dialog-color-text: var(--fc-tertiary);
+  --modal-header-color-text: var(--fc-secondary);
   position: fixed;
   top: 0;
   right: 0;
@@ -23426,18 +23435,15 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
-  background-color: var(--modal--bgc);
+  padding: var(--space-600);
+  background-color: var(--modal-color-background);
   backface-visibility: hidden;
   visibility: hidden;
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
 .md\:d-modal--transparent {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  85%);
   position: fixed;
   top: 0;
   right: 0;
@@ -23448,7 +23454,7 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
+  padding: var(--space-600);
   background-color: var(--d-bgc-transparent);
   backface-visibility: hidden;
   visibility: hidden;
@@ -23459,13 +23465,13 @@ body.theme-dark {
   position: relative;
   z-index: var(--zi-hide);
   width: 100%;
-  max-width: var(--size628);
+  max-width: calc(var(--size-300) * 157);
   max-height: 100%;
   overflow-y: auto;
-  color: var(--modal-dialog--fc);
+  color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh8);
-  background-color: var(--modal-dialog--bgc);
+  background-color: var(--modal-dialog-color-background);
   border-radius: var(--br8);
   box-shadow: var(--bs-card);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
@@ -23484,42 +23490,44 @@ body.theme-dark {
   opacity: 1;
 }
 .md\:d-modal__footer {
+  --modal-footer-padding: calc(var(--space-300) * 6);
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  padding: 0 var(--su24) var(--su24) var(--su24);
+  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
 }
 .md\:d-modal__footer > :not(:first-child) {
-  margin-right: var(--su4);
+  margin-right: var(--space-300);
 }
 .md\:d-modal__footer > :not(:last-child) {
-  margin-left: var(--su4);
+  margin-left: var(--space-300);
 }
 .md\:d-modal__header {
+  --modal-header-padding: calc(var(--space-300) * 6);
   margin: 0 !important;
-  padding: var(--su24) var(--su24) 0;
-  color: var(--modal-header--fc);
+  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
+  color: var(--modal-header-color-text);
   font-weight: var(--fw-bold);
   font-size: var(--fs-300);
   line-height: var(--lh4);
 }
 .md\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0;
-  padding: var(--su4) var(--su24);
+  margin: calc(var(--space-300) * 3) 0;
+  padding: var(--space-300) calc(var(--space-300) * 6);
 }
 .md\:d-modal__close {
   position: absolute;
-  top: var(--su8);
-  right: var(--su8);
+  top: var(--space-400);
+  right: var(--space-400);
   margin: 0 !important;
 }
 .md\:d-modal__banner {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12) var(--su24);
+  max-width: calc(var(--size-300) * 157);
+  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
   font-size: var(--fs-200);
   line-height: var(--lh4);
   background-color: var(--gold-100);
@@ -23543,19 +23551,19 @@ body.theme-dark {
   transform: unset !important;
 }
 .md\:d-modal--full .d-modal__header {
-  padding: var(--su32) var(--su32) 0;
+  padding: var(--space-600) var(--space-600) 0;
 }
 .md\:d-modal--full .d-modal__content {
   padding-right: 0;
-  padding-left: var(--su32);
+  padding-left: var(--space-600);
 }
 .md\:d-modal--full .d-modal__footer {
   margin-top: auto !important;
-  padding: 0 var(--su24) var(--su32) var(--su32);
+  padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600);
 }
 .md\:d-modal--full .d-modal__banner {
   max-width: unset;
-  padding: var(--su12) var(--su32);
+  padding: calc(var(--space-300) * 3) var(--space-600);
   border-radius: 0;
 }
 .md\:d-modal__dialog--scrollable {
@@ -23567,7 +23575,7 @@ body.theme-dark {
   overflow-y: auto;
 }
 .md\:d-modal--danger {
-  --modal-header--fc: var(--fc-dark);
+  --modal-header-color-text: var(--fc-secondary);
 }
 .md\:d-modal--animate {
   z-index: var(--zi-hide) !important;
@@ -24468,7 +24476,7 @@ body.theme-dark {
   overflow: auto;
   background-color: var(--white);
   border-color: var(--black-400);
-  border-radius: var(--su8);
+  border-radius: var(--br8);
   box-shadow: var(--bs-card);
 }
 .md\:d-popover__dialog,
@@ -24489,10 +24497,10 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
 }
 .md\:d-popover__header {
@@ -24501,12 +24509,12 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-bottom: var(--su1) solid var(--black-300);
+  border-bottom: var(--size-100) solid var(--black-300);
 }
 .md\:d-popover__footer {
   display: flex;
@@ -24514,26 +24522,27 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-top: var(--su1) solid var(--black-300);
+  border-top: var(--size-100) solid var(--black-300);
 }
 .md\:d-presence {
   --presence-color-border-base: var(--black-100);
   --presence-color-border-offline: var(--black-400);
-  --presence-color-background-base: var(--white);
+  --presence-color-background-base: var(--black-400);
   --presence-color-background-active: var(--green-400);
   --presence-color-background-busy: var(--red-300);
   --presence-color-background-away: var(--gold-300);
   --presence-color-background-offline: var(--white);
+  --presence-size: var(--size-200);
   display: inline-block;
   box-sizing: border-box;
   border-color: var(--presence-color-border-base);
   border-style: solid;
-  border-width: var(--size-200);
+  border-width: var(--presence-size);
   border-radius: var(--br-circle);
 }
 .md\:d-presence__inner {
@@ -25367,7 +25376,7 @@ body.theme-dark {
 .lg\:d-description {
   display: flex;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200));
   color: var(--black-600);
   font-size: var(--fs-100);
   font-family: inherit;
@@ -25375,7 +25384,7 @@ body.theme-dark {
   fill: currentColor;
 }
 .lg\:d-label + .d-description {
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .lg\:d-description--lg {
   font-size: var(--fs-200);
@@ -25725,10 +25734,10 @@ body.theme-dark {
   display: unset !important;
 }
 .lg\:d-modal {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  60%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  60%);
+  --modal-dialog-color-background: var(--white);
+  --modal-dialog-color-text: var(--fc-tertiary);
+  --modal-header-color-text: var(--fc-secondary);
   position: fixed;
   top: 0;
   right: 0;
@@ -25739,18 +25748,15 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
-  background-color: var(--modal--bgc);
+  padding: var(--space-600);
+  background-color: var(--modal-color-background);
   backface-visibility: hidden;
   visibility: hidden;
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
 .lg\:d-modal--transparent {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  85%);
   position: fixed;
   top: 0;
   right: 0;
@@ -25761,7 +25767,7 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
+  padding: var(--space-600);
   background-color: var(--d-bgc-transparent);
   backface-visibility: hidden;
   visibility: hidden;
@@ -25772,13 +25778,13 @@ body.theme-dark {
   position: relative;
   z-index: var(--zi-hide);
   width: 100%;
-  max-width: var(--size628);
+  max-width: calc(var(--size-300) * 157);
   max-height: 100%;
   overflow-y: auto;
-  color: var(--modal-dialog--fc);
+  color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh8);
-  background-color: var(--modal-dialog--bgc);
+  background-color: var(--modal-dialog-color-background);
   border-radius: var(--br8);
   box-shadow: var(--bs-card);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
@@ -25797,42 +25803,44 @@ body.theme-dark {
   opacity: 1;
 }
 .lg\:d-modal__footer {
+  --modal-footer-padding: calc(var(--space-300) * 6);
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  padding: 0 var(--su24) var(--su24) var(--su24);
+  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
 }
 .lg\:d-modal__footer > :not(:first-child) {
-  margin-right: var(--su4);
+  margin-right: var(--space-300);
 }
 .lg\:d-modal__footer > :not(:last-child) {
-  margin-left: var(--su4);
+  margin-left: var(--space-300);
 }
 .lg\:d-modal__header {
+  --modal-header-padding: calc(var(--space-300) * 6);
   margin: 0 !important;
-  padding: var(--su24) var(--su24) 0;
-  color: var(--modal-header--fc);
+  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
+  color: var(--modal-header-color-text);
   font-weight: var(--fw-bold);
   font-size: var(--fs-300);
   line-height: var(--lh4);
 }
 .lg\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0;
-  padding: var(--su4) var(--su24);
+  margin: calc(var(--space-300) * 3) 0;
+  padding: var(--space-300) calc(var(--space-300) * 6);
 }
 .lg\:d-modal__close {
   position: absolute;
-  top: var(--su8);
-  right: var(--su8);
+  top: var(--space-400);
+  right: var(--space-400);
   margin: 0 !important;
 }
 .lg\:d-modal__banner {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12) var(--su24);
+  max-width: calc(var(--size-300) * 157);
+  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
   font-size: var(--fs-200);
   line-height: var(--lh4);
   background-color: var(--gold-100);
@@ -25856,19 +25864,19 @@ body.theme-dark {
   transform: unset !important;
 }
 .lg\:d-modal--full .d-modal__header {
-  padding: var(--su32) var(--su32) 0;
+  padding: var(--space-600) var(--space-600) 0;
 }
 .lg\:d-modal--full .d-modal__content {
   padding-right: 0;
-  padding-left: var(--su32);
+  padding-left: var(--space-600);
 }
 .lg\:d-modal--full .d-modal__footer {
   margin-top: auto !important;
-  padding: 0 var(--su24) var(--su32) var(--su32);
+  padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600);
 }
 .lg\:d-modal--full .d-modal__banner {
   max-width: unset;
-  padding: var(--su12) var(--su32);
+  padding: calc(var(--space-300) * 3) var(--space-600);
   border-radius: 0;
 }
 .lg\:d-modal__dialog--scrollable {
@@ -25880,7 +25888,7 @@ body.theme-dark {
   overflow-y: auto;
 }
 .lg\:d-modal--danger {
-  --modal-header--fc: var(--fc-dark);
+  --modal-header-color-text: var(--fc-secondary);
 }
 .lg\:d-modal--animate {
   z-index: var(--zi-hide) !important;
@@ -26781,7 +26789,7 @@ body.theme-dark {
   overflow: auto;
   background-color: var(--white);
   border-color: var(--black-400);
-  border-radius: var(--su8);
+  border-radius: var(--br8);
   box-shadow: var(--bs-card);
 }
 .lg\:d-popover__dialog,
@@ -26802,10 +26810,10 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
 }
 .lg\:d-popover__header {
@@ -26814,12 +26822,12 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-bottom: var(--su1) solid var(--black-300);
+  border-bottom: var(--size-100) solid var(--black-300);
 }
 .lg\:d-popover__footer {
   display: flex;
@@ -26827,26 +26835,27 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-top: var(--su1) solid var(--black-300);
+  border-top: var(--size-100) solid var(--black-300);
 }
 .lg\:d-presence {
   --presence-color-border-base: var(--black-100);
   --presence-color-border-offline: var(--black-400);
-  --presence-color-background-base: var(--white);
+  --presence-color-background-base: var(--black-400);
   --presence-color-background-active: var(--green-400);
   --presence-color-background-busy: var(--red-300);
   --presence-color-background-away: var(--gold-300);
   --presence-color-background-offline: var(--white);
+  --presence-size: var(--size-200);
   display: inline-block;
   box-sizing: border-box;
   border-color: var(--presence-color-border-base);
   border-style: solid;
-  border-width: var(--size-200);
+  border-width: var(--presence-size);
   border-radius: var(--br-circle);
 }
 .lg\:d-presence__inner {
@@ -27680,7 +27689,7 @@ body.theme-dark {
 .xl\:d-description {
   display: flex;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200));
   color: var(--black-600);
   font-size: var(--fs-100);
   font-family: inherit;
@@ -27688,7 +27697,7 @@ body.theme-dark {
   fill: currentColor;
 }
 .xl\:d-label + .d-description {
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1);
 }
 .xl\:d-description--lg {
   font-size: var(--fs-200);
@@ -28038,10 +28047,10 @@ body.theme-dark {
   display: unset !important;
 }
 .xl\:d-modal {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  60%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  60%);
+  --modal-dialog-color-background: var(--white);
+  --modal-dialog-color-text: var(--fc-tertiary);
+  --modal-header-color-text: var(--fc-secondary);
   position: fixed;
   top: 0;
   right: 0;
@@ -28052,18 +28061,15 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
-  background-color: var(--modal--bgc);
+  padding: var(--space-600);
+  background-color: var(--modal-color-background);
   backface-visibility: hidden;
   visibility: hidden;
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
 .xl\:d-modal--transparent {
-  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl)  /  85%);
   position: fixed;
   top: 0;
   right: 0;
@@ -28074,7 +28080,7 @@ body.theme-dark {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
+  padding: var(--space-600);
   background-color: var(--d-bgc-transparent);
   backface-visibility: hidden;
   visibility: hidden;
@@ -28085,13 +28091,13 @@ body.theme-dark {
   position: relative;
   z-index: var(--zi-hide);
   width: 100%;
-  max-width: var(--size628);
+  max-width: calc(var(--size-300) * 157);
   max-height: 100%;
   overflow-y: auto;
-  color: var(--modal-dialog--fc);
+  color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh8);
-  background-color: var(--modal-dialog--bgc);
+  background-color: var(--modal-dialog-color-background);
   border-radius: var(--br8);
   box-shadow: var(--bs-card);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
@@ -28110,42 +28116,44 @@ body.theme-dark {
   opacity: 1;
 }
 .xl\:d-modal__footer {
+  --modal-footer-padding: calc(var(--space-300) * 6);
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  padding: 0 var(--su24) var(--su24) var(--su24);
+  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding);
 }
 .xl\:d-modal__footer > :not(:first-child) {
-  margin-right: var(--su4);
+  margin-right: var(--space-300);
 }
 .xl\:d-modal__footer > :not(:last-child) {
-  margin-left: var(--su4);
+  margin-left: var(--space-300);
 }
 .xl\:d-modal__header {
+  --modal-header-padding: calc(var(--space-300) * 6);
   margin: 0 !important;
-  padding: var(--su24) var(--su24) 0;
-  color: var(--modal-header--fc);
+  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
+  color: var(--modal-header-color-text);
   font-weight: var(--fw-bold);
   font-size: var(--fs-300);
   line-height: var(--lh4);
 }
 .xl\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0;
-  padding: var(--su4) var(--su24);
+  margin: calc(var(--space-300) * 3) 0;
+  padding: var(--space-300) calc(var(--space-300) * 6);
 }
 .xl\:d-modal__close {
   position: absolute;
-  top: var(--su8);
-  right: var(--su8);
+  top: var(--space-400);
+  right: var(--space-400);
   margin: 0 !important;
 }
 .xl\:d-modal__banner {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12) var(--su24);
+  max-width: calc(var(--size-300) * 157);
+  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6);
   font-size: var(--fs-200);
   line-height: var(--lh4);
   background-color: var(--gold-100);
@@ -28169,19 +28177,19 @@ body.theme-dark {
   transform: unset !important;
 }
 .xl\:d-modal--full .d-modal__header {
-  padding: var(--su32) var(--su32) 0;
+  padding: var(--space-600) var(--space-600) 0;
 }
 .xl\:d-modal--full .d-modal__content {
   padding-right: 0;
-  padding-left: var(--su32);
+  padding-left: var(--space-600);
 }
 .xl\:d-modal--full .d-modal__footer {
   margin-top: auto !important;
-  padding: 0 var(--su24) var(--su32) var(--su32);
+  padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600);
 }
 .xl\:d-modal--full .d-modal__banner {
   max-width: unset;
-  padding: var(--su12) var(--su32);
+  padding: calc(var(--space-300) * 3) var(--space-600);
   border-radius: 0;
 }
 .xl\:d-modal__dialog--scrollable {
@@ -28193,7 +28201,7 @@ body.theme-dark {
   overflow-y: auto;
 }
 .xl\:d-modal--danger {
-  --modal-header--fc: var(--fc-dark);
+  --modal-header-color-text: var(--fc-secondary);
 }
 .xl\:d-modal--animate {
   z-index: var(--zi-hide) !important;
@@ -29094,7 +29102,7 @@ body.theme-dark {
   overflow: auto;
   background-color: var(--white);
   border-color: var(--black-400);
-  border-radius: var(--su8);
+  border-radius: var(--br8);
   box-shadow: var(--bs-card);
 }
 .xl\:d-popover__dialog,
@@ -29115,10 +29123,10 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
 }
 .xl\:d-popover__header {
@@ -29127,12 +29135,12 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-bottom: var(--su1) solid var(--black-300);
+  border-bottom: var(--size-100) solid var(--black-300);
 }
 .xl\:d-popover__footer {
   display: flex;
@@ -29140,26 +29148,27 @@ body.theme-dark {
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200));
+  padding-bottom: calc(var(--space-300) + var(--space-200));
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
-  border-top: var(--su1) solid var(--black-300);
+  border-top: var(--size-100) solid var(--black-300);
 }
 .xl\:d-presence {
   --presence-color-border-base: var(--black-100);
   --presence-color-border-offline: var(--black-400);
-  --presence-color-background-base: var(--white);
+  --presence-color-background-base: var(--black-400);
   --presence-color-background-active: var(--green-400);
   --presence-color-background-busy: var(--red-300);
   --presence-color-background-away: var(--gold-300);
   --presence-color-background-offline: var(--white);
+  --presence-size: var(--size-200);
   display: inline-block;
   box-sizing: border-box;
   border-color: var(--presence-color-border-base);
   border-style: solid;
-  border-width: var(--size-200);
+  border-width: var(--presence-size);
   border-radius: var(--br-circle);
 }
 .xl\:d-presence__inner {