//////////////////////////////////
// THEME / VARIABLES / BACKGROUNDS
//////////////////////////////////


@import '_variables.color-palette';


// Backdrop filter
$backdrop-filter-blur: 3px;                                       // Backdrop-filter blur amount (in pixels)


// Background color
$bg-color-brand-alpha-light-mode: $scarlet;                       // Alpha brand background-color (scarlet) in light mode
$bg-color-brand-alpha-dark-mode: $scarlet;                        // Alpha brand background-color (scarlet) in dark mode
$bg-color-brand-alpha: var(--bg-brand-alpha);

$bg-color-brand-zeta-light-mode: $green;                          // Zeta brand background-color (green) in light mode
$bg-color-brand-zeta-dark-mode: $dark-green;                      // Zeta brand background-color (green) in dark mode
$bg-color-brand-zeta: var(--bg-brand-zeta);

$bg-color-brand-eta-light-mode: $blue;                            // Eta brand background-color (blue) in light mode
$bg-color-brand-eta-dark-mode: $dark-blue;                        // Eta brand background-color (blue) in dark mode
$bg-color-brand-eta: var(--bg-brand-eta);

$bg-color-brand-theta-light-mode: $purple;                        // Theta brand background-color (purple) in light mode
$bg-color-brand-theta-dark-mode: $dark-purple;                    // Theta brand background-color (purple) in dark mode
$bg-color-brand-theta: var(--bg-brand-theta);

$bg-color-brand-light-zeta-light-mode: $lighter-green;            // Light zeta brand background-color (light green) in light mode
$bg-color-brand-light-zeta-dark-mode: $dark-green;                // Light zeta brand background-color (light green) in dark mode
$bg-color-brand-light-zeta: var(--bg-brand-light-zeta);

$bg-color-brand-light-eta-light-mode: $lighter-blue;              // Light eta brand background-color (light blue) in light mode
$bg-color-brand-light-eta-dark-mode: $dark-blue;                  // Light eta brand background-color (light blue) in dark mode
$bg-color-brand-light-eta: var(--bg-brand-light-eta);

$bg-color-brand-light-theta-light-mode: $lighter-purple;          // Light theta brand background-color (light purple) in light mode
$bg-color-brand-light-theta-dark-mode: $dark-purple;              // Light theta brand background-color (light purple) in dark mode
$bg-color-brand-light-theta: var(--bg-brand-light-theta);

$bg-color-white-light-mode: $white;                               // White background-color in light mode
$bg-color-white-dark-mode: $darker-gray-s1;                       // White background-color in dark mode
$bg-color-white: var(--bg-white);

$bg-color-gray-light-light-mode: $light-gray;                     // Light gray background-color in light mode
$bg-color-gray-light-dark-mode: $darker-gray-s4;                  // Light gray background-color in dark mode
$bg-color-gray-light: var(--bg-light-gray);

$bg-color-gray-lighter-light-mode: $lighter-gray;                 // Lighter gray background-color in light mode
$bg-color-gray-lighter-dark-mode: $darker-gray-s3;                // Lighter gray background-color in dark mode
$bg-color-gray-lighter: var(--bg-lighter-gray);

$bg-color-gray-lightest-light-mode: $lightest-gray;               // Lightest gray background-color in light mode
$bg-color-gray-lightest-dark-mode: $darker-gray-s2;               // Lightest gray background-color in dark mode
$bg-color-gray-lightest: var(--bg-lightest-gray);

$bg-color-inverse-light-mode: $color-body-light-mode;             // Inverse background-color in light mode
$bg-color-inverse-dark-mode: $color-body-dark-mode;               // Inverse background-color in dark mode
$bg-color-inverse: var(--bg-inverse);

$bg-color-overlay-dark-light-mode: fade-out($darkest-gray,.16);   // Dark overlay background-color for modals in light mode
$bg-color-overlay-dark-dark-mode: fade-out($black,.25);           // Dark overlay background-color for modals in dark mode
$bg-color-overlay-dark: var(--bg-overlay-dark);

$bg-color-overlay-light-light-mode: fade-out($cream,.1);          // Light overlay background-color for modals in light mode
$bg-color-overlay-light-dark-mode: fade-out($black,.25);          // Light overlay background-color for modals in dark mode
$bg-color-overlay-light: var(--bg-overlay-light);

$bg-color-dialog-light-mode: $white;                              // Dialog background-color in light mode
$bg-color-dialog-dark-mode: $darker-gray-s1;                      // Dialog background-color in dark mode
$bg-color-dialog: var(--bg-dialog);

$bg-color-foreground: var(--bg-dialog);