/* tokens.css — design tokens (light + dark), reduced-motion, base reset.
   Loaded by BOTH the landing (css/landing.css) and the app (css/app.css),
   so landing.css can use var(--brand) etc. without pulling all of app.css. */

:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #efece3;
  --text: #21281f;
  --muted: #5d6b58;
  --line: #dcd8cc;
  --brand: #1f6f4a;
  --brand-ink: #10462e;
  --accent: #c25e00;
  --danger: #b03a3a;
  --shadow: 0 6px 24px rgba(20, 30, 20, .14);
  --radius: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 44px;
}
/* Dark palette: applied when the OS prefers dark AND the user hasn't forced
   light, or when the user explicitly picks dark in the Info tab. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14170f;
    --surface: #1e2218;
    --surface-2: #262b1f;
    --text: #ecefe4;
    --muted: #a9b3a0;
    --line: #333a2a;
    --brand: #4bbd86;
    --brand-ink: #8fd3b0;
    --accent: #e8934a;
    --shadow: 0 6px 24px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #14170f;
  --surface: #1e2218;
  --surface-2: #262b1f;
  --text: #ecefe4;
  --muted: #a9b3a0;
  --line: #333a2a;
  --brand: #4bbd86;
  --brand-ink: #8fd3b0;
  --accent: #e8934a;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .user-dot__pulse { display: none; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}