@font-face {
  font-family: 'Mulish';
  font-weight: 200;
  src: url(./fonts/Mulish-200.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 300;
  src: url(./fonts/Mulish-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 400;
  src: url(./fonts/Mulish-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 500;
  src: url(./fonts/Mulish-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 600;
  src: url(./fonts/Mulish-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 700;
  src: url(./fonts/Mulish-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 800;
  src: url(./fonts/Mulish-800.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-weight: 900;
  src: url(./fonts/Mulish-900.ttf) format('truetype');
}
//--- Roboto
@font-face {
  font-family: 'Roboto';
  font-weight: 100;
  src: url(./fonts/Roboto-100.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  src: url(./fonts/Roboto-300.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  src: url(./fonts/Roboto-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src: url(./fonts/Roboto-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url(./fonts/Roboto-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  src: url(./fonts/Roboto-900.woff2) format('woff2');
}

/*===============================================
==================== Colors =====================
===============================================*/

:root {
  --cf-app-text-color-default: #000;
  --cf-app-text-color-light: #fff;
  --cf-app-text-color-grey: #6b6b6b;
}

/*===============================================
================== Base Text ====================
===============================================*/

//--- Normalize global font base
:root {
  font-size: 62.5%; //--- 63.5% of 16px (default) = 10px
  font-family: 'Mulish', 'Roboto', sans-serif;
}

/*===============================================
================== Headers ======================
===============================================*/

h1,
h2,
h3,
h4 {
  line-height: auto;
  font-family: 'Mulish', sans-serif;
  font-style: normal;
  font-weight: 900;
  margin: 0;
  display: inline-block;
  color: var(--cf-app-text-color-default);
}

h1.light,
h2.light,
h3.light,
h4.light {
  color: var(--cf-app-text-color-light);
}

h1.grey,
h2.grey,
h3.grey,
h4.grey {
  color: var(--cf-app-text-color-grey);
}

/*================== Mobile ==================*/
h1 {
  font-size: 4.2rem;
}

h2 {
  font-size: 3.6rem;
}

h3 {
  font-size: 2.8rem;
}

h4 {
  font-size: 1.8rem;
}

/*================== Desktop ==================*/

@media (min-width: $cf-screen-breakpoint) {
  h1 {
    font-size: 6.4rem;
  }

  h2 {
    font-size: 4.8rem;
  }

  h3 {
    font-size: 3.6rem;
  }

  h4 {
    font-size: 2.8rem;
  }
}

/*===============================================
================= Paragraphs ====================
===============================================*/

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  margin: 0;
  width: 100%;
  color: var(--cf-app-color-primary);
}

p.bold {
  font-weight: 500;
}

p.light {
  color: var(--cf-app-text-color-light);
}

p.grey {
  color: var(--cf-app-text-color-grey);
}

/*================== Mobile ==================*/

p.body-large {
  font-size: 1.8rem;
  line-height: 2.4rem;
}

p.body-standard {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

p.body-medium {
  font-size: 1.4rem;
  line-height: 2rem;
}

p.body-small {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

p.body-extra-small {
  font-size: 1rem;
  line-height: 1.6rem;
}

p.body-extra-extra-small {
  font-size: 0.8rem;
  line-height: 1.2rem;
}

/*================== Desktop ==================*/

@media (min-width: $cf-screen-breakpoint) {
  p.body-large {
    font-size: 2.4rem;
    line-height: 3.2rem;
  }

  p.body-standard {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }

  p.body-medium {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  p.body-small {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }

  p.body-extra-small {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  p.body-extra-extra-small {
    font-size: 0.8rem;
    line-height: 1.2rem;
  }
}
