@font-face {
  font-family: 'Graphik';
  src: url('#{$base-url}/fonts/Graphik-Regular-Web.woff2') format('woff2'),
    url('#{$base-url}/fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('#{$base-url}/fonts/Graphik-Medium-Web.woff2') format('woff2'),
    url('#{$base-url}/fonts/Graphik-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('#{$base-url}/fonts/Graphik-Semibold-Web.woff2') format('woff2'),
    url('#{$base-url}/fonts/Graphik-Semibold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('#{$base-url}/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
    url('#{$base-url}/fonts/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

// @font-face {
//   font-family: 'JetBrainsMono';
//   src: url('#{$base-url}/fonts/JetBrainsMono-Medium.woff2') format('woff2'),
//     url('#{$base-url}/fonts/JetBrainsMono-Medium.woff') format('woff');
//   font-weight: 400;
//   font-style: normal;
//   font-stretch: normal;
//   font-display: swap;
// }

// @font-face {
//   font-family: 'JetBrainsMono';
//   src: url('#{$base-url}/fonts/JetBrainsMono-Bold.woff2') format('woff2'),
//     url('#{$base-url}/fonts/JetBrainsMono-Bold.woff') format('woff');
//   font-weight: 700;
//   font-style: normal;
//   font-stretch: normal;
//   font-display: swap;
// }

$fonts: (
  sans: (
    font-family: ('Graphik', Arial, sans-serif),
    line-height: lerp((14px: 1.6em, 50px: 1.1em), 1em),
    trim-sides: calc(1px - 0.1em),
    trim-adjacent: calc(1em/6),
    trim-capline: 0.085,
    trim-baseline: 0.085,
  ),
  mono: (
    font-family: ('JetBrainsMono', monospace),
    line-height: lerp((14px: 1.6em, 50px: 1.1em), 1em),
    trim-sides: calc(1px - 0.1em),
    trim-adjacent: calc(1em/6),
    trim-capline: 0.085,
    trim-baseline: 0.085,
  ),
);