/* This file was generated by Supernova, don't change manually */
$accent-01-background-basic: #d80090 !default;
$accent-01-background-subtle: #fdf2f9 !default;
$accent-01-border-basic: #8d005e !default;
$accent-01-border-subtle: #f7cce9 !default;
$accent-01-content-basic: #d80090 !default;
$accent-01-content-subtle: #fbe5f4 !default;
$accent-01-state-active: #ad0073 !default;
$accent-01-state-default: #d80090 !default;
$accent-01-state-hover: #c30082 !default;

$accent-02-background-basic: #7847ff !default;
$accent-02-background-subtle: #f8f6ff !default;
$accent-02-border-basic: #7847ff !default;
$accent-02-border-subtle: #e4daff !default;
$accent-02-content-basic: #6039cc !default;
$accent-02-content-subtle: #f1edff !default;
$accent-02-state-active: #936cff !default;
$accent-02-state-default: #ae91ff !default;
$accent-02-state-hover: #a07eff !default;

$background-backdrop: #1a1b1b80 !default;

$background-interactive-state-active: #f1edff !default;
$background-interactive-state-default: #fff0 !default;
$background-interactive-state-hover: #f8f6ff !default;

$background-primary: #fdfdfc !default;
$background-secondary: #f4f4f4 !default;
$background-tertiary: #f1edff !default;

$border-basic: #d9d9d9 !default;
$border-focus: #7847ff !default;

$border-interactive-state-active: #a5a5a5 !default;
$border-interactive-state-default: #bfbfbf !default;
$border-interactive-state-hover: #b2b2b2 !default;
$border-interactive-state-selected: #7847ff !default;

$component-button-plain-border: #fff0 !default;
$component-button-plain-content: #6039cc !default;
$component-button-plain-state-active: #e4daff !default;
$component-button-plain-state-default: #fff0 !default;
$component-button-plain-state-hover: #f1edff !default;

$component-button-primary-border: #4e2ea6 !default;
$component-button-primary-content: #fdfdfc !default;
$component-button-primary-state-active: #6039cc !default;
$component-button-primary-state-default: #7847ff !default;
$component-button-primary-state-hover: #6c40e5 !default;

$component-button-secondary-border: #7847ff !default;
$component-button-secondary-content: #6039cc !default;
$component-button-secondary-state-active: #e4daff !default;
$component-button-secondary-state-default: #fdfdfc !default;
$component-button-secondary-state-hover: #f1edff !default;

$component-button-tertiary-border: #e5e5e5 !default;
$component-button-tertiary-content: #202020 !default;
$component-button-tertiary-state-active: #d9d9d9 !default;
$component-button-tertiary-state-default: #f4f4f4 !default;
$component-button-tertiary-state-hover: #e5e5e5 !default;

$component-header-background: #fdfdfc !default;
$component-header-border: #e5e5e5 !default;
$component-header-item-background-state-active: #f1edff !default;
$component-header-item-background-state-default: #fff0 !default;
$component-header-item-background-state-hover: #f8f6ff !default;
$component-header-item-background-state-selected: #f8f6ff !default;
$component-header-item-state-active: #4e2ea6 !default;
$component-header-item-state-default: #404040 !default;
$component-header-item-state-hover: #6039cc !default;
$component-header-item-state-selected: #6039cc !default;
$component-header-stripe-state-selected: #ffbe00 !default;
$component-header-stripe-state-unselected: #e4daff !default;

$component-pagination-selected-border: #7847ff !default;
$component-pagination-selected-content: #fdfdfc !default;
$component-pagination-selected-state-active: #6039cc !default;
$component-pagination-selected-state-default: #7847ff !default;
$component-pagination-selected-state-hover: #6c40e5 !default;
$component-pagination-unselected-border: #d9d9d9 !default;
$component-pagination-unselected-content: #535353 !default;
$component-pagination-unselected-state-active: #f4f4f4 !default;
$component-pagination-unselected-state-default: #fdfdfc !default;
$component-pagination-unselected-state-hover: #f9f9f9 !default;

$component-pricing-box-background: #f2f7fd !default;
$component-pricing-box-border: #80b2eb !default;
$component-pricing-box-content: #00428c !default;

$component-toggle-selected-border: #327c3f !default;
$component-toggle-selected-content: #fdfdfc !default;
$component-toggle-selected-state-active: #3e9b4f !default;
$component-toggle-selected-state-default: #327c3f !default;
$component-toggle-selected-state-hover: #388b47 !default;
$component-toggle-unselected-border: #a5a5a5 !default;
$component-toggle-unselected-content: #404040 !default;
$component-toggle-unselected-state-active: #f4f4f4 !default;
$component-toggle-unselected-state-default: #fdfdfc !default;
$component-toggle-unselected-state-hover: #f9f9f9 !default;

