/* Dracula Palette 
 * This palette is made in reference from the Dracula theme for BetterDiscord.
 * However, it will not be the exact colors.
 * Find the original theme here: https://github.com/Dracula/BetterDiscord
 */

:root {
    --essence-theme-author: 'LuckFire#4800';
    --essence-theme-gradient: linear-gradient(70deg, #BD93F9, #BD93F9);
    --essence-theme-gradient-animation: none;
}

.theme-dark, .theme-light {
    --essence-theme-name: 'Dracula';
    
    /* || Base Palette */
    --essence-primary: #282A36;
    --essence-secondary: #303240;
    --essence-alt: #393B4C;
    --essence-tertiary: #1C1E26;
    --essence-app-background: #14141A;
    --essence-app-background-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    --essence-popouts: #181920;
    --essence-modals: #2C2D3A;
    --essence-bgaccent: #3B3D4F;
    --essence-inputs: #1F2029;
    --essence-card: var(--essence-tertiary);
    --essence-scroller-thumb: hsl(var(--essence-accent-brand));
    --essence-scroller-track: #303240;

    /* || Text Colors */
    --essence-text-primary: #dcddde;
    --essence-text-secondary: #C2C3C5;
    --essence-text-muted: #ABAEB3;
    --essence-text-channels: #96989d;

    /* || Interactive Colors */
    --essence-modifier-rgb: 61, 63, 82;
    --essence-interactive-primary: #ffffff;
    --essence-interactive-secondary: #f8f8f2;
    --essence-interactive-alt: #dcddde;
    --essence-interactive-muted: #6272a4;

    /* || Accent Colors - Adding calc(var(saturation-factor)*X%) is not required. */
    --essence-accent-brand-saturated: 326, calc(var(--saturation-factor, 1) * 74%), 97%;
    --essence-accent-brand: 326, calc(var(--saturation-factor, 1) * 100%), 74%;
    --essence-accent-brand-alt: 326, calc(var(--saturation-factor, 1) * 82%), 27%;
    --essence-accent-red: 0, calc(var(--saturation-factor, 1) * 100%), 67%;
    --essence-accent-orange: 31, calc(var(--saturation-factor, 1) * 100%), 71%;
    --essence-accent-yellow: 65, calc(var(--saturation-factor, 1) * 92%), 76%;
    --essence-accent-green: 135, calc(var(--saturation-factor, 1) * 94%), 65%;
    --essence-accent-green-alt: 135, calc(var(--saturation-factor, 1) * 72%), 26%;
    --essence-accent-blue: 191, calc(var(--saturation-factor, 1) * 97%), 77%;
    --essence-accent-purple: 256, calc(var(--saturation-factor, 1) * 89%), 78%;
    --essence-accent-grey: 245, 11%, 52%;

    /* || Button Colors */
    --button-brand-background: hsl(var(--essence-accent-brand));
    --button-brand-background-hover: hsl(326, calc(var(--saturation-factor, 1) * 68%), 59%);
    --button-brand-background-active: hsl(326, calc(var(--saturation-factor, 1) * 60%), 48%);
    --button-brand-background-disabled: hsl(326, calc(var(--saturation-factor, 1) * 86%), 71%);
    
    --button-red-background: hsl(var(--essence-accent-red));
    --button-red-background-hover: hsl(0, calc(var(--saturation-factor, 1) * 82%), 56%);
    --button-red-background-active: hsl(0, calc(var(--saturation-factor, 1) * 73%), 48%);
    --button-red-background-disabled: hsl(0, calc(var(--saturation-factor, 1) * 88%), 62%);

    --button-green-background: hsl(135, calc(var(--saturation-factor, 1) * 73%), 53%);
    --button-green-background-hover: hsl(135, calc(var(--saturation-factor, 1) * 64%), 45%);
    --button-green-background-active: hsl(135, calc(var(--saturation-factor, 1) * 64%), 35%);
    --button-green-background-disabled: hsl(135, calc(var(--saturation-factor, 1) * 66%), 53%);

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