/* 2peple site. Colours, spacing and type come from tokens.css, which
   tools/build_site.py writes from design/tokens.json (light, and dark under
   prefers-color-scheme). Nothing here invents a value. */
@font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans-Variable.ttf') format('truetype'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--body-size)/var(--body-line) 'DM Sans', system-ui, sans-serif;
}
main { max-width: 34rem; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.brand { display: block; height: 2.5rem; margin: 0 auto var(--space-8); }
.brand.dark { display: none; }
h1 { font: 600 var(--title-size)/var(--title-line) 'Fraunces', Georgia, serif; margin: 0 0 var(--space-3); text-align: center; }
p { margin: 0 0 var(--space-4); }
.lede { color: var(--text-secondary); text-align: center; }
.card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  text-align: center;
}
.button {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--size-button); padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--action-primary); color: var(--text-on-action);
  font-weight: 600; text-decoration: none; margin: var(--space-4) 0;
}
.button.quiet { background: transparent; color: var(--text-primary); border: var(--border-width) solid var(--text-primary); }
.note { color: var(--text-secondary); font-size: var(--small-size); }
.code { font-weight: 600; letter-spacing: 0.1em; }
.hidden { display: none; }
footer { text-align: center; color: var(--text-secondary); font-size: var(--small-size); padding: var(--space-8) var(--space-6); }
footer a, .doc a { color: inherit; }
.doc { text-align: left; }
.doc h1 { text-align: left; }
.doc h2 { font-size: 1.1em; margin: var(--space-6) 0 var(--space-2); }
.doc li { margin-bottom: var(--space-2); }
.draft { background: var(--recovery-tint); color: var(--recovery-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
@media (prefers-color-scheme: dark) {
  .brand.light { display: none; }
  .brand.dark { display: block; }
}