$system-default-font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans TC',
  'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol';
$system-default-font-family: '微軟正黑體';
$font-serif: 'Noto Serif TC', serif;
$font-jost: 'Jost', sans-serif;
$font-playfair: 'Playfair Display', serif;

@mixin font-serif { font-family: $font-serif }
@mixin font-jost { font-jost: $font-jost }
@mixin font-playfair { font-jost: $font-playfair }

.font-serif { font-family: $font-serif }
.font-jost { font-family: $font-jost }
.font-playfair { font-family: $font-jost }

$font-size-map: (
  "1": 2.25em,
  "2": 1.5em,
  "3": 1.25rem,
  "4": 1.125rem,
  "5": 1rem,
  "6": 0.875rem
);

@each $size, $value in $font-size-map {
  .h-#{$size} {
    font-size: $value
  }
}

.h-1 {}
.h-2 {
  font-size: 24px;
}
.h-3 {}
.h-4 {}
.h-5 {}
.h-6 {}

$font-weight-map: (
  "thin": 100,
  "extra-light": 200,
  "light": 300,
  "regular": 400,
  "medium": 500,
  "semi-bold": 600,
  "bold": 700,
  "extra-bold": 800,
  "black": 900
);

@each $size, $value in $font-weight-map {
  .font-#{$size} {
    font-weight: $value
  }
  .hover\:font-#{$size} {
    &:hover {
      font-weight: $value
    }
  }
}

.font-thin {}
.font-extra-light {}
.font-light {}
.font-regular {}
.font-medium {}
.font-semi-bold {}
.font-bold {}
.font-extra-bold {}
.font-black {}

.hover\:font-thin {}
.hover\:font-extra-light {}
.hover\:font-light {}
.hover\:font-regular {}
.hover\:font-medium {}
.hover\:font-semi-bold {}
.hover\:font-bold {}
.hover\:font-extra-bold {}
.hover\:font-black {}