:root {
    --white: #FFFFFF;
    --lightest-gray: #FAFAFA;
    --light-gray: #EDEDED;
    --dark-gray: #4D4D4D;
    --darkest-gray: #454545;
    --black: #333333;
    --deep-black: #222222;
    --primary: #0077CC;
    --secondary: #eaf6ff;
    --alert: #DF2020;
    --icon: #28A745;
    --primary-dark: #006bb8;
    --primary-light: #0083e0;

    --text-color: var(--black);
    --weak-text-color: var(--dark-gray);
    --link-color: var(--primary);
    --menu-link-color: var(--light-gray);
    --icon-color: var(--icon);
    --background-color: var(--white);
    --hover-color: var(--primary-dark);

    --inverted-background-color: var(--dark-gray);
    --inverted-text-color: var(--white);

    --weak-border-color: var(--light-gray);
    --border-color: var(--dark-gray);

    --header-background-color: var(--primary);
    --header-text-color: var(--white);

    --card-background-color: var(--lightest-gray);
    --toggle-background-off: var(--light-gray);
    --toggle-background-on: var(--primary);

    --button-background-color: var(--primary);
    --button-border-color: var(--primary);
    --button-text-color: var(--white);
    --button-alert-color: var(--alert);
    --button-loader-primary: url("/img/base/loader-white.svg");
    --button-loader-secondary: url("/img/base/loader-primary.svg");

    --flash-background-color: var(--primary);
    --flash-text-color: var(--white);
    --flash-alert-color: var(--alert);

    --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --inset-box-shadow: 0 1px 3px rgba(0, 0, 0, .14) inset;

    --dropdown-menu-background: var(--white);

    --header-height: 5rem;
    /* --body-padding: 2rem; */
    --body-padding: 0.5rem;
    --footer-height: 16rem;
    --nav-width: 16rem;
    --inverted-ic-logo: url("/img/base/ic-logo-white.svg");
    --expand-image: url("/img/base/expand-black.svg");
    --white-expand-image: url("/img/base/expand-white.svg");
}

html {
    accent-color: var(--primary);
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --text-color: var(--white);
        --weak-text-color: var(--light-gray);
        --link-color: var(--white);
        --icon-color: var(--white);
        --hover-color: var(--darkest-gray);

        --inverted-background-color: var(--deep-black);

        --weak-border-color: var(--dark-gray);
        --border-color: var(--light-gray);
        --background-color: var(--black);
        --button-border-color: var(--white);

        --button-loader-secondary: url("/img/base/loader-white.svg");

        --card-background-color: var(--darkest-gray);
        --dropdown-menu-background: var(--black);
        --toggle-background-off: var(--dark-gray);

        --expand-image: url("/img/base/expand-white.svg");
    }
} */

@media screen and (max-width: 800px) {
    :root {
        --header-height: 4rem;
        --body-padding: 1rem;
    }
}