:root {
    --hue: 270deg;
    --sat: 50%;
    --lit: 40%;

    --bg-primary: #fff;
    --bg-secondary: #fff;
    --bg-tertiary: hsla(var(--hue), var(--lit), 97%) !important;

    --text-primary: #332e38;
    /* --text-secondary: #47404f; */
    --text-secondary: #000000;

    --clr-primary: #639;
    --clr-primary: hsla(var(--hue), var(--sat), var(--lit));
    --clr-secondary: hsl(41.65deg 100% 50%);
    --clr-tertiary: #f44336;

    --bx-shadow-1: 0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
    /* --bx-shadow-2: 0 4px 20px 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08); */
    --bx-shadow-2: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgb(98 98 98 / 15%) 0px 1px 6px;
    --border-1: 1px solid #80808033;
    /* --border-2: 1px solid #80808052; */
    --border-2: 1px solid #292020;

    --menu-left-offset: 93px;
    --menu-top-offset: 72px;
}

.dark-mode {
    --bg-primary: #333333;
    --bg-secondary: #3c3c3c;
    --bg-tertiary: rgb(75, 75, 75);

    --text-primary: #FFF;
    --text-secondary: #ebebeb;

    --clr-primary: #639;
    --clr-primary: hsla(var(--hue), var(--sat), var(--lit));
    --clr-secondary: hsl(41.65deg 100% 50%);
    --clr-tertiary: #f44336;

    --bx-shadow-1: 0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
    --bx-shadow-2: 0 4px 20px 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08);
    --border-1: 1px solid #ffffff30;
    --border-2: 1px solid #ffffffb8;
}