$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 16px;
$box-shadow-sm: 0 8px 12px 1px rgba(29, 17, 51, .04), 0 3px 16px 2px rgba(9, 32, 77, .12), 0 5px 10px -3px rgba(29, 17, 51, .12);
$box-shadow-md: 0 16px 24px 2px rgba(29, 17, 51, .04), 0 6px 32px 4px rgba(9, 32, 77, .12), 0 8px 12px -5px rgba(29, 17, 51, .12);
$box-shadow-lg: 0 24px 38px 3px rgba(29, 17, 51, .04), 0 10px 48px 8px rgba(9, 32, 77, .12), 0 12px 16px -6px rgba(29, 17, 51, .12);
$color-green-05: #e3fff3;
$color-green-10: #d1ffee;
$color-green-20: #b3ffe3;
$color-green-30: #88ffd1;
$color-green-40: #54ffbd;
$color-green-50: #3fe1b0;
$color-green-60: #2ac3a2;
$color-green-70: #008787;
$color-green-80: #005e5e;
$color-green-90: #08403f;
$color-blue-05: #aaf2ff;
$color-blue-10: #80ebff;
$color-blue-20: #00ddff;
$color-blue-30: #00b3f4;
$color-blue-40: #0090ed;
$color-blue-50: #0060df;
$color-blue-60: #0250bb;
$color-blue-70: #054096;
$color-blue-80: #073072;
$color-blue-90: #09204d;
$color-violet-05: #e7dfff;
$color-violet-10: #d9bfff;
$color-violet-20: #cb9eff;
$color-violet-30: #c689ff;
$color-violet-40: #ab71ff;
$color-violet-50: #9059ff;
$color-violet-60: #7542e5;
$color-violet-70: #592acb;
$color-violet-80: #45278d;
$color-violet-90: #321c64;
$color-purple-05: #f7e2ff;
$color-purple-10: #f6b8ff;
$color-purple-20: #f68fff;
$color-purple-30: #f770ff;
$color-purple-40: #d74cf0;
$color-purple-50: #b833e1;
$color-purple-60: #952bb9;
$color-purple-70: #722291;
$color-purple-80: #4e1a69;
$color-purple-90: #2b1141;
$color-pink-05: #ffdef0;
$color-pink-10: #ffb4db;
$color-pink-20: #ff8ac5;
$color-pink-30: #ff6bba;
$color-pink-40: #ff4aa2;
$color-pink-50: #ff298a;
$color-pink-60: #e31587;
$color-pink-70: #c60084;
$color-pink-80: #7f145b;
$color-pink-90: #50134b;
$color-red-05: #ffdfe7;
$color-red-10: #ffbdc5;
$color-red-20: #ff9aa2;
$color-red-30: #ff848b;
$color-red-40: #ff6a75;
$color-red-50: #ff4f5e;
$color-red-60: #e22850;
$color-red-70: #c50042;
$color-red-80: #810220;
$color-red-90: #440306;
$color-orange-05: #fff4de;
$color-orange-10: #ffd5b2;
$color-orange-20: #ffb587;
$color-orange-30: #ffa266;
$color-orange-40: #ff8a50;
$color-orange-50: #ff7139;
$color-orange-60: #e25920;
$color-orange-70: #cc3d00;
$color-orange-80: #9e280b;
$color-orange-90: #7c1504;
$color-yellow-05: #ffffcc;
$color-yellow-10: #ffff98;
$color-yellow-20: #ffea80;
$color-yellow-30: #ffd567;
$color-yellow-40: #ffbd4f;
$color-yellow-50: #ffa436;
$color-yellow-60: #e27f2e;
$color-yellow-70: #c45a27;
$color-yellow-80: #a7341f;
$color-yellow-90: #960e18;
$color-light-gray-05: #ffffff;
$color-light-gray-10: #f9f9fb;
$color-light-gray-20: #f0f0f4;
$color-light-gray-30: #e0e0e6;
$color-light-gray-40: #cfcfd8;
$color-light-gray-50: #bfbfc9;
$color-light-gray-60: #afafba;
$color-light-gray-70: #9f9fad;
$color-light-gray-80: #8f8f9e;
$color-light-gray-90: #80808f;
$color-dark-gray-05: #5b5b66;
$color-dark-gray-10: #52525e;
$color-dark-gray-20: #4a4a55;
$color-dark-gray-30: #42414d;
$color-dark-gray-40: #3a3944;
$color-dark-gray-50: #32313c;
$color-dark-gray-60: #2b2a33;
$color-dark-gray-70: #23222b;
$color-dark-gray-80: #1c1b22;
$color-dark-gray-90: #15141a;
$color-marketing-gray-10: #f9f9fa;
$color-marketing-gray-20: #ededf0;
$color-marketing-gray-30: #cdcdd4;
$color-marketing-gray-40: #b1b1bc;
$color-marketing-gray-50: #9595a2;
$color-marketing-gray-60: #7a7a8b;
$color-marketing-gray-70: #5e5e72;
$color-marketing-gray-80: #42425a;
$color-marketing-gray-90: #1f2033;
$color-marketing-gray-99: #20123a;
$color-ink-05: #393473;
$color-ink-10: #342f6d;
$color-ink-20: #312a64;
$color-ink-30: #2e255d;
$color-ink-40: #2b2156;
$color-ink-50: #291d4f;
$color-ink-60: #271948;
$color-ink-70: #241541;
$color-ink-80: #20123a;
$color-ink-90: #1d1133;
$color-black: #000000;
$color-white: #ffffff;
$color-link: #0060df;
$color-link-hover: #0250bb;
$color-link-visited: #b833e1;
$color-link-visited-hover: #952bb9;
$color-moz-neon-blue: #00ffff;
$color-moz-lemon-yellow: #fff44f;
$color-moz-warm-red: #ff4f5e;
$color-moz-neon-green: #54ffbd;
$color-moz-dark-purple: #6e008b;
$color-moz-dark-green: #005e5e;
$color-moz-dark-blue: #00458b;
$color-moz-dark-gray: #959595;
$color-moz-light-gray: #e7e5e2;
$content-xs: 304px;
$content-sm: 432px;
$content-md: 688px;
$content-lg: 928px;
$content-xl: 1152px;
$content-max: 1440px;
$screen-xs: 320px;
$screen-sm: 480px;
$screen-md: 768px;
$screen-lg: 1024px;
$screen-xl: 1312px;
$font-stack-base: Inter, X-LocaleSpecific, sans-serif;
$font-stack-firefox: Metropolis, Inter, X-LocaleSpecific, sans-serif;
$font-stack-mozilla-headline: 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif;
$font-stack-mozilla-text: 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif;
$font-stack-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
$gradient-warm: linear-gradient(45deg, #F5156C, #FF3750, #FF4F5E, #FF7139, #FF980E);
$gradient-cool: linear-gradient(90deg, #3A8EE6, #9059FF, #C139E6);
$gradient-highlight: linear-gradient(90deg, #FFFFFF, #FFF44F);
$mq-xs: "(min-width: 320px)";
$mq-sm: "(min-width: 480px)";
$mq-md: "(min-width: 768px)";
$mq-lg: "(min-width: 1024px)";
$mq-xl: "(min-width: 1312px)";
$mq-max: "(min-width: 1440px)";
$mq-short: "(max-height: 599px)";
$mq-tall: "(min-height: 600px)";
$mq-high-res: "only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi)";
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;
$layout-2xs: 16px;
$layout-xs: 24px;
$layout-sm: 32px;
$layout-md: 48px;
$layout-lg: 64px;
$layout-xl: 96px;
$layout-2xl: 192px;