@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap');

:root {
 --color-card-background: hsl(0, 0%, 100%);
 --color-calendar-card-background: hsl(0, 0%, 100%);


--color-primary: hsl(191, 100%, 42%);
--color-primary-darker: hsl(191, 100%, 37%);
--color-primary-darkest: hsl(191, 100%, 32%);
--color-primary-translucent: hsla(191, 100%, 42%, .48);
--color-secondary: hsl(325, 63%, 54%);
--color-secondary-darker: hsl(325, 63%, 49%);
--color-secondary-darkest: hsl(325, 63%, 44%);
--color-secondary-translucent: hsla(325, 63%, 54%, .48);
--color-tertiary: hsl(209, 16%, 47%);
--color-tertiary-12: hsla(209, 16%, 47%, .12);
--color-tertiary-24: hsla(209, 16%, 47%, .24);
--color-tertiary-36: hsla(209, 16%, 47%, .36);
--color-tertiary-48: hsla(209, 16%, 47%, .48);
--color-tertiary-60: hsla(209, 16%, 47%, .60);
--color-tertiary-72: hsla(209, 16%, 47%, .72);
--color-tertiary-84: hsla(209, 16%, 47%, .84);
--color-tertiary-96: hsla(209, 16%, 47%, .96);

    --color-footer-background: var(--color-tertiary-12);

    --color-light: hsl(0, 0%, 100%);
    --color-dark: hsl(0, 0%, 0%);
    --color-grey-1: hsl(0, 0%, 97%);
    --color-grey-2: hsl(0, 0%, 95%);
    --color-grey-3: hsl(0, 0%, 90%);
    --color-grey-4: hsl(0, 0%, 60%);
    --color-grey-5: hsl(0, 0%, 40%);


    --font-size: 16px;
    --font-family: 'Roboto', serif;
    --heading-font-family: 'Roboto';



    --shadow-default: 0 2px 16px 0 rgba(0,0,0,0.12);
    --shadow-darker: 0 2px 16px 0 rgba(0,0,0,0.16);
    --shadow-lighter: 0 2px 16px 0 rgba(0,0,0,0.08);
    --shadow-inset: inset 0 1px 3px 0 rgba(0,0,0,0.12);
}

html {
    font-size: var(--font-size);
}

body {
    color: var(--color-dark);
}