/* Design tokens: the only file where a colour is chosen (the Flights and Geotest rule).
 *
 * Family Budgets uses a teal accent (the icon's #0f766e), so it's easy to tell apart
 * from Flights' indigo on the same phone. Colour carries meaning but is never the only
 * carrier of it: every status pill has its text, every chart has a data-table toggle
 * (plan 15).
 *
 *   ok    on budget / reconciled      warn  near limit / needs review
 *   bad   over budget / error         quiet past, pending, unknown
 *
 * Every property defined in the dark block is also defined in the light one.
 */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-sunken: #f3f5f5;
  --bg-raised: #ffffff;
  --border: #e2e6e6;
  --border-strong: #cbd2d2;
  --text: #151a1a;
  --text-muted: #5d6666;
  --text-faint: #879090;
  --overlay: rgb(14 20 20 / 38%);

  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-on: #ffffff;
  --accent-bg: #e6f4f2;

  --ok: #14713d;
  --ok-bg: #e7f5ec;
  --warn: #92610a;
  --warn-bg: #fdf4e3;
  --bad: #9f1239;
  --bad-bg: #fdecef;
  /* Charts (C25): six series + Other, distinct in hue and lightness; pending is the
   * same colour, lighter, with its own pattern so colour isn't the only signal. */
  --chart-1: #0f766e;
  --chart-2: #2563eb;
  --chart-3: #c2410c;
  --chart-4: #7c3aed;
  --chart-5: #be185d;
  --chart-6: #4d7c0f;
  --chart-other: #94a3b8;
  --chart-grid: #e2e6e6;
  /* Per-element values a template sets inline (a bar's fill, a pace marker). */
  --pct: 0%;
  --at: 0%;
  --quiet: #4b5563;
  --quiet-bg: #f1f2f4;
  /* QR codes stay black on white in both themes, or phone cameras can't read them. */
  --qr-bg: #ffffff;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 16px minimum on anything typed into: smaller and iOS Safari zooms on focus. */
  --t-input: 16px;
  --t-small: 13px;
  --t-body: 16px;
  --t-title: 22px;
  --t-big: 28px;

  --tap: 44px;
  --tabbar-h: 56px;
  --shell-max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111616;
    --bg-sunken: #0a0e0e;
    --bg-raised: #1a2020;
    --border: #283131;
    --border-strong: #3a4545;
    --text: #e9efee;
    --text-muted: #9fabaa;
    --text-faint: #748180;
    --overlay: rgb(0 0 0 / 60%);

    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --accent-on: #0a1414;
    --accent-bg: #12302c;

    --ok: #66c98d;
    --ok-bg: #16281d;
    --warn: #e3ac52;
    --warn-bg: #2c2415;
    --bad: #f38ba3;
    --bad-bg: #2d181e;
    --quiet: #aeb4bf;
    --quiet-bg: #23262d;
    --qr-bg: #ffffff;
    --chart-1: #2dd4bf;
    --chart-2: #60a5fa;
    --chart-3: #fb923c;
    --chart-4: #a78bfa;
    --chart-5: #f472b6;
    --chart-6: #a3e635;
    --chart-other: #64748b;
    --chart-grid: #283131;
  }
}