:root {
    --red-lightest: #fcebec;
    --red-lighter: #e69a9c;
    --red-light: #ff5439;
    --red: #e83134;
    --red-dark: #a32324;
    --red-darker: #63010e;
    --red-darkest: #3d0109;
    --orange-lightest: #ffe5ca;
    --orange-lighter: #f5b180;
    --orange-light: #e77636;
    --orange: #e14a0c;
    --orange-dark: #711f03;
    --orange-darker: #581902;
    --orange-darkest: #391102;
    --yellow-lightest: #f7e8d4;
    --yellow-lighter: #f7d1a1;
    --yellow-light: #f6d169;
    --yellow: #fbbd1a;
    --yellow-dark: #b06f1c;
    --yellow-darker: #734d00;
    --yellow-darkest: #422c00;
    --blue-lightest: #e5f4f8;
    --blue-lighter: #a7dceb;
    --blue-light: #0faace;
    --blue: #13869e;
    --blue-dark: #11727f;
    --blue-darker: #202f53;
    --blue-darkest: #262835;
    --green-lightest: #cce9e5;
    --green-lighter: #bfe3de;
    --green-light: #a9d6d0;
    --green: #5ebbae;
    --green-dark: #40988c;
    --green-darker: #287368;
    --green-darkest: #13463f;
    --gray-lightest: #ededf5;
    --gray-lighter: #cdcdda;
    --gray-light: #afb3bd;
    --gray: #ababbb;
    --gray-dark: #53575e;
    --gray-darker: #23272f;
    --gray-darkest: #1a1e25;
    --color: #fff;
    --dashboard-background-color: var(--gray-darkest);
    --tile-background-color: var(--gray-darker);
}

:root {
    --grid-gap: 0.5vw;
    --grid-padding: 1vw;
}

:root {
    --font-family: 'Source Sans Pro', sans-serif;
    --font-weight: 400;
    --font-weight-light: 400;
    --font-weight-bold: 600;
    --font-weight-black: 900;
    --font-size-base: 1.5vw;
    --font-size-xxs: 0.65rem;
    --font-size-xs: 0.8rem;
    --font-size-s: 0.9rem;
    --font-size-default: 1rem;
    --font-size-m: 1.1rem;
    --font-size-l: 2rem;
    --font-size-xl: 3rem;
    --font-size-xxl: 4rem;
}