/* Moon UI v3.7.2 */ :root { --color-background-backdrop: var(--color-gray-alpha-72); --color-background-brand-alpha: var(--color-mystic-indigo-alpha-12); --color-background-brand-subtle: var(--color-mystic-indigo-4); --color-background-brand: var(--color-mystic-indigo-9); --color-background-caution-alpha: var(--color-orange-alpha-12); --color-background-caution-subtle: var(--color-orange-4); --color-background-caution: var(--color-orange-9); --color-background-hover: var(--color-gray-alpha-8); --color-background-info-alpha: var(--color-indigo-alpha-12); --color-background-info-subtle: var(--color-indigo-4); --color-background-info: var(--color-indigo-9); --color-background-inverse: var(--color-gray-12); --color-background-negative-alpha: var(--color-red-alpha-12); --color-background-negative-subtle: var(--color-red-4); --color-background-negative: var(--color-red-9); --color-background-neutral-alpha: var(--color-gray-alpha-12); --color-background-neutral-subtle: var(--color-gray-4); --color-background-neutral: var(--color-gray-9); --color-background-positive-alpha: var(--color-green-alpha-12); --color-background-positive-subtle: var(--color-green-4); --color-background-positive: var(--color-green-9); --color-background-primary: var(--color-gray-1); --color-background-secondary: var(--color-gray-2); --color-background-tertiary: var(--color-gray-3); --color-background-transparent: var(--color-gray-alpha-0); --color-background-ui: var(--color-gray-3); --color-border-brand-alpha: var(--color-mystic-indigo-alpha-12); --color-border-brand-subtle: var(--color-mystic-indigo-4); --color-border-brand: var(--color-mystic-indigo-9); --color-border-caution: var(--color-orange-9); --color-border-force-dark: var(--color-gray-black); --color-border-force-light: var(--color-gray-white); --color-border-info: var(--color-indigo-9); --color-border-inverse: var(--color-gray-12); --color-border-negative: var(--color-red-9); --color-border-positive: var(--color-green-9); --color-border-primary: var(--color-gray-6); --color-border-secondary: var(--color-gray-7); --color-border-ui: var(--color-gray-7); --color-icon-brand-strong: var(--color-mystic-indigo-12); --color-icon-brand-subtle: var(--color-mystic-indigo-4); --color-icon-brand: var(--color-mystic-indigo-9); --color-icon-caution-strong: var(--color-orange-12); --color-icon-caution-subtle: var(--color-orange-4); --color-icon-caution: var(--color-orange-9); --color-icon-force-dark: var(--color-gray-black); --color-icon-force-light: var(--color-gray-white); --color-icon-info-strong: var(--color-indigo-12); --color-icon-info-subtle: var(--color-indigo-4); --color-icon-info: var(--color-indigo-9); --color-icon-inverse: var(--color-gray-1); --color-icon-negative-strong: var(--color-red-12); --color-icon-negative-subtle: var(--color-red-4); --color-icon-negative: var(--color-red-9); --color-icon-on-brand: var(--color-gray-white); --color-icon-on-caution: var(--color-gray-white); --color-icon-on-info: var(--color-gray-white); --color-icon-on-negative: var(--color-gray-white); --color-icon-on-neutral: var(--color-gray-white); --color-icon-on-positive: var(--color-gray-white); --color-icon-on-ui: var(--color-gray-12); --color-icon-positive-strong: var(--color-green-12); --color-icon-positive-subtle: var(--color-green-4); --color-icon-positive: var(--color-green-9); --color-icon-primary: var(--color-gray-12); --color-icon-secondary: var(--color-gray-11); --color-text-brand-strong: var(--color-mystic-indigo-12); --color-text-brand-subtle: var(--color-mystic-indigo-4); --color-text-brand: var(--color-mystic-indigo-9); --color-text-caution-strong: var(--color-orange-12); --color-text-caution-subtle: var(--color-orange-4); --color-text-caution: var(--color-orange-9); --color-text-force-dark: var(--color-gray-black); --color-text-force-light: var(--color-gray-white); --color-text-info-strong: var(--color-indigo-12); --color-text-info-subtle: var(--color-indigo-4); --color-text-info: var(--color-indigo-9); --color-text-inverse: var(--color-gray-1); --color-text-link: var(--color-mystic-indigo-9); --color-text-negative-strong: var(--color-red-12); --color-text-negative-subtle: var(--color-red-4); --color-text-negative: var(--color-red-9); --color-text-on-brand: var(--color-gray-white); --color-text-on-caution: var(--color-gray-white); --color-text-on-info: var(--color-gray-white); --color-text-on-negative: var(--color-gray-white); --color-text-on-neutral: var(--color-gray-white); --color-text-on-positive: var(--color-gray-white); --color-text-on-ui: var(--color-gray-12); --color-text-positive-strong: var(--color-green-12); --color-text-positive-subtle: var(--color-green-4); --color-text-positive: var(--color-green-9); --color-text-primary: var(--color-gray-12); --color-text-secondary: var(--color-gray-11); --component-accordion-fill-background: var(--color-background-tertiary); --component-accordion-fill-border: var(--color-border-primary); --component-accordion-fill-icon: var(--color-icon-primary); --component-accordion-fill-stroke: var(--spacing-stroke-0); --component-accordion-fill-title: var(--color-text-primary); --component-accordion-ghost-background: var(--color-background-transparent); --component-accordion-ghost-border: var(--color-border-primary); --component-accordion-ghost-icon: var(--color-icon-primary); --component-accordion-ghost-stroke: var(--spacing-stroke-0); --component-accordion-ghost-title: var(--color-text-primary); --component-accordion-outline-background: var(--color-background-primary); --component-accordion-outline-border: var(--color-border-primary); --component-accordion-outline-icon: var(--color-icon-primary); --component-accordion-outline-stroke: var(--spacing-stroke-1); --component-accordion-outline-title: var(--color-text-primary); --component-accordion-radius-lg: var(--radius-8); --component-accordion-radius-md: var(--radius-8); --component-accordion-radius-sm: var(--radius-4); --component-accordion-radius-xl: var(--radius-8); --component-alert-fill-background: var(--context-brand-fill-background); --component-alert-fill-border: var(--context-brand-fill-border); --component-alert-fill-icon: var(--context-brand-fill-icon); --component-alert-fill-stroke: var(--spacing-stroke-0); --component-alert-fill-text: var(--context-brand-fill-text); --component-alert-outline-background: var(--context-brand-outline-background); --component-alert-outline-border: var(--context-brand-outline-border); --component-alert-outline-icon: var(--context-brand-outline-icon); --component-alert-outline-stroke: var(--spacing-stroke-1); --component-alert-outline-text: var(--context-brand-outline-text); --component-alert-radius-md: var(--radius-8); --component-alert-radius-radius: var(--radius-8); --component-alert-soft-background: var(--context-brand-soft-background); --component-alert-soft-border: var(--context-brand-soft-border); --component-alert-soft-icon: var(--context-brand-soft-icon); --component-alert-soft-stroke: var(--spacing-stroke-0); --component-alert-soft-text: var(--context-brand-soft-text); --component-authenticator-fill-background: var(--color-background-ui); --component-authenticator-fill-border: var(--color-border-ui); --component-authenticator-fill-stroke: var(--spacing-stroke-0); --component-authenticator-fill-text-default: var(--color-text-on-ui); --component-authenticator-fill-text-placeholder: var(--color-text-secondary); --component-authenticator-outline-background: var(--color-background-primary); --component-authenticator-outline-border: var(--color-border-primary); --component-authenticator-outline-stroke: var(--spacing-stroke-1); --component-authenticator-outline-text-default: var(--color-text-primary); --component-authenticator-outline-text-placeholder: var(--color-text-secondary); --component-avatar-fill-background: var(--color-background-brand); --component-avatar-fill-border: var(--color-border-brand); --component-avatar-fill-icon: var(--color-icon-on-brand); --component-avatar-fill-stroke: var(--spacing-stroke-0); --component-avatar-fill-text: var(--color-text-on-brand); --component-avatar-radius-2xl: var(--radius-8); --component-avatar-radius-lg: var(--radius-8); --component-avatar-radius-md: var(--radius-8); --component-avatar-radius-sm: var(--radius-4); --component-avatar-radius-xl: var(--radius-8); --component-avatar-radius-xs: var(--radius-4); --component-avatar-soft-background: var(--color-background-brand-subtle); --component-avatar-soft-border: var(--color-border-brand); --component-avatar-soft-icon: var(--color-icon-brand-strong); --component-avatar-soft-stroke: var(--spacing-stroke-0); --component-avatar-soft-text: var(--color-text-brand-strong); --component-backdrop-blur: var(--primitives-4); --component-backdrop-color: var(--color-gray-alpha-72); --component-badge-fill-background: var(--context-brand-fill-background); --component-badge-fill-border: var(--context-brand-fill-border); --component-badge-fill-stroke: var(--spacing-stroke-0); --component-badge-fill-text: var(--context-brand-fill-text); --component-badge-outline-background: var(--context-brand-outline-background); --component-badge-outline-border: var(--context-brand-outline-icon); --component-badge-outline-stroke: var(--spacing-stroke-1); --component-badge-outline-text: var(--context-brand-outline-text); --component-badge-soft-background: var(--context-brand-soft-background); --component-badge-soft-border: var(--context-brand-soft-border); --component-badge-soft-stroke: var(--spacing-stroke-0); --component-badge-soft-text: var(--context-brand-soft-text); --component-bottom-sheet-min-height: var(--container-height-200); --component-bottom-sheet-radius: var(--radius-8); --component-button-fill-background: var(--context-brand-fill-background); --component-button-fill-border: var(--context-brand-fill-border); --component-button-fill-icon: var(--context-brand-fill-icon); --component-button-fill-stroke: var(--spacing-stroke-0); --component-button-fill-text: var(--context-brand-fill-text); --component-button-ghost-background: var(--color-background-transparent); --component-button-ghost-border: var(--context-brand-ghost-border); --component-button-ghost-icon: var(--context-brand-ghost-icon); --component-button-ghost-stroke: var(--spacing-stroke-0); --component-button-ghost-text: var(--context-brand-ghost-text); --component-button-outline-background: var(--color-background-primary); --component-button-outline-border: var(--context-brand-outline-border); --component-button-outline-icon: var(--context-brand-outline-icon); --component-button-outline-stroke: var(--spacing-stroke-1); --component-button-outline-text: var(--context-brand-outline-text); --component-button-radius-lg: var(--radius-8); --component-button-radius-md: var(--radius-8); --component-button-radius-sm: var(--radius-4); --component-button-radius-xl: var(--radius-8); --component-button-radius-xs: var(--radius-4); --component-button-soft-background: var(--context-brand-soft-background); --component-button-soft-border: var(--context-brand-soft-border); --component-button-soft-icon: var(--context-brand-soft-icon); --component-button-soft-stroke: var(--spacing-stroke-0); --component-button-soft-text: var(--context-brand-soft-text); --component-carousel-indicator-active: var(--color-border-brand); --component-carousel-indicator-default: var(--color-border-primary); --component-checkbox-background-checked: var(--color-background-brand); --component-checkbox-background-default: var(--color-background-primary); --component-checkbox-background-indeterminate: var(--color-background-brand); --component-checkbox-border-checked: var(--color-border-brand); --component-checkbox-border-default: var(--color-border-primary); --component-checkbox-border-indeterminate: var(--color-border-brand); --component-checkbox-icon-checked: var(--color-icon-on-brand); --component-checkbox-icon-indeterminate: var(--color-icon-on-brand); --component-checkbox-radius: var(--radius-4); --component-checkbox-stroke-checked: var(--spacing-stroke-0); --component-checkbox-stroke-default: var(--spacing-stroke-1); --component-checkbox-stroke-indeterminate: var(--spacing-stroke-0); --component-chip-fill-background-active: var(--color-background-brand); --component-chip-fill-background-default: var(--color-background-tertiary); --component-chip-fill-border-active: var(--color-border-brand); --component-chip-fill-border-default: var(--color-border-primary); --component-chip-fill-icon-active: var(--color-icon-on-brand); --component-chip-fill-icon-default: var(--color-icon-primary); --component-chip-fill-stroke-active: var(--spacing-stroke-0); --component-chip-fill-stroke-default: var(--spacing-stroke-0); --component-chip-fill-text-active: var(--color-text-on-brand); --component-chip-fill-text-default: var(--color-text-primary); --component-chip-outline-background-active: var(--color-background-primary); --component-chip-outline-background-default: var(--color-background-primary); --component-chip-outline-border-active: var(--color-border-brand); --component-chip-outline-border-default: var(--color-border-primary); --component-chip-outline-icon-active: var(--color-icon-brand); --component-chip-outline-icon-default: var(--color-icon-primary); --component-chip-outline-stroke-active: var(--spacing-stroke-1); --component-chip-outline-stroke-default: var(--spacing-stroke-1); --component-chip-outline-text-active: var(--color-text-brand); --component-chip-outline-text-default: var(--color-text-primary); --component-chip-radius-md: var(--radius-8); --component-chip-radius-sm: var(--radius-4); --component-chip-soft-background-active: var(--color-background-brand-subtle); --component-chip-soft-background-default: var(--color-background-secondary); --component-chip-soft-border-active: var(--color-border-brand); --component-chip-soft-border-default: var(--color-border-primary); --component-chip-soft-icon-active: var(--color-icon-brand-strong); --component-chip-soft-icon-default: var(--color-icon-primary); --component-chip-soft-stroke-active: var(--spacing-stroke-0); --component-chip-soft-stroke-default: var(--spacing-stroke-0); --component-chip-soft-text-active: var(--color-text-brand-strong); --component-chip-soft-text-default: var(--color-text-primary); --component-circular-progress-progress: var(--color-border-brand); --component-circular-progress-track: var(--color-border-primary); --component-dialog-background: var(--color-background-primary); --component-dialog-border: var(--color-border-primary); --component-dialog-max-height: var(--container-height-800); --component-dialog-max-width: var(--container-width-672); --component-dialog-min-width: var(--container-width-320); --component-dialog-radius: var(--radius-12); --component-dialog-radius: var(--radius-8); --component-dialog-stroke: var(--spacing-stroke-0); --component-drawer-background: var(--color-background-primary); --component-drawer-border: var(--color-border-secondary); --component-drawer-max-width: var(--container-width-768); --component-drawer-min-width: var(--container-width-320); --component-drawer-radius: var(--radius-12); --component-drawer-radius: var(--radius-8); --component-drawer-stroke: var(--spacing-stroke-1); --component-dropdown-background: var(--color-background-primary); --component-dropdown-border: var(--color-border-primary); --component-dropdown-max-height: var(--container-height-480); --component-dropdown-max-width: var(--container-width-320); --component-dropdown-min-width: var(--container-width-256); --component-dropdown-radius: var(--radius-8); --component-dropdown-stroke: var(--spacing-stroke-1); --component-forms-radius-lg: var(--radius-8); --component-forms-radius-md: var(--radius-8); --component-forms-radius-sm: var(--radius-4); --component-forms-radius-xl: var(--radius-8); --component-icon-button-fill-background: var(--context-brand-fill-background); --component-icon-button-fill-border: var(--context-brand-fill-border); --component-icon-button-fill-icon: var(--context-brand-fill-icon); --component-icon-button-fill-stroke: var(--spacing-stroke-0); --component-icon-button-ghost-background: var(--color-background-transparent); --component-icon-button-ghost-border: var(--context-brand-ghost-border); --component-icon-button-ghost-icon: var(--context-brand-ghost-icon); --component-icon-button-ghost-stroke: var(--spacing-stroke-0); --component-icon-button-outline-background: var(--color-background-primary); --component-icon-button-outline-border: var(--context-brand-outline-border); --component-icon-button-outline-icon: var(--context-brand-outline-icon); --component-icon-button-outline-stroke: var(--spacing-stroke-1); --component-icon-button-soft-background: var(--context-brand-soft-background); --component-icon-button-soft-border: var(--context-brand-soft-border); --component-icon-button-soft-icon: var(--context-brand-soft-icon); --component-icon-button-soft-stroke: var(--spacing-stroke-0); --component-input-fill-background: var(--color-background-tertiary); --component-input-fill-border: var(--color-border-primary); --component-input-fill-icon-default: var(--color-icon-primary); --component-input-fill-icon-placeholder: var(--color-icon-primary); --component-input-fill-stroke: var(--spacing-stroke-0); --component-input-fill-text-default: var(--color-text-primary); --component-input-fill-text-placeholder: var(--color-text-secondary); --component-input-outline-background: var(--color-background-primary); --component-input-outline-border: var(--color-border-primary); --component-input-outline-icon-default: var(--color-icon-primary); --component-input-outline-icon-placeholder: var(--color-icon-primary); --component-input-outline-stroke: var(--spacing-stroke-1); --component-input-outline-text-default: var(--color-text-primary); --component-input-outline-text-placeholder: var(--color-text-secondary); --component-linear-progress-progress: var(--color-border-brand); --component-linear-progress-track: var(--color-border-primary); --component-list-background-default: var(--color-background-transparent); --component-list-background-selected: var(--color-background-transparent); --component-list-icon-default: var(--color-icon-primary); --component-list-icon-selected: var(--color-icon-secondary); --component-list-text-default: var(--color-text-primary); --component-list-text-selected: var(--color-text-secondary); --component-loader-progress: var(--context-brand-fill-background); --component-loader-track: var(--color-background-tertiary); --component-menu-background-default: var(--color-background-transparent); --component-menu-background-selected: var(--color-background-brand-alpha); --component-menu-border-default: var(--color-border-primary); --component-menu-border-selected: var(--color-background-brand); --component-menu-icon-default: var(--color-icon-primary); --component-menu-icon-selected: var(--color-icon-brand); --component-menu-radius-lg: var(--radius-8); --component-menu-radius-md: var(--radius-8); --component-menu-radius-sm: var(--radius-4); --component-menu-stroke-default: var(--spacing-stroke-0); --component-menu-stroke-selected: var(--spacing-stroke-0); --component-menu-text-default: var(--color-text-primary); --component-menu-text-selected: var(--color-text-brand); --component-pagination-background-active: var(--color-background-brand); --component-pagination-background-default: var(--color-background-transparent); --component-pagination-text-active: var(--color-text-on-brand); --component-pagination-text-default: var(--color-text-primary); --component-radio-background-checked: var(--color-background-brand); --component-radio-background-default: var(--color-background-primary); --component-radio-border-checked: var(--color-border-brand); --component-radio-border-default: var(--color-border-primary); --component-radio-icon-checked: var(--color-icon-on-brand); --component-radio-stroke-checked: var(--spacing-stroke-0); --component-radio-stroke-default: var(--spacing-stroke-1); --component-segmented-control-segment-background-active: var(--color-background-tertiary); --component-segmented-control-segment-background-default: var(--color-background-transparent); --component-segmented-control-segment-border-active: var(--color-border-primary); --component-segmented-control-segment-border-default: var(--color-border-primary); --component-segmented-control-segment-icon-active: var(--color-icon-primary); --component-segmented-control-segment-icon-default: var(--color-icon-primary); --component-segmented-control-segment-radius-md: var(--radius-4); --component-segmented-control-segment-radius-sm: var(--radius-4); --component-segmented-control-segment-radius-xs: var(--radius-2); --component-segmented-control-segment-stroke-active: var(--spacing-stroke-0); --component-segmented-control-segment-stroke-default: var(--spacing-stroke-0); --component-segmented-control-segment-text-active: var(--color-text-primary); --component-segmented-control-segment-text-default: var(--color-text-primary); --component-segmented-control-track-background: var(--color-background-primary); --component-segmented-control-track-border: var(--color-border-primary); --component-segmented-control-track-radius-lg: var(--radius-8); --component-segmented-control-track-radius-md: var(--radius-8); --component-segmented-control-track-radius-sm: var(--radius-4); --component-segmented-control-track-stroke: var(--spacing-stroke-1); --component-select-fill-background: var(--color-background-tertiary); --component-select-fill-border: var(--color-border-primary); --component-select-fill-icon-default: var(--color-icon-primary); --component-select-fill-icon-placeholder: var(--color-icon-primary); --component-select-fill-stroke: var(--spacing-stroke-0); --component-select-fill-text-default: var(--color-text-primary); --component-select-fill-text-placeholder: var(--color-text-secondary); --component-select-outline-background: var(--color-background-primary); --component-select-outline-border: var(--color-border-primary); --component-select-outline-icon-default: var(--color-icon-primary); --component-select-outline-icon-placeholder: var(--color-icon-primary); --component-select-outline-stroke: var(--spacing-stroke-1); --component-select-outline-text-default: var(--color-text-primary); --component-select-outline-text-placeholder: var(--color-text-secondary); --component-slider-knob-background: var(--color-icon-force-light); --component-slider-progress-background: var(--color-background-brand); --component-slider-progress-border: var(--color-border-brand); --component-slider-stroke: var(--spacing-stroke-1); --component-slider-text: var(--color-text-primary); --component-slider-track-background: var(--color-background-primary); --component-slider-track-border: var(--color-border-primary); --component-snackbar-fill-background: var(--context-brand-fill-background); --component-snackbar-fill-border: var(--context-brand-fill-border); --component-snackbar-fill-icon: var(--context-brand-fill-icon); --component-snackbar-fill-max-width: var(--container-width-384); --component-snackbar-fill-stroke: var(--spacing-stroke-0); --component-snackbar-fill-text: var(--context-brand-fill-text); --component-snackbar-radius: var(--radius-8); --component-snackbar-soft-background: var(--context-brand-soft-background); --component-snackbar-soft-border: var(--context-brand-soft-border); --component-snackbar-soft-icon: var(--context-brand-soft-icon); --component-snackbar-soft-max-width: var(--container-width-384); --component-snackbar-soft-stroke: var(--spacing-stroke-0); --component-snackbar-soft-text: var(--context-brand-soft-text); --component-switch-background-checked: var(--color-background-positive); --component-switch-background-default: var(--color-background-primary); --component-switch-border-checked: var(--color-border-positive); --component-switch-border-default: var(--color-border-primary); --component-switch-icon-checked: var(--color-icon-on-positive); --component-switch-icon-unselected: var(--color-icon-secondary); --component-switch-size-padding: var(--spacing-space-2); --component-switch-stroke-checked: var(--spacing-stroke-0); --component-switch-stroke-default: var(--spacing-stroke-1); --component-tab-list-tab-background-active: var(--color-background-transparent); --component-tab-list-tab-background-default: var(--color-background-transparent); --component-tab-list-tab-border-active: var(--color-border-brand); --component-tab-list-tab-border-default: var(--color-border-primary); --component-tab-list-tab-icon-active: var(--color-icon-brand); --component-tab-list-tab-icon-default: var(--color-icon-primary); --component-tab-list-tab-radius-md: var(--radius-8); --component-tab-list-tab-radius-sm: var(--radius-4); --component-tab-list-tab-stroke-active: var(--spacing-stroke-2); --component-tab-list-tab-stroke-default: var(--spacing-stroke-0); --component-tab-list-tab-text-active: var(--color-text-brand); --component-tab-list-tab-text-default: var(--color-text-primary); --component-tab-list-track-border: var(--color-border-primary); --component-tab-list-track-stroke: var(--spacing-stroke-1); --component-tag-fill-background: var(--context-brand-fill-background); --component-tag-fill-border: var(--context-brand-fill-border); --component-tag-fill-icon: var(--context-brand-fill-icon); --component-tag-fill-stroke: var(--spacing-stroke-0); --component-tag-fill-text: var(--context-brand-fill-text); --component-tag-ghost-background: var(--color-background-transparent); --component-tag-ghost-border: var(--context-brand-ghost-border); --component-tag-ghost-icon: var(--context-brand-ghost-icon); --component-tag-ghost-stroke: var(--spacing-stroke-0); --component-tag-ghost-text: var(--context-brand-ghost-text); --component-tag-outline-background: var(--context-brand-outline-background); --component-tag-outline-border: var(--context-brand-outline-border); --component-tag-outline-icon: var(--context-brand-outline-icon); --component-tag-outline-stroke: var(--spacing-stroke-1); --component-tag-outline-text: var(--context-brand-outline-text); --component-tag-radius-2xs: var(--radius-2); --component-tag-radius-xs: var(--radius-4); --component-tag-soft-background: var(--context-brand-soft-background); --component-tag-soft-border: var(--context-brand-soft-border); --component-tag-soft-icon: var(--context-brand-soft-icon); --component-tag-soft-stroke: var(--spacing-stroke-0); --component-tag-soft-text: var(--context-brand-soft-text); --component-textarea-fill-background: var(--color-background-tertiary); --component-textarea-fill-border: var(--color-border-primary); --component-textarea-fill-stroke: var(--spacing-stroke-0); --component-textarea-fill-text-default: var(--color-text-primary); --component-textarea-fill-text-placeholder: var(--color-text-secondary); --component-textarea-outline-background: var(--color-background-primary); --component-textarea-outline-border: var(--color-border-primary); --component-textarea-outline-stroke: var(--spacing-stroke-1); --component-textarea-outline-text-default: var(--color-text-primary); --component-textarea-outline-text-placeholder: var(--color-text-secondary); --component-tooltip-background: var(--color-background-inverse); --component-tooltip-max-width: var(--container-width-288); --component-tooltip-pointer: var(--color-background-inverse); --component-tooltip-radius: var(--radius-4); --component-tooltip-text: var(--color-text-inverse); --container-height-160: 160px; --container-height-200: 200px; --container-height-240: 240px; --container-height-320: 320px; --container-height-480: 480px; --container-height-560: 560px; --container-height-640: 640px; --container-height-720: 720px; --container-height-800: 800px; --container-width-1024: 1024px; --container-width-256: 256px; --container-width-288: 288px; --container-width-320: 320px; --container-width-384: 384px; --container-width-448: 448px; --container-width-512: 512px; --container-width-576: 576px; --container-width-672: 672px; --container-width-768: 768px; --container-width-896: 896px; --context-brand-fill-background: var(--color-background-brand); --context-brand-fill-border: var(--color-border-brand); --context-brand-fill-icon: var(--color-icon-on-brand); --context-brand-fill-text: var(--color-text-on-brand); --context-brand-ghost-background: var(--color-background-transparent); --context-brand-ghost-border: var(--color-border-brand); --context-brand-ghost-icon: var(--color-icon-brand); --context-brand-ghost-text: var(--color-text-brand); --context-brand-outline-background: var(--color-background-transparent); --context-brand-outline-border: var(--color-border-brand); --context-brand-outline-icon: var(--color-icon-brand); --context-brand-outline-text: var(--color-text-brand); --context-brand-soft-background: var(--color-background-brand-alpha); --context-brand-soft-border: var(--color-border-brand); --context-brand-soft-icon: var(--color-icon-primary); --context-brand-soft-text: var(--color-text-primary); --context-caution-fill-background: var(--color-background-caution); --context-caution-fill-border: var(--color-border-caution); --context-caution-fill-icon: var(--color-icon-on-caution); --context-caution-fill-text: var(--color-text-on-caution); --context-caution-ghost-background: var(--color-background-transparent); --context-caution-ghost-border: var(--color-border-caution); --context-caution-ghost-icon: var(--color-icon-caution); --context-caution-ghost-text: var(--color-text-caution); --context-caution-outline-background: var(--color-background-transparent); --context-caution-outline-border: var(--color-border-caution); --context-caution-outline-icon: var(--color-icon-caution); --context-caution-outline-text: var(--color-text-caution); --context-caution-soft-background: var(--color-background-caution-alpha); --context-caution-soft-border: var(--color-border-caution); --context-caution-soft-icon: var(--color-icon-primary); --context-caution-soft-text: var(--color-text-primary); --context-info-fill-background: var(--color-background-info); --context-info-fill-border: var(--color-border-info); --context-info-fill-icon: var(--color-icon-on-info); --context-info-fill-text: var(--color-text-on-info); --context-info-ghost-background: var(--color-background-transparent); --context-info-ghost-border: var(--color-border-info); --context-info-ghost-icon: var(--color-icon-info); --context-info-ghost-text: var(--color-text-info); --context-info-outline-background: var(--color-background-transparent); --context-info-outline-border: var(--color-border-info); --context-info-outline-icon: var(--color-icon-info); --context-info-outline-text: var(--color-text-info); --context-info-soft-background: var(--color-background-info-alpha); --context-info-soft-border: var(--color-border-info); --context-info-soft-icon: var(--color-icon-primary); --context-info-soft-text: var(--color-text-primary); --context-negative-fill-background: var(--color-background-negative); --context-negative-fill-border: var(--color-border-negative); --context-negative-fill-icon: var(--color-icon-on-negative); --context-negative-fill-text: var(--color-text-on-negative); --context-negative-ghost-background: var(--color-background-transparent); --context-negative-ghost-border: var(--color-border-negative); --context-negative-ghost-icon: var(--color-icon-negative); --context-negative-ghost-text: var(--color-text-negative); --context-negative-outline-background: var(--color-background-transparent); --context-negative-outline-border: var(--color-border-negative); --context-negative-outline-icon: var(--color-icon-negative); --context-negative-outline-text: var(--color-text-negative); --context-negative-soft-background: var(--color-background-negative-alpha); --context-negative-soft-border: var(--color-border-negative); --context-negative-soft-icon: var(--color-icon-primary); --context-negative-soft-text: var(--color-text-primary); --context-neutral-fill-background: var(--color-background-neutral); --context-neutral-fill-border: var(--color-border-primary); --context-neutral-fill-icon: var(--color-icon-on-neutral); --context-neutral-fill-text: var(--color-text-on-neutral); --context-neutral-ghost-background: var(--color-background-transparent); --context-neutral-ghost-border: var(--color-border-primary); --context-neutral-ghost-icon: var(--color-icon-secondary); --context-neutral-ghost-text: var(--color-text-secondary); --context-neutral-outline-background: var(--color-background-transparent); --context-neutral-outline-border: var(--color-border-primary); --context-neutral-outline-icon: var(--color-icon-primary); --context-neutral-outline-text: var(--color-text-primary); --context-neutral-soft-background: var(--color-background-neutral-alpha); --context-neutral-soft-border: var(--color-border-primary); --context-neutral-soft-icon: var(--color-icon-primary); --context-neutral-soft-text: var(--color-text-primary); --context-positive-fill-background: var(--color-background-positive); --context-positive-fill-border: var(--color-border-positive); --context-positive-fill-icon: var(--color-icon-on-positive); --context-positive-fill-text: var(--color-text-on-positive); --context-positive-ghost-background: var(--color-background-transparent); --context-positive-ghost-border: var(--color-border-positive); --context-positive-ghost-icon: var(--color-icon-positive); --context-positive-ghost-text: var(--color-text-positive); --context-positive-outline-background: var(--color-background-transparent); --context-positive-outline-border: var(--color-border-positive); --context-positive-outline-icon: var(--color-icon-positive); --context-positive-outline-text: var(--color-text-positive); --context-positive-soft-background: var(--color-background-positive-alpha); --context-positive-soft-border: var(--color-border-positive); --context-positive-soft-icon: var(--color-icon-primary); --context-positive-soft-text: var(--color-text-primary); --primitives-0: 0; --primitives-104: 104px; --primitives-10: 10px; --primitives-112: 112px; --primitives-120: 120px; --primitives-128: 128px; --primitives-12: 12px; --primitives-136: 136px; --primitives-144: 144px; --primitives-14: 14px; --primitives-152: 152px; --primitives-160: 160px; --primitives-16: 16px; --primitives-18: 18px; --primitives-1: 1px; --primitives-200: 200px; --primitives-20: 20px; --primitives-22: 22px; --primitives-240: 240px; --primitives-24: 24px; --primitives-26: 26px; --primitives-280: 280px; --primitives-28: 28px; --primitives-2: 2px; --primitives-320: 320px; --primitives-32: 32px; --primitives-360: 360px; --primitives-36: 36px; --primitives-400: 400px; --primitives-40: 40px; --primitives-440: 440px; --primitives-480: 480px; --primitives-48: 48px; --primitives-4: 4px; --primitives-520: 520px; --primitives-560: 560px; --primitives-56: 56px; --primitives-600: 600px; --primitives-64: 64px; --primitives-6: 6px; --primitives-72: 72px; --primitives-80: 80px; --primitives-88: 88px; --primitives-8: 8px; --primitives-96: 96px; --primitives-9999: 9999px; --primitives-9: 9px; --primitives-neg12: -12px; --primitives-neg2: -2px; --primitives-neg4: -4px; --text-10: var(--primitives-10); --text-12: var(--primitives-12); --text-14: var(--primitives-14); --text-16: var(--primitives-16); --text-18: var(--primitives-18); --text-20: var(--primitives-20); --text-24: var(--primitives-24); --text-32: var(--primitives-32); --text-40: var(--primitives-40); --text-48: var(--primitives-48); --text-56: var(--primitives-56); --text-72: var(--primitives-72); --text-96: var(--primitives-96); --text-9: var(--primitives-9); --leading-104: var(--primitives-104); --leading-12: var(--primitives-12); --leading-14: var(--primitives-14); --leading-16: var(--primitives-16); --leading-20: var(--primitives-20); --leading-24: var(--primitives-24); --leading-26: var(--primitives-26); --leading-28: var(--primitives-28); --leading-32: var(--primitives-32); --leading-40: var(--primitives-40); --leading-48: var(--primitives-48); --leading-56: var(--primitives-56); --leading-64: var(--primitives-64); --leading-80: var(--primitives-80); --spacing-paragraph-spacing-10: var(--primitives-10); --spacing-paragraph-spacing-12: var(--primitives-12); --spacing-paragraph-spacing-16: var(--primitives-16); --spacing-paragraph-spacing-20: var(--primitives-20); --spacing-paragraph-spacing-24: var(--primitives-24); --spacing-paragraph-spacing-32: var(--primitives-32); --spacing-paragraph-spacing-40: var(--primitives-40); --spacing-paragraph-spacing-48: var(--primitives-48); --spacing-paragraph-spacing-4: var(--primitives-4); --spacing-paragraph-spacing-56: var(--primitives-56); --spacing-paragraph-spacing-6: var(--primitives-6); --spacing-paragraph-spacing-72: var(--primitives-72); --spacing-paragraph-spacing-8: var(--primitives-8); --spacing-paragraph-spacing-96: var(--primitives-96); --radius-0: var(--primitives-0); --radius-10: var(--primitives-10); --radius-12: var(--primitives-12); --radius-16: var(--primitives-16); --radius-20: var(--primitives-20); --radius-24: var(--primitives-24); --radius-2: var(--primitives-2); --radius-4: var(--primitives-4); --radius-6: var(--primitives-6); --radius-8: var(--primitives-8); --radius-9999: var(--primitives-9999); --spacing-space-0: var(--primitives-0); --spacing-space-10: var(--primitives-10); --spacing-space-12: var(--primitives-12); --spacing-space-16: var(--primitives-16); --spacing-space-20: var(--primitives-20); --spacing-space-24: var(--primitives-24); --spacing-space-2: var(--primitives-2); --spacing-space-32: var(--primitives-32); --spacing-space-40: var(--primitives-40); --spacing-space-48: var(--primitives-48); --spacing-space-4: var(--primitives-4); --spacing-space-56: var(--primitives-56); --spacing-space-64: var(--primitives-64); --spacing-space-6: var(--primitives-6); --spacing-space-72: var(--primitives-72); --spacing-space-8: var(--primitives-8); --spacing-stroke-0: var(--primitives-0); --spacing-stroke-1: var(--primitives-1); --spacing-stroke-2: var(--primitives-2); --style-focus-color: var(--color-border-brand); --style-focus-offset: var(--primitives-2); --style-focus-spread: var(--primitives-4); --font-default: "DM Sans"; --font-weight-bold: 600; --font-weight-default: 400; --font-weight-medium: 500; --style-opacity-disabled: 0.64; --style-shadow-100-layer-1-blur: var(--primitives-2); --style-shadow-100-layer-1-color: rgb(0 0 0 / 0.06); --style-shadow-100-layer-1-spread: var(--primitives-0); --style-shadow-100-layer-1-x: var(--primitives-0); --style-shadow-100-layer-1-y: var(--primitives-1); --style-shadow-100-layer-2-blur: var(--primitives-0); --style-shadow-100-layer-2-color: rgb(0 0 0 / 0); --style-shadow-100-layer-2-spread: var(--primitives-0); --style-shadow-100-layer-2-x: var(--primitives-0); --style-shadow-100-layer-2-y: var(--primitives-0); --style-shadow-200-layer-1-blur: var(--primitives-8); --style-shadow-200-layer-1-color: rgb(0 0 0 / 0.10); --style-shadow-200-layer-1-spread: var(--primitives-neg4); --style-shadow-200-layer-1-x: var(--primitives-0); --style-shadow-200-layer-1-y: var(--primitives-4); --style-shadow-200-layer-2-blur: var(--primitives-4); --style-shadow-200-layer-2-color: rgb(0 0 0 / 0.04); --style-shadow-200-layer-2-spread: var(--primitives-neg2); --style-shadow-200-layer-2-x: var(--primitives-0); --style-shadow-200-layer-2-y: var(--primitives-2); --style-shadow-300-layer-1-blur: var(--primitives-16); --style-shadow-300-layer-1-color: rgb(0 0 0 / 0.08); --style-shadow-300-layer-1-spread: var(--primitives-neg4); --style-shadow-300-layer-1-x: var(--primitives-0); --style-shadow-300-layer-1-y: var(--primitives-12); --style-shadow-300-layer-2-blur: var(--primitives-8); --style-shadow-300-layer-2-color: rgb(0 0 0 / 0.04); --style-shadow-300-layer-2-spread: var(--primitives-neg2); --style-shadow-300-layer-2-x: var(--primitives-0); --style-shadow-300-layer-2-y: var(--primitives-4); --style-shadow-400-layer-1-blur: var(--primitives-24); --style-shadow-400-layer-1-color: rgb(0 0 0 / 0.08); --style-shadow-400-layer-1-spread: var(--primitives-neg4); --style-shadow-400-layer-1-x: var(--primitives-0); --style-shadow-400-layer-1-y: var(--primitives-20); --style-shadow-400-layer-2-blur: var(--primitives-8); --style-shadow-400-layer-2-color: rgb(0 0 0 / 0.04); --style-shadow-400-layer-2-spread: var(--primitives-neg4); --style-shadow-400-layer-2-x: var(--primitives-0); --style-shadow-400-layer-2-y: var(--primitives-8); --style-shadow-500-layer-1-blur: var(--primitives-48); --style-shadow-500-layer-1-color: rgb(0 0 0 / 0.16); --style-shadow-500-layer-1-spread: var(--primitives-neg12); --style-shadow-500-layer-1-x: var(--primitives-0); --style-shadow-500-layer-1-y: var(--primitives-24); --style-shadow-500-layer-2-blur: var(--primitives-0); --style-shadow-500-layer-2-color: rgb(0 0 0 / 0); --style-shadow-500-layer-2-spread: var(--primitives-0); --style-shadow-500-layer-2-x: var(--primitives-0); --style-shadow-500-layer-2-y: var(--primitives-0); --style-shadow-600-layer-1-blur: var(--primitives-64); --style-shadow-600-layer-1-color: rgb(0 0 0 / 0.16); --style-shadow-600-layer-1-spread: var(--primitives-neg12); --style-shadow-600-layer-1-x: var(--primitives-0); --style-shadow-600-layer-1-y: var(--primitives-32); --style-shadow-600-layer-2-blur: var(--primitives-0); --style-shadow-600-layer-2-color: rgb(0 0 0 / 0); --style-shadow-600-layer-2-spread: var(--primitives-0); --style-shadow-600-layer-2-x: var(--primitives-0); --style-shadow-600-layer-2-y: var(--primitives-0); --style-text-2xl-font-size: var(--text-20); --style-text-2xl-font-weight-bold: var(--font-weight-bold); --style-text-2xl-font-weight-default: var(--font-weight-default); --style-text-2xl-font-weight-medium: var(--font-weight-medium); --style-text-2xl-line-height: var(--leading-28); --style-text-2xl-paragraph-spacing: var(--spacing-paragraph-spacing-20); --style-text-2xs-font-size: var(--text-9); --style-text-2xs-font-weight-bold: var(--font-weight-bold); --style-text-2xs-font-weight-default: var(--font-weight-default); --style-text-2xs-font-weight-medium: var(--font-weight-medium); --style-text-2xs-line-height: var(--leading-12); --style-text-2xs-paragraph-spacing: var(--spacing-paragraph-spacing-4); --style-text-3xl-font-size: var(--text-24); --style-text-3xl-font-weight-bold: var(--font-weight-bold); --style-text-3xl-font-weight-default: var(--font-weight-default); --style-text-3xl-font-weight-medium: var(--font-weight-medium); --style-text-3xl-line-height: var(--leading-32); --style-text-3xl-paragraph-spacing: var(--spacing-paragraph-spacing-24); --style-text-4xl-font-size: var(--text-32); --style-text-4xl-font-weight-bold: var(--font-weight-bold); --style-text-4xl-font-weight-default: var(--font-weight-default); --style-text-4xl-font-weight-medium: var(--font-weight-medium); --style-text-4xl-line-height: var(--leading-40); --style-text-4xl-paragraph-spacing: var(--spacing-paragraph-spacing-32); --style-text-5xl-font-size: var(--text-40); --style-text-5xl-font-weight-bold: var(--font-weight-bold); --style-text-5xl-font-weight-default: var(--font-weight-default); --style-text-5xl-font-weight-medium: var(--font-weight-medium); --style-text-5xl-line-height: var(--leading-48); --style-text-5xl-paragraph-spacing: var(--spacing-paragraph-spacing-40); --style-text-6xl-font-size: var(--text-48); --style-text-6xl-font-weight-bold: var(--font-weight-bold); --style-text-6xl-font-weight-default: var(--font-weight-default); --style-text-6xl-font-weight-medium: var(--font-weight-medium); --style-text-6xl-line-height: var(--leading-56); --style-text-6xl-paragraph-spacing: var(--spacing-paragraph-spacing-48); --style-text-7xl-font-size: var(--text-56); --style-text-7xl-font-weight-bold: var(--font-weight-bold); --style-text-7xl-font-weight-default: var(--font-weight-default); --style-text-7xl-font-weight-medium: var(--font-weight-medium); --style-text-7xl-line-height: var(--leading-64); --style-text-7xl-paragraph-spacing: var(--spacing-paragraph-spacing-56); --style-text-8xl-font-size: var(--text-72); --style-text-8xl-font-weight-bold: var(--font-weight-bold); --style-text-8xl-font-weight-default: var(--font-weight-default); --style-text-8xl-font-weight-medium: var(--font-weight-medium); --style-text-8xl-line-height: var(--leading-80); --style-text-8xl-paragraph-spacing: var(--spacing-paragraph-spacing-72); --style-text-9xl-font-size: var(--text-96); --style-text-9xl-font-weight-bold: var(--font-weight-bold); --style-text-9xl-font-weight-default: var(--font-weight-default); --style-text-9xl-font-weight-medium: var(--font-weight-medium); --style-text-9xl-line-height: var(--leading-104); --style-text-9xl-paragraph-spacing: var(--spacing-paragraph-spacing-96); --style-text-lg-font-size: var(--text-16); --style-text-lg-font-weight-bold: var(--font-weight-bold); --style-text-lg-font-weight-default: var(--font-weight-default); --style-text-lg-font-weight-medium: var(--font-weight-medium); --style-text-lg-line-height: var(--leading-24); --style-text-lg-paragraph-spacing: var(--spacing-paragraph-spacing-12); --style-text-md-font-size: var(--text-14); --style-text-md-font-weight-bold: var(--font-weight-bold); --style-text-md-font-weight-default: var(--font-weight-default); --style-text-md-font-weight-medium: var(--font-weight-medium); --style-text-md-line-height: var(--leading-20); --style-text-md-paragraph-spacing: var(--spacing-paragraph-spacing-10); --style-text-sm-font-size: var(--text-12); --style-text-sm-font-weight-bold: var(--font-weight-bold); --style-text-sm-font-weight-default: var(--font-weight-default); --style-text-sm-font-weight-medium: var(--font-weight-medium); --style-text-sm-line-height: var(--leading-16); --style-text-sm-paragraph-spacing: var(--spacing-paragraph-spacing-8); --style-text-xl-font-size: var(--text-18); --style-text-xl-font-weight-bold: var(--font-weight-bold); --style-text-xl-font-weight-default: var(--font-weight-default); --style-text-xl-font-weight-medium: var(--font-weight-medium); --style-text-xl-line-height: var(--leading-26); --style-text-xl-paragraph-spacing: var(--spacing-paragraph-spacing-16); --style-text-xs-bold: var(--font-weight-bold); --style-text-xs-default: var(--font-weight-default); --style-text-xs-font-size: var(--text-10); --style-text-xs-font-weight-bold: var(--font-weight-bold); --style-text-xs-font-weight-default: var(--font-weight-default); --style-text-xs-font-weight-medium: var(--font-weight-medium); --style-text-xs-line-height: var(--leading-14); --style-text-xs-medium: var(--font-weight-medium); --style-text-xs-paragraph-spacing: var(--spacing-paragraph-spacing-6); } @layer theme { .light-theme { --color-background-backdrop: var(--color-gray-alpha-72); --color-background-brand-alpha: var(--color-mystic-indigo-alpha-12); --color-background-brand-subtle: var(--color-mystic-indigo-4); --color-background-brand: var(--color-mystic-indigo-9); --color-background-caution-alpha: var(--color-orange-alpha-12); --color-background-caution-subtle: var(--color-orange-4); --color-background-caution: var(--color-orange-9); --color-background-hover: var(--color-gray-alpha-8); --color-background-info-alpha: var(--color-indigo-alpha-12); --color-background-info-subtle: var(--color-indigo-4); --color-background-info: var(--color-indigo-9); --color-background-inverse: var(--color-gray-12); --color-background-negative-alpha: var(--color-red-alpha-12); --color-background-negative-subtle: var(--color-red-4); --color-background-negative: var(--color-red-9); --color-background-neutral-alpha: var(--color-gray-alpha-12); --color-background-neutral-subtle: var(--color-gray-4); --color-background-neutral: var(--color-gray-9); --color-background-positive-alpha: var(--color-green-alpha-12); --color-background-positive-subtle: var(--color-green-4); --color-background-positive: var(--color-green-9); --color-background-primary: var(--color-gray-1); --color-background-secondary: var(--color-gray-2); --color-background-tertiary: var(--color-gray-3); --color-background-transparent: var(--color-gray-alpha-0); --color-background-ui: var(--color-gray-3); --color-border-brand-alpha: var(--color-mystic-indigo-alpha-12); --color-border-brand-subtle: var(--color-mystic-indigo-4); --color-border-brand: var(--color-mystic-indigo-9); --color-border-caution: var(--color-orange-9); --color-border-force-dark: var(--color-gray-black); --color-border-force-light: var(--color-gray-white); --color-border-info: var(--color-indigo-9); --color-border-inverse: var(--color-gray-12); --color-border-negative: var(--color-red-9); --color-border-positive: var(--color-green-9); --color-border-primary: var(--color-gray-6); --color-border-secondary: var(--color-gray-7); --color-border-ui: var(--color-gray-7); --color-golden-apricot-10: rgb(244 152 0); --color-golden-apricot-11: rgb(172 104 0); --color-golden-apricot-12: rgb(81 52 9); --color-golden-apricot-1: rgb(254 252 251); --color-golden-apricot-2: rgb(255 247 232); --color-golden-apricot-3: rgb(255 238 199); --color-golden-apricot-4: rgb(255 225 172); --color-golden-apricot-5: rgb(255 213 144); --color-golden-apricot-6: rgb(255 197 104); --color-golden-apricot-7: rgb(251 179 80); --color-golden-apricot-8: rgb(238 154 0); --color-golden-apricot-9: rgb(254 182 83); --color-gray-10: rgb(109 126 150); --color-gray-11: rgb(87 103 126); --color-gray-12: rgb(28 35 47); --color-gray-1: rgb(255 255 255); --color-gray-2: rgb(243 246 251); --color-gray-3: rgb(237 241 247); --color-gray-4: rgb(227 233 242); --color-gray-5: rgb(218 225 237); --color-gray-6: rgb(208 217 232); --color-gray-7: rgb(193 205 223); --color-gray-8: rgb(169 186 210); --color-gray-9: rgb(121 138 163); --color-gray-alpha-0: rgb(255 255 255 / 0); --color-gray-alpha-12: rgb(121 138 163 / 0.12); --color-gray-alpha-72: rgb(28 35 47 / 0.72); --color-gray-alpha-8: rgb(28 35 47 / 0.08); --color-gray-black: rgb(0 0 0); --color-gray-shadow-0: rgb(28 35 47 / 0); --color-gray-shadow-100: rgb(28 35 47 / 0.04); --color-gray-shadow-200: rgb(28 35 47 / 0.06); --color-gray-shadow-300: rgb(28 35 47 / 0.08); --color-gray-shadow-400: rgb(28 35 47 / 0.10); --color-gray-shadow-500: rgb(28 35 47 / 0.16); --color-gray-white: rgb(255 255 255); --color-green-10: rgb(43 154 102); --color-green-11: rgb(33 131 88); --color-green-12: rgb(25 59 45); --color-green-1: rgb(251 254 252); --color-green-2: rgb(244 251 246); --color-green-3: rgb(230 246 235); --color-green-4: rgb(214 241 223); --color-green-5: rgb(196 232 209); --color-green-6: rgb(173 221 192); --color-green-7: rgb(142 206 170); --color-green-8: rgb(91 185 139); --color-green-9: rgb(48 164 108); --color-green-alpha-12: rgb(48 164 108 / 0.12); --color-icon-brand-strong: var(--color-mystic-indigo-12); --color-icon-brand-subtle: var(--color-mystic-indigo-4); --color-icon-brand: var(--color-mystic-indigo-9); --color-icon-caution-strong: var(--color-orange-12); --color-icon-caution-subtle: var(--color-orange-4); --color-icon-caution: var(--color-orange-9); --color-icon-force-dark: var(--color-gray-black); --color-icon-force-light: var(--color-gray-white); --color-icon-info-strong: var(--color-indigo-12); --color-icon-info-subtle: var(--color-indigo-4); --color-icon-info: var(--color-indigo-9); --color-icon-inverse: var(--color-gray-1); --color-icon-negative-strong: var(--color-red-12); --color-icon-negative-subtle: var(--color-red-4); --color-icon-negative: var(--color-red-9); --color-icon-on-brand: var(--color-gray-white); --color-icon-on-caution: var(--color-gray-white); --color-icon-on-info: var(--color-gray-white); --color-icon-on-negative: var(--color-gray-white); --color-icon-on-neutral: var(--color-gray-white); --color-icon-on-positive: var(--color-gray-white); --color-icon-on-ui: var(--color-gray-12); --color-icon-positive-strong: var(--color-green-12); --color-icon-positive-subtle: var(--color-green-4); --color-icon-positive: var(--color-green-9); --color-icon-primary: var(--color-gray-12); --color-icon-secondary: var(--color-gray-11); --color-indigo-10: rgb(51 88 212); --color-indigo-11: rgb(13 116 206); --color-indigo-12: rgb(31 45 92); --color-indigo-1: rgb(253 253 254); --color-indigo-2: rgb(247 249 255); --color-indigo-3: rgb(237 242 254); --color-indigo-4: rgb(225 233 255); --color-indigo-5: rgb(210 222 255); --color-indigo-6: rgb(193 208 255); --color-indigo-7: rgb(171 189 249); --color-indigo-8: rgb(141 164 239); --color-indigo-9: rgb(62 99 221); --color-indigo-alpha-12: rgb(62 99 221 / 0.12); --color-indigo-alpha-24: rgb(62 99 221 / 0.24); --color-midnight-sapphire-10: rgb(39 147 242); --color-midnight-sapphire-11: rgb(0 113 206); --color-midnight-sapphire-12: rgb(0 49 113); --color-midnight-sapphire-1: rgb(251 253 255); --color-midnight-sapphire-2: rgb(243 250 255); --color-midnight-sapphire-3: rgb(229 244 255); --color-midnight-sapphire-4: rgb(209 238 255); --color-midnight-sapphire-5: rgb(190 228 255); --color-midnight-sapphire-6: rgb(165 215 255); --color-midnight-sapphire-7: rgb(130 198 255); --color-midnight-sapphire-8: rgb(74 173 255); --color-midnight-sapphire-9: rgb(55 159 255); --color-mystic-indigo-10: rgb(36 67 222); --color-mystic-indigo-11: rgb(43 79 233); --color-mystic-indigo-12: rgb(22 42 107); --color-mystic-indigo-1: rgb(252 253 255); --color-mystic-indigo-2: rgb(246 249 255); --color-mystic-indigo-3: rgb(235 242 255); --color-mystic-indigo-4: rgb(220 234 255); --color-mystic-indigo-5: rgb(203 223 255); --color-mystic-indigo-6: rgb(184 209 255); --color-mystic-indigo-7: rgb(157 190 255); --color-mystic-indigo-8: rgb(124 163 255); --color-mystic-indigo-9: rgb(41 75 255); --color-mystic-indigo-alpha-12: rgb(41 75 255 / 0.12); --color-orange-10: rgb(239 95 0); --color-orange-11: rgb(204 78 0); --color-orange-12: rgb(88 45 29); --color-orange-1: rgb(254 252 251); --color-orange-2: rgb(255 247 237); --color-orange-3: rgb(255 239 214); --color-orange-4: rgb(255 223 181); --color-orange-5: rgb(255 209 154); --color-orange-6: rgb(255 193 130); --color-orange-7: rgb(245 174 115); --color-orange-8: rgb(236 148 85); --color-orange-9: rgb(247 107 21); --color-orange-alpha-12: rgb(247 107 21 / 0.12); --color-plum-10: rgb(161 68 175); --color-plum-11: rgb(149 62 163); --color-plum-12: rgb(83 25 93); --color-plum-1: rgb(254 252 255); --color-plum-2: rgb(253 247 253); --color-plum-3: rgb(251 235 251); --color-plum-4: rgb(247 222 248); --color-plum-5: rgb(242 209 243); --color-plum-6: rgb(233 194 236); --color-plum-7: rgb(222 173 227); --color-plum-8: rgb(207 145 216); --color-plum-9: rgb(171 74 186); --color-red-10: rgb(220 62 66); --color-red-11: rgb(206 44 49); --color-red-12: rgb(100 23 35); --color-red-1: rgb(255 252 252); --color-red-2: rgb(255 247 247); --color-red-3: rgb(254 235 236); --color-red-4: rgb(255 219 220); --color-red-5: rgb(255 205 206); --color-red-6: rgb(253 189 190); --color-red-7: rgb(244 169 170); --color-red-8: rgb(235 142 144); --color-red-9: rgb(229 72 77); --color-red-alpha-12: rgb(229 72 77 / 0.12); --color-spice-sunset-10: rgb(234 90 62); --color-spice-sunset-11: rgb(208 72 46); --color-spice-sunset-12: rgb(88 44 35); --color-spice-sunset-1: rgb(254 252 251); --color-spice-sunset-2: rgb(255 245 243); --color-spice-sunset-3: rgb(255 234 228); --color-spice-sunset-4: rgb(255 214 202); --color-spice-sunset-5: rgb(255 200 185); --color-spice-sunset-6: rgb(255 185 167); --color-spice-sunset-7: rgb(250 167 149); --color-spice-sunset-8: rgb(239 142 122); --color-spice-sunset-9: rgb(246 104 76); --color-text-brand-strong: var(--color-mystic-indigo-12); --color-text-brand-subtle: var(--color-mystic-indigo-4); --color-text-brand: var(--color-mystic-indigo-9); --color-text-caution-strong: var(--color-orange-12); --color-text-caution-subtle: var(--color-orange-4); --color-text-caution: var(--color-orange-9); --color-text-force-dark: var(--color-gray-black); --color-text-force-light: var(--color-gray-white); --color-text-info-strong: var(--color-indigo-12); --color-text-info-subtle: var(--color-indigo-4); --color-text-info: var(--color-indigo-9); --color-text-inverse: var(--color-gray-1); --color-text-link: var(--color-mystic-indigo-9); --color-text-negative-strong: var(--color-red-12); --color-text-negative-subtle: var(--color-red-4); --color-text-negative: var(--color-red-9); --color-text-on-brand: var(--color-gray-white); --color-text-on-caution: var(--color-gray-white); --color-text-on-info: var(--color-gray-white); --color-text-on-negative: var(--color-gray-white); --color-text-on-neutral: var(--color-gray-white); --color-text-on-positive: var(--color-gray-white); --color-text-on-ui: var(--color-gray-12); --color-text-positive-strong: var(--color-green-12); --color-text-positive-subtle: var(--color-green-4); --color-text-positive: var(--color-green-9); --color-text-primary: var(--color-gray-12); --color-text-secondary: var(--color-gray-11); --component-accordion-fill-background: var(--color-background-tertiary); --component-accordion-fill-border: var(--color-border-primary); --component-accordion-fill-icon: var(--color-icon-primary); --component-accordion-fill-title: var(--color-text-primary); --component-accordion-ghost-background: var(--color-background-transparent); --component-accordion-ghost-border: var(--color-border-primary); --component-accordion-ghost-icon: var(--color-icon-primary); --component-accordion-ghost-title: var(--color-text-primary); --component-accordion-outline-background: var(--color-background-primary); --component-accordion-outline-border: var(--color-border-primary); --component-accordion-outline-icon: var(--color-icon-primary); --component-accordion-outline-title: var(--color-text-primary); --component-alert-fill-background: var(--context-brand-fill-background); --component-alert-fill-border: var(--context-brand-fill-border); --component-alert-fill-icon: var(--context-brand-fill-icon); --component-alert-fill-text: var(--context-brand-fill-text); --component-alert-outline-background: var(--context-brand-outline-background); --component-alert-outline-border: var(--context-brand-outline-border); --component-alert-outline-icon: var(--context-brand-outline-icon); --component-alert-outline-text: var(--context-brand-outline-text); --component-alert-soft-background: var(--context-brand-soft-background); --component-alert-soft-border: var(--context-brand-soft-border); --component-alert-soft-icon: var(--context-brand-soft-icon); --component-alert-soft-text: var(--context-brand-soft-text); --component-authenticator-fill-background: var(--color-background-ui); --component-authenticator-fill-border: var(--color-border-ui); --component-authenticator-fill-text-default: var(--color-text-on-ui); --component-authenticator-fill-text-placeholder: var(--color-text-secondary); --component-authenticator-outline-background: var(--color-background-primary); --component-authenticator-outline-border: var(--color-border-primary); --component-authenticator-outline-text-default: var(--color-text-primary); --component-authenticator-outline-text-placeholder: var(--color-text-secondary); --component-avatar-fill-background: var(--color-background-brand); --component-avatar-fill-border: var(--color-border-brand); --component-avatar-fill-icon: var(--color-icon-on-brand); --component-avatar-fill-text: var(--color-text-on-brand); --component-avatar-soft-background: var(--color-background-brand-subtle); --component-avatar-soft-border: var(--color-border-brand); --component-avatar-soft-icon: var(--color-icon-brand-strong); --component-avatar-soft-text: var(--color-text-brand-strong); --component-backdrop-color: var(--color-gray-alpha-72); --component-badge-fill-background: var(--context-brand-fill-background); --component-badge-fill-border: var(--context-brand-fill-border); --component-badge-fill-text: var(--context-brand-fill-text); --component-badge-outline-background: var(--context-brand-outline-background); --component-badge-outline-border: var(--context-brand-outline-icon); --component-badge-outline-text: var(--context-brand-outline-text); --component-badge-soft-background: var(--context-brand-soft-background); --component-badge-soft-border: var(--context-brand-soft-border); --component-badge-soft-text: var(--context-brand-soft-text); --component-button-fill-background: var(--context-brand-fill-background); --component-button-fill-border: var(--context-brand-fill-border); --component-button-fill-icon: var(--context-brand-fill-icon); --component-button-fill-text: var(--context-brand-fill-text); --component-button-ghost-background: var(--color-background-transparent); --component-button-ghost-border: var(--context-brand-ghost-border); --component-button-ghost-icon: var(--context-brand-ghost-icon); --component-button-ghost-text: var(--context-brand-ghost-text); --component-button-outline-background: var(--color-background-primary); --component-button-outline-border: var(--context-brand-outline-border); --component-button-outline-icon: var(--context-brand-outline-icon); --component-button-outline-text: var(--context-brand-outline-text); --component-button-soft-background: var(--context-brand-soft-background); --component-button-soft-border: var(--context-brand-soft-border); --component-button-soft-icon: var(--context-brand-soft-icon); --component-button-soft-text: var(--context-brand-soft-text); --component-carousel-indicator-active: var(--color-border-brand); --component-carousel-indicator-default: var(--color-border-primary); --component-checkbox-background-checked: var(--color-background-brand); --component-checkbox-background-default: var(--color-background-primary); --component-checkbox-background-indeterminate: var(--color-background-brand); --component-checkbox-border-checked: var(--color-border-brand); --component-checkbox-border-default: var(--color-border-primary); --component-checkbox-border-indeterminate: var(--color-border-brand); --component-checkbox-icon-checked: var(--color-icon-on-brand); --component-checkbox-icon-indeterminate: var(--color-icon-on-brand); --component-chip-fill-background-active: var(--color-background-brand); --component-chip-fill-background-default: var(--color-background-tertiary); --component-chip-fill-border-active: var(--color-border-brand); --component-chip-fill-border-default: var(--color-border-primary); --component-chip-fill-icon-active: var(--color-icon-on-brand); --component-chip-fill-icon-default: var(--color-icon-primary); --component-chip-fill-text-active: var(--color-text-on-brand); --component-chip-fill-text-default: var(--color-text-primary); --component-chip-outline-background-active: var(--color-background-primary); --component-chip-outline-background-default: var(--color-background-primary); --component-chip-outline-border-active: var(--color-border-brand); --component-chip-outline-border-default: var(--color-border-primary); --component-chip-outline-icon-active: var(--color-icon-brand); --component-chip-outline-icon-default: var(--color-icon-primary); --component-chip-outline-text-active: var(--color-text-brand); --component-chip-outline-text-default: var(--color-text-primary); --component-chip-soft-background-active: var(--color-background-brand-subtle); --component-chip-soft-background-default: var(--color-background-secondary); --component-chip-soft-border-active: var(--color-border-brand); --component-chip-soft-border-default: var(--color-border-primary); --component-chip-soft-icon-active: var(--color-icon-brand-strong); --component-chip-soft-icon-default: var(--color-icon-primary); --component-chip-soft-text-active: var(--color-text-brand-strong); --component-chip-soft-text-default: var(--color-text-primary); --component-circular-progress-progress: var(--color-border-brand); --component-circular-progress-track: var(--color-border-primary); --component-dialog-background: var(--color-background-primary); --component-dialog-border: var(--color-border-primary); --component-drawer-background: var(--color-background-primary); --component-drawer-border: var(--color-border-secondary); --component-dropdown-background: var(--color-background-primary); --component-dropdown-border: var(--color-border-primary); --component-icon-button-fill-background: var(--context-brand-fill-background); --component-icon-button-fill-border: var(--context-brand-fill-border); --component-icon-button-fill-icon: var(--context-brand-fill-icon); --component-icon-button-ghost-background: var(--color-background-transparent); --component-icon-button-ghost-border: var(--context-brand-ghost-border); --component-icon-button-ghost-icon: var(--context-brand-ghost-icon); --component-icon-button-outline-background: var(--color-background-primary); --component-icon-button-outline-border: var(--context-brand-outline-border); --component-icon-button-outline-icon: var(--context-brand-outline-icon); --component-icon-button-soft-background: var(--context-brand-soft-background); --component-icon-button-soft-border: var(--context-brand-soft-border); --component-icon-button-soft-icon: var(--context-brand-soft-icon); --component-input-fill-background: var(--color-background-tertiary); --component-input-fill-border: var(--color-border-primary); --component-input-fill-icon-default: var(--color-icon-primary); --component-input-fill-icon-placeholder: var(--color-icon-primary); --component-input-fill-text-default: var(--color-text-primary); --component-input-fill-text-placeholder: var(--color-text-secondary); --component-input-outline-background: var(--color-background-primary); --component-input-outline-border: var(--color-border-primary); --component-input-outline-icon-default: var(--color-icon-primary); --component-input-outline-icon-placeholder: var(--color-icon-primary); --component-input-outline-text-default: var(--color-text-primary); --component-input-outline-text-placeholder: var(--color-text-secondary); --component-linear-progress-progress: var(--color-border-brand); --component-linear-progress-track: var(--color-border-primary); --component-list-background-default: var(--color-background-transparent); --component-list-background-selected: var(--color-background-transparent); --component-list-icon-default: var(--color-icon-primary); --component-list-icon-selected: var(--color-icon-secondary); --component-list-text-default: var(--color-text-primary); --component-list-text-selected: var(--color-text-secondary); --component-loader-progress: var(--context-brand-fill-background); --component-loader-track: var(--color-background-tertiary); --component-menu-background-default: var(--color-background-transparent); --component-menu-background-selected: var(--color-background-brand-alpha); --component-menu-border-default: var(--color-border-primary); --component-menu-border-selected: var(--color-background-brand); --component-menu-icon-default: var(--color-icon-primary); --component-menu-icon-selected: var(--color-icon-brand); --component-menu-text-default: var(--color-text-primary); --component-menu-text-selected: var(--color-text-brand); --component-pagination-background-active: var(--color-background-brand); --component-pagination-background-default: var(--color-background-transparent); --component-pagination-text-active: var(--color-text-on-brand); --component-pagination-text-default: var(--color-text-primary); --component-radio-background-checked: var(--color-background-brand); --component-radio-background-default: var(--color-background-primary); --component-radio-border-checked: var(--color-border-brand); --component-radio-border-default: var(--color-border-primary); --component-radio-icon-checked: var(--color-icon-on-brand); --component-segmented-control-segment-background-active: var(--color-background-tertiary); --component-segmented-control-segment-background-default: var(--color-background-transparent); --component-segmented-control-segment-border-active: var(--color-border-primary); --component-segmented-control-segment-border-default: var(--color-border-primary); --component-segmented-control-segment-icon-active: var(--color-icon-primary); --component-segmented-control-segment-icon-default: var(--color-icon-primary); --component-segmented-control-segment-text-active: var(--color-text-primary); --component-segmented-control-segment-text-default: var(--color-text-primary); --component-segmented-control-track-background: var(--color-background-primary); --component-segmented-control-track-border: var(--color-border-primary); --component-select-fill-background: var(--color-background-tertiary); --component-select-fill-border: var(--color-border-primary); --component-select-fill-icon-default: var(--color-icon-primary); --component-select-fill-icon-placeholder: var(--color-icon-primary); --component-select-fill-text-default: var(--color-text-primary); --component-select-fill-text-placeholder: var(--color-text-secondary); --component-select-outline-background: var(--color-background-primary); --component-select-outline-border: var(--color-border-primary); --component-select-outline-icon-default: var(--color-icon-primary); --component-select-outline-icon-placeholder: var(--color-icon-primary); --component-select-outline-text-default: var(--color-text-primary); --component-select-outline-text-placeholder: var(--color-text-secondary); --component-slider-knob-background: var(--color-icon-force-light); --component-slider-progress-background: var(--color-background-brand); --component-slider-progress-border: var(--color-border-brand); --component-slider-text: var(--color-text-primary); --component-slider-track-background: var(--color-background-primary); --component-slider-track-border: var(--color-border-primary); --component-snackbar-fill-background: var(--context-brand-fill-background); --component-snackbar-fill-border: var(--context-brand-fill-border); --component-snackbar-fill-icon: var(--context-brand-fill-icon); --component-snackbar-fill-text: var(--context-brand-fill-text); --component-snackbar-soft-background: var(--context-brand-soft-background); --component-snackbar-soft-border: var(--context-brand-soft-border); --component-snackbar-soft-icon: var(--context-brand-soft-icon); --component-snackbar-soft-text: var(--context-brand-soft-text); --component-switch-background-checked: var(--color-background-positive); --component-switch-background-default: var(--color-background-primary); --component-switch-border-checked: var(--color-border-positive); --component-switch-border-default: var(--color-border-primary); --component-switch-icon-checked: var(--color-icon-on-positive); --component-switch-icon-unselected: var(--color-icon-secondary); --component-tab-list-tab-background-active: var(--color-background-transparent); --component-tab-list-tab-background-default: var(--color-background-transparent); --component-tab-list-tab-border-active: var(--color-border-brand); --component-tab-list-tab-border-default: var(--color-border-primary); --component-tab-list-tab-icon-active: var(--color-icon-brand); --component-tab-list-tab-icon-default: var(--color-icon-primary); --component-tab-list-tab-text-active: var(--color-text-brand); --component-tab-list-tab-text-default: var(--color-text-primary); --component-tab-list-track-border: var(--color-border-primary); --component-tag-fill-background: var(--context-brand-fill-background); --component-tag-fill-border: var(--context-brand-fill-border); --component-tag-fill-icon: var(--context-brand-fill-icon); --component-tag-fill-text: var(--context-brand-fill-text); --component-tag-ghost-background: var(--color-background-transparent); --component-tag-ghost-border: var(--context-brand-ghost-border); --component-tag-ghost-icon: var(--context-brand-ghost-icon); --component-tag-ghost-text: var(--context-brand-ghost-text); --component-tag-outline-background: var(--context-brand-outline-background); --component-tag-outline-border: var(--context-brand-outline-border); --component-tag-outline-icon: var(--context-brand-outline-icon); --component-tag-outline-text: var(--context-brand-outline-text); --component-tag-soft-background: var(--context-brand-soft-background); --component-tag-soft-border: var(--context-brand-soft-border); --component-tag-soft-icon: var(--context-brand-soft-icon); --component-tag-soft-text: var(--context-brand-soft-text); --component-textarea-fill-background: var(--color-background-tertiary); --component-textarea-fill-border: var(--color-border-primary); --component-textarea-fill-text-default: var(--color-text-primary); --component-textarea-fill-text-placeholder: var(--color-text-secondary); --component-textarea-outline-background: var(--color-background-primary); --component-textarea-outline-border: var(--color-border-primary); --component-textarea-outline-text-default: var(--color-text-primary); --component-textarea-outline-text-placeholder: var(--color-text-secondary); --component-tooltip-background: var(--color-background-inverse); --component-tooltip-pointer: var(--color-background-inverse); --component-tooltip-text: var(--color-text-inverse); --context-brand-fill-background: var(--color-background-brand); --context-brand-fill-border: var(--color-border-brand); --context-brand-fill-icon: var(--color-icon-on-brand); --context-brand-fill-text: var(--color-text-on-brand); --context-brand-ghost-background: var(--color-background-transparent); --context-brand-ghost-border: var(--color-border-brand); --context-brand-ghost-icon: var(--color-icon-brand); --context-brand-ghost-text: var(--color-text-brand); --context-brand-outline-background: var(--color-background-transparent); --context-brand-outline-border: var(--color-border-brand); --context-brand-outline-icon: var(--color-icon-brand); --context-brand-outline-text: var(--color-text-brand); --context-brand-soft-background: var(--color-background-brand-alpha); --context-brand-soft-border: var(--color-border-brand); --context-brand-soft-icon: var(--color-icon-primary); --context-brand-soft-text: var(--color-text-primary); --context-caution-fill-background: var(--color-background-caution); --context-caution-fill-border: var(--color-border-caution); --context-caution-fill-icon: var(--color-icon-on-caution); --context-caution-fill-text: var(--color-text-on-caution); --context-caution-ghost-background: var(--color-background-transparent); --context-caution-ghost-border: var(--color-border-caution); --context-caution-ghost-icon: var(--color-icon-caution); --context-caution-ghost-text: var(--color-text-caution); --context-caution-outline-background: var(--color-background-transparent); --context-caution-outline-border: var(--color-border-caution); --context-caution-outline-icon: var(--color-icon-caution); --context-caution-outline-text: var(--color-text-caution); --context-caution-soft-background: var(--color-background-caution-alpha); --context-caution-soft-border: var(--color-border-caution); --context-caution-soft-icon: var(--color-icon-primary); --context-caution-soft-text: var(--color-text-primary); --context-info-fill-background: var(--color-background-info); --context-info-fill-border: var(--color-border-info); --context-info-fill-icon: var(--color-icon-on-info); --context-info-fill-text: var(--color-text-on-info); --context-info-ghost-background: var(--color-background-transparent); --context-info-ghost-border: var(--color-border-info); --context-info-ghost-icon: var(--color-icon-info); --context-info-ghost-text: var(--color-text-info); --context-info-outline-background: var(--color-background-transparent); --context-info-outline-border: var(--color-border-info); --context-info-outline-icon: var(--color-icon-info); --context-info-outline-text: var(--color-text-info); --context-info-soft-background: var(--color-background-info-alpha); --context-info-soft-border: var(--color-border-info); --context-info-soft-icon: var(--color-icon-primary); --context-info-soft-text: var(--color-text-primary); --context-negative-fill-background: var(--color-background-negative); --context-negative-fill-border: var(--color-border-negative); --context-negative-fill-icon: var(--color-icon-on-negative); --context-negative-fill-text: var(--color-text-on-negative); --context-negative-ghost-background: var(--color-background-transparent); --context-negative-ghost-border: var(--color-border-negative); --context-negative-ghost-icon: var(--color-icon-negative); --context-negative-ghost-text: var(--color-text-negative); --context-negative-outline-background: var(--color-background-transparent); --context-negative-outline-border: var(--color-border-negative); --context-negative-outline-icon: var(--color-icon-negative); --context-negative-outline-text: var(--color-text-negative); --context-negative-soft-background: var(--color-background-negative-alpha); --context-negative-soft-border: var(--color-border-negative); --context-negative-soft-icon: var(--color-icon-primary); --context-negative-soft-text: var(--color-text-primary); --context-neutral-fill-background: var(--color-background-neutral); --context-neutral-fill-border: var(--color-border-primary); --context-neutral-fill-icon: var(--color-icon-on-neutral); --context-neutral-fill-text: var(--color-text-on-neutral); --context-neutral-ghost-background: var(--color-background-transparent); --context-neutral-ghost-border: var(--color-border-primary); --context-neutral-ghost-icon: var(--color-icon-secondary); --context-neutral-ghost-text: var(--color-text-secondary); --context-neutral-outline-background: var(--color-background-transparent); --context-neutral-outline-border: var(--color-border-primary); --context-neutral-outline-icon: var(--color-icon-primary); --context-neutral-outline-text: var(--color-text-primary); --context-neutral-soft-background: var(--color-background-neutral-alpha); --context-neutral-soft-border: var(--color-border-primary); --context-neutral-soft-icon: var(--color-icon-primary); --context-neutral-soft-text: var(--color-text-primary); --context-positive-fill-background: var(--color-background-positive); --context-positive-fill-border: var(--color-border-positive); --context-positive-fill-icon: var(--color-icon-on-positive); --context-positive-fill-text: var(--color-text-on-positive); --context-positive-ghost-background: var(--color-background-transparent); --context-positive-ghost-border: var(--color-border-positive); --context-positive-ghost-icon: var(--color-icon-positive); --context-positive-ghost-text: var(--color-text-positive); --context-positive-outline-background: var(--color-background-transparent); --context-positive-outline-border: var(--color-border-positive); --context-positive-outline-icon: var(--color-icon-positive); --context-positive-outline-text: var(--color-text-positive); --context-positive-soft-background: var(--color-background-positive-alpha); --context-positive-soft-border: var(--color-border-positive); --context-positive-soft-icon: var(--color-icon-primary); --context-positive-soft-text: var(--color-text-primary); --style-focus-color: var(--color-border-brand); } .dark-theme { --color-background-backdrop: var(--color-gray-alpha-72); --color-background-brand-alpha: var(--color-mystic-indigo-alpha-12); --color-background-brand-subtle: var(--color-mystic-indigo-4); --color-background-brand: var(--color-mystic-indigo-9); --color-background-caution-alpha: var(--color-orange-alpha-12); --color-background-caution-subtle: var(--color-orange-4); --color-background-caution: var(--color-orange-9); --color-background-hover: var(--color-gray-alpha-8); --color-background-info-alpha: var(--color-indigo-alpha-12); --color-background-info-subtle: var(--color-indigo-4); --color-background-info: var(--color-indigo-9); --color-background-inverse: var(--color-gray-12); --color-background-negative-alpha: var(--color-red-alpha-12); --color-background-negative-subtle: var(--color-red-4); --color-background-negative: var(--color-red-9); --color-background-neutral-alpha: var(--color-gray-alpha-12); --color-background-neutral-subtle: var(--color-gray-4); --color-background-neutral: var(--color-gray-9); --color-background-positive-alpha: var(--color-green-alpha-12); --color-background-positive-subtle: var(--color-green-4); --color-background-positive: var(--color-green-9); --color-background-primary: var(--color-gray-1); --color-background-secondary: var(--color-gray-2); --color-background-tertiary: var(--color-gray-3); --color-background-transparent: var(--color-gray-alpha-0); --color-background-ui: var(--color-gray-3); --color-border-brand-alpha: var(--color-mystic-indigo-alpha-12); --color-border-brand-subtle: var(--color-mystic-indigo-4); --color-border-brand: var(--color-mystic-indigo-9); --color-border-caution: var(--color-orange-9); --color-border-force-dark: var(--color-gray-black); --color-border-force-light: var(--color-gray-white); --color-border-info: var(--color-indigo-9); --color-border-inverse: var(--color-gray-12); --color-border-negative: var(--color-red-9); --color-border-positive: var(--color-green-9); --color-border-primary: var(--color-gray-6); --color-border-secondary: var(--color-gray-7); --color-border-ui: var(--color-gray-7); --color-golden-apricot-10: rgb(243 172 71); --color-golden-apricot-11: rgb(255 187 89); --color-golden-apricot-12: rgb(255 227 193); --color-golden-apricot-1: rgb(20 16 12); --color-golden-apricot-2: rgb(29 23 16); --color-golden-apricot-3: rgb(46 32 13); --color-golden-apricot-4: rgb(64 38 0); --color-golden-apricot-5: rgb(77 48 2); --color-golden-apricot-6: rgb(91 61 20); --color-golden-apricot-7: rgb(111 79 36); --color-golden-apricot-8: rgb(141 101 47); --color-golden-apricot-9: rgb(254 182 83); --color-gray-10: rgb(109 126 150); --color-gray-11: rgb(166 183 207); --color-gray-12: rgb(228 236 248); --color-gray-1: rgb(15 17 20); --color-gray-2: rgb(23 25 29); --color-gray-3: rgb(31 36 43); --color-gray-4: rgb(37 44 54); --color-gray-5: rgb(45 53 64); --color-gray-6: rgb(54 63 76); --color-gray-7: rgb(68 78 93); --color-gray-8: rgb(89 103 122); --color-gray-9: rgb(121 138 163); --color-gray-alpha-0: rgb(15 17 20 / 0); --color-gray-alpha-12: rgb(121 138 163 / 0.12); --color-gray-alpha-72: rgb(31 36 43 / 0.72); --color-gray-alpha-8: rgb(228 236 248 / 0.08); --color-gray-black: rgb(0 0 0); --color-gray-shadow-0: rgb(0 0 0 / 0); --color-gray-shadow-100: rgb(0 0 0 / 0.16); --color-gray-shadow-200: rgb(0 0 0 / 0.24); --color-gray-shadow-300: rgb(0 0 0 / 0.32); --color-gray-shadow-400: rgb(0 0 0 / 0.40); --color-gray-shadow-500: rgb(0 0 0 / 0.64); --color-gray-white: rgb(247 247 247); --color-green-10: rgb(51 176 116); --color-green-11: rgb(61 214 140); --color-green-12: rgb(177 241 203); --color-green-1: rgb(14 21 18); --color-green-2: rgb(18 27 23); --color-green-3: rgb(19 45 33); --color-green-4: rgb(17 59 41); --color-green-5: rgb(23 73 51); --color-green-6: rgb(32 87 62); --color-green-7: rgb(40 104 74); --color-green-8: rgb(47 124 87); --color-green-9: rgb(48 164 108); --color-green-alpha-12: rgb(48 164 108 / 0.12); --color-icon-brand-strong: var(--color-mystic-indigo-12); --color-icon-brand-subtle: var(--color-mystic-indigo-4); --color-icon-brand: var(--color-mystic-indigo-9); --color-icon-caution-strong: var(--color-orange-12); --color-icon-caution-subtle: var(--color-orange-4); --color-icon-caution: var(--color-orange-9); --color-icon-force-dark: var(--color-gray-black); --color-icon-force-light: var(--color-gray-white); --color-icon-info-strong: var(--color-indigo-12); --color-icon-info-subtle: var(--color-indigo-4); --color-icon-info: var(--color-indigo-9); --color-icon-inverse: var(--color-gray-1); --color-icon-negative-strong: var(--color-red-12); --color-icon-negative-subtle: var(--color-red-4); --color-icon-negative: var(--color-red-9); --color-icon-on-brand: var(--color-gray-white); --color-icon-on-caution: var(--color-gray-white); --color-icon-on-info: var(--color-gray-white); --color-icon-on-negative: var(--color-gray-white); --color-icon-on-neutral: var(--color-gray-white); --color-icon-on-positive: var(--color-gray-white); --color-icon-on-ui: var(--color-gray-12); --color-icon-positive-strong: var(--color-green-12); --color-icon-positive-subtle: var(--color-green-4); --color-icon-positive: var(--color-green-9); --color-icon-primary: var(--color-gray-12); --color-icon-secondary: var(--color-gray-11); --color-indigo-10: rgb(84 114 228); --color-indigo-11: rgb(158 177 255); --color-indigo-12: rgb(214 225 255); --color-indigo-1: rgb(17 19 31); --color-indigo-2: rgb(20 23 38); --color-indigo-3: rgb(24 36 73); --color-indigo-4: rgb(29 46 98); --color-indigo-5: rgb(37 57 116); --color-indigo-6: rgb(48 67 132); --color-indigo-7: rgb(58 79 151); --color-indigo-8: rgb(67 93 177); --color-indigo-9: rgb(62 99 221); --color-indigo-alpha-12: rgb(62 99 221 / 0.12); --color-indigo-alpha-24: rgb(62 99 221 / 0.48); --color-midnight-sapphire-10: rgb(39 147 242); --color-midnight-sapphire-11: rgb(109 185 255); --color-midnight-sapphire-12: rgb(200 228 255); --color-midnight-sapphire-1: rgb(8 18 28); --color-midnight-sapphire-2: rgb(14 25 37); --color-midnight-sapphire-3: rgb(8 40 70); --color-midnight-sapphire-4: rgb(0 50 98); --color-midnight-sapphire-5: rgb(0 63 116); --color-midnight-sapphire-6: rgb(11 78 134); --color-midnight-sapphire-7: rgb(25 94 157); --color-midnight-sapphire-8: rgb(30 114 188); --color-midnight-sapphire-9: rgb(55 159 255); --color-mystic-indigo-10: rgb(32 56 238); --color-mystic-indigo-11: rgb(143 179 255); --color-mystic-indigo-12: rgb(208 225 255); --color-mystic-indigo-1: rgb(10 16 32); --color-mystic-indigo-2: rgb(15 23 43); --color-mystic-indigo-3: rgb(17 33 85); --color-mystic-indigo-4: rgb(21 41 115); --color-mystic-indigo-5: rgb(27 51 136); --color-mystic-indigo-6: rgb(35 62 154); --color-mystic-indigo-7: rgb(44 74 176); --color-mystic-indigo-8: rgb(51 86 206); --color-mystic-indigo-9: rgb(41 75 255); --color-mystic-indigo-alpha-12: rgb(41 75 255 / 0.12); --color-orange-10: rgb(255 128 31); --color-orange-11: rgb(255 160 87); --color-orange-12: rgb(255 224 194); --color-orange-1: rgb(23 18 14); --color-orange-2: rgb(30 22 15); --color-orange-3: rgb(51 30 11); --color-orange-4: rgb(70 33 0); --color-orange-5: rgb(86 40 0); --color-orange-6: rgb(102 53 12); --color-orange-7: rgb(126 69 29); --color-orange-8: rgb(163 88 41); --color-orange-9: rgb(247 107 21); --color-orange-alpha-12: rgb(247 107 21 / 0.12); --color-plum-10: rgb(182 88 196); --color-plum-11: rgb(231 150 243); --color-plum-12: rgb(244 212 244); --color-plum-1: rgb(24 17 24); --color-plum-2: rgb(32 19 32); --color-plum-3: rgb(53 26 53); --color-plum-4: rgb(69 29 71); --color-plum-5: rgb(81 36 84); --color-plum-6: rgb(94 48 97); --color-plum-7: rgb(115 64 121); --color-plum-8: rgb(146 84 156); --color-plum-9: rgb(171 74 186); --color-red-10: rgb(236 93 94); --color-red-11: rgb(255 149 146); --color-red-12: rgb(255 209 217); --color-red-1: rgb(25 17 17); --color-red-2: rgb(32 19 20); --color-red-3: rgb(59 18 25); --color-red-4: rgb(80 15 28); --color-red-5: rgb(97 22 35); --color-red-6: rgb(114 35 45); --color-red-7: rgb(140 51 58); --color-red-8: rgb(181 69 72); --color-red-9: rgb(229 72 77); --color-red-alpha-12: rgb(229 72 77 / 0.12); --color-spice-sunset-10: rgb(232 92 64); --color-spice-sunset-11: rgb(255 145 120); --color-spice-sunset-12: rgb(251 211 202); --color-spice-sunset-1: rgb(22 15 14); --color-spice-sunset-2: rgb(31 21 18); --color-spice-sunset-3: rgb(56 23 16); --color-spice-sunset-4: rgb(78 21 10); --color-spice-sunset-5: rgb(94 29 16); --color-spice-sunset-6: rgb(110 42 28); --color-spice-sunset-7: rgb(134 58 43); --color-spice-sunset-8: rgb(173 76 57); --color-spice-sunset-9: rgb(246 104 76); --color-text-brand-strong: var(--color-mystic-indigo-12); --color-text-brand-subtle: var(--color-mystic-indigo-4); --color-text-brand: var(--color-mystic-indigo-9); --color-text-caution-strong: var(--color-orange-12); --color-text-caution-subtle: var(--color-orange-4); --color-text-caution: var(--color-orange-9); --color-text-force-dark: var(--color-gray-black); --color-text-force-light: var(--color-gray-white); --color-text-info-strong: var(--color-indigo-12); --color-text-info-subtle: var(--color-indigo-4); --color-text-info: var(--color-indigo-9); --color-text-inverse: var(--color-gray-1); --color-text-link: var(--color-mystic-indigo-9); --color-text-negative-strong: var(--color-red-12); --color-text-negative-subtle: var(--color-red-4); --color-text-negative: var(--color-red-9); --color-text-on-brand: var(--color-gray-white); --color-text-on-caution: var(--color-gray-white); --color-text-on-info: var(--color-gray-white); --color-text-on-negative: var(--color-gray-white); --color-text-on-neutral: var(--color-gray-white); --color-text-on-positive: var(--color-gray-white); --color-text-on-ui: var(--color-gray-12); --color-text-positive-strong: var(--color-green-12); --color-text-positive-subtle: var(--color-green-4); --color-text-positive: var(--color-green-9); --color-text-primary: var(--color-gray-12); --color-text-secondary: var(--color-gray-11); --component-accordion-fill-background: var(--color-background-tertiary); --component-accordion-fill-border: var(--color-border-primary); --component-accordion-fill-icon: var(--color-icon-primary); --component-accordion-fill-title: var(--color-text-primary); --component-accordion-ghost-background: var(--color-background-transparent); --component-accordion-ghost-border: var(--color-border-primary); --component-accordion-ghost-icon: var(--color-icon-primary); --component-accordion-ghost-title: var(--color-text-primary); --component-accordion-outline-background: var(--color-background-primary); --component-accordion-outline-border: var(--color-border-primary); --component-accordion-outline-icon: var(--color-icon-primary); --component-accordion-outline-title: var(--color-text-primary); --component-alert-fill-background: var(--context-brand-fill-background); --component-alert-fill-border: var(--context-brand-fill-border); --component-alert-fill-icon: var(--context-brand-fill-icon); --component-alert-fill-text: var(--context-brand-fill-text); --component-alert-outline-background: var(--context-brand-outline-background); --component-alert-outline-border: var(--context-brand-outline-border); --component-alert-outline-icon: var(--context-brand-outline-icon); --component-alert-outline-text: var(--context-brand-outline-text); --component-alert-soft-background: var(--context-brand-soft-background); --component-alert-soft-border: var(--context-brand-soft-border); --component-alert-soft-icon: var(--context-brand-soft-icon); --component-alert-soft-text: var(--context-brand-soft-text); --component-authenticator-fill-background: var(--color-background-ui); --component-authenticator-fill-border: var(--color-border-ui); --component-authenticator-fill-text-default: var(--color-text-on-ui); --component-authenticator-fill-text-placeholder: var(--color-text-secondary); --component-authenticator-outline-background: var(--color-background-primary); --component-authenticator-outline-border: var(--color-border-primary); --component-authenticator-outline-text-default: var(--color-text-primary); --component-authenticator-outline-text-placeholder: var(--color-text-secondary); --component-avatar-fill-background: var(--color-background-brand); --component-avatar-fill-border: var(--color-border-brand); --component-avatar-fill-icon: var(--color-icon-on-brand); --component-avatar-fill-text: var(--color-text-on-brand); --component-avatar-soft-background: var(--color-background-brand-subtle); --component-avatar-soft-border: var(--color-border-brand); --component-avatar-soft-icon: var(--color-icon-brand-strong); --component-avatar-soft-text: var(--color-text-brand-strong); --component-backdrop-color: var(--color-gray-alpha-72); --component-badge-fill-background: var(--context-brand-fill-background); --component-badge-fill-border: var(--context-brand-fill-border); --component-badge-fill-text: var(--context-brand-fill-text); --component-badge-outline-background: var(--context-brand-outline-background); --component-badge-outline-border: var(--context-brand-outline-icon); --component-badge-outline-text: var(--context-brand-outline-text); --component-badge-soft-background: var(--context-brand-soft-background); --component-badge-soft-border: var(--context-brand-soft-border); --component-badge-soft-text: var(--context-brand-soft-text); --component-button-fill-background: var(--context-brand-fill-background); --component-button-fill-border: var(--context-brand-fill-border); --component-button-fill-icon: var(--context-brand-fill-icon); --component-button-fill-text: var(--context-brand-fill-text); --component-button-ghost-background: var(--color-background-transparent); --component-button-ghost-border: var(--context-brand-ghost-border); --component-button-ghost-icon: var(--context-brand-ghost-icon); --component-button-ghost-text: var(--context-brand-ghost-text); --component-button-outline-background: var(--color-background-primary); --component-button-outline-border: var(--context-brand-outline-border); --component-button-outline-icon: var(--context-brand-outline-icon); --component-button-outline-text: var(--context-brand-outline-text); --component-button-soft-background: var(--context-brand-soft-background); --component-button-soft-border: var(--context-brand-soft-border); --component-button-soft-icon: var(--context-brand-soft-icon); --component-button-soft-text: var(--context-brand-soft-text); --component-carousel-indicator-active: var(--color-border-brand); --component-carousel-indicator-default: var(--color-border-primary); --component-checkbox-background-checked: var(--color-background-brand); --component-checkbox-background-default: var(--color-background-primary); --component-checkbox-background-indeterminate: var(--color-background-brand); --component-checkbox-border-checked: var(--color-border-brand); --component-checkbox-border-default: var(--color-border-primary); --component-checkbox-border-indeterminate: var(--color-border-brand); --component-checkbox-icon-checked: var(--color-icon-on-brand); --component-checkbox-icon-indeterminate: var(--color-icon-on-brand); --component-chip-fill-background-active: var(--color-background-brand); --component-chip-fill-background-default: var(--color-background-tertiary); --component-chip-fill-border-active: var(--color-border-brand); --component-chip-fill-border-default: var(--color-border-primary); --component-chip-fill-icon-active: var(--color-icon-on-brand); --component-chip-fill-icon-default: var(--color-icon-primary); --component-chip-fill-text-active: var(--color-text-on-brand); --component-chip-fill-text-default: var(--color-text-primary); --component-chip-outline-background-active: var(--color-background-primary); --component-chip-outline-background-default: var(--color-background-primary); --component-chip-outline-border-active: var(--color-border-brand); --component-chip-outline-border-default: var(--color-border-primary); --component-chip-outline-icon-active: var(--color-icon-brand); --component-chip-outline-icon-default: var(--color-icon-primary); --component-chip-outline-text-active: var(--color-text-brand); --component-chip-outline-text-default: var(--color-text-primary); --component-chip-soft-background-active: var(--color-background-brand-subtle); --component-chip-soft-background-default: var(--color-background-secondary); --component-chip-soft-border-active: var(--color-border-brand); --component-chip-soft-border-default: var(--color-border-primary); --component-chip-soft-icon-active: var(--color-icon-brand-strong); --component-chip-soft-icon-default: var(--color-icon-primary); --component-chip-soft-text-active: var(--color-text-brand-strong); --component-chip-soft-text-default: var(--color-text-primary); --component-circular-progress-progress: var(--color-border-brand); --component-circular-progress-track: var(--color-border-primary); --component-dialog-background: var(--color-background-primary); --component-dialog-border: var(--color-border-primary); --component-drawer-background: var(--color-background-primary); --component-drawer-border: var(--color-border-secondary); --component-dropdown-background: var(--color-background-primary); --component-dropdown-border: var(--color-border-primary); --component-icon-button-fill-background: var(--context-brand-fill-background); --component-icon-button-fill-border: var(--context-brand-fill-border); --component-icon-button-fill-icon: var(--context-brand-fill-icon); --component-icon-button-ghost-background: var(--color-background-transparent); --component-icon-button-ghost-border: var(--context-brand-ghost-border); --component-icon-button-ghost-icon: var(--context-brand-ghost-icon); --component-icon-button-outline-background: var(--color-background-primary); --component-icon-button-outline-border: var(--context-brand-outline-border); --component-icon-button-outline-icon: var(--context-brand-outline-icon); --component-icon-button-soft-background: var(--context-brand-soft-background); --component-icon-button-soft-border: var(--context-brand-soft-border); --component-icon-button-soft-icon: var(--context-brand-soft-icon); --component-input-fill-background: var(--color-background-tertiary); --component-input-fill-border: var(--color-border-primary); --component-input-fill-icon-default: var(--color-icon-primary); --component-input-fill-icon-placeholder: var(--color-icon-primary); --component-input-fill-text-default: var(--color-text-primary); --component-input-fill-text-placeholder: var(--color-text-secondary); --component-input-outline-background: var(--color-background-primary); --component-input-outline-border: var(--color-border-primary); --component-input-outline-icon-default: var(--color-icon-primary); --component-input-outline-icon-placeholder: var(--color-icon-primary); --component-input-outline-text-default: var(--color-text-primary); --component-input-outline-text-placeholder: var(--color-text-secondary); --component-linear-progress-progress: var(--color-border-brand); --component-linear-progress-track: var(--color-border-primary); --component-list-background-default: var(--color-background-transparent); --component-list-background-selected: var(--color-background-transparent); --component-list-icon-default: var(--color-icon-primary); --component-list-icon-selected: var(--color-icon-secondary); --component-list-text-default: var(--color-text-primary); --component-list-text-selected: var(--color-text-secondary); --component-loader-progress: var(--context-brand-fill-background); --component-loader-track: var(--color-background-tertiary); --component-menu-background-default: var(--color-background-transparent); --component-menu-background-selected: var(--color-background-brand-alpha); --component-menu-border-default: var(--color-border-primary); --component-menu-border-selected: var(--color-background-brand); --component-menu-icon-default: var(--color-icon-primary); --component-menu-icon-selected: var(--color-icon-brand); --component-menu-text-default: var(--color-text-primary); --component-menu-text-selected: var(--color-text-brand); --component-pagination-background-active: var(--color-background-brand); --component-pagination-background-default: var(--color-background-transparent); --component-pagination-text-active: var(--color-text-on-brand); --component-pagination-text-default: var(--color-text-primary); --component-radio-background-checked: var(--color-background-brand); --component-radio-background-default: var(--color-background-primary); --component-radio-border-checked: var(--color-border-brand); --component-radio-border-default: var(--color-border-primary); --component-radio-icon-checked: var(--color-icon-on-brand); --component-segmented-control-segment-background-active: var(--color-background-tertiary); --component-segmented-control-segment-background-default: var(--color-background-transparent); --component-segmented-control-segment-border-active: var(--color-border-primary); --component-segmented-control-segment-border-default: var(--color-border-primary); --component-segmented-control-segment-icon-active: var(--color-icon-primary); --component-segmented-control-segment-icon-default: var(--color-icon-primary); --component-segmented-control-segment-text-active: var(--color-text-primary); --component-segmented-control-segment-text-default: var(--color-text-primary); --component-segmented-control-track-background: var(--color-background-primary); --component-segmented-control-track-border: var(--color-border-primary); --component-select-fill-background: var(--color-background-tertiary); --component-select-fill-border: var(--color-border-primary); --component-select-fill-icon-default: var(--color-icon-primary); --component-select-fill-icon-placeholder: var(--color-icon-primary); --component-select-fill-text-default: var(--color-text-primary); --component-select-fill-text-placeholder: var(--color-text-secondary); --component-select-outline-background: var(--color-background-primary); --component-select-outline-border: var(--color-border-primary); --component-select-outline-icon-default: var(--color-icon-primary); --component-select-outline-icon-placeholder: var(--color-icon-primary); --component-select-outline-text-default: var(--color-text-primary); --component-select-outline-text-placeholder: var(--color-text-secondary); --component-slider-knob-background: var(--color-icon-force-light); --component-slider-progress-background: var(--color-background-brand); --component-slider-progress-border: var(--color-border-brand); --component-slider-text: var(--color-text-primary); --component-slider-track-background: var(--color-background-primary); --component-slider-track-border: var(--color-border-primary); --component-snackbar-fill-background: var(--context-brand-fill-background); --component-snackbar-fill-border: var(--context-brand-fill-border); --component-snackbar-fill-icon: var(--context-brand-fill-icon); --component-snackbar-fill-text: var(--context-brand-fill-text); --component-snackbar-soft-background: var(--context-brand-soft-background); --component-snackbar-soft-border: var(--context-brand-soft-border); --component-snackbar-soft-icon: var(--context-brand-soft-icon); --component-snackbar-soft-text: var(--context-brand-soft-text); --component-switch-background-checked: var(--color-background-positive); --component-switch-background-default: var(--color-background-primary); --component-switch-border-checked: var(--color-border-positive); --component-switch-border-default: var(--color-border-primary); --component-switch-icon-checked: var(--color-icon-on-positive); --component-switch-icon-unselected: var(--color-icon-secondary); --component-tab-list-tab-background-active: var(--color-background-transparent); --component-tab-list-tab-background-default: var(--color-background-transparent); --component-tab-list-tab-border-active: var(--color-border-brand); --component-tab-list-tab-border-default: var(--color-border-primary); --component-tab-list-tab-icon-active: var(--color-icon-brand); --component-tab-list-tab-icon-default: var(--color-icon-primary); --component-tab-list-tab-text-active: var(--color-text-brand); --component-tab-list-tab-text-default: var(--color-text-primary); --component-tab-list-track-border: var(--color-border-primary); --component-tag-fill-background: var(--context-brand-fill-background); --component-tag-fill-border: var(--context-brand-fill-border); --component-tag-fill-icon: var(--context-brand-fill-icon); --component-tag-fill-text: var(--context-brand-fill-text); --component-tag-ghost-background: var(--color-background-transparent); --component-tag-ghost-border: var(--context-brand-ghost-border); --component-tag-ghost-icon: var(--context-brand-ghost-icon); --component-tag-ghost-text: var(--context-brand-ghost-text); --component-tag-outline-background: var(--context-brand-outline-background); --component-tag-outline-border: var(--context-brand-outline-border); --component-tag-outline-icon: var(--context-brand-outline-icon); --component-tag-outline-text: var(--context-brand-outline-text); --component-tag-soft-background: var(--context-brand-soft-background); --component-tag-soft-border: var(--context-brand-soft-border); --component-tag-soft-icon: var(--context-brand-soft-icon); --component-tag-soft-text: var(--context-brand-soft-text); --component-textarea-fill-background: var(--color-background-tertiary); --component-textarea-fill-border: var(--color-border-primary); --component-textarea-fill-text-default: var(--color-text-primary); --component-textarea-fill-text-placeholder: var(--color-text-secondary); --component-textarea-outline-background: var(--color-background-primary); --component-textarea-outline-border: var(--color-border-primary); --component-textarea-outline-text-default: var(--color-text-primary); --component-textarea-outline-text-placeholder: var(--color-text-secondary); --component-tooltip-background: var(--color-background-inverse); --component-tooltip-pointer: var(--color-background-inverse); --component-tooltip-text: var(--color-text-inverse); --context-brand-fill-background: var(--color-background-brand); --context-brand-fill-border: var(--color-border-brand); --context-brand-fill-icon: var(--color-icon-on-brand); --context-brand-fill-text: var(--color-text-on-brand); --context-brand-ghost-background: var(--color-background-transparent); --context-brand-ghost-border: var(--color-border-brand); --context-brand-ghost-icon: var(--color-icon-brand); --context-brand-ghost-text: var(--color-text-brand); --context-brand-outline-background: var(--color-background-transparent); --context-brand-outline-border: var(--color-border-brand); --context-brand-outline-icon: var(--color-icon-brand); --context-brand-outline-text: var(--color-text-brand); --context-brand-soft-background: var(--color-background-brand-alpha); --context-brand-soft-border: var(--color-border-brand); --context-brand-soft-icon: var(--color-icon-primary); --context-brand-soft-text: var(--color-text-primary); --context-caution-fill-background: var(--color-background-caution); --context-caution-fill-border: var(--color-border-caution); --context-caution-fill-icon: var(--color-icon-on-caution); --context-caution-fill-text: var(--color-text-on-caution); --context-caution-ghost-background: var(--color-background-transparent); --context-caution-ghost-border: var(--color-border-caution); --context-caution-ghost-icon: var(--color-icon-caution); --context-caution-ghost-text: var(--color-text-caution); --context-caution-outline-background: var(--color-background-transparent); --context-caution-outline-border: var(--color-border-caution); --context-caution-outline-icon: var(--color-icon-caution); --context-caution-outline-text: var(--color-text-caution); --context-caution-soft-background: var(--color-background-caution-alpha); --context-caution-soft-border: var(--color-border-caution); --context-caution-soft-icon: var(--color-icon-primary); --context-caution-soft-text: var(--color-text-primary); --context-info-fill-background: var(--color-background-info); --context-info-fill-border: var(--color-border-info); --context-info-fill-icon: var(--color-icon-on-info); --context-info-fill-text: var(--color-text-on-info); --context-info-ghost-background: var(--color-background-transparent); --context-info-ghost-border: var(--color-border-info); --context-info-ghost-icon: var(--color-icon-info); --context-info-ghost-text: var(--color-text-info); --context-info-outline-background: var(--color-background-transparent); --context-info-outline-border: var(--color-border-info); --context-info-outline-icon: var(--color-icon-info); --context-info-outline-text: var(--color-text-info); --context-info-soft-background: var(--color-background-info-alpha); --context-info-soft-border: var(--color-border-info); --context-info-soft-icon: var(--color-icon-primary); --context-info-soft-text: var(--color-text-primary); --context-negative-fill-background: var(--color-background-negative); --context-negative-fill-border: var(--color-border-negative); --context-negative-fill-icon: var(--color-icon-on-negative); --context-negative-fill-text: var(--color-text-on-negative); --context-negative-ghost-background: var(--color-background-transparent); --context-negative-ghost-border: var(--color-border-negative); --context-negative-ghost-icon: var(--color-icon-negative); --context-negative-ghost-text: var(--color-text-negative); --context-negative-outline-background: var(--color-background-transparent); --context-negative-outline-border: var(--color-border-negative); --context-negative-outline-icon: var(--color-icon-negative); --context-negative-outline-text: var(--color-text-negative); --context-negative-soft-background: var(--color-background-negative-alpha); --context-negative-soft-border: var(--color-border-negative); --context-negative-soft-icon: var(--color-icon-primary); --context-negative-soft-text: var(--color-text-primary); --context-neutral-fill-background: var(--color-background-neutral); --context-neutral-fill-border: var(--color-border-primary); --context-neutral-fill-icon: var(--color-icon-on-neutral); --context-neutral-fill-text: var(--color-text-on-neutral); --context-neutral-ghost-background: var(--color-background-transparent); --context-neutral-ghost-border: var(--color-border-primary); --context-neutral-ghost-icon: var(--color-icon-secondary); --context-neutral-ghost-text: var(--color-text-secondary); --context-neutral-outline-background: var(--color-background-transparent); --context-neutral-outline-border: var(--color-border-primary); --context-neutral-outline-icon: var(--color-icon-primary); --context-neutral-outline-text: var(--color-text-primary); --context-neutral-soft-background: var(--color-background-neutral-alpha); --context-neutral-soft-border: var(--color-border-primary); --context-neutral-soft-icon: var(--color-icon-primary); --context-neutral-soft-text: var(--color-text-primary); --context-positive-fill-background: var(--color-background-positive); --context-positive-fill-border: var(--color-border-positive); --context-positive-fill-icon: var(--color-icon-on-positive); --context-positive-fill-text: var(--color-text-on-positive); --context-positive-ghost-background: var(--color-background-transparent); --context-positive-ghost-border: var(--color-border-positive); --context-positive-ghost-icon: var(--color-icon-positive); --context-positive-ghost-text: var(--color-text-positive); --context-positive-outline-background: var(--color-background-transparent); --context-positive-outline-border: var(--color-border-positive); --context-positive-outline-icon: var(--color-icon-positive); --context-positive-outline-text: var(--color-text-positive); --context-positive-soft-background: var(--color-background-positive-alpha); --context-positive-soft-border: var(--color-border-positive); --context-positive-soft-icon: var(--color-icon-primary); --context-positive-soft-text: var(--color-text-primary); --style-focus-color: var(--color-border-brand); } }