/* Hand-written base styles on top of tokens.css. Use tokens only, no raw colors. */
html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
}
a { color: var(--brand); }
.uof-icon { vertical-align: middle; flex: none; }
.uof-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 0; border-radius: var(--radius-md);
  background: var(--brand); color: var(--on-brand);
  font: 700 15px/24px var(--font-sans); cursor: pointer;
}
.uof-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.uof-btn.htmx-request { opacity: .6; }
.uof-card {
  background: var(--surface-200); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-4);
}