// stylelint-disable value-keyword-case, scss/operator-no-unspaced

@use "sass:list";
@use "~@fontsource/inter/scss/mixins" as Inter;
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;

// System fonts:
// https://primer.style/design/foundations/typography#font-stack
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
$system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;

// Prefer web fonts below with system fonts as backup:
$font-stack-sans: list.join("Inter", $system-fonts-sans);
$font-stack-sans-variable: list.join("Inter var", $system-fonts-sans);
$font-stack-mono: list.join("Roboto Mono", $system-fonts-mono);
$font-stack-mono-variable: list.join("Roboto Mono var", $system-fonts-mono);

// prettier-ignore
$unicode-latin-only: (
  latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
);

// Inter
@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: $unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: $unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: $unicode-latin-only);

// Roboto Mono
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic, $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: $unicode-latin-only);

// Comic Neue
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);

body {
  font-family: $font-stack-sans;
  font-kerning: normal;
  font-variant-ligatures: normal;
  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
}

code,
kbd,
samp,
pre,
.monospace {
  font-family: $font-stack-mono;
}

// override above font-family if browser supports variable fonts
// https://caniuse.com/#feat=variable-fonts
@supports (font-variation-settings: normal) {
  body {
    font-family: $font-stack-sans-variable;
    font-optical-sizing: auto;
  }

  code,
  kbd,
  samp,
  pre,
  .monospace {
    font-family: $font-stack-mono-variable;
  }

  // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
  // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
  em {
    font-style: normal !important;
    font-variation-settings: "ital" 1, "slnt" -10;

    // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
    code,
    kbd,
    samp,
    pre,
    .monospace {
      font-style: italic !important;
    }
  }
}