/* base-tokens.css — every token dash.css reads, with a neutral value. A dashboard's tokens.css sets its own, for light
   and under [data-scheme="dark"]; nothing here is meant to be seen as-is. */
:root {
  color-scheme: light;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-num: var(--font-display);
  --display-weight: 600;
  --body-weight: 400;
  --num-weight: 600;
  --display-tracking: -0.02em;
  --num-tracking: -0.02em;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --raised: #ffffff;
  --sunken: #eef0f3;
  --ink: #15171c;
  --muted: #646b78;
  --faint: #9aa1ad;
  --line: #e4e7ec;
  --accent: #2f6bff;
  --on-accent: #ffffff;
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --s1: var(--accent); --s2: #22b8a7; --s3: #f2a541; --s4: #e5617a; --s5: #8b6cf6; --s6: #7d8796;
  --pos: #12a150; --neg: #dc3d4b; --warn: #d98a00; --info: #2f6bff;

  --nav-bg: var(--surface);
  --nav-ink: var(--ink);
  --nav-muted: var(--muted);
  --nav-line: var(--line);
  --nav-active-bg: var(--accent-soft);
  --nav-active-ink: var(--accent);
  --nav-w: 252px;
  --rail-w: 76px;
  --nav-pad: 20px;
  --nav-item-h: 42px;
  --nav-radius: 12px;

  --top-h: 76px;
  --page-pad: 28px;
  --page-max: none;
  --gap: 20px;
  --pad: 22px;
  --radius: 18px;
  --radius-sm: 11px;
  --control-h: 40px;
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --pop-shadow: 0 18px 48px -12px rgb(16 18 27 / 0.22), 0 2px 6px rgb(16 18 27 / 0.06);

  --title-size: 26px;
  --h2-size: 15px;
  --kpi-size: 30px;
  --text-size: 14px;
  --small-size: 12.5px;
  --label-weight: 500;

  --grid-line: var(--line);
  --grid-dash: none;
  --axis-ink: var(--faint);
  --chart-h: 220px;
  --tip-bg: var(--ink);
  --tip-ink: var(--surface);

  /* the real map (map.js): land a step off the card, water a cooler step darker, roads in the line colour */
  --map-land: color-mix(in oklab, var(--sunken) 45%, var(--surface));
  --map-water: color-mix(in oklab, var(--s5) 20%, var(--sunken));
  --map-park: color-mix(in oklab, var(--pos) 9%, var(--map-land));
  --map-road: var(--line);
  --map-road-major: color-mix(in oklab, var(--faint) 40%, var(--line));
  --map-road-casing: var(--map-land);
  --map-building: color-mix(in oklab, var(--line) 55%, var(--map-land));
  --map-label: var(--muted);
  --map-water-label: color-mix(in oklab, var(--muted) 70%, var(--map-water));
  --map-halo: var(--map-land);

  --icon-size: 20px;
  --icon-stroke: 1.75;
  --ring: var(--accent);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 240ms;
}
/* on a dark board the land takes the sunken step and the water sinks under the page */
:root[data-scheme="dark"] {
  --map-land: var(--sunken);
  --map-water: color-mix(in oklab, var(--s5) 6%, var(--bg));
}