/* This file was generated by Supernova, don't change manually */
$background-backdrop: #1a1b1b80 !default;

$background-interactive-state-active: #ffffff1a !default;
$background-interactive-state-default: #fff0 !default;
$background-interactive-state-hover: #ffffff0d !default;

$background-primary: #6039cc !default;
$background-secondary: #3c2480 !default;
$background-tertiary: #1e1240 !default;

$border-basic: #a07eff !default;
$border-focus: #1e1240 !default;

$border-interactive-state-active: #bba3ff !default;
$border-interactive-state-default: #a07eff !default;
$border-interactive-state-hover: #ae91ff !default;
$border-interactive-state-selected: #ffbe00 !default;

$component-button-plain-border: #fff0 !default;
$component-button-plain-content: #fff !default;
$component-button-plain-state-active: #ffffff26 !default;
$component-button-plain-state-default: #fff0 !default;
$component-button-plain-state-hover: #ffffff1a !default;

$component-button-primary-border: #1e1240 !default;
$component-button-primary-content: #3c2480 !default;
$component-button-primary-state-active: #e4daff !default;
$component-button-primary-state-default: #fff !default;
$component-button-primary-state-hover: #f1edff !default;

$component-button-secondary-border: #f8f6ff !default;
$component-button-secondary-content: #fff !default;
$component-button-secondary-state-active: #1a1b1b26 !default;
$component-button-secondary-state-default: #1a1b1b00 !default;
$component-button-secondary-state-hover: #1a1b1b1a !default;

$component-button-tertiary-border: #1a1b1b00 !default;
$component-button-tertiary-content: #fff !default;
$component-button-tertiary-state-active: #1a1b1b4d !default;
$component-button-tertiary-state-default: #1a1b1b33 !default;
$component-button-tertiary-state-hover: #1a1b1b40 !default;

$component-header-background: #6039cc !default;
$component-header-item-background-state-active: #1a1b1b26 !default;
$component-header-item-background-state-default: #fff0 !default;
$component-header-item-background-state-hover: #1a1b1b1a !default;
$component-header-item-background-state-selected: #fff0 !default;
$component-header-item-state-active: #e5e5e5 !default;
$component-header-item-state-default: #fff !default;
$component-header-item-state-hover: #f2f2f2 !default;
$component-header-item-state-selected: #ffbe00 !default;
$component-header-stripe-state-selected: #fff !default;
$component-header-stripe-state-unselected: #ffffff40 !default;

$component-toggle-selected-border: #a07eff !default;
$component-toggle-selected-content: #fff !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: #a07eff !default;
$component-toggle-unselected-content: #4e2ea6 !default;
$component-toggle-unselected-state-active: #e4daff !default;
$component-toggle-unselected-state-default: #fff !default;
$component-toggle-unselected-state-hover: #f1edff !default;

$disabled-background: #ffffff1a !default;
$disabled-border: #fff3 !default;
$disabled-content: #ffffff80 !default;
$disabled-foreground: #fff3 !default;

$emotion-danger-background-basic: #e40000 !default;
$emotion-danger-background-subtle: #fce5e5 !default;
$emotion-danger-border-basic: #e93333 !default;
$emotion-danger-border-subtle: #ef6666 !default;
$emotion-danger-content-basic: #720000 !default;
$emotion-danger-content-subtle: #fff !default;
$emotion-danger-state-active: #ec4d4d !default;
$emotion-danger-state-default: #e40000 !default;
$emotion-danger-state-hover: #e93333 !default;

$emotion-informative-background-basic: #0066d8 !default;
$emotion-informative-background-subtle: #e5f0fb !default;
$emotion-informative-border-basic: #3385e0 !default;
$emotion-informative-border-subtle: #66a3e8 !default;
$emotion-informative-content-basic: #00336c !default;
$emotion-informative-content-subtle: #fff !default;
$emotion-informative-state-active: #4d94e4 !default;
$emotion-informative-state-default: #0066d8 !default;
$emotion-informative-state-hover: #3385e0 !default;

$emotion-success-background-basic: #3e9b4f !default;
$emotion-success-background-subtle: #ecf5ed !default;
$emotion-success-border-basic: #65af72 !default;
$emotion-success-border-subtle: #8bc395 !default;
$emotion-success-content-basic: #1f4e28 !default;
$emotion-success-content-subtle: #fff !default;
$emotion-success-state-active: #78b984 !default;
$emotion-success-state-default: #3e9b4f !default;
$emotion-success-state-hover: #65af72 !default;

$emotion-warning-background-basic: #f27d00 !default;
$emotion-warning-background-subtle: #fef2e5 !default;
$emotion-warning-border-basic: #f59733 !default;
$emotion-warning-border-subtle: #f7b166 !default;
$emotion-warning-content-basic: #793f00 !default;
$emotion-warning-content-subtle: #fff !default;
$emotion-warning-state-active: #f6a44d !default;
$emotion-warning-state-default: #f27d00 !default;
$emotion-warning-state-hover: #f59733 !default;

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

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

$form-field-filled-background-state-active: #fff !default;
$form-field-filled-background-state-default: #f9f9f9 !default;
$form-field-filled-background-state-hover: #f1edff !default;
$form-field-filled-border-state-active: #936cff !default;
$form-field-filled-border-state-default: #ae91ff !default;
$form-field-filled-border-state-hover: #a07eff !default;
$form-field-filled-border-state-selected: #ffbe00 !default;
$form-field-filled-content: #202020 !default;
$form-field-filled-placeholder: #666 !default;

$form-field-helper-text: #c9b5ff !default;
$form-field-label: #fff !default;
$form-field-success: #78b984 !default;
$form-field-warning: #f6a44d !default;

$gradient-basic-overlay-color-01: #606060 !default;
$gradient-basic-overlay-color-02: #60606000 !default;

$link-primary-state-active: #e5e5e5 !default;
$link-primary-state-default: #fff !default;
$link-primary-state-hover: #f2f2f2 !default;

$link-secondary-state-active: #e5e5e5 !default;
$link-secondary-state-default: #d6c8ff !default;
$link-secondary-state-hover: #f2f2f2 !default;

$link-state-visited: #ffbe00 !default;

$link-tertiary-state-active: #e5e5e5 !default;
$link-tertiary-state-default: #bba3ff !default;
$link-tertiary-state-hover: #f2f2f2 !default;

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

$selected-content-basic: #fff !default;
$selected-content-subtle: #3c2480 !default;
$selected-state-active: #ffd24d !default;
$selected-state-default: #ffbe00 !default;
$selected-state-hover: #ffcb33 !default;

$shadow-shadow-100-color-01: #00000026 !default;

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

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

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

$text-primary: #f9f9f9 !default;
$text-secondary: #d9d9d9 !default;
$text-tertiary: #b2b2b2 !default;

@mixin color-css-variables {
    --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-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-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-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};
}
