@layer base {
  body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
  }

  h1 {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.1;
  }

  h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
  }

  h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.3;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
    max-width: 65ch;
  }

  a {
    color: var(--color-accent);
    transition: color var(--transition-fast);
  }

  a:hover {
    text-decoration: underline;
  }

  ::selection {
    background-color: var(--color-accent);
    color: #111827;
  }

  html {
    scroll-behavior: smooth;
  }
}