/* Bare elements in the system's type: the page's paper and ink, headings on the shared scale,
   links with a hairline underline, one focus ring, and a body that holds the footer to the
   bottom of a short page. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer base {
  html {
    background: var(--bg);
  }

  /* Set here as well as in the package's bridge, so the reading face holds whatever order the
     package's own base rules load in. */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body > * {
    flex-shrink: 0;
  }

  body > main,
  body > .site-page {
    flex: 1 0 auto;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
  }

  h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-heading);
  }

  h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-heading);
  }

  h4 {
    font-size: var(--text-h4);
    line-height: var(--leading-heading);
  }

  p,
  li,
  blockquote {
    text-wrap: pretty;
  }

  strong,
  b {
    font-weight: var(--weight-strong);
  }

  a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
  }

  a:hover {
    text-decoration-color: currentColor;
  }

  /* Buttons, links and checks draw the package's ring from the focus tokens (tokens.css); this
     is the floor for anything else focusable, at the same width and offset. */
  :where(:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: color-mix(in oklab, var(--accent) 22%, transparent);
  }

  mark {
    padding-inline: 0.1em;
    background: var(--mark-bg);
    color: var(--ink);
  }

  img {
    max-width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
    }
  }
}