$disabled-background: #f9f9f9 !default;
$disabled-border: #e5e5e5 !default;
$disabled-content: #a5a5a5 !default;
$disabled-foreground: #d9d9d9 !default;

$emotion-danger-background-basic: #b60000 !default;
$emotion-danger-background-subtle: #fef2f2 !default;
$emotion-danger-border-basic: #b60000 !default;
$emotion-danger-border-subtle: #f18080 !default;
$emotion-danger-content-basic: #940000 !default;
$emotion-danger-content-subtle: #fdfdfc !default;
$emotion-danger-state-active: #e40000 !default;
$emotion-danger-state-default: #b60000 !default;
$emotion-danger-state-hover: #cd0000 !default;

$emotion-informative-background-basic: #0052ad !default;
$emotion-informative-background-subtle: #f2f7fd !default;
$emotion-informative-border-basic: #0052ad !default;
$emotion-informative-border-subtle: #80b2eb !default;
$emotion-informative-content-basic: #00428c !default;
$emotion-informative-content-subtle: #fdfdfc !default;
$emotion-informative-state-active: #0066d8 !default;
$emotion-informative-state-default: #0052ad !default;
$emotion-informative-state-hover: #005cc2 !default;

$emotion-success-background-basic: #327c3f !default;
$emotion-success-background-subtle: #f5faf6 !default;
$emotion-success-border-basic: #327c3f !default;
$emotion-success-border-subtle: #9ecda7 !default;
$emotion-success-content-basic: #286533 !default;
$emotion-success-content-subtle: #fdfdfc !default;
$emotion-success-state-active: #3e9b4f !default;
$emotion-success-state-default: #327c3f !default;
$emotion-success-state-hover: #388b47 !default;

$emotion-warning-background-basic: #c26400 !default;
$emotion-warning-background-subtle: #fef8f2 !default;
$emotion-warning-border-basic: #c26400 !default;
$emotion-warning-border-subtle: #f9be80 !default;
$emotion-warning-content-basic: #9d5100 !default;
$emotion-warning-content-subtle: #fdfdfc !default;
$emotion-warning-state-active: #f27d00 !default;
$emotion-warning-state-default: #c26400 !default;
$emotion-warning-state-hover: #da7100 !default;

$focus-focus-ring-color-01: #d2c2ffb2 !default;

$form-field-danger: #b60000 !default;

$form-field-filled-background-state-active: #fdfdfc !default;
$form-field-filled-background-state-default: #fdfdfc !default;
$form-field-filled-background-state-hover: #f9f9f9 !default;
$form-field-filled-border-state-active: #7f7f7f !default;
$form-field-filled-border-state-default: #a5a5a5 !default;
$form-field-filled-border-state-hover: #999 !default;
$form-field-filled-border-state-selected: #7847ff !default;
$form-field-filled-content: #202020 !default;
$form-field-filled-placeholder: #666 !default;

$form-field-helper-text: #535353 !default;
$form-field-label: #202020 !default;
$form-field-success: #327c3f !default;
$form-field-warning: #c26400 !default;

$gradient-basic-overlay-color-01: #fff !default;
$gradient-basic-overlay-color-02: #fff0 !default;

$gradient-primary-color-01: #eae3ff !default;
$gradient-primary-color-02: #cebcff !default;

$gradient-secondary-color-01: #fff !default;
$gradient-secondary-color-02: #a7d9e2 !default;

$gradient-skeleton-color-01: #e5e5e5 !default;
$gradient-skeleton-color-02: #fff !default;
$gradient-skeleton-color-03: #e5e5e5 !default;

$link-primary-state-active: #3c2480 !default;
$link-primary-state-default: #6039cc !default;
$link-primary-state-hover: #4e2ea6 !default;

$link-secondary-state-active: #3c2480 !default;
$link-secondary-state-default: #535353 !default;
$link-secondary-state-hover: #4e2ea6 !default;

$link-state-visited: #3c2480 !default;

$link-tertiary-state-active: #3c2480 !default;
$link-tertiary-state-default: #7f7f7f !default;
$link-tertiary-state-hover: #4e2ea6 !default;

$neutral-background-basic: #202020 !default;
$neutral-background-subtle: #f4f4f4 !default;
$neutral-border-basic: #202020 !default;
$neutral-border-subtle: #bfbfbf !default;
$neutral-content-basic: #202020 !default;
$neutral-content-subtle: #fdfdfc !default;
$neutral-state-active: #535353 !default;
$neutral-state-default: #202020 !default;
$neutral-state-hover: #404040 !default;

