// extracted by mini-css-extract-plugin
export {};
// extracted by mini-css-extract-plugin
export {};
/* This file is automatically generated.
 * Please do not change this file!
 * Generated on https://foundations.personio.design/api/layout/css
 * Populates the layout variables in the design system. */

/* Primitives */
:root {
    --primitive-radius-1: 2px;
    --primitive-radius-1pt5: 3px;
    --primitive-radius-2: 4px;
    --primitive-radius-2pt5: 5px;
    --primitive-radius-3: 6px;
    --primitive-radius-3pt5: 7px;
    --primitive-radius-4: 8px;
    --primitive-radius-4pt5: 10px;
    --primitive-radius-5: 12px;
    --primitive-radius-5pt5: 14px;
    --primitive-radius-6: 16px;
    --primitive-radius-7: 24px;
    --primitive-radius-full: 9999px;
    --primitive-spacing-0pt5: 2px;
    --primitive-spacing-1: 4px;
    --primitive-spacing-1pt5: 6px;
    --primitive-spacing-2: 8px;
    --primitive-spacing-2pt5: 10px;
    --primitive-spacing-3: 12px;
    --primitive-spacing-3pt5: 14px;
    --primitive-spacing-4: 16px;
    --primitive-spacing-4pt5: 20px;
    --primitive-spacing-5: 24px;
    --primitive-spacing-5pt5: 28px;
    --primitive-spacing-6: 32px;
    --primitive-spacing-6pt5: 36px;
    --primitive-spacing-7: 40px;
    --primitive-spacing-7pt5: 44px;
    --primitive-spacing-8: 48px;
    --primitive-spacing-8pt5: 56px;
    --primitive-spacing-9: 64px;
    --primitive-spacing-9pt5: 72px;
    --primitive-spacing-10: 80px;
    --primitive-spacing-negative-0pt5: -2px;
    --primitive-spacing-negative-1: -4px;
    --primitive-spacing-negative-1pt5: -6px;
    --primitive-spacing-negative-2: -8px;
    --primitive-spacing-negative-2pt5: -10px;
    --primitive-spacing-negative-3: -12px;
    --primitive-spacing-negative-3pt5: -14px;
    --primitive-spacing-negative-4: -16px;
    --primitive-spacing-negative-4pt5: -20px;
    --primitive-spacing-negative-5: -24px;
    --primitive-spacing-negative-5pt5: -28px;
    --primitive-spacing-negative-6: -32px;
    --primitive-spacing-negative-6pt5: -36px;
    --primitive-spacing-negative-7: -40px;
    --primitive-spacing-negative-7pt5: -44px;
    --primitive-spacing-negative-8: -48px;
    --primitive-spacing-negative-8pt5: -56px;
    --primitive-spacing-negative-9: -64px;
    --primitive-spacing-negative-9pt5: -72px;
    --primitive-spacing-negative-10: -80px;
}

/* Default - Large Viewport */
:root {
    --spacing-section-extra-small: var(--primitive-spacing-4);
    --spacing-section-small: var(--primitive-spacing-5);
    --spacing-section-medium: var(--primitive-spacing-6);
    --spacing-section-large: var(--primitive-spacing-7);
    --spacing-section-extra-large: var(--primitive-spacing-8);
    --spacing-section-huge: var(--primitive-spacing-9);
    --spacing-section-extra-huge: var(--primitive-spacing-9pt5);
    --spacing-section-mega-huge: var(--primitive-spacing-10);
    --spacing-padding-vertical-extra-small: var(--primitive-spacing-0pt5);
    --spacing-padding-vertical-small: var(--primitive-spacing-1);
    --spacing-padding-vertical-medium: var(--primitive-spacing-1pt5);
    --spacing-padding-vertical-large: var(--primitive-spacing-2);
    --spacing-padding-horizontal-extra-small: var(--primitive-spacing-1pt5);
    --spacing-padding-horizontal-small: var(--primitive-spacing-2);
    --spacing-padding-horizontal-medium: var(--primitive-spacing-2pt5);
    --spacing-padding-horizontal-large: var(--primitive-spacing-3);
    --spacing-gap-extra-small: var(--primitive-spacing-0pt5);
    --spacing-gap-small: var(--primitive-spacing-1);
    --spacing-gap-medium: var(--primitive-spacing-2);
    --spacing-gap-large: var(--primitive-spacing-3);
    --spacing-gap-extra-large: var(--primitive-spacing-4);
    --spacing-control-gap-small: var(--primitive-spacing-0pt5);
    --spacing-control-gap-medium: var(--primitive-spacing-0pt5);
    --spacing-control-gap-large: var(--primitive-spacing-0pt5);
    --component-accessory-size-small: var(--primitive-spacing-4);
    --component-accessory-size-medium: var(--primitive-spacing-4pt5);
    --component-accessory-size-large: var(--primitive-spacing-5);
    --component-accessory-offset-small: var(--primitive-spacing-negative-0pt5);
    --component-accessory-offset-medium: var(--primitive-spacing-negative-1);
    --component-accessory-offset-large: var(--primitive-spacing-negative-1pt5);
    --radius-extra-small: var(--primitive-radius-2);
    --radius-small: var(--primitive-radius-3);
    --radius-medium: var(--primitive-radius-4);
    --radius-large: var(--primitive-radius-5);
    --radius-extra-large: var(--primitive-radius-6);
    --radius-huge: var(--primitive-radius-7);
    --radius-full: var(--primitive-radius-full);
}

/* Responsive - Small Viewport */
.ds-layout-responsive {
    --spacing-section-extra-small: var(--primitive-spacing-2pt5);
    --spacing-section-small: var(--primitive-spacing-3);
    --spacing-section-medium: var(--primitive-spacing-3pt5);
    --spacing-section-large: var(--primitive-spacing-4);
    --spacing-section-extra-large: var(--primitive-spacing-4pt5);
    --spacing-section-huge: var(--primitive-spacing-5);
    --spacing-section-extra-huge: var(--primitive-spacing-6);
    --spacing-section-mega-huge: var(--primitive-spacing-7);
    --spacing-padding-vertical-extra-small: var(--primitive-spacing-1);
    --spacing-padding-vertical-small: var(--primitive-spacing-1pt5);
    --spacing-padding-vertical-medium: var(--primitive-spacing-2);
    --spacing-padding-vertical-large: var(--primitive-spacing-3);
    --spacing-padding-horizontal-extra-small: var(--primitive-spacing-2);
    --spacing-padding-horizontal-small: var(--primitive-spacing-2pt5);
    --spacing-padding-horizontal-medium: var(--primitive-spacing-2pt5);
    --spacing-padding-horizontal-large: var(--primitive-spacing-4);
    --spacing-gap-extra-small: var(--primitive-spacing-1);
    --spacing-gap-small: var(--primitive-spacing-1pt5);
    --spacing-gap-medium: var(--primitive-spacing-2);
    --spacing-gap-large: var(--primitive-spacing-3);
    --spacing-gap-extra-large: var(--primitive-spacing-4);
    --spacing-control-gap-small: var(--primitive-spacing-0pt5);
    --spacing-control-gap-medium: var(--primitive-spacing-0pt5);
    --spacing-control-gap-large: var(--primitive-spacing-1);
    --component-accessory-size-small: var(--primitive-spacing-4pt5);
    --component-accessory-size-medium: var(--primitive-spacing-5);
    --component-accessory-size-large: var(--primitive-spacing-5);
    --component-accessory-offset-small: var(--primitive-spacing-negative-0pt5);
    --component-accessory-offset-medium: var(--primitive-spacing-negative-1);
    --component-accessory-offset-large: var(--primitive-spacing-negative-1pt5);
    --radius-extra-small: var(--primitive-radius-2);
    --radius-small: var(--primitive-radius-3);
    --radius-medium: var(--primitive-radius-5);
    --radius-large: var(--primitive-radius-5);
    --radius-extra-large: var(--primitive-radius-6);
    --radius-huge: var(--primitive-radius-7);
    --radius-full: var(--primitive-radius-full);
}

/* Responsive - Medium Viewport */
@media (min-width: 576px) {
    .ds-layout-responsive {
        --spacing-section-extra-small: var(--primitive-spacing-3);
        --spacing-section-small: var(--primitive-spacing-4);
        --spacing-section-medium: var(--primitive-spacing-5);
        --spacing-section-large: var(--primitive-spacing-6);
        --spacing-section-extra-large: var(--primitive-spacing-7);
        --spacing-section-huge: var(--primitive-spacing-8);
        --spacing-section-extra-huge: var(--primitive-spacing-9);
        --spacing-section-mega-huge: var(--primitive-spacing-10);
        --spacing-padding-vertical-extra-small: var(--primitive-spacing-0pt5);
        --spacing-padding-vertical-small: var(--primitive-spacing-1);
        --spacing-padding-vertical-medium: var(--primitive-spacing-1pt5);
        --spacing-padding-vertical-large: var(--primitive-spacing-2);
        --spacing-padding-horizontal-extra-small: var(--primitive-spacing-1);
        --spacing-padding-horizontal-small: var(--primitive-spacing-1pt5);
        --spacing-padding-horizontal-medium: var(--primitive-spacing-2);
        --spacing-padding-horizontal-large: var(--primitive-spacing-2pt5);
        --spacing-gap-extra-small: var(--primitive-spacing-0pt5);
        --spacing-gap-small: var(--primitive-spacing-1);
        --spacing-gap-medium: var(--primitive-spacing-1pt5);
        --spacing-gap-large: var(--primitive-spacing-2);
        --spacing-gap-extra-large: var(--primitive-spacing-2pt5);
        --spacing-control-gap-small: var(--primitive-spacing-0pt5);
        --spacing-control-gap-medium: var(--primitive-spacing-0pt5);
        --spacing-control-gap-large: var(--primitive-spacing-0pt5);
        --component-accessory-size-small: var(--primitive-spacing-4);
        --component-accessory-size-medium: var(--primitive-spacing-4pt5);
        --component-accessory-size-large: var(--primitive-spacing-5);
        --component-accessory-offset-small: var(--primitive-spacing-negative-0pt5);
        --component-accessory-offset-medium: var(--primitive-spacing-negative-1);
        --component-accessory-offset-large: var(--primitive-spacing-negative-1pt5);
        --radius-extra-small: var(--primitive-radius-2);
        --radius-small: var(--primitive-radius-3);
        --radius-medium: var(--primitive-radius-4);
        --radius-large: var(--primitive-radius-5);
        --radius-extra-large: var(--primitive-radius-6);
        --radius-huge: var(--primitive-radius-7);
        --radius-full: var(--primitive-radius-full);
    }
}

/* Responsive - Large Viewport */
@media (min-width: 992px) {
    .ds-layout-responsive {
        --spacing-section-extra-small: var(--primitive-spacing-4);
        --spacing-section-small: var(--primitive-spacing-5);
        --spacing-section-medium: var(--primitive-spacing-6);
        --spacing-section-large: var(--primitive-spacing-7);
        --spacing-section-extra-large: var(--primitive-spacing-8);
        --spacing-section-huge: var(--primitive-spacing-9);
        --spacing-section-extra-huge: var(--primitive-spacing-9pt5);
        --spacing-section-mega-huge: var(--primitive-spacing-10);
        --spacing-padding-vertical-extra-small: var(--primitive-spacing-0pt5);
        --spacing-padding-vertical-small: var(--primitive-spacing-1);
        --spacing-padding-vertical-medium: var(--primitive-spacing-1pt5);
        --spacing-padding-vertical-large: var(--primitive-spacing-2);
        --spacing-padding-horizontal-extra-small: var(--primitive-spacing-1pt5);
        --spacing-padding-horizontal-small: var(--primitive-spacing-2);
        --spacing-padding-horizontal-medium: var(--primitive-spacing-2pt5);
        --spacing-padding-horizontal-large: var(--primitive-spacing-3);
        --spacing-gap-extra-small: var(--primitive-spacing-0pt5);
        --spacing-gap-small: var(--primitive-spacing-1);
        --spacing-gap-medium: var(--primitive-spacing-2);
        --spacing-gap-large: var(--primitive-spacing-3);
        --spacing-gap-extra-large: var(--primitive-spacing-4);
        --spacing-control-gap-small: var(--primitive-spacing-0pt5);
        --spacing-control-gap-medium: var(--primitive-spacing-0pt5);
        --spacing-control-gap-large: var(--primitive-spacing-0pt5);
        --component-accessory-size-small: var(--primitive-spacing-4);
        --component-accessory-size-medium: var(--primitive-spacing-4pt5);
        --component-accessory-size-large: var(--primitive-spacing-5);
        --component-accessory-offset-small: var(--primitive-spacing-negative-0pt5);
        --component-accessory-offset-medium: var(--primitive-spacing-negative-1);
        --component-accessory-offset-large: var(--primitive-spacing-negative-1pt5);
        --radius-extra-small: var(--primitive-radius-2);
        --radius-small: var(--primitive-radius-3);
        --radius-medium: var(--primitive-radius-4);
        --radius-large: var(--primitive-radius-5);
        --radius-extra-large: var(--primitive-radius-6);
        --radius-huge: var(--primitive-radius-7);
        --radius-full: var(--primitive-radius-full);
    }
}

