@use '_fonts';
@use '../compiled/tokens/scss/breakpoint';
@use '../compiled/tokens/scss/font-family';
@use '../compiled/tokens/scss/line-height';
@use '../mixins/fluid';
@use '../mixins/headings';
@use '../mixins/ms';

/**
 * 1. Adjust base font size between a min and max value based on viewport width.
 * 2. Promote consistent line spacing.
 *
 * @todo Revise font size min and max viewport based on standard breakpoints.
 * @see https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
 * @see https://drafts.csswg.org/css-inline-3/#line-sizing-property
 */

html {
  font-size: fluid.fluid-clamp(
    ms.step(0, 1rem),
    ms.step(1, 1rem),
    breakpoint.$xs,
    breakpoint.$xl
  ); /* 1 */
  // stylelint-disable-next-line property-no-unknown
  line-sizing: normal; /* 2 */
}

/**
 * 1. Allow long words (like URLs) to break at arbitrary points.
 *    Note we are using `anywhere` rather than `break-word`. They behave
 *    identically, but break points introduced by `break-word` are not
 *    considered when calculating `min-content` intrinsic sizes, which means
 *    layout remains broken in any CSS Grid layout.
 *    @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values
 * 2. Prevent size adjustments on orientation change. The `-webkit-` prefix is
 *    still required for iOS Safari.
 */

body {
  font-family: font-family.$sans-fallback;
  line-height: line-height.$loose;
  overflow-wrap: anywhere; /* 1 */

  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: none; /* 2 */
  text-size-adjust: none; /* 2 */

  @supports (font-variation-settings: normal) {
    font-family: font-family.$sans;
  }
}

/**
 * Headings
 */

@for $i from 1 through 6 {
  h#{$i} {
    @include headings.level($i);
    color: var(--theme-color-text-emphasis);
    text-wrap: balance;
  }
}

/**
 * Monospace
 */

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