/* Design tokens: colors (light + dark), fonts, radius.
   Layout concept: one working column (max 1180px) with a hazard-stripe header,
   tab bar with actions, stat strip, then a ledger table with a sticky member column. */
:root {
  --bg: #ECEEE9;
  --panel: #F8F9F6;
  --sunk: #E2E5DF;
  --ink: #1A201C;
  --muted: #57615A;
  --faint: #8C968F;
  --line: #CDD3CB;
  --line-strong: #A0AAA2;
  --accent: #E39B14;
  --accent-ink: #2A1C00;
  --accent-soft: #F4E2BA;
  --bad: #B42318;
  --bad-soft: #F6DCD7;
  --ok: #2B7349;
  --ok-soft: #DAECDF;
  --scrim: rgba(20, 26, 22, .45);

  --font-display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 8px;
  color-scheme: light;
}

/* Dark palette: follows the phone/computer setting unless data-theme="light" is set on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111513; --panel: #181D1A; --sunk: #0C0F0D; --ink: #E3E8E2; --muted: #9CA69F; --faint: #69736C;
    --line: #29312C; --line-strong: #465049;
    --accent: #F0AC2C; --accent-ink: #1E1400; --accent-soft: #3A2D12;
    --bad: #FF8373; --bad-soft: #3D1E1A; --ok: #63C98E; --ok-soft: #15301F;
    --scrim: rgba(0, 0, 0, .62);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111513; --panel: #181D1A; --sunk: #0C0F0D; --ink: #E3E8E2; --muted: #9CA69F; --faint: #69736C;
  --line: #29312C; --line-strong: #465049;
  --accent: #F0AC2C; --accent-ink: #1E1400; --accent-soft: #3A2D12;
  --bad: #FF8373; --bad-soft: #3D1E1A; --ok: #63C98E; --ok-soft: #15301F;
  --scrim: rgba(0, 0, 0, .62);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }