html {
  /* stylelint-disable-next-line declaration-no-important */
  font-size: $mc-step-base * 1px !important;
}

body {
  @include step(font-size, 4, !important);
  font-weight: 400;
  font-family: $mc-font-default;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  line-height: $mc-lh-md;
  letter-spacing: $mc-ls-md;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba($mc-color-gray-500, 0.3);
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}


.mc-text {
  &-d3 { @include step(font-size, 12); }
  &-d2 { @include step(font-size, 11); }
  &-d1 { @include step(font-size, 10); }

  &-h1 { font-size: var(--mc-scale-9); }
  &-h2 { font-size: var(--mc-scale-8); }
  &-h3 { font-size: var(--mc-scale-7); }
  &-h4 { font-size: var(--mc-scale-6); }
  &-h5 { font-size: var(--mc-scale-5); }
  &-h6 { font-size: var(--mc-scale-4); }
  &-h7 { font-size: var(--mc-scale-3-5); }
  &-h8 { font-size: var(--mc-scale-3); }

  &-d3,
  &-d2,
  &-d1,
  &-h1,
  &-h2,
  &-h3,
  &-h4,
  &-h5,
  &-h6,
  &-h7,
  &-h8 {
    font-weight: 500;
    line-height: $mc-lh-headers;
    letter-spacing: $mc-ls-headers;
  }

  &-large {
    font-size: var(--mc-scale-5);
    line-height: $mc-lh-lg;
    letter-spacing: $mc-ls-lg;
  }

  &-medium {
    font-size: var(--mc-scale-4);
    line-height: $mc-lh-md;
    letter-spacing: $mc-ls-md;
  }

  &-small {
    font-size: var(--mc-scale-3-5);
    line-height: $mc-lh-sm;
    letter-spacing: $mc-ls-sm;
  }

  &-x-small {
    font-size: var(--mc-scale-3);
    line-height: $mc-lh-xs;
    letter-spacing: $mc-ls-xs;
  }
}