/* Colours from docs/DESIGN.md. Light and dark follow the phone; Settings can force one with data-theme. */
:root {
  --bg: #F7F7F5; --surface: #FFFFFF; --line: #E3E4E0; --text: #1C1F23; --quiet: #5F6670;
  --accent: #3B5BA9; --good: #2E7D4F; --warn: #9A6516; --problem: #B4443A;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111315; --surface: #1A1D20; --line: #2A2E33; --text: #E8EAED; --quiet: #9AA1A9;
    --accent: #8FA8E8; --good: #5CB98A; --warn: #E0B050; --problem: #E57A6F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111315; --surface: #1A1D20; --line: #2A2E33; --text: #E8EAED; --quiet: #9AA1A9;
  --accent: #8FA8E8; --good: #5CB98A; --warn: #E0B050; --problem: #E57A6F;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.quiet { color: var(--quiet); }
a { color: var(--accent); }