@layer base {
  html {
    font-size: var(--rem-base);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight);
  }

  body {
    font-family: system-ui, sans-serif;
  }

  a {
    color: hsl(var(--color-hsl-accent));
    transition: color 0.2s ease;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  small {
    font-size: var(--text-small);
  }

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

  p,
  ul {
    margin-bottom: 1rem;
    max-width: 75ch;

    &:last-child {
      margin-bottom: 0;
    }
  }

  h1,
  h2,
  h3 {
    line-height: 1;
    letter-spacing: var(--letter-spacing-tighter);
  }
}