@import url('https://fonts.googleapis.com/css?family=Urbanist: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(208, 79%, 70%);
--color-primary: hsl(208, 79%, 70%);
--color-primary-darker: hsl(208, 79%, 65%);
--color-primary-darkest: hsl(208, 79%, 60%);
--color-primary-lighter: hsl(208, 79%, 75%);
--color-primary-lightest: hsl(208, 79%, 105%);
--color-primary-translucent: hsla(208, 79%, 70%, .48);
--color-secondary: hsl(190, 53%, 62%);
--color-secondary: hsl(190, 53%, 62%);
--color-secondary-darker: hsl(190, 53%, 57%);
--color-secondary-darkest: hsl(190, 53%, 52%);
--color-secondary-lighter: hsl(190, 53%, 67%);
--color-secondary-lightest: hsl(190, 53%, 97%);
--color-secondary-translucent: hsla(190, 53%, 62%, .48);
--color-tertiary: hsl(36, 90%, 57%);
--color-tertiary: hsl(36, 90%, 57%);
--color-tertiary-darker: hsl(36, 90%, 52%);
--color-tertiary-darkest: hsl(36, 90%, 47%);
--color-tertiary-lighter: hsl(36, 90%, 62%);
--color-tertiary-lightest: hsl(36, 90%, 92%);
--color-tertiary-translucent: hsla(36, 90%, 57%, .48);
--color-tertiary-12: hsla(36, 90%, 57%, .12);
--color-tertiary-24: hsla(36, 90%, 57%, .24);
--color-tertiary-36: hsla(36, 90%, 57%, .36);
--color-tertiary-48: hsla(36, 90%, 57%, .48);
--color-tertiary-60: hsla(36, 90%, 57%, .60);
--color-tertiary-72: hsla(36, 90%, 57%, .72);
--color-tertiary-84: hsla(36, 90%, 57%, .84);
--color-tertiary-96: hsla(36, 90%, 57%, .96);




    --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%);

    --color-background-button-transparent: var(--color-light);
    --color-footer-background: hsla(274, 41%, 81%, 0.24);
    --color-footer-text: hsla(0, 0%, 0%, 1);
    --color-footer-link: hsla(0, 0%, 0%, 1);
    --color-footer-link-hover: hsla(0, 0%, 0%, .4);
    --color-footer-partner: hsla(0, 0%, 0%, 1);

--color-dropdown-menu-background: #ffffff;
--color-dropdown-menu-background: #ffffff;
--color-menu-dropdown-text: inherit;
--color-menu-dropdown-text-hover: inherit;

--color-menu-background: #ffffff;
    --color-menu-background: var(--color-light);
    --color-menu-text: var(--color-dark);
    --color-menu-text-hover: var(--color-primary);
    --color-submenu-hover:  var(--color-grey-3);
    --font-size: 18px;
    --font-family: 'Urbanist', serif;
    --heading-font-family: 'Urbanist';



    --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);

    --color-button-primary: var(--color-primary);
    --color-button-primary-darker: var(--color-primary-darker);
    --color-button-primary-text: var(--color-light);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-darker: var(--color-secondary-darker);
    --color-button-secondary-text: var(--color-light);
    --color-button-ghost-primary: var(--color-primary);
    --color-button-ghost-secondary: var(--color-secondary);
    --color-button-link: var(--color-primary);
    --color-button-transparent: var(--color-secondary);
    --border-radius: 4px;
}

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

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