:root {
    --essence-theme-author: 'LuckFire#4800';
    --essence-theme-gradient: linear-gradient(70deg, #FC5C7D, #6938f0);
    --essence-theme-gradient-animation: defaultGradient 3s ease infinite;
    --essence-app-background-image: url('https://discord-extensions.github.io/essence/assets/theme-bgs/midnight-essence.png');
}

.theme-dark, .theme-dark .root-g14mjS, .theme-dark .force-theme.theme-light {
    --essence-theme-name: 'Midnight Essence';
    
    /* || Base Palette */
    --essence-primary: #1F1D30;
    --essence-secondary: #292640;
    --essence-alt: #333050;
    --essence-tertiary: #151523;
    --essence-app-background: #0C0B13;
    --essence-app-background-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    --essence-popouts: #12111D;
    --essence-modals: #211F33;
    --essence-bgaccent: #2B2843;
    --essence-inputs: #0E0D16;
    --essence-card: var(--essence-tertiary);
    --essence-scroller-thumb: hsl(var(--essence-accent-brand));
    --essence-scroller-track: #292640;

    /* || Text Colors */
    --essence-text-primary: #E3E2EE;
    --essence-text-secondary: #9C99B5;
    --essence-text-muted: #8A87A0;
    --essence-text-channels: #9593A7;

    /* || Interactive Colors */
    --essence-modifier-rgb: 46, 44, 66;
    --essence-interactive-primary: #E3E2EE;
    --essence-interactive-secondary: #B4B2C4;
    --essence-interactive-alt: #B8B6C9;
    --essence-interactive-muted: #5F5C75;

    /* || Accent Colors - Adding calc(var(saturation-factor)*X%) is not required. */
    --essence-accent-brand-saturated: 256, calc(var(--saturation-factor, 1) * 60%), 87%;
    --essence-accent-brand: 256, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-brand-alt: 256, calc(var(--saturation-factor, 1) * 47%), 20%;
    --essence-accent-red: 360, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-orange: 18, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-yellow: 43, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-green: 140, calc(var(--saturation-factor, 1) * 73%), 47%;
    --essence-accent-green-alt: 140, calc(var(--saturation-factor, 1) * 56%), 19%;
    --essence-accent-blue: 209, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-purple: 281, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-grey: 245, 11%, 52%;

    /* || Button Colors */
    --button-brand-background: hsl(var(--essence-accent-brand));
    --button-brand-background-hover: hsl(256, calc(var(--saturation-factor, 1) * 74%), 48%);
    --button-brand-background-active: hsl(256, calc(var(--saturation-factor, 1) * 74%), 40%);
    --button-brand-background-disabled: hsl(256, calc(var(--saturation-factor, 1) * 82%), 56%);
    
    --button-red-background: hsl(var(--essence-accent-red));
    --button-red-background-hover: hsl(360, calc(var(--saturation-factor, 1) * 72%), 46%);
    --button-red-background-active: hsl(360, calc(var(--saturation-factor, 1) * 72%), 38%);
    --button-red-background-disabled: hsl(360, calc(var(--saturation-factor, 1) * 74%), 55%);

    --button-green-background: hsl(140, calc(var(--saturation-factor, 1) * 64%), 42%);
    --button-green-background-hover: hsl(140, calc(var(--saturation-factor, 1) * 49%), 34%);
    --button-green-background-active: hsl(140, calc(var(--saturation-factor, 1) * 49%), 26%);
    --button-green-background-disabled: hsl(140, calc(var(--saturation-factor, 1) * 57%), 41%);

    --button-grey-background: hsl(var(--essence-accent-grey));
    --button-grey-background-hover: #918EA6;
    --button-grey-background-active: #ACA9BE;
    --button-grey-background-disabled: #89869D;
}

.theme-light {
    --essence-theme-name: 'Daylight Essence';
    
    /* || Base Palette */
    --essence-primary: #E0DFEC;
    --essence-secondary: #EEECF3;
    --essence-alt: #F6F6F9;
    --essence-tertiary: #D0D0E2;
    --essence-app-background: #C8C6DD;
    --essence-app-background-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
    --essence-popouts: #EFECF3;
    --essence-modals: #E3E2EE;
    --essence-bgaccent: #ECECF4;
    --essence-inputs: #CACADD;
    --essence-card: var(--essence-tertiary);
    --essence-scroller-thumb: hsl(var(--essence-accent-brand));
    --essence-scroller-track: #DCDCEA;

    /* || Text Colors */
    --essence-text-primary: #06060A;
    --essence-text-secondary: #8A899A;
    --essence-text-muted: #817F94;
    --essence-text-channels: #636272;

    /* || Interactive Colors */
    --essence-modifier-rgb: 192, 192, 211;
    --essence-interactive-primary: #06060A;
    --essence-interactive-secondary: #8B87A0;
    --essence-interactive-alt: #7C7B8E;
    --essence-interactive-muted: #727184;

    /* || Accent Colors - Adding calc(var(saturation-factor)*X%) is not required. */
    --essence-accent-brand-saturated: 256, calc(var(--saturation-factor, 1) * 60%), 87%;
    --essence-accent-brand: 256, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-brand-alt: 256, calc(var(--saturation-factor, 1) * 47%), 20%;
    --essence-accent-red: 360, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-orange: 18, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-yellow: 43, calc(var(--saturation-factor, 1) * 78%), 53%;
    --essence-accent-green: 140, calc(var(--saturation-factor, 1) * 76%), 42%;
    --essence-accent-green-alt: 140, calc(var(--saturation-factor, 1) * 56%), 19%;
    --essence-accent-blue: 209, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-purple: 281, calc(var(--saturation-factor, 1) * 86%), 58%;
    --essence-accent-grey: 245, 11%, 52%;

    /* || Button Colors */
    --button-brand-background: hsl(var(--essence-accent-brand));
    --button-brand-background-hover: hsl(256, calc(var(--saturation-factor, 1) * 74%), 48%);
    --button-brand-background-active: hsl(256, calc(var(--saturation-factor, 1) * 74%), 40%);
    --button-brand-background-disabled: hsl(256, calc(var(--saturation-factor, 1) * 82%), 56%);
    
    --button-red-background: hsl(var(--essence-accent-red));
    --button-red-background-hover: hsl(360, calc(var(--saturation-factor, 1) * 72%), 46%);
    --button-red-background-active: hsl(360, calc(var(--saturation-factor, 1) * 72%), 38%);
    --button-red-background-disabled: hsl(360, calc(var(--saturation-factor, 1) * 74%), 55%);

    --button-green-background: hsl(140, calc(var(--saturation-factor, 1) * 64%), 42%);
    --button-green-background-hover: hsl(140, calc(var(--saturation-factor, 1) * 49%), 34%);
    --button-green-background-active: hsl(140, calc(var(--saturation-factor, 1) * 49%), 26%);
    --button-green-background-disabled: hsl(140, calc(var(--saturation-factor, 1) * 57%), 41%);

    --button-grey-background: hsl(var(--essence-accent-grey));
    --button-grey-background-hover: #918EA6;
    --button-grey-background-active: #ACA9BE;
    --button-grey-background-disabled: #89869D;
}


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