body[data-theme][data-mode='dark'] {
  color-scheme: dark;
  color: var(--colors-static-fg-primary);

  /* —————————————— neutrals */
  --color-gray-1: var(--colors-static-bg-primary);
  /* observing strange render bug using var(--colors-static-bg-primary) in base theme below */
  --colors-ui-neutral-10: var(--colors-ui-neutral-10-dark);
  --colors-ui-neutral-20: var(--colors-ui-neutral-20-dark);
  --colors-ui-neutral-30: var(--colors-ui-neutral-30-dark);
  --colors-ui-neutral-40: var(--colors-ui-neutral-40-dark);
  --colors-ui-neutral-50: var(--colors-ui-neutral-50-dark);
  --colors-ui-neutral-60: var(--colors-ui-neutral-60-dark);
  --colors-ui-neutral-70: var(--colors-ui-neutral-70-dark);
  --colors-ui-neutral-80: var(--colors-ui-neutral-80-dark);
  --colors-ui-neutral-90: var(--colors-ui-neutral-90-dark);
  --colors-ui-neutral-100: var(--colors-ui-neutral-100-dark);
  --colors-ui-neutral-110: var(--colors-ui-neutral-110-dark);
  --colors-ui-neutral-120: var(--colors-ui-neutral-120-dark);
  --colors-ui-neutral-130: var(--colors-ui-neutral-130-dark);
  --colors-ui-neutral-140: var(--colors-ui-neutral-140-dark);

  /* —————————————— accent */
  --colors-ui-accent-10: var(--colors-ui-accent-10-dark);
  --colors-ui-accent-20: var(--colors-ui-accent-20-dark);
  --colors-ui-accent-30: var(--colors-ui-accent-30-dark);
  --colors-ui-accent-40: var(--colors-ui-accent-40-dark);
  --colors-ui-accent-50: var(--colors-ui-accent-50-dark);
  --colors-ui-accent-60: var(--colors-ui-accent-60-dark);
  --colors-ui-accent-70: var(--colors-ui-accent-70-dark);
  --colors-ui-accent-80: var(--colors-ui-accent-80-dark);
  --colors-ui-accent-90: var(--colors-ui-accent-90-dark);
  --colors-ui-accent-100: var(--colors-ui-accent-100-dark);
  --colors-ui-accent-110: var(--colors-ui-accent-110-dark);
  --colors-ui-accent-120: var(--colors-ui-accent-120-dark);
  --colors-ui-accent-130: var(--colors-ui-accent-130-dark);
  --colors-ui-accent-140: var(--colors-ui-accent-140-dark);

  --colors-ui-accent-10-a: var(--colors-ui-accent-10-dark-a);
  --colors-ui-accent-20-a: var(--colors-ui-accent-20-dark-a);
  --colors-ui-accent-30-a: var(--colors-ui-accent-30-dark-a);
  --colors-ui-accent-40-a: var(--colors-ui-accent-40-dark-a);
  --colors-ui-accent-50-a: var(--colors-ui-accent-50-dark-a);
  --colors-ui-accent-60-a: var(--colors-ui-accent-60-dark-a);
  --colors-ui-accent-70-a: var(--colors-ui-accent-70-dark-a);
  --colors-ui-accent-80-a: var(--colors-ui-accent-80-dark-a);
  --colors-ui-accent-90-a: var(--colors-ui-accent-90-dark-a);
  --colors-ui-accent-100-a: var(--colors-ui-accent-100-dark-a);
  --colors-ui-accent-110-a: var(--colors-ui-accent-110-dark-a);
  --colors-ui-accent-120-a: var(--colors-ui-accent-120-dark-a);
  --colors-ui-accent-130-a: var(--colors-ui-accent-130-dark-a);
  --colors-ui-accent-140-a: var(--colors-ui-accent-140-dark-a);

  /* —————————————— positive */
  --colors-ui-positive-10: var(--colors-ui-positive-10-dark);
  --colors-ui-positive-20: var(--colors-ui-positive-20-dark);
  --colors-ui-positive-30: var(--colors-ui-positive-30-dark);
  --colors-ui-positive-40: var(--colors-ui-positive-40-dark);
  --colors-ui-positive-50: var(--colors-ui-positive-50-dark);
  --colors-ui-positive-60: var(--colors-ui-positive-60-dark);
  --colors-ui-positive-70: var(--colors-ui-positive-70-dark);
  --colors-ui-positive-80: var(--colors-ui-positive-80-dark);
  --colors-ui-positive-90: var(--colors-ui-positive-90-dark);
  --colors-ui-positive-100: var(--colors-ui-positive-100-dark);
  --colors-ui-positive-110: var(--colors-ui-positive-110-dark);
  --colors-ui-positive-120: var(--colors-ui-positive-120-dark);
  --colors-ui-positive-130: var(--colors-ui-positive-130-dark);
  --colors-ui-positive-140: var(--colors-ui-positive-140-dark);

  --colors-ui-positive-10-a: var(--colors-ui-positive-10-dark-a);
  --colors-ui-positive-20-a: var(--colors-ui-positive-20-dark-a);
  --colors-ui-positive-30-a: var(--colors-ui-positive-30-dark-a);
  --colors-ui-positive-40-a: var(--colors-ui-positive-40-dark-a);
  --colors-ui-positive-50-a: var(--colors-ui-positive-50-dark-a);
  --colors-ui-positive-60-a: var(--colors-ui-positive-60-dark-a);
  --colors-ui-positive-70-a: var(--colors-ui-positive-70-dark-a);
  --colors-ui-positive-80-a: var(--colors-ui-positive-80-dark-a);
  --colors-ui-positive-90-a: var(--colors-ui-positive-90-dark-a);
  --colors-ui-positive-100-a: var(--colors-ui-positive-100-dark-a);
  --colors-ui-positive-110-a: var(--colors-ui-positive-110-dark-a);
  --colors-ui-positive-120-a: var(--colors-ui-positive-120-dark-a);
  --colors-ui-positive-130-a: var(--colors-ui-positive-130-dark-a);
  --colors-ui-positive-140-a: var(--colors-ui-positive-140-dark-a);

  /* —————————————— warning */
  --colors-ui-warning-10: var(--colors-ui-warning-10-dark);
  --colors-ui-warning-20: var(--colors-ui-warning-20-dark);
  --colors-ui-warning-30: var(--colors-ui-warning-30-dark);
  --colors-ui-warning-40: var(--colors-ui-warning-40-dark);
  --colors-ui-warning-50: var(--colors-ui-warning-50-dark);
  --colors-ui-warning-60: var(--colors-ui-warning-60-dark);
  --colors-ui-warning-70: var(--colors-ui-warning-70-dark);
  --colors-ui-warning-80: var(--colors-ui-warning-80-dark);
  --colors-ui-warning-90: var(--colors-ui-warning-90-dark);
  --colors-ui-warning-100: var(--colors-ui-warning-100-dark);
  --colors-ui-warning-110: var(--colors-ui-warning-110-dark);
  --colors-ui-warning-120: var(--colors-ui-warning-120-dark);
  --colors-ui-warning-130: var(--colors-ui-warning-130-dark);
  --colors-ui-warning-140: var(--colors-ui-warning-140-dark);

  --colors-ui-warning-10-a: var(--colors-ui-warning-10-dark-a);
  --colors-ui-warning-20-a: var(--colors-ui-warning-20-dark-a);
  --colors-ui-warning-30-a: var(--colors-ui-warning-30-dark-a);
  --colors-ui-warning-40-a: var(--colors-ui-warning-40-dark-a);
  --colors-ui-warning-50-a: var(--colors-ui-warning-50-dark-a);
  --colors-ui-warning-60-a: var(--colors-ui-warning-60-dark-a);
  --colors-ui-warning-70-a: var(--colors-ui-warning-70-dark-a);
  --colors-ui-warning-80-a: var(--colors-ui-warning-80-dark-a);
  --colors-ui-warning-90-a: var(--colors-ui-warning-90-dark-a);
  --colors-ui-warning-100-a: var(--colors-ui-warning-100-dark-a);
  --colors-ui-warning-110-a: var(--colors-ui-warning-110-dark-a);
  --colors-ui-warning-120-a: var(--colors-ui-warning-120-dark-a);
  --colors-ui-warning-130-a: var(--colors-ui-warning-130-dark-a);
  --colors-ui-warning-140-a: var(--colors-ui-warning-140-dark-a);

  /* —————————————— negative */
  --colors-ui-negative-10: var(--colors-ui-negative-10-dark);
  --colors-ui-negative-20: var(--colors-ui-negative-20-dark);
  --colors-ui-negative-30: var(--colors-ui-negative-30-dark);
  --colors-ui-negative-40: var(--colors-ui-negative-40-dark);
  --colors-ui-negative-50: var(--colors-ui-negative-50-dark);
  --colors-ui-negative-60: var(--colors-ui-negative-60-dark);
  --colors-ui-negative-70: var(--colors-ui-negative-70-dark);
  --colors-ui-negative-80: var(--colors-ui-negative-80-dark);
  --colors-ui-negative-90: var(--colors-ui-negative-90-dark);
  --colors-ui-negative-100: var(--colors-ui-negative-100-dark);
  --colors-ui-negative-110: var(--colors-ui-negative-110-dark);
  --colors-ui-negative-120: var(--colors-ui-negative-120-dark);
  --colors-ui-negative-130: var(--colors-ui-negative-130-dark);
  --colors-ui-negative-140: var(--colors-ui-negative-140-dark);

  --colors-ui-negative-10-a: var(--colors-ui-negative-10-dark-a);
  --colors-ui-negative-20-a: var(--colors-ui-negative-20-dark-a);
  --colors-ui-negative-30-a: var(--colors-ui-negative-30-dark-a);
  --colors-ui-negative-40-a: var(--colors-ui-negative-40-dark-a);
  --colors-ui-negative-50-a: var(--colors-ui-negative-50-dark-a);
  --colors-ui-negative-60-a: var(--colors-ui-negative-60-dark-a);
  --colors-ui-negative-70-a: var(--colors-ui-negative-70-dark-a);
  --colors-ui-negative-80-a: var(--colors-ui-negative-80-dark-a);
  --colors-ui-negative-90-a: var(--colors-ui-negative-90-dark-a);
  --colors-ui-negative-100-a: var(--colors-ui-negative-100-dark-a);
  --colors-ui-negative-110-a: var(--colors-ui-negative-110-dark-a);
  --colors-ui-negative-120-a: var(--colors-ui-negative-120-dark-a);
  --colors-ui-negative-130-a: var(--colors-ui-negative-130-dark-a);
  --colors-ui-negative-140-a: var(--colors-ui-negative-140-dark-a);

  /* —————————————— pink */
  /* legacy tokens */
  --color-pink-13: rgb(255, 250, 251);
  --color-pink-12: rgb(255, 247, 250);
  --color-pink-11: rgb(255, 237, 244);
  --color-pink-10: rgb(255, 223, 237);
  --color-pink-9: rgb(255, 210, 229);
  --color-pink-8: rgb(255, 190, 219);
  --color-pink-7: rgb(255, 163, 202);
  --color-pink-6: rgb(255, 138, 185);
  --color-pink-5: rgb(253, 90, 153);
  --color-pink-4: rgb(219, 50, 123);
  --color-pink-3: rgb(184, 31, 100);
  --color-pink-2: rgb(148, 19, 79);
  --color-pink-1pt5: rgb(46, 3, 21);
  --color-pink-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-pink-1: var(--color-pink-1);
  --ds-color-pink-1pt5: var(--color-pink-1pt5);
  --ds-color-pink-2: var(--color-pink-2);
  --ds-color-pink-3: var(--color-pink-3);
  --ds-color-pink-4: var(--color-pink-4);
  --ds-color-pink-5: var(--color-pink-5);
  --ds-color-pink-6: var(--color-pink-6);
  --ds-color-pink-7: var(--color-pink-7);
  --ds-color-pink-8: var(--color-pink-8);
  --ds-color-pink-9: var(--color-pink-9);
  --ds-color-pink-10: var(--color-pink-10);
  --ds-color-pink-11: var(--color-pink-11);
  --ds-color-pink-12: var(--color-pink-12);
  --ds-color-pink-13: var(--color-pink-13);

  /* —————————————— orange */
  /* legacy tokens */
  --color-orange-13: rgb(255, 251, 248);
  --color-orange-12: rgb(255, 249, 243);
  --color-orange-11: rgb(255, 241, 226);
  --color-orange-10: rgb(255, 231, 203);
  --color-orange-9: rgb(255, 221, 182);
  --color-orange-8: rgb(255, 205, 151);
  --color-orange-7: rgb(255, 183, 110);
  --color-orange-6: rgb(255, 162, 74);
  --color-orange-5: rgb(240, 122, 0);
  --color-orange-4: rgb(207, 88, 0);
  --color-orange-3: rgb(174, 68, 0);
  --color-orange-2: rgb(139, 52, 0);
  --color-orange-1pt5: rgb(43, 11, 0);
  --color-orange-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-orange-1: var(--color-orange-1);
  --ds-color-orange-1pt5: var(--color-orange-1pt5);
  --ds-color-orange-2: var(--color-orange-2);
  --ds-color-orange-3: var(--color-orange-3);
  --ds-color-orange-4: var(--color-orange-4);
  --ds-color-orange-5: var(--color-orange-5);
  --ds-color-orange-6: var(--color-orange-6);
  --ds-color-orange-7: var(--color-orange-7);
  --ds-color-orange-8: var(--color-orange-8);
  --ds-color-orange-9: var(--color-orange-9);
  --ds-color-orange-10: var(--color-orange-10);
  --ds-color-orange-11: var(--color-orange-11);
  --ds-color-orange-12: var(--color-orange-12);
  --ds-color-orange-13: var(--color-orange-13);

  /* —————————————— yellow */
  /* legacy tokens */
  --color-yellow-13: rgb(253, 252, 248);
  --color-yellow-12: rgb(253, 250, 242);
  --color-yellow-11: rgb(253, 245, 223);
  --color-yellow-10: rgb(252, 238, 198);
  --color-yellow-9: rgb(251, 230, 174);
  --color-yellow-8: rgb(249, 219, 139);
  --color-yellow-7: rgb(240, 201, 90);
  --color-yellow-6: rgb(229, 184, 36);
  --color-yellow-5: rgb(204, 149, 0);
  --color-yellow-4: rgb(172, 118, 0);
  --color-yellow-3: rgb(144, 95, 0);
  --color-yellow-2: rgb(115, 74, 0);
  --color-yellow-1pt5: rgb(34, 19, 0);
  --color-yellow-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-yellow-1: var(--color-yellow-1);
  --ds-color-yellow-1pt5: var(--color-yellow-1pt5);
  --ds-color-yellow-2: var(--color-yellow-2);
  --ds-color-yellow-3: var(--color-yellow-3);
  --ds-color-yellow-4: var(--color-yellow-4);
  --ds-color-yellow-5: var(--color-yellow-5);
  --ds-color-yellow-6: var(--color-yellow-6);
  --ds-color-yellow-7: var(--color-yellow-7);
  --ds-color-yellow-8: var(--color-yellow-8);
  --ds-color-yellow-9: var(--color-yellow-9);
  --ds-color-yellow-10: var(--color-yellow-10);
  --ds-color-yellow-11: var(--color-yellow-11);
  --ds-color-yellow-12: var(--color-yellow-12);
  --ds-color-yellow-13: var(--color-yellow-13);

  /* —————————————— lime */
  /* legacy tokens */
  --color-lime-13: rgb(251, 252, 248);
  --color-lime-12: rgb(248, 251, 243);
  --color-lime-11: rgb(241, 249, 227);
  --color-lime-10: rgb(231, 245, 206);
  --color-lime-9: rgb(221, 241, 186);
  --color-lime-8: rgb(207, 234, 156);
  --color-lime-7: rgb(187, 221, 118);
  --color-lime-6: rgb(169, 206, 83);
  --color-lime-5: rgb(135, 176, 0);
  --color-lime-4: rgb(105, 145, 0);
  --color-lime-3: rgb(85, 119, 0);
  --color-lime-2: rgb(66, 94, 0);
  --color-lime-1pt5: rgb(16, 26, 0);
  --color-lime-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-lime-1: var(--color-lime-1);
  --ds-color-lime-1pt5: var(--color-lime-1pt5);
  --ds-color-lime-2: var(--color-lime-2);
  --ds-color-lime-3: var(--color-lime-3);
  --ds-color-lime-4: var(--color-lime-4);
  --ds-color-lime-5: var(--color-lime-5);
  --ds-color-lime-6: var(--color-lime-6);
  --ds-color-lime-7: var(--color-lime-7);
  --ds-color-lime-8: var(--color-lime-8);
  --ds-color-lime-9: var(--color-lime-9);
  --ds-color-lime-10: var(--color-lime-10);
  --ds-color-lime-11: var(--color-lime-11);
  --ds-color-lime-12: var(--color-lime-12);
  --ds-color-lime-13: var(--color-lime-13);

  /* —————————————— emerald */
  /* legacy tokens */
  --color-emerald-13: rgb(248, 253, 251);
  --color-emerald-12: rgb(243, 253, 249);
  --color-emerald-11: rgb(227, 252, 242);
  --color-emerald-10: rgb(204, 251, 232);
  --color-emerald-9: rgb(182, 249, 223);
  --color-emerald-8: rgb(147, 245, 210);
  --color-emerald-7: rgb(97, 234, 190);
  --color-emerald-6: rgb(31, 221, 172);
  --color-emerald-5: rgb(0, 193, 138);
  --color-emerald-4: rgb(0, 162, 108);
  --color-emerald-3: rgb(0, 134, 87);
  --color-emerald-2: rgb(0, 107, 67);
  --color-emerald-1pt5: rgb(0, 31, 17);
  --color-emerald-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-emerald-1: var(--color-emerald-1);
  --ds-color-emerald-1pt5: var(--color-emerald-1pt5);
  --ds-color-emerald-2: var(--color-emerald-2);
  --ds-color-emerald-3: var(--color-emerald-3);
  --ds-color-emerald-4: var(--color-emerald-4);
  --ds-color-emerald-5: var(--color-emerald-5);
  --ds-color-emerald-6: var(--color-emerald-6);
  --ds-color-emerald-7: var(--color-emerald-7);
  --ds-color-emerald-8: var(--color-emerald-8);
  --ds-color-emerald-9: var(--color-emerald-9);
  --ds-color-emerald-10: var(--color-emerald-10);
  --ds-color-emerald-11: var(--color-emerald-11);
  --ds-color-emerald-12: var(--color-emerald-12);
  --ds-color-emerald-13: var(--color-emerald-13);

  /* —————————————— teal */
  /* legacy tokens */
  --color-teal-13: rgb(248, 253, 253);
  --color-teal-12: rgb(242, 253, 252);
  --color-teal-11: rgb(223, 252, 252);
  --color-teal-10: rgb(197, 250, 250);
  --color-teal-9: rgb(171, 248, 248);
  --color-teal-8: rgb(129, 244, 245);
  --color-teal-7: rgb(54, 233, 235);
  --color-teal-6: rgb(0, 219, 222);
  --color-teal-5: rgb(0, 191, 196);
  --color-teal-4: rgb(0, 159, 165);
  --color-teal-3: rgb(0, 132, 138);
  --color-teal-2: rgb(0, 105, 110);
  --color-teal-1pt5: rgb(0, 30, 32);
  --color-teal-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-teal-1: var(--color-teal-1);
  --ds-color-teal-1pt5: var(--color-teal-1pt5);
  --ds-color-teal-2: var(--color-teal-2);
  --ds-color-teal-3: var(--color-teal-3);
  --ds-color-teal-4: var(--color-teal-4);
  --ds-color-teal-5: var(--color-teal-5);
  --ds-color-teal-6: var(--color-teal-6);
  --ds-color-teal-7: var(--color-teal-7);
  --ds-color-teal-8: var(--color-teal-8);
  --ds-color-teal-9: var(--color-teal-9);
  --ds-color-teal-10: var(--color-teal-10);
  --ds-color-teal-11: var(--color-teal-11);
  --ds-color-teal-12: var(--color-teal-12);
  --ds-color-teal-13: var(--color-teal-13);

  /* —————————————— sky */
  /* legacy tokens */
  --color-sky-13: rgb(248, 253, 254);
  --color-sky-12: rgb(242, 252, 255);
  --color-sky-11: rgb(224, 251, 255);
  --color-sky-10: rgb(198, 248, 255);
  --color-sky-9: rgb(173, 245, 255);
  --color-sky-8: rgb(133, 240, 255);
  --color-sky-7: rgb(68, 227, 255);
  --color-sky-6: rgb(0, 213, 253);
  --color-sky-5: rgb(0, 183, 232);
  --color-sky-4: rgb(0, 151, 200);
  --color-sky-3: rgb(0, 125, 168);
  --color-sky-2: rgb(0, 99, 135);
  --color-sky-1pt5: rgb(0, 28, 41);
  --color-sky-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-sky-1: var(--color-sky-1);
  --ds-color-sky-1pt5: var(--color-sky-1pt5);
  --ds-color-sky-2: var(--color-sky-2);
  --ds-color-sky-3: var(--color-sky-3);
  --ds-color-sky-4: var(--color-sky-4);
  --ds-color-sky-5: var(--color-sky-5);
  --ds-color-sky-6: var(--color-sky-6);
  --ds-color-sky-7: var(--color-sky-7);
  --ds-color-sky-8: var(--color-sky-8);
  --ds-color-sky-9: var(--color-sky-9);
  --ds-color-sky-10: var(--color-sky-10);
  --ds-color-sky-11: var(--color-sky-11);
  --ds-color-sky-12: var(--color-sky-12);
  --ds-color-sky-13: var(--color-sky-13);

  /* —————————————— indigo */
  /* legacy tokens */
  --color-indigo-13: rgb(250, 252, 255);
  --color-indigo-12: rgb(247, 250, 255);
  --color-indigo-11: rgb(236, 245, 255);
  --color-indigo-10: rgb(223, 238, 255);
  --color-indigo-9: rgb(210, 231, 255);
  --color-indigo-8: rgb(192, 220, 255);
  --color-indigo-7: rgb(168, 202, 255);
  --color-indigo-6: rgb(147, 184, 255);
  --color-indigo-5: rgb(109, 149, 255);
  --color-indigo-4: rgb(80, 116, 241);
  --color-indigo-3: rgb(62, 93, 205);
  --color-indigo-2: rgb(47, 73, 165);
  --color-indigo-1pt5: rgb(9, 19, 52);
  --color-indigo-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-indigo-1: var(--color-indigo-1);
  --ds-color-indigo-1pt5: var(--color-indigo-1pt5);
  --ds-color-indigo-2: var(--color-indigo-2);
  --ds-color-indigo-3: var(--color-indigo-3);
  --ds-color-indigo-4: var(--color-indigo-4);
  --ds-color-indigo-5: var(--color-indigo-5);
  --ds-color-indigo-6: var(--color-indigo-6);
  --ds-color-indigo-7: var(--color-indigo-7);
  --ds-color-indigo-8: var(--color-indigo-8);
  --ds-color-indigo-9: var(--color-indigo-9);
  --ds-color-indigo-10: var(--color-indigo-10);
  --ds-color-indigo-11: var(--color-indigo-11);
  --ds-color-indigo-12: var(--color-indigo-12);
  --ds-color-indigo-13: var(--color-indigo-13);

  /* —————————————— violet */
  /* legacy tokens */
  --color-violet-13: rgb(251, 251, 255);
  --color-violet-12: rgb(248, 249, 255);
  --color-violet-11: rgb(241, 243, 255);
  --color-violet-10: rgb(231, 235, 255);
  --color-violet-9: rgb(221, 227, 255);
  --color-violet-8: rgb(208, 215, 255);
  --color-violet-7: rgb(188, 195, 255);
  --color-violet-6: rgb(171, 177, 255);
  --color-violet-5: rgb(139, 140, 255);
  --color-violet-4: rgb(110, 107, 238);
  --color-violet-3: rgb(90, 85, 202);
  --color-violet-2: rgb(70, 66, 163);
  --color-violet-1pt5: rgb(17, 16, 51);
  --color-violet-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-violet-1: var(--color-violet-1);
  --ds-color-violet-1pt5: var(--color-violet-1pt5);
  --ds-color-violet-2: var(--color-violet-2);
  --ds-color-violet-3: var(--color-violet-3);
  --ds-color-violet-4: var(--color-violet-4);
  --ds-color-violet-5: var(--color-violet-5);
  --ds-color-violet-6: var(--color-violet-6);
  --ds-color-violet-7: var(--color-violet-7);
  --ds-color-violet-8: var(--color-violet-8);
  --ds-color-violet-9: var(--color-violet-9);
  --ds-color-violet-10: var(--color-violet-10);
  --ds-color-violet-11: var(--color-violet-11);
  --ds-color-violet-12: var(--color-violet-12);
  --ds-color-violet-13: var(--color-violet-13);

  /* —————————————— purple */
  /* legacy tokens */
  --color-purple-13: rgb(252, 251, 255);
  --color-purple-12: rgb(250, 249, 255);
  --color-purple-11: rgb(245, 242, 255);
  --color-purple-10: rgb(239, 233, 255);
  --color-purple-9: rgb(232, 224, 255);
  --color-purple-8: rgb(223, 210, 255);
  --color-purple-7: rgb(208, 189, 255);
  --color-purple-6: rgb(192, 169, 255);
  --color-purple-5: rgb(163, 131, 255);
  --color-purple-4: rgb(134, 98, 231);
  --color-purple-3: rgb(110, 78, 195);
  --color-purple-2: rgb(87, 60, 157);
  --color-purple-1pt5: rgb(24, 14, 49);
  --color-purple-1: rgb(0, 0, 0);
  /* Transitional tokens */
  --ds-color-purple-1: var(--color-purple-1);
  --ds-color-purple-1pt5: var(--color-purple-1pt5);
  --ds-color-purple-2: var(--color-purple-2);
  --ds-color-purple-3: var(--color-purple-3);
  --ds-color-purple-4: var(--color-purple-4);
  --ds-color-purple-5: var(--color-purple-5);
  --ds-color-purple-6: var(--color-purple-6);
  --ds-color-purple-7: var(--color-purple-7);
  --ds-color-purple-8: var(--color-purple-8);
  --ds-color-purple-9: var(--color-purple-9);
  --ds-color-purple-10: var(--color-purple-10);
  --ds-color-purple-11: var(--color-purple-11);
  --ds-color-purple-12: var(--color-purple-12);
  --ds-color-purple-13: var(--color-purple-13);

  --colors-static-bg-primary: var(--colors-ui-neutral-20-dark);
  --colors-static-bg-secondary: var(--colors-ui-neutral-20-dark-a);
  --colors-static-bg-tertiary: var(--colors-ui-neutral-40-dark-a);
  --colors-static-bg-overlay: var(--colors-ui-neutral-20-dark);
  --colors-static-bg-scrim: var(--colors-ui-neutral-130-dark-a);
  --colors-static-bg-glass: var(--colors-ui-neutral-20-dark-a);
  --colors-static-bg-accent: var(--colors-ui-accent-20-dark);
  --colors-static-bg-contrast: var(--colors-white-100);
  --colors-static-bg-transparent: var(--colors-black-0);
  --colors-static-bg-informative-primary: var(--colors-ui-informative-100-dark);
  --colors-static-bg-informative-secondary: var(--colors-ui-informative-40-dark);
  --colors-static-bg-positive-primary: var(--colors-ui-positive-100-dark);
  --colors-static-bg-positive-secondary: var(--colors-ui-positive-40-dark);
  --colors-static-bg-warning-primary: var(--colors-ui-warning-100-dark);
  --colors-static-bg-warning-secondary: var(--colors-ui-warning-40-dark);
  --colors-static-bg-negative-primary: var(--colors-ui-negative-100-dark);
  --colors-static-bg-negative-secondary: var(--colors-ui-negative-40-dark);
  --colors-static-fg-primary: var(--colors-ui-neutral-140-dark-a);
  --colors-static-fg-secondary: var(--colors-ui-neutral-120-dark-a);
  --colors-static-fg-tertiary: var(--colors-ui-neutral-100-dark-a);
  --colors-static-fg-accent-primary: var(--colors-ui-accent-140-dark-a);
  --colors-static-fg-accent-secondary: var(--colors-ui-accent-120-dark-a);
  --colors-static-fg-accent-tertiary: var(--colors-ui-accent-100-dark-a);
  --colors-static-fg-contrast-primary: var(--colors-ui-neutral-140-a);
  --colors-static-fg-contrast-secondary: var(--colors-ui-neutral-120-a);
  --colors-static-fg-contrast-tertiary: var(--colors-ui-neutral-100-a);
  --colors-static-fg-informative-primary: var(--colors-ui-informative-140-dark-a);
  --colors-static-fg-informative-secondary: var(--colors-ui-informative-120-dark-a);
  --colors-static-fg-informative-tertiary: var(--colors-ui-informative-100-dark-a);
  --colors-static-fg-positive-primary: var(--colors-ui-positive-140-dark-a);
  --colors-static-fg-positive-secondary: var(--colors-ui-positive-120-dark-a);
  --colors-static-fg-positive-tertiary: var(--colors-ui-positive-100-dark-a);
  --colors-static-fg-warning-primary: var(--colors-ui-warning-140-dark-a);
  --colors-static-fg-warning-secondary: var(--colors-ui-warning-120-dark-a);
  --colors-static-fg-warning-tertiary: var(--colors-ui-warning-100-dark-a);
  --colors-static-fg-negative-primary: var(--colors-ui-negative-140-dark-a);
  --colors-static-fg-negative-secondary: var(--colors-ui-negative-120-dark-a);
  --colors-static-fg-negative-tertiary: var(--colors-ui-negative-100-dark-a);
  --colors-static-stroke-primary: var(--colors-ui-neutral-60-dark);
  --colors-static-stroke-secondary: var(--colors-ui-neutral-50-dark);
  --colors-static-stroke-tertiary: var(--colors-ui-neutral-40-dark);
  --colors-static-stroke-accent: var(--colors-ui-accent-60-dark);
  --colors-static-stroke-informative: var(--colors-ui-informative-60-dark);
  --colors-static-stroke-positive: var(--colors-ui-positive-60-dark);
  --colors-static-stroke-warning: var(--colors-ui-warning-60-dark);
  --colors-static-stroke-negative: var(--colors-ui-negative-60-dark);
  --colors-solid-bg-accent-default: var(--colors-ui-accent-100-dark);
  --colors-solid-bg-accent-hover: var(--colors-ui-accent-110-dark);
  --colors-solid-bg-accent-active: var(--colors-ui-accent-120-dark);
  --colors-solid-bg-accent-disabled: var(--colors-ui-accent-50-dark);
  --colors-solid-bg-neutral-strong-default: var(--colors-ui-neutral-40-dark);
  --colors-solid-bg-neutral-strong-hover: var(--colors-ui-neutral-50-dark);
  --colors-solid-bg-neutral-strong-active: var(--colors-ui-neutral-60-dark);
  --colors-solid-bg-neutral-strong-disabled: var(--colors-ui-neutral-20-dark);
  --colors-solid-bg-neutral-weak-default: var(--colors-ui-neutral-70-dark);
  --colors-solid-bg-neutral-weak-hover: var(--colors-ui-neutral-80-dark);
  --colors-solid-bg-neutral-weak-active: var(--colors-ui-neutral-90-dark);
  --colors-solid-bg-neutral-weak-disabled: var(--colors-ui-neutral-50-dark);
  --colors-solid-bg-positive-default: var(--colors-ui-positive-100-dark);
  --colors-solid-bg-positive-hover: var(--colors-ui-positive-110-dark);
  --colors-solid-bg-positive-active: var(--colors-ui-positive-120-dark);
  --colors-solid-bg-positive-disabled: var(--colors-ui-positive-50-dark);
  --colors-solid-bg-negative-strong-default: var(--colors-ui-negative-100-dark);
  --colors-solid-bg-negative-strong-hover: var(--colors-ui-negative-110-dark);
  --colors-solid-bg-negative-strong-active: var(--colors-ui-negative-120-dark);
  --colors-solid-bg-negative-strong-disabled: var(--colors-ui-negative-50-dark);
  --colors-solid-bg-negative-weak-default: var(--colors-ui-neutral-30-dark);
  --colors-solid-bg-negative-weak-hover: var(--colors-ui-negative-50-dark);
  --colors-solid-bg-negative-weak-active: var(--colors-ui-negative-60-dark);
  --colors-solid-bg-negative-weak-disabled: var(--colors-ui-negative-40-dark);
  --colors-solid-fg-accent-primary: var(--colors-ui-accent-foreground-primary-dark);
  --colors-solid-fg-accent-secondary: var(--colors-ui-accent-foreground-secondary-dark);
  --colors-solid-fg-accent-disabled: var(--colors-ui-accent-80-dark-a);
  --colors-solid-fg-neutral-strong-primary: var(--colors-ui-neutral-foreground-primary-dark);
  --colors-solid-fg-neutral-strong-secondary: var(--colors-ui-neutral-foreground-secondary-dark);
  --colors-solid-fg-neutral-strong-disabled: var(--colors-ui-neutral-80-dark);
  --colors-solid-fg-neutral-weak-primary: var(--colors-ui-neutral-foreground-primary-dark);
  --colors-solid-fg-neutral-weak-secondary: var(--colors-ui-neutral-foreground-secondary-dark);
  --colors-solid-fg-neutral-weak-disabled: var(--colors-ui-neutral-80-dark);
  --colors-solid-fg-positive-primary: var(--colors-ui-positive-foreground-primary-dark);
  --colors-solid-fg-positive-secondary: var(--colors-ui-positive-foreground-secondary-dark);
  --colors-solid-fg-positive-disabled: var(--colors-ui-positive-80-dark);
  --colors-solid-fg-negative-strong-primary: var(--colors-ui-negative-foreground-primary-dark);
  --colors-solid-fg-negative-strong-secondary: var(--colors-ui-negative-foreground-secondary-dark);
  --colors-solid-fg-negative-strong-disabled: var(--colors-ui-negative-80-dark);
  --colors-solid-fg-negative-weak-primary: var(--colors-ui-negative-120-dark);
  --colors-solid-fg-negative-weak-secondary: var(--colors-ui-negative-110-dark);
  --colors-solid-fg-negative-weak-disabled: var(--colors-ui-negative-80-dark);
  --colors-solid-stroke-accent-default: var(--colors-ui-accent-100-dark);
  --colors-solid-stroke-accent-hover: var(--colors-ui-accent-110-dark);
  --colors-solid-stroke-accent-active: var(--colors-ui-accent-120-dark);
  --colors-solid-stroke-accent-disabled: var(--colors-ui-accent-50-dark);
  --colors-solid-stroke-neutral-strong-default: var(--colors-ui-neutral-100-dark);
  --colors-solid-stroke-neutral-strong-hover: var(--colors-ui-neutral-110-dark);
  --colors-solid-stroke-neutral-strong-active: var(--colors-ui-neutral-130-dark);
  --colors-solid-stroke-neutral-strong-disabled: var(--colors-ui-neutral-50-dark);
  --colors-solid-stroke-neutral-weak-default: var(--colors-ui-neutral-70-dark);
  --colors-solid-stroke-neutral-weak-hover: var(--colors-ui-neutral-80-dark);
  --colors-solid-stroke-neutral-weak-active: var(--colors-ui-neutral-100-dark);
  --colors-solid-stroke-neutral-weak-disabled: var(--colors-ui-neutral-50-dark);
  --colors-solid-stroke-positive-default: var(--colors-ui-positive-100-dark);
  --colors-solid-stroke-positive-hover: var(--colors-ui-positive-110-dark);
  --colors-solid-stroke-positive-active: var(--colors-ui-positive-120-dark);
  --colors-solid-stroke-positive-disabled: var(--colors-ui-positive-50-dark);
  --colors-solid-stroke-negative-strong-default: var(--colors-ui-negative-100-dark);
  --colors-solid-stroke-negative-strong-hover: var(--colors-ui-negative-110-dark);
  --colors-solid-stroke-negative-strong-active: var(--colors-ui-negative-120-dark);
  --colors-solid-stroke-negative-strong-disabled: var(--colors-ui-negative-50-dark);
  --colors-solid-stroke-negative-weak-default: var(--colors-ui-negative-80-dark);
  --colors-solid-stroke-negative-weak-hover: var(--colors-ui-negative-90-dark);
  --colors-solid-stroke-negative-weak-active: var(--colors-ui-negative-100-dark);
  --colors-solid-stroke-negative-weak-disabled: var(--colors-ui-negative-50-dark);
  --colors-ghost-bg-neutral-default: var(--colors-black-0);
  --colors-ghost-bg-neutral-hover: var(--colors-ui-neutral-30-dark-a);
  --colors-ghost-bg-neutral-active: var(--colors-ui-neutral-40-dark-a);
  --colors-ghost-bg-neutral-disabled: var(--colors-ui-neutral-20-dark-a);
  --colors-ghost-bg-selected-default: var(--colors-ui-accent-40-dark-a);
  --colors-ghost-bg-selected-hover: var(--colors-ui-accent-50-dark-a);
  --colors-ghost-bg-selected-active: var(--colors-ui-accent-60-dark-a);
  --colors-ghost-bg-selected-disabled: var(--colors-ui-accent-20-dark-a);
  --colors-ghost-bg-negative-default: var(--colors-black-0);
  --colors-ghost-bg-negative-hover: var(--colors-ui-negative-30-dark-a);
  --colors-ghost-bg-negative-active: var(--colors-ui-negative-50-dark-a);
  --colors-ghost-bg-negative-disabled: var(--colors-ui-negative-20-dark-a);
  --colors-ghost-fg-neutral-primary: var(--colors-ui-neutral-140-dark-a);
  --colors-ghost-fg-neutral-secondary: var(--colors-ui-neutral-110-dark-a);
  --colors-ghost-fg-neutral-disabled: var(--colors-ui-neutral-70-dark-a);
  --colors-ghost-fg-selected-primary: var(--colors-ui-accent-140-dark);
  --colors-ghost-fg-selected-secondary: var(--colors-ui-accent-110-dark-a);
  --colors-ghost-fg-selected-disabled: var(--colors-ui-accent-70-dark-a);
  --colors-ghost-fg-negative-primary: var(--colors-ui-negative-140-dark);
  --colors-ghost-fg-negative-secondary: var(--colors-ui-negative-110-dark-a);
  --colors-ghost-fg-negative-disabled: var(--colors-ui-negative-70-dark-a);
  --colors-input-bg-default: var(--colors-black-100);
  --colors-input-bg-hover: var(--colors-black-100);
  --colors-input-bg-active: var(--colors-black-100);
  --colors-input-bg-disabled: var(--colors-ui-neutral-30-dark);
  --colors-input-bg-changed: var(--colors-ui-accent-30-a);
  --colors-input-fg-primary-default: var(--colors-ui-neutral-130-dark);
  --colors-input-fg-primary-hover: var(--colors-ui-neutral-140-dark);
  --colors-input-fg-primary-active: var(--colors-ui-neutral-140-dark);
  --colors-input-fg-primary-disabled: var(--colors-ui-neutral-70-dark);
  --colors-input-fg-secondary-default: var(--colors-ui-neutral-120-dark);
  --colors-input-fg-secondary-hover: var(--colors-ui-neutral-130-dark);
  --colors-input-fg-secondary-active: var(--colors-ui-neutral-130-dark);
  --colors-input-fg-secondary-disabled: var(--colors-ui-neutral-70-dark);
  --colors-input-fg-placeholder-default: var(--colors-ui-neutral-110-dark);
  --colors-input-fg-placeholder-hover: var(--colors-ui-neutral-120-dark);
  --colors-input-fg-placeholder-active: var(--colors-ui-neutral-110-dark);
  --colors-input-fg-placeholder-disabled: var(--colors-ui-neutral-70-dark);
  --colors-input-fg-value-default: var(--colors-ui-neutral-130-dark);
  --colors-input-fg-value-hover: var(--colors-ui-neutral-140-dark);
  --colors-input-fg-value-active: var(--colors-ui-neutral-140-dark);
  --colors-input-fg-value-disabled: var(--colors-ui-neutral-70-dark);
  --colors-input-fg-accessory-default: var(--colors-ui-neutral-120-dark);
  --colors-input-fg-accessory-hover: var(--colors-ui-neutral-130-dark);
  --colors-input-fg-accessory-active: var(--colors-ui-neutral-130-dark);
  --colors-input-fg-accessory-disabled: var(--colors-ui-neutral-70-dark);
  --colors-input-stroke-default: var(--colors-ui-neutral-70-dark);
  --colors-input-stroke-hover: var(--colors-ui-neutral-80-dark);
  --colors-input-stroke-active: var(--colors-ui-neutral-140-dark);
  --colors-input-stroke-disabled: var(--colors-ui-neutral-60-dark);
  --colors-input-stroke-valid: var(--colors-ui-positive-100-dark);
  --colors-input-stroke-error: var(--colors-ui-negative-100-dark);
  --colors-input-stroke-neutral-default: var(--colors-ui-neutral-70-dark);
  --colors-input-stroke-neutral-hover: var(--colors-ui-neutral-80-dark);
  --colors-input-stroke-neutral-active: var(--colors-ui-neutral-140-dark);
  --colors-input-stroke-neutral-disabled: var(--colors-ui-neutral-60-dark);
  --colors-input-stroke-positive-default: var(--colors-ui-positive-100-dark);
  --colors-input-stroke-positive-hover: var(--colors-ui-positive-110-dark);
  --colors-input-stroke-positive-active: var(--colors-ui-neutral-140-dark);
  --colors-input-stroke-negative-default: var(--colors-ui-negative-100-dark);
  --colors-input-stroke-negative-hover: var(--colors-ui-negative-110-dark);
  --colors-input-stroke-negative-active: var(--colors-ui-neutral-140-dark);
  --colors-inline-accent-default: var(--colors-ui-accent-120-dark);
  --colors-inline-accent-hover: var(--colors-ui-accent-110-dark);
  --colors-inline-accent-active: var(--colors-ui-accent-130-dark);
  --colors-inline-accent-disabled: var(--colors-ui-accent-70-dark);
  --colors-inline-neutral-strong-default: var(--colors-ui-neutral-140-dark);
  --colors-inline-neutral-strong-hover: var(--colors-ui-neutral-130-dark);
  --colors-inline-neutral-strong-active: var(--colors-ui-neutral-110-dark);
  --colors-inline-neutral-strong-disabled: var(--colors-ui-neutral-70-dark);
  --colors-inline-neutral-weak-default: var(--colors-ui-neutral-70-dark);
  --colors-inline-neutral-weak-hover: var(--colors-ui-neutral-80-dark);
  --colors-inline-neutral-weak-active: var(--colors-ui-neutral-100-dark);
  --colors-inline-neutral-weak-disabled: var(--colors-ui-neutral-50-dark);
  --colors-inline-negative-default: var(--colors-ui-negative-120-dark);
  --colors-inline-negative-hover: var(--colors-ui-negative-110-dark);
  --colors-inline-negative-active: var(--colors-ui-negative-130-dark);
  --colors-inline-negative-disabled: var(--colors-ui-negative-70-dark);
  --colors-inline-positive-default: var(--colors-ui-positive-120-dark);
  --colors-inline-positive-hover: var(--colors-ui-positive-110-dark);
  --colors-inline-positive-active: var(--colors-ui-positive-130-dark);
  --colors-inline-positive-disabled: var(--colors-ui-positive-70-dark);
  --colors-utility-focus: var(--colors-white-100);
  --colors-utility-shadow-neutral: var(--colors-black-40);
  --colors-utility-shadow-accent: var(--colors-ui-accent-30-dark-a);
  --colors-utility-shadow-positive: var(--colors-ui-positive-30-dark-a);
  --colors-utility-shadow-negative: var(--colors-ui-negative-30-dark-a);
  --colors-utility-shadow-glass-inner-sharp: var(--colors-white-20);
  --colors-utility-shadow-glass-inner-soft: var(--colors-white-5);
  --colors-utility-gradient-button-start: var(--colors-white-20);
  --colors-utility-gradient-button-end: var(--colors-white-0);
  --colors-swatch-bg-red-strong-default: var(--colors-ui-spot-red-100-dark);
  --colors-swatch-bg-red-strong-hover: var(--colors-ui-spot-red-110-dark);
  --colors-swatch-bg-red-strong-active: var(--colors-ui-spot-red-120-dark);
  --colors-swatch-bg-red-strong-disabled: var(--colors-ui-spot-red-50-dark);
  --colors-swatch-bg-red-weak-default: var(--colors-ui-spot-red-50-dark);
  --colors-swatch-bg-red-weak-hover: var(--colors-ui-spot-red-60-dark);
  --colors-swatch-bg-red-weak-active: var(--colors-ui-spot-red-70-dark);
  --colors-swatch-bg-red-weak-disabled: var(--colors-ui-spot-red-20-dark);
  --colors-swatch-bg-orange-strong-default: var(--colors-ui-spot-orange-100-dark);
  --colors-swatch-bg-orange-strong-hover: var(--colors-ui-spot-orange-110-dark);
  --colors-swatch-bg-orange-strong-active: var(--colors-ui-spot-orange-120-dark);
  --colors-swatch-bg-orange-strong-disabled: var(--colors-ui-spot-orange-50-dark);
  --colors-swatch-bg-orange-weak-default: var(--colors-ui-spot-orange-50-dark);
  --colors-swatch-bg-orange-weak-hover: var(--colors-ui-spot-orange-60-dark);
  --colors-swatch-bg-orange-weak-active: var(--colors-ui-spot-orange-70-dark);
  --colors-swatch-bg-orange-weak-disabled: var(--colors-ui-spot-orange-20-dark);
  --colors-swatch-bg-yellow-strong-default: var(--colors-ui-spot-yellow-100-dark);
  --colors-swatch-bg-yellow-strong-hover: var(--colors-ui-spot-yellow-110-dark);
  --colors-swatch-bg-yellow-strong-active: var(--colors-ui-spot-yellow-120-dark);
  --colors-swatch-bg-yellow-strong-disabled: var(--colors-ui-spot-yellow-50-dark);
  --colors-swatch-bg-yellow-weak-default: var(--colors-ui-spot-yellow-50-dark);
  --colors-swatch-bg-yellow-weak-hover: var(--colors-ui-spot-yellow-60-dark);
  --colors-swatch-bg-yellow-weak-active: var(--colors-ui-spot-yellow-70-dark);
  --colors-swatch-bg-yellow-weak-disabled: var(--colors-ui-spot-yellow-20-dark);
  --colors-swatch-bg-lime-strong-default: var(--colors-ui-spot-lime-100-dark);
  --colors-swatch-bg-lime-strong-hover: var(--colors-ui-spot-lime-110-dark);
  --colors-swatch-bg-lime-strong-active: var(--colors-ui-spot-lime-120-dark);
  --colors-swatch-bg-lime-strong-disabled: var(--colors-ui-spot-lime-50-dark);
  --colors-swatch-bg-lime-weak-default: var(--colors-ui-spot-lime-50-dark);
  --colors-swatch-bg-lime-weak-hover: var(--colors-ui-spot-lime-60-dark);
  --colors-swatch-bg-lime-weak-active: var(--colors-ui-spot-lime-70-dark);
  --colors-swatch-bg-lime-weak-disabled: var(--colors-ui-spot-lime-20-dark);
  --colors-swatch-bg-green-strong-default: var(--colors-ui-spot-green-100-dark);
  --colors-swatch-bg-green-strong-hover: var(--colors-ui-spot-green-110-dark);
  --colors-swatch-bg-green-strong-active: var(--colors-ui-spot-green-120-dark);
  --colors-swatch-bg-green-strong-disabled: var(--colors-ui-spot-green-50-dark);
  --colors-swatch-bg-green-weak-default: var(--colors-ui-spot-green-50-dark);
  --colors-swatch-bg-green-weak-hover: var(--colors-ui-spot-green-60-dark);
  --colors-swatch-bg-green-weak-active: var(--colors-ui-spot-green-70-dark);
  --colors-swatch-bg-green-weak-disabled: var(--colors-ui-spot-green-20-dark);
  --colors-swatch-bg-mint-strong-default: var(--colors-ui-spot-mint-100-dark);
  --colors-swatch-bg-mint-strong-hover: var(--colors-ui-spot-mint-110-dark);
  --colors-swatch-bg-mint-strong-active: var(--colors-ui-spot-mint-120-dark);
  --colors-swatch-bg-mint-strong-disabled: var(--colors-ui-spot-mint-50-dark);
  --colors-swatch-bg-mint-weak-default: var(--colors-ui-spot-mint-50-dark);
  --colors-swatch-bg-mint-weak-hover: var(--colors-ui-spot-mint-60-dark);
  --colors-swatch-bg-mint-weak-active: var(--colors-ui-spot-mint-70-dark);
  --colors-swatch-bg-mint-weak-disabled: var(--colors-ui-spot-mint-20-dark);
  --colors-swatch-bg-blue-strong-default: var(--colors-ui-spot-blue-100-dark);
  --colors-swatch-bg-blue-strong-hover: var(--colors-ui-spot-blue-110-dark);
  --colors-swatch-bg-blue-strong-active: var(--colors-ui-spot-blue-120-dark);
  --colors-swatch-bg-blue-strong-disabled: var(--colors-ui-spot-blue-50-dark);
  --colors-swatch-bg-blue-weak-default: var(--colors-ui-spot-blue-50-dark);
  --colors-swatch-bg-blue-weak-hover: var(--colors-ui-spot-blue-60-dark);
  --colors-swatch-bg-blue-weak-active: var(--colors-ui-spot-blue-70-dark);
  --colors-swatch-bg-blue-weak-disabled: var(--colors-ui-spot-blue-20-dark);
  --colors-swatch-bg-indigo-strong-default: var(--colors-ui-spot-indigo-100-dark);
  --colors-swatch-bg-indigo-strong-hover: var(--colors-ui-spot-indigo-110-dark);
  --colors-swatch-bg-indigo-strong-active: var(--colors-ui-spot-indigo-120-dark);
  --colors-swatch-bg-indigo-strong-disabled: var(--colors-ui-spot-indigo-50-dark);
  --colors-swatch-bg-indigo-weak-default: var(--colors-ui-spot-indigo-50-dark);
  --colors-swatch-bg-indigo-weak-hover: var(--colors-ui-spot-indigo-60-dark);
  --colors-swatch-bg-indigo-weak-active: var(--colors-ui-spot-indigo-70-dark);
  --colors-swatch-bg-indigo-weak-disabled: var(--colors-ui-spot-indigo-20-dark);
  --colors-swatch-bg-purple-strong-default: var(--colors-ui-spot-purple-100-dark);
  --colors-swatch-bg-purple-strong-hover: var(--colors-ui-spot-purple-110-dark);
  --colors-swatch-bg-purple-strong-active: var(--colors-ui-spot-purple-120-dark);
  --colors-swatch-bg-purple-strong-disabled: var(--colors-ui-spot-purple-50-dark);
  --colors-swatch-bg-purple-weak-default: var(--colors-ui-spot-purple-50-dark);
  --colors-swatch-bg-purple-weak-hover: var(--colors-ui-spot-purple-60-dark);
  --colors-swatch-bg-purple-weak-active: var(--colors-ui-spot-purple-70-dark);
  --colors-swatch-bg-purple-weak-disabled: var(--colors-ui-spot-purple-20-dark);
  --colors-swatch-bg-pink-strong-default: var(--colors-ui-spot-pink-100-dark);
  --colors-swatch-bg-pink-strong-hover: var(--colors-ui-spot-pink-110-dark);
  --colors-swatch-bg-pink-strong-active: var(--colors-ui-spot-pink-120-dark);
  --colors-swatch-bg-pink-strong-disabled: var(--colors-ui-spot-pink-50-dark);
  --colors-swatch-bg-pink-weak-default: var(--colors-ui-spot-pink-50-dark);
  --colors-swatch-bg-pink-weak-hover: var(--colors-ui-spot-pink-60-dark);
  --colors-swatch-bg-pink-weak-active: var(--colors-ui-spot-pink-70-dark);
  --colors-swatch-bg-pink-weak-disabled: var(--colors-ui-spot-pink-20-dark);
  --colors-swatch-bg-brown-strong-default: var(--colors-ui-spot-brown-100-dark);
  --colors-swatch-bg-brown-strong-hover: var(--colors-ui-spot-brown-110-dark);
  --colors-swatch-bg-brown-strong-active: var(--colors-ui-spot-brown-120-dark);
  --colors-swatch-bg-brown-strong-disabled: var(--colors-ui-spot-brown-50-dark);
  --colors-swatch-bg-brown-weak-default: var(--colors-ui-spot-brown-50-dark);
  --colors-swatch-bg-brown-weak-hover: var(--colors-ui-spot-brown-60-dark);
  --colors-swatch-bg-brown-weak-active: var(--colors-ui-spot-brown-70-dark);
  --colors-swatch-bg-brown-weak-disabled: var(--colors-ui-spot-brown-20-dark);
  --colors-swatch-bg-gray-strong-default: var(--colors-ui-spot-gray-100-dark);
  --colors-swatch-bg-gray-strong-hover: var(--colors-ui-spot-gray-110-dark);
  --colors-swatch-bg-gray-strong-active: var(--colors-ui-spot-gray-120-dark);
  --colors-swatch-bg-gray-strong-disabled: var(--colors-ui-spot-gray-50-dark);
  --colors-swatch-bg-gray-weak-default: var(--colors-ui-spot-gray-50-dark);
  --colors-swatch-bg-gray-weak-hover: var(--colors-ui-spot-gray-60-dark);
  --colors-swatch-bg-gray-weak-active: var(--colors-ui-spot-gray-70-dark);
  --colors-swatch-bg-gray-weak-disabled: var(--colors-ui-spot-gray-20-dark);
  --colors-swatch-fg-red-strong-primary: var(--colors-ui-spot-red-foreground-primary-dark);
  --colors-swatch-fg-red-strong-secondary: var(--colors-ui-spot-red-foreground-secondary-dark);
  --colors-swatch-fg-red-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-red-weak-primary: var(--colors-ui-spot-red-140-dark);
  --colors-swatch-fg-red-weak-secondary: var(--colors-ui-spot-red-120-dark);
  --colors-swatch-fg-red-weak-disabled: var(--colors-ui-spot-red-100-dark);
  --colors-swatch-fg-orange-strong-primary: var(--colors-ui-spot-orange-foreground-primary-dark);
  --colors-swatch-fg-orange-strong-secondary: var(--colors-ui-spot-orange-foreground-secondary-dark);
  --colors-swatch-fg-orange-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-orange-weak-primary: var(--colors-ui-spot-orange-140-dark);
  --colors-swatch-fg-orange-weak-secondary: var(--colors-ui-spot-orange-120-dark);
  --colors-swatch-fg-orange-weak-disabled: var(--colors-ui-spot-orange-100-dark);
  --colors-swatch-fg-yellow-strong-primary: var(--colors-ui-spot-yellow-foreground-primary-dark);
  --colors-swatch-fg-yellow-strong-secondary: var(--colors-ui-spot-yellow-foreground-secondary-dark);
  --colors-swatch-fg-yellow-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-yellow-weak-primary: var(--colors-ui-spot-yellow-140-dark);
  --colors-swatch-fg-yellow-weak-secondary: var(--colors-ui-spot-yellow-120-dark);
  --colors-swatch-fg-yellow-weak-disabled: var(--colors-ui-spot-yellow-100-dark);
  --colors-swatch-fg-lime-strong-primary: var(--colors-ui-spot-lime-foreground-primary-dark);
  --colors-swatch-fg-lime-strong-secondary: var(--colors-ui-spot-lime-foreground-secondary-dark);
  --colors-swatch-fg-lime-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-lime-weak-primary: var(--colors-ui-spot-lime-140-dark);
  --colors-swatch-fg-lime-weak-secondary: var(--colors-ui-spot-lime-120-dark);
  --colors-swatch-fg-lime-weak-disabled: var(--colors-ui-spot-lime-100-dark);
  --colors-swatch-fg-green-strong-primary: var(--colors-ui-spot-green-foreground-primary-dark);
  --colors-swatch-fg-green-strong-secondary: var(--colors-ui-spot-green-foreground-secondary-dark);
  --colors-swatch-fg-green-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-green-weak-primary: var(--colors-ui-spot-green-140-dark);
  --colors-swatch-fg-green-weak-secondary: var(--colors-ui-spot-green-120-dark);
  --colors-swatch-fg-green-weak-disabled: var(--colors-ui-spot-green-100-dark);
  --colors-swatch-fg-mint-strong-primary: var(--colors-ui-spot-mint-foreground-primary-dark);
  --colors-swatch-fg-mint-strong-secondary: var(--colors-ui-spot-mint-foreground-secondary-dark);
  --colors-swatch-fg-mint-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-mint-weak-primary: var(--colors-ui-spot-mint-140-dark);
  --colors-swatch-fg-mint-weak-secondary: var(--colors-ui-spot-mint-120-dark);
  --colors-swatch-fg-mint-weak-disabled: var(--colors-ui-spot-mint-100-dark);
  --colors-swatch-fg-blue-strong-primary: var(--colors-ui-spot-blue-foreground-primary-dark);
  --colors-swatch-fg-blue-strong-secondary: var(--colors-ui-spot-blue-foreground-secondary-dark);
  --colors-swatch-fg-blue-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-blue-weak-primary: var(--colors-ui-spot-blue-140-dark);
  --colors-swatch-fg-blue-weak-secondary: var(--colors-ui-spot-blue-120-dark);
  --colors-swatch-fg-blue-weak-disabled: var(--colors-ui-spot-blue-100-dark);
  --colors-swatch-fg-indigo-strong-primary: var(--colors-ui-spot-indigo-foreground-primary-dark);
  --colors-swatch-fg-indigo-strong-secondary: var(--colors-ui-spot-indigo-foreground-secondary-dark);
  --colors-swatch-fg-indigo-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-indigo-weak-primary: var(--colors-ui-spot-indigo-140-dark);
  --colors-swatch-fg-indigo-weak-secondary: var(--colors-ui-spot-indigo-120-dark);
  --colors-swatch-fg-indigo-weak-disabled: var(--colors-ui-spot-indigo-100-dark);
  --colors-swatch-fg-purple-strong-primary: var(--colors-ui-spot-purple-foreground-primary-dark);
  --colors-swatch-fg-purple-strong-secondary: var(--colors-ui-spot-purple-foreground-secondary-dark);
  --colors-swatch-fg-purple-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-purple-weak-primary: var(--colors-ui-spot-purple-140-dark);
  --colors-swatch-fg-purple-weak-secondary: var(--colors-ui-spot-purple-120-dark);
  --colors-swatch-fg-purple-weak-disabled: var(--colors-ui-spot-purple-100-dark);
  --colors-swatch-fg-pink-strong-primary: var(--colors-ui-spot-pink-foreground-primary-dark);
  --colors-swatch-fg-pink-strong-secondary: var(--colors-ui-spot-pink-foreground-secondary-dark);
  --colors-swatch-fg-pink-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-pink-weak-primary: var(--colors-ui-spot-pink-140-dark);
  --colors-swatch-fg-pink-weak-secondary: var(--colors-ui-spot-pink-120-dark);
  --colors-swatch-fg-pink-weak-disabled: var(--colors-ui-spot-pink-100-dark);
  --colors-swatch-fg-brown-strong-primary: var(--colors-ui-spot-brown-foreground-primary-dark);
  --colors-swatch-fg-brown-strong-secondary: var(--colors-ui-spot-brown-foreground-secondary-dark);
  --colors-swatch-fg-brown-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-brown-weak-primary: var(--colors-ui-spot-brown-140-dark);
  --colors-swatch-fg-brown-weak-secondary: var(--colors-ui-spot-brown-120-dark);
  --colors-swatch-fg-brown-weak-disabled: var(--colors-ui-spot-brown-100-dark);
  --colors-swatch-fg-gray-strong-primary: var(--colors-ui-spot-gray-foreground-primary-dark);
  --colors-swatch-fg-gray-strong-secondary: var(--colors-ui-spot-gray-foreground-secondary-dark);
  --colors-swatch-fg-gray-strong-disabled: var(--colors-black-30);
  --colors-swatch-fg-gray-weak-primary: var(--colors-ui-spot-gray-140-dark);
  --colors-swatch-fg-gray-weak-secondary: var(--colors-ui-spot-gray-120-dark);
  --colors-swatch-fg-gray-weak-disabled: var(--colors-ui-spot-gray-100-dark);
  --colors-swatch-stroke-red-strong: var(--colors-ui-spot-red-120-dark);
  --colors-swatch-stroke-red-weak: var(--colors-ui-spot-red-60-dark);
  --colors-swatch-stroke-orange-strong: var(--colors-ui-spot-orange-120-dark);
  --colors-swatch-stroke-orange-weak: var(--colors-ui-spot-orange-60-dark);
  --colors-swatch-stroke-yellow-strong: var(--colors-ui-spot-yellow-120-dark);
  --colors-swatch-stroke-yellow-weak: var(--colors-ui-spot-yellow-60-dark);
  --colors-swatch-stroke-lime-strong: var(--colors-ui-spot-lime-120-dark);
  --colors-swatch-stroke-lime-weak: var(--colors-ui-spot-lime-60-dark);
  --colors-swatch-stroke-green-strong: var(--colors-ui-spot-green-120-dark);
  --colors-swatch-stroke-green-weak: var(--colors-ui-spot-green-60-dark);
  --colors-swatch-stroke-mint-strong: var(--colors-ui-spot-mint-120-dark);
  --colors-swatch-stroke-mint-weak: var(--colors-ui-spot-mint-60-dark);
  --colors-swatch-stroke-blue-strong: var(--colors-ui-spot-blue-120-dark);
  --colors-swatch-stroke-blue-weak: var(--colors-ui-spot-blue-60-dark);
  --colors-swatch-stroke-indigo-strong: var(--colors-ui-spot-indigo-120-dark);
  --colors-swatch-stroke-indigo-weak: var(--colors-ui-spot-indigo-60-dark);
  --colors-swatch-stroke-purple-strong: var(--colors-ui-spot-purple-120-dark);
  --colors-swatch-stroke-purple-weak: var(--colors-ui-spot-purple-60-dark);
  --colors-swatch-stroke-pink-strong: var(--colors-ui-spot-pink-120-dark);
  --colors-swatch-stroke-pink-weak: var(--colors-ui-spot-pink-60-dark);
  --colors-swatch-stroke-brown-strong: var(--colors-ui-spot-brown-120-dark);
  --colors-swatch-stroke-brown-weak: var(--colors-ui-spot-brown-60-dark);
  --colors-swatch-stroke-gray-strong: var(--colors-ui-spot-gray-120-dark);
  --colors-swatch-stroke-gray-weak: var(--colors-ui-spot-gray-60-dark);
  --colors-data-categorical-bg-1-default: var(--colors-ui-category1-100-dark);
  --colors-data-categorical-bg-1-hover: var(--colors-ui-category1-110-dark);
  --colors-data-categorical-bg-1-active: var(--colors-ui-category1-120-dark);
  --colors-data-categorical-bg-1-disabled: var(--colors-ui-category1-50-dark);
  --colors-data-categorical-bg-2-default: var(--colors-ui-category1-50-dark);
  --colors-data-categorical-bg-2-hover: var(--colors-ui-category1-60-dark);
  --colors-data-categorical-bg-2-active: var(--colors-ui-category1-70-dark);
  --colors-data-categorical-bg-2-disabled: var(--colors-ui-category1-20-dark);
  --colors-data-categorical-bg-3-default: var(--colors-ui-category2-100-dark);
  --colors-data-categorical-bg-3-hover: var(--colors-ui-category2-110-dark);
  --colors-data-categorical-bg-3-active: var(--colors-ui-category2-120-dark);
  --colors-data-categorical-bg-3-disabled: var(--colors-ui-category2-50-dark);
  --colors-data-categorical-bg-4-default: var(--colors-ui-category2-50-dark);
  --colors-data-categorical-bg-4-hover: var(--colors-ui-category2-60-dark);
  --colors-data-categorical-bg-4-active: var(--colors-ui-category2-70-dark);
  --colors-data-categorical-bg-4-disabled: var(--colors-ui-category2-20-dark);
  --colors-data-categorical-bg-5-default: var(--colors-ui-category3-100-dark);
  --colors-data-categorical-bg-5-hover: var(--colors-ui-category3-110-dark);
  --colors-data-categorical-bg-5-active: var(--colors-ui-category3-120-dark);
  --colors-data-categorical-bg-5-disabled: var(--colors-ui-category3-50-dark);
  --colors-data-categorical-bg-6-default: var(--colors-ui-category3-50-dark);
  --colors-data-categorical-bg-6-hover: var(--colors-ui-category3-60-dark);
  --colors-data-categorical-bg-6-active: var(--colors-ui-category3-70-dark);
  --colors-data-categorical-bg-6-disabled: var(--colors-ui-category3-20-dark);
  --colors-data-categorical-bg-7-default: var(--colors-ui-category4-100-dark);
  --colors-data-categorical-bg-7-hover: var(--colors-ui-category4-110-dark);
  --colors-data-categorical-bg-7-active: var(--colors-ui-category4-120-dark);
  --colors-data-categorical-bg-7-disabled: var(--colors-ui-category4-50-dark);
  --colors-data-categorical-bg-8-default: var(--colors-ui-category4-50-dark);
  --colors-data-categorical-bg-8-hover: var(--colors-ui-category4-60-dark);
  --colors-data-categorical-bg-8-active: var(--colors-ui-category4-70-dark);
  --colors-data-categorical-bg-8-disabled: var(--colors-ui-category4-20-dark);
  --colors-data-categorical-bg-9-default: var(--colors-ui-category5-100-dark);
  --colors-data-categorical-bg-9-hover: var(--colors-ui-category5-110-dark);
  --colors-data-categorical-bg-9-active: var(--colors-ui-category5-120-dark);
  --colors-data-categorical-bg-9-disabled: var(--colors-ui-category5-50-dark);
  --colors-data-categorical-bg-10-default: var(--colors-ui-category5-50-dark);
  --colors-data-categorical-bg-10-hover: var(--colors-ui-category5-60-dark);
  --colors-data-categorical-bg-10-active: var(--colors-ui-category5-70-dark);
  --colors-data-categorical-bg-10-disabled: var(--colors-ui-category5-20-dark);
  --colors-data-categorical-bg-11-default: var(--colors-ui-category6-100-dark);
  --colors-data-categorical-bg-11-hover: var(--colors-ui-category6-110-dark);
  --colors-data-categorical-bg-11-active: var(--colors-ui-category6-120-dark);
  --colors-data-categorical-bg-11-disabled: var(--colors-ui-category6-50-dark);
  --colors-data-categorical-bg-12-default: var(--colors-ui-category6-50-dark);
  --colors-data-categorical-bg-12-hover: var(--colors-ui-category6-60-dark);
  --colors-data-categorical-bg-12-active: var(--colors-ui-category6-70-dark);
  --colors-data-categorical-bg-12-disabled: var(--colors-ui-category6-20-dark);
  --colors-data-categorical-bg-13-default: var(--colors-ui-category7-100-dark);
  --colors-data-categorical-bg-13-hover: var(--colors-ui-category7-110-dark);
  --colors-data-categorical-bg-13-active: var(--colors-ui-category7-120-dark);
  --colors-data-categorical-bg-13-disabled: var(--colors-ui-category7-50-dark);
  --colors-data-categorical-bg-14-default: var(--colors-ui-category7-50-dark);
  --colors-data-categorical-bg-14-hover: var(--colors-ui-category7-60-dark);
  --colors-data-categorical-bg-14-active: var(--colors-ui-category7-70-dark);
  --colors-data-categorical-bg-14-disabled: var(--colors-ui-category7-20-dark);
  --colors-data-categorical-bg-15-default: var(--colors-ui-category8-100-dark);
  --colors-data-categorical-bg-15-hover: var(--colors-ui-category8-110-dark);
  --colors-data-categorical-bg-15-active: var(--colors-ui-category8-120-dark);
  --colors-data-categorical-bg-15-disabled: var(--colors-ui-category8-50-dark);
  --colors-data-categorical-bg-16-default: var(--colors-ui-category8-50-dark);
  --colors-data-categorical-bg-16-hover: var(--colors-ui-category8-60-dark);
  --colors-data-categorical-bg-16-active: var(--colors-ui-category8-70-dark);
  --colors-data-categorical-bg-16-disabled: var(--colors-ui-category8-20-dark);
  --colors-data-categorical-fg-1-primary: var(--colors-ui-category1-foreground-primary-dark);
  --colors-data-categorical-fg-1-secondary: var(--colors-ui-category1-foreground-secondary-dark);
  --colors-data-categorical-fg-1-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-2-primary: var(--colors-ui-category1-140-dark);
  --colors-data-categorical-fg-2-secondary: var(--colors-ui-category1-120-dark);
  --colors-data-categorical-fg-2-disabled: var(--colors-ui-category1-100-dark);
  --colors-data-categorical-fg-3-primary: var(--colors-ui-category2-foreground-primary-dark);
  --colors-data-categorical-fg-3-secondary: var(--colors-ui-category2-foreground-secondary-dark);
  --colors-data-categorical-fg-3-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-4-primary: var(--colors-ui-category2-140-dark);
  --colors-data-categorical-fg-4-secondary: var(--colors-ui-category2-120-dark);
  --colors-data-categorical-fg-4-disabled: var(--colors-ui-category2-100-dark);
  --colors-data-categorical-fg-5-primary: var(--colors-ui-category3-foreground-primary-dark);
  --colors-data-categorical-fg-5-secondary: var(--colors-ui-category3-foreground-secondary-dark);
  --colors-data-categorical-fg-5-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-6-primary: var(--colors-ui-category3-140-dark);
  --colors-data-categorical-fg-6-secondary: var(--colors-ui-category3-120-dark);
  --colors-data-categorical-fg-6-disabled: var(--colors-ui-category3-100-dark);
  --colors-data-categorical-fg-7-primary: var(--colors-ui-category4-foreground-primary-dark);
  --colors-data-categorical-fg-7-secondary: var(--colors-ui-category4-foreground-secondary-dark);
  --colors-data-categorical-fg-7-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-8-primary: var(--colors-ui-category4-140-dark);
  --colors-data-categorical-fg-8-secondary: var(--colors-ui-category4-120-dark);
  --colors-data-categorical-fg-8-disabled: var(--colors-ui-category4-100-dark);
  --colors-data-categorical-fg-9-primary: var(--colors-ui-category5-foreground-primary-dark);
  --colors-data-categorical-fg-9-secondary: var(--colors-ui-category5-foreground-secondary-dark);
  --colors-data-categorical-fg-9-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-10-primary: var(--colors-ui-category5-140-dark);
  --colors-data-categorical-fg-10-secondary: var(--colors-ui-category5-120-dark);
  --colors-data-categorical-fg-10-disabled: var(--colors-ui-category5-100-dark);
  --colors-data-categorical-fg-11-primary: var(--colors-ui-category6-foreground-primary-dark);
  --colors-data-categorical-fg-11-secondary: var(--colors-ui-category6-foreground-secondary-dark);
  --colors-data-categorical-fg-11-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-12-primary: var(--colors-ui-category6-140-dark);
  --colors-data-categorical-fg-12-secondary: var(--colors-ui-category6-120-dark);
  --colors-data-categorical-fg-12-disabled: var(--colors-ui-category6-100-dark);
  --colors-data-categorical-fg-13-primary: var(--colors-ui-category7-foreground-primary-dark);
  --colors-data-categorical-fg-13-secondary: var(--colors-ui-category7-foreground-secondary-dark);
  --colors-data-categorical-fg-13-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-14-primary: var(--colors-ui-category7-140-dark);
  --colors-data-categorical-fg-14-secondary: var(--colors-ui-category7-120-dark);
  --colors-data-categorical-fg-14-disabled: var(--colors-ui-category7-100-dark);
  --colors-data-categorical-fg-15-primary: var(--colors-ui-category8-foreground-primary-dark);
  --colors-data-categorical-fg-15-secondary: var(--colors-ui-category8-foreground-secondary-dark);
  --colors-data-categorical-fg-15-disabled: var(--colors-black-30);
  --colors-data-categorical-fg-16-primary: var(--colors-ui-category8-140-dark);
  --colors-data-categorical-fg-16-secondary: var(--colors-ui-category8-120-dark);
  --colors-data-categorical-fg-16-disabled: var(--colors-ui-category8-100-dark);
  --colors-data-categorical-stroke-1: var(--colors-ui-category1-120-dark);
  --colors-data-categorical-stroke-2: var(--colors-ui-category1-60-dark);
  --colors-data-categorical-stroke-3: var(--colors-ui-category2-120-dark);
  --colors-data-categorical-stroke-4: var(--colors-ui-category2-60-dark);
  --colors-data-categorical-stroke-5: var(--colors-ui-category3-120-dark);
  --colors-data-categorical-stroke-6: var(--colors-ui-category3-60-dark);
  --colors-data-categorical-stroke-7: var(--colors-ui-category4-120-dark);
  --colors-data-categorical-stroke-8: var(--colors-ui-category4-60-dark);
  --colors-data-categorical-stroke-9: var(--colors-ui-category5-120-dark);
  --colors-data-categorical-stroke-10: var(--colors-ui-category5-60-dark);
  --colors-data-categorical-stroke-11: var(--colors-ui-category6-120-dark);
  --colors-data-categorical-stroke-12: var(--colors-ui-category6-60-dark);
  --colors-data-categorical-stroke-13: var(--colors-ui-category7-120-dark);
  --colors-data-categorical-stroke-14: var(--colors-ui-category7-60-dark);
  --colors-data-categorical-stroke-15: var(--colors-ui-category8-120-dark);
  --colors-data-categorical-stroke-16: var(--colors-ui-category8-60-dark);
  --colors-data-diverging-bg-0: var(--colors-data-diverging-0-dark);
  --colors-data-diverging-bg-10: var(--colors-data-diverging-10-dark);
  --colors-data-diverging-bg-20: var(--colors-data-diverging-20-dark);
  --colors-data-diverging-bg-30: var(--colors-data-diverging-30-dark);
  --colors-data-diverging-bg-40: var(--colors-data-diverging-40-dark);
  --colors-data-diverging-bg-50: var(--colors-data-diverging-50-dark);
  --colors-data-diverging-bg-60: var(--colors-data-diverging-60-dark);
  --colors-data-diverging-bg-70: var(--colors-data-diverging-70-dark);
  --colors-data-diverging-bg-80: var(--colors-data-diverging-80-dark);
  --colors-data-diverging-bg-90: var(--colors-data-diverging-90-dark);
  --colors-data-diverging-bg-100: var(--colors-data-diverging-100-dark);
  --colors-data-diverging-bg-110: var(--colors-data-diverging-110-dark);
  --colors-data-diverging-bg-120: var(--colors-data-diverging-120-dark);
  --colors-data-diverging-bg-130: var(--colors-data-diverging-130-dark);
  --colors-data-diverging-bg-140: var(--colors-data-diverging-140-dark);
  --colors-data-diverging-bg-150: var(--colors-data-diverging-150-dark);
  --colors-data-diverging-fg-0: var(--colors-data-diverging-foreground-0-dark);
  --colors-data-diverging-fg-10: var(--colors-data-diverging-foreground-10-dark);
  --colors-data-diverging-fg-20: var(--colors-data-diverging-foreground-20-dark);
  --colors-data-diverging-fg-30: var(--colors-data-diverging-foreground-30-dark);
  --colors-data-diverging-fg-40: var(--colors-data-diverging-foreground-40-dark);
  --colors-data-diverging-fg-50: var(--colors-data-diverging-foreground-50-dark);
  --colors-data-diverging-fg-60: var(--colors-data-diverging-foreground-60-dark);
  --colors-data-diverging-fg-70: var(--colors-data-diverging-foreground-70-dark);
  --colors-data-diverging-fg-80: var(--colors-data-diverging-foreground-80-dark);
  --colors-data-diverging-fg-90: var(--colors-data-diverging-foreground-90-dark);
  --colors-data-diverging-fg-100: var(--colors-data-diverging-foreground-100-dark);
  --colors-data-diverging-fg-110: var(--colors-data-diverging-foreground-110-dark);
  --colors-data-diverging-fg-120: var(--colors-data-diverging-foreground-120-dark);
  --colors-data-diverging-fg-130: var(--colors-data-diverging-foreground-130-dark);
  --colors-data-diverging-fg-140: var(--colors-data-diverging-foreground-140-dark);
  --colors-data-diverging-fg-150: var(--colors-data-diverging-foreground-150-dark);
  --colors-data-intensity-bg-0: var(--colors-data-intensity-0-dark);
  --colors-data-intensity-bg-10: var(--colors-data-intensity-10-dark);
  --colors-data-intensity-bg-20: var(--colors-data-intensity-20-dark);
  --colors-data-intensity-bg-30: var(--colors-data-intensity-30-dark);
  --colors-data-intensity-bg-40: var(--colors-data-intensity-40-dark);
  --colors-data-intensity-bg-50: var(--colors-data-intensity-50-dark);
  --colors-data-intensity-bg-60: var(--colors-data-intensity-60-dark);
  --colors-data-intensity-bg-70: var(--colors-data-intensity-70-dark);
  --colors-data-intensity-bg-80: var(--colors-data-intensity-80-dark);
  --colors-data-intensity-bg-90: var(--colors-data-intensity-90-dark);
  --colors-data-intensity-bg-100: var(--colors-data-intensity-100-dark);
  --colors-data-intensity-bg-110: var(--colors-data-intensity-110-dark);
  --colors-data-intensity-fg-0: var(--colors-data-intensity-foreground-0-dark);
  --colors-data-intensity-fg-10: var(--colors-data-intensity-foreground-10-dark);
  --colors-data-intensity-fg-20: var(--colors-data-intensity-foreground-20-dark);
  --colors-data-intensity-fg-30: var(--colors-data-intensity-foreground-30-dark);
  --colors-data-intensity-fg-40: var(--colors-data-intensity-foreground-40-dark);
  --colors-data-intensity-fg-50: var(--colors-data-intensity-foreground-50-dark);
  --colors-data-intensity-fg-60: var(--colors-data-intensity-foreground-60-dark);
  --colors-data-intensity-fg-70: var(--colors-data-intensity-foreground-70-dark);
  --colors-data-intensity-fg-80: var(--colors-data-intensity-foreground-80-dark);
  --colors-data-intensity-fg-90: var(--colors-data-intensity-foreground-90-dark);
  --colors-data-intensity-fg-100: var(--colors-data-intensity-foreground-100-dark);
  --colors-data-intensity-fg-110: var(--colors-data-intensity-foreground-110-dark);
}

