body {
  background: var(--wf-gray-50);
  color: var(--wf-text);
  font-family: var(--wf-font-sans);
  font-size: var(--wf-text-md);
  line-height: var(--wf-line);
}
h1, h2, h3, h4, h5, h6 { line-height: var(--wf-line-tight); }
h1 { font-size: var(--wf-text-xl); }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: var(--wf-text-md); }
small { font-size: var(--wf-text-xs); }
:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: 2px; }
.wf-page { min-height: 100vh; background: var(--wf-gray-50); }
.wf-container { width: min(100% - 24px, var(--wf-page-max)); margin-inline: auto; }
.wf-stack { display: flex; flex-direction: column; gap: var(--wf-space-4); }
.wf-row { display: flex; align-items: center; gap: var(--wf-space-3); }
.wf-row-wrap { flex-wrap: wrap; }
.wf-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--wf-space-4); }
.wf-section { padding-block: var(--wf-space-8); }
.wf-surface { background: var(--wf-surface); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-4); }
.wf-muted { color: var(--wf-text-muted); }
.wf-subtle { color: var(--wf-text-subtle); }
.wf-kicker { color: var(--wf-text-muted); font-size: var(--wf-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wf-title { margin: 0; font-size: var(--wf-text-xl); line-height: var(--wf-line-tight); }
.wf-heading { margin: 0; font-size: var(--wf-text-xl); line-height: var(--wf-line-tight); }
.wf-subheading { margin: 0; font-size: var(--wf-text-lg); line-height: var(--wf-line-tight); }
.wf-copy { margin: 0; color: var(--wf-text-muted); }
.wf-divider { border: 0; border-top: 1px solid var(--wf-border); margin: var(--wf-space-4) 0; }
.wf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }