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

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


--color-primary: hsl(188, 100%, 28%);
--color-primary-darker: hsl(188, 100%, 23%);
--color-primary-darkest: hsl(188, 100%, 18%);
--color-primary-lighter: hsl(188, 100%, 33%);
--color-primary-lightest: hsl(188, 100%, 63%);
--color-primary-translucent: hsla(188, 100%, 28%, .48);
--color-secondary: hsl(5, 57%, 49%);
--color-secondary-darker: hsl(5, 57%, 44%);
--color-secondary-darkest: hsl(5, 57%, 39%);
--color-secondary-lighter: hsl(5, 57%, 54%);
--color-secondary-lightest: hsl(5, 57%, 84%);
--color-secondary-translucent: hsla(5, 57%, 49%, .48);
--color-tertiary: hsl(193, 54%, 65%);
--color-tertiary-darker: hsl(193, 54%, 60%);
--color-tertiary-darkest: hsl(193, 54%, 55%);
--color-tertiary-lighter: hsl(193, 54%, 70%);
--color-tertiary-lightest: hsl(193, 54%, 100%);
--color-tertiary-translucent: hsla(193, 54%, 65%, .48);
--color-tertiary-12: hsla(193, 54%, 65%, .12);
--color-tertiary-24: hsla(193, 54%, 65%, .24);
--color-tertiary-36: hsla(193, 54%, 65%, .36);
--color-tertiary-48: hsla(193, 54%, 65%, .48);
--color-tertiary-60: hsla(193, 54%, 65%, .60);
--color-tertiary-72: hsla(193, 54%, 65%, .72);
--color-tertiary-84: hsla(193, 54%, 65%, .84);
--color-tertiary-96: hsla(193, 54%, 65%, .96);




    --color-light: hsl(0, 0%, 100%);
    --color-dark: hsl(60, 2%, 11%);
    --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(60, 2%, 71%);
    --color-grey-5: hsl(60, 2%, 51%);

    --color-background-button-transparent: var(--color-light);
    --color-footer-background: var(--color-tertiary-12);
    --color-footer-text: var(--color-dark);
    --color-footer-link: var(--color-primary);
    --color-footer-link-hover: var(--color-primary);
    --color-footer-partner: var(--color-grey-5);
        --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: 16px;
    --font-family: 'Montserrat', serif;
    --heading-font-family: 'Montserrat';



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