$color-brand-darkest: rgb(82, 0, 60);
$color-brand-dark: rgb(115, 7, 86);
$color-brand-pure: rgb(211, 23, 161);
$color-brand-light: rgb(241, 95, 202);
$color-brand-lightest: rgb(250, 168, 228);
$color-interactive-darkest: rgb(51, 5, 97);
$color-interactive-dark: rgb(82, 13, 150);
$color-interactive-pure: rgb(148, 52, 244);
$color-interactive-light: rgb(189, 127, 250);
$color-interactive-lightest: rgb(229, 204, 255);
$color-highlight-darkest: rgb(66, 40, 23);
$color-highlight-dark: rgb(158, 63, 0);
$color-highlight-pure: rgb(232, 104, 38);
$color-highlight-light: rgb(255, 156, 92);
$color-highlight-lightest: rgb(245, 188, 150);
$color-neutral-black: rgb(24, 27, 37);
$color-neutral-darkest: rgb(51, 56, 71);
$color-neutral-dark: rgb(73, 75, 91);
$color-neutral-medium: rgb(109, 113, 136);
$color-neutral-light: rgb(219, 221, 229);
$color-neutral-lightest: rgb(237, 238, 242);
$color-neutral-white: rgb(255, 255, 255);
$color-status-negative: rgb(250, 79, 120);
$color-status-informative: rgb(7, 150, 242);
$color-status-positive: rgb(23, 161, 84);
$opacity-level-weakest: 0.16;
$opacity-level-weak: 0.32;
$opacity-level-intense: 0.64;
$opacity-level-semiopaque: 0.80;
$spacing-inline-nano: 4px;
$spacing-inline-micro: 8px;
$spacing-inline-tiny: 16px;
$spacing-inline-small: 32px;
$spacing-inline-medium: 40px;
$spacing-inline-large: 80px;
$spacing-inline-huge: 128px;
$spacing-inline-giant: 200px;
$spacing-inset-micro: 8px;
$spacing-inset-tiny: 16px;
$spacing-inset-small: 32px;
$spacing-inset-medium: 40px;
$spacing-squish-micro: 4px 8px;
$spacing-squish-tiny: 8px 16px;
$spacing-squish-small: 16px 32px;
$spacing-squish-medium: 16px 40px;
$spacing-stack-nano: 4px;
$spacing-stack-micro: 8px;
$spacing-stack-tiny: 16px;
$spacing-stack-small: 24px;
$spacing-stack-medium: 40px;
$spacing-stack-large: 80px;
$spacing-stack-huge: 128px;
$spacing-stack-giant: 200px;
$border-radius-none: 0;
$border-radius-rounded: 12px;
$border-radius-rounded-side: 12px;
$border-radius-circle: 100%;
$border-width-none: 0;
$border-width-hairline: 1px;
$border-width-thin: 2px;
$border-width-thick: 4px;
$border-width-heavy: 8px;
$shadow-level-1: 0px 4px 10px rgba(109, 113, 136, 0.16), 0px 2px 8px rgba(51, 56, 71, 0.16);
$shadow-level-2: 0px 42px 80px rgba(109, 113, 136, 0.16), 0px 9px 20px rgba(109, 113, 136, 0.16), 0px 3px 7px rgba(51, 56, 71, 0.16);
$shadow-level-3: 0px 60px 54px rgba(109, 113, 136, 0.16), 0px 22px 26px rgba(109, 113, 136, 0.16), 0px 12px 18px rgba(51, 56, 71, 0.16), 0px 6px 12px rgba(51, 56, 71, 0.16);
$shadow-level-4: 0px 15px 80px rgba(109, 113, 136, 0.16), 0px 7px 32px rgba(24, 27, 37, 0.16), 0px 4px 17px rgba(24, 27, 37, 0.16), 0px 0px 3px rgba(109, 113, 136, 0.16);
$z-index-underlay: -1;
$z-index-default: 0;
$z-index-surface: 1;
$z-index-above: 10;
$z-index-overlay: 100;
$font-family-highlight: "Work Sans";
$font-family-base: "Open Sans";
$font-size-nano: 12px;
$font-size-medium: 24px;
$font-size-hero: 64px;
$font-size-large: 32px;
$font-size-tiny: 16px;
$font-size-micro: 14px;
$font-size-giant: 48px;
$font-size-small: 20px;
$font-size-huge: 40px;
$font-weight-black: 800;
$font-weight-bold: 700;
$font-weight-medium: 500;
$font-weight-regular: 400;
$font-weight-base-bold: 700;
$font-weight-base-medium: 600;
$font-weight-base-regular: 400;
$line-height-default: 100%;
$line-height-micro: 115%;
$line-height-tiny: 120%;
$line-height-small: 125%;
$line-height-medium: 133%;
$line-height-large: 150%;
$line-height-huge: 170%;
$line-height-base-default: 100%;
$line-height-base-tiny: 115%;
$line-height-base-small: 120%;
$line-height-base-medium: 133%;
$line-height-base-large: 150%;
$line-height-base-huge: 170%;