/* Design tokens ("Plainspoken"). Contrast is checked by tests/tokens.test.js:
   re-run `npm test` before changing any hex value. */
:root {
  /* surfaces and text */
  --bg: #ffffff;
  --surface-2: #f2f4f7;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #475467;

  /* borders: input/button borders must be 3:1, subtle ones are decorative */
  --border-input: #7d8796;
  --border-subtle: #e4e7ec;

  /* meaning */
  --good: #0b6e4f;
  --bad: #b42318;
  --info: #175cd3;
  --good-bg: #e7f5ef;
  --bad-bg: #fdecea;
  --info-bg: #e8f0fc;

  /* hero band and footer */
  --band: #0e2a47;
  --band-ink: #ffffff;
  --band-muted: #b9c7d8;
  --highlight: #d9f99d;

  /* shade at the edge of a table that scrolls sideways */
  --scroll-shade: rgba(16, 24, 40, 0.16);

  /* focus rings */
  --focus: #175cd3;
  --focus-on-band: #d9f99d;

  /* chart series (read from here by js/charts.js) */
  --chart-1: #175cd3;
  --chart-2: #c4320a;
  --chart-3: #0b6e4f;
  --chart-base: #344054;

  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* shape */
  --radius-card: 10px;
  --radius-control: 8px;
}