@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 700;
  src: url('../font/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
  font-display: block;
}

@font-face {
  font-family: Material Symbols;
  src: url('../font/Material_Symbols_Rounded/MaterialSymbolsRounded-Regular.ttf') format('truetype');
  font-style: normal;
}

html {
  font-family: Manrope, sans-serif;
  color: $black;
  font-style: normal;
  font-size: 16px;
}

// we should create different classes when we have other sizes then 24px to make them scale properly
.material-symbols {
  font-family: Material Symbols;
  font-weight: 400;
  font-size: 1.5rem;
  font-variation-settings:
    'wght' 400,
    'GRAD' 0;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 600;
  font-size: 2.375rem;
  line-height: 2.625rem;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-size: 3rem;
    line-height: 3.25rem;
  }
}

h2 {
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.375rem;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

h3 {
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 2.25rem;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

h4 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.875rem;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
}

p, span, li, strong, div, i, b {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin: 0;

  &.subtitle, &.large {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.875rem;

    @media (min-width: $breakpoint_lg) {
      font-size: 1.375rem;
      line-height: 2rem;
    }
  }

  &.navigation {
    font-size: 1.25rem;
  }
}

b, strong {
  font-weight: 700;
}

small, p.small {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-weight: 500;
  }

  &.tiny {
    font-size: 0.75rem;
    line-height: 1;
  }
}

label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }
}

a {
  color: $dark_orange;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-decoration-line: underline;
  margin: 0;

  @media (min-width: $breakpoint_lg) {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  &.no-link-styling {
    color: inherit;
    text-decoration-line: none;
  }

  &.keep-text-height {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
}

input[type="date"], input[type="time"], input, textarea {
  font-family: Manrope, sans-serif;
}