@mixin font-face($family, $file, $style: normal, $weight: 400) {
  @font-face {
    font-family: $family;
    font-style: $style;
    font-weight: $weight;
    src: url("/assets/#{$file}.woff2") format("woff2");
  }
}

@include font-face("Fira Sans", "FiraSans/Regular");
@include font-face("Fira Sans", "FiraSans/Italic", italic);
@include font-face("Fira Sans", "FiraSans/Bold", normal, 700);
@include font-face("Fira Sans", "FiraSans/BoldItalic", italic, 700);
@include font-face("Fira Code", "FiraCode/Regular");
@include font-face("Fira Sans Condensed", "FiraSansCondensed/SemiBold", normal, 600);

body {
  font-family: var(--font-body);
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

h1 {
  font-size: clamp(2.0rem, 3.8vw, 2.5rem);
  letter-spacing: -0.015em;
  line-height: 1.08;

  &::before {
    color: var(--primary);
    content: "> ";
  }
}
