:root {
    --primary-color: rgba(153, 110, 153, 1);
    --secondary-color: rgba(78, 243, 255, 0.3);
    --tertiary-color: rgba(78, 243, 255, 0.7);
    --quaternary-color: rgb(153, 110, 153);
    --background-color: #17171445;
    --background-gradient: linear-gradient(-45deg, #17171445, #17174f33, #1717293b);
    --button-group-gradient: linear-gradient(114deg, var(--quaternary-color) 0%, var(--tertiary-color) 100%);
    --button-group-font-color: #fff;
    --box-border-color: rgba(153, 110, 153, 1);
    --box-background-color: rgba(233, 241, 255, 0.2);
    --main-header-gradient: linear-gradient(90deg, var(--quaternary-color) 0%, var(--tertiary-color) 100%);
    --default-font-family: Chakra Petch, sans-serif;
    --font-color: #4b515a;
    --nav-font-color: #4b515a;
    --nav-hover-font-color: #e9f1ff;
    --nav-active-font-color: #e9f1ff;
    --nav-background-color: rgba(153, 110, 153, 0.1);
    --nav-hover-background-color: rgba(153, 110, 153, 0.2);
    --nav-active-background-color: rgba(153, 110, 153, 0.4);
    --input-background-color: rgba(233, 241, 255, 0.2);
    --input-border-color: rgba(153, 110, 153, 1);
    --input-font-color: rgba(153, 110, 153, 1);
    --input-hover-background-color: #171726;
    --input-hover-border-color: rgba(78, 243, 255, 0.6);
    --input-hover-font-color: #e9f1ff;
    --input-active-background-color: #171726;
    --input-active-border-color: rgba(153, 110, 153, 0.4);
    --input-active-font-color: #e9f1ff;
    --modal-font-color: #fff;
    
}
html[data-theme='light'] {
    --primary-color: rgba(153, 110, 153, 1);
    --secondary-color: rgba(78, 243, 255, 0.3);
    --tertiary-color: rgba(78, 243, 255, 0.7);
    --quaternary-color: rgb(153, 110, 153);
    --background-color: #17171445;
    --background-gradient: linear-gradient(-45deg, #17171445, #17174f33, #1717293b);
    --button-group-gradient: linear-gradient(114deg, var(--quaternary-color) 0%, var(--tertiary-color) 100%);
    --button-group-font-color: #fff;
    --box-border-color: rgba(153, 110, 153, 1);
    --box-background-color: rgba(233, 241, 255, 0.2);
    --main-header-gradient: linear-gradient(90deg, var(--quaternary-color) 0%, var(--tertiary-color) 100%);
    --default-font-family: Chakra Petch, sans-serif;
    --font-color: #4b515a;
    --nav-font-color: #4b515a;
    --nav-hover-font-color: #e9f1ff;
    --nav-active-font-color: #e9f1ff;
    --nav-background-color: rgba(153, 110, 153, 0.1);
    --nav-hover-background-color: rgba(153, 110, 153, 0.2);
    --nav-active-background-color: rgba(153, 110, 153, 0.4);
    --input-background-color: rgba(233, 241, 255, 0.2);
    --input-border-color: rgba(153, 110, 153, 1);
    --input-font-color: rgba(153, 110, 153, 1);
    --input-hover-background-color: #171726;
    --input-hover-border-color: rgba(78, 243, 255, 0.6);
    --input-hover-font-color: #e9f1ff;
    --input-active-background-color: #171726;
    --input-active-border-color: rgba(153, 110, 153, 0.4);
    --input-active-font-color: #e9f1ff;
    --modal-font-color: #fff;
    
}

@media (prefers-color-scheme: dark) {
    :root {
    --primary-color: rgba(78, 243, 255, 0.6);
        --secondary-color: rgba(153, 110, 153, 0.4);
        --tertiary-color: rgb(153, 110, 153);
        --quaternary-color: rgba(78, 243, 255, 0.7);
        --background-color: #171726;
        --background-gradient: linear-gradient(-45deg, #171714, #17174F, #171729);
        --button-group-gradient: linear-gradient(114deg, var(--tertiary-color) 0%, var(--quaternary-color) 100%);
        --button-group-font-color: #fff;
        --box-border-color: rgba(78, 243, 255, 0.6);
        --box-background-color: rgba(233, 241, 255, 0.05);
        --main-header-gradient: linear-gradient(90deg, var(--tertiary-color) 0%, var(--quaternary-color) 100%);
        --default-font-family: Chakra Petch, sans-serif;
        --font-color: #e9f1ff;
        --nav-font-color: #e9f1ff;
        --nav-hover-font-color: #e9f1ff;
        --nav-active-font-color: #e9f1ff;
        --nav-background-color: rgba(153, 110, 153, 0.1);
        --nav-hover-background-color: rgba(78, 243, 255, 0.2);
        --nav-active-background-color: rgba(78, 243, 255, 0.4);
        --input-background-color: #17172678;
        --input-border-color: rgba(78, 243, 255, 0.6);
        --input-font-color: #e9f1ff;
        --input-hover-background-color: #171726;
        --input-hover-border-color: rgba(78, 243, 255, 0.6);
        --input-hover-font-color: #e9f1ff;
        --input-active-background-color: #171726;
        --input-active-border-color: rgba(153, 110, 153, 0.4);
        --input-active-font-color: #e9f1ff;
        --modal-font-color: #e9f1ff;
        
    }
}
html[data-theme='dark'] {
    --primary-color: rgba(78, 243, 255, 0.6);
    --secondary-color: rgba(153, 110, 153, 0.4);
    --tertiary-color: rgb(153, 110, 153);
    --quaternary-color: rgba(78, 243, 255, 0.7);
    --background-color: #171726;
    --background-gradient: linear-gradient(-45deg, #171714, #17174F, #171729);
    --button-group-gradient: linear-gradient(114deg, var(--tertiary-color) 0%, var(--quaternary-color) 100%);
    --button-group-font-color: #fff;
    --box-border-color: rgba(78, 243, 255, 0.6);
    --box-background-color: rgba(233, 241, 255, 0.05);
    --main-header-gradient: linear-gradient(90deg, var(--tertiary-color) 0%, var(--quaternary-color) 100%);
    --default-font-family: Chakra Petch, sans-serif;
    --font-color: #e9f1ff;
    --nav-font-color: #e9f1ff;
    --nav-hover-font-color: #e9f1ff;
    --nav-active-font-color: #e9f1ff;
    --nav-background-color: rgba(153, 110, 153, 0.1);
    --nav-hover-background-color: rgba(78, 243, 255, 0.2);
    --nav-active-background-color: rgba(78, 243, 255, 0.4);
    --input-background-color: #17172678;
    --input-border-color: rgba(78, 243, 255, 0.6);
    --input-font-color: #e9f1ff;
    --input-hover-background-color: #171726;
    --input-hover-border-color: rgba(78, 243, 255, 0.6);
    --input-hover-font-color: #e9f1ff;
    --input-active-background-color: #171726;
    --input-active-border-color: rgba(153, 110, 153, 0.4);
    --input-active-font-color: #e9f1ff;
    --modal-font-color: #e9f1ff;
    
}

html[data-theme='dark'] .sign-in-logo.image {
  background-image: url("/branding/dark-mode-logo.png");
}

html[data-theme='dark'] .main-header .logo {
  background-image: url("/branding/dark-mode-logo.png");
}