$selected-content-basic: #7847ff !default;
$selected-content-subtle: #fdfdfc !default;
$selected-state-active: #6039cc !default;
$selected-state-default: #7847ff !default;
$selected-state-hover: #6c40e5 !default;

$shadow-shadow-100-color-01: #0000001a !default;

$shadow-shadow-200-color-01: #0003 !default;

$shadow-shadow-300-color-01: #00000040 !default;

$shadow-shadow-400-color-01: #00000040 !default;

$text-primary: #202020 !default;
$text-secondary: #535353 !default;
$text-tertiary: #7f7f7f !default;

@mixin color-css-variables {
    --spirit-color-accent-01-background-basic: #{$accent-01-background-basic};
    --spirit-color-accent-01-background-subtle: #{$accent-01-background-subtle};
    --spirit-color-accent-01-border-basic: #{$accent-01-border-basic};
    --spirit-color-accent-01-border-subtle: #{$accent-01-border-subtle};
    --spirit-color-accent-01-content-basic: #{$accent-01-content-basic};
    --spirit-color-accent-01-content-subtle: #{$accent-01-content-subtle};
    --spirit-color-accent-01-state-active: #{$accent-01-state-active};
    --spirit-color-accent-01-state-default: #{$accent-01-state-default};
    --spirit-color-accent-01-state-hover: #{$accent-01-state-hover};
    --spirit-color-accent-02-background-basic: #{$accent-02-background-basic};
    --spirit-color-accent-02-background-subtle: #{$accent-02-background-subtle};
    --spirit-color-accent-02-border-basic: #{$accent-02-border-basic};
    --spirit-color-accent-02-border-subtle: #{$accent-02-border-subtle};
    --spirit-color-accent-02-content-basic: #{$accent-02-content-basic};
    --spirit-color-accent-02-content-subtle: #{$accent-02-content-subtle};
    --spirit-color-accent-02-state-active: #{$accent-02-state-active};
    --spirit-color-accent-02-state-default: #{$accent-02-state-default};
    --spirit-color-accent-02-state-hover: #{$accent-02-state-hover};
    --spirit-color-background-backdrop: #{$background-backdrop};
    --spirit-color-background-interactive-state-active: #{$background-interactive-state-active};
    --spirit-color-background-interactive-state-default: #{$background-interactive-state-default};
    --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover};
    --spirit-color-background-primary: #{$background-primary};
    --spirit-color-background-secondary: #{$background-secondary};
    --spirit-color-background-tertiary: #{$background-tertiary};
    --spirit-color-border-basic: #{$border-basic};
    --spirit-color-border-focus: #{$border-focus};
    --spirit-color-border-interactive-state-active: #{$border-interactive-state-active};
    --spirit-color-border-interactive-state-default: #{$border-interactive-state-default};
    --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover};
    --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected};
    --spirit-color-component-button-plain-border: #{$component-button-plain-border};
    --spirit-color-component-button-plain-content: #{$component-button-plain-content};
    --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active};
    --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default};
    --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover};
    --spirit-color-component-button-primary-border: #{$component-button-primary-border};
    --spirit-color-component-button-primary-content: #{$component-button-primary-content};
    --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active};
    --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default};
    --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover};
    --spirit-color-component-button-secondary-border: #{$component-button-secondary-border};
    --spirit-color-component-button-secondary-content: #{$component-button-secondary-content};
    --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active};
    --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default};
    --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover};
    --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border};
    --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content};
    --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active};
    --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default};
    --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover};
    --spirit-color-component-header-background: #{$component-header-background};
    --spirit-color-component-header-border: #{$component-header-border};
    --spirit-color-component-header-item-background-state-active: #{$component-header-item-background-state-active};
    --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default};
    --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover};
    --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected};
    --spirit-color-component-header-item-state-active: #{$component-header-item-state-active};
    --spirit-color-component-header-item-state-default: #{$component-header-item-state-default};
    --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover};
    --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected};
    --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected};
    --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected};
    --spirit-color-component-pagination-selected-border: #{$component-pagination-selected-border};
    --spirit-color-component-pagination-selected-content: #{$component-pagination-selected-content};
    --spirit-color-component-pagination-selected-state-active: #{$component-pagination-selected-state-active};
    --spirit-color-component-pagination-selected-state-default: #{$component-pagination-selected-state-default};
    --spirit-color-component-pagination-selected-state-hover: #{$component-pagination-selected-state-hover};
    --spirit-color-component-pagination-unselected-border: #{$component-pagination-unselected-border};
    --spirit-color-component-pagination-unselected-content: #{$component-pagination-unselected-content};
    --spirit-color-component-pagination-unselected-state-active: #{$component-pagination-unselected-state-active};
    --spirit-color-component-pagination-unselected-state-default: #{$component-pagination-unselected-state-default};
    --spirit-color-component-pagination-unselected-state-hover: #{$component-pagination-unselected-state-hover};
    --spirit-color-component-pricing-box-background: #{$component-pricing-box-background};
    --spirit-color-component-pricing-box-border: #{$component-pricing-box-border};
    --spirit-color-component-pricing-box-content: #{$component-pricing-box-content};
    --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border};
    --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content};
    --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active};
    --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default};
    --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover};
    --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border};
    --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content};
    --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active};
    --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default};
    --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover};
    --spirit-color-disabled-background: #{$disabled-background};
    --spirit-color-disabled-border: #{$disabled-border};
    --spirit-color-disabled-content: #{$disabled-content};
    --spirit-color-disabled-foreground: #{$disabled-foreground};
    --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic};
    --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle};
    --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic};
    --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle};
    --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic};
    --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle};
    --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active};
    --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default};
    --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover};
    --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic};
    --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle};
    --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic};
    --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle};
    --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic};
    --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle};
    --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active};
    --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default};
    --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover};
    --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic};
    --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle};
    --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic};
    --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle};
    --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic};
    --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle};
    --spirit-color-emotion-success-state-active: #{$emotion-success-state-active};
    --spirit-color-emotion-success-state-default: #{$emotion-success-state-default};
    --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover};
    --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic};
    --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle};
    --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic};
    --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle};
    --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic};
    --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle};
    --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active};
    --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default};
    --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover};
    --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01};
    --spirit-color-form-field-danger: #{$form-field-danger};
    --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active};
    --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default};
    --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover};
    --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active};
    --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default};
    --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover};
    --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected};
    --spirit-color-form-field-filled-content: #{$form-field-filled-content};
    --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder};
    --spirit-color-form-field-helper-text: #{$form-field-helper-text};
    --spirit-color-form-field-label: #{$form-field-label};
    --spirit-color-form-field-success: #{$form-field-success};
    --spirit-color-form-field-warning: #{$form-field-warning};
    --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01};
    --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02};
    --spirit-color-gradient-primary-color-01: #{$gradient-primary-color-01};
    --spirit-color-gradient-primary-color-02: #{$gradient-primary-color-02};
    --spirit-color-gradient-secondary-color-01: #{$gradient-secondary-color-01};
    --spirit-color-gradient-secondary-color-02: #{$gradient-secondary-color-02};
    --spirit-color-gradient-skeleton-color-01: #{$gradient-skeleton-color-01};
    --spirit-color-gradient-skeleton-color-02: #{$gradient-skeleton-color-02};
    --spirit-color-gradient-skeleton-color-03: #{$gradient-skeleton-color-03};
    --spirit-color-link-primary-state-active: #{$link-primary-state-active};
    --spirit-color-link-primary-state-default: #{$link-primary-state-default};
    --spirit-color-link-primary-state-hover: #{$link-primary-state-hover};
    --spirit-color-link-secondary-state-active: #{$link-secondary-state-active};
    --spirit-color-link-secondary-state-default: #{$link-secondary-state-default};
    --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover};
    --spirit-color-link-state-visited: #{$link-state-visited};
    --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active};
    --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default};
    --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover};
    --spirit-color-neutral-background-basic: #{$neutral-background-basic};
    --spirit-color-neutral-background-subtle: #{$neutral-background-subtle};
    --spirit-color-neutral-border-basic: #{$neutral-border-basic};
    --spirit-color-neutral-border-subtle: #{$neutral-border-subtle};
    --spirit-color-neutral-content-basic: #{$neutral-content-basic};
    --spirit-color-neutral-content-subtle: #{$neutral-content-subtle};
    --spirit-color-neutral-state-active: #{$neutral-state-active};
    --spirit-color-neutral-state-default: #{$neutral-state-default};
    --spirit-color-neutral-state-hover: #{$neutral-state-hover};
    --spirit-color-selected-content-basic: #{$selected-content-basic};
    --spirit-color-selected-content-subtle: #{$selected-content-subtle};
    --spirit-color-selected-state-active: #{$selected-state-active};
    --spirit-color-selected-state-default: #{$selected-state-default};
    --spirit-color-selected-state-hover: #{$selected-state-hover};
    --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01};
    --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01};
    --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01};
    --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01};
    --spirit-color-text-primary: #{$text-primary};
    --spirit-color-text-secondary: #{$text-secondary};
    --spirit-color-text-tertiary: #{$text-tertiary};
}