$bg-color: #1A1E21;

:root {
    --background-secondary: #{darken($bg-color, 2%)};
}

.theme-dark {
    --header-primary: #fff;
    --header-secondary: #b9bbbe;
    --text-normal: #dcddde;
    --text-muted: #72767d;
    --text-link: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
    --text-link-low-saturation: hsl(197, calc(var(--saturation-factor, 1)*100%), 52.9%);
    --text-positive: hsl(139, calc(var(--saturation-factor, 1)*66.8%), 58.6%);
    --text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
    --text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
    --text-brand: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
    --interactive-normal: #b9bbbe;
    --interactive-hover: #dcddde;
    --interactive-active: #fff;
    --interactive-muted: #4f545c;
    --background-primary: #{$bg-color};
    --background-secondary: #{darken($bg-color, 2%)};
    --background-secondary-alt: #{darken($bg-color, 3%)};
    --background-tertiary: #202225;
    --background-accent: #4f545c;
    --background-floating: #18191c;
    --background-nested-floating: #2f3136;
    --background-mobile-primary: #36393f;
    --background-mobile-secondary: #2f3136;
    --background-modifier-hover: rgba(79, 84, 92, 0.16);
    --background-modifier-active: rgba(79, 84, 92, 0.24);
    --background-modifier-selected: rgba(79, 84, 92, 0.32);
    --background-modifier-accent: hsla(0, 0%, 100%, 0.06);
    --info-positive-text: #fff;
    --info-warning-text: #fff;
    --info-danger-text: #fff;
    --info-help-background: hsla(197, calc(var(--saturation-factor, 1)*100%), 47.8%, 0.1);
    --info-help-foreground: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
    --info-help-text: #fff;
    --status-warning-text: #000;
    --scrollbar-thin-thumb: #202225;
    --scrollbar-thin-track: transparent;
    --scrollbar-auto-thumb: #202225;
    --scrollbar-auto-track: hsl(210, calc(var(--saturation-factor, 1)*9.8%), 20%);
    --scrollbar-auto-scrollbar-color-thumb: #202225;
    --scrollbar-auto-scrollbar-color-track: #2f3136;
    --elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15);
    --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
    --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16);
    --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
    --logo-primary: #fff;
    --control-brand-foreground: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
    --control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
    --background-mentioned: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
    --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.08);
    --background-message-hover: rgba(4, 4, 5, 0.07);
    --channels-default: #8e9297;
    --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    --channeltextarea-background: #40444b;
    --activity-card-background: #202225;
    --textbox-markdown-syntax: #8e9297;
    --spoiler-revealed-background: #292b2f;
    --spoiler-hidden-background: #202225;
    --deprecated-card-bg: rgba(32, 34, 37, 0.6);
    --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3);
    --deprecated-store-bg: #36393f;
    --deprecated-quickswitcher-input-background: #72767d;
    --deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3);
    --deprecated-text-input-bg: rgba(0, 0, 0, 0.1);
    --deprecated-text-input-border: rgba(0, 0, 0, 0.3);
    --deprecated-text-input-border-hover: #040405;
    --deprecated-text-input-border-disabled: #202225;
    --deprecated-text-input-prefix: #dcddde
}

.theme-dark,
.theme-light {
    --info-positive-background: hsla(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%, 0.1);
    --info-positive-foreground: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
    --info-warning-background: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
    --info-warning-foreground: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
    --info-danger-background: hsla(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%, 0.1);
    --info-danger-foreground: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
    --status-positive-background: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
    --status-positive-text: #fff;
    --status-warning-background: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
    --status-danger-background: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
    --status-danger-text: #fff;
    --focus-primary: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%)
}

.theme-light {
    --header-primary: #060607;
    --header-secondary: #4f5660;
    --text-normal: #2e3338;
    --text-muted: #747f8d;
    --text-link: hsl(212, calc(var(--saturation-factor, 1)*100%), 43.9%);
    --text-link-low-saturation: hsl(212, calc(var(--saturation-factor, 1)*100%), 43.9%);
    --text-positive: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
    --text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
    --text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
    --text-brand: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
    --interactive-normal: #4f5660;
    --interactive-hover: #2e3338;
    --interactive-active: #060607;
    --interactive-muted: #c7ccd1;
    --background-primary: #fff;
    --background-secondary: #f2f3f5;
    --background-secondary-alt: #ebedef;
    --background-tertiary: #e3e5e8;
    --background-accent: #747f8d;
    --background-floating: #fff;
    --background-nested-floating: #fff;
    --background-mobile-primary: #f8f9f9;
    --background-mobile-secondary: #fff;
    --background-modifier-hover: rgba(116, 127, 141, 0.08);
    --background-modifier-active: rgba(116, 127, 141, 0.16);
    --background-modifier-selected: rgba(116, 127, 141, 0.24);
    --background-modifier-accent: rgba(6, 6, 7, 0.08);
    --info-positive-text: #000;
    --info-warning-text: #000;
    --info-danger-text: #000;
    --info-help-background: hsla(212, calc(var(--saturation-factor, 1)*100%), 43.9%, 0.1);
    --info-help-foreground: hsl(212, calc(var(--saturation-factor, 1)*100%), 43.9%);
    --info-help-text: #000;
    --status-warning-text: #fff;
    --scrollbar-thin-thumb: rgba(79, 84, 92, 0.3);
    --scrollbar-thin-track: transparent;
    --scrollbar-auto-thumb: #ccc;
    --scrollbar-auto-track: #f2f2f2;
    --scrollbar-auto-scrollbar-color-thumb: #e3e5e8;
    --scrollbar-auto-scrollbar-color-track: #f2f3f5;
    --elevation-stroke: 0 0 0 1px rgba(6, 6, 7, 0.08);
    --elevation-low: 0 1px 0 rgba(6, 6, 7, 0.1),
        0 1.5px 0 rgba(6, 6, 7, 0.025),
        0 2px 0 rgba(6, 6, 7, 0.025);
    --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.08);
    --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.16);
    --logo-primary: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
    --control-brand-foreground: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
    --control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
    --background-mentioned: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
    --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.2);
    --background-message-hover: rgba(6, 6, 7, 0.02);
    --channels-default: #6a7480;
    --guild-header-text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.4);
    --channeltextarea-background: #ebedef;
    --activity-card-background: #fff;
    --textbox-markdown-syntax: #6a7480;
    --spoiler-revealed-background: #ebedef;
    --spoiler-hidden-background: #e3e5e8;
    --deprecated-card-bg: #f8f9f9;
    --deprecated-card-editable-bg: rgba(246, 246, 247, 0.6);
    --deprecated-store-bg: #f8f9f9;
    --deprecated-quickswitcher-input-background: #fff;
    --deprecated-quickswitcher-input-placeholder: rgba(79, 84, 92, 0.3);
    --deprecated-text-input-bg: rgba(79, 84, 92, 0.02);
    --deprecated-text-input-border: rgba(79, 84, 92, 0.3);
    --deprecated-text-input-border-hover: #b9bbbe;
    --deprecated-text-input-border-disabled: #dcddde;
    --deprecated-text-input-prefix: #b9bbbe
}