/* Dispatch, BaseHero's design language: its fonts and colour tokens, light and dark.
   Light is the default; data-mode="dark" on the root element switches every colour.
   README.md says what each token is for. */

@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-normal.woff2) format("woff2"); font-weight: 100 700; font-stretch: 75% 100%; font-style: normal; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-italic.woff2) format("woff2"); font-weight: 100 700; font-stretch: 75% 100%; font-style: italic; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-500-normal.woff2) format("woff2"); font-weight: 500; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-600-normal.woff2) format("woff2"); font-weight: 600; }

:root {
  color-scheme: light;
  /* Panels on a visible grid */
  --grid: #c9ced5; --panel: #ffffff; --panel-2: #f4f5f7; --line: #c9ced5; --line-strong: #0f1114;
  /* The location bar, black in both modes */
  --bar: #0f1114; --bar-2: #262a30; --bar-line: #2e3238; --on-bar: #ffffff; --on-bar-2: #c9ced5;
  /* Text */
  --text: #0f1114; --text-2: #3b4149; --text-3: #4c535d; --invert: #0f1114; --on-invert: #ffffff;
  /* The one accent: where you are, Hero and the next action */
  --yellow: #ffc20e; --on-yellow: #0f1114;
  /* Kinds: chats, projects, notes and folders (Hero's kind is --yellow) */
  --blue: #1b5fd9; --green: #087a4c; --charcoal: #2e3238;
  /* States */
  --ok: #0f7a41; --select: #ffe68a;
  --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --grid: #2c3137; --panel: #131518; --panel-2: #1a1d21; --line: #2c3137; --line-strong: #e6e8eb;
  --bar: #000000; --bar-2: #1c1f23; --bar-line: #24282d; --on-bar: #ffffff; --on-bar-2: #c9ced5;
  --text: #edeff2; --text-2: #b9bfc7; --text-3: #9fa6af; --invert: #e6e8eb; --on-invert: #0b0c0e;
  --blue: #2c69d8; --green: #0b7a4c; --charcoal: #4a5059;
  --ok: #3ddc84; --select: #5c4a00;
}