/* Colours live here as named tokens so the whole app can be re-themed in one place. */
:root {
  --bg: #F7F4EF;
  --surface: #FFFFFF;
  --text: #1F2A30;
  --muted: #6B7479;
  --brand: #2F3E46;
  --on-brand: #F4EDE4;
  --border: #E3DDD3;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14191C;
    --surface: #1D2428;
    --text: #ECE7E0;
    --muted: #9AA3A8;
    --brand: #F4EDE4;
    --on-brand: #1F2A30;
    --border: #2C353A;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

.topbar {
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.topbar h1 { margin: 0; font-size: 20px; font-weight: 650; }

.content { flex: 1; overflow-y: auto; padding: 16px; }

.empty { text-align: center; margin-top: 30vh; color: var(--muted); }
.empty-title { font-size: 18px; color: var(--text); margin: 0 0 4px; }
.empty-hint { margin: 0; }

/* Main action sits at the bottom, within easy reach of a thumb. */
.actionbar {
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.primary {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
}

.primary:disabled { opacity: 0.45; }

.version { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--muted); }