/* Override custom Tag text color  */
body[data-theme][data-mode='dark'] div[class^='Tag-module'] {
  --neutral-black: var(--colors-black-90);
}

/* use generated baseline theme via aliasing existing tokens */
body[data-theme] {
  /* —————————————— neutrals */
  /* Legacy tokens */
  --color-gray-1: white;
  /* observing strange render bug using var(--colors-static-bg-primary) */
  /* fallback css variables fail to be used either, neither light-dark */

  --colors-ui-neutral-10: rgb(252, 252, 252);
  --colors-ui-neutral-20: rgb(249, 249, 249);
  --colors-ui-neutral-30: rgb(245, 245, 245);
  --colors-ui-neutral-40: rgb(240, 240, 240);
  --colors-ui-neutral-50: rgb(232, 232, 232);
  --colors-ui-neutral-60: rgb(225, 225, 225);
  --colors-ui-neutral-70: rgb(218, 218, 218);
  --colors-ui-neutral-80: rgb(207, 207, 207);
  --colors-ui-neutral-90: rgb(188, 188, 188);
  --colors-ui-neutral-100: rgb(142, 142, 142);
  --colors-ui-neutral-110: rgb(131, 131, 131);
  --colors-ui-neutral-120: rgb(100, 100, 100);
  --colors-ui-neutral-130: rgb(66, 66, 66);
  --colors-ui-neutral-140: rgb(31, 31, 31);

  --color-gray-1pt5: var(--colors-ui-neutral-20);
  --color-gray-2: var(--colors-ui-neutral-30);
  --color-gray-3: var(--colors-ui-neutral-40);
  --color-gray-4: var(--colors-ui-neutral-50);
  --color-gray-5: var(--colors-ui-neutral-70);
  --color-gray-6: var(--colors-ui-neutral-80);
  --color-gray-7: var(--colors-ui-neutral-90);
  --color-gray-8: var(--colors-ui-neutral-100);
  --color-gray-9: var(--colors-ui-neutral-110);
  --color-gray-10: var(--colors-ui-neutral-120);
  --color-gray-11: var(--colors-ui-neutral-130);
  --color-gray-12: var(--colors-ui-neutral-140);
  --color-gray-13: var(--colors-static-fg-primary);

  /* TODO: address divergence in alpha tokens */
  /* 1. Current values */
  /* --ds-color-gray-1-alpha: rgba(254, 255, 255, 0.05);
  --ds-color-gray-1pt5-alpha: rgba(183, 183, 182, 0.07);
  --ds-color-gray-2-alpha: rgba(143, 143, 141, 0.09);
  --ds-color-gray-3-alpha: rgba(112, 112, 109, 0.12);
  --ds-color-gray-4-alpha: rgba(92, 92, 88, 0.14);
  --ds-color-gray-5-alpha: rgba(73, 73, 69, 0.18);
  --ds-color-gray-6-alpha: rgba(54, 55, 51, 0.25);
  --ds-color-gray-7-alpha: rgba(44, 44, 41, 0.31);
  --ds-color-gray-8-alpha: rgba(31, 32, 29, 0.43);
  --ds-color-gray-9-alpha: rgba(25, 25, 23, 0.55);
  --ds-color-gray-10-alpha: rgba(21, 21, 19, 0.64);
  --ds-color-gray-11-alpha: rgba(18, 18, 17, 0.73);
  --ds-color-gray-12-alpha: rgba(9, 9, 9, 0.95);
  --ds-color-gray-13-alpha: rgba(0, 0, 0, 0.95); */

  /* 2. new values, appear to be too dark */
  /* --colors-ui-neutral-10-a: rgba(5, 8, 74, 0.01);
  --colors-ui-neutral-20-a: rgba(5, 8, 74, 0.02);
  --colors-ui-neutral-30-a: rgba(4, 6, 57, 0.04);
  --colors-ui-neutral-40-a: rgba(2, 4, 41, 0.06);
  --colors-ui-neutral-50-a: rgba(2, 4, 35, 0.09);
  --colors-ui-neutral-60-a: rgba(5, 12, 40, 0.12);
  --colors-ui-neutral-70-a: rgba(2, 4, 37, 0.15);
  --colors-ui-neutral-80-a: rgba(4, 9, 36, 0.2);
  --colors-ui-neutral-90-a: rgba(4, 11, 38, 0.27);
  --colors-ui-neutral-100-a: rgba(3, 6, 19, 0.45);
  --colors-ui-neutral-110-a: rgba(4, 8, 17, 0.5);
  --colors-ui-neutral-120-a: rgba(5, 7, 11, 0.62);
  --colors-ui-neutral-130-a: rgba(5, 5, 6, 0.76);
  --colors-ui-neutral-140-a: rgba(4, 4, 4, 0.89); */

  /* 3. reassign the gray-alphas to use new neutral-alphas */
  /* --color-gray-1-alpha: var(--colors-ui-neutral-10-a);
  --color-gray-2-alpha: var(--colors-ui-neutral-20-a);
  --color-gray-3-alpha: var(--colors-ui-neutral-30-a);
  --color-gray-4-alpha: var(--colors-ui-neutral-40-a);
  --color-gray-5-alpha: var(--colors-ui-neutral-50-a);
  --color-gray-6-alpha: var(--colors-ui-neutral-60-a);
  --color-gray-7-alpha: var(--colors-ui-neutral-70-a);
  --color-gray-8-alpha: var(--colors-ui-neutral-80-a);
  --color-gray-9-alpha: var(--colors-ui-neutral-90-a);
  --color-gray-10-alpha: var(--colors-ui-neutral-100-a);
  --color-gray-11-alpha: var(--colors-ui-neutral-110-a);
  --color-gray-12-alpha: var(--colors-ui-neutral-120-a);
  --color-gray-13-alpha: var(--colors-ui-neutral-130-a); */

  --color-gray-1-alpha: color-mix(in srgb,
      var(--color-gray-1) 05%,
      transparent);
  --color-gray-2-alpha: color-mix(in srgb,
      var(--color-gray-2) 09%,
      transparent);
  --color-gray-3-alpha: color-mix(in srgb,
      var(--color-gray-3) 12%,
      transparent);
  --color-gray-4-alpha: color-mix(in srgb,
      var(--color-gray-4) 14%,
      transparent);
  --color-gray-5-alpha: color-mix(in srgb,
      var(--color-gray-5) 18%,
      transparent);
  --color-gray-6-alpha: color-mix(in srgb,
      var(--color-gray-6) 25%,
      transparent);
  --color-gray-7-alpha: color-mix(in srgb,
      var(--color-gray-7) 31%,
      transparent);
  --color-gray-8-alpha: color-mix(in srgb,
      var(--color-gray-8) 43%,
      transparent);
  --color-gray-9-alpha: color-mix(in srgb,
      var(--color-gray-9) 55%,
      transparent);
  --color-gray-10-alpha: color-mix(in srgb,
      var(--color-gray-10) 64%,
      transparent);
  --color-gray-11-alpha: color-mix(in srgb,
      var(--color-gray-11) 73%,
      transparent);
  --color-gray-12-alpha: color-mix(in srgb,
      var(--color-gray-12) 95%,
      transparent);
  --color-gray-13-alpha: color-mix(in srgb,
      var(--color-gray-13) 95%,
      transparent);

  --color-base: var(--color-gray-1);
  --color-base-alpha: var(--color-gray-1-alpha);
  --color-base-hover: var(--color-gray-2);
  --color-base-hover-alpha: var(--color-gray-2-alpha);
  --color-base-active: var(--color-gray-3);
  --color-base-active-alpha: var(--color-gray-3-alpha);
  --color-surface: var(--color-gray-2);
  --color-surface-alpha: var(--color-gray-2-alpha);
  --color-surface-hover: var(--color-gray-3);
  --color-surface-hover-alpha: var(--color-gray-3-alpha);
  --color-surface-active: var(--color-gray-4);
  --color-surface-active-alpha: var(--color-gray-4-alpha);
  --color-action: var(--color-gray-3);
  --color-action-alpha: var(--color-gray-3-alpha);
  --color-action-hover: var(--color-gray-4);
  --color-action-hover-alpha: var(--color-gray-4-alpha);
  --color-action-active: var(--color-gray-5);
  --color-action-active-alpha: var(--color-gray-5-alpha);
  --color-divider: var(--color-gray-5);
  --color-divider-alpha: var(--color-gray-5-alpha);
  --color-focus: var(--color-gray-6);
  --color-focus-alpha: var(--color-gray-6-alpha);
  --color-border: var(--color-gray-5);
  --color-border-alpha: var(--color-gray-5-alpha);
  --color-border-hover: var(--color-gray-6);
  --color-border-hover-alpha: var(--color-gray-6-alpha);
  --color-border-active: var(--color-gray-7);
  --color-border-active-alpha: var(--color-gray-7-alpha);
  --color-solid: var(--color-gray-9);
  --color-solid-alpha: var(--color-gray-9-alpha);
  --color-solid-hover: var(--color-gray-10);
  --color-solid-hover-alpha: var(--color-gray-10-alpha);
  --color-solid-active: var(--color-gray-11);
  --color-solid-active-alpha: var(--color-gray-11-alpha);
  --color-icon-disabled: var(--color-gray-9);
  --color-icon-disabled-alpha: var(--color-gray-9-alpha);
  --color-icon-placeholder: var(--color-gray-9);
  --color-icon-placeholder-alpha: var(--color-gray-9-alpha);
  --color-icon-tertiary: var(--color-gray-10);
  --color-icon-tertiary-alpha: var(--color-gray-10-alpha);
  --color-icon-secondary: var(--color-gray-11);
  --color-icon-secondary-alpha: var(--color-gray-11-alpha);
  --color-icon-primary: var(--color-gray-12);
  --color-icon-primary-alpha: var(--color-gray-12-alpha);
  --color-icon-on-solid: var(--color-gray-1);
  --color-icon-on-solid-alpha: var(--color-gray-1-alpha);
  --color-text-disabled: var(--color-gray-9);
  --color-text-disabled-alpha: var(--color-gray-9-alpha);
  --color-text-placeholder: var(--color-gray-9);
  --color-text-placeholder-alpha: var(--color-gray-9-alpha);
  --color-text-tertiary: var(--color-gray-10);
  --color-text-tertiary-alpha: var(--color-gray-10-alpha);
  --color-text-secondary: var(--color-gray-11);
  --color-text-secondary-alpha: var(--color-gray-11-alpha);
  --color-text-primary: var(--color-gray-12);
  --color-text-primary-alpha: var(--color-gray-12-alpha);
  --color-text-on-solid: var(--color-gray-1);
  --color-text-on-solid-alpha: var(--color-gray-1-alpha);

  /* Transitional tokens */
  --ds-color-gray-1: var(--color-gray-1);
  --ds-color-gray-1pt5: var(--color-gray-1pt5);
  --ds-color-gray-2: var(--color-gray-2);
  --ds-color-gray-3: var(--color-gray-3);
  --ds-color-gray-4: var(--color-gray-4);
  --ds-color-gray-5: var(--color-gray-5);
  --ds-color-gray-6: var(--color-gray-6);
  --ds-color-gray-7: var(--color-gray-7);
  --ds-color-gray-8: var(--color-gray-8);
  --ds-color-gray-9: var(--color-gray-9);
  --ds-color-gray-10: var(--color-gray-10);
  --ds-color-gray-11: var(--color-gray-11);
  --ds-color-gray-12: var(--color-gray-12);
  --ds-color-gray-13: var(--color-gray-13);

  /* Legacy tokens */
  /* grey-1 */
  --neutral-white: var(--color-gray-1);
  --icon-on-interactive: var(--neutral-white);
  --icon-on-success: var(--neutral-white);
  --icon-on-critical: var(--neutral-white);
  --icon-on-primary: var(--neutral-white);
  --icon-on-emphasis: var(--neutral-white);
  --background-subdued-hover: var(--neutral-white);
  --background-default: var(--neutral-white);
  --colors-static-bg-overlay: var(--neutral-white);
  --colors-static-bg-primary: var(--background-default);
  --form-control-unselected-background: var(--background-default);

  --text-on-interactive: var(--neutral-white);
  --text-on-action-success: var(--neutral-white);
  --text-on-action-critical: var(--neutral-white);
  --text-on-emphasis: var(--neutral-white);
  --text-on-primary: var(--neutral-white);
  --form-control-foreground: var(--neutral-white);

  /* grey-1-alpha */
  --opacity-white-65: var(--color-base-alpha);

  /* grey-2 */
  --color-base-hover: var(--color-gray-2);
  --color-surface: var(--color-gray-2);
  --neutral-10: var(--color-gray-2);
  --background-disabled: var(--neutral-10);
  --form-control-unselected-disabled-background: var(--background-disabled);
  --background-hover: var(--neutral-10);

  --neutral-cool-10: var(--color-gray-2);
  --border-subdued: var(--colors-static-stroke-secondary);
  --background-subdued: var(--neutral-cool-10);
  --action-secondary-disabled: var(--neutral-cool-10);
  --action-secondary-default: var(--neutral-cool-10);

  /* grey-2-alpha */
  --opacity-neutral-08: var(--color-gray-2-alpha);
  --border-disabled: var(--opacity-neutral-08);
  --form-control-border-disabled: var(--border-disabled);

  /* grey-5 */
  --neutral-20: var(--color-gray-5);
  --border-default: var(--neutral-20);

  --neutral-cool-20: var(--color-gray-5);
  --background-subdued-selected: var(--neutral-cool-20);
  --action-secondary-hover: var(--neutral-cool-20);

  --support-grey-10: var(--color-gray-5);

  /* grey-6 */
  --neutral-cool-23: var(--color-gray-6);
  --action-secondary-focus: var(--neutral-cool-23);

  /* grey-7 */
  --neutral-40: var(--color-gray-7);
  --border-emphasis: var(--neutral-40);
  --form-control-border-default: var(--border-emphasis);
  --icon-subdued: var(--neutral-40);

  --neutral-cool-25: var(--color-gray-7);
  --action-secondary-active: var(--neutral-cool-25);
  --form-control-selected-disabled-background: var(--neutral-cool-25);

  --support-grey-100: var(--color-gray-7);

  /* grey-7-alpha */
  /* remove alpha in dark mode, for contrast */
  --opacity-neutral-32: var(--color-gray-7);
  --icon-on-secondary-disabled: var(--opacity-neutral-32);
  --icon-disabled: var(--opacity-neutral-32);
  --text-on-secondary-disabled: var(--opacity-neutral-32);
  --text-disabled: var(--opacity-neutral-32);

  /* grey-8 */
  --support-grey-110: var(--color-gray-8);
  --text-hint-text: var(--color-gray-8);

  /* grey-9 */
  --support-grey-115: var(--color-gray-9);

  /* grey-11 */
  --neutral-60: var(--color-gray-11);
  --border-hover: var(--neutral-60);
  --form-control-border-hover: var(--border-hover);
  --text-subdued: var(--neutral-60);

  --neutral-80: var(--color-gray-11);
  --icon-hover: var(--neutral-80);
  --icon-default: var(--neutral-80);
  --text-hover: var(--neutral-80);

  --neutral-cool-60: var(--color-gray-11);

  /* grey-11-alpha */
  --opacity-neutral-65: var(--color-gray-11-alpha);
  --backdrop: var(--opacity-neutral-65);

  /* grey-12 */
  --neutral-black: var(--color-gray-12);
  --icon-on-background-success: var(--neutral-black);
  --icon-on-background-critical: var(--neutral-black);
  --icon-on-background-warning: var(--neutral-black);
  --icon-on-interactive-subdued: var(--neutral-black);
  --icon-on-secondary: var(--neutral-black);
  --background-emphasis: var(--neutral-black);
  --text-on-background-success: var(--neutral-black);
  --text-on-background-critical: var(--neutral-black);
  --text-on-background-warning: var(--neutral-black);
  --text-on-interactive-subdued: var(--neutral-black);
  --text-on-secondary: var(--neutral-black);
  --text-default: var(--neutral-black);

  --support-grey-200: var(--color-gray-12);

  /* —————————————— accent */
  --colors-ui-accent-10: #fdfdfe;
  --colors-ui-accent-20: #f6f9ff;
  --colors-ui-accent-30: #f0f6ff;
  --colors-ui-accent-40: #ebf3ff;
  --colors-ui-accent-50: #deeaff;
  --colors-ui-accent-60: #cde0ff;
  --colors-ui-accent-70: #b9d3ff;
  --colors-ui-accent-80: #9dc0ff;
  --colors-ui-accent-90: #75a7ff;
  --colors-ui-accent-100: #0069df;
  --colors-ui-accent-110: #0061cb;
  --colors-ui-accent-120: #0060cd;
  --colors-ui-accent-130: #00469d;
  --colors-ui-accent-140: #002c6d;

  --colors-ui-accent-10-a: rgba(0, 38, 80, 0.01);
  --colors-ui-accent-20-a: rgba(0, 98, 188, 0.03);
  --colors-ui-accent-30-a: rgba(0, 97, 186, 0.05);
  --colors-ui-accent-40-a: rgba(0, 97, 184, 0.07);
  --colors-ui-accent-50-a: rgba(0, 100, 190, 0.12);
  --colors-ui-accent-60-a: rgba(0, 100, 190, 0.18);
  --colors-ui-accent-70-a: rgba(0, 97, 187, 0.24);
  --colors-ui-accent-80-a: rgba(0, 89, 172, 0.33);
  --colors-ui-accent-90-a: rgba(0, 83, 161, 0.45);
  --colors-ui-accent-100-a: rgba(0, 78, 153, 0.76);
  --colors-ui-accent-110-a: rgba(0, 75, 146, 0.8);
  --colors-ui-accent-120-a: rgba(0, 68, 134, 0.77);
  --colors-ui-accent-130-a: rgba(0, 46, 93, 0.83);
  --colors-ui-accent-140-a: rgba(0, 24, 52, 0.88);

  /* —————————————— accent */
  /* legacy tokens */
  --color-blue-1: var(--colors-ui-accent-10);
  --color-blue-1pt5: var(--colors-ui-accent-20);
  --color-blue-2: var(--colors-ui-accent-30);
  --color-blue-3: var(--colors-ui-accent-40);
  --color-blue-4: var(--colors-ui-accent-50);
  --color-blue-5: var(--colors-ui-accent-60);
  --color-blue-6: var(--colors-ui-accent-70);
  --color-blue-7: var(--colors-ui-accent-80);
  --color-blue-8: var(--colors-ui-accent-90);
  --color-blue-9: var(--colors-ui-accent-100);
  --color-blue-10: var(--colors-ui-accent-110);
  --color-blue-11: var(--colors-ui-accent-130);
  --color-blue-12: var(--colors-ui-accent-140);
  --color-blue-13: var(--colors-static-fg-primary);

  --color-blue-1-alpha: var(--colors-ui-accent-10-a);
  --color-blue-1pt5-alpha: var(--colors-ui-accent-20-a);
  --color-blue-2-alpha: var(--colors-ui-accent-30-a);
  --color-blue-3-alpha: var(--colors-ui-accent-40-a);
  --color-blue-4-alpha: var(--colors-ui-accent-50-a);
  --color-blue-5-alpha: var(--colors-ui-accent-60-a);
  --color-blue-6-alpha: var(--colors-ui-accent-70-a);
  --color-blue-7-alpha: var(--colors-ui-accent-80-a);
  --color-blue-8-alpha: var(--colors-ui-accent-90-a);
  --color-blue-9-alpha: var(--colors-ui-accent-100-a);
  --color-blue-10-alpha: var(--colors-ui-accent-110-a);
  --color-blue-11-alpha: var(--colors-ui-accent-130-a);
  --color-blue-12-alpha: var(--colors-ui-accent-140-a);
  --color-blue-13-alpha: var(--colors-static-fg-primary);

  --color-base-accent: var(--colors-ui-accent-10);
  --color-base-accent-alpha: var(--colors-ui-accent-10-a);
  --color-surface-accent: var(--colors-ui-accent-30);
  --color-surface-accent-alpha: var(--colors-ui-accent-30-a);
  --color-surface-hover-accent: var(--colors-ui-accent-40);
  --color-surface-hover-accent-alpha: var(--colors-ui-accent-40-a);
  --color-surface-active-accent: var(--colors-ui-accent-50);
  --color-surface-active-accent-alpha: var(--colors-ui-accent-50-a);
  --color-action-accent: var(--colors-ui-accent-40);
  --color-action-accent-alpha: var(--colors-ui-accent-40-a);
  --color-action-hover-accent: var(--colors-ui-accent-50);
  --color-action-hover-accent-alpha: var(--colors-ui-accent-50-a);
  --color-action-active-accent: var(--colors-ui-accent-60);
  --color-action-active-accent-alpha: var(--colors-ui-accent-60-a);
  --color-divider-accent: var(--colors-ui-accent-60);
  --color-divider-accent-alpha: var(--colors-ui-accent-60-a);
  --color-focus-accent: var(--colors-ui-accent-70);
  --color-focus-accent-alpha: var(--colors-ui-accent-70-a);
  --color-border-accent: var(--colors-ui-accent-60);
  --color-border-accent-alpha: var(--colors-ui-accent-60-a);
  --color-border-hover-accent: var(--colors-ui-accent-70);
  --color-border-hover-accent-alpha: var(--colors-ui-accent-70-a);
  --color-border-active-accent: var(--colors-ui-accent-80);
  --color-border-active-accent-alpha: var(--colors-ui-accent-80-a);
  --color-solid-accent: var(--colors-ui-accent-100);
  --color-solid-accent-alpha: var(--colors-ui-accent-100-a);
  --color-solid-hover-accent: var(--colors-ui-accent-110);
  --color-solid-hover-accent-alpha: var(--colors-ui-accent-110-a);
  --color-solid-active-accent: var(--colors-ui-accent-120);
  --color-solid-active-accent-alpha: var(--colors-ui-accent-120-a);
  --color-text-disabled-accent: var(--colors-ui-accent-100);
  --color-text-disabled-accent-alpha: var(--colors-ui-accent-100-a);
  --color-text-placeholder-accent: var(--colors-ui-accent-100);
  --color-text-placeholder-accent-alpha: var(--colors-ui-accent-100-a);
  --color-text-tertiary-accent: var(--colors-ui-accent-100);
  --color-text-tertiary-accent-alpha: var(--colors-ui-accent-100-a);
  --color-text-secondary-accent: var(--colors-ui-accent-110);
  --color-text-secondary-accent-alpha: var(--colors-ui-accent-110-a);
  --color-text-primary-accent: var(--colors-ui-accent-120);
  --color-text-primary-accent-alpha: var(--colors-ui-accent-120-a);
  --color-text-on-solid-accent: var(--colors-ui-accent-10);
  --color-text-on-solid-accent-alpha: var(--colors-ui-accent-10-a);

  /* Transitional tokens */
  --ds-color-blue-1: var(--color-blue-1);
  --ds-color-blue-1pt5: var(--color-blue-1pt5);
  --ds-color-blue-2: var(--color-blue-2);
  --ds-color-blue-3: var(--color-blue-3);
  --ds-color-blue-4: var(--color-blue-4);
  --ds-color-blue-5: var(--color-blue-5);
  --ds-color-blue-6: var(--color-blue-6);
  --ds-color-blue-7: var(--color-blue-7);
  --ds-color-blue-8: var(--color-blue-8);
  --ds-color-blue-9: var(--color-blue-9);
  --ds-color-blue-10: var(--color-blue-10);
  --ds-color-blue-11: var(--color-blue-11);
  --ds-color-blue-12: var(--color-blue-12);
  --ds-color-blue-13: var(--color-blue-13);

  --ds-color-blue-1-alpha: var(--colors-ui-accent-10-a);
  --ds-color-blue-1pt5-alpha: var(--colors-ui-accent-20-a);
  --ds-color-blue-2-alpha: var(--colors-ui-accent-30-a);
  --ds-color-blue-3-alpha: var(--colors-ui-accent-40-a);
  --ds-color-blue-4-alpha: var(--colors-ui-accent-50-a);
  --ds-color-blue-5-alpha: var(--colors-ui-accent-60-a);
  --ds-color-blue-6-alpha: var(--colors-ui-accent-70-a);
  --ds-color-blue-7-alpha: var(--colors-ui-accent-80-a);
  --ds-color-blue-8-alpha: var(--colors-ui-accent-90-a);
  --ds-color-blue-9-alpha: var(--colors-ui-accent-100-a);
  --ds-color-blue-10-alpha: var(--colors-ui-accent-110-a);
  --ds-color-blue-11-alpha: var(--colors-ui-accent-130-a);
  --ds-color-blue-12-alpha: var(--colors-ui-accent-140-a);
  --ds-color-blue-13-alpha: var(--colors-static-fg-primary);

  /* to-deprecate accent aliases */
  /* --color-surface-accent */
  --accent-10: var(--color-surface-accent);
  --shadow-focus: 0px 0px 0px 2px var(--accent-10);
  --focus-default: var(--accent-10);
  --interactive-brand-subdued: var(--accent-10);

  --semantic-highlight-10: var(--color-surface-accent);

  /* --color-surface-active-accent-alpha */
  --opacity-accent-38: var(--color-surface-active-accent-alpha);
  --interactive-brand-disabled: var(--opacity-accent-38);
  --action-primary-disabled: var(--opacity-accent-38);
  --disabled-label-color: var(--action-primary-disabled);

  /* --color-solid-accent */
  --accent-100: var(--color-solid-accent);
  --interactive-brand-default: var(--accent-100);
  --form-control-selected-background: var(--interactive-brand-default);

  --semantic-highlight-100: var(--color-solid-accent);
  --border-highlight: var(--semantic-highlight-100);
  --icon-highlight: var(--semantic-highlight-100);

  --action-primary-default: var(--color-solid-accent);
  --default-label-color: var(--action-primary-default);

  /* --color-solid-active-accent */
  --accent-110: var(--color-solid-active-accent);
  --action-primary-focus: var(--accent-110);

  --accent-115: var(--color-solid-active-accent);
  --action-primary-active: var(--accent-115);
  --active-label-color: var(--action-primary-active);

  --semantic-highlight-110: var(--color-solid-active-accent);
  --semantic-highlight-115: var(--color-solid-active-accent);

  /* --color-solid-hover-accent */
  --accent-105: var(--color-solid-hover-accent);
  --interactive-brand-hover: var(--accent-105);
  --action-primary-hover: var(--accent-105);
  --hover-label-color: var(--action-primary-hover);

  --semantic-highlight-105: var(--color-solid-hover-accent);

  /* —————————————— positive */
  --colors-ui-positive-10: rgb(251, 254, 253);
  --colors-ui-positive-20: rgb(241, 252, 247);
  --colors-ui-positive-30: rgb(232, 251, 242);
  --colors-ui-positive-40: rgb(222, 250, 236);
  --colors-ui-positive-50: rgb(203, 245, 227);
  --colors-ui-positive-60: rgb(180, 237, 215);
  --colors-ui-positive-70: rgb(152, 227, 201);
  --colors-ui-positive-80: rgb(111, 212, 185);
  --colors-ui-positive-90: rgb(0, 192, 164);
  --colors-ui-positive-100: rgb(0, 164, 136);
  --colors-ui-positive-110: rgb(0, 154, 128);
  --colors-ui-positive-120: rgb(0, 132, 108);
  --colors-ui-positive-130: rgb(0, 97, 79);
  --colors-ui-positive-140: rgb(0, 62, 50);

  /* TODO: evaluate alphas */
  /* --colors-ui-positive-10-a: rgba(0, 191, 138, 0.02);
  --colors-ui-positive-20-a: rgba(0, 162, 87, 0.04);
  --colors-ui-positive-30-a: rgba(0, 168, 89, 0.07);
  --colors-ui-positive-40-a: rgba(0, 173, 91, 0.1);
  --colors-ui-positive-50-a: rgba(0, 167, 96, 0.16);
  --colors-ui-positive-60-a: rgba(0, 161, 98, 0.24);
  --colors-ui-positive-70-a: rgba(0, 153, 98, 0.33);
  --colors-ui-positive-80-a: rgba(0, 147, 103, 0.45);
  --colors-ui-positive-90-a: rgba(0, 150, 117, 0.66);
  --colors-ui-positive-100-a: rgba(0, 144, 113, 0.84);
  --colors-ui-positive-110-a: rgba(0, 134, 106, 0.85);
  --colors-ui-positive-120-a: rgba(0, 112, 87, 0.87);
  --colors-ui-positive-130-a: rgba(0, 73, 56, 0.88);
  --colors-ui-positive-140-a: rgba(0, 34, 25, 0.89); */

  /* legacy tokens */
  --color-green-1: var(--colors-ui-positive-10);
  --color-green-1pt5: var(--colors-ui-positive-20);
  --color-green-2: var(--colors-ui-positive-30);
  --color-green-3: var(--colors-ui-positive-40);
  --color-green-4: var(--colors-ui-positive-50);
  --color-green-5: var(--colors-ui-positive-60);
  --color-green-6: var(--colors-ui-positive-70);
  --color-green-7: var(--colors-ui-positive-80);
  --color-green-8: var(--colors-ui-positive-90);
  --color-green-9: var(--colors-ui-positive-100);
  --color-green-10: var(--colors-ui-positive-110);
  --color-green-11: var(--colors-ui-positive-130);
  --color-green-12: var(--colors-ui-positive-140);
  --color-green-13: var(--colors-static-fg-primary);

  --color-green-1-alpha: color-mix(in srgb,
      var(--color-green-1) 05%,
      transparent);
  --color-green-2-alpha: color-mix(in srgb,
      var(--color-green-2) 09%,
      transparent);
  --color-green-3-alpha: color-mix(in srgb,
      var(--color-green-3) 12%,
      transparent);
  --color-green-4-alpha: color-mix(in srgb,
      var(--color-green-4) 14%,
      transparent);
  --color-green-5-alpha: color-mix(in srgb,
      var(--color-green-5) 18%,
      transparent);
  --color-green-6-alpha: color-mix(in srgb,
      var(--color-green-6) 25%,
      transparent);
  --color-green-7-alpha: color-mix(in srgb,
      var(--color-green-7) 31%,
      transparent);
  --color-green-8-alpha: color-mix(in srgb,
      var(--color-green-8) 43%,
      transparent);
  --color-green-9-alpha: color-mix(in srgb,
      var(--color-green-9) 55%,
      transparent);
  --color-green-10-alpha: color-mix(in srgb,
      var(--color-green-10) 64%,
      transparent);
  --color-green-11-alpha: color-mix(in srgb,
      var(--color-green-11) 73%,
      transparent);
  --color-green-12-alpha: color-mix(in srgb,
      var(--color-green-12) 95%,
      transparent);
  --color-green-13-alpha: color-mix(in srgb,
      var(--color-green-13) 95%,
      transparent);

  --color-base-positive: var(--color-green-1);
  --color-base-positive-alpha: var(--color-green-1-alpha);
  --color-surface-positive: var(--color-green-2);
  --color-surface-positive-alpha: var(--color-green-2-alpha);
  --color-surface-hover-positive: var(--color-green-3);
  --color-surface-hover-positive-alpha: var(--color-green-3-alpha);
  --color-surface-active-positive: var(--color-green-4);
  --color-surface-active-positive-alpha: var(--color-green-4-alpha);
  --color-action-positive: var(--color-green-3);
  --color-action-positive-alpha: var(--color-green-3-alpha);
  --color-action-hover-positive: var(--color-green-4);
  --color-action-hover-positive-alpha: var(--color-green-4-alpha);
  --color-action-active-positive: var(--color-green-5);
  --color-action-active-positive-alpha: var(--color-green-5-alpha);
  --color-divider-positive: var(--color-green-5);
  --color-divider-positive-alpha: var(--color-green-5-alpha);
  --color-focus-positive: var(--color-green-6);
  --color-focus-positive-alpha: var(--color-green-6-alpha);
  --color-border-positive: var(--color-green-5);
  --color-border-positive-alpha: var(--color-green-5-alpha);
  --color-border-hover-positive: var(--color-green-6);
  --color-border-hover-positive-alpha: var(--color-green-6-alpha);
  --color-border-active-positive: var(--color-green-7);
  --color-border-active-positive-alpha: var(--color-green-7-alpha);
  --color-solid-positive: var(--color-green-9);
  --color-solid-positive-alpha: var(--color-green-9-alpha);
  --color-solid-hover-positive: var(--color-green-10);
  --color-solid-hover-positive-alpha: var(--color-green-10-alpha);
  --color-solid-active-positive: var(--color-green-11);
  --color-solid-active-positive-alpha: var(--color-green-11-alpha);
  --color-text-disabled-positive: var(--color-green-9);
  --color-text-disabled-positive-alpha: var(--color-green-9-alpha);
  --color-text-placeholder-positive: var(--color-green-9);
  --color-text-placeholder-positive-alpha: var(--color-green-9-alpha);
  --color-text-tertiary-positive: var(--color-green-9);
  --color-text-tertiary-positive-alpha: var(--color-green-9-alpha);
  --color-text-secondary-positive: var(--color-green-10);
  --color-text-secondary-positive-alpha: var(--color-green-10-alpha);
  --color-text-primary-positive: var(--color-green-11);
  --color-text-primary-positive-alpha: var(--color-green-11-alpha);
  --color-text-on-solid-positive: var(--color-green-1);
  --color-text-on-solid-positive-alpha: var(--color-green-1-alpha);

  /* Transitional tokens */
  --ds-color-green-1: var(--color-green-1);
  --ds-color-green-1pt5: var(--color-green-1pt5);
  --ds-color-green-2: var(--color-green-2);
  --ds-color-green-3: var(--color-green-3);
  --ds-color-green-4: var(--color-green-4);
  --ds-color-green-5: var(--color-green-5);
  --ds-color-green-6: var(--color-green-6);
  --ds-color-green-7: var(--color-green-7);
  --ds-color-green-8: var(--color-green-8);
  --ds-color-green-9: var(--color-green-9);
  --ds-color-green-10: var(--color-green-10);
  --ds-color-green-11: var(--color-green-11);
  --ds-color-green-12: var(--color-green-12);
  --ds-color-green-13: var(--color-green-13);

  /* —————————————— warning */
  --colors-ui-warning-10: rgb(254, 253, 251);
  --colors-ui-warning-20: rgb(253, 252, 231);
  --colors-ui-warning-30: rgb(253, 250, 208);
  --colors-ui-warning-40: rgb(253, 249, 186);
  --colors-ui-warning-50: rgb(252, 240, 143);
  --colors-ui-warning-60: rgb(248, 232, 99);
  --colors-ui-warning-70: rgb(242, 216, 90);
  --colors-ui-warning-80: rgb(235, 194, 62);
  --colors-ui-warning-90: rgb(227, 164, 0);
  --colors-ui-warning-100: rgb(254, 199, 0);
  --colors-ui-warning-110: rgb(250, 189, 0);
  --colors-ui-warning-120: rgb(167, 103, 0);
  --colors-ui-warning-130: rgb(125, 77, 0);
  --colors-ui-warning-140: rgb(90, 46, 0);

  /* TODO: evaluate alphas */
  /* --colors-ui-warning-10-a: rgba(162, 173, 22, 0.02);
  --colors-ui-warning-20-a: rgba(236, 225, 0, 0.09);
  --colors-ui-warning-30-a: rgba(241, 233, 0, 0.18);
  --colors-ui-warning-40-a: rgba(246, 242, 0, 0.28);
  --colors-ui-warning-50-a: rgba(247, 231, 0, 0.42);
  --colors-ui-warning-60-a: rgba(248, 217, 0, 0.56);
  --colors-ui-warning-70-a: rgba(229, 191, 0, 0.59);
  --colors-ui-warning-80-a: rgba(204, 164, 0, 0.6);
  --colors-ui-warning-90-a: rgba(196, 154, 0, 0.78);
  --colors-ui-warning-100-a: rgba(247, 229, 0, 0.84);
  --colors-ui-warning-110-a: rgb(247, 224, 0);
  --colors-ui-warning-120-a: rgb(154, 110, 0);
  --colors-ui-warning-130-a: rgba(99, 72, 0, 0.94);
  --colors-ui-warning-140-a: rgba(45, 33, 0, 0.88); */

  /* legacy tokens */
  --color-amber-1: var(--colors-ui-warning-10);
  --color-amber-1pt5: var(--colors-ui-warning-20);
  --color-amber-2: var(--colors-ui-warning-30);
  --color-amber-3: var(--colors-ui-warning-40);
  --color-amber-4: var(--colors-ui-warning-50);
  --color-amber-5: var(--colors-ui-warning-60);
  --color-amber-6: var(--colors-ui-warning-70);
  --color-amber-7: var(--colors-ui-warning-80);
  --color-amber-8: var(--colors-ui-warning-90);
  --color-amber-9: var(--colors-ui-warning-100);
  --color-amber-10: var(--colors-ui-warning-110);
  --color-amber-11: var(--colors-ui-warning-130);
  --color-amber-12: var(--colors-ui-warning-140);
  --color-amber-13: var(--colors-static-fg-primary);

  --color-amber-1-alpha: color-mix(in srgb,
      var(--color-amber-1) 05%,
      transparent);
  --color-amber-2-alpha: color-mix(in srgb,
      var(--color-amber-2) 09%,
      transparent);
  --color-amber-3-alpha: color-mix(in srgb,
      var(--color-amber-3) 12%,
      transparent);
  --color-amber-4-alpha: color-mix(in srgb,
      var(--color-amber-4) 14%,
      transparent);
  --color-amber-5-alpha: color-mix(in srgb,
      var(--color-amber-5) 18%,
      transparent);
  --color-amber-6-alpha: color-mix(in srgb,
      var(--color-amber-6) 25%,
      transparent);
  --color-amber-7-alpha: color-mix(in srgb,
      var(--color-amber-7) 31%,
      transparent);
  --color-amber-8-alpha: color-mix(in srgb,
      var(--color-amber-8) 43%,
      transparent);
  --color-amber-9-alpha: color-mix(in srgb,
      var(--color-amber-9) 55%,
      transparent);
  --color-amber-10-alpha: color-mix(in srgb,
      var(--color-amber-10) 64%,
      transparent);
  --color-amber-11-alpha: color-mix(in srgb,
      var(--color-amber-11) 73%,
      transparent);
  --color-amber-12-alpha: color-mix(in srgb,
      var(--color-amber-12) 95%,
      transparent);
  --color-amber-13-alpha: color-mix(in srgb,
      var(--color-amber-13) 95%,
      transparent);

  --color-base-warning: var(--color-amber-1);
  --color-base-warning-alpha: var(--color-amber-1-alpha);
  --color-surface-warning: var(--color-amber-2);
  --color-surface-warning-alpha: var(--color-amber-2-alpha);
  --color-surface-hover-warning: var(--color-amber-3);
  --color-surface-hover-warning-alpha: var(--color-amber-3-alpha);
  --color-surface-active-warning: var(--color-amber-4);
  --color-surface-active-warning-alpha: var(--color-amber-4-alpha);
  --color-action-warning: var(--color-amber-3);
  --color-action-warning-alpha: var(--color-amber-3-alpha);
  --color-action-hover-warning: var(--color-amber-4);
  --color-action-hover-warning-alpha: var(--color-amber-4-alpha);
  --color-action-active-warning: var(--color-amber-5);
  --color-action-active-warning-alpha: var(--color-amber-5-alpha);
  --color-divider-warning: var(--color-amber-5);
  --color-divider-warning-alpha: var(--color-amber-5-alpha);
  --color-focus-warning: var(--color-amber-6);
  --color-focus-warning-alpha: var(--color-amber-6-alpha);
  --color-border-warning: var(--color-amber-5);
  --color-border-warning-alpha: var(--color-amber-5-alpha);
  --color-border-hover-warning: var(--color-amber-6);
  --color-border-hover-warning-alpha: var(--color-amber-6-alpha);
  --color-border-active-warning: var(--color-amber-7);
  --color-border-active-warning-alpha: var(--color-amber-7-alpha);
  --color-solid-warning: var(--color-amber-7);
  --color-solid-warning-alpha: var(--color-amber-7-alpha);
  --color-solid-hover-warning: var(--color-amber-8);
  --color-solid-hover-warning-alpha: var(--color-amber-8-alpha);
  --color-solid-active-warning: var(--color-amber-9);
  --color-solid-active-warning-alpha: var(--color-amber-9-alpha);
  --color-text-disabled-warning: var(--color-amber-9);
  --color-text-disabled-warning-alpha: var(--color-amber-9-alpha);
  --color-text-placeholder-warning: var(--color-amber-9);
  --color-text-placeholder-warning-alpha: var(--color-amber-9-alpha);
  --color-text-tertiary-warning: var(--color-amber-9);
  --color-text-tertiary-warning-alpha: var(--color-amber-9-alpha);
  --color-text-secondary-warning: var(--color-amber-10);
  --color-text-secondary-warning-alpha: var(--color-amber-10-alpha);
  --color-text-primary-warning: var(--color-amber-11);
  --color-text-primary-warning-alpha: var(--color-amber-11-alpha);
  --color-text-on-solid-warning: var(--color-amber-13);
  --color-text-on-solid-warning-alpha: var(--color-amber-13-alpha);

  /* Transitional tokens */
  --ds-color-amber-1: var(--color-amber-1);
  --ds-color-amber-1pt5: var(--color-amber-1pt5);
  --ds-color-amber-2: var(--color-amber-2);
  --ds-color-amber-3: var(--color-amber-3);
  --ds-color-amber-4: var(--color-amber-4);
  --ds-color-amber-5: var(--color-amber-5);
  --ds-color-amber-6: var(--color-amber-6);
  --ds-color-amber-7: var(--color-amber-7);
  --ds-color-amber-8: var(--color-amber-8);
  --ds-color-amber-9: var(--color-amber-9);
  --ds-color-amber-10: var(--color-amber-10);
  --ds-color-amber-11: var(--color-amber-11);
  --ds-color-amber-12: var(--color-amber-12);
  --ds-color-amber-13: var(--color-amber-13);

  /* —————————————— negative */
  --colors-ui-negative-10: rgb(255, 252, 253);
  --colors-ui-negative-20: rgb(255, 247, 248);
  --colors-ui-negative-30: rgb(255, 240, 242);
  --colors-ui-negative-40: rgb(255, 234, 236);
  --colors-ui-negative-50: rgb(255, 220, 223);
  --colors-ui-negative-60: rgb(255, 206, 211);
  --colors-ui-negative-70: rgb(255, 188, 195);
  --colors-ui-negative-80: rgb(254, 164, 176);
  --colors-ui-negative-90: rgb(245, 136, 153);
  --colors-ui-negative-100: rgb(244, 44, 83);
  --colors-ui-negative-110: rgb(236, 18, 72);
  --colors-ui-negative-120: rgb(211, 0, 60);
  --colors-ui-negative-130: rgb(160, 0, 47);
  --colors-ui-negative-140: rgb(109, 0, 33);

  /* TODO: evaluate alphas */
  /* --colors-ui-negative-10-a: rgba(255, 13, 71, 0.01);
  --colors-ui-negative-20-a: rgba(251, 34, 0, 0.03);
  --colors-ui-negative-30-a: rgba(246, 27, 0, 0.06);
  --colors-ui-negative-40-a: rgba(242, 17, 0, 0.08);
  --colors-ui-negative-50-a: rgba(253, 25, 0, 0.14);
  --colors-ui-negative-60-a: rgba(255, 11, 2, 0.19);
  --colors-ui-negative-70-a: rgba(228, 7, 0, 0.25);
  --colors-ui-negative-80-a: rgba(207, 0, 10, 0.33);
  --colors-ui-negative-90-a: rgba(196, 0, 20, 0.43);
  --colors-ui-negative-100-a: rgba(220, 0, 20, 0.73);
  --colors-ui-negative-110-a: rgba(211, 0, 23, 0.77);
  --colors-ui-negative-120-a: rgba(194, 0, 33, 0.86);
  --colors-ui-negative-130-a: rgba(140, 0, 25, 0.88);
  --colors-ui-negative-140-a: rgba(85, 0, 16, 0.91); */

  /* legacy tokens */
  --color-red-1: var(--colors-ui-negative-10);
  --color-red-1pt5: var(--colors-ui-negative-20);
  --color-red-2: var(--colors-ui-negative-30);
  --color-red-3: var(--colors-ui-negative-40);
  --color-red-4: var(--colors-ui-negative-50);
  --color-red-5: var(--colors-ui-negative-60);
  --color-red-6: var(--colors-ui-negative-70);
  --color-red-7: var(--colors-ui-negative-80);
  --color-red-8: var(--colors-ui-negative-90);
  --color-red-9: var(--colors-ui-negative-100);
  --color-red-10: var(--colors-ui-negative-110);
  --color-red-11: var(--colors-ui-negative-130);
  --color-red-12: var(--colors-ui-negative-140);
  --color-red-13: var(--colors-static-fg-primary);

  --color-red-1-alpha: color-mix(in srgb, var(--color-red-1) 05%, transparent);
  --color-red-2-alpha: color-mix(in srgb, var(--color-red-2) 09%, transparent);
  --color-red-3-alpha: color-mix(in srgb, var(--color-red-3) 12%, transparent);
  --color-red-4-alpha: color-mix(in srgb, var(--color-red-4) 14%, transparent);
  --color-red-5-alpha: color-mix(in srgb, var(--color-red-5) 18%, transparent);
  --color-red-6-alpha: color-mix(in srgb, var(--color-red-6) 25%, transparent);
  --color-red-7-alpha: color-mix(in srgb, var(--color-red-7) 31%, transparent);
  --color-red-8-alpha: color-mix(in srgb, var(--color-red-8) 43%, transparent);
  --color-red-9-alpha: color-mix(in srgb, var(--color-red-9) 55%, transparent);
  --color-red-10-alpha: color-mix(in srgb,
      var(--color-red-10) 64%,
      transparent);
  --color-red-11-alpha: color-mix(in srgb,
      var(--color-red-11) 73%,
      transparent);
  --color-red-12-alpha: color-mix(in srgb,
      var(--color-red-12) 95%,
      transparent);
  --color-red-13-alpha: color-mix(in srgb,
      var(--color-red-13) 95%,
      transparent);

  --color-base-negative: var(--color-red-1);
  --color-base-negative-alpha: var(--color-red-1-alpha);
  --color-surface-negative: var(--color-red-2);
  --color-surface-negative-alpha: var(--color-red-2-alpha);
  --color-surface-hover-negative: var(--color-red-3);
  --color-surface-hover-negative-alpha: var(--color-red-3-alpha);
  --color-surface-active-negative: var(--color-red-4);
  --color-surface-active-negative-alpha: var(--color-red-4-alpha);
  --color-action-negative: var(--color-red-3);
  --color-action-negative-alpha: var(--color-red-3-alpha);
  --color-action-hover-negative: var(--color-red-4);
  --color-action-hover-negative-alpha: var(--color-red-4-alpha);
  --color-action-active-negative: var(--color-red-5);
  --color-action-active-negative-alpha: var(--color-red-5-alpha);
  --color-divider-negative: var(--color-red-5);
  --color-divider-negative-alpha: var(--color-red-5-alpha);
  --color-focus-negative: var(--color-red-6);
  --color-focus-negative-alpha: var(--color-red-6-alpha);
  --color-border-negative: var(--color-red-5);
  --color-border-negative-alpha: var(--color-red-5-alpha);
  --color-border-hover-negative: var(--color-red-6);
  --color-border-hover-negative-alpha: var(--color-red-6-alpha);
  --color-border-active-negative: var(--color-red-7);
  --color-border-active-negative-alpha: var(--color-red-7-alpha);
  --color-solid-negative: var(--color-red-9);
  --color-solid-negative-alpha: var(--color-red-9-alpha);
  --color-solid-hover-negative: var(--color-red-10);
  --color-solid-hover-negative-alpha: var(--color-red-10-alpha);
  --color-solid-active-negative: var(--color-red-11);
  --color-solid-active-negative-alpha: var(--color-red-11-alpha);
  --color-text-disabled-negative: var(--color-red-9);
  --color-text-disabled-negative-alpha: var(--color-red-9-alpha);
  --color-text-placeholder-negative: var(--color-red-9);
  --color-text-placeholder-negative-alpha: var(--color-red-9-alpha);
  --color-text-tertiary-negative: var(--color-red-9);
  --color-text-tertiary-negative-alpha: var(--color-red-9-alpha);
  --color-text-secondary-negative: var(--color-red-10);
  --color-text-secondary-negative-alpha: var(--color-red-10-alpha);
  --color-text-primary-negative: var(--color-red-11);
  --color-text-primary-negative-alpha: var(--color-red-11-alpha);
  --color-text-on-solid-negative: var(--color-red-1);
  --color-text-on-solid-negative-alpha: var(--color-red-1-alpha);

  /* Transitional tokens */
  --ds-color-red-1: var(--color-red-1);
  --ds-color-red-1pt5: var(--color-red-1pt5);
  --ds-color-red-2: var(--color-red-2);
  --ds-color-red-3: var(--color-red-3);
  --ds-color-red-4: var(--color-red-4);
  --ds-color-red-5: var(--color-red-5);
  --ds-color-red-6: var(--color-red-6);
  --ds-color-red-7: var(--color-red-7);
  --ds-color-red-8: var(--color-red-8);
  --ds-color-red-9: var(--color-red-9);
  --ds-color-red-10: var(--color-red-10);
  --ds-color-red-11: var(--color-red-11);
  --ds-color-red-12: var(--color-red-12);
  --ds-color-red-13: var(--color-red-13);

  --colors-static-bg-primary: var(--colors-white-100);
  --colors-static-bg-secondary: var(--colors-ui-neutral-20-a);
  --colors-static-bg-tertiary: var(--colors-ui-neutral-30-a);
  --colors-static-bg-overlay: var(--colors-white-100);
  --colors-static-bg-scrim: var(--colors-ui-neutral-80-a);
  --colors-static-bg-glass: var(--colors-white-30);
  --colors-static-bg-accent: var(--colors-ui-accent-20);
  --colors-static-bg-contrast: var(--colors-ui-neutral-20-dark);
  --colors-static-bg-transparent: var(--colors-white-0);
  --colors-static-bg-informative-primary: var(--colors-ui-informative-100);
  --colors-static-bg-informative-secondary: var(--colors-ui-informative-40);
  --colors-static-bg-positive-primary: var(--colors-ui-positive-100);
  --colors-static-bg-positive-secondary: var(--colors-ui-positive-40);
  --colors-static-bg-warning-primary: var(--colors-ui-warning-100);
  --colors-static-bg-warning-secondary: var(--colors-ui-warning-40);
  --colors-static-bg-negative-primary: var(--colors-ui-negative-100);
  --colors-static-bg-negative-secondary: var(--colors-ui-negative-40);
  --colors-static-fg-primary: var(--colors-ui-neutral-140-a);
  --colors-static-fg-secondary: var(--colors-ui-neutral-120-a);
  --colors-static-fg-tertiary: var(--colors-ui-neutral-100-a);
  --colors-static-fg-accent-primary: var(--colors-ui-accent-140-a);
  --colors-static-fg-accent-secondary: var(--colors-ui-accent-120-a);
  --colors-static-fg-accent-tertiary: var(--colors-ui-accent-100-a);
  --colors-static-fg-contrast-primary: var(--colors-ui-neutral-140-dark-a);
  --colors-static-fg-contrast-secondary: var(--colors-ui-neutral-120-dark-a);
  --colors-static-fg-contrast-tertiary: var(--colors-ui-neutral-100-dark-a);
  --colors-static-fg-informative-primary: var(--colors-ui-informative-140-a);
  --colors-static-fg-informative-secondary: var(--colors-ui-informative-120-a);
  --colors-static-fg-informative-tertiary: var(--colors-ui-informative-100-a);
  --colors-static-fg-positive-primary: var(--colors-ui-positive-140-a);
  --colors-static-fg-positive-secondary: var(--colors-ui-positive-120-a);
  --colors-static-fg-positive-tertiary: var(--colors-ui-positive-100-a);
  --colors-static-fg-warning-primary: var(--colors-ui-warning-140-a);
  --colors-static-fg-warning-secondary: var(--colors-ui-warning-120-a);
  --colors-static-fg-warning-tertiary: var(--colors-ui-warning-100-a);
  --colors-static-fg-negative-primary: var(--colors-ui-negative-140-a);
  --colors-static-fg-negative-secondary: var(--colors-ui-negative-120-a);
  --colors-static-fg-negative-tertiary: var(--colors-ui-negative-100-a);
  --colors-static-stroke-primary: var(--colors-ui-neutral-60);
  --colors-static-stroke-secondary: var(--colors-ui-neutral-50);
  --colors-static-stroke-tertiary: var(--colors-ui-neutral-40);
  --colors-static-stroke-accent: var(--colors-ui-accent-60);
  --colors-static-stroke-informative: var(--colors-ui-informative-60);
  --colors-static-stroke-positive: var(--colors-ui-positive-60);
  --colors-static-stroke-warning: var(--colors-ui-warning-60);
  --colors-static-stroke-negative: var(--colors-ui-negative-60);
  --colors-solid-bg-accent-default: var(--colors-ui-accent-100);
  --colors-solid-bg-accent-hover: var(--colors-ui-accent-110);
  --colors-solid-bg-accent-active: var(--colors-ui-accent-120);
  --colors-solid-bg-accent-disabled: var(--colors-ui-accent-50);
  --colors-solid-bg-accent-strong-default: var(--colors-ui-accent-100);
  --colors-solid-bg-accent-strong-hover: var(--colors-ui-accent-110);
  --colors-solid-bg-accent-strong-active: var(--colors-ui-accent-120);
  --colors-solid-bg-accent-strong-disabled: var(--colors-ui-accent-50);
  --colors-solid-bg-accent-weak-default: var(--colors-ui-accent-50);
  --colors-solid-bg-accent-weak-hover: var(--colors-ui-accent-60);
  --colors-solid-bg-accent-weak-active: var(--colors-ui-accent-70);
  --colors-solid-bg-accent-weak-disabled: var(--colors-ui-accent-20);
  --colors-solid-bg-neutral-strong-default: var(--colors-ui-neutral-40);
  --colors-solid-bg-neutral-strong-hover: var(--colors-ui-neutral-50);
  --colors-solid-bg-neutral-strong-active: var(--colors-ui-neutral-60);
  --colors-solid-bg-neutral-strong-disabled: var(--colors-ui-neutral-20);
  --colors-solid-bg-neutral-weak-default: var(--colors-white-100);
  --colors-solid-bg-neutral-weak-hover: var(--colors-ui-neutral-10);
  --colors-solid-bg-neutral-weak-active: var(--colors-ui-neutral-20);
  --colors-solid-bg-neutral-weak-disabled: var(--colors-ui-neutral-30);
  --colors-solid-bg-positive-default: var(--colors-ui-positive-100);
  --colors-solid-bg-positive-hover: var(--colors-ui-positive-110);
  --colors-solid-bg-positive-active: var(--colors-ui-positive-120);
  --colors-solid-bg-positive-disabled: var(--colors-ui-positive-50);
  --colors-solid-bg-negative-strong-default: var(--colors-ui-negative-100);
  --colors-solid-bg-negative-strong-hover: var(--colors-ui-negative-110);
  --colors-solid-bg-negative-strong-active: var(--colors-ui-negative-120);
  --colors-solid-bg-negative-strong-disabled: var(--colors-ui-negative-50);
  --colors-solid-bg-negative-weak-default: var(--colors-white-100);
  --colors-solid-bg-negative-weak-hover: var(--colors-ui-negative-20);
  --colors-solid-bg-negative-weak-active: var(--colors-ui-negative-30);
  --colors-solid-bg-negative-weak-disabled: var(--colors-ui-negative-40);
  --colors-solid-fg-accent-primary: var(--colors-ui-accent-foreground-primary);
  --colors-solid-fg-accent-secondary: var(--colors-ui-accent-foreground-secondary);
  --colors-solid-fg-accent-disabled: var(--colors-ui-accent-80-a);
  --colors-solid-fg-accent-strong-primary: var(--colors-ui-accent-foreground-primary);
  --colors-solid-fg-accent-strong-secondary: var(--colors-ui-accent-foreground-secondary);
  --colors-solid-fg-accent-strong-disabled: var(--colors-ui-accent-80-a);
  --colors-solid-fg-accent-weak-primary: var(--colors-ui-accent-140);
  --colors-solid-fg-accent-weak-secondary: var(--colors-ui-accent-120);
  --colors-solid-fg-accent-weak-disabled: var(--colors-ui-accent-80-a);
  --colors-solid-fg-neutral-strong-primary: var(--colors-ui-neutral-140);
  --colors-solid-fg-neutral-strong-secondary: var(--colors-ui-neutral-120);
  --colors-solid-fg-neutral-strong-disabled: var(--colors-ui-neutral-80);
  --colors-solid-fg-neutral-weak-primary: var(--colors-ui-neutral-140);
  --colors-solid-fg-neutral-weak-secondary: var(--colors-ui-neutral-120);
  --colors-solid-fg-neutral-weak-disabled: var(--colors-ui-neutral-80);
  --colors-solid-fg-positive-primary: var(--colors-ui-positive-foreground-primary);
  --colors-solid-fg-positive-secondary: var(--colors-ui-positive-foreground-secondary);
  --colors-solid-fg-positive-disabled: var(--colors-ui-positive-80);
  --colors-solid-fg-negative-strong-primary: var(--colors-ui-negative-foreground-primary);
  --colors-solid-fg-negative-strong-secondary: var(--colors-ui-negative-foreground-secondary);
  --colors-solid-fg-negative-strong-disabled: var(--colors-ui-negative-80);
  --colors-solid-fg-negative-weak-primary: var(--colors-ui-negative-120);
  --colors-solid-fg-negative-weak-secondary: var(--colors-ui-negative-110);
  --colors-solid-fg-negative-weak-disabled: var(--colors-ui-negative-80);
  --colors-solid-stroke-accent-default: var(--colors-ui-accent-100);
  --colors-solid-stroke-accent-hover: var(--colors-ui-accent-110);
  --colors-solid-stroke-accent-active: var(--colors-ui-accent-120);
  --colors-solid-stroke-accent-disabled: var(--colors-ui-accent-50);
  --colors-solid-stroke-accent-strong-default: var(--colors-ui-accent-100);
  --colors-solid-stroke-accent-strong-hover: var(--colors-ui-accent-110);
  --colors-solid-stroke-accent-strong-active: var(--colors-ui-accent-120);
  --colors-solid-stroke-accent-strong-disabled: var(--colors-ui-accent-50);
  --colors-solid-stroke-accent-weak-default: var(--colors-ui-accent-70);
  --colors-solid-stroke-accent-weak-hover: var(--colors-ui-accent-80);
  --colors-solid-stroke-accent-weak-active: var(--colors-ui-accent-100);
  --colors-solid-stroke-accent-weak-disabled: var(--colors-ui-accent-50);
  --colors-solid-stroke-neutral-strong-default: var(--colors-ui-neutral-100);
  --colors-solid-stroke-neutral-strong-hover: var(--colors-ui-neutral-110);
  --colors-solid-stroke-neutral-strong-active: var(--colors-ui-neutral-130);
  --colors-solid-stroke-neutral-strong-disabled: var(--colors-ui-neutral-50);
  --colors-solid-stroke-neutral-weak-default: var(--colors-ui-neutral-70);
  --colors-solid-stroke-neutral-weak-hover: var(--colors-ui-neutral-80);
  --colors-solid-stroke-neutral-weak-active: var(--colors-ui-neutral-100);
  --colors-solid-stroke-neutral-weak-disabled: var(--colors-ui-neutral-50);
  --colors-solid-stroke-positive-default: var(--colors-ui-positive-100);
  --colors-solid-stroke-positive-hover: var(--colors-ui-positive-110);
  --colors-solid-stroke-positive-active: var(--colors-ui-positive-120);
  --colors-solid-stroke-positive-disabled: var(--colors-ui-positive-50);
  --colors-solid-stroke-negative-strong-default: var(--colors-ui-negative-100);
  --colors-solid-stroke-negative-strong-hover: var(--colors-ui-negative-110);
  --colors-solid-stroke-negative-strong-active: var(--colors-ui-negative-120);
  --colors-solid-stroke-negative-strong-disabled: var(--colors-ui-negative-50);
  --colors-solid-stroke-negative-weak-default: var(--colors-ui-negative-80);
  --colors-solid-stroke-negative-weak-hover: var(--colors-ui-negative-90);
  --colors-solid-stroke-negative-weak-active: var(--colors-ui-negative-100);
  --colors-solid-stroke-negative-weak-disabled: var(--colors-ui-negative-50);
  --colors-ghost-bg-neutral-default: var(--colors-white-0);
  --colors-ghost-bg-neutral-hover: var(--colors-ui-neutral-30-a);
  --colors-ghost-bg-neutral-active: var(--colors-ui-neutral-40-a);
  --colors-ghost-bg-neutral-disabled: var(--colors-ui-neutral-20-a);
  --colors-ghost-bg-selected-default: var(--colors-ui-accent-40-a);
  --colors-ghost-bg-selected-hover: var(--colors-ui-accent-50-a);
  --colors-ghost-bg-selected-active: var(--colors-ui-accent-60-a);
  --colors-ghost-bg-selected-disabled: var(--colors-ui-accent-20-a);
  --colors-ghost-bg-negative-default: var(--colors-white-0);
  --colors-ghost-bg-negative-hover: var(--colors-ui-negative-30-a);
  --colors-ghost-bg-negative-active: var(--colors-ui-negative-50-a);
  --colors-ghost-bg-negative-disabled: var(--colors-ui-negative-20-a);
  --colors-ghost-fg-neutral-primary: var(--colors-ui-neutral-140-a);
  --colors-ghost-fg-neutral-secondary: var(--colors-ui-neutral-110-a);
  --colors-ghost-fg-neutral-disabled: var(--colors-ui-neutral-70-a);
  --colors-ghost-fg-selected-primary: var(--colors-ui-accent-140);
  --colors-ghost-fg-selected-secondary: var(--colors-ui-accent-110-a);
  --colors-ghost-fg-selected-disabled: var(--colors-ui-accent-70-a);
  --colors-ghost-fg-negative-primary: var(--colors-ui-negative-140);
  --colors-ghost-fg-negative-secondary: var(--colors-ui-negative-110-a);
  --colors-ghost-fg-negative-disabled: var(--colors-ui-negative-70-a);


  /* TODO: Remove these deprecated tokens */
  --colors-input-bg-default: var(--colors-white-100);
  --colors-input-bg-hover: var(--colors-white-100);
  --colors-input-bg-active: var(--colors-white-100);
  --colors-input-bg-disabled: var(--colors-ui-neutral-30);
  --colors-input-fg-primary-default: var(--colors-ui-neutral-130);
  --colors-input-fg-primary-hover: var(--colors-ui-neutral-140);
  --colors-input-fg-primary-active: var(--colors-ui-neutral-140);
  --colors-input-fg-primary-disabled: var(--colors-ui-neutral-70);
  --colors-input-fg-secondary-default: var(--colors-ui-neutral-120);
  --colors-input-fg-secondary-hover: var(--colors-ui-neutral-130);
  --colors-input-fg-secondary-active: var(--colors-ui-neutral-130);
  --colors-input-fg-secondary-disabled: var(--colors-ui-neutral-70);
  /* TODO: Remove these deprecated tokens */

  --colors-input-fg-placeholder-default: var(--colors-ui-neutral-110);
  --colors-input-fg-placeholder-hover: var(--colors-ui-neutral-120);
  --colors-input-fg-placeholder-active: var(--colors-ui-neutral-110);
  --colors-input-fg-placeholder-disabled: var(--colors-ui-neutral-70);
  --colors-input-fg-value-default: var(--colors-ui-neutral-130);
  --colors-input-fg-value-hover: var(--colors-ui-neutral-140);
  --colors-input-fg-value-active: var(--colors-ui-neutral-140);
  --colors-input-fg-value-disabled: var(--colors-ui-neutral-70);
  --colors-input-fg-accessory-default: var(--colors-ui-neutral-120);
  --colors-input-fg-accessory-hover: var(--colors-ui-neutral-130);
  --colors-input-fg-accessory-active: var(--colors-ui-neutral-130);
  --colors-input-fg-accessory-disabled: var(--colors-ui-neutral-70);


  /* TODO: Remove these deprecated tokens */
  --colors-input-stroke-default: var(--colors-ui-neutral-70);
  --colors-input-stroke-hover: var(--colors-ui-neutral-80);
  --colors-input-stroke-active: var(--colors-ui-neutral-140);
  --colors-input-stroke-disabled: var(--colors-ui-neutral-60);
  --colors-input-stroke-valid: var(--colors-ui-positive-100);
  --colors-input-stroke-error: var(--colors-ui-negative-100);
  /* TODO: Remove these deprecated tokens */


  --colors-input-stroke-neutral-default: var(--colors-ui-neutral-70);
  --colors-input-stroke-neutral-hover: var(--colors-ui-neutral-80);
  --colors-input-stroke-neutral-active: var(--colors-ui-neutral-140);
  --colors-input-stroke-neutral-disabled: var(--colors-ui-neutral-60);
  --colors-input-stroke-positive-default: var(--colors-ui-positive-100);
  --colors-input-stroke-positive-hover: var(--colors-ui-positive-110);
  --colors-input-stroke-positive-active: var(--colors-ui-neutral-140);
  --colors-input-stroke-negative-default: var(--colors-ui-negative-100);
  --colors-input-stroke-negative-hover: var(--colors-ui-negative-110);
  --colors-input-stroke-negative-active: var(--colors-ui-neutral-140);
  --colors-inline-accent-default: var(--colors-ui-accent-120);
  --colors-inline-accent-hover: var(--colors-ui-accent-110);
  --colors-inline-accent-active: var(--colors-ui-accent-130);
  --colors-inline-accent-disabled: var(--colors-ui-accent-70);
  --colors-inline-neutral-strong-default: var(--colors-ui-neutral-140);
  --colors-inline-neutral-strong-hover: var(--colors-ui-neutral-130);
  --colors-inline-neutral-strong-active: var(--colors-ui-neutral-110);
  --colors-inline-neutral-strong-disabled: var(--colors-ui-neutral-70);
  --colors-inline-neutral-weak-default: var(--colors-ui-neutral-70);
  --colors-inline-neutral-weak-hover: var(--colors-ui-neutral-80);
  --colors-inline-neutral-weak-active: var(--colors-ui-neutral-100);
  --colors-inline-neutral-weak-disabled: var(--colors-ui-neutral-50);
  --colors-inline-negative-default: var(--colors-ui-negative-120);
  --colors-inline-negative-hover: var(--colors-ui-negative-110);
  --colors-inline-negative-active: var(--colors-ui-negative-130);
  --colors-inline-negative-disabled: var(--colors-ui-negative-70);
  --colors-inline-positive-default: var(--colors-ui-positive-120);
  --colors-inline-positive-hover: var(--colors-ui-positive-110);
  --colors-inline-positive-active: var(--colors-ui-positive-130);
  --colors-inline-positive-disabled: var(--colors-ui-positive-70);
  --colors-utility-focus: var(--colors-black-100);
  --colors-utility-shadow-neutral: var(--colors-black-15);
  --colors-utility-shadow-accent: var(--colors-ui-accent-30-a);
  --colors-utility-shadow-positive: var(--colors-ui-positive-30-a);
  --colors-utility-shadow-negative: var(--colors-ui-negative-30-a);
  --colors-utility-shadow-glass-inner-sharp: var(--colors-white-100);
  --colors-utility-shadow-glass-inner-soft: var(--colors-white-30);
  --colors-utility-gradient-button-start: var(--colors-white-20);
  --colors-utility-gradient-button-end: var(--colors-white-0);
  --colors-swatch-bg-red-strong-default: var(--colors-ui-spot-red-100);
  --colors-swatch-bg-red-strong-hover: var(--colors-ui-spot-red-110);
  --colors-swatch-bg-red-strong-active: var(--colors-ui-spot-red-120);
  --colors-swatch-bg-red-strong-disabled: var(--colors-ui-spot-red-50);
  --colors-swatch-bg-red-weak-default: var(--colors-ui-spot-red-50);
  --colors-swatch-bg-red-weak-hover: var(--colors-ui-spot-red-60);
  --colors-swatch-bg-red-weak-active: var(--colors-ui-spot-red-70);
  --colors-swatch-bg-red-weak-disabled: var(--colors-ui-spot-red-20);
  --colors-swatch-bg-orange-strong-default: var(--colors-ui-spot-orange-100);
  --colors-swatch-bg-orange-strong-hover: var(--colors-ui-spot-orange-110);
  --colors-swatch-bg-orange-strong-active: var(--colors-ui-spot-orange-120);
  --colors-swatch-bg-orange-strong-disabled: var(--colors-ui-spot-orange-50);
  --colors-swatch-bg-orange-weak-default: var(--colors-ui-spot-orange-50);
  --colors-swatch-bg-orange-weak-hover: var(--colors-ui-spot-orange-60);
  --colors-swatch-bg-orange-weak-active: var(--colors-ui-spot-orange-70);
  --colors-swatch-bg-orange-weak-disabled: var(--colors-ui-spot-orange-20);
  --colors-swatch-bg-yellow-strong-default: var(--colors-ui-spot-yellow-100);
  --colors-swatch-bg-yellow-strong-hover: var(--colors-ui-spot-yellow-110);
  --colors-swatch-bg-yellow-strong-active: var(--colors-ui-spot-yellow-120);
  --colors-swatch-bg-yellow-strong-disabled: var(--colors-ui-spot-yellow-50);
  --colors-swatch-bg-yellow-weak-default: var(--colors-ui-spot-yellow-50);
  --colors-swatch-bg-yellow-weak-hover: var(--colors-ui-spot-yellow-60);
  --colors-swatch-bg-yellow-weak-active: var(--colors-ui-spot-yellow-70);
  --colors-swatch-bg-yellow-weak-disabled: var(--colors-ui-spot-yellow-20);
  --colors-swatch-bg-lime-strong-default: var(--colors-ui-spot-lime-100);
  --colors-swatch-bg-lime-strong-hover: var(--colors-ui-spot-lime-110);
  --colors-swatch-bg-lime-strong-active: var(--colors-ui-spot-lime-120);
  --colors-swatch-bg-lime-strong-disabled: var(--colors-ui-spot-lime-50);
  --colors-swatch-bg-lime-weak-default: var(--colors-ui-spot-lime-50);
  --colors-swatch-bg-lime-weak-hover: var(--colors-ui-spot-lime-60);
  --colors-swatch-bg-lime-weak-active: var(--colors-ui-spot-lime-70);
  --colors-swatch-bg-lime-weak-disabled: var(--colors-ui-spot-lime-20);
  --colors-swatch-bg-green-strong-default: var(--colors-ui-spot-green-100);
  --colors-swatch-bg-green-strong-hover: var(--colors-ui-spot-green-110);
  --colors-swatch-bg-green-strong-active: var(--colors-ui-spot-green-120);
  --colors-swatch-bg-green-strong-disabled: var(--colors-ui-spot-green-50);
  --colors-swatch-bg-green-weak-default: var(--colors-ui-spot-green-50);
  --colors-swatch-bg-green-weak-hover: var(--colors-ui-spot-green-60);
  --colors-swatch-bg-green-weak-active: var(--colors-ui-spot-green-70);
  --colors-swatch-bg-green-weak-disabled: var(--colors-ui-spot-green-20);
  --colors-swatch-bg-mint-strong-default: var(--colors-ui-spot-mint-100);
  --colors-swatch-bg-mint-strong-hover: var(--colors-ui-spot-mint-110);
  --colors-swatch-bg-mint-strong-active: var(--colors-ui-spot-mint-120);
  --colors-swatch-bg-mint-strong-disabled: var(--colors-ui-spot-mint-50);
  --colors-swatch-bg-mint-weak-default: var(--colors-ui-spot-mint-50);
  --colors-swatch-bg-mint-weak-hover: var(--colors-ui-spot-mint-60);
  --colors-swatch-bg-mint-weak-active: var(--colors-ui-spot-mint-70);
  --colors-swatch-bg-mint-weak-disabled: var(--colors-ui-spot-mint-20);
  --colors-swatch-bg-blue-strong-default: var(--colors-ui-spot-blue-100);
  --colors-swatch-bg-blue-strong-hover: var(--colors-ui-spot-blue-110);
  --colors-swatch-bg-blue-strong-active: var(--colors-ui-spot-blue-120);
  --colors-swatch-bg-blue-strong-disabled: var(--colors-ui-spot-blue-50);
  --colors-swatch-bg-blue-weak-default: var(--colors-ui-spot-blue-50);
  --colors-swatch-bg-blue-weak-hover: var(--colors-ui-spot-blue-60);
  --colors-swatch-bg-blue-weak-active: var(--colors-ui-spot-blue-70);
  --colors-swatch-bg-blue-weak-disabled: var(--colors-ui-spot-blue-20);
  --colors-swatch-bg-indigo-strong-default: var(--colors-ui-spot-indigo-100);
  --colors-swatch-bg-indigo-strong-hover: var(--colors-ui-spot-indigo-110);
  --colors-swatch-bg-indigo-strong-active: var(--colors-ui-spot-indigo-120);
  --colors-swatch-bg-indigo-strong-disabled: var(--colors-ui-spot-indigo-50);
  --colors-swatch-bg-indigo-weak-default: var(--colors-ui-spot-indigo-50);
  --colors-swatch-bg-indigo-weak-hover: var(--colors-ui-spot-indigo-60);
  --colors-swatch-bg-indigo-weak-active: var(--colors-ui-spot-indigo-70);
  --colors-swatch-bg-indigo-weak-disabled: var(--colors-ui-spot-indigo-20);
  --colors-swatch-bg-purple-strong-default: var(--colors-ui-spot-purple-100);
  --colors-swatch-bg-purple-strong-hover: var(--colors-ui-spot-purple-110);
  --colors-swatch-bg-purple-strong-active: var(--colors-ui-spot-purple-120);
  --colors-swatch-bg-purple-strong-disabled: var(--colors-ui-spot-purple-50);
  --colors-swatch-bg-purple-weak-default: var(--colors-ui-spot-purple-50);
  --colors-swatch-bg-purple-weak-hover: var(--colors-ui-spot-purple-60);
  --colors-swatch-bg-purple-weak-active: var(--colors-ui-spot-purple-70);
  --colors-swatch-bg-purple-weak-disabled: var(--colors-ui-spot-purple-20);
  --colors-swatch-bg-pink-strong-default: var(--colors-ui-spot-pink-100);
  --colors-swatch-bg-pink-strong-hover: var(--colors-ui-spot-pink-110);
  --colors-swatch-bg-pink-strong-active: var(--colors-ui-spot-pink-120);
  --colors-swatch-bg-pink-strong-disabled: var(--colors-ui-spot-pink-50);
  --colors-swatch-bg-pink-weak-default: var(--colors-ui-spot-pink-50);
  --colors-swatch-bg-pink-weak-hover: var(--colors-ui-spot-pink-60);
  --colors-swatch-bg-pink-weak-active: var(--colors-ui-spot-pink-70);
  --colors-swatch-bg-pink-weak-disabled: var(--colors-ui-spot-pink-20);
  --colors-swatch-bg-brown-strong-default: var(--colors-ui-spot-brown-100);
  --colors-swatch-bg-brown-strong-hover: var(--colors-ui-spot-brown-110);
  --colors-swatch-bg-brown-strong-active: var(--colors-ui-spot-brown-120);
  --colors-swatch-bg-brown-strong-disabled: var(--colors-ui-spot-brown-50);
  --colors-swatch-bg-brown-weak-default: var(--colors-ui-spot-brown-50);
  --colors-swatch-bg-brown-weak-hover: var(--colors-ui-spot-brown-60);
  --colors-swatch-bg-brown-weak-active: var(--colors-ui-spot-brown-70);
  --colors-swatch-bg-brown-weak-disabled: var(--colors-ui-spot-brown-20);
  --colors-swatch-bg-gray-strong-default: var(--colors-ui-spot-gray-100);
  --colors-swatch-bg-gray-strong-hover: var(--colors-ui-spot-gray-110);
  --colors-swatch-bg-gray-strong-active: var(--colors-ui-spot-gray-120);
  --colors-swatch-bg-gray-strong-disabled: var(--colors-ui-spot-gray-50);
  --colors-swatch-bg-gray-weak-default: var(--colors-ui-spot-gray-50);
  --colors-swatch-bg-gray-weak-hover: var(--colors-ui-spot-gray-60);
  --colors-swatch-bg-gray-weak-active: var(--colors-ui-spot-gray-70);
  --colors-swatch-bg-gray-weak-disabled: var(--colors-ui-spot-gray-20);
  --colors-swatch-fg-red-strong-primary: var(--colors-ui-spot-red-foreground-primary);
  --colors-swatch-fg-red-strong-secondary: var(--colors-ui-spot-red-foreground-secondary);
  --colors-swatch-fg-red-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-red-weak-primary: var(--colors-ui-spot-red-140);
  --colors-swatch-fg-red-weak-secondary: var(--colors-ui-spot-red-120);
  --colors-swatch-fg-red-weak-disabled: var(--colors-ui-spot-red-100);
  --colors-swatch-fg-orange-strong-primary: var(--colors-ui-spot-orange-foreground-primary);
  --colors-swatch-fg-orange-strong-secondary: var(--colors-ui-spot-orange-foreground-secondary);
  --colors-swatch-fg-orange-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-orange-weak-primary: var(--colors-ui-spot-orange-140);
  --colors-swatch-fg-orange-weak-secondary: var(--colors-ui-spot-orange-120);
  --colors-swatch-fg-orange-weak-disabled: var(--colors-ui-spot-orange-100);
  --colors-swatch-fg-yellow-strong-primary: var(--colors-ui-spot-yellow-foreground-primary);
  --colors-swatch-fg-yellow-strong-secondary: var(--colors-ui-spot-yellow-foreground-secondary);
  --colors-swatch-fg-yellow-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-yellow-weak-primary: var(--colors-ui-spot-yellow-140);
  --colors-swatch-fg-yellow-weak-secondary: var(--colors-ui-spot-yellow-120);
  --colors-swatch-fg-yellow-weak-disabled: var(--colors-ui-spot-yellow-100);
  --colors-swatch-fg-lime-strong-primary: var(--colors-ui-spot-lime-foreground-primary);
  --colors-swatch-fg-lime-strong-secondary: var(--colors-ui-spot-lime-foreground-secondary);
  --colors-swatch-fg-lime-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-lime-weak-primary: var(--colors-ui-spot-lime-140);
  --colors-swatch-fg-lime-weak-secondary: var(--colors-ui-spot-lime-120);
  --colors-swatch-fg-lime-weak-disabled: var(--colors-ui-spot-lime-100);
  --colors-swatch-fg-green-strong-primary: var(--colors-ui-spot-green-foreground-primary);
  --colors-swatch-fg-green-strong-secondary: var(--colors-ui-spot-green-foreground-secondary);
  --colors-swatch-fg-green-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-green-weak-primary: var(--colors-ui-spot-green-140);
  --colors-swatch-fg-green-weak-secondary: var(--colors-ui-spot-green-120);
  --colors-swatch-fg-green-weak-disabled: var(--colors-ui-spot-green-100);
  --colors-swatch-fg-mint-strong-primary: var(--colors-ui-spot-mint-foreground-primary);
  --colors-swatch-fg-mint-strong-secondary: var(--colors-ui-spot-mint-foreground-secondary);
  --colors-swatch-fg-mint-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-mint-weak-primary: var(--colors-ui-spot-mint-140);
  --colors-swatch-fg-mint-weak-secondary: var(--colors-ui-spot-mint-120);
  --colors-swatch-fg-mint-weak-disabled: var(--colors-ui-spot-mint-100);
  --colors-swatch-fg-blue-strong-primary: var(--colors-ui-spot-blue-foreground-primary);
  --colors-swatch-fg-blue-strong-secondary: var(--colors-ui-spot-blue-foreground-secondary);
  --colors-swatch-fg-blue-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-blue-weak-primary: var(--colors-ui-spot-blue-140);
  --colors-swatch-fg-blue-weak-secondary: var(--colors-ui-spot-blue-120);
  --colors-swatch-fg-blue-weak-disabled: var(--colors-ui-spot-blue-100);
  --colors-swatch-fg-indigo-strong-primary: var(--colors-ui-spot-indigo-foreground-primary);
  --colors-swatch-fg-indigo-strong-secondary: var(--colors-ui-spot-indigo-foreground-secondary);
  --colors-swatch-fg-indigo-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-indigo-weak-primary: var(--colors-ui-spot-indigo-140);
  --colors-swatch-fg-indigo-weak-secondary: var(--colors-ui-spot-indigo-120);
  --colors-swatch-fg-indigo-weak-disabled: var(--colors-ui-spot-indigo-100);
  --colors-swatch-fg-purple-strong-primary: var(--colors-ui-spot-purple-foreground-primary);
  --colors-swatch-fg-purple-strong-secondary: var(--colors-ui-spot-purple-foreground-secondary);
  --colors-swatch-fg-purple-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-purple-weak-primary: var(--colors-ui-spot-purple-140);
  --colors-swatch-fg-purple-weak-secondary: var(--colors-ui-spot-purple-120);
  --colors-swatch-fg-purple-weak-disabled: var(--colors-ui-spot-purple-100);
  --colors-swatch-fg-pink-strong-primary: var(--colors-ui-spot-pink-foreground-primary);
  --colors-swatch-fg-pink-strong-secondary: var(--colors-ui-spot-pink-foreground-secondary);
  --colors-swatch-fg-pink-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-pink-weak-primary: var(--colors-ui-spot-pink-140);
  --colors-swatch-fg-pink-weak-secondary: var(--colors-ui-spot-pink-120);
  --colors-swatch-fg-pink-weak-disabled: var(--colors-ui-spot-pink-100);
  --colors-swatch-fg-brown-strong-primary: var(--colors-ui-spot-brown-foreground-primary);
  --colors-swatch-fg-brown-strong-secondary: var(--colors-ui-spot-brown-foreground-secondary);
  --colors-swatch-fg-brown-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-brown-weak-primary: var(--colors-ui-spot-brown-140);
  --colors-swatch-fg-brown-weak-secondary: var(--colors-ui-spot-brown-120);
  --colors-swatch-fg-brown-weak-disabled: var(--colors-ui-spot-brown-100);
  --colors-swatch-fg-gray-strong-primary: var(--colors-ui-spot-gray-foreground-primary);
  --colors-swatch-fg-gray-strong-secondary: var(--colors-ui-spot-gray-foreground-secondary);
  --colors-swatch-fg-gray-strong-disabled: var(--colors-white-30);
  --colors-swatch-fg-gray-weak-primary: var(--colors-ui-spot-gray-140);
  --colors-swatch-fg-gray-weak-secondary: var(--colors-ui-spot-gray-120);
  --colors-swatch-fg-gray-weak-disabled: var(--colors-ui-spot-gray-100);
  --colors-swatch-stroke-red-strong: var(--colors-ui-spot-red-120);
  --colors-swatch-stroke-red-weak: var(--colors-ui-spot-red-60);
  --colors-swatch-stroke-orange-strong: var(--colors-ui-spot-orange-120);
  --colors-swatch-stroke-orange-weak: var(--colors-ui-spot-orange-60);
  --colors-swatch-stroke-yellow-strong: var(--colors-ui-spot-yellow-120);
  --colors-swatch-stroke-yellow-weak: var(--colors-ui-spot-yellow-60);
  --colors-swatch-stroke-lime-strong: var(--colors-ui-spot-lime-120);
  --colors-swatch-stroke-lime-weak: var(--colors-ui-spot-lime-60);
  --colors-swatch-stroke-green-strong: var(--colors-ui-spot-green-120);
  --colors-swatch-stroke-green-weak: var(--colors-ui-spot-green-60);
  --colors-swatch-stroke-mint-strong: var(--colors-ui-spot-mint-120);
  --colors-swatch-stroke-mint-weak: var(--colors-ui-spot-mint-60);
  --colors-swatch-stroke-blue-strong: var(--colors-ui-spot-blue-120);
  --colors-swatch-stroke-blue-weak: var(--colors-ui-spot-blue-60);
  --colors-swatch-stroke-indigo-strong: var(--colors-ui-spot-indigo-120);
  --colors-swatch-stroke-indigo-weak: var(--colors-ui-spot-indigo-60);
  --colors-swatch-stroke-purple-strong: var(--colors-ui-spot-purple-120);
  --colors-swatch-stroke-purple-weak: var(--colors-ui-spot-purple-60);
  --colors-swatch-stroke-pink-strong: var(--colors-ui-spot-pink-120);
  --colors-swatch-stroke-pink-weak: var(--colors-ui-spot-pink-60);
  --colors-swatch-stroke-brown-strong: var(--colors-ui-spot-brown-120);
  --colors-swatch-stroke-brown-weak: var(--colors-ui-spot-brown-60);
  --colors-swatch-stroke-gray-strong: var(--colors-ui-spot-gray-120);
  --colors-swatch-stroke-gray-weak: var(--colors-ui-spot-gray-60);
  --colors-data-categorical-bg-1-default: var(--colors-ui-category1-100);
  --colors-data-categorical-bg-1-hover: var(--colors-ui-category1-110);
  --colors-data-categorical-bg-1-active: var(--colors-ui-category1-120);
  --colors-data-categorical-bg-1-disabled: var(--colors-ui-category1-50);
  --colors-data-categorical-bg-2-default: var(--colors-ui-category1-50);
  --colors-data-categorical-bg-2-hover: var(--colors-ui-category1-60);
  --colors-data-categorical-bg-2-active: var(--colors-ui-category1-70);
  --colors-data-categorical-bg-2-disabled: var(--colors-ui-category1-20);
  --colors-data-categorical-bg-3-default: var(--colors-ui-category2-100);
  --colors-data-categorical-bg-3-hover: var(--colors-ui-category2-110);
  --colors-data-categorical-bg-3-active: var(--colors-ui-category2-120);
  --colors-data-categorical-bg-3-disabled: var(--colors-ui-category2-50);
  --colors-data-categorical-bg-4-default: var(--colors-ui-category2-50);
  --colors-data-categorical-bg-4-hover: var(--colors-ui-category2-60);
  --colors-data-categorical-bg-4-active: var(--colors-ui-category2-70);
  --colors-data-categorical-bg-4-disabled: var(--colors-ui-category2-20);
  --colors-data-categorical-bg-5-default: var(--colors-ui-category3-100);
  --colors-data-categorical-bg-5-hover: var(--colors-ui-category3-110);
  --colors-data-categorical-bg-5-active: var(--colors-ui-category3-120);
  --colors-data-categorical-bg-5-disabled: var(--colors-ui-category3-50);
  --colors-data-categorical-bg-6-default: var(--colors-ui-category3-50);
  --colors-data-categorical-bg-6-hover: var(--colors-ui-category3-60);
  --colors-data-categorical-bg-6-active: var(--colors-ui-category3-70);
  --colors-data-categorical-bg-6-disabled: var(--colors-ui-category3-20);
  --colors-data-categorical-bg-7-default: var(--colors-ui-category4-100);
  --colors-data-categorical-bg-7-hover: var(--colors-ui-category4-110);
  --colors-data-categorical-bg-7-active: var(--colors-ui-category4-120);
  --colors-data-categorical-bg-7-disabled: var(--colors-ui-category4-50);
  --colors-data-categorical-bg-8-default: var(--colors-ui-category4-50);
  --colors-data-categorical-bg-8-hover: var(--colors-ui-category4-60);
  --colors-data-categorical-bg-8-active: var(--colors-ui-category4-70);
  --colors-data-categorical-bg-8-disabled: var(--colors-ui-category4-20);
  --colors-data-categorical-bg-9-default: var(--colors-ui-category5-100);
  --colors-data-categorical-bg-9-hover: var(--colors-ui-category5-110);
  --colors-data-categorical-bg-9-active: var(--colors-ui-category5-120);
  --colors-data-categorical-bg-9-disabled: var(--colors-ui-category5-50);
  --colors-data-categorical-bg-10-default: var(--colors-ui-category5-50);
  --colors-data-categorical-bg-10-hover: var(--colors-ui-category5-60);
  --colors-data-categorical-bg-10-active: var(--colors-ui-category5-70);
  --colors-data-categorical-bg-10-disabled: var(--colors-ui-category5-20);
  --colors-data-categorical-bg-11-default: var(--colors-ui-category6-100);
  --colors-data-categorical-bg-11-hover: var(--colors-ui-category6-110);
  --colors-data-categorical-bg-11-active: var(--colors-ui-category6-120);
  --colors-data-categorical-bg-11-disabled: var(--colors-ui-category6-50);
  --colors-data-categorical-bg-12-default: var(--colors-ui-category6-50);
  --colors-data-categorical-bg-12-hover: var(--colors-ui-category6-60);
  --colors-data-categorical-bg-12-active: var(--colors-ui-category6-70);
  --colors-data-categorical-bg-12-disabled: var(--colors-ui-category6-20);
  --colors-data-categorical-bg-13-default: var(--colors-ui-category7-100);
  --colors-data-categorical-bg-13-hover: var(--colors-ui-category7-110);
  --colors-data-categorical-bg-13-active: var(--colors-ui-category7-120);
  --colors-data-categorical-bg-13-disabled: var(--colors-ui-category7-50);
  --colors-data-categorical-bg-14-default: var(--colors-ui-category7-50);
  --colors-data-categorical-bg-14-hover: var(--colors-ui-category7-60);
  --colors-data-categorical-bg-14-active: var(--colors-ui-category7-70);
  --colors-data-categorical-bg-14-disabled: var(--colors-ui-category7-20);
  --colors-data-categorical-bg-15-default: var(--colors-ui-category8-100);
  --colors-data-categorical-bg-15-hover: var(--colors-ui-category8-110);
  --colors-data-categorical-bg-15-active: var(--colors-ui-category8-120);
  --colors-data-categorical-bg-15-disabled: var(--colors-ui-category8-50);
  --colors-data-categorical-bg-16-default: var(--colors-ui-category8-50);
  --colors-data-categorical-bg-16-hover: var(--colors-ui-category8-60);
  --colors-data-categorical-bg-16-active: var(--colors-ui-category8-70);
  --colors-data-categorical-bg-16-disabled: var(--colors-ui-category8-20);
  --colors-data-categorical-fg-1-primary: var(--colors-ui-category1-foreground-primary);
  --colors-data-categorical-fg-1-secondary: var(--colors-ui-category1-foreground-secondary);
  --colors-data-categorical-fg-1-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-2-primary: var(--colors-ui-category1-140);
  --colors-data-categorical-fg-2-secondary: var(--colors-ui-category1-120);
  --colors-data-categorical-fg-2-disabled: var(--colors-ui-category1-100);
  --colors-data-categorical-fg-3-primary: var(--colors-ui-category2-foreground-primary);
  --colors-data-categorical-fg-3-secondary: var(--colors-ui-category2-foreground-secondary);
  --colors-data-categorical-fg-3-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-4-primary: var(--colors-ui-category2-140);
  --colors-data-categorical-fg-4-secondary: var(--colors-ui-category2-120);
  --colors-data-categorical-fg-4-disabled: var(--colors-ui-category2-100);
  --colors-data-categorical-fg-5-primary: var(--colors-ui-category3-foreground-primary);
  --colors-data-categorical-fg-5-secondary: var(--colors-ui-category3-foreground-secondary);
  --colors-data-categorical-fg-5-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-6-primary: var(--colors-ui-category3-140);
  --colors-data-categorical-fg-6-secondary: var(--colors-ui-category3-120);
  --colors-data-categorical-fg-6-disabled: var(--colors-ui-category3-100);
  --colors-data-categorical-fg-7-primary: var(--colors-ui-category4-foreground-primary);
  --colors-data-categorical-fg-7-secondary: var(--colors-ui-category4-foreground-secondary);
  --colors-data-categorical-fg-7-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-8-primary: var(--colors-ui-category4-140);
  --colors-data-categorical-fg-8-secondary: var(--colors-ui-category4-120);
  --colors-data-categorical-fg-8-disabled: var(--colors-ui-category4-100);
  --colors-data-categorical-fg-9-primary: var(--colors-ui-category5-foreground-primary);
  --colors-data-categorical-fg-9-secondary: var(--colors-ui-category5-foreground-secondary);
  --colors-data-categorical-fg-9-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-10-primary: var(--colors-ui-category5-140);
  --colors-data-categorical-fg-10-secondary: var(--colors-ui-category5-120);
  --colors-data-categorical-fg-10-disabled: var(--colors-ui-category5-100);
  --colors-data-categorical-fg-11-primary: var(--colors-ui-category6-foreground-primary);
  --colors-data-categorical-fg-11-secondary: var(--colors-ui-category6-foreground-secondary);
  --colors-data-categorical-fg-11-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-12-primary: var(--colors-ui-category6-140);
  --colors-data-categorical-fg-12-secondary: var(--colors-ui-category6-120);
  --colors-data-categorical-fg-12-disabled: var(--colors-ui-category6-100);
  --colors-data-categorical-fg-13-primary: var(--colors-ui-category7-foreground-primary);
  --colors-data-categorical-fg-13-secondary: var(--colors-ui-category7-foreground-secondary);
  --colors-data-categorical-fg-13-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-14-primary: var(--colors-ui-category7-140);
  --colors-data-categorical-fg-14-secondary: var(--colors-ui-category7-120);
  --colors-data-categorical-fg-14-disabled: var(--colors-ui-category7-100);
  --colors-data-categorical-fg-15-primary: var(--colors-ui-category8-foreground-primary);
  --colors-data-categorical-fg-15-secondary: var(--colors-ui-category8-foreground-secondary);
  --colors-data-categorical-fg-15-disabled: var(--colors-white-30);
  --colors-data-categorical-fg-16-primary: var(--colors-ui-category8-140);
  --colors-data-categorical-fg-16-secondary: var(--colors-ui-category8-120);
  --colors-data-categorical-fg-16-disabled: var(--colors-ui-category8-100);
  --colors-data-categorical-stroke-1: var(--colors-ui-category1-120);
  --colors-data-categorical-stroke-2: var(--colors-ui-category1-60);
  --colors-data-categorical-stroke-3: var(--colors-ui-category2-120);
  --colors-data-categorical-stroke-4: var(--colors-ui-category2-60);
  --colors-data-categorical-stroke-5: var(--colors-ui-category3-120);
  --colors-data-categorical-stroke-6: var(--colors-ui-category3-60);
  --colors-data-categorical-stroke-7: var(--colors-ui-category4-120);
  --colors-data-categorical-stroke-8: var(--colors-ui-category4-60);
  --colors-data-categorical-stroke-9: var(--colors-ui-category5-120);
  --colors-data-categorical-stroke-10: var(--colors-ui-category5-60);
  --colors-data-categorical-stroke-11: var(--colors-ui-category6-120);
  --colors-data-categorical-stroke-12: var(--colors-ui-category6-60);
  --colors-data-categorical-stroke-13: var(--colors-ui-category7-120);
  --colors-data-categorical-stroke-14: var(--colors-ui-category7-60);
  --colors-data-categorical-stroke-15: var(--colors-ui-category8-120);
  --colors-data-categorical-stroke-16: var(--colors-ui-category8-60);
  --colors-data-diverging-bg-0: var(--colors-data-diverging-0);
  --colors-data-diverging-bg-10: var(--colors-data-diverging-10);
  --colors-data-diverging-bg-20: var(--colors-data-diverging-20);
  --colors-data-diverging-bg-30: var(--colors-data-diverging-30);
  --colors-data-diverging-bg-40: var(--colors-data-diverging-40);
  --colors-data-diverging-bg-50: var(--colors-data-diverging-50);
  --colors-data-diverging-bg-60: var(--colors-data-diverging-60);
  --colors-data-diverging-bg-70: var(--colors-data-diverging-70);
  --colors-data-diverging-bg-80: var(--colors-data-diverging-80);
  --colors-data-diverging-bg-90: var(--colors-data-diverging-90);
  --colors-data-diverging-bg-100: var(--colors-data-diverging-100);
  --colors-data-diverging-bg-110: var(--colors-data-diverging-110);
  --colors-data-diverging-bg-120: var(--colors-data-diverging-120);
  --colors-data-diverging-bg-130: var(--colors-data-diverging-130);
  --colors-data-diverging-bg-140: var(--colors-data-diverging-140);
  --colors-data-diverging-bg-150: var(--colors-data-diverging-150);
  --colors-data-diverging-fg-0: var(--colors-data-diverging-foreground-0);
  --colors-data-diverging-fg-10: var(--colors-data-diverging-foreground-10);
  --colors-data-diverging-fg-20: var(--colors-data-diverging-foreground-20);
  --colors-data-diverging-fg-30: var(--colors-data-diverging-foreground-30);
  --colors-data-diverging-fg-40: var(--colors-data-diverging-foreground-40);
  --colors-data-diverging-fg-50: var(--colors-data-diverging-foreground-50);
  --colors-data-diverging-fg-60: var(--colors-data-diverging-foreground-60);
  --colors-data-diverging-fg-70: var(--colors-data-diverging-foreground-70);
  --colors-data-diverging-fg-80: var(--colors-data-diverging-foreground-80);
  --colors-data-diverging-fg-90: var(--colors-data-diverging-foreground-90);
  --colors-data-diverging-fg-100: var(--colors-data-diverging-foreground-100);
  --colors-data-diverging-fg-110: var(--colors-data-diverging-foreground-110);
  --colors-data-diverging-fg-120: var(--colors-data-diverging-foreground-120);
  --colors-data-diverging-fg-130: var(--colors-data-diverging-foreground-130);
  --colors-data-diverging-fg-140: var(--colors-data-diverging-foreground-140);
  --colors-data-diverging-fg-150: var(--colors-data-diverging-foreground-150);
  --colors-data-intensity-bg-0: var(--colors-data-intensity-0);
  --colors-data-intensity-bg-10: var(--colors-data-intensity-10);
  --colors-data-intensity-bg-20: var(--colors-data-intensity-20);
  --colors-data-intensity-bg-30: var(--colors-data-intensity-30);
  --colors-data-intensity-bg-40: var(--colors-data-intensity-40);
  --colors-data-intensity-bg-50: var(--colors-data-intensity-50);
  --colors-data-intensity-bg-60: var(--colors-data-intensity-60);
  --colors-data-intensity-bg-70: var(--colors-data-intensity-70);
  --colors-data-intensity-bg-80: var(--colors-data-intensity-80);
  --colors-data-intensity-bg-90: var(--colors-data-intensity-90);
  --colors-data-intensity-bg-100: var(--colors-data-intensity-100);
  --colors-data-intensity-bg-110: var(--colors-data-intensity-110);
  --colors-data-intensity-fg-0: var(--colors-data-intensity-foreground-0);
  --colors-data-intensity-fg-10: var(--colors-data-intensity-foreground-10);
  --colors-data-intensity-fg-20: var(--colors-data-intensity-foreground-20);
  --colors-data-intensity-fg-30: var(--colors-data-intensity-foreground-30);
  --colors-data-intensity-fg-40: var(--colors-data-intensity-foreground-40);
  --colors-data-intensity-fg-50: var(--colors-data-intensity-foreground-50);
  --colors-data-intensity-fg-60: var(--colors-data-intensity-foreground-60);
  --colors-data-intensity-fg-70: var(--colors-data-intensity-foreground-70);
  --colors-data-intensity-fg-80: var(--colors-data-intensity-foreground-80);
  --colors-data-intensity-fg-90: var(--colors-data-intensity-foreground-90);
  --colors-data-intensity-fg-100: var(--colors-data-intensity-foreground-100);
  --colors-data-intensity-fg-110: var(--colors-data-intensity-foreground-110);
}

