/* MWS Design Tokens — extracted from @mws-ai/ui-kit v0.2.1 */ /* Activate dark theme with [data-theme="dark"] on or any container. */ :root { --const-typography-family-compact: "MTS Compact", sans-serif; --const-typography-family-wide: "MTS Wide", sans-serif; --const-typography-family-text: "MTS Text", sans-serif; --const-typography-size-10: 3.5rem; --const-typography-size-11: 4.5rem; --const-typography-size-09: 2.75rem; --const-typography-size-08: 2.25rem; --const-typography-size-07: 2rem; --const-typography-size-06: 1.5rem; --const-typography-size-05: 1.25rem; --const-typography-size-04: 1.0625rem; --const-typography-size-03: .875rem; --const-typography-size-02: .75rem; --const-typography-size-01: .625rem; --const-typography-lineHeight-10: 2.75rem; --const-typography-lineHeight-11: 3.5rem; --const-typography-lineHeight-12: 4.5rem; --const-typography-lineHeight-09: 2.5rem; --const-typography-lineHeight-08: 2.25rem; --const-typography-lineHeight-07: 2rem; --const-typography-lineHeight-06: 1.75rem; --const-typography-lineHeight-05: 1.5rem; --const-typography-lineHeight-04: 1.25rem; --const-typography-lineHeight-03: 1.125rem; --const-typography-lineHeight-02: 1rem; --const-typography-lineHeight-01: .75rem; --const-radius-10: 80px; --const-radius-09: 64px; --const-radius-08: 48px; --const-radius-07: 40px; --const-radius-06: 32px; --const-radius-05: 24px; --const-radius-04: 20px; --const-radius-03: 16px; --const-radius-02: 12px; --const-radius-01: 8px; --const-spacing-10: 36px; --const-spacing-11: 40px; --const-spacing-12: 48px; --const-spacing-13: 64px; --const-spacing-14: 80px; --const-spacing-09: 32px; --const-spacing-08: 24px; --const-spacing-07: 20px; --const-spacing-06: 16px; --const-spacing-05: 12px; --const-spacing-04: 8px; --const-spacing-03: 4px; --const-spacing-02: 2px; --const-spacing-01: 0px; --const-palette-greyscale-100: rgba(242, 243, 247, 1); --const-palette-greyscale-200: rgba(226, 229, 235, 1); --const-palette-greyscale-300: rgba(187, 193, 199, 1); --const-palette-greyscale-400: rgba(150, 159, 168, 1); --const-palette-greyscale-500: rgba(98, 108, 119, 1); --const-palette-greyscale-600: rgba(67, 74, 81, 1); --const-palette-greyscale-700: rgba(44, 49, 53, 1); --const-palette-greyscale-800: rgba(29, 32, 35, 1); --const-palette-greyscale-900: rgba(0, 0, 0, 1); --const-palette-greyscale-000: rgba(255, 255, 255, 1); --const-palette-blackberry-darkest: rgba(0, 32, 148, 1); --const-palette-blackberry-dark: rgba(0, 61, 183, 1); --const-palette-blackberry-normal: rgba(1, 79, 206, 1); --const-palette-blackberry-light: rgba(99, 132, 224, 1); --const-palette-blackberry-lightest: rgba(231, 234, 250, 1); --const-palette-blueberry-darkest: rgba(0, 72, 170, 1); --const-palette-blueberry-dark: rgba(0, 124, 255, 1); --const-palette-blueberry-normal: rgba(0, 151, 253, 1); --const-palette-blueberry-light: rgba(69, 182, 252, 1); --const-palette-blueberry-lightest: rgba(225, 243, 254, 1); --const-palette-mint-darkest: rgba(0, 114, 77, 1); --const-palette-mint-dark: rgba(3, 161, 123, 1); --const-palette-mint-normal: rgba(0, 193, 155, 1); --const-palette-mint-light: rgba(0, 217, 188, 1); --const-palette-mint-lightest: rgba(223, 249, 245, 1); --const-palette-apple-darkest: rgba(2, 119, 34, 1); --const-palette-apple-dark: rgba(4, 170, 66, 1); --const-palette-apple-normal: rgba(38, 205, 88, 1); --const-palette-apple-light: rgba(116, 223, 139, 1); --const-palette-apple-lightest: rgba(232, 250, 235, 1); --const-palette-lime-darkest: rgba(128, 130, 1, 1); --const-palette-lime-dark: rgba(166, 193, 0, 1); --const-palette-lime-normal: rgba(193, 235, 29, 1); --const-palette-lime-light: rgba(211, 243, 107, 1); --const-palette-lime-lightest: rgba(248, 254, 231, 1); --const-palette-banana-darkest: rgba(243, 127, 25, 1); --const-palette-banana-dark: rgba(250, 192, 49, 1); --const-palette-banana-normal: rgba(251, 231, 57, 1); --const-palette-banana-light: rgba(253, 241, 119, 1); --const-palette-banana-lightest: rgba(255, 253, 232, 1); --const-palette-orange-darkest: rgba(186, 54, 10, 1); --const-palette-orange-dark: rgba(224, 74, 23, 1); --const-palette-orange-normal: rgba(249, 87, 33, 1); --const-palette-orange-light: rgba(255, 160, 128, 1); --const-palette-orange-lightest: rgba(251, 233, 231, 1); --const-palette-raspberry-darkest: rgba(142, 0, 63, 1); --const-palette-raspberry-dark: rgba(197, 19, 69, 1); --const-palette-raspberry-normal: rgba(234, 31, 73, 1); --const-palette-raspberry-light: rgba(245, 95, 126, 1); --const-palette-raspberry-lightest: rgba(255, 228, 233, 1); --const-palette-cranberry-darkest: rgba(127, 51, 99, 1); --const-palette-cranberry-dark: rgba(187, 64, 121, 1); --const-palette-cranberry-normal: rgba(229, 72, 135, 1); --const-palette-cranberry-light: rgba(230, 119, 173, 1); --const-palette-cranberry-lightest: rgba(249, 231, 240, 1); --const-palette-plum-darkest: rgba(71, 28, 97, 1); --const-palette-plum-dark: rgba(109, 45, 121, 1); --const-palette-plum-normal: rgba(136, 56, 136, 1); --const-palette-plum-light: rgba(168, 110, 167, 1); --const-palette-plum-lightest: rgba(240, 231, 240, 1); --const-shadow-05: 0 4px 24px 0 rgba(0, 0, 0, .12), 0 12px 20px 0 rgba(0, 0, 0, .14); --const-shadow-04: 0 -2px 24px 0 rgba(0, 0, 0, .08), 0 -8px 24px 0 rgba(0, 0, 0, .1); --const-shadow-03: 0 4px 24px 0 rgba(0, 0, 0, .12), 0 8px 16px 0 rgba(0, 0, 0, .08); --const-shadow-02: 0 0 16px 0 rgba(0, 0, 0, .08), 0 4px 16px 0 rgba(0, 0, 0, .08); --const-shadow-01: 0 0 6px 0 rgba(0, 0, 0, .08), 0 4px 16px 0 rgba(0, 0, 0, .08); --sys-typography-size-promo-1: 4.5rem; --sys-typography-size-promo-2: 3.5rem; --sys-typography-size-promo-3: 2.75rem; --sys-typography-size-promo-4: 2.25rem; --sys-typography-size-header-h1: 2.25rem; --sys-typography-size-header-h2: 2rem; --sys-typography-size-header-h3: 1.5rem; --sys-typography-size-header-h4: 1.25rem; --sys-typography-size-paragraph-p1: 1.5rem; --sys-typography-size-paragraph-p2: 1.25rem; --sys-typography-size-paragraph-p3: 1.0625rem; --sys-typography-size-paragraph-p4: .875rem; --sys-typography-size-caption-c1: .75rem; --sys-typography-size-caption-c2: .625rem; --sys-typography-lineHeight-promo-1: 2.25rem; --sys-typography-lineHeight-promo-2: 2.75rem; --sys-typography-lineHeight-promo-3: 3.5rem; --sys-typography-lineHeight-promo-4: 4.5rem; --sys-typography-lineHeight-header-h1: 2.5rem; --sys-typography-lineHeight-header-h2: 2.25rem; --sys-typography-lineHeight-header-h3: 2rem; --sys-typography-lineHeight-header-h4: 1.5rem; --sys-typography-lineHeight-paragraph-p1: 2rem; --sys-typography-lineHeight-paragraph-p2: 1.75rem; --sys-typography-lineHeight-paragraph-p3: 1.5rem; --sys-typography-lineHeight-paragraph-p4: 1.25rem; --sys-typography-lineHeight-paragraph-p4-tight: 1.125rem; --sys-typography-lineHeight-caption-c1: 1rem; --sys-typography-lineHeight-caption-c2: .75rem; --sys-background-primary: rgba(255, 255, 255, 1); --sys-background-lower: rgba(242, 243, 247, 1); --sys-background-primaryElevated: rgba(255, 255, 255, 1); --sys-background-modal: rgba(255, 255, 255, 1); --sys-background-stroke: rgba(188, 195, 208, .5); --sys-background-secondary: rgba(242, 243, 247, 1); --sys-background-secondaryElevated: rgba(255, 255, 255, 1); --sys-background-overlay: rgba(29, 32, 35, .4); --sys-background-overlayAlternative: rgba(29, 32, 35, .4); --sys-background-inverted: rgba(29, 32, 35, 1); --sys-background-hover: rgba(188, 195, 208, .25); --sys-background-bar: rgba(255, 255, 255, .88); --sys-background-disabled: rgba(248, 248, 251, 1); --sys-background-strokeDisabled: rgba(188, 195, 208, .25); --sys-background-activeSoft: rgba(199, 225, 255, 1); --sys-background-positiveSoft: rgba(190, 244, 189, 1); --sys-background-warningSoft: rgba(250, 232, 158, 1); --sys-background-negativeSoft: rgba(252, 212, 201, 1); --sys-background-highlightSoft: rgba(227, 204, 255, 1); --sys-text-primary: rgba(29, 32, 35, 1); --sys-text-secondary: rgba(98, 108, 119, 1); --sys-text-tertiary: rgba(150, 159, 168, 1); --sys-text-inverted: rgba(250, 250, 250, 1); --sys-text-positive: rgba(18, 178, 63, 1); --sys-text-negative: rgba(216, 64, 12, 1); --sys-text-primaryLink: rgba(0, 112, 229, 1); --sys-text-primaryLinkInverted: rgba(69, 182, 252, 1); --sys-text-secondaryLink: rgba(98, 108, 119, 1); --sys-text-visitedLink: rgba(136, 56, 136, 1); --sys-text-inactiveTabbar: rgba(110, 119, 130, 1); --sys-text-activeStrong: rgba(0, 92, 189, 1); --sys-text-positiveStrong: rgba(0, 117, 2, 1); --sys-text-warningStrong: rgba(128, 96, 0, 1); --sys-text-negativeStrong: rgba(173, 52, 0, 1); --sys-text-highlightStrong: rgba(121, 54, 201, 1); --sys-icons-primary: rgba(29, 32, 35, 1); --sys-icons-secondary: rgba(141, 150, 159, 1); --sys-icons-tertiary: rgba(187, 193, 199, 1); --sys-icons-inverted: rgba(250, 250, 250, 1); --sys-controls-primaryActive: rgba(255, 0, 50, 1); --sys-controls-secondaryActive: rgba(29, 32, 35, 1); --sys-controls-tertiaryActive: rgba(242, 243, 247, 1); --sys-controls-blur: rgba(255, 255, 255, .08); --sys-controls-stroke: rgba(141, 150, 159, 1); --sys-controls-inactive: rgba(188, 195, 208, .5); --sys-controls-alternative: rgba(255, 255, 255, 1); --sys-controls-activeTabbar: rgba(255, 0, 50, 1); --sys-controls-inactiveTabbar: rgba(141, 150, 159, 1); --sys-controls-hoverPrimary: rgba(188, 195, 208, .4); --sys-controls-hoverAlternative: rgba(242, 243, 247, .12); --sys-accent-active: rgba(0, 124, 255, 1); --sys-accent-positive: rgba(38, 205, 88, 1); --sys-accent-warning: rgba(250, 192, 49, 1); --sys-accent-negative: rgba(249, 87, 33, 1); --sys-accent-highlight: rgba(151, 71, 255, 1); --sys-accent-activeInverted: rgba(69, 182, 252, 1); --sys-accent-positiveInverted: rgba(116, 223, 139, 1); --sys-accent-warningInverted: rgba(250, 214, 125, 1); --sys-accent-negativeInverted: rgba(250, 138, 100, 1); --sys-accent-notification: rgba(255, 0, 50, 1); --sys-brand-MTSRed: rgba(255, 0, 50, 1); --sys-brand-MTSRed50: rgba(255, 0, 50, .5); --sys-ecosystemBackground-invertedElevated: rgba(67, 74, 81, 1); --sys-ecosystemBackground-AI: linear-gradient(263.75deg, #994BFF .49%, #C09AFF 99.05%); --sys-ecosystemText-AI: linear-gradient(263.75deg, #785BC2 .49%, #9941FF 99.05%); --comp-buttons-hover-secondary: rgba(229, 231, 237); --comp-buttons-hover-negative: rgba(229, 231, 237); --comp-buttons-background-secondary: rgba(242, 243, 247, 1); --comp-buttons-background-negative: rgba(242, 243, 247, 1); --comp-chips-background-primary: rgba(242, 243, 247, 1); --comp-chips-background-secondary: rgba(255, 255, 255, 1); --comp-chips-background-selected: rgba(29, 32, 35, 1); --comp-chips-background-disabled: rgba(188, 195, 208, .5); --comp-chips-hover-primary: rgba(188, 195, 208, .25); --comp-chips-hover-selected: rgba(242, 243, 247, .12); --comp-badge-background-onPrimaryBg: rgba(242, 243, 247, 1); --comp-badge-background-onSecondaryBg: rgba(255, 255, 255, 1); --comp-avatar-color: rgba(129, 149, 227, 1); --comp-avatar-size-06: 80px; --comp-avatar-size-05: 64px; --comp-avatar-size-04: 52px; --comp-avatar-size-03: 44px; --comp-avatar-size-02: 32px; --comp-avatar-size-01: 24px; --comp-segmentedControl-background-onPrimaryBg: rgba(242, 243, 247, 1); --comp-segmentedControl-background-onSecondaryBg: rgba(255, 255, 255, 1); --comp-segmentedControl-indicator-onPrimaryBg: rgba(255, 255, 255, 1); --comp-segmentedControl-indicator-onSecondaryBg: rgba(242, 243, 247, 1); } [data-theme=dark] { --sys-background-primary: rgba(0, 0, 0, 1); --sys-background-lower: rgba(0, 0, 0, 1); --sys-background-primaryElevated: rgba(29, 32, 35, 1); --sys-background-modal: rgba(44, 49, 53, 1); --sys-background-stroke: rgba(127, 140, 153, .35); --sys-background-secondary: rgba(98, 108, 119, .25); --sys-background-secondaryElevated: rgba(98, 108, 119, .25); --sys-background-overlay: rgba(29, 32, 35, .9); --sys-background-overlayAlternative: rgba(0, 0, 0, .64); --sys-background-inverted: rgba(255, 255, 255, 1); --sys-background-hover: rgba(242, 243, 247, .2); --sys-background-bar: rgba(0, 0, 0, .7); --sys-background-disabled: rgba(98, 108, 119, .15); --sys-background-strokeDisabled: rgba(127, 140, 153, .1); --sys-background-activeSoft: rgba(40, 63, 97, 1); --sys-background-positiveSoft: rgba(50, 78, 55, 1); --sys-background-warningSoft: rgba(72, 68, 46, 1); --sys-background-negativeSoft: rgba(91, 52, 46, 1); --sys-background-highlightSoft: rgba(82, 54, 84, 1); --sys-text-primary: rgba(250, 250, 250, 1); --sys-text-secondary: rgba(150, 159, 168, 1); --sys-text-tertiary: rgba(98, 108, 119, 1); --sys-text-inverted: rgba(29, 32, 35, 1); --sys-text-positive: rgba(116, 223, 139, 1); --sys-text-negative: rgba(255, 160, 128, 1); --sys-text-primaryLink: rgba(69, 182, 252, 1); --sys-text-primaryLinkInverted: rgba(0, 112, 229, 1); --sys-text-secondaryLink: rgba(150, 159, 168, 1); --sys-text-visitedLink: rgba(183, 103, 183, 1); --sys-text-inactiveTabbar: rgba(255, 255, 255, .46); --sys-text-activeStrong: rgba(136, 207, 255, 1); --sys-text-positiveStrong: rgba(140, 242, 162, 1); --sys-text-warningStrong: rgba(250, 238, 158, 1); --sys-text-negativeStrong: rgba(255, 183, 158, 1); --sys-text-highlightStrong: rgba(225, 193, 255, 1); --sys-icons-primary: rgba(250, 250, 250, 1); --sys-icons-secondary: rgba(150, 159, 168, 1); --sys-icons-tertiary: rgba(98, 108, 119, 1); --sys-icons-inverted: rgba(29, 32, 35, 1); --sys-controls-primaryActive: rgba(255, 0, 50, 1); --sys-controls-secondaryActive: rgba(255, 255, 255, 1); --sys-controls-tertiaryActive: rgba(127, 140, 153, .35); --sys-controls-blur: rgba(255, 255, 255, .08); --sys-controls-stroke: rgba(99, 107, 114, 1); --sys-controls-inactive: rgba(127, 140, 153, .35); --sys-controls-alternative: rgba(127, 140, 153, .35); --sys-controls-activeTabbar: rgba(255, 255, 255, 1); --sys-controls-inactiveTabbar: rgba(255, 255, 255, .42); --sys-controls-hoverPrimary: rgba(188, 195, 208, .4); --sys-controls-hoverAlternative: rgba(188, 195, 208, .4); --sys-accent-active: rgba(69, 182, 252, 1); --sys-accent-positive: rgba(116, 223, 139, 1); --sys-accent-warning: rgba(250, 214, 125, 1); --sys-accent-negative: rgba(250, 138, 100, 1); --sys-accent-highlight: rgba(151, 71, 255, 1); --sys-accent-activeInverted: rgba(0, 124, 255, 1); --sys-accent-positiveInverted: rgba(38, 205, 88, 1); --sys-accent-warningInverted: rgba(250, 192, 49, 1); --sys-accent-negativeInverted: rgba(249, 87, 33, 1); --sys-accent-notification: rgba(255, 0, 50, 1); --sys-brand-MTSRed: rgba(255, 0, 50, 1); --sys-brand-MTSRed50: rgba(255, 0, 50, .5); --sys-ecosystemBackground-invertedElevated: rgba(242, 243, 247, 1); --sys-ecosystemBackground-AI: linear-gradient(263.75deg, #994BFF .49%, #C09AFF 99.05%); --sys-ecosystemText-AI: linear-gradient(263.75deg, #B781F5 .49%, #BBAFFF 99.05%); --comp-buttons-hover-secondary: rgba(84, 88, 93); --comp-buttons-hover-negative: rgba(84, 88, 93); --comp-buttons-background-secondary: rgba(127, 140, 153, .35); --comp-buttons-background-negative: rgba(127, 140, 153, .35); --comp-chips-background-primary: rgba(127, 140, 153, .35); --comp-chips-background-secondary: rgba(127, 140, 153, .35); --comp-chips-background-selected: rgba(255, 255, 255, 1); --comp-chips-background-disabled: rgba(127, 140, 153, .35); --comp-chips-hover-primary: rgba(242, 243, 247, .2); --comp-chips-hover-selected: rgba(188, 195, 208, .4); --comp-badge-background-onPrimaryBg: rgba(127, 140, 153, .35); --comp-badge-background-onSecondaryBg: rgba(127, 140, 153, .35); --comp-avatar-color: rgba(129, 149, 227, 1); --comp-segmentedControl-background-onPrimaryBg: rgba(127, 140, 153, .35); --comp-segmentedControl-background-onSecondaryBg: rgba(127, 140, 153, .35); --comp-segmentedControl-indicator-onPrimaryBg: rgba(127, 140, 153, .35); --comp-segmentedControl-indicator-onSecondaryBg: rgba(127, 140, 153, .35); }