@arc-ui/tokens-bt-enterprise 12.0.0-beta.3

package/dist/scss/index.scss

@@ -0,0 +1,1611 @@
+
+// Do not edit directly
+// Generated on Fri, 23 Aug 2024 17:25:37 GMT
+
+$sem-font-family-heading: 'BT Curve';
+$sem-font-family-body: 'BT Curve';
+$sem-font-family-interface: 'BT Curve';
+$sem-font-weight-regular: 400;
+$sem-font-weight-semi: 500;
+$sem-font-weight-bold: 700;
+$sem-font-weight-button: 400;
+$sem-font-weight-semi-bold: 500;
+$sem-type-body-reg-xs: 400 12px/16px 'BT Curve';
+$sem-type-body-reg-s: 400 14px/20px 'BT Curve';
+$sem-type-body-reg-m: 400 16px/24px 'BT Curve';
+$sem-type-body-reg-l: 400 20px/26px 'BT Curve';
+$sem-type-body-bold-xs: 700 12px/16px 'BT Curve';
+$sem-type-body-bold-s: 700 14px/20px 'BT Curve';
+$sem-type-body-bold-m: 700 16px/24px 'BT Curve';
+$sem-type-body-bold-l: 700 20px/26px 'BT Curve';
+$sem-type-body-semi-xs: 500 12px/16px 'BT Curve';
+$sem-type-body-semi-s: 500 14px/20px 'BT Curve';
+$sem-type-body-semi-m: 500 16px/24px 'BT Curve';
+$sem-type-body-semi-l: 500 20px/26px 'BT Curve';
+$sem-type-label-reg-xxs: 400 14px/20px 'BT Curve';
+$sem-type-label-reg-xs: 400 14px/20px 'BT Curve';
+$sem-type-label-reg-s: 400 14px/20px 'BT Curve';
+$sem-type-label-reg-m: 400 16px/24px 'BT Curve';
+$sem-type-label-reg-l: 400 20px/26px 'BT Curve';
+$sem-type-label-reg-xl: 400 20px/26px 'BT Curve';
+$sem-type-interface-reg-xs: 400 12px/12px 'BT Curve';
+$sem-type-interface-reg-s: 400 14px/14px 'BT Curve';
+$sem-type-interface-reg-m: 400 16px/16px 'BT Curve';
+$sem-type-interface-reg-l: 400 20px/20px 'BT Curve';
+$sem-type-interface-semi-xs: 500 12px/12px 'BT Curve';
+$sem-type-interface-semi-s: 500 14px/14px 'BT Curve';
+$sem-type-interface-semi-m: 500 16px/16px 'BT Curve';
+$sem-type-interface-semi-l: 500 20px/20px 'BT Curve';
+$sem-type-interface-bold-xs: 700 12px/12px 'BT Curve';
+$sem-type-interface-bold-s: 700 14px/14px 'BT Curve';
+$sem-type-interface-bold-m: 700 16px/16px 'BT Curve';
+$sem-type-interface-bold-l: 700 20px/20px 'BT Curve';
+$sem-type-interface-button-s: 400 14px/14px 'BT Curve';
+$sem-type-interface-button-m: 400 16px/16px 'BT Curve';
+$sem-type-interface-button-l: 400 20px/20px 'BT Curve';
+$sem-type-interface-card-semi-s: 500 20px/26px 'BT Curve';
+$sem-type-interface-card-semi-m: 500 24px/32px 'BT Curve';
+$sem-type-interface-card-semi-l: 500 28px/36px 'BT Curve';
+$sem-type-interface-card-semi-xl: 500 32px/40px 'BT Curve';
+$sem-type-interface-progress-bar-title-m: 400 16px/16px 'BT Curve';
+$sem-type-interface-alert-title-m: 700 16px/24px 'BT Curve';
+$sem-type-support-reg-xs: 400 12px/16px 'BT Curve';
+$sem-type-support-reg-s: 400 14px/20px 'BT Curve';
+$sem-type-support-reg-m: 400 16px/24px 'BT Curve';
+$sem-type-support-reg-l: 400 20px/26px 'BT Curve';
+$sem-type-mobile-semi-xxxs: 500 12px/16px 'BT Curve';
+$sem-type-mobile-semi-xxs: 500 14px/20px 'BT Curve';
+$sem-type-mobile-semi-xs: 500 16px/24px 'BT Curve';
+$sem-type-mobile-semi-s: 500 20px/26px 'BT Curve';
+$sem-type-mobile-semi-m: 500 24px/32px 'BT Curve';
+$sem-type-mobile-semi-l: 500 28px/36px 'BT Curve';
+$sem-type-mobile-semi-xl: 500 36px/44px 'BT Curve';
+$sem-type-mobile-semi-xxl: 500 40px/48px 'BT Curve';
+$sem-type-mobile-semi-xxxl: 500 56px/64px 'BT Curve';
+$sem-type-mobile-bold-xxxs: 700 12px/16px 'BT Curve';
+$sem-type-mobile-bold-xxs: 700 14px/20px 'BT Curve';
+$sem-type-mobile-bold-xs: 700 16px/24px 'BT Curve';
+$sem-type-mobile-bold-s: 700 20px/26px 'BT Curve';
+$sem-type-mobile-bold-m: 700 24px/32px 'BT Curve';
+$sem-type-mobile-bold-l: 700 28px/36px 'BT Curve';
+$sem-type-mobile-bold-xl: 700 36px/44px 'BT Curve';
+$sem-type-mobile-bold-xxl: 700 40px/48px 'BT Curve';
+$sem-type-mobile-bold-xxxl: 700 56px/64px 'BT Curve';
+$sem-type-tablet-semi-m: 500 28px/36px 'BT Curve';
+$sem-type-tablet-semi-l: 500 32px/40px 'BT Curve';
+$sem-type-tablet-semi-xl: 500 40px/48px 'BT Curve';
+$sem-type-tablet-semi-xxl: 500 56px/64px 'BT Curve';
+$sem-type-tablet-semi-xxxl: 500 80px/96px 'BT Curve';
+$sem-type-tablet-bold-m: 700 28px/36px 'BT Curve';
+$sem-type-tablet-bold-l: 700 32px/40px 'BT Curve';
+$sem-type-tablet-bold-xl: 700 40px/48px 'BT Curve';
+$sem-type-tablet-bold-xxl: 700 56px/64px 'BT Curve';
+$sem-type-tablet-bold-xxxl: 700 80px/96px 'BT Curve';
+$sem-type-desktop-semi-s: 500 28px/36px 'BT Curve';
+$sem-type-desktop-semi-m: 500 32px/40px 'BT Curve';
+$sem-type-desktop-semi-l: 500 40px/48px 'BT Curve';
+$sem-type-desktop-semi-xl: 500 56px/64px 'BT Curve';
+$sem-type-desktop-semi-xxl: 500 80px/96px 'BT Curve';
+$sem-type-desktop-semi-xxxl: 500 120px/136px 'BT Curve';
+$sem-type-desktop-bold-m: 700 32px/40px 'BT Curve';
+$sem-type-desktop-bold-l: 700 40px/48px 'BT Curve';
+$sem-type-desktop-bold-xl: 700 56px/64px 'BT Curve';
+$sem-type-desktop-bold-xxl: 700 80px/96px 'BT Curve';
+$sem-type-desktop-bold-xxxl: 700 120px/136px 'BT Curve';
+$sem-font-size-75: 12px;
+$sem-font-size-87: 14px;
+$sem-font-size-100: 16px;
+$sem-font-size-125: 20px;
+$sem-font-size-150: 24px;
+$sem-font-size-175: 28px;
+$sem-font-size-200: 32px;
+$sem-font-size-225: 36px;
+$sem-font-size-250: 40px;
+$sem-font-size-300: 48px;
+$sem-font-size-350: 56px;
+$sem-font-size-400: 64px;
+$sem-font-size-500: 80px;
+$sem-font-size-750: 120px;
+$sem-line-height-base-scale-xxxs: 16px;
+$sem-line-height-base-scale-xxs: 20px;
+$sem-line-height-base-scale-xs: 24px;
+$sem-line-height-base-scale-s: 26px;
+$sem-line-height-base-scale-m: 28px;
+$sem-line-height-base-scale-l: 32px;
+$sem-line-height-base-scale-xl: 36px;
+$sem-line-height-base-scale-xxl: 40px;
+$sem-line-height-base-scale-xxxl: 44px;
+$sem-line-height-base-scale-xxxxl: 48px;
+$sem-line-height-base-scale-xxxxxl: 64px;
+$sem-line-height-base-scale-xxxxxxl: 96px;
+$sem-line-height-base-scale-xxxxxxxl: 136px;
+$sem-line-height-interface-none: 0px;
+$sem-line-height-interface-xxxs: 8px;
+$sem-line-height-interface-xxs: 10px;
+$sem-line-height-interface-xs: 12px;
+$sem-line-height-interface-s: 14px;
+$sem-line-height-interface-m: 16px;
+$sem-line-height-interface-l: 20px;
+$sem-paragraph-spacing-heading: 0;
+$sem-paragraph-spacing-body: 0.5;
+$sem-paragraph-spacing-interface: 0;
+$sem-size-icon-xxxxxxs: 10px;
+$sem-size-icon-xxxxxl: 80px;
+$sem-size-icon-xxxxs: 32px;
+$sem-size-icon-xxxs: 12px;
+$sem-size-icon-xxs: 20px;
+$sem-size-icon-xs: 16px;
+$sem-size-icon-s: 20px;
+$sem-size-icon-m: 24px;
+$sem-size-icon-ml: 42px;
+$sem-size-icon-l: 28px;
+$sem-size-icon-xl: 32px;
+$sem-size-icon-xxl: 40px;
+$sem-size-icon-xxxl: 48px;
+$sem-size-icon-xxxxl: 64px;
+$sem-size-icon-xxxxxxl: 96px;
+$sem-size-all-5: 2px;
+$sem-size-all-10: 1px;
+$sem-size-all-20: 4px;
+$sem-size-all-30: 8px;
+$sem-size-all-40: 12px;
+$sem-size-all-45: 14px;
+$sem-size-all-50: 16px;
+$sem-size-all-60: 20px;
+$sem-size-all-70: 24px;
+$sem-size-all-75: 26px;
+$sem-size-all-80: 28px;
+$sem-size-all-85: 28px;
+$sem-size-all-90: 32px;
+$sem-size-all-95: 34px;
+$sem-size-all-100: 36px;
+$sem-size-all-110: 40px;
+$sem-size-all-115: 36px;
+$sem-size-all-120: 42px;
+$sem-size-all-130: 44px;
+$sem-size-all-140: 48px;
+$sem-size-all-142: 52px;
+$sem-size-all-145: 56px;
+$sem-size-all-150: 58px;
+$sem-size-all-155: 60px;
+$sem-size-all-160: 64px;
+$sem-size-all-162: 84px; // SiteHeader (ENT)
+$sem-size-all-165: 80px;
+$sem-size-all-170: 96px;
+$sem-size-all-175: 96px;
+$sem-size-all-178: 72px;
+$sem-size-all-180: 128px;
+$sem-size-all-182: 106px;
+$sem-size-all-185: 282px;
+$sem-size-all-190: 288px;
+$sem-size-all-195: 304px;
+$sem-size-all-200: 348px;
+$sem-size-all-210: 384px;
+$sem-size-all-220: 472px;
+$sem-size-all-230: 591px;
+$sem-size-all-240: 800px;
+$sem-size-breakpoints-xs: 320px; // Extra Small (XS) - 320px or under 576px: This is typically the breakpoint for smartphones in portrait mode.
+$sem-size-breakpoints-s: 576px; // Small (SM) - 576px to 767px: This is often used for smartphones in landscape mode and small tablets.
+$sem-size-breakpoints-m: 768px; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
+$sem-size-breakpoints-l: 1024px; // Large (LG) - 1024px - 1279px: This breakpoint is often applied to larger desktop screens and some laptops.
+$sem-size-breakpoints-xl: 1280px; // Extra Large (XL) - 1280px and above: This breakpoint is used for very large desktop screens.
+$sem-size-breakpoints-xxl: 1440px; // Extra Large (XXL) - Used for very large desktop screens.
+$sem-size-vertical-10: 4px;
+$sem-size-vertical-20: 8px;
+$sem-size-vertical-30: 12px;
+$sem-size-vertical-40: 16px;
+$sem-size-vertical-50: 20px;
+$sem-size-vertical-60: 24px;
+$sem-size-vertical-70: 28px;
+$sem-size-vertical-80: 32px;
+$sem-size-vertical-90: 40px;
+$sem-size-vertical-100: 48px;
+$sem-size-vertical-110: 64px;
+$sem-size-vertical-120: 96px;
+$sem-size-vertical-130: 128px;
+$sem-space-padding-5: 1px;
+$sem-space-padding-10: 2px;
+$sem-space-padding-15: 3px;
+$sem-space-padding-20: 4px;
+$sem-space-padding-30: 6px;
+$sem-space-padding-40: 8px;
+$sem-space-padding-45: 8px;
+$sem-space-padding-50: 10px;
+$sem-space-padding-60: 12px;
+$sem-space-padding-70: 16px;
+$sem-space-padding-80: 18px;
+$sem-space-padding-90: 20px;
+$sem-space-padding-100: 22px;
+$sem-space-padding-110: 24px;
+$sem-space-padding-120: 28px;
+$sem-space-padding-130: 32px;
+$sem-space-padding-140: 40px;
+$sem-space-padding-145: 40px;
+$sem-space-padding-150: 44px;
+$sem-space-padding-160: 48px;
+$sem-space-padding-170: 56px;
+$sem-space-padding-180: 64px;
+$sem-space-padding-190: 128px;
+$sem-space-gap-5: 0px;
+$sem-space-gap-10: 2px;
+$sem-space-gap-20: 4px;
+$sem-space-gap-30: 6px;
+$sem-space-gap-40: 8px;
+$sem-space-gap-60: 12px;
+$sem-space-gap-70: 16px;
+$sem-space-gap-80: 18px;
+$sem-space-gap-90: 20px;
+$sem-space-gap-100: 22px;
+$sem-space-gap-110: 24px;
+$sem-space-gap-120: 28px;
+$sem-space-gap-130: 32px;
+$sem-space-gap-140: 40px;
+$sem-space-gap-150: 44px;
+$sem-space-gap-160: 48px;
+$sem-space-gap-170: 56px;
+$sem-space-gap-180: 64px;
+$sem-space-gap-190: 128px;
+$sem-space-stack-10: 2px;
+$sem-space-stack-20: 4px;
+$sem-space-stack-30: 8px;
+$sem-space-stack-40: 12px;
+$sem-space-stack-50: 16px;
+$sem-space-stack-60: 18px;
+$sem-space-stack-70: 20px;
+$sem-space-stack-80: 22px;
+$sem-space-stack-90: 24px;
+$sem-space-stack-100: 28px;
+$sem-space-stack-110: 32px;
+$sem-space-stack-120: 36px;
+$sem-space-stack-130: 40px;
+$sem-space-stack-140: 44px;
+$sem-space-stack-150: 48px;
+$sem-space-stack-160: 56px;
+$sem-space-stack-170: 64px;
+$sem-space-stack-180: 72px;
+$sem-space-stack-190: 80px;
+$sem-space-stack-200: 96px;
+$sem-space-stack-210: 112px;
+$sem-space-stack-220: 128px;
+$sem-space-variant-gap-30: 8px;
+$sem-border-width-xxxxs: 0;
+$sem-border-width-xxxs: 1px; // Used: Alerts / 
+$sem-border-width-xxs: 4px; // Used: Alerts / 
+$sem-border-width-xs: 1px;
+$sem-border-width-s: 2px;
+$sem-border-width-l: 3px;
+$sem-border-width-xl: 4px;
+$sem-border-width-xxl: 8px;
+$sem-border-width-xxxl: 10px;
+$sem-border-width-m: 2px;
+$sem-border-radius-xxxxxxs: 2px;
+$sem-border-radius-xxxxxs: 8px;
+$sem-border-radius-xxxxs: 4px;
+$sem-border-radius-xxxs: 4px;
+$sem-border-radius-xxs: 4px;
+$sem-border-radius-xs: 4px;
+$sem-border-radius-s: 8px;
+$sem-border-radius-m: 16px;
+$sem-border-radius-l: 24px;
+$sem-border-radius-xl: 32px;
+$sem-border-radius-xxl: 1000px;
+$sem-border-radius-xxxl: 4px;
+$sem-border-radius-variant-s: 4px;
+$sem-border-radius-variant-m: 4px;
+$sem-border-radius-variant-l: 8px;
+$sem-color-gradient-border-02: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%); // indigo-gradient-1
+$sem-color-gradient-border-03: linear-gradient(53deg, #5514b4 0%, #ff80ff 100%); // dark: pink-gradient-1
+$sem-color-gradient-border-04: linear-gradient(90deg, #ff80ff 50%, #d666ed 100%); // dark: pink-gradient-2
+$sem-color-gradient-border-05: linear-gradient(244deg, #f200f5 0%, #1ec8e6 100%); // dark: pink-gradient-2
+$sem-color-gradient-border-01: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%); // turquoise-gradient
+$sem-color-gradient-bg-10: linear-gradient(53deg, #5514b4 0%, #ff80ff 100%); // dark: pink-gradient-1
+$sem-color-gradient-bg-11: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%); // indigo-gradient-1
+$sem-color-gradient-bg-09: linear-gradient(90deg, #ff80ff 50%, #d666ed 100%); // dark: pink-gradient-2
+$sem-color-gradient-bg-08: linear-gradient(90deg, #fff2f0 0%, #f5eefa 100%); // coral-gradient
+$sem-color-gradient-bg-05: linear-gradient(90deg, #f5eefa 0%, #eafcff 100%); // turquoise-gradient
+$sem-color-gradient-bg-06: linear-gradient(225deg, #5615b4 0%, #4665cd 100%); // turquoise-gradient
+$sem-color-gradient-bg-07: linear-gradient(90deg, #fcf9ff 0%, #f9f9ff 100%); // turquoise-gradient
+$sem-color-gradient-bg-01: linear-gradient(244deg, #f200f5 0%, #1ec8e6 100%);
+$sem-color-gradient-bg-02: linear-gradient(-45deg, #ff80ff 0%, #72d4e9 100%); // turquoise-gradient
+$sem-color-gradient-bg-03: linear-gradient(-44deg, #72d4e9 0%, #ff80ff 100%); // turquoise-gradient
+$sem-color-gradient-bg-04: linear-gradient(90deg, #f5eefa 0%, #eafcff 100%); // turquoise-gradient
+$sem-color-gradient-fg-01: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%); // turquoise-gradient
+$sem-color-gradient-tertiary-light-emphasis: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%); // turquoise-gradient
+$sem-color-gradient-tertiary-dark-emphasis: linear-gradient(90deg, #ff80ff 50%, #d666ed 100%); // turquoise-gradient
+$sem-color-status-border-light-error: #da020f;
+$sem-color-status-border-light-warning: #ffa200;
+$sem-color-status-border-light-success: #088003;
+$sem-color-status-border-light-general: #2a2a2a;
+$sem-color-status-border-dark-error: #fa9590;
+$sem-color-status-border-dark-warning: #ffc501;
+$sem-color-status-border-dark-success: #75c26c;
+$sem-color-status-border-dark-general: #f0f0f0;
+$sem-color-status-border-dark-error-subtle: #f91f14;
+$sem-color-status-border-dark-warning-subtle: #ffa200;
+$sem-color-status-border-dark-success-subtle: #088003;
+$sem-color-status-border-dark-error-minimal: #da020f;
+$sem-color-status-bg-light-error-strong: #da020f;
+$sem-color-status-bg-light-warning-strong: #ffa200;
+$sem-color-status-bg-light-error: #ffe9ec;
+$sem-color-status-bg-light-warning: #fef6de;
+$sem-color-status-bg-light-success: #e6f4e5;
+$sem-color-status-bg-light-success-copy: #e6f4e5;
+$sem-color-status-bg-light-general: #f7f7f7;
+$sem-color-status-bg-light-error-alt: #ffc8cb;
+$sem-color-status-bg-light-error-emphasis: #ffc8cb;
+$sem-color-status-bg-light-warning-alt: #ffa200;
+$sem-color-status-bg-light-success-alt: #088003;
+$sem-color-status-bg-light-general-alt: #2a2a2a;
+$sem-color-status-bg-light-error-subtle: #da020f;
+$sem-color-status-bg-dark-error-strong: #fa9590;
+$sem-color-status-bg-dark-warning-strong: #ffc501;
+$sem-color-status-bg-dark-error: #401313;
+$sem-color-status-bg-dark-error-subtle: #ab0000;
+$sem-color-status-bg-dark-warning: #332700;
+$sem-color-status-bg-dark-success: #233A20;
+$sem-color-status-bg-dark-general: #2a2a2a;
+$sem-color-status-bg-dark-general-alt: #f0f0f0;
+$sem-color-status-bg-dark-default: #ffffff;
+$sem-color-status-fg-light-error: #da020f;
+$sem-color-status-fg-light-warning: #ffa200;
+$sem-color-status-fg-light-success: #088003;
+$sem-color-status-fg-light-general: #2a2a2a;
+$sem-color-status-fg-light-warning-alt: #ffa200;
+$sem-color-status-fg-dark-error: #fa9590;
+$sem-color-status-fg-dark-warning: #ffc501;
+$sem-color-status-fg-dark-success: #75c26c;
+$sem-color-status-fg-dark-general: #f0f0f0;
+$sem-color-status-fg-dark-error-subtle: #f91f14;
+$sem-color-status-fg-dark-success-subtle: #088003;
+$sem-color-status-fg-dark-warning-subtle: #2a2a2a;
+$sem-color-status-fg-dark-error-alt: #da020f;
+$sem-color-status-fg-dark-warning-alt: #2a2a2a;
+$sem-color-border-primary-light-default: #5514b4; // Brand indigo
+$sem-color-border-primary-light-subtle: #3f187f;
+$sem-color-border-primary-light-strong: #3f187f; // Brand indigo
+$sem-color-border-primary-light-emphasis: #8449cc; // Brand indigo
+$sem-color-border-primary-light-emphasis-subtle: #996cd5; // Brand indigo
+$sem-color-border-primary-light-minimal: #d4bfec;
+$sem-color-border-primary-light-minimal-alt: #2a1c4a;
+$sem-color-border-primary-dark-default: #ff80ff;
+$sem-color-border-primary-dark-subtle: #ffe4ff;
+$sem-color-border-primary-dark-strong: #ffb7fe;
+$sem-color-border-primary-dark-emphasis: #fd51ff;
+$sem-color-border-primary-dark-minimal: #7e0091;
+$sem-color-border-secondary-light-default: #2a2a2a;
+$sem-color-border-secondary-light-subtle: #949494;
+$sem-color-border-secondary-light-strong: #6b6b6b;
+$sem-color-border-secondary-light-minimal: #c8c8c8;
+$sem-color-border-secondary-light-alt: #ffffff;
+$sem-color-border-secondary-light-default-alt: #2a2a2a;
+$sem-color-border-secondary-light-muted: #c8c8c8;
+$sem-color-border-secondary-dark-default: #ffffff;
+$sem-color-border-secondary-dark-strong: #c8c8c8;
+$sem-color-border-secondary-dark-subtle: #808080;
+$sem-color-border-secondary-dark-minimal: #6b6b6b;
+$sem-color-border-secondary-dark-alt: #2a2a2a;
+$sem-color-border-secondary-dark-muted: #6b6b6b;
+$sem-color-border-tertiary-light-default: #5514b4; // Used: Progress-stepper / 
+$sem-color-border-tertiary-dark-default: #996cd5;
+$sem-color-bg-primary-light-default: #5514b4; // Brand indigo
+$sem-color-bg-primary-light-default-alt: #5514b4; // Brand indigo
+$sem-color-bg-primary-light-default-strong: #5514b4; // Brand indigo
+$sem-color-bg-primary-light-subtle: #3f187f; // Brand indigo
+$sem-color-bg-primary-light-strong: #3f187f; // Brand indigo
+$sem-color-bg-primary-light-emphasis: #8449cc; // Brand indigo
+$sem-color-bg-primary-light-minimal: #f8efff; // Brand indigo
+$sem-color-bg-primary-light-subtle-alt: #efe5f7; // Brand indigo
+$sem-color-bg-primary-light-minimal-alt: #2a1c4a;
+$sem-color-bg-primary-dark-default: #ff80ff;
+$sem-color-bg-primary-dark-strong: #ffb7fe;
+$sem-color-bg-primary-dark-subtle: #ffe4ff;
+$sem-color-bg-primary-dark-emphasis: #fd51ff;
+$sem-color-bg-primary-dark-minimal: #fbf1f8;
+$sem-color-bg-primary-dark-minimal-alt: #fbf1f8;
+$sem-color-bg-secondary-light-default: #ffffff;
+$sem-color-bg-secondary-light-default-alt: #f7f7f7;
+$sem-color-bg-secondary-light-subtle: #949494;
+$sem-color-bg-secondary-light-strong: #6b6b6b;
+$sem-color-bg-secondary-light-minimal: #c8c8c8;
+$sem-color-bg-secondary-light-muted: #f0f0f0;
+$sem-color-bg-secondary-light-minimal-alt: #ffffff;
+$sem-color-bg-secondary-light-muted-alt: #e3e3e3;
+$sem-color-bg-secondary-light-muted-subtle: #ffffff;
+$sem-color-bg-secondary-light-alt: #2a2a2a;
+$sem-color-bg-secondary-light-strong-alt: #000000;
+$sem-color-bg-secondary-dark-default: #000000;
+$sem-color-bg-secondary-dark-strong: #d9d9d9;
+$sem-color-bg-secondary-dark-alt: #ffffff;
+$sem-color-bg-secondary-dark-strong-alt: #ffffff;
+$sem-color-bg-secondary-dark-subtle: #949494;
+$sem-color-bg-secondary-dark-minimal: #6b6b6b;
+$sem-color-bg-secondary-dark-minimal-alt: #000000;
+$sem-color-bg-secondary-dark-muted: #434343;
+$sem-color-bg-secondary-dark-muted-alt: #2a2a2a;
+$sem-color-bg-tertiary-warning-default: #da020f;
+$sem-color-bg-tertiary-warning-subtle: #c90104;
+$sem-color-bg-tertiary-warning-strong: #ab0000;
+$sem-color-bg-tertiary-status-light-general: #2a2a2a;
+$sem-color-bg-tertiary-status-light-error: #2a2a2a;
+$sem-color-bg-tertiary-status-light-warning: #2a2a2a;
+$sem-color-bg-tertiary-status-light-success: #2a2a2a;
+$sem-color-bg-tertiary-status-light-error-alt: #da020f; // Used: progress-bar / 
+$sem-color-bg-tertiary-status-light-success-alt: #088003; // Used: progress-bar / 
+$sem-color-fg-primary-light-default: #5514b4;
+$sem-color-fg-primary-light-subtle: #3f187f;
+$sem-color-fg-primary-light-strong: #3f187f;
+$sem-color-fg-primary-light-emphasis: #8449cc; // Brand indigo
+$sem-color-fg-primary-light-vibrant: #f200f5; // Brand indigo
+$sem-color-fg-primary-light-minimal: #2a1c4a;
+$sem-color-fg-primary-light-default-alt: #5514b4;
+$sem-color-fg-primary-light-subtle-alt: #ffffff;
+$sem-color-fg-primary-dark-default: #ff80ff;
+$sem-color-fg-primary-dark-subtle: #ffe4ff;
+$sem-color-fg-primary-dark-strong: #ffb7fe;
+$sem-color-fg-primary-dark-emphasis: #fd51ff;
+$sem-color-fg-primary-dark-vibrant: #ff80ff; // Brand indigo
+$sem-color-fg-secondary-light-default: #2a2a2a;
+$sem-color-fg-secondary-light-subtle: #949494;
+$sem-color-fg-secondary-light-strong: #6b6b6b;
+$sem-color-fg-secondary-light-minimal: #c8c8c8;
+$sem-color-fg-secondary-light-muted: #434343;
+$sem-color-fg-secondary-light-alt: #ffffff;
+$sem-color-fg-secondary-light-default-alt: #ffffff;
+$sem-color-fg-secondary-light-subtle-alt: #949494;
+$sem-color-fg-secondary-light-minimal-alt: #ffffff;
+$sem-color-fg-secondary-light-strong-alt: #000000;
+$sem-color-fg-secondary-light-muted-alt: #6b6b6b;
+$sem-color-fg-secondary-light-strong-subtle: #ffffff;
+$sem-color-fg-secondary-dark-default: #ffffff;
+$sem-color-fg-secondary-dark-muted: #e3e3e3;
+$sem-color-fg-secondary-dark-strong: #c8c8c8;
+$sem-color-fg-secondary-dark-subtle: #949494;
+$sem-color-fg-secondary-dark-subtle-alt: #949494;
+$sem-color-fg-secondary-dark-minimal: #6b6b6b;
+$sem-color-fg-secondary-dark-minimal-alt: #000000;
+$sem-color-fg-secondary-dark-alt: #2a2a2a;
+$sem-color-text-status-light-default: #ffffff;
+$sem-color-text-status-light-error: #ffffff;
+$sem-color-text-status-light-warning: #2a2a2a;
+$sem-color-text-status-light-success: #ffffff;
+$sem-color-text-status-dark-default: #2a2a2a;
+$sem-color-text-status-dark-error: #fa9590;
+$sem-color-text-primary-light-default: #5514b4;
+$sem-color-text-primary-light-hover: #2a1c4a;
+$sem-color-text-primary-light-default-alt: #ffffff;
+$sem-color-text-primary-light-default-strong: #ffffff;
+$sem-color-text-primary-light-emphasis: #ff80ff;
+$sem-color-text-primary-light-subtle: #6b6b6b;
+$sem-color-text-primary-light-strong: #2a2a2a;
+$sem-color-text-primary-dark-default: #ffffff;
+$sem-color-text-primary-dark-default-alt: #efe5f7;
+$sem-color-text-primary-dark-strong: #ffffff;
+$sem-color-text-primary-dark-strong-alt: #ffe4ff;
+$sem-color-text-secondary-light-default: #5514b4;
+$sem-color-text-secondary-light-hover: #2a1c4a;
+$sem-color-text-secondary-light-default-alt: #ffffff;
+$sem-color-text-secondary-light-default-strong: #ffffff;
+$sem-color-text-secondary-light-emphasis: #ff80ff;
+$sem-color-text-secondary-light-subtle: #6b6b6b;
+$sem-color-text-secondary-light-strong: #2a2a2a;
+$sem-color-text-secondary-dark-default: #ffffff;
+$sem-color-text-secondary-dark-default-alt: #efe5f7;
+$sem-color-text-secondary-dark-strong: #ffffff;
+$sem-color-text-secondary-dark-strong-alt: #ffe4ff;
+$sem-color-overlay-flat-default: rgba(0,0,0,0.5);
+$sem-color-overlay-flat-light: rgba(255,255,255,0.5);
+$sem-color-overlay-flat-brand: rgba(85,20,180,0.5);
+$sem-inner-shadow-01: inset 0 1px 0 0 #c8c8c8;
+$sem-inner-shadow-02: inset 0 1px 0 0 #c8c8c8;
+$sem-box-shadow-01: 0 2px 6px 2px rgba( 0, 0, 0 , 0.25);
+$sem-box-shadow-02: -8px 8px 36px 0 rgba( 0, 0, 0 , 0.25);
+$sem-box-shadow-03: 0 2px 6px 2px rgba( 0, 0, 0 , 0.9 );
+$sem-box-shadow-04: -8px 8px 36px 0 rgba( 0, 0, 0 , 0.9);
+$sem-box-shadow-05: 0 0 0 2px #8449cc;
+$sem-box-shadow-06: 0 0 0 2px #fd51ff;
+$sem-underline: underline;
+$sem-line-through: line-through;
+$sem-scale-modifier-1: 0;
+$sem-scale-modifier-2: 0;
+$sem-scale-modifier-3: 0;
+$sem-scale-modifier-4: 0;
+$select-size-s: 32px;
+$select-size-m: 44px;
+$select-size-l: 64px;
+$select-padding-s: 8px;
+$select-padding-m: 12px;
+$select-padding-l: 16px;
+$select-padding-xl: 28px;
+$select-border-radius-s: 4px;
+$select-border-radius-m: 4px;
+$select-border-radius-l: 4px;
+$select-border-weight-s: 1px;
+$select-border-weight-m: 2px;
+$select-border-weight-l: 4px;
+$select-gap-s: 4px;
+$select-gap-m: 8px;
+$select-gap-l: 12px;
+$select-size-icon-s: 16px;
+$select-size-icon-m: 20px;
+$select-size-icon-l: 24px;
+$select-colors-light-bg-default: #ffffff;
+$select-colors-light-bg-hover: #ffffff;
+$select-colors-light-bg-disabled: #f0f0f0;
+$select-colors-light-bg-error: #ffe9ec;
+$select-colors-light-bg-hover-alt: #ffffff;
+$select-colors-light-bg-selected: #efe5f7;
+$select-colors-light-border-default: #2a2a2a;
+$select-colors-light-border-hover: #3f187f;
+$select-colors-light-border-focus: #8449cc;
+$select-colors-light-border-disabled: #949494;
+$select-colors-light-border-error: #da020f;
+$select-colors-light-border-subtle: #c8c8c8;
+$select-colors-light-fg-default: #2a2a2a;
+$select-colors-light-fg-disabled: #6b6b6b;
+$select-colors-light-fg-subtle: #c8c8c8;
+$select-colors-light-fg-error: #da020f;
+$select-colors-light-text-default: #2a2a2a;
+$select-colors-light-text-default-alt: #ffffff;
+$select-colors-light-text-disabled: #6b6b6b;
+$select-colors-light-text-error: #da020f;
+$select-colors-dark-bg-default: #000000;
+$select-colors-dark-bg-hover: #000000;
+$select-colors-dark-bg-disabled: #434343;
+$select-colors-dark-bg-error: #401313;
+$select-colors-dark-bg-hover-alt: #ffb7fe;
+$select-colors-dark-bg-selected: #fbf1f8;
+$select-colors-dark-border-strong: #ffffff;
+$select-colors-dark-border-hover: #ffb7fe;
+$select-colors-dark-border-focus: #fd51ff;
+$select-colors-dark-border-disabled: #808080;
+$select-colors-dark-border-error: #fa9590;
+$select-colors-dark-border-subtle: #6b6b6b;
+$select-colors-dark-text-default: #ffffff;
+$select-colors-dark-text-disabled: #c8c8c8;
+$select-colors-dark-text-error: #fa9590;
+$select-colors-dark-fg-default: #ffffff;
+$select-colors-dark-fg-disabled: #c8c8c8;
+$select-colors-dark-fg-subtle: #6b6b6b;
+$select-colors-dark-fg-error: #fa9590;
+$select-border-radius-test-s: 0px;
+$select-border-radius-test-m: 0px;
+$select-border-radius-test-l: 0px;
+$checkbox-size-s: 24px;
+$checkbox-size-l: 36px;
+$checkbox-padding-s: 2px;
+$checkbox-gap-s: 8px;
+$checkbox-gap-m: 12px;
+$checkbox-border-radius-xs: 4px;
+$checkbox-border-radius-s: 4px;
+$checkbox-border-weight-s: 2px;
+$checkbox-size-icon-s: 20px;
+$checkbox-size-icon-m: 32px;
+$checkbox-colors-light-bg-default: #5514b4;
+$checkbox-colors-light-bg-default-alt: #ffffff;
+$checkbox-colors-light-bg-disabled: #f0f0f0;
+$checkbox-colors-light-bg-error: #ffe9ec;
+$checkbox-colors-light-fg-default: #ffffff;
+$checkbox-colors-light-fg-disabled: #6b6b6b;
+$checkbox-colors-light-border-default: #2a2a2a;
+$checkbox-colors-light-border-disabled: #949494;
+$checkbox-colors-light-border-error: #da020f;
+$checkbox-colors-light-text-default: #2a2a2a;
+$checkbox-colors-light-text-disabled: #6b6b6b;
+$checkbox-colors-dark-bg-default: #ff80ff;
+$checkbox-colors-dark-bg-default-alt: #000000;
+$checkbox-colors-dark-bg-disabled: #434343;
+$checkbox-colors-dark-bg-error: #401313;
+$checkbox-colors-dark-fg-default: #2a2a2a;
+$checkbox-colors-dark-fg-disabled: #c8c8c8;
+$checkbox-colors-dark-border-default: #ffffff;
+$checkbox-colors-dark-border-disabled: #808080;
+$checkbox-colors-dark-border-error: #fa9590;
+$checkbox-colors-dark-text-default: #ffffff;
+$checkbox-colors-dark-text-disabled: #c8c8c8;
+$radio-size-s: 12px;
+$radio-size-m: 20px;
+$radio-size-l: 24px;
+$radio-size-xl: 34px;
+$radio-gap-s: 8px;
+$radio-gap-m: 12px;
+$radio-border-weight-s: 2px;
+$radio-colors-light-bg-default: #ffffff;
+$radio-colors-light-bg-disabled: #f0f0f0;
+$radio-colors-light-border-default: #2a2a2a;
+$radio-colors-light-border-disabled: #949494;
+$radio-colors-light-fg-default: #5514b4;
+$radio-colors-light-fg-disabled: #6b6b6b;
+$radio-colors-light-text-default: #2a2a2a;
+$radio-colors-light-text-disabled: #6b6b6b;
+$radio-colors-dark-bg-default: #000000;
+$radio-colors-dark-bg-disabled: #434343;
+$radio-colors-dark-border-default: #ffffff;
+$radio-colors-dark-border-disabled: #808080;
+$radio-colors-dark-fg-default: #ff80ff;
+$radio-colors-dark-fg-disabled: #c8c8c8;
+$radio-colors-dark-text-default: #ffffff;
+$radio-colors-dark-text-disabled: #c8c8c8;
+$date-picker-size-s: 32px;
+$date-picker-size-m: 34px;
+$date-picker-size-l: 36px;
+$date-picker-size-xl: 40px;
+$date-picker-size-xxl: 44px;
+$date-picker-size-xxxl: 48px;
+$date-picker-size-xxxxl: 64px;
+$date-picker-padding-xxs: 2px;
+$date-picker-padding-xs: 3px;
+$date-picker-padding-s: 4px;
+$date-picker-padding-m: 8px;
+$date-picker-padding-l: 12px;
+$date-picker-padding-xl: 16px;
+$date-picker-border-radius-s: 4px;
+$date-picker-border-radius-m: 4px;
+$date-picker-border-radius-l: 4px;
+$date-picker-border-radius-xl: 1000px;
+$date-picker-border-weight-s: 1px;
+$date-picker-border-weight-m: 2px;
+$date-picker-border-weight-l: 4px;
+$date-picker-colors-light-bg-default-alt: #ffffff;
+$date-picker-colors-light-bg-hover: #3f187f;
+$date-picker-colors-light-bg-selected: #2a1c4a;
+$date-picker-colors-light-bg-pressed: #2a1c4a;
+$date-picker-colors-light-bg-disabled: #f0f0f0;
+$date-picker-colors-light-bg-error: #ffe9ec;
+$date-picker-colors-light-bg-subtle: #efe5f7;
+$date-picker-colors-light-bg-hover-alt: #f0f0f0;
+$date-picker-colors-light-border-hover: #3f187f;
+$date-picker-colors-light-border-focus: #8449cc;
+$date-picker-colors-light-border-selected: #2a1c4a;
+$date-picker-colors-light-border-disabled: #949494;
+$date-picker-colors-light-border-error: #da020f;
+$date-picker-colors-light-border-strong: #2a2a2a;
+$date-picker-colors-light-fg-default-alt: #ffffff;
+$date-picker-colors-light-fg-hover: #3f187f;
+$date-picker-colors-light-fg-strong: #2a2a2a;
+$date-picker-colors-light-fg-disabled: #6b6b6b;
+$date-picker-colors-light-fg-error: #da020f;
+$date-picker-colors-light-text-default: #5514b4;
+$date-picker-colors-light-text-default-alt: #ffffff;
+$date-picker-colors-light-text-strong: #2a2a2a;
+$date-picker-colors-light-text-disabled: #6b6b6b;
+$date-picker-colors-light-text-error: #da020f;
+$date-picker-colors-light-text-hint: #6b6b6b;
+$date-picker-gap-xs: 4px;
+$date-picker-gap-s: 8px;
+$date-picker-gap-m: 12px;
+$date-picker-gap-l: 40px;
+$date-picker-size-icon-s: 24px;
+$date-picker-size-icon-m: 32px;
+$date-picker-size-icon-l: 40px;
+$switch-size-s: 24px;
+$switch-size-m: 32px;
+$switch-border-weight-s: 2px;
+$switch-colors-light-bg-default: #5514b4;
+$switch-colors-light-bg-disabled: #f0f0f0;
+$switch-colors-light-bg-strong: #ffffff;
+$switch-colors-light-bg-subtle: #f0f0f0;
+$switch-colors-light-border-default: #5514b4;
+$switch-colors-light-border-disabled: #949494;
+$switch-colors-light-border-strong: #2a2a2a;
+$switch-colors-light-fg-default: #5514b4;
+$switch-colors-light-fg-disabled: #6b6b6b;
+$switch-colors-light-text-default: #2a2a2a;
+$switch-colors-light-text-disabled: #6b6b6b;
+$switch-colors-dark-bg-default: #ff80ff;
+$switch-colors-dark-bg-disabled: #434343;
+$switch-colors-dark-bg-strong: #000000;
+$switch-colors-dark-bg-subtle: #2a2a2a;
+$switch-colors-dark-border-default: #ff80ff;
+$switch-colors-dark-border-disabled: #808080;
+$switch-colors-dark-border-strong: #ffffff;
+$switch-colors-dark-fg-default: #ff80ff;
+$switch-colors-dark-fg-disabled: #c8c8c8;
+$switch-colors-dark-text-default: #ffffff;
+$switch-colors-dark-text-disabled: #c8c8c8;
+$switch-border-radius-s: 1000px;
+$switch-box-shadow-01: 0 0 0 2px #8449cc;
+$switch-box-shadow-02: 0 0 0 2px #fd51ff;
+$switch-gap-s: 8px;
+$switch-gap-m: 12px;
+$textinput-size-s: 32px;
+$textinput-size-m: 44px;
+$textinput-size-l: 64px;
+$textinput-border-radius-s: 4px;
+$textinput-border-radius-m: 4px;
+$textinput-border-radius-l: 4px;
+$textinput-padding-s: 8px;
+$textinput-padding-m: 12px;
+$textinput-padding-l: 16px;
+$textinput-gap-s: 4px;
+$textinput-gap-m: 12px;
+$textinput-border-weight-s: 1px;
+$textinput-border-weight-m: 2px;
+$textinput-border-weight-l: 4px;
+$textinput-size-icon-m: 24px;
+$textinput-colors-light-bg-default: #ffffff;
+$textinput-colors-light-bg-hover: #ffffff;
+$textinput-colors-light-bg-disabled: #f0f0f0;
+$textinput-colors-light-bg-error: #ffe9ec;
+$textinput-colors-light-border-default: #2a2a2a;
+$textinput-colors-light-border-hover: #3f187f;
+$textinput-colors-light-border-focus: #8449cc;
+$textinput-colors-light-border-disabled: #949494;
+$textinput-colors-light-border-error: #da020f;
+$textinput-colors-light-text-default: #2a2a2a;
+$textinput-colors-light-text-disabled: #6b6b6b;
+$textinput-colors-light-text-error: #da020f;
+$textinput-colors-light-fg-default: #2a2a2a;
+$textinput-colors-light-fg-error: #da020f;
+$textinput-colors-dark-bg-default: #000000;
+$textinput-colors-dark-bg-hover: #000000;
+$textinput-colors-dark-bg-disabled: #434343;
+$textinput-colors-dark-bg-error: #401313;
+$textinput-colors-dark-border-default: #ffffff;
+$textinput-colors-dark-border-hover: #ffb7fe;
+$textinput-colors-dark-border-focus: #fd51ff;
+$textinput-colors-dark-border-disabled: #808080;
+$textinput-colors-dark-border-error: #fa9590;
+$textinput-colors-dark-text-default: #ffffff;
+$textinput-colors-dark-text-disabled: #c8c8c8;
+$textinput-colors-dark-text-error: #fa9590;
+$textinput-colors-dark-fg-default: #ffffff;
+$textinput-colors-dark-fg-error: #fa9590;
+$textarea-padding-s: 10px;
+$textarea-padding-m: 12px;
+$textarea-size-icon-s: 16px;
+$textarea-border-radius-s: 4px;
+$textarea-border-weight-s: 1px;
+$textarea-border-weight-m: 2px;
+$textarea-border-weight-l: 4px;
+$textarea-gap-s: 4px;
+$textarea-gap-m: 12px;
+$textarea-colors-light-bg-default: #ffffff;
+$textarea-colors-light-bg-hover: #ffffff;
+$textarea-colors-light-bg-disabled: #f0f0f0;
+$textarea-colors-light-bg-error: #ffe9ec;
+$textarea-colors-light-border-default: #2a2a2a;
+$textarea-colors-light-border-hover: #3f187f;
+$textarea-colors-light-border-focus: #8449cc;
+$textarea-colors-light-border-error: #da020f;
+$textarea-colors-light-border-disabled: #949494;
+$textarea-colors-light-fg-default: #2a2a2a;
+$textarea-colors-light-fg-disabled: #6b6b6b;
+$textarea-colors-light-fg-error: #da020f;
+$textarea-colors-light-text-default: #2a2a2a;
+$textarea-colors-light-text-disabled: #6b6b6b;
+$textarea-colors-light-text-error: #da020f;
+$textarea-colors-dark-fg-default: #ffffff;
+$textarea-colors-dark-fg-disabled: #c8c8c8;
+$textarea-colors-dark-fg-error: #fa9590;
+$textarea-colors-dark-bg-default: #000000;
+$textarea-colors-dark-bg-hover: #000000;
+$textarea-colors-dark-bg-disabled: #434343;
+$textarea-colors-dark-bg-error: #401313;
+$textarea-colors-dark-border-strong: #ffffff;
+$textarea-colors-dark-border-hover: #ffb7fe;
+$textarea-colors-dark-border-focus: #fd51ff;
+$textarea-colors-dark-border-disabled: #808080;
+$textarea-colors-dark-border-error: #fa9590;
+$textarea-colors-dark-text-strong: #ffffff;
+$textarea-colors-dark-text-disabled: #c8c8c8;
+$textarea-colors-dark-text-error: #fa9590;
+$backtotop-size-m: 48px;
+$backtotop-size-icon-m: 48px;
+$backtotop-padding-m: 22px;
+$backtotop-border-radius-m: 1000px;
+$backtotop-border-weight-m: 2px;
+$backtotop-colors-light-bg-default: #5514b4;
+$backtotop-colors-light-bg-hover: #3f187f;
+$backtotop-colors-light-bg-selected: #2a1c4a;
+$backtotop-colors-light-bg-strong: #ffffff;
+$backtotop-colors-light-bg-subtle: #f0f0f0;
+$backtotop-colors-light-border-default: #5514b4;
+$backtotop-colors-light-border-hover: #3f187f;
+$backtotop-colors-light-border-selected: #2a1c4a;
+$backtotop-colors-light-border-strong: #ffffff;
+$backtotop-colors-light-border-focus: #8449cc;
+$backtotop-colors-light-fg-default: #5514b4;
+$backtotop-colors-light-fg-default-alt: #ffffff;
+$backtotop-colors-light-text-default: #5514b4;
+$backtotop-colors-light-text-default-alt: #ffffff;
+$backtotop-colors-dark-bg-default: #ff80ff;
+$backtotop-colors-dark-bg-hover: #ffb7fe;
+$backtotop-colors-dark-bg-selected: #fbf1f8;
+$backtotop-colors-dark-bg-strong: #000000;
+$backtotop-colors-dark-bg-subtle: #2a2a2a;
+$backtotop-colors-dark-border-default: #ff80ff;
+$backtotop-colors-dark-border-hover: #ffb7fe;
+$backtotop-colors-dark-border-selected: #fbf1f8;
+$backtotop-colors-dark-border-strong: #2a2a2a;
+$backtotop-colors-dark-border-focus: #fd51ff;
+$backtotop-colors-dark-fg-default: #2a2a2a;
+$backtotop-colors-dark-fg-default-alt: #ffffff;
+$backtotop-colors-dark-text-default: #2a2a2a;
+$backtotop-colors-dark-text-default-alt: #ffffff;
+$tabs-border-weight-s: 0;
+$tabs-border-weight-m: 1px;
+$tabs-border-weight-l: 2px;
+$tabs-border-radius-s: 8px;
+$tabs-padding-s: 4px;
+$tabs-padding-m: 12px;
+$tabs-padding-l: 16px;
+$tabs-padding-xl: 24px;
+$tabs-gap-s: 4px;
+$tabs-gap-m: 6px;
+$tabs-gap-l: 12px;
+$tabs-size-s: 42px;
+$tabs-size-m: 48px;
+$tabs-size-icon-s: 40px;
+$tabs-colors-light-bg-default: #ffffff;
+$tabs-colors-light-bg-subtle: #f0f0f0;
+$tabs-colors-light-bg-error: #ffc8cb;
+$tabs-colors-light-border-subtle: #c8c8c8;
+$tabs-colors-light-border-selected: #2a1c4a;
+$tabs-colors-light-border-focus: #8449cc;
+$tabs-colors-light-border-error: #da020f;
+$tabs-colors-light-fg-default: #5514b4;
+$tabs-colors-light-fg-hover: #3f187f;
+$tabs-colors-light-fg-selected: #2a1c4a;
+$tabs-colors-light-text-default: #5514b4;
+$tabs-colors-light-text-hover: #3f187f;
+$tabs-colors-light-text-selected: #2a1c4a;
+$tabs-colors-light-text-strong: #2a2a2a;
+$tabs-colors-dark-bg-default: #000000;
+$tabs-colors-dark-bg-subtle: #2a2a2a;
+$tabs-colors-dark-bg-error: #ab0000;
+$tabs-colors-dark-border-subtle: #6b6b6b;
+$tabs-colors-dark-border-selected: #fbf1f8;
+$tabs-colors-dark-border-focus: #fd51ff;
+$tabs-colors-dark-border-error: #da020f;
+$tabs-colors-dark-fg-default: #ff80ff;
+$tabs-colors-dark-fg-hover: #ffb7fe;
+$tabs-colors-dark-fg-selected: #fbf1f8;
+$tabs-colors-dark-fg-strong: #ffffff;
+$tabs-colors-dark-text-default: #ffffff;
+$tabs-colors-dark-text-hover: #ffb7fe;
+$tabs-colors-dark-text-selected: #fbf1f8;
+$tabs-colors-dark-text-strong: #ffffff;
+$pagination-size-m: 32px;
+$pagination-padding-s: 8px;
+$pagination-padding-m: 12px;
+$pagination-border-radius-m: 1000px;
+$pagination-border-weight-s: 2px;
+$pagination-colors-light-bg-hover: #3f187f;
+$pagination-colors-light-bg-selected: #2a1c4a;
+$pagination-colors-light-bg-pressed: #2a1c4a;
+$pagination-colors-light-bg-subtle: #c8c8c8;
+$pagination-colors-light-border-focus: #8449cc;
+$pagination-colors-light-text-default: #ffffff;
+$pagination-colors-light-text-strong: #2a2a2a;
+$pagination-colors-light-fg-default: #5514b4;
+$pagination-colors-light-fg-default-alt: #ffffff;
+$pagination-colors-dark-bg-hover: #ffb7fe;
+$pagination-colors-dark-bg-selected: #fbf1f8;
+$pagination-colors-dark-bg-pressed: #fbf1f8;
+$pagination-colors-dark-border-focus: #fd51ff;
+$pagination-colors-dark-text-default: #2a2a2a;
+$pagination-colors-dark-text-strong: #ffffff;
+$pagination-colors-dark-fg-default: #ff80ff;
+$pagination-colors-dark-fg-default-alt: #2a2a2a;
+$pagination-size-icon-m: 32px;
+$pagination-gap-s: 4px;
+$pagination-gap-m: 16px;
+$breadcrumb-size-icon-s: 12px;
+$breadcrumb-colors-light-fg-strong: #2a2a2a;
+$breadcrumb-colors-light-text-default: #5514b4;
+$breadcrumb-colors-light-text-hover: #3f187f;
+$breadcrumb-colors-light-text-strong: #2a2a2a;
+$breadcrumb-colors-dark-fg-strong: #ffffff;
+$breadcrumb-colors-dark-text-default: #ff80ff;
+$breadcrumb-colors-dark-text-hover: #ffb7fe;
+$breadcrumb-colors-dark-text-strong: #ffffff;
+$breadcrumb-gap-xs: 6px;
+$breadcrumb-gap-s: 8px;
+$box-padding-s: 16px;
+$box-border-radius-s: 8px;
+$box-border-weight-xs: 1px;
+$box-border-weight-s: 2px;
+$box-colors-light-bg-default: #ffffff;
+$box-colors-light-bg-subtle: #f0f0f0;
+$box-colors-light-bg-error-subtle: #ffc8cb;
+$box-colors-light-bg-minimal: #f7f7f7;
+$box-colors-light-bg-error: #da020f;
+$box-colors-light-fg-strong: #2a2a2a;
+$box-colors-light-border-subtle: #c8c8c8;
+$box-colors-light-border-error: #da020f;
+$box-colors-light-text-strong: #2a2a2a;
+$box-colors-dark-bg-default: #000000;
+$box-colors-dark-bg-subtle: #434343;
+$box-colors-dark-bg-minimal: #2a2a2a;
+$box-colors-dark-bg-default-alt: #5514b4;
+$box-colors-dark-border-subtle: #6b6b6b;
+$box-colors-variant-light-bg-default-01: linear-gradient(90deg, #fff2f0 0%, #f5eefa 100%); // coral-gradient
+$box-colors-variant-light-bg-default-02: linear-gradient(90deg, #f5eefa 0%, #eafcff 100%); // turquoise-gradient
+$box-colors-variant-dark-bg-default-01: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%); // Brand gradient (light)
+$disclosure-mini-padding-s: 28px;
+$disclosure-mini-size-icon-s: 16px;
+$disclosure-mini-gap-s: 8px;
+$disclosure-mini-gap-m: 12px;
+$disclosure-mini-colors-light-fg-default: #5514b4;
+$disclosure-mini-colors-light-text-default: #5514b4;
+$disclosure-mini-colors-light-text-strong: #2a2a2a;
+$disclosure-mini-colors-dark-fg-default: #ff80ff;
+$disclosure-mini-colors-dark-text-default: #ff80ff;
+$disclosure-mini-colors-dark-text-strong: #ffffff;
+$disclosure-padding-s: 16px;
+$disclosure-gap-s: 20px;
+$disclosure-size-s: 58px;
+$disclosure-border-weight-s: 1px;
+$disclosure-size-icon-s: 20px;
+$disclosure-colors-light-bg-hover: #f0f0f0;
+$disclosure-colors-light-border-subtle: #c8c8c8;
+$disclosure-colors-light-fg-default: #5514b4;
+$disclosure-colors-light-fg-hover: #3f187f;
+$disclosure-colors-light-text-default: #5514b4;
+$disclosure-colors-light-text-hover: #3f187f;
+$disclosure-colors-dark-bg-hover: #2a2a2a;
+$disclosure-colors-dark-border-subtle: #6b6b6b;
+$disclosure-colors-dark-fg-default: #ff80ff;
+$disclosure-colors-dark-fg-hover: #ffb7fe;
+$disclosure-colors-dark-text-default: #ff80ff;
+$disclosure-colors-dark-text-hover: #ffb7fe;
+$avatar-size-s: 32px;
+$avatar-size-m: 48px;
+$avatar-size-l: 64px;
+$avatar-size-xl: 80px;
+$avatar-size-icon-s: 16px;
+$avatar-size-icon-m: 24px;
+$avatar-size-icon-l: 32px;
+$avatar-size-icon-xl: 40px;
+$avatar-border-weight-s: 1px;
+$avatar-colors-light-bg-default: #5514b4;
+$avatar-colors-light-fg-default-alt: #ffffff;
+$avatar-colors-light-text-default-alt: #ffffff;
+$modal-size-s: 288px;
+$modal-size-m: 384px;
+$modal-size-l: 472px;
+$modal-size-xl: 591px;
+$modal-size-xxl: 800px;
+$modal-size-icon-s: 32px;
+$modal-padding-m: 24px;
+$modal-gap-s: 8px;
+$modal-gap-m: 20px;
+$modal-border-radius-s: 8px;
+$modal-colors-light-bg-default: #ffffff;
+$modal-colors-light-text-default: #2a2a2a;
+$modal-colors-light-fg-default: #2a2a2a;
+$overlay-colors-overlay-default: rgba(0,0,0,0.5);
+$stepper-size-s: 8px;
+$stepper-size-m: 14px;
+$stepper-size-l: 16px;
+$stepper-size-xl: 24px;
+$stepper-size-icon-s: 16px;
+$stepper-size-icon-l: 24px;
+$stepper-padding-s: 16px;
+$stepper-padding-m: 24px;
+$stepper-gap-s: 16px;
+$stepper-gap-m: 24px;
+$stepper-colors-light-bg-default: #5514b4;
+$stepper-colors-light-bg-subtle: #c8c8c8;
+$stepper-colors-light-bg-error: #da020f;
+$stepper-colors-light-bg-warning: #ffa200;
+$stepper-colors-light-bg-error-subtle: #ffe9ec;
+$stepper-colors-light-bg-warning-subtle: #fef6de;
+$stepper-colors-light-border-default: #5514b4;
+$stepper-colors-light-border-subtle: #c8c8c8;
+$stepper-colors-light-border-error: #da020f;
+$stepper-colors-light-border-warning: #ffa200;
+$stepper-colors-light-border-variant: #5514b4;
+$stepper-colors-light-fg-default: #5514b4;
+$stepper-colors-light-fg-default-alt: #ffffff;
+$stepper-colors-light-fg-error: #da020f;
+$stepper-colors-light-fg-warning: #ffa200;
+$stepper-colors-light-fg-variant: #5514b4;
+$stepper-colors-light-text-default: #2a2a2a;
+$stepper-colors-light-text-hover: #3f187f;
+$stepper-colors-light-text-subtle: #6b6b6b;
+$stepper-colors-dark-bg-default: #ff80ff;
+$stepper-colors-dark-bg-subtle: #6b6b6b;
+$stepper-colors-dark-bg-strong: #ffffff;
+$stepper-colors-dark-bg-error: #fa9590;
+$stepper-colors-dark-bg-warning: #ffc501;
+$stepper-colors-dark-bg-error-subtle: #401313;
+$stepper-colors-dark-bg-warning-subtle: #332700;
+$stepper-colors-dark-border-default: #ff80ff;
+$stepper-colors-dark-border-subtle: #6b6b6b;
+$stepper-colors-dark-border-strong: #ffffff;
+$stepper-colors-dark-border-error: #fa9590;
+$stepper-colors-dark-border-warning: #ffc501;
+$stepper-colors-dark-border-variant: #ff80ff;
+$stepper-colors-dark-fg-default: #ff80ff;
+$stepper-colors-dark-fg-default-alt: #2a2a2a;
+$stepper-colors-dark-fg-strong: #ffffff;
+$stepper-colors-dark-fg-error: #fa9590;
+$stepper-colors-dark-fg-warning: #ffc501;
+$stepper-colors-dark-fg-variant: #ff80ff;
+$stepper-colors-dark-text-default: #ffffff;
+$stepper-colors-dark-text-hover: #ffb7fe;
+$stepper-colors-dark-text-subtle: #c8c8c8;
+$stepper-border-weight-s: 1px;
+$stepper-border-weight-m: 2px;
+$progress-bar-gap-s: 4px;
+$progress-bar-gap-m: 8px;
+$progress-bar-size-s: 12px;
+$progress-bar-border-radius-s: 24px;
+$progress-bar-colors-light-bg-default: #5514b4;
+$progress-bar-colors-light-bg-default-alt: #f0f0f0;
+$progress-bar-colors-light-bg-muted: #e3e3e3;
+$progress-bar-colors-light-bg-error: #da020f;
+$progress-bar-colors-light-bg-success: #088003;
+$progress-bar-colors-light-text-default: #2a2a2a;
+$progress-bar-colors-light-text-default-alt: #5514b4;
+$progress-bar-colors-light-text-default-alt-hover: hsl(264 80% 31.4%);
+$progress-bar-colors-light-text-error: #da020f;
+$progress-bar-colors-light-text-error-hover: hsl(356 98.2% 30.2%);
+$progress-bar-colors-light-text-success: #088003;
+$progress-bar-colors-light-text-success-hover: hsl(118 95.4% 18%);
+$progress-bar-colors-light-fg-default: #5514b4;
+$progress-bar-colors-light-fg-default-hover: hsl(264 80% 31.4%);
+$progress-bar-colors-light-fg-error: #da020f;
+$progress-bar-colors-light-fg-error-hover: hsl(356 98.2% 30.2%);
+$progress-bar-colors-light-fg-success: #088003;
+$progress-bar-colors-light-fg-success-hover: hsl(118 95.4% 18%);
+$progress-bar-colors-dark-bg-default: #ff80ff;
+$progress-bar-colors-dark-bg-default-alt: #2a2a2a;
+$progress-bar-colors-dark-bg-error: #fa9590;
+$progress-bar-colors-dark-bg-success: #75c26c;
+$progress-bar-colors-dark-fg-default: #ff80ff;
+$progress-bar-colors-dark-fg-default-hover: hsl(300 100% 82.6%);
+$progress-bar-colors-dark-fg-error: #fa9590;
+$progress-bar-colors-dark-fg-error-hover: hsl(2.83 91.4% 88.6%);
+$progress-bar-colors-dark-fg-success: #75c26c;
+$progress-bar-colors-dark-fg-success-hover: hsl(114 41.3% 64.3%);
+$progress-bar-colors-dark-text-default: #ffffff;
+$progress-bar-colors-dark-text-default-alt: #ff80ff;
+$progress-bar-colors-dark-text-default-alt-hover: hsl(300 100% 87.5%);
+$progress-bar-colors-dark-text-error: #fa9590;
+$progress-bar-colors-dark-text-error-hover: hsl(2.83 91.4% 88.6%);
+$progress-bar-colors-dark-text-success: #75c26c;
+$progress-bar-colors-dark-text-success-hover: hsl(114 41.3% 64.3%);
+$toast-size-s: 40px;
+$toast-padding-s: 8px;
+$toast-border-radius-s: 4px;
+$toast-gap-s: 8px;
+$toast-size-icon-s: 24px;
+$toast-border-weight-s: 1px;
+$toast-colors-status-light-bg-default: #2a2a2a;
+$toast-colors-status-light-bg-error: #2a2a2a;
+$toast-colors-status-light-bg-warning: #2a2a2a;
+$toast-colors-status-light-bg-success: #2a2a2a;
+$toast-colors-status-light-border-default: #ffffff;
+$toast-colors-status-light-border-error: #fa9590;
+$toast-colors-status-light-border-warning: #ffc501;
+$toast-colors-status-light-border-success: #75c26c;
+$toast-colors-status-light-fg-default: #ffffff;
+$toast-colors-status-light-fg-error: #fa9590;
+$toast-colors-status-light-fg-warning: #ffa200;
+$toast-colors-status-light-fg-success: #75c26c;
+$toast-colors-status-light-fg-default-alt: #ffffff;
+$toast-colors-status-light-text-default: #ffffff;
+$toast-colors-status-light-text-default-alt: #ffffff;
+$toast-colors-status-dark-bg-default: #f0f0f0;
+$toast-colors-status-dark-bg-error: #f0f0f0;
+$toast-colors-status-dark-bg-warning: #f0f0f0;
+$toast-colors-status-dark-bg-success: #f0f0f0;
+$toast-colors-status-dark-border-default: #2a2a2a;
+$toast-colors-status-dark-border-error: #da020f;
+$toast-colors-status-dark-border-warning: #ffa200;
+$toast-colors-status-dark-border-success: #088003;
+$toast-colors-status-dark-fg-default: #2a2a2a;
+$toast-colors-status-dark-fg-error: #da020f;
+$toast-colors-status-dark-fg-warning: #2a2a2a;
+$toast-colors-status-dark-fg-success: #088003;
+$toast-colors-status-dark-text-default: #2a2a2a;
+$tag-size-s: 28px;
+$tag-padding-xxs: 4px;
+$tag-padding-xs: 6px;
+$tag-padding-s: 8px;
+$tag-border-radius-s: 32px;
+$tag-border-weight-s: 1px;
+$tag-colors-light-bg-default: #ffffff;
+$tag-colors-light-bg-default-alt: #ffffff;
+$tag-colors-light-bg-hover: #ffffff;
+$tag-colors-light-border-default: #c8c8c8;
+$tag-colors-light-border-default-alt: #c8c8c8;
+$tag-colors-light-border-hover: #c8c8c8;
+$tag-colors-light-fg-default: #2a2a2a;
+$tag-colors-light-fg-hover: #3f187f;
+$tag-colors-light-text-default: #2a2a2a;
+$tag-colors-light-text-hover: #3f187f;
+$tag-size-icon-s: 16px;
+$tag-size-icon-m: 20px;
+$badge-size-s: 24px;
+$badge-padding-s: 8px;
+$badge-border-radius-s: 1000px;
+$badge-colors-bg-default: #2a2a2a;
+$badge-colors-bg-error: #da020f;
+$badge-colors-bg-warning: #ffa200;
+$badge-colors-bg-success: #088003;
+$badge-colors-text-default: #ffffff;
+$badge-colors-text-error: #ffffff;
+$badge-colors-text-warning: #2a2a2a;
+$badge-colors-text-success: #ffffff;
+$alert-padding-xxs: 2px;
+$alert-padding-xs: 6px;
+$alert-padding-s: 8px;
+$alert-padding-m: 10px;
+$alert-border-radius-s: 4px;
+$alert-border-weight-s: 1px;
+$alert-border-weight-m: 4px;
+$alert-box-shadow-01: sem.box-shadow.01;
+$alert-colors-status-light-bg-subtle-default: #f7f7f7;
+$alert-colors-status-light-bg-subtle-error: #ffe9ec;
+$alert-colors-status-light-bg-subtle-warning: #fef6de;
+$alert-colors-status-light-bg-subtle-success: #e6f4e5;
+$alert-colors-status-light-border-default: #2a2a2a;
+$alert-colors-status-light-border-error: #da020f;
+$alert-colors-status-light-border-warning: #ffa200;
+$alert-colors-status-light-border-success: #088003;
+$alert-colors-status-light-fg-default: #2a2a2a;
+$alert-colors-status-light-text-default: #2a2a2a;
+$alert-colors-status-dark-bg-subtle-default: #2a2a2a;
+$alert-colors-status-dark-bg-subtle-error: #401313;
+$alert-colors-status-dark-bg-subtle-warning: #332700;
+$alert-colors-status-dark-bg-subtle-success: #233A20;
+$alert-colors-status-dark-border-default: #f0f0f0;
+$alert-colors-status-dark-border-error: #f91f14;
+$alert-colors-status-dark-border-warning: #ffc501;
+$alert-colors-status-dark-border-success: #75c26c;
+$alert-colors-status-dark-fg-default: #f0f0f0;
+$alert-colors-status-dark-text-default: #f0f0f0;
+$alert-size-icon-s: 24px;
+$alert-gap-s: 0px;
+$segmented-control-size-icon-s: 24px;
+$segmented-control-size-s: 40px;
+$segmented-control-padding-s: 8px;
+$segmented-control-padding-m: 16px;
+$segmented-control-gap-s: 4px;
+$segmented-control-gap-m: 8px;
+$segmented-control-border-radius-m: 1000px;
+$segmented-control-border-weight-s: 1px;
+$segmented-control-border-weight-m: 2px;
+$segmented-control-colors-light-bg-default: #ffffff;
+$segmented-control-colors-light-bg-hover: #3f187f;
+$segmented-control-colors-light-bg-selected: #2a1c4a;
+$segmented-control-colors-light-fg-default: #5514b4;
+$segmented-control-colors-light-fg-default-alt: #ffffff;
+$segmented-control-colors-light-fg-focus: #8449cc;
+$segmented-control-colors-light-border-focus: #8449cc;
+$segmented-control-colors-light-border-subtle: #c8c8c8;
+$segmented-control-colors-light-text-default: #5514b4;
+$segmented-control-colors-light-text-default-alt: #ffffff;
+$segmented-control-colors-light-text-focus: #8449cc;
+$rule-colors-light-border-subtle: #c8c8c8;
+$rule-colors-dark-border-subtle: #6b6b6b;
+$rule-border-weight-s: 1px;
+$logos-size-m: 40px;
+$logos-colors-light-fg-default: #5514b4;
+$logos-colors-light-fg-strong: #2a2a2a;
+$logos-colors-light-fg-variant: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%);
+$logos-colors-dark-fg-default: #ff80ff;
+$vertical-space-size-4: 4px;
+$vertical-space-size-8: 8px;
+$vertical-space-size-12: 12px;
+$vertical-space-size-16: 16px;
+$vertical-space-size-20: 20px;
+$vertical-space-size-24: 24px;
+$vertical-space-size-28: 28px;
+$vertical-space-size-32: 32px;
+$vertical-space-size-40: 40px;
+$vertical-space-size-48: 48px;
+$vertical-space-size-64: 64px;
+$vertical-space-size-96: 96px;
+$vertical-space-size-128: 128px;
+$textlink-size-s: 20px;
+$textlink-size-m: 24px;
+$textlink-size-l: 26px;
+$textlink-size-icon-s: 20px;
+$textlink-size-icon-m: 24px;
+$textlink-padding-s: 2px;
+$textlink-colors-light-fg-default: #5514b4;
+$textlink-colors-light-fg-hover: #3f187f;
+$textlink-colors-light-fg-visited: #8449cc;
+$textlink-colors-light-text-default: #5514b4;
+$textlink-colors-light-text-hover: #3f187f;
+$textlink-colors-light-text-visited: #8449cc;
+$textlink-colors-dark-fg-default: #ff80ff;
+$textlink-colors-dark-fg-hover: #ffb7fe;
+$textlink-colors-dark-fg-visited: #fd51ff;
+$textlink-colors-dark-text-default: #ff80ff;
+$textlink-colors-dark-text-hover: #ffb7fe;
+$textlink-colors-dark-text-visited: #fd51ff;
+$textlink-gap-s: 4px;
+$siteheader-size-s: 34px;
+$siteheader-size-m: 58px;
+$siteheader-size-l: 84px;
+$siteheader-padding-s: 12px;
+$siteheader-padding-m: 16px;
+$siteheader-padding-l: 24px;
+$siteheader-padding-xl: 32px;
+$siteheader-gap-s: 12px;
+$siteheader-gap-m: 24px;
+$siteheader-gap-l: 40px;
+$siteheader-size-icon-s: 24px;
+$siteheader-colors-light-bg-default: #5514b4;
+$siteheader-colors-light-fg-default: #ffffff;
+$siteheader-colors-light-fg-default-alt: #2a2a2a;
+$siteheader-colors-light-text-default: #ffffff;
+$siteheader-colors-light-text-default-alt: #2a2a2a;
+$sitefooter-size-s: 20px;
+$sitefooter-size-m: 34px;
+$sitefooter-size-icon-s: 16px;
+$sitefooter-size-icon-m: 24px;
+$sitefooter-size-icon-l: 32px;
+$sitefooter-padding-s: 8px;
+$sitefooter-padding-m: 12px;
+$sitefooter-padding-l: 16px;
+$sitefooter-padding-xl: 24px;
+$sitefooter-padding-xxl: 32px;
+$sitefooter-gap-s: 4px;
+$sitefooter-gap-m: 8px;
+$sitefooter-gap-l: 16px;
+$sitefooter-gap-xl: 24px;
+$sitefooter-gap-xxl: 48px;
+$sitefooter-colors-light-bg-default: #5514b4;
+$sitefooter-colors-light-fg-default: #ffffff;
+$sitefooter-colors-light-fg-default-alt: #ffffff;
+$sitefooter-colors-light-border-subtle: #996cd5;
+$sitefooter-colors-light-text-default: #ff80ff;
+$sitefooter-colors-light-text-subtle: #6b6b6b;
+$sitefooter-border-weight-s: 1px;
+$header-menu-size-s: 40px;
+$header-menu-size-m: 96px;
+$header-menu-size-l: 72px;
+$header-menu-size-xl: 106px;
+$header-menu-padding-s: 8px;
+$header-menu-padding-m: 12px;
+$header-menu-padding-l: 24px;
+$header-menu-padding-xl: 40px;
+$header-menu-gap-s: 8px;
+$header-menu-gap-m: 16px;
+$header-menu-gap-l: 20px;
+$header-menu-gap-xl: 24px;
+$header-menu-gap-xxl: 28px;
+$header-menu-gap-xxxl: 44px;
+$header-menu-gap-xxxxl: 48px;
+$header-menu-border-radius-s: 24px;
+$header-menu-border-radius-m: 8px;
+$header-menu-border-radius-l: 8px;
+$header-menu-border-radius-xl: 8px;
+$header-menu-size-icon-s: 16px;
+$header-menu-size-icon-m: 28px;
+$header-menu-size-icon-l: 48px;
+$header-menu-border-weight-s: 1px;
+$header-menu-colors-light-bg-strong: #2a2a2a;
+$header-menu-colors-light-bg-default-alt: #ffffff;
+$header-menu-colors-light-fg-default: #5514b4;
+$header-menu-colors-light-fg-default-alt: #ffffff;
+$header-menu-colors-light-fg-strong: #2a2a2a;
+$header-menu-colors-light-border-strong-alt-copy: #2a2a2a;
+$header-menu-colors-light-text-default: #5514b4;
+$header-menu-colors-light-text-default-alt: #ffffff;
+$header-menu-colors-light-text-strong: #2a2a2a;
+$button-v2-padding-xxxs: 3px;
+$button-v2-padding-xxs: 4px;
+$button-v2-padding-xs: 8px;
+$button-v2-padding-s: 10px;
+$button-v2-padding-m: 12px;
+$button-v2-padding-l: 16px;
+$button-v2-padding-xl: 18px;
+$button-v2-padding-xxl: 24px;
+$button-v2-padding-xxxl: 32px;
+$button-v2-gap-xs: 4px;
+$button-v2-gap-s: 6px;
+$button-v2-gap-m: 8px;
+$button-v2-border-radius-s: 8px;
+$button-v2-size-s: 32px;
+$button-v2-size-m: 44px;
+$button-v2-size-l: 64px;
+$button-v2-size-icon-s: 20px;
+$button-v2-size-icon-m: 24px;
+$button-v2-size-icon-l: 28px;
+$button-v2-size-icon-xl: 64px;
+$button-v2-border-weight-xs: 1px; // 0.5 border-weight needed, core, semantic token will need to be created
+$button-v2-border-weight-s: 2px;
+$button-v2-border-weight-m: 2px;
+$button-v2-colors-light-bg-default: #5514b4;
+$button-v2-colors-light-bg-hover: #3f187f;
+$button-v2-colors-light-bg-pressed: #2a1c4a;
+$button-v2-colors-light-bg-disabled: #f0f0f0;
+$button-v2-colors-light-bg-strong: #f0f0f0;
+$button-v2-colors-light-bg-subtle: #e3e3e3;
+$button-v2-colors-light-bg-minimal: #ffffff;
+$button-v2-colors-light-border-default: #5514b4;
+$button-v2-colors-light-border-pressed: #2a1c4a;
+$button-v2-colors-light-border-disabled: #949494;
+$button-v2-colors-light-fg-default: #5514b4;
+$button-v2-colors-light-fg-default-alt: #ffffff;
+$button-v2-colors-light-fg-default-strong: #5514b4;
+$button-v2-colors-light-fg-hover: #3f187f;
+$button-v2-colors-light-fg-pressed: #2a1c4a;
+$button-v2-colors-light-fg-disabled: #6b6b6b;
+$button-v2-colors-light-fg-strong-subtle: #949494;
+$button-v2-colors-light-text-default: #5514b4;
+$button-v2-colors-light-text-default-alt: #ffffff;
+$button-v2-colors-light-text-hover: #3f187f;
+$button-v2-colors-light-text-pressed: #2a1c4a;
+$button-v2-colors-light-text-disabled: #6b6b6b;
+$button-v2-colors-light-status-text-default: #ffffff;
+$button-v2-colors-light-status-bg-default: #da020f;
+$button-v2-colors-light-status-bg-hover: #c90104;
+$button-v2-colors-light-status-bg-pressed: #ab0000;
+$button-v2-colors-light-variant-bg-default: linear-gradient(244deg, #f200f5 0%, #1ec8e6 100%);
+$button-v2-colors-light-variant-bg-hover: linear-gradient(-45deg, #ff80ff 0%, #72d4e9 100%);
+$button-v2-colors-light-variant-bg-pressed: linear-gradient(-44deg, #72d4e9 0%, #ff80ff 100%);
+$button-v2-colors-light-variant-fg-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$button-v2-colors-light-variant-border-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$button-v2-colors-dark-bg-default: #ff80ff;
+$button-v2-colors-dark-bg-hover: #ffb7fe;
+$button-v2-colors-dark-bg-pressed: #fbf1f8;
+$button-v2-colors-dark-bg-disabled: #434343;
+$button-v2-colors-dark-bg-strong: #434343;
+$button-v2-colors-dark-bg-hover-alt: #2a2a2a;
+$button-v2-colors-dark-bg-subtle: #6b6b6b;
+$button-v2-colors-dark-bg-minimal: #6b6b6b;
+$button-v2-colors-dark-border-default: #ff80ff;
+$button-v2-colors-dark-border-pressed: #fbf1f8;
+$button-v2-colors-dark-border-disabled: #808080;
+$button-v2-colors-dark-border-subtle: #6b6b6b;
+$button-v2-colors-dark-fg-default: #ff80ff;
+$button-v2-colors-dark-fg-default-alt: #2a2a2a;
+$button-v2-colors-dark-fg-hover: #ffb7fe;
+$button-v2-colors-dark-fg-pressed: #fbf1f8;
+$button-v2-colors-dark-fg-disabled: #c8c8c8;
+$button-v2-colors-dark-fg-strong: #c8c8c8;
+$button-v2-colors-dark-fg-strong-subtle: #949494;
+$button-v2-colors-dark-status-fg-default: #ffffff;
+$button-v2-colors-dark-status-text-default: #ffffff;
+$button-v2-colors-dark-status-bg-default: #ab0000;
+$button-v2-colors-dark-status-bg-hover: #c90104;
+$button-v2-colors-dark-status-bg-pressed: #da020f;
+$button-v2-colors-dark-text-default: #ff80ff;
+$button-v2-colors-dark-text-default-alt: #2a2a2a;
+$button-v2-colors-dark-text-hover: #ffb7fe;
+$button-v2-colors-dark-text-pressed: #fbf1f8;
+$button-v2-colors-dark-text-disabled: #c8c8c8;
+$button-v2-colors-dark-variant-bg-loader: linear-gradient(90deg, #f5eefa 0%, #eafcff 100%);
+$button-v2-colors-dark-variant-fg-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$button-v2-colors-dark-variant-border-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$button-v2-colors-overlay-flat-01: rgba(255,255,255,0.5);
+$button-v2-colors-overlay-flat-02: rgba(85,20,180,0.5);
+$hero-button-padding-xxxs: 3px;
+$hero-button-padding-xxs: 4px;
+$hero-button-padding-xs: 8px;
+$hero-button-padding-s: 10px;
+$hero-button-padding-m: 12px;
+$hero-button-padding-l: 16px;
+$hero-button-padding-xl: 18px;
+$hero-button-padding-xxl: 24px;
+$hero-button-padding-xxxl: 32px;
+$hero-button-gap-xs: 4px;
+$hero-button-gap-s: 6px;
+$hero-button-gap-m: 8px;
+$hero-button-border-radius-s: 8px;
+$hero-button-size-s: 32px;
+$hero-button-size-m: 44px;
+$hero-button-size-l: 64px;
+$hero-button-size-icon-s: 20px;
+$hero-button-size-icon-m: 24px;
+$hero-button-size-icon-l: 28px;
+$hero-button-size-icon-xl: 64px;
+$hero-button-border-weight-xs: 1px; // 0.5 border-weight needed, core, semantic token will need to be created
+$hero-button-border-weight-s: 2px;
+$hero-button-border-weight-m: 2px;
+$hero-button-colors-light-bg-default: #5514b4;
+$hero-button-colors-light-bg-hover: #3f187f;
+$hero-button-colors-light-bg-pressed: #2a1c4a;
+$hero-button-colors-light-bg-disabled: #f0f0f0;
+$hero-button-colors-light-bg-strong: #f0f0f0;
+$hero-button-colors-light-bg-subtle: #e3e3e3;
+$hero-button-colors-light-bg-minimal: #ffffff;
+$hero-button-colors-light-border-default: #5514b4;
+$hero-button-colors-light-border-pressed: #2a1c4a;
+$hero-button-colors-light-border-disabled: #949494;
+$hero-button-colors-light-fg-default: #5514b4;
+$hero-button-colors-light-fg-default-alt: #ffffff;
+$hero-button-colors-light-fg-default-strong: #5514b4;
+$hero-button-colors-light-fg-hover: #3f187f;
+$hero-button-colors-light-fg-pressed: #2a1c4a;
+$hero-button-colors-light-fg-disabled: #6b6b6b;
+$hero-button-colors-light-fg-strong-subtle: #949494;
+$hero-button-colors-light-text-default: #5514b4;
+$hero-button-colors-light-text-default-alt: #ffffff;
+$hero-button-colors-light-text-hover: #3f187f;
+$hero-button-colors-light-text-pressed: #2a1c4a;
+$hero-button-colors-light-text-disabled: #6b6b6b;
+$hero-button-colors-light-status-text-default: #ffffff;
+$hero-button-colors-light-status-bg-default: #da020f;
+$hero-button-colors-light-status-bg-hover: #c90104;
+$hero-button-colors-light-status-bg-pressed: #ab0000;
+$hero-button-colors-light-variant-bg-default: linear-gradient(244deg, #f200f5 0%, #1ec8e6 100%);
+$hero-button-colors-light-variant-bg-hover: linear-gradient(-45deg, #ff80ff 0%, #72d4e9 100%);
+$hero-button-colors-light-variant-bg-pressed: linear-gradient(-44deg, #72d4e9 0%, #ff80ff 100%);
+$hero-button-colors-light-variant-fg-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$hero-button-colors-light-variant-border-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$hero-button-colors-dark-bg-default: #ff80ff;
+$hero-button-colors-dark-bg-hover: #ffb7fe;
+$hero-button-colors-dark-bg-pressed: #fbf1f8;
+$hero-button-colors-dark-bg-disabled: #434343;
+$hero-button-colors-dark-bg-strong: #434343;
+$hero-button-colors-dark-bg-hover-alt: #2a2a2a;
+$hero-button-colors-dark-bg-subtle: #6b6b6b;
+$hero-button-colors-dark-bg-minimal: #6b6b6b;
+$hero-button-colors-dark-border-default: #ff80ff;
+$hero-button-colors-dark-border-pressed: #fbf1f8;
+$hero-button-colors-dark-border-disabled: #808080;
+$hero-button-colors-dark-border-subtle: #6b6b6b;
+$hero-button-colors-dark-fg-default: #ff80ff;
+$hero-button-colors-dark-fg-default-alt: #2a2a2a;
+$hero-button-colors-dark-fg-hover: #ffb7fe;
+$hero-button-colors-dark-fg-pressed: #fbf1f8;
+$hero-button-colors-dark-fg-disabled: #c8c8c8;
+$hero-button-colors-dark-fg-strong: #c8c8c8;
+$hero-button-colors-dark-fg-strong-subtle: #949494;
+$hero-button-colors-dark-status-fg-default: #ffffff;
+$hero-button-colors-dark-status-text-default: #ffffff;
+$hero-button-colors-dark-status-bg-default: #ab0000;
+$hero-button-colors-dark-status-bg-hover: #c90104;
+$hero-button-colors-dark-status-bg-pressed: #da020f;
+$hero-button-colors-dark-text-default: #ff80ff;
+$hero-button-colors-dark-text-default-alt: #2a2a2a;
+$hero-button-colors-dark-text-hover: #ffb7fe;
+$hero-button-colors-dark-text-pressed: #fbf1f8;
+$hero-button-colors-dark-text-disabled: #c8c8c8;
+$hero-button-colors-dark-variant-bg-loader: linear-gradient(90deg, #f5eefa 0%, #eafcff 100%);
+$hero-button-colors-dark-variant-fg-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$hero-button-colors-dark-variant-border-default: linear-gradient(105deg, #f200f5 0%, #1ec8e6 100%);
+$hero-button-colors-overlay-flat-01: rgba(255,255,255,0.5);
+$hero-button-colors-overlay-flat-02: rgba(85,20,180,0.5);
+$button-padding-s: 10px;
+$button-padding-m: 12px;
+$button-padding-l: 16px;
+$button-padding-xl: 18px;
+$button-padding-xxl: 20px;
+$button-padding-xxxl: 24px;
+$button-gap-xs: 2px;
+$button-gap-s: 4px;
+$button-gap-m: 6px;
+$button-gap-l: 8px;
+$button-border-radius-s: 8px;
+$button-size-xxs: 20px;
+$button-size-xs: 24px;
+$button-size-s: 28px;
+$button-size-m: 32px;
+$button-size-l: 44px;
+$button-size-xl: 48px;
+$button-size-xxl: 60px;
+$button-size-icon-xs: 12px;
+$button-size-icon-s: 16px;
+$button-size-icon-m: 20px;
+$button-size-icon-l: 24px;
+$button-size-icon-xl: 28px;
+$button-colors-light-bg-default: #5514b4;
+$button-colors-light-bg-hover: #3f187f;
+$button-colors-light-bg-pressed: #2a1c4a;
+$button-colors-light-bg-disabled: #f0f0f0;
+$button-colors-light-border-default: #5514b4;
+$button-colors-light-border-pressed: #2a1c4a;
+$button-colors-light-border-disabled: #949494;
+$button-colors-light-fg-default: #5514b4;
+$button-colors-light-fg-default-alt: #ffffff;
+$button-colors-light-fg-hover: #3f187f;
+$button-colors-light-fg-pressed: #2a1c4a;
+$button-colors-light-fg-disabled: #6b6b6b;
+$button-colors-light-text-default: #5514b4;
+$button-colors-light-text-default-alt: #ffffff;
+$button-colors-light-text-hover: #3f187f;
+$button-colors-light-text-pressed: #2a1c4a;
+$button-colors-light-text-disabled: #6b6b6b;
+$button-colors-dark-bg-default: #ff80ff;
+$button-colors-dark-bg-hover: #ffb7fe;
+$button-colors-dark-bg-pressed: #fbf1f8;
+$button-colors-dark-bg-disabled: #434343;
+$button-colors-dark-border-default: #ff80ff;
+$button-colors-dark-border-pressed: #fbf1f8;
+$button-colors-dark-border-disabled: #808080;
+$button-colors-dark-fg-default: #ff80ff;
+$button-colors-dark-fg-default-alt: #2a2a2a;
+$button-colors-dark-fg-hover: #ffb7fe;
+$button-colors-dark-fg-pressed: #fbf1f8;
+$button-colors-dark-fg-disabled: #c8c8c8;
+$button-colors-dark-text-default: #ff80ff;
+$button-colors-dark-text-default-alt: #2a2a2a;
+$button-colors-dark-text-hover: #ffb7fe;
+$button-colors-dark-text-pressed: #fbf1f8;
+$button-colors-dark-text-disabled: #c8c8c8;
+$button-border-weight-s: 2px;
+$focus-colors-light-border-subtle: #8449cc;
+$focus-colors-dark-border-subtle: #fd51ff;
+$focus-border-weight-s: 2px;
+$focus-border-radius-s: 8px;
+$universal-header-size-s: 32px;
+$universal-header-padding-s: 10px;
+$universal-header-padding-m: 16px;
+$universal-header-padding-l: 24px;
+$universal-header-padding-xl: 32px;
+$universal-header-gap-s: 6px;
+$universal-header-gap-m: 12px;
+$universal-header-gap-l: 32px;
+$universal-header-size-icon-s: 10px;
+$universal-header-colors-light-bg-default: #f0f0f0;
+$universal-header-colors-light-fg-default: #2a2a2a;
+$universal-header-colors-light-text-default: #2a2a2a;
+$universal-header-colors-light-text-hover: #3f187f;
+$card-colors-light-bg-default: #5514b4;
+$card-colors-light-bg-default-alt: #ffffff;
+$card-colors-light-bg-emphasis: linear-gradient(90deg, #fcf9ff 0%, #f9f9ff 100%);
+$card-colors-light-fg-default: #5514b4;
+$card-colors-light-fg-default-alt: #ffffff;
+$card-colors-light-fg-hover: #3f187f;
+$card-colors-light-border-default: #c8c8c8;
+$card-colors-light-border-hover: #3f187f;
+$card-colors-light-border-minimal: #d4bfec;
+$card-colors-light-text-default: #2a2a2a;
+$card-colors-light-text-hover: #3f187f;
+$card-colors-light-text-support: #6b6b6b;
+$card-colors-dark-bg-default: #ff80ff;
+$card-colors-dark-bg-default-alt: #000000;
+$card-colors-dark-bg-emphasis: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%);
+$card-colors-dark-fg-default-alt: #ffffff;
+$card-colors-dark-border-hover: #ffb7fe;
+$card-colors-dark-text-default: #ffffff;
+$card-colors-dark-text-hover: #ffb7fe;
+$card-colors-dark-text-support: #e3e3e3;
+$card-padding-s: 24px;
+$card-padding-m: 32px;
+$card-border-weight-s: 1px;
+$card-border-weight-m: 2px;
+$card-border-radius-s: 8px;
+$card-gap-xs: 8px;
+$card-gap-s: 16px;
+$card-gap-m: 20px;
+$card-gap-l: 22px;
+$card-gap-xl: 24px;
+$card-size-s: 48px;
+$card-size-m: 80px;
+$card-size-l: 96px;
+$card-size-icon-s: 42px;
+$card-size-icon-m: 80px;
+$surface-colors-bg-dark-brand-02: linear-gradient(90deg, #5514b4 8.33%, #7e2ec6 100%);
+$surface-colors-bg-dark-brand-01: #5514b4;
+$surface-colors-bg-dark-neutral-01: #434343;
+$surface-colors-bg-dark-neutral-02: #2a2a2a;
+$surface-colors-bg-light-white: #ffffff;
+$surface-colors-bg-light-neutral-01: #f7f7f7;
+$surface-colors-bg-light-neutral-02: #f0f0f0;
+$surface-colors-bg-light-brand-01: linear-gradient(90deg, #fff2f0 0%, #f5eefa 100%);
+$surface-colors-bg-light-brand-02: linear-gradient(90deg, #f5eefa 0%, #eafcff 100%);
+$surface-colors-bg-dark-black: #000000;
+$filter-size-s: 28px;
+$filter-padding-s: 4px;
+$filter-padding-m: 10px;
+$filter-border-radius-s: 32px;
+$filter-border-weight-s: 1px;
+$filter-border-weight-m: 2px;
+$filter-colors-light-border-default: #d4bfec;
+$filter-colors-light-border-hover: #3f187f;
+$filter-colors-light-bg-default: #ffffff;
+$filter-colors-light-bg-selected: #5514b4;
+$filter-colors-light-text-default: #5514b4;
+$filter-colors-light-text-default-alt: #ffffff;
+$filter-colors-light-text-hover: #2a1c4a;
+$filter-colors-dark-border-default: #996cd5;
+$filter-colors-dark-border-hover: #3f187f;
+$filter-colors-dark-bg-selected: #ffffff;
+$filter-colors-dark-bg-default: #000000;
+$filter-colors-dark-text-default: #5514b4;
+$filter-colors-dark-text-default-alt: #efe5f7;
+$filter-colors-dark-text-hover: #ffe4ff;
+$filter-colors-dark-text-seleced: #2a1c4a;
+$filter-gap-l: 16px;
+$filter-margin-m: 16px;