/* ═══ Design tokens: the one token file (docs/UI_SPEC.md section 2) ═══════════════════════════════════════════
   Loaded first by index.html, before base.css. Light values on :root; the dark values are written twice and must stay
   identical (tests/ui_foundation.test.js compares them): under the prefers-color-scheme guard (no explicit choice) and
   under [data-theme="dark"] (the theme control sets data-theme on <html>).
   Fonts: IBM Plex Sans 400/500/600, IBM Plex Mono and Noto Sans Devanagari come from the Google Fonts <link> in
   index.html; every family ends in a system stack, so a missing font still renders. */

:root {
  color-scheme: light;
  /* surfaces */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e4e7ec;
  --sel: #eef1fd;
  --line: rgba(15, 23, 42, .08);
  --line-2: rgba(15, 23, 42, .16);
  /* ink */
  --ink: #0f172a;
  --ink-2: #475569;
  --muted: #5f6b7d;
  /* human action */
  --accent: #3550dc;
  --accent-hover: #2b44c4;
  --accent-ink: #ffffff;
  --on-accent: var(--accent-ink);
  --accent-text: #2b44c4;
  --accent-soft: #eef1fd;
  --accent-line: #c3cdf7;
  /* agent: only what the AI did, proposes, derived or noticed */
  --ai: #7c3aed;
  --ai-text: #6d28d9;
  --ai-soft: #f4effe;
  --ai-line: #ddd0fb;
  /* state: solid / text / soft / line */
  --good: #16a34a;
  --good-text: #13733a;
  --good-soft: #eef8f1;
  --good-line: #bfe3cb;
  --warn: #f59e0b;
  --warn-text: #a15c07;
  --warn-soft: #fef6e4;
  --warn-line: #f6d9a0;
  --crit: #dc2626;
  --crit-text: #c0262d;
  --crit-soft: #fdeeee;
  --crit-line: #f4c2c2;
  --crit-ink: #ffffff;
  --block: #b42318;
  --block-ink: #ffffff;
  --info: #1d5fbf;
  --info-ink: #ffffff;
  --info-text: #1d5fbf;
  --info-soft: #eaf2fd;
  --draft-line: #9aa3b2;
  /* money */
  --money-in: var(--good-text);
  --money-out: var(--ink);
  --money-loss: var(--crit-text);
  /* brand: logo and the phone '+' only, never status */
  --brand: #e8611a;
  /* charts: the dataviz series */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s7: #6d4fd0;
  --grid: #e5e7eb;
  --axis: #c3c7cf;
  --map-bg: #0b1020;
  --map-land: #141b2e;
  --map-line: #2a3654;
  /* type */
  --font-ui: "IBM Plex Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-head: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-meta: 12px;
  --lh-meta: 16px;
  --fs-small: 13px;
  --lh-small: 18px;
  --fs-body: 14px;
  --lh-body: 20px;
  --fs-title-row: 15px;
  --fs-h3: 16px;
  --lh-h3: 22px;
  --fs-h2: 20px;
  --lh-h2: 26px;
  --fs-money-l: 22px;
  --lh-money-l: 28px;
  --fs-money-xl: 30px;
  --lh-money-xl: 36px;
  /* spacing (4-pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --gutter: 24px;
  --row-h: 40px;
  --row-h-cozy: 52px;
  --row-h-touch: 56px;
  --control-h: 36px;
  --control-h-touch: 48px;
  /* radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  /* elevation */
  --e1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
  --e2: 0 6px 16px rgba(15, 23, 42, .10);
  --e3: 0 16px 48px rgba(15, 23, 42, .18);
  --shadow: var(--e1);
  --shadow-lg: var(--e3);
  --highlight: none;
  /* motion */
  --t-fast: 120ms;
  --t-med: 180ms;
  --t-exit: 240ms;
  --t-sheet: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* focus */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  /* legacy aliases kept so the existing CSS keeps working */
  --serious: #ea7a4c;
  --serious-text: #a84a23;
  --serious-soft: #fdf0ea;
  --brand-red: var(--brand);
}

/* dark: written twice, identical */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0e14;
    --surface: #12161f;
    --surface-2: #1a1f2a;
    --surface-3: #242a37;
    --sel: #1c2344;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .14);
    --ink: #e8ecf3;
    --ink-2: #a9b3c4;
    --muted: #8b95a7;
    --accent: #8b9cff;
    --accent-hover: #a5b2ff;
    --accent-ink: #0b0e14;
    --accent-text: #93a4ff;
    --accent-soft: #1c2344;
    --accent-line: #3a4785;
    --ai: #a78bfa;
    --ai-text: #b69cff;
    --ai-soft: #221a3a;
    --ai-line: #4a3a80;
    --good: #22c55e;
    --good-text: #4ade80;
    --good-soft: #12291d;
    --good-line: #1f5a37;
    --warn: #f59e0b;
    --warn-text: #fbbf24;
    --warn-soft: #2c2210;
    --warn-line: #6b4f12;
    --crit: #ef4444;
    --crit-text: #ff7b72;
    --crit-soft: #311819;
    --crit-line: #6e2a2a;
    --crit-ink: #0b0e14;
    --block: #c4322a;
    --block-ink: #ffffff;
    --info: #7fb2ff;
    --info-ink: #0b0e14;
    --info-text: #7fb2ff;
    --info-soft: #14233d;
    --draft-line: #5b6577;
    --grid: #232937;
    --axis: #3a4252;
    --e1: none;
    --e2: 0 6px 16px rgba(0, 0, 0, .40);
    --e3: 0 16px 48px rgba(0, 0, 0, .55);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, .04);
    --serious: #f08a5d;
    --serious-text: #f6a37f;
    --serious-soft: #2e1c14;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e14;
  --surface: #12161f;
  --surface-2: #1a1f2a;
  --surface-3: #242a37;
  --sel: #1c2344;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .14);
  --ink: #e8ecf3;
  --ink-2: #a9b3c4;
  --muted: #8b95a7;
  --accent: #8b9cff;
  --accent-hover: #a5b2ff;
  --accent-ink: #0b0e14;
  --accent-text: #93a4ff;
  --accent-soft: #1c2344;
  --accent-line: #3a4785;
  --ai: #a78bfa;
  --ai-text: #b69cff;
  --ai-soft: #221a3a;
  --ai-line: #4a3a80;
  --good: #22c55e;
  --good-text: #4ade80;
  --good-soft: #12291d;
  --good-line: #1f5a37;
  --warn: #f59e0b;
  --warn-text: #fbbf24;
  --warn-soft: #2c2210;
  --warn-line: #6b4f12;
  --crit: #ef4444;
  --crit-text: #ff7b72;
  --crit-soft: #311819;
  --crit-line: #6e2a2a;
  --crit-ink: #0b0e14;
  --block: #c4322a;
  --block-ink: #ffffff;
  --info: #7fb2ff;
  --info-ink: #0b0e14;
  --info-text: #7fb2ff;
  --info-soft: #14233d;
  --draft-line: #5b6577;
  --grid: #232937;
  --axis: #3a4252;
  --e1: none;
  --e2: 0 6px 16px rgba(0, 0, 0, .40);
  --e3: 0 16px 48px rgba(0, 0, 0, .55);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .04);
  --serious: #f08a5d;
  --serious-text: #f6a37f;
  --serious-soft: #2e1c14;
}

@media (max-width: 767px) { :root { --gutter: 16px; --control-h: var(--control-h-touch); } }
@media (pointer: coarse) { :root { --row-h: var(--row-h-touch); } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-exit: 0ms; --t-sheet: 0ms; } }