/* tokens.css — project-tracker (Tideline). Read from the reference (a light studio tracker: a white frame holding
   pale panels, deep counters, pill bars) and moved to its own palette: cool fog and cobalt instead of forest green,
   Onest instead of the reference's geometric sans. The page never names a colour or a font outside this file. */
:root {
  color-scheme: light;
  --font-display: 'Onest', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --display-weight: 600; --body-weight: 400; --num-weight: 600; --label-weight: 500;
  --display-tracking: -0.025em; --num-tracking: -0.035em;

  --outer: #dde2ea;
  --frame: #ffffff;
  --panel: #f1f3f7;
  --bg: var(--outer);
  --surface: #ffffff;
  --raised: #ffffff;
  --sunken: #e9edf3;
  --ink: #0f1528;
  --muted: #646e88;
  --faint: #98a1b6;
  --line: #e2e6ee;
  --accent: #2646d6;
  --accent-deep: #0d1a58;
  --on-accent: #ffffff;
  --accent-soft: #e6ebfd;
  --s1: #2646d6; --s2: #0d1a58; --s3: #8e9ab8; --s4: #e0673a; --s5: #13a38b; --s6: #3276fc;
  --pos: #12935a; --neg: #e0473d; --warn: #c97b06; --info: #2646d6;
  --hatch: #a3aecb;
  --shade-to: #d5ddfb;

  --nav-bg: var(--panel); --nav-ink: var(--ink); --nav-muted: #6f7891; --nav-line: transparent;
  --nav-active-bg: transparent; --nav-active-ink: var(--ink);
  --nav-w: 238px; --nav-pad: 22px; --nav-item-h: 44px; --nav-radius: 12px;
  --top-h: 74px; --page-pad: 0px; --gap: 14px; --pad: 20px;
  --radius: 22px; --radius-sm: 12px; --control-h: 44px;
  --card-border: 0; --card-shadow: none;
  --title-size: 38px; --h2-size: 17px; --kpi-size: 46px; --text-size: 14px; --small-size: 12.5px;
  --grid-line: var(--line); --axis-ink: var(--faint); --chart-h: 168px;
  --tip-bg: #0f1528; --tip-ink: #ffffff;
  --icon-size: 21px;
  --search-bg: var(--frame); --search-border: 0; --search-radius: 999px;
  --ib-bg: var(--frame); --ib-border: 0;
  --btn-radius: 999px;
  --frame-radius: 34px; --panel-radius: 26px;
  --event-size: 23px;
  --timer-ink: #ffffff; --timer-muted: rgb(255 255 255 / 0.72); --timer-btn: #ffffff; --timer-btn-ink: #0d1a58; --timer-stop: #e0473d; --timer-size: 42px;
  --hero-fill: linear-gradient(155deg, #3253e6 0%, #1a2f9c 46%, #0d1a58 100%);
  --hero-ink: #ffffff;
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --outer: #060a14;
  --frame: #0c1222;
  --panel: #111a2e;
  --surface: #172039;
  --raised: #1b2542;
  --sunken: #202b4a;
  --ink: #e8ecf8;
  --muted: #9ba6c3;
  --faint: #6f7a98;
  --line: #24304f;
  --accent: #7189ff;
  --accent-deep: #c3ceff;
  --on-accent: #0b1126;
  --accent-soft: #1f2b55;
  --s1: #7189ff; --s2: #c3ceff; --s3: #59648a; --s4: #f08a5d; --s5: #2fc2a6; --s6: #689cfd;
  --pos: #3ccf8b; --neg: #ff6b5f; --warn: #f0a83a; --info: #7189ff;
  --hatch: #4a5679;
  --shade-to: #26336a;
  --nav-muted: #8e99b8;
  --tip-bg: #e8ecf8; --tip-ink: #0b1126;
  --timer-btn-ink: #0b1126;
  --hero-fill: linear-gradient(155deg, #3a59ee 0%, #22379f 48%, #121f5c 100%);
}