@layer base {
  body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-page);
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.15em;
    transition: color 120ms, text-decoration-color 120ms;

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  :is(.muted, .empty) a,
  a.muted {
    text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  }

  h1 {
    font-size: var(--text-large);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-block: 0 var(--block-space);
  }

  h2 {
    font-size: var(--text-small);
    font-weight: 700;
    margin-block: var(--block-space-double) var(--block-space-half);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
  }

  h3 {
    font-size: var(--text-small);
    font-weight: 700;
    margin-block: var(--block-space) var(--block-space-half);
    color: var(--color-ink);
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}