:root {
    --essence-theme-author: 'Loremly#9359';
    --essence-theme-name: 'Sapphire Nebula';
    --essence-theme-gradient: linear-gradient(70deg, #435d82, #16A38C);
    --essence-theme-gradient-animation: defaultGradient 3s ease infinite;
    --essence-app-background-image: none;
}

.theme-dark, .theme-light {
    /* || Main Colors */
    --essence-primary: #282E51;
    --essence-secondary: #232A4C;
    --essence-alt: #2b3561;
    --essence-tertiary: #192242;
    --essence-app-background: #101528;
    --essence-app-background-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    --essence-popouts: #12131c;
    --essence-modals: #1d232f;
    --essence-bgaccent: #292f42;
    --essence-inputs: #191d29;
    --essence-card: var(--essence-tertiary);
    --essence-scroller-thumb: hsl(var(--essence-accent-brand));
    --essence-scroller-track: #2a3046;

    /* || Text Colors */
    --essence-text-primary: #e2e2ee;
    --essence-text-secondary: #9ca1b2;
    --essence-text-muted: #9291a1;
    --essence-text-channels: #9696a4;

    /* || Interactive Colors */
    --essence-modifier-rgb: 49, 63, 89;
    --essence-interactive-primary: #e2e2ee;
    --essence-interactive-secondary: #a9aabc;
    --essence-interactive-alt: #b7b9c8;
    --essence-interactive-muted: #5a5d69;

    /* || Accent Colors - Adding calc(var(saturation-factor)*X%) is not required. */
    --essence-accent-brand-saturated: 170, calc(var(--saturation-factor, 1) * 100%), 27%;
    --essence-accent-brand: 170, calc(var(--saturation-factor, 1) * 76%), 36%;
    --essence-accent-brand-alt: 168, calc(var(--saturation-factor, 1) * 49%), 50%;

    --essence-accent-red: 1, calc(var(--saturation-factor, 1) * 65%), 51%;
    --essence-accent-orange: 23, calc(var(--saturation-factor, 1) * 91%), 52%;
    --essence-accent-yellow: 42, calc(var(--saturation-factor, 1) * 72%), 53%;
    --essence-accent-green: 131, calc(var(--saturation-factor, 1) * 55%), 40%;
    --essence-accent-green-alt: 129, calc(var(--saturation-factor, 1) * 42%), 33%;
    --essence-accent-blue: 216, calc(var(--saturation-factor, 1) * 74%), 47%;
    --essence-accent-purple: 261, calc(var(--saturation-factor, 1) * 69%), 58%;
    --essence-accent-grey: 215, 8%, 47%;

    /* || Button Colors */
    --button-brand-background: hsl(var(--essence-accent-brand));
    --button-brand-background-hover: hsl(281, calc(var(--saturation-factor, 1) * 34%), 48%);
    --button-brand-background-active: hsl(281, calc(var(--saturation-factor, 1) * 34%), 41%);
    --button-brand-background-disabled: hsl(281, calc(var(--saturation-factor, 1) * 43%), 59%);
    
    --button-red-background: hsl(var(--essence-accent-red));
    --button-red-background-hover: hsl(360, calc(var(--saturation-factor, 1) * 43%), 52%);
    --button-red-background-active: hsl(360, calc(var(--saturation-factor, 1) * 43%), 43%);
    --button-red-background-disabled: hsl(360, calc(var(--saturation-factor, 1) * 45%), 59%);

    --button-green-background: hsl(126, calc(var(--saturation-factor, 1) * 39%), 55%);
    --button-green-background-hover: hsl(126, calc(var(--saturation-factor, 1) * 29%), 42%);
    --button-green-background-active: hsl(126, calc(var(--saturation-factor, 1) * 29%), 33%);
    --button-green-background-disabled: hsl(126, calc(var(--saturation-factor, 1) * 31%), 56%);

    --button-grey-background: hsl(var(--essence-accent-grey));
    --button-grey-background-hover: #8e96a6;
    --button-grey-background-active: #a9acbe;
    --button-grey-background-disabled: #868f9d;
}


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