:root {
    /* Theme colors */
    --color-primary: #0085DA;
    --color-primary-hover: #206CBD;
    --color-primary-light: #D4ECFA;

    /* Body & surfaces colors */
    --color-bg-body: #ECF1F4;
    --color-bg-surface: #FFF;

    /* Neutral colors */
    --color-gray: #F5F5F5;
    --color-gray-2: #E6E6E6;
    --color-gray-3: #E0DFDF;
    --color-gray-4: #E0E0E0;

    --color-red: #FF6761;

    --color-success: #E5F9F1;
    --color-success-dark: #00C179;

    --color-warning: #FEF4E8;
    --color-warning-dark: #F7941E;

    --color-error: #FFECEC;
    --color-error-dark: #ED6767;

    /* Text colors */
    --text-primary: #58595B;
    --text-gray: #9D9DAA;
    --text-green: #00C179;

    /* Shadow Color */
    --shadow-color: rgba(0, 0, 0, 0.2);

    /* Font families */
    --font-primary: "MuseoSansRounded";

    /* Misc */
    --card-shadow-box: 0 2px 10px 0 rgba(0, 0, 0, 0.04);
}

/*
    START: RESET
    Josh's Custom CSS Reset (with customization)
    https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select, pre {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font: inherit;
}

#root, #__next {
    isolation: isolate;
}
/* END: RESET */

body {
    font: 14px/1.2 var(--font-primary);
    color: var(--text-primary);
}

a {
    text-decoration: none;
    color: var(--color-primary);

    &:hover {
        cursor: pointer;
        text-transform: none;
    }
}