/* initial vl-update */
@font-face {
  font-family: 'FT Regola Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/regola/woff2/FTRegolaNeue-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'FT Regola Neue';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/regola/woff2/FTRegolaNeue-RegularItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'FT Regola Neue';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/regola/woff2/FTRegolaNeue-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'FT Regola Neue';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/regola/woff2/FTRegolaNeue-MediumItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'FT Regola Neue';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/regola/woff2/FTRegolaNeue-Semibold.woff2') format('woff2');
}

@font-face {
  font-family: 'FT Regola Neue';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/regola/woff2/FTRegolaNeue-SemiboldItalic.woff2') format('woff2');
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter/Inter-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter/Inter-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
}

.ds-type-display-xl {
  font-family: var(--font-family-headings);
  font-weight: var(--font-weights-medium);
  font-size: var(--font-sizes-9);
  line-height: var(--line-heights-9);
  letter-spacing: -0.4px;
}

.ds-type-display-large {
  font-family: var(--font-family-headings);
  font-weight: var(--font-weights-medium);
  font-size: var(--font-sizes-8);
  line-height: var(--line-heights-8);
  letter-spacing: -0.4px;
}

.ds-type-display-medium {
  font-family: var(--font-family-headings);
  font-weight: var(--font-weights-medium);
  font-size: var(--font-sizes-7);
  line-height: var(--line-heights-7);
  letter-spacing: -0.25px;
}

