.hds-mode--dark { --hds-color-accent-border-quiet: var(--hds-color-action-border-quiet); --hds-color-accent-border-solid: var(--hds-color-action-bg-solid); --hds-color-accent-charm-bg: var(--hds-color-action-bg-solid); --hds-color-accent-charm-gradientEnd: var( --hds-color-accentColorMode-default-icon-gradientEnd ); --hds-color-accent-charm-gradientMiddle: var( --hds-color-accentColorMode-default-icon-gradientMiddle ); --hds-color-accent-charm-gradientStart: var( --hds-color-accentColorMode-default-icon-gradientStart ); --hds-color-accent-icon-solid: var(--hds-color-action-icon-solid); --hds-color-accent-icon-solidAlt: var( --hds-color-accentColorMode-default-icon-solidAlt ); --hds-color-accent-surface-solid: var(--hds-color-action-bg-solid); --hds-color-accent-surface-subdued: var(--hds-color-action-bg-subdued); --hds-color-accent-surface-subduedAlt: var( --hds-color-accentColorMode-default-surface-subduedAlt ); --hds-color-accentColorMode-default-icon-gradientEnd: #564dfe; --hds-color-accentColorMode-default-icon-gradientMiddle: #5e4cfe; --hds-color-accentColorMode-default-icon-gradientStart: #864cff; --hds-color-accentColorMode-default-icon-solidAlt: var( --hds-color-surface-bg-quiet ); --hds-color-accentColorMode-default-surface-subduedAlt: var( --hds-color-action-bg-solid ); --hds-color-accentColorMode-lemon-border-quiet: var( --hds-color-core-lemon-500 ); --hds-color-accentColorMode-lemon-icon-gradientEnd: #ff9014; --hds-color-accentColorMode-lemon-icon-gradientMiddle: #ffaf2d; --hds-color-accentColorMode-lemon-icon-gradientStart: #ffd552; --hds-color-accentColorMode-lemon-icon-solid: var(--hds-color-core-lemon-200); --hds-color-accentColorMode-lemon-icon-solidAlt: var( --hds-color-surface-bg-quiet ); --hds-color-accentColorMode-lemon-surface-subdued: var( --hds-color-core-lemon-800 ); --hds-color-accentColorMode-lemon-surface-subduedAlt: var( --hds-color-core-lemon-200 ); --hds-color-accentColorMode-magenta-border-quiet: var( --hds-color-core-magenta-600 ); --hds-color-accentColorMode-magenta-icon-gradientEnd: #b262f9; --hds-color-accentColorMode-magenta-icon-gradientMiddle: #f96bee; --hds-color-accentColorMode-magenta-icon-gradientStart: #f98bf9; --hds-color-accentColorMode-magenta-icon-solid: var( --hds-color-core-magenta-350 ); --hds-color-accentColorMode-magenta-icon-solidAlt: var( --hds-color-surface-bg-quiet ); --hds-color-accentColorMode-magenta-surface-subdued: var( --hds-color-core-magenta-800 ); --hds-color-accentColorMode-magenta-surface-subduedAlt: var( --hds-color-core-magenta-350 ); --hds-color-accentColorMode-orange-border-quiet: var( --hds-color-core-orange-600 ); --hds-color-accentColorMode-orange-icon-gradientEnd: #fd5d7c; --hds-color-accentColorMode-orange-icon-gradientMiddle: #fd6252; --hds-color-accentColorMode-orange-icon-gradientStart: #fe8c2d; --hds-color-accentColorMode-orange-icon-solid: var( --hds-color-core-orange-350 ); --hds-color-accentColorMode-orange-icon-solidAlt: var( --hds-color-surface-bg-quiet ); --hds-color-accentColorMode-orange-surface-subdued: var( --hds-color-core-orange-800 ); --hds-color-accentColorMode-orange-surface-subduedAlt: var( --hds-color-core-orange-350 ); --hds-color-accentColorMode-ruby-border-quiet: var(--hds-color-core-ruby-600); --hds-color-accentColorMode-ruby-icon-gradientEnd: #f03ca4; --hds-color-accentColorMode-ruby-icon-gradientMiddle: #ea2261; --hds-color-accentColorMode-ruby-icon-gradientStart: #f84c31; --hds-color-accentColorMode-ruby-icon-solid: var(--hds-color-core-ruby-400); --hds-color-accentColorMode-ruby-icon-solidAlt: var( --hds-color-surface-bg-quiet ); --hds-color-accentColorMode-ruby-surface-subdued: var( --hds-color-core-ruby-800 ); --hds-color-accentColorMode-ruby-surface-subduedAlt: var( --hds-color-core-ruby-600 ); --hds-color-action-bg-disabled: #23356ea6; --hds-color-action-bg-quiet: var(--hds-color-core-brandDark-800); --hds-color-action-bg-quietHover: var(--hds-color-core-brandDark-700); --hds-color-action-bg-solid: var(--hds-color-core-brandDark-600); --hds-color-action-bg-solidHover: var(--hds-color-core-brandDark-500); --hds-color-action-bg-subdued: var(--hds-color-core-brandDark-700); --hds-color-action-bg-subduedHover: var(--hds-color-core-brandDark-600); --hds-color-action-bg-translucent: #ffffffa6; --hds-color-action-bg-transparent: #ffffff00; --hds-color-action-border-disabled: var(--hds-color-util-border-subdued); --hds-color-action-border-quiet: var(--hds-color-core-brandDark-600); --hds-color-action-border-solid: var(--hds-color-util-action-fg-solid); --hds-color-action-border-solidHover: var(--hds-color-core-neutralDark-25); --hds-color-action-border-subdued: var(--hds-color-core-brandDark-600); --hds-color-action-focus-inner-quiet: var(--hds-color-surface-bg-quiet); --hds-color-action-focus-inner-subdued: var(--hds-color-surface-bg-subdued); --hds-color-action-focus-outer: var(--hds-color-core-brandDark-300); --hds-color-action-focus-surface: #ffffff00; --hds-color-action-icon-disabled: var(--hds-color-core-neutralDark-600); --hds-color-action-icon-navigation-soft: var(--hds-color-util-text-soft); --hds-color-action-icon-navigation-solid: var(--hds-color-util-text-solid); --hds-color-action-icon-navigation-subdued: var( --hds-color-util-text-subdued ); --hds-color-action-icon-onQuiet: var(--hds-color-util-action-fg-onAlpha); --hds-color-action-icon-onSolid: var(--hds-color-util-black); --hds-color-action-icon-onSubdued: var(--hds-color-util-action-fg-onAlpha); --hds-color-action-icon-onTranslucent: var( --hds-color-util-action-fg-onAlpha ); --hds-color-action-icon-onTransparent: var(--hds-color-util-action-fg-solid); --hds-color-action-icon-solid: var(--hds-color-util-action-fg-solid); --hds-color-action-icon-solidAlternate: var(--hds-color-util-black); --hds-color-action-icon-solidAlternateHover: var( --hds-color-util-action-fg-solid ); --hds-color-action-icon-solidHover: var(--hds-color-core-brandDark-200); --hds-color-action-text-disabled: var(--hds-color-util-text-inactive); --hds-color-action-text-onQuiet: var(--hds-color-util-action-fg-onAlpha); --hds-color-action-text-onSolid: var(--hds-color-util-black); --hds-color-action-text-onSubdued: var(--hds-color-util-action-fg-onAlpha); --hds-color-action-text-onTranslucent: var( --hds-color-util-action-fg-onAlpha ); --hds-color-action-text-onTransparent: var(--hds-color-util-action-fg-solid); --hds-color-action-text-secondary: var(--hds-color-util-black); --hds-color-action-text-solid: var(--hds-color-util-action-fg-solid); --hds-color-action-text-solidAlternate: var(--hds-color-util-black); --hds-color-action-text-solidAlternateHover: var( --hds-color-util-action-fg-solid ); --hds-color-action-text-solidHover: var(--hds-color-core-brandDark-200); --hds-color-button-primary-bg: var(--hds-color-action-bg-solid); --hds-color-button-primary-bgDisabled: var(--hds-color-action-bg-disabled); --hds-color-button-primary-bgHover: var(--hds-color-action-bg-solidHover); --hds-color-button-primary-icon: var(--hds-color-util-black); --hds-color-button-primary-iconDisabled: var( --hds-color-action-icon-disabled ); --hds-color-button-primary-iconHover: var(--hds-color-util-black); --hds-color-button-primary-text: var(--hds-color-action-text-onSolid); --hds-color-button-primary-textDisabled: var( --hds-color-action-text-disabled ); --hds-color-button-primary-textHover: var(--hds-color-action-text-onSolid); --hds-color-button-secondary-bg: var(--hds-color-core-global-transparent); --hds-color-button-secondary-bgHover: var( --hds-color-core-global-transparent ); --hds-color-button-secondary-border: var(--hds-color-core-brandDark-600-a70); --hds-color-button-secondary-borderDisabled: var( --hds-color-action-border-disabled ); --hds-color-button-secondary-borderHover: var(--hds-color-core-brandDark-500); --hds-color-button-secondary-borderOnSubdued: var( --hds-color-core-brandDark-600-a70 ); --hds-color-button-secondary-icon: var(--hds-color-action-icon-solid); --hds-color-button-secondary-iconHover: var( --hds-color-action-icon-solidHover ); --hds-color-button-secondary-text: var( --hds-color-action-text-solidAlternate ); --hds-color-button-secondary-textDisabled: var( --hds-color-action-text-disabled ); --hds-color-button-secondary-textHover: var( --hds-color-action-text-solidAlternate ); --hds-color-button-ui-bg: var(--hds-color-action-bg-quiet); --hds-color-button-ui-bgHover: var(--hds-color-action-bg-quietHover); --hds-color-button-ui-bgOnSubdued: var(--hds-color-action-bg-subdued); --hds-color-button-ui-bgOnSubduedHover: var( --hds-color-action-bg-subduedHover ); --hds-color-button-ui-borderDisabled: var(--hds-color-action-border-disabled); --hds-color-button-ui-icon: var(--hds-color-action-icon-solid); --hds-color-button-ui-iconDisabled: var(--hds-color-action-icon-disabled); --hds-color-button-ui-iconHover: var(--hds-color-action-icon-solidHover); --hds-color-heading-solid: var(--hds-color-core-neutral-0); --hds-color-heading-subdued: var(--hds-color-core-neutralDark-400); --hds-color-icon-emphasized: var(--hds-color-util-black); --hds-color-icon-error: var(--hds-color-core-error-500); --hds-color-icon-solid: var(--hds-color-core-neutralDark-300); --hds-color-icon-subdued: var(--hds-color-core-neutralDark-400); --hds-color-icon-success: var(--hds-color-core-success-400); --hds-color-icon-surface: var(--hds-color-core-neutralDark-800); --hds-color-input-bg-accent: var(--hds-color-core-brandDark-500); --hds-color-input-bg-default: #0d17380d; --hds-color-input-bg-disabled: var(--hds-color-action-bg-disabled); --hds-color-input-bg-focus: #0000001a; --hds-color-input-bg-hover: #17105559; --hds-color-input-bg-listboxIcon: var(--hds-color-core-neutralDark-900); --hds-color-input-bg-popover: var(--hds-color-core-neutralDark-800); --hds-color-input-bg-popoverTransparent: #23356e00; --hds-color-input-bg-quiet: var(--hds-color-core-neutralDark-700); --hds-color-input-bg-selectorActive: var(--hds-color-core-brandDark-500); --hds-color-input-bg-solid: var(--hds-color-core-neutralDark-990); --hds-color-input-border-accent: var(--hds-color-core-brandDark-500); --hds-color-input-border-default: #44556699; --hds-color-input-border-disabled: var(--hds-color-action-border-disabled); --hds-color-input-border-error: var(--hds-color-core-error-400); --hds-color-input-border-focus: var(--hds-color-core-brandDark-500); --hds-color-input-border-selected: var(--hds-color-core-brandDark-500); --hds-color-input-icon-disabled: var(--hds-color-core-neutralDark-600); --hds-color-input-icon-onSolid: var(--hds-color-util-black); --hds-color-input-icon-solid: var(--hds-color-util-action-fg-solid); --hds-color-input-icon-solidAlternate: var(--hds-color-util-black); --hds-color-input-popover-border: var(--hds-color-core-global-transparent); --hds-color-input-popover-divider: #45639d99; --hds-color-input-selector-bg-available: var( --hds-color-core-global-transparent ); --hds-color-input-selector-bg-availableHover: var( --hds-color-core-neutralDark-990 ); --hds-color-input-selector-bg-disabled: var(--hds-color-core-neutralDark-600); --hds-color-input-selector-bg-range: var(--hds-color-core-neutralDark-900); --hds-color-input-selector-bg-selected: var(--hds-color-core-brandDark-500); --hds-color-input-selector-bg-selectedHover: var( --hds-color-core-brandDark-600 ); --hds-color-input-selector-icon-disabledOnSolid: var( --hds-color-input-bg-popover ); --hds-color-input-selector-text-available: var(--hds-color-input-text-solid); --hds-color-input-selector-text-availableHover: var( --hds-color-core-brandDark-50 ); --hds-color-input-selector-text-current: var(--hds-color-util-black); --hds-color-input-selector-text-disabled: var( --hds-color-input-text-disabled ); --hds-color-input-selector-text-range: var(--hds-color-input-text-solid); --hds-color-input-selector-text-rangeDisabled: var( --hds-color-input-text-disabled ); --hds-color-input-selector-text-rangeHover: var( --hds-color-core-brandDark-50 ); --hds-color-input-selector-text-selected: var( --hds-color-core-neutralDark-25 ); --hds-color-input-selector-text-selectedDisabled: var( --hds-color-input-bg-popover ); --hds-color-input-text-disabled: var(--hds-color-util-text-inactive); --hds-color-input-text-error: var(--hds-color-core-error-400); --hds-color-input-text-label: var(--hds-color-core-neutralDark-200); --hds-color-input-text-placeholder: var(--hds-color-core-neutralDark-600); --hds-color-input-text-popover: var(--hds-color-core-brandDark-100); --hds-color-input-text-selected: var(--hds-color-core-brandDark-100); --hds-color-input-text-solid: var(--hds-color-core-brandDark-200); --hds-color-shadow-xs-bottom: #0d173833; --hds-color-shadow-xs-top: #0d173826; --hds-color-shadow-sm-bottom: #0d173833; --hds-color-shadow-sm-top: #0d173826; --hds-color-shadow-md-bottom: #0d173833; --hds-color-shadow-md-top: #0d173826; --hds-color-shadow-lg-bottom: #0d173833; --hds-color-shadow-lg-top: #0d173826; --hds-color-shadow-xl-bottom: #0d173833; --hds-color-shadow-xl-top: #0d173826; --hds-color-shadow-popoverBottom: #0d173826; --hds-color-shadow-popoverTop: #0d173833; --hds-color-surface-bg-quiet: var(--hds-color-util-white); --hds-color-surface-bg-subdued: var(--hds-color-core-neutralDark-950); --hds-color-surface-bg-subduedAdaptive: #2645c826; --hds-color-surface-border-quiet: var(--hds-color-core-neutralDark-900); --hds-color-text-quiet: var(--hds-color-core-neutralDark-500); --hds-color-text-soft: var(--hds-color-core-neutralDark-300); --hds-color-text-solid: var(--hds-color-core-neutral-0); --hds-color-text-subdued: var(--hds-color-core-neutralDark-400); --hds-color-util-accent-lemon-50: var(--hds-color-core-lemon-800); --hds-color-util-accent-lemon-100: var(--hds-color-core-lemon-500); --hds-color-util-accent-lemon-200: var(--hds-color-core-lemon-300); --hds-color-util-accent-lemon-300: var(--hds-color-core-lemon-200); --hds-color-util-accent-lemon-500: var(--hds-color-core-lemon-100); --hds-color-util-accent-lemon-800: var(--hds-color-core-lemon-25); --hds-color-util-accent-magenta-50: var(--hds-color-core-magenta-800); --hds-color-util-accent-magenta-100: var(--hds-color-core-magenta-600); --hds-color-util-accent-magenta-350: var(--hds-color-core-magenta-350); --hds-color-util-accent-magenta-600: var(--hds-color-core-magenta-100); --hds-color-util-accent-magenta-800: var(--hds-color-core-magenta-50); --hds-color-util-accent-orange-50: var(--hds-color-core-orange-800); --hds-color-util-accent-orange-100: var(--hds-color-core-orange-600); --hds-color-util-accent-orange-350: var(--hds-color-core-orange-350); --hds-color-util-accent-orange-600: var(--hds-color-core-orange-100); --hds-color-util-accent-orange-800: var(--hds-color-core-orange-50); --hds-color-util-accent-ruby-50: var(--hds-color-core-ruby-800); --hds-color-util-accent-ruby-100: var(--hds-color-core-ruby-600); --hds-color-util-accent-ruby-400: var(--hds-color-core-ruby-400); --hds-color-util-accent-ruby-600: var(--hds-color-core-ruby-100); --hds-color-util-accent-ruby-800: var(--hds-color-core-ruby-50); --hds-color-util-action-bg-emphasized: var(--hds-color-core-brandDark-400); --hds-color-util-action-bg-max: var(--hds-color-core-brandDark-200); --hds-color-util-action-bg-min: #2c248480; --hds-color-util-action-bg-quiet: #362baa99; --hds-color-util-action-bg-soft: var(--hds-color-core-brandDark-600); --hds-color-util-action-bg-solid: var(--hds-color-core-brandDark-500); --hds-color-util-action-bg-subdued: var(--hds-color-core-brandDark-700); --hds-color-util-action-border-emphasized: var(--hds-color-core-brandDark-75); --hds-color-util-action-border-max: var(--hds-color-core-brandDark-50); --hds-color-util-action-border-quiet: var(--hds-color-core-brandDark-600); --hds-color-util-action-border-solid: var(--hds-color-core-brandDark-200); --hds-color-util-action-border-subdued: var(--hds-color-core-brandDark-400); --hds-color-util-action-fg-onAlpha: var(--hds-color-core-brandDark-300); --hds-color-util-action-fg-onSolid: var(--hds-color-util-black); --hds-color-util-action-fg-solid: var(--hds-color-core-brandDark-400); --hds-color-util-action-fg-solidAlternate: var(--hds-color-util-black); --hds-color-util-action-fg-solidAlternateHover: var( --hds-color-core-brandDark-200 ); --hds-color-util-action-fg-solidHover: var(--hds-color-util-black); --hds-color-util-action-icon-emphasized: var(--hds-color-core-brandDark-75); --hds-color-util-action-icon-max: var(--hds-color-core-brandDark-25); --hds-color-util-action-icon-min: var(--hds-color-core-brandDark-700); --hds-color-util-action-icon-quiet: var(--hds-color-core-brandDark-600); --hds-color-util-action-icon-soft: var(--hds-color-core-brandDark-300); --hds-color-util-action-icon-solid: var(--hds-color-core-brandDark-200); --hds-color-util-action-icon-subdued: var(--hds-color-core-brandDark-400); --hds-color-util-action-text-emphasized: var(--hds-color-core-brandDark-75); --hds-color-util-action-text-max: var(--hds-color-core-neutral-0); --hds-color-util-action-text-min: var(--hds-color-core-neutralDark-990); --hds-color-util-action-text-soft: var(--hds-color-core-brandDark-300); --hds-color-util-action-text-solid: var(--hds-color-core-brandDark-200); --hds-color-util-aura-h241Shadow: var(--hds-color-core-brandDark-925); --hds-color-util-bg-min: var(--hds-color-core-neutralDark-990); --hds-color-util-bg-quiet: var(--hds-color-core-neutralDark-950); --hds-color-util-bg-soft: var(--hds-color-core-neutralDark-800); --hds-color-util-bg-subdued: #273f7380; --hds-color-util-black: var(--hds-color-core-neutral-0); --hds-color-util-border-emphasized: var(--hds-color-util-black); --hds-color-util-border-quiet: var(--hds-color-core-neutralDark-800); --hds-color-util-border-soft: var(--hds-color-core-neutralDark-300); --hds-color-util-border-solid: var(--hds-color-core-neutralDark-100); --hds-color-util-border-subdued: var(--hds-color-core-neutralDark-700); --hds-color-util-brand-25: var(--hds-color-core-brandDark-975); --hds-color-util-brand-50: var(--hds-color-core-brandDark-950); --hds-color-util-brand-75: var(--hds-color-core-brandDark-925); --hds-color-util-brand-100: var(--hds-color-core-brandDark-900); --hds-color-util-brand-200: var(--hds-color-core-brandDark-800); --hds-color-util-brand-300: var(--hds-color-core-brandDark-700); --hds-color-util-brand-400: var(--hds-color-core-brandDark-600); --hds-color-util-brand-500: var(--hds-color-core-brandDark-500); --hds-color-util-brand-600: var(--hds-color-core-brandDark-400); --hds-color-util-brand-700: var(--hds-color-core-brandDark-300); --hds-color-util-brand-800: var(--hds-color-core-brandDark-200); --hds-color-util-brand-900: var(--hds-color-core-brandDark-100); --hds-color-util-brand-925: var(--hds-color-core-brandDark-75); --hds-color-util-brand-950: var(--hds-color-core-brandDark-50); --hds-color-util-brand-975: var(--hds-color-core-brandDark-25); --hds-color-util-error-100: var(--hds-color-core-error-600); --hds-color-util-error-400: var(--hds-color-core-error-400); --hds-color-util-error-500: var(--hds-color-core-error-400); --hds-color-util-error-600: var(--hds-color-core-error-100); --hds-color-util-neutral-0: var(--hds-color-core-neutralDark-990); --hds-color-util-neutral-25: var(--hds-color-core-neutralDark-975); --hds-color-util-neutral-50: var(--hds-color-core-neutralDark-950); --hds-color-util-neutral-100: var(--hds-color-core-neutralDark-900); --hds-color-util-neutral-200: var(--hds-color-core-neutralDark-800); --hds-color-util-neutral-300: var(--hds-color-core-neutralDark-700); --hds-color-util-neutral-400: var(--hds-color-core-neutralDark-600); --hds-color-util-neutral-500: var(--hds-color-core-neutralDark-500); --hds-color-util-neutral-600: var(--hds-color-core-neutralDark-400); --hds-color-util-neutral-700: var(--hds-color-core-neutralDark-300); --hds-color-util-neutral-800: var(--hds-color-core-neutralDark-200); --hds-color-util-neutral-900: var(--hds-color-core-neutralDark-100); --hds-color-util-neutral-950: var(--hds-color-core-neutralDark-50); --hds-color-util-neutral-975: var(--hds-color-core-neutralDark-25); --hds-color-util-neutral-990: var(--hds-color-core-neutral-0); --hds-color-util-success-100: var(--hds-color-core-success-600); --hds-color-util-success-400: var(--hds-color-core-success-400); --hds-color-util-success-600: var(--hds-color-core-success-100); --hds-color-util-text-inactive: var(--hds-color-core-neutralDark-600); --hds-color-util-text-quiet: var(--hds-color-core-neutralDark-500); --hds-color-util-text-soft: var(--hds-color-core-neutralDark-300); --hds-color-util-text-solid: var(--hds-color-core-neutral-0); --hds-color-util-text-subdued: var(--hds-color-core-neutralDark-400); --hds-color-util-white: var(--hds-color-core-neutralDark-990); --hds-shadow-xs-bottom-blur: 4px; --hds-shadow-xs-bottom-offset-x: 0px; --hds-shadow-xs-bottom-offset-y: 1px; --hds-shadow-xs-bottom-spread: 0px; --hds-shadow-xs-top-blur: 10px; --hds-shadow-xs-top-offset-x: 0px; --hds-shadow-xs-top-offset-y: 2px; --hds-shadow-xs-top-spread: 0px; --hds-shadow-sm-bottom-blur: 8px; --hds-shadow-sm-bottom-offset-x: 0px; --hds-shadow-sm-bottom-offset-y: 2px; --hds-shadow-sm-bottom-spread: 0px; --hds-shadow-sm-top-blur: 14px; --hds-shadow-sm-top-offset-x: 0px; --hds-shadow-sm-top-offset-y: 5px; --hds-shadow-sm-top-spread: 0px; --hds-shadow-md-bottom-blur: 8px; --hds-shadow-md-bottom-offset-x: 0px; --hds-shadow-md-bottom-offset-y: 4px; --hds-shadow-md-bottom-spread: 0px; --hds-shadow-md-top-blur: 22px; --hds-shadow-md-top-offset-x: 0px; --hds-shadow-md-top-offset-y: 6px; --hds-shadow-md-top-spread: 0px; --hds-shadow-lg-bottom-blur: 20px; --hds-shadow-lg-bottom-offset-x: 0px; --hds-shadow-lg-bottom-offset-y: 5px; --hds-shadow-lg-bottom-spread: -2px; --hds-shadow-lg-top-blur: 40px; --hds-shadow-lg-top-offset-x: 0px; --hds-shadow-lg-top-offset-y: 15px; --hds-shadow-lg-top-spread: -2px; --hds-shadow-xl-bottom-blur: 60px; --hds-shadow-xl-bottom-offset-x: 0px; --hds-shadow-xl-bottom-offset-y: 10px; --hds-shadow-xl-bottom-spread: -16px; --hds-shadow-xl-top-blur: 80px; --hds-shadow-xl-top-offset-x: 0px; --hds-shadow-xl-top-offset-y: 20px; --hds-shadow-xl-top-spread: -16px; --hds-size-input-popover-border-width: 0px; } .hds-accent--default { --hds-color-accent-border-quiet: var(--hds-color-action-border-quiet); --hds-color-accent-border-solid: var(--hds-color-action-bg-solid); --hds-color-accent-charm-bg: var(--hds-color-action-bg-solid); --hds-color-accent-charm-gradientEnd: var( --hds-color-accentColorMode-default-icon-gradientEnd ); --hds-color-accent-charm-gradientMiddle: var( --hds-color-accentColorMode-default-icon-gradientMiddle ); --hds-color-accent-charm-gradientStart: var( --hds-color-accentColorMode-default-icon-gradientStart ); --hds-color-accent-icon-solid: var(--hds-color-action-icon-solid); --hds-color-accent-icon-solidAlt: var( --hds-color-accentColorMode-default-icon-solidAlt ); --hds-color-accent-surface-solid: var(--hds-color-action-bg-solid); --hds-color-accent-surface-subdued: var(--hds-color-action-bg-subdued); --hds-color-accent-surface-subduedAlt: var( --hds-color-accentColorMode-default-surface-subduedAlt ); } .hds-accent--lemon { --hds-color-accent-border-quiet: var( --hds-color-accentColorMode-lemon-border-quiet ); --hds-color-accent-border-solid: var(--hds-color-util-accent-lemon-200); --hds-color-accent-charm-bg: var( --hds-color-accentColorMode-lemon-icon-solid ); --hds-color-accent-charm-gradientEnd: var( --hds-color-accentColorMode-lemon-icon-gradientEnd ); --hds-color-accent-charm-gradientMiddle: var( --hds-color-accentColorMode-lemon-icon-gradientMiddle ); --hds-color-accent-charm-gradientStart: var( --hds-color-accentColorMode-lemon-icon-gradientStart ); --hds-color-accent-icon-solid: var( --hds-color-accentColorMode-lemon-icon-solid ); --hds-color-accent-icon-solidAlt: var( --hds-color-accentColorMode-lemon-icon-solidAlt ); --hds-color-accent-surface-solid: var(--hds-color-util-accent-lemon-200); --hds-color-accent-surface-subdued: var( --hds-color-accentColorMode-lemon-surface-subdued ); --hds-color-accent-surface-subduedAlt: var( --hds-color-accentColorMode-lemon-surface-subduedAlt ); } .hds-accent--magenta { --hds-color-accent-border-quiet: var( --hds-color-accentColorMode-magenta-border-quiet ); --hds-color-accent-border-solid: var(--hds-color-util-accent-magenta-350); --hds-color-accent-charm-bg: var( --hds-color-accentColorMode-magenta-icon-solid ); --hds-color-accent-charm-gradientEnd: var( --hds-color-accentColorMode-magenta-icon-gradientEnd ); --hds-color-accent-charm-gradientMiddle: var( --hds-color-accentColorMode-magenta-icon-gradientMiddle ); --hds-color-accent-charm-gradientStart: var( --hds-color-accentColorMode-magenta-icon-gradientStart ); --hds-color-accent-icon-solid: var( --hds-color-accentColorMode-magenta-icon-solid ); --hds-color-accent-icon-solidAlt: var( --hds-color-accentColorMode-magenta-icon-solidAlt ); --hds-color-accent-surface-solid: var(--hds-color-util-accent-magenta-350); --hds-color-accent-surface-subdued: var( --hds-color-accentColorMode-magenta-surface-subdued ); --hds-color-accent-surface-subduedAlt: var( --hds-color-accentColorMode-magenta-surface-subduedAlt ); } .hds-accent--orange { --hds-color-accent-border-quiet: var( --hds-color-accentColorMode-orange-border-quiet ); --hds-color-accent-border-solid: var(--hds-color-util-accent-orange-350); --hds-color-accent-charm-bg: var( --hds-color-accentColorMode-orange-icon-solid ); --hds-color-accent-charm-gradientEnd: var( --hds-color-accentColorMode-orange-icon-gradientEnd ); --hds-color-accent-charm-gradientMiddle: var( --hds-color-accentColorMode-orange-icon-gradientMiddle ); --hds-color-accent-charm-gradientStart: var( --hds-color-accentColorMode-orange-icon-gradientStart ); --hds-color-accent-icon-solid: var( --hds-color-accentColorMode-orange-icon-solid ); --hds-color-accent-icon-solidAlt: var( --hds-color-accentColorMode-orange-icon-solidAlt ); --hds-color-accent-surface-solid: var(--hds-color-util-accent-orange-350); --hds-color-accent-surface-subdued: var( --hds-color-accentColorMode-orange-surface-subdued ); --hds-color-accent-surface-subduedAlt: var( --hds-color-accentColorMode-orange-surface-subduedAlt ); } .hds-accent--ruby { --hds-color-accent-border-quiet: var( --hds-color-accentColorMode-ruby-border-quiet ); --hds-color-accent-border-solid: var(--hds-color-util-accent-ruby-400); --hds-color-accent-charm-bg: var(--hds-color-accentColorMode-ruby-icon-solid); --hds-color-accent-charm-gradientEnd: var( --hds-color-accentColorMode-ruby-icon-gradientEnd ); --hds-color-accent-charm-gradientMiddle: var( --hds-color-accentColorMode-ruby-icon-gradientMiddle ); --hds-color-accent-charm-gradientStart: var( --hds-color-accentColorMode-ruby-icon-gradientStart ); --hds-color-accent-icon-solid: var( --hds-color-accentColorMode-ruby-icon-solid ); --hds-color-accent-icon-solidAlt: var( --hds-color-accentColorMode-ruby-icon-solidAlt ); --hds-color-accent-surface-solid: var(--hds-color-util-accent-ruby-400); --hds-color-accent-surface-subdued: var( --hds-color-accentColorMode-ruby-surface-subdued ); --hds-color-accent-surface-subduedAlt: var( --hds-color-accentColorMode-ruby-surface-subduedAlt ); } :root { --hds-font-family: "'Plus Jakarta Sans', 'Inter', sans-serif", "SF Pro Display", sans-serif; --hds-font-weight-normal: 300; --hds-font-weight-bold: 400; --hds-font-family-code: "'Inter', monospace", "SFMono-Regular", monospace; --hds-shadow-xs: var(--hds-shadow-xs-top-offset-x, 0) var(--hds-shadow-xs-top-offset-y, 2px) var(--hds-shadow-xs-top-blur, 10px) var(--hds-shadow-xs-top-spread, 0) var(--hds-color-shadow-xs-top, rgba(0, 55, 112, 0.06)), var(--hds-shadow-xs-bottom-offset-x, 0) var(--hds-shadow-xs-bottom-offset-y, 1px) var(--hds-shadow-xs-bottom-blur, 4px) var(--hds-shadow-xs-bottom-spread, 0) var(--hds-color-shadow-xs-bottom, rgba(0, 59, 137, 0.04)); --hds-shadow-sm: var(--hds-shadow-sm-top-offset-x, 0) var(--hds-shadow-sm-top-offset-y, 5px) var(--hds-shadow-sm-top-blur, 14px) var(--hds-shadow-sm-top-spread, 0) var(--hds-color-shadow-sm-top, rgba(0, 55, 112, 0.08)), var(--hds-shadow-sm-bottom-offset-x, 0) var(--hds-shadow-sm-bottom-offset-y, 2px) var(--hds-shadow-sm-bottom-blur, 8px) var(--hds-shadow-sm-bottom-spread, 0) var(--hds-color-shadow-sm-bottom, rgba(0, 59, 137, 0.05)); --hds-shadow-md: var(--hds-shadow-md-top-offset-x, 0) var(--hds-shadow-md-top-offset-y, 6px) var(--hds-shadow-md-top-blur, 22px) var(--hds-shadow-md-top-spread, 0) var(--hds-color-shadow-md-top, rgba(0, 55, 112, 0.1)), var(--hds-shadow-md-bottom-offset-x, 0) var(--hds-shadow-md-bottom-offset-y, 4px) var(--hds-shadow-md-bottom-blur, 8px) var(--hds-shadow-md-bottom-spread, 0) var(--hds-color-shadow-md-bottom, rgba(0, 59, 137, 0.02)); --hds-shadow-lg: var(--hds-shadow-lg-top-offset-x, 0) var(--hds-shadow-lg-top-offset-y, 15px) var(--hds-shadow-lg-top-blur, 40px) var(--hds-shadow-lg-top-spread, -2px) var(--hds-color-shadow-lg-top, rgba(0, 55, 112, 0.1)), var(--hds-shadow-lg-bottom-offset-x, 0) var(--hds-shadow-lg-bottom-offset-y, 5px) var(--hds-shadow-lg-bottom-blur, 20px) var(--hds-shadow-lg-bottom-spread, -2px) var(--hds-color-shadow-lg-bottom, rgba(0, 59, 137, 0.04)); --hds-shadow-xl: var(--hds-shadow-xl-top-offset-x, 0) var(--hds-shadow-xl-top-offset-y, 20px) var(--hds-shadow-xl-top-blur, 80px) var(--hds-shadow-xl-top-spread, -16px) var(--hds-color-shadow-xl-top, rgba(0, 55, 112, 0.14)), var(--hds-shadow-xl-bottom-offset-x, 0) var(--hds-shadow-xl-bottom-offset-y, 10px) var(--hds-shadow-xl-bottom-blur, 60px) var(--hds-shadow-xl-bottom-spread, -16px) var(--hds-color-shadow-xl-bottom, rgba(0, 59, 137, 0.06)); --hds-canary-grid-span-full: span 4; --hds-canary-grid-span-half: span 4; --hds-canary-grid-span-quarter: span 4; --hds-canary-dashed-border: 1px dashed var(--hds-color-surface-border-quiet); --hds-canary-ui-stroke: color-mix( in srgb, var(--hds-color-util-neutral-50) 50%, transparent ); --hds-canary-ui-mini-stroke: var(--hds-color-util-neutral-50); --hds-canary-ui-shadow: 0px 16px 32px rgba(50, 50, 93, 0.12); --hds-canary-layout-content-maxWidth-borders: calc( var(--hds-space-layout-content-maxWidth) + 2px ); --accent-gradient-color-stop-1: #bdb4ff; --accent-gradient-color-stop-2: #643afd; --accent-gradient-color-stop-3: #0066cc; --hds-canary-color-border-focus: #0066cc; } @media (min-width: 640px) { :root { --hds-canary-grid-span-full: span 8; --hds-canary-grid-span-half: span 8; --hds-canary-grid-span-quarter: span 4; } } @media (min-width: 940px) { :root { --hds-canary-grid-span-full: span 12; --hds-canary-grid-span-half: span 6; --hds-canary-grid-span-quarter: span 3; } } :where(:lang(zh)) { --hds-font-weight-normal: 400; --hds-font-weight-bold: 500; } @layer reset, base, app; @layer base { html { font-family: var(--hds-font-family); font-feature-settings: "ss01" on; } }