@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");

$font-heading: "Roboto", sans-serif;
$font-paragraph: "Roboto", sans-serif;

html,
body {
  background-color: $white-100;
  font-family: $font-paragraph;
  font-weight: $weight-normal;
  font-size: 13px; // Base font size
  color: $color-text;
}

p {
  font-size: 1rem; // 13px
  font-family: $font-paragraph;
  font-weight: $weight-normal;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-heading;
  font-weight: $weight-semibold;
  color: $color-heading;
}

h1 {
  font-size: 2.462rem;
} // 32px
h2 {
  font-size: 2rem;
} // 26px
h3 {
  font-size: 1.692rem;
} // 22px
h4 {
  font-size: 1.385rem;
} // 18px
h5 {
  font-size: 1.231rem;
  font-weight: 500;
  letter-spacing: normal;
} // 16px
h6 {
  font-size: 1rem;
  letter-spacing: 0;
  font-weight: 500;
} // 13px

h6 {
  &.is-tiny {
    font-size: 0.846rem;
    line-height: 1.2;
  } // 11px
  &.is-extra-small {
    font-size: 0.923rem;
    line-height: 1.2;
  } // 12px
  &.is-small,
  &.is-normal {
    font-size: 1rem;
    line-height: 1.2;
  } // 13px
  &.is-semi-normal {
    font-size: 1.077rem;
    line-height: 1.2;
  } // 14px
  &.is-medium {
    font-size: 1.231rem;
    line-height: 1.2;
  } // 16px
}

.content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-heading;
  }
  p {
    color: $color-text;
  }
}

a:not(.ac-button) {
  font-family: $font-paragraph;
  color: $ac-primary;
  &:hover {
    color: $ac-primary;
  }
}

.text-xm {
  font-size: 0.769rem;
} // 10px
.text-sm {
  font-size: 0.846rem;
} // 11px
.text-xs {
  font-size: 0.923rem;
} // 12px
.text-base {
  font-size: 1rem;
} // 13px
.text-lg {
  font-size: 1.077rem;
} // 14px
.text-xl {
  font-size: 1.231rem;
} // 16px
.text-2xl {
  font-size: 1.385rem;
} // 18px
.text-3xl {
  font-size: 1.846rem;
} // 24px
.text-4xl {
  font-size: 2.308rem;
} // 30px
.text-5xl {
  font-size: 2.769rem;
} // 36px
.text-6xl {
  font-size: 3.231rem;
} // 42px

hr {
  background-color: $gray-60;
  border: none;
  display: block;
  height: 1px;
  margin: 15px 0;
}

strong {
  color: $color-text;
}

.is-font-light {
  font-weight: $weight-light;
}
.is-font-medium {
  font-weight: $weight-medium;
}
.is-font-semibold {
  font-weight: $weight-semibold;
}
.is-font-bold {
  font-weight: $weight-bold;
}

.material-icons {
  font-size: 1em;
}
.has-text-primary {
  color: $ac-primary !important;
}
.text-code {
  font-family: "Inconsolata", monospace;
  font-size: 14px;
  color: $color-heading;
}