/* base.css — reset, element typography, .prose */
@layer tokens, base, layout, components, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; min-height: 100svh;
    background: var(--color-bg); color: var(--color-text);
    font: 400 var(--font-size-body) / var(--line-body) var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  img, svg, canvas, video { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3 { margin: 0; line-height: var(--line-tight); text-wrap: balance; font-weight: 400; }
  h1 { font: 300 var(--font-size-h1) / 1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
  h2 { font: 300 var(--font-size-h2) / var(--line-tight) var(--font-display); letter-spacing: var(--tracking-h2); }
  h3 { font: 500 var(--font-size-h3) / var(--line-heading) var(--font-body); }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.2em; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-1); }

  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: var(--space-4); }
  .prose h2 { font-size: var(--step-2); margin-top: var(--space-6); }
  .prose h3 { margin-top: var(--space-5); }
  .prose ul, .prose ol { padding-inline-start: var(--space-5); }
  .prose li + li { margin-top: var(--space-2); }
  .prose blockquote { margin-inline: 0; padding-inline-start: var(--space-4); border-inline-start: var(--focus-ring) solid var(--color-border); color: var(--color-text-muted); }
  .prose a { text-decoration-thickness: 1px; }
  .prose strong { font-weight: 600; }
  .prose code, kbd { font: 600 var(--font-size-small) / var(--line-kbd) var(--font-mono); }
  kbd { display: inline-block; min-width: var(--space-6); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-1); background: var(--color-surface); text-align: center; }

  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}