/* Same tokens as the app (app/ui/src/lib/ui/tokens.css), plus a dark theme. */
:root {
  --color-bg: #f6f6f4;
  --color-surface: #ffffff;
  --color-text: #1d1d1b;
  --color-muted: #6a6a64;
  --color-border: #deded8;
  --color-accent: #2e5bd8;
  --color-accent-bg: #e8eefc;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius: 6px;
  --radius-lg: 10px;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #151514;
    --color-surface: #1f1f1d;
    --color-text: #ecece6;
    --color-muted: #a3a39b;
    --color-border: #34342f;
    --color-accent: #7c9cf0;
    --color-accent-bg: #1f2a47;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 16px/1.6 var(--font-body);
}
a { color: var(--color-accent); }
code { font-family: var(--font-mono); font-size: 0.92em; }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 var(--space-4); }
header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4);
  padding-top: var(--space-6); padding-bottom: var(--space-4);
}
header .name { font-weight: 700; font-size: 20px; color: var(--color-text); text-decoration: none; margin-right: auto; }
header nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
header nav a { color: var(--color-muted); text-decoration: none; }
header nav a:hover, header nav a[aria-current] { color: var(--color-text); }
h1 { font-size: 32px; line-height: 1.2; margin: var(--space-6) 0 var(--space-3); }
h2 { font-size: 20px; margin: var(--space-8) 0 var(--space-2); }
.lead { font-size: 19px; color: var(--color-muted); margin-top: 0; }
.status {
  background: var(--color-accent-bg); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); margin: var(--space-6) 0;
}
figure { margin: var(--space-6) 0; }
figure img {
  width: 100%; max-width: 560px; height: auto; display: block;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
figcaption { color: var(--color-muted); font-size: 14px; margin-top: var(--space-2); }
footer {
  margin-top: var(--space-8); padding-top: var(--space-4); padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 14px;
}
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }