:root {
    --rem-size: 0.0625rem;
    --app-color-brand: #59b6bd;
    --app-color-blue-lightest: #f2feff;
    --app-color-blue-lighter: #cde6e8;
    --app-color-blue-light: #b2f2ed;
    --app-color-blue: var(--app-color-brand);
    --app-color-blue-dark: #419498;
    --app-color-purple: #ba84ba;
    --app-color-purple-dark: #7f5380;
    --app-color-white: #fff;
    --app-color-grey-light: #f4f4f4;
    --app-color-grey-mid-light: #e6e6e6;
    --app-color-grey: #707070;
    --app-color-grey-dark: #343434;
    --app-color-black: #000;
    --app-nav-width: calc(300 * var(--rem-size));
    --app-nav-padding: calc(40 * var(--rem-size));
    --app-nav-background-color: var(--app-color-brand);
    --app-font-family-body: "Lato", sans-serif;
    --app-font-family-headings: "Montserrat", sans-serif;
    --app-layout-spacing: calc(50 * var(--rem-size));
    --app-content-spacing: calc(40 * var(--rem-size));
    --app-sidebar-item-padding: calc(20 * var(--rem-size));
    --app-sidebar-width: calc(368 * var(--rem-size));

    --bs-primary: var(--app-color-purple);
    --bs-primary-rgb: 186,132,186;
    --bs-body-font-family: var(--app-font-family-body);
    --bs-border-radius: 0;
    --bs-border-radius-lg: 0;
    --bs-body-bg: var(--app-color-grey-light);
    --bs-body-color: var(--app-color-grey);
    --bs-emphasis-color: var(--bs-body-color);
    --bs-sidebar-bg: var(--app-color-grey-mid-light);
}