/* Design tokens — the browser twin of ui/tokens.py.
   Same values, same names. If a colour changes there, change it here. */

:root {
  /* grounds */
  --desk: #0e0e0e;
  --bg: #171717;
  --rail: #131313;
  --panel: #1c1c1c;
  --raised: #1e1e1e;
  --field: #202020;
  --header-sticky: #242424;

  /* lines */
  --hairline: rgba(255, 255, 255, .10);
  --hairline-soft: rgba(255, 255, 255, .09);
  --hairline-strong: rgba(255, 255, 255, .12);
  --row-rule: rgba(255, 255, 255, .05);
  --rail-rule: rgba(255, 255, 255, .08);
  --zebra: rgba(255, 255, 255, .015);

  /* text */
  --text: #ededed;
  --text-2: #cfcfcf;
  --muted: #a8a8a8;
  --dim: #8f8f8f;
  --faint: #6f6f6f;
  --empty: #565656;

  /* neutral accent */
  --mark: #b0b0b0;
  --accent-icon: #d2d2d2;
  --accent-text: #e4e4e4;
  --accent-border: #5a5a5a;
  --selected: rgba(255, 255, 255, .16);
  --hover: rgba(255, 255, 255, .08);
  --track: rgba(255, 255, 255, .08);

  /* status — the only colour in the UI */
  --ready: #79b183;
  --tight: #d0a35a;
  --short: #c1654a;
  --chip-ready: #2b322b;
  --chip-tight: #3a3226;
  --chip-short: #392925;

  /* geometry */
  --rail-w: 176px;
  --header-h: 46px;
  --kpi-h: 62px;
  --footer-h: 28px;
  --panel-w: 352px;
  --panel-w-wide: 320px;
  --row-h: 26px;
  --row-h-inventory: 30px;
  --row-h-deadlines: 34px;
  --row-h-endmills: 38px;
  --row-h-workers: 28px;
  --radius-control: 6px;
  --radius-card: 8px;
  --pad-screen: 16px;
  --pad-panel: 15px;

  /* type sizes */
  --fs-label: 11px;
  --fs-meta: 12px;
  --fs-body: 13px;
  --fs-title: 15px;
  --fs-kpi: 22px;
}

/* Tone names as used by the serializers' `tone` maps. */
.t-accent { color: var(--accent-text); }
.t-muted  { color: var(--muted); }
.t-dim    { color: var(--dim); }
.t-faint  { color: var(--faint); }
.t-empty  { color: var(--empty); }
.t-ready  { color: var(--ready); }
.t-tight  { color: var(--tight); }
.t-short  { color: var(--short); }
.t-warn   { color: var(--tight); }
.t-bad    { color: var(--short); }