@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(60rem 36rem at 50% -8rem, var(--color-primary-surface), transparent 70%),
      radial-gradient(40rem 30rem at 85% 30rem, var(--color-accent-surface), transparent 70%),
      var(--color-canvas);
    color: var(--color-ink);
    font: 17px/1.55 var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  a {
    color: inherit;
  }

  ::selection {
    background: color-mix(in oklch, var(--color-primary) 40%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}