@layer base {
  html {
    font-size: 100%;

    /* Slightly larger base size on wider screens */
    @media (min-width: 100ch) {
      font-size: 106%;
    }
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  a {
    color: var(--color-info);
    text-decoration: underline;
    transition: var(--transition-fast);

    &:hover {
      text-decoration: underline;
    }

    &:focus-visible {
      outline: 2px solid var(--color-info);
      outline-offset: 2px;
      border-radius: var(--border-radius-sm);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 600;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }

  p {
    margin-block: 0;
  }

  strong {
    font-weight: 600;
  }

  code, kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    background: color-mix(in srgb, var(--color-ink) 8%, transparent);
    border-radius: var(--border-radius-sm);
  }
}