:root {
    --essence-theme-author: 'LuckFire#4800';
    --essence-theme-name: 'Nord';
    --essence-theme-gradient: linear-gradient(70deg, #5e81ac, #8fbcbb);
    --essence-app-background-image: url('https://discord-extensions.github.io/essence/assets/theme-bgs/nord.png');
}

.theme-dark, .theme-light {
    /* || Main Colors */
    --essence-primary: #2D333E;
    --essence-secondary: #3B4252;
    --essence-alt: #434C5E;
    --essence-tertiary: #1E2229;
    --essence-app-background: #13161B;
    --essence-app-background-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    --essence-popouts: #181B21;
    --essence-modals: #2B313B;
    --essence-bgaccent: #404859;
    --essence-inputs: #22262F;
    --essence-card: var(--essence-tertiary);
    --essence-scroller-thumb: hsl(var(--essence-accent-brand));
    --essence-scroller-track: #3B4252;

    /* || Text Colors */
    --essence-text-primary: #ECEFF4;
    --essence-text-secondary: #DBE1EA;
    --essence-text-muted: #BEC8DA;
    --essence-text-channels: #99A4B8;

    /* || Interactive Colors */
    --essence-modifier-rgb: 62, 69, 85;
    --essence-interactive-primary: #ECEFF4;
    --essence-interactive-secondary: #C5CFDD;
    --essence-interactive-alt: #B1BDD3;
    --essence-interactive-muted: #69758C;

    /* || Accent Colors - Adding calc(var(saturation-factor)*X%) is not required. */
    --essence-accent-brand-saturated: 210, calc(var(--saturation-factor, 1) * 19%), 85%;
    --essence-accent-brand: 210, calc(var(--saturation-factor, 1) * 34%), 63%;
    --essence-accent-brand-alt: 210, calc(var(--saturation-factor, 1) * 20%), 26%;
    --essence-accent-red: 354, calc(var(--saturation-factor, 1) * 42%), 56%;
    --essence-accent-orange: 14, calc(var(--saturation-factor, 1) * 51%), 63%;
    --essence-accent-yellow: 40, calc(var(--saturation-factor, 1) * 71%), 73%;
    --essence-accent-green: 92, calc(var(--saturation-factor, 1) * 28%), 65%;
    --essence-accent-green-alt: 92, calc(var(--saturation-factor, 1) * 15%), 27%;
    --essence-accent-blue: 193, calc(var(--saturation-factor, 1) * 43%), 67%;
    --essence-accent-purple: 311, calc(var(--saturation-factor,1) * 20%), 63%;
    --essence-accent-grey: 219, 12%, 55%;

    /* || Button Colors */
    --button-brand-background: hsl(var(--essence-accent-brand));
    --button-brand-background-hover: hsl(210, calc(var(--saturation-factor, 1)  * 24%), 48%);
    --button-brand-background-active: hsl(210, calc(var(--saturation-factor, 1) * 24%), 36%);
    --button-brand-background-disabled: hsl(210, calc(var(--saturation-factor, 1) * 31%), 63%);

    --button-red-background: hsl(var(--essence-accent-red));
    --button-red-background-hover: hsl(354, calc(var(--saturation-factor, 1) * 40%), 48%);
    --button-red-background-active: hsl(354, calc(var(--saturation-factor, 1) * 40%), 40%);
    --button-red-background-disabled: hsl(354, calc(var(--saturation-factor, 1) * 36%), 56%);

    --button-green-background: hsl(92, calc(var(--saturation-factor, 1) * 22%), 58%);
    --button-green-background-hover: hsl(92, calc(var(--saturation-factor, 1) * 19%), 42%);
    --button-green-background-active: hsl(92, calc(var(--saturation-factor, 1) * 19%), 35%);
    --button-green-background-disabled: hsl(92, calc(var(--saturation-factor, 1) * 27%), 58%);

    --button-grey-background: #7E889A;
    --button-grey-background-hover: #9BA2B0;
    --button-grey-background-active: #A9AFBC;
    --button-grey-background-disabled: #7B8393;
}


/* || Theme Specific Changes - Custom changes for the theme should go below this line. */
