/**
 * @file
 * Typography
 * Base typography for the theme
 */

@use '_helper' as *;

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
	font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('../assets/fonts/RobotoSlab-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../assets/fonts/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../assets/fonts/RobotoCondensed-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
	font-display: swap;
}

//## Headers
h1, .h1 {
  @include h1;
  margin: 0;
}

h2, .h2 {
  @include h2;
}

h3, .h3 {
  @include h3;
}

h4, .h4 {
  @include h4;
}

h5, .h5 {
  @include h5;
}

h6, .h6 {
  @include h6;
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin: $spacing-vertical-sm 0 $spacing-vertical-text-sm;
  color: $color-blue-dark;
  
  @media screen and (min-width: $break-large) {
    margin: $spacing-vertical-lg 0 $spacing-vertical-text-lg;
  }
}

//## Paragraphs
p {
  margin: $spacing-vertical-text-sm 0;

  @media screen and (min-width: $break-large) {
    margin: $spacing-vertical-text-lg 0;
  }

  &:empty {
    display: none;
  }
}

strong {
  font-weight: 900;
}