/* BetterSense design tokens — the single source of truth for the theme.
   Hand-written, never compiled. app.css (built) references these vars.

   Theme: "the signal desk, in daylight" — a light, cool, data-dense
   enterprise console. One accent (evergreen), a dark evergreen-ink rail,
   and a mono data voice for every extracted value. */
:root {
  /* canvas & surfaces */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EDEFF3;
  --surface-3: #E4E7EC;

  /* ink */
  --ink: #191C21;
  --ink-2: #4D5563;
  --ink-3: #8B93A2;

  /* rules */
  --line: #E3E6EB;
  --line-2: #C9CFD9;

  /* the one accent: evergreen */
  --brand: #0C5B4C;
  --brand-deep: #084237;
  --brand-wash: #E3EFEA;
  --brand-ring: rgba(12, 91, 76, 0.28);

  /* the rail (sidebar) — dark evergreen-ink */
  --side-bg: #12211C;
  --side-ink: #E9EEEB;
  --side-muted: #8FA098;
  --side-line: rgba(255, 255, 255, 0.09);
  --side-hover: rgba(255, 255, 255, 0.05);
  --side-active: rgba(255, 255, 255, 0.08);
  --side-accent: #56A98F;

  /* status */
  --ok: #146B4A;
  --ok-wash: #E1F0E7;
  --warn: #8A6410;
  --warn-wash: #F6EED8;
  --err: #A83A2C;
  --err-wash: #F8E9E6;

  /* the highlighter — reserved for matched keywords */
  --mark: #F7E7AE;

  /* tag hue ramp — deterministic per choice value (hashed in JS/Jinja).
     Muted tints; the same hue colors the value's tag AND its insight bar. */
  --h0-bg: #EEF1F5; --h0-fg: #455062;
  --h1-bg: #E6EEF8; --h1-fg: #2E5382;
  --h2-bg: #E1F0EC; --h2-fg: #175E4E;
  --h3-bg: #EAF1DF; --h3-fg: #4A6420;
  --h4-bg: #F7EEDA; --h4-fg: #7B5C12;
  --h5-bg: #F9E9DF; --h5-fg: #8A4A1F;
  --h6-bg: #F9E7EA; --h6-fg: #8E3049;
  --h7-bg: #EFE9F8; --h7-fg: #5D3F94;

  /* type */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* geometry */
  --radius: 6px;
  --radius-sm: 4px;
  --rail-w: 232px;
}