/* Brand colours from design/tokens.json (bg.app, bg.card, text.*, accent.*), light and dark. */
:root {
  --bg-app: #F7F5F0; --bg-card: #FFFFFF; --bg-control: #EEEDE8;
  --text-primary: #1C1C1E; --text-secondary: #6B6B70;
  --accent-fill: #2F6B4F; --accent-text: #2F6B4F; --on-accent: #FFFFFF;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-app: #121311; --bg-card: #1F211E; --bg-control: #2C2E2A;
    --text-primary: #F2F1EC; --text-secondary: #9E9C96;
    --accent-fill: #3B8560; --accent-text: #7CC79F;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app); color: var(--text-primary);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { width: 100%; max-width: 420px; padding: 32px 20px; text-align: center; }
.icon {
  width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 22px; background: var(--accent-fill);
  display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--on-accent);
}
h1 { font-size: 34px; line-height: 1.15; margin: 0 0 8px; }
p { color: var(--text-secondary); margin: 0 0 12px; }
.actions { display: grid; gap: 12px; margin-top: 28px; }
.button {
  display: block; padding: 15px 16px; border-radius: 14px; text-decoration: none; font-weight: 600;
  background: var(--bg-control); color: var(--text-primary);
}
.button.primary { background: var(--accent-fill); color: var(--on-accent); }
.code { font-family: ui-monospace, Menlo, monospace; color: var(--text-primary); }
small { display: block; margin-top: 24px; color: var(--text-secondary); font-size: 13px; }
a { color: var(--accent-text); }