.ds-type-display-small {
  font-family: var(--font-family-headings);
  font-weight: var(--font-weights-medium);
  font-size: var(--font-sizes-6);
  line-height: var(--line-heights-5);
  letter-spacing: -0.25px;
}

body[data-theme='vl'] {
  --colors-ui-neutral-10: rgb(252, 252, 252);
  --colors-ui-neutral-20: rgb(249, 249, 249);
  --colors-ui-neutral-30: rgb(244, 245, 245);
  --colors-ui-neutral-40: rgb(240, 240, 240);
  --colors-ui-neutral-50: rgb(232, 232, 232);
  --colors-ui-neutral-60: rgb(224, 224, 224);
  --colors-ui-neutral-70: rgb(217, 217, 217);
  --colors-ui-neutral-80: rgb(206, 206, 206);
  --colors-ui-neutral-90: rgb(187, 187, 187);
  --colors-ui-neutral-100: rgb(141, 141, 141);
  --colors-ui-neutral-110: rgb(131, 131, 131);
  --colors-ui-neutral-120: rgb(100, 100, 100);
  --colors-ui-neutral-130: rgb(66, 66, 66);
  --colors-ui-neutral-140: rgb(32, 32, 32);
  --colors-ui-neutral-foreground-secondary: var(--colors-white-70);
  --colors-ui-neutral-foreground-primary: var(--colors-white-100);

  --colors-ui-neutral-10-a: rgba(0, 0, 0, 0.01);
  --colors-ui-neutral-20-a: rgba(0, 0, 0, 0.02);
  --colors-ui-neutral-30-a: rgba(0, 0, 0, 0.04);
  --colors-ui-neutral-40-a: rgba(0, 0, 0, 0.06);
  --colors-ui-neutral-50-a: rgba(0, 0, 0, 0.09);
  --colors-ui-neutral-60-a: rgba(0, 0, 0, 0.12);
  --colors-ui-neutral-70-a: rgba(0, 0, 0, 0.15);
  --colors-ui-neutral-80-a: rgba(0, 0, 0, 0.19);
  --colors-ui-neutral-90-a: rgba(0, 0, 0, 0.27);
  --colors-ui-neutral-100-a: rgba(0, 0, 0, 0.45);
  --colors-ui-neutral-110-a: rgba(0, 0, 0, 0.49);
  --colors-ui-neutral-120-a: rgba(0, 0, 0, 0.61);
  --colors-ui-neutral-130-a: rgba(0, 0, 0, 0.74);
  --colors-ui-neutral-140-a: rgba(0, 0, 0, 0.87);
  --colors-ui-neutral-foreground-secondary-a: var(--colors-white-70);
  --colors-ui-neutral-foreground-primary-a: var(--colors-white-100);

  --colors-ui-neutral-10-dark: rgb(17, 17, 17);
  --colors-ui-neutral-20-dark: rgb(25, 25, 25);
  --colors-ui-neutral-30-dark: rgb(29, 30, 30);
  --colors-ui-neutral-40-dark: rgb(34, 34, 34);
  --colors-ui-neutral-50-dark: rgb(42, 42, 42);
  --colors-ui-neutral-60-dark: rgb(49, 49, 49);
  --colors-ui-neutral-70-dark: rgb(58, 58, 58);
  --colors-ui-neutral-80-dark: rgb(72, 72, 72);
  --colors-ui-neutral-90-dark: rgb(96, 96, 96);
  --colors-ui-neutral-100-dark: rgb(110, 110, 110);
  --colors-ui-neutral-110-dark: rgb(123, 123, 123);
  --colors-ui-neutral-120-dark: rgb(180, 180, 180);
  --colors-ui-neutral-130-dark: rgb(209, 209, 209);
  --colors-ui-neutral-140-dark: rgb(238, 238, 238);
  --colors-ui-neutral-foreground-secondary-dark: var(--colors-white-70);
  --colors-ui-neutral-foreground-primary-dark: var(--colors-white-100);

  --colors-ui-neutral-10-dark-a: rgba(0, 0, 0, 0);
  --colors-ui-neutral-20-dark-a: rgba(255, 255, 255, 0.04);
  --colors-ui-neutral-30-dark-a: rgba(255, 255, 255, 0.05);
  --colors-ui-neutral-40-dark-a: rgba(255, 255, 255, 0.07);
  --colors-ui-neutral-50-dark-a: rgba(255, 255, 255, 0.11);
  --colors-ui-neutral-60-dark-a: rgba(255, 255, 255, 0.13);
  --colors-ui-neutral-70-dark-a: rgba(255, 255, 255, 0.17);
  --colors-ui-neutral-80-dark-a: rgba(255, 255, 255, 0.23);
  --colors-ui-neutral-90-dark-a: rgba(255, 255, 255, 0.33);
  --colors-ui-neutral-100-dark-a: rgba(255, 255, 255, 0.39);
  --colors-ui-neutral-110-dark-a: rgba(255, 255, 255, 0.45);
  --colors-ui-neutral-120-dark-a: rgba(255, 255, 255, 0.69);
  --colors-ui-neutral-130-dark-a: rgba(255, 255, 255, 0.81);
  --colors-ui-neutral-140-dark-a: rgba(255, 255, 255, 0.93);
  --colors-ui-neutral-foreground-secondary-dark-a: var(--colors-black-60);
  --colors-ui-neutral-foreground-primary-dark-a: var(--colors-black-100);

  --colors-ui-accent-10: rgb(253, 253, 253);
  --colors-ui-accent-20: rgb(249, 249, 249);
  --colors-ui-accent-30: rgb(244, 245, 245);
  --colors-ui-accent-40: rgb(240, 240, 240);
  --colors-ui-accent-50: rgb(232, 232, 232);
  --colors-ui-accent-60: rgb(225, 225, 225);
  --colors-ui-accent-70: rgb(217, 217, 217);
  --colors-ui-accent-80: rgb(206, 206, 206);
  --colors-ui-accent-90: rgb(187, 187, 187);
  --colors-ui-accent-100: rgb(0, 0, 0);
  --colors-ui-accent-110: rgb(46, 46, 46);
  --colors-ui-accent-120: rgb(98, 98, 98);
  --colors-ui-accent-130: rgb(65, 65, 65);
  --colors-ui-accent-140: rgb(32, 32, 32);
  --colors-ui-accent-foreground-secondary: var(--colors-white-70);
  --colors-ui-accent-foreground-primary: var(--colors-white-100);

  --colors-ui-accent-10-a: rgba(0, 0, 0, 0.01);
  --colors-ui-accent-20-a: rgba(0, 0, 0, 0.02);
  --colors-ui-accent-30-a: rgba(0, 0, 0, 0.04);
  --colors-ui-accent-40-a: rgba(0, 0, 0, 0.06);
  --colors-ui-accent-50-a: rgba(0, 0, 0, 0.09);
  --colors-ui-accent-60-a: rgba(0, 0, 0, 0.12);
  --colors-ui-accent-70-a: rgba(0, 0, 0, 0.15);
  --colors-ui-accent-80-a: rgba(0, 0, 0, 0.19);
  --colors-ui-accent-90-a: rgba(0, 0, 0, 0.27);
  --colors-ui-accent-100-a: rgb(0, 0, 0);
  --colors-ui-accent-110-a: rgba(0, 0, 0, 0.82);
  --colors-ui-accent-120-a: rgba(0, 0, 0, 0.62);
  --colors-ui-accent-130-a: rgba(0, 0, 0, 0.75);
  --colors-ui-accent-140-a: rgba(0, 0, 0, 0.87);
  --colors-ui-accent-foreground-secondary-a: var(--colors-white-70);
  --colors-ui-accent-foreground-primary-a: var(--colors-white-100);

  --colors-ui-accent-10-dark: rgb(0, 0, 0);
  --colors-ui-accent-20-dark: rgb(18, 18, 18);
  --colors-ui-accent-30-dark: rgb(24, 25, 25);
  --colors-ui-accent-40-dark: rgb(31, 31, 31);
  --colors-ui-accent-50-dark: rgb(40, 40, 40);
  --colors-ui-accent-60-dark: rgb(48, 48, 48);
  --colors-ui-accent-70-dark: rgb(57, 57, 57);
  --colors-ui-accent-80-dark: rgb(72, 72, 72);
  --colors-ui-accent-90-dark: rgb(96, 96, 96);
  --colors-ui-accent-100-dark: rgb(109, 109, 109);
  --colors-ui-accent-110-dark: rgb(96, 96, 96);
  --colors-ui-accent-120-dark: rgb(180, 180, 180);
  --colors-ui-accent-130-dark: rgb(209, 209, 209);
  --colors-ui-accent-140-dark: rgb(238, 238, 238);
  --colors-ui-accent-foreground-secondary-dark: var(--colors-white-70);
  --colors-ui-accent-foreground-primary-dark: var(--colors-white-100);

  --colors-ui-accent-10-dark-a: rgba(0, 0, 0, 0);
  --colors-ui-accent-20-dark-a: rgba(255, 255, 255, 0.07);
  --colors-ui-accent-30-dark-a: rgba(255, 255, 255, 0.1);
  --colors-ui-accent-40-dark-a: rgba(255, 255, 255, 0.12);
  --colors-ui-accent-50-dark-a: rgba(255, 255, 255, 0.16);
  --colors-ui-accent-60-dark-a: rgba(255, 255, 255, 0.19);
  --colors-ui-accent-70-dark-a: rgba(255, 255, 255, 0.22);
  --colors-ui-accent-80-dark-a: rgba(255, 255, 255, 0.28);
  --colors-ui-accent-90-dark-a: rgba(255, 255, 255, 0.38);
  --colors-ui-accent-100-dark-a: rgba(255, 255, 255, 0.43);
  --colors-ui-accent-110-dark-a: rgba(255, 255, 255, 0.38);
  --colors-ui-accent-120-dark-a: rgba(255, 255, 255, 0.71);
  --colors-ui-accent-130-dark-a: rgba(255, 255, 255, 0.82);
  --colors-ui-accent-140-dark-a: rgba(255, 255, 255, 0.93);
  --colors-ui-accent-foreground-secondary-dark-a: var(--colors-black-60);
  --colors-ui-accent-foreground-primary-dark-a: var(--colors-black-100);
}