@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    color: var(--color-ink);
    background: var(--color-canvas-subtle);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    font-size: var(--text-x-large);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: var(--text-large);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  h3 {
    font-size: var(--text-medium);
    font-weight: 600;
  }

  a {
    color: var(--color-link);
    text-decoration: none;

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

  *:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-small);
  }

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