/* tokens.css — deal-pipeline (Keelson). Read from the open-source CRMs studied (a quiet sidebar of record types, hairline
   cards, a board whose columns carry their sums, tables you live in) and moved to its own palette: cool paper and a
   deep blue for money that is moving, brick for money that is lost. Familjen Grotesk sets the figures and
   titles, Public Sans the working text. The page never names a colour or a font outside this file. */
:root {
  color-scheme: light;
  --font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-num: 'Familjen Grotesk', system-ui, sans-serif;
  --display-weight: 600; --body-weight: 400; --num-weight: 600; --label-weight: 500;
  --display-tracking: -0.02em; --num-tracking: -0.02em;

  --bg: #eff0f1;
  --surface: #ffffff;
  --raised: #ffffff;
  --sunken: #e5e6e8;
  --ink: #171a20;
  --muted: #5a6170;
  --faint: #868c99;
  --line: #d9dadd;
  --line-strong: #c8cacd;
  --accent: #1a46d4;
  --accent-ink: #1537a8;
  --on-accent: #ffffff;
  --accent-soft: #e3e9fb;
  --s1: #1a46d4; --s2: #c98a2b; --s3: #3f7fd6; --s4: #b9473a; --s5: #58a8e0; --s6: #78808e;
  --pos: #16855a; --neg: #bf3f35; --warn: #b2730e; --info: #3d5fc4;

  --nav-bg: transparent; --nav-ink: var(--ink); --nav-muted: #606775; --nav-line: transparent;
  --nav-active-bg: var(--surface); --nav-active-ink: var(--ink);
  --nav-w: 236px; --rail-w: 68px; --nav-pad: 14px; --nav-item-h: 36px; --nav-radius: 8px;

  --top-h: 64px; --page-pad: 28px; --page-max: 1480px;
  --gap: 16px; --pad: 20px;
  --radius: 12px; --radius-sm: 8px; --control-h: 38px;
  --card-border: 1px solid var(--line); --card-shadow: 0 1px 0 rgb(23 26 32 / 0.03);
  --pop-shadow: 0 22px 50px -18px rgb(23 26 32 / 0.28), 0 2px 6px rgb(23 26 32 / 0.06);
  --title-size: 28px; --h2-size: 15px; --kpi-size: 28px; --text-size: 14px; --small-size: 12.5px;
  --grid-line: #e4e5e7; --axis-ink: var(--faint); --chart-h: 220px;
  --tip-bg: #171a20; --tip-ink: #eff0f1;
  --icon-size: 18px; --icon-stroke: 1.7;
  --search-bg: var(--surface); --search-border: 1px solid var(--line); --search-radius: 9px;
  --ib-bg: transparent; --ib-border: 0;
  --btn-radius: 9px;
  --col-bg: #e8eaec;
  --card-lift: 0 14px 28px -14px rgb(23 26 32 / 0.32), 0 2px 4px rgb(23 26 32 / 0.06);
  --won-bar: #16855a; --lost-bar: #c9675d;
  --target: #c0c2c6;
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #171a1f;
  --raised: #1d2127;
  --sunken: #0b0d10;
  --ink: #eceef2;
  --muted: #a3a9b5;
  --faint: #737a87;
  --line: #292d35;
  --line-strong: #353a44;
  --accent: #5097ff;
  --accent-ink: #79afff;
  --on-accent: #06122b;
  --accent-soft: #16233f;
  --s1: #5097ff; --s2: #e0a74a; --s3: #79afff; --s4: #e0705f; --s5: #58c8fd; --s6: #8b92a0;
  --pos: #4cc98f; --neg: #f07a6c; --warn: #e4a93f; --info: #79afff;
  --nav-muted: #9aa1ad;
  --nav-active-bg: var(--raised);
  --grid-line: #252932;
  --tip-bg: #eceef2; --tip-ink: #0f1115;
  --col-bg: #14171c;
  --card-lift: 0 16px 30px -14px rgb(0 0 0 / 0.7);
  --won-bar: #4cc98f; --lost-bar: #e0705f;
  --target: #4a505b;
}