/* ---- brand: MSR WhatsUpCrew (the UI kit) ---------------------------------------------------------------------------------------------------------------------
   MSR WhatsUpCrew's brand file: every token the kit draws with, light and dark (kit/README.md lists them; started from kit/brand-template.css, as Pager Alerts').
   It is the app's own, so it is not checked against kit.sha256; the kit's sizes are never set here. The look: an amber header (Pantone 137, dark ink on it, as white on
   amber cannot be read) with the CFA red line under it, blue with white on it in test mode. The CFA and MSR logos stand side by side on it, the CFA logo keeping its own white and the MSR logo a fine white edge. */
:root {
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;          /* the type */
  --heading-font:var(--font); --heading-case:uppercase; --heading-spacing:.04em;          /* card and popup headings: their type, case and letter spacing */
  --accent:#efad42; --accent-strong:#d9932a; --on-accent:#1f2328;                     /* the brand's colour (main buttons, the spinner), a stronger one (hover), and text on it */
  --link:#7f5200; --heading:#7f5200; --highlight:#c8102e; --danger:#c8102e; --on-danger:#fff;          /* links and second buttons; headings; a highlight (the red line); danger and the text on it filled */
  --ink:#1f2328; --grey:#5b6470; --line:#e1e4e8; --bg:#f4f5f7; --card:#fff; --field-line:#c5cad1;          /* text, quiet text, edges, the page, cards, field edges */
  --ok:#1a7f37; --ok-bg:#e6f4ea; --ok-ink:#14532d; --err-bg:#fde8ea; --err-ink:#7a0b1c; --note-bg:#fff8e1; --busy-bg:#eef1f5;          /* messages */
  --changed-bg:#fff3b0; --disabled-bg:#eceef1; --disabled-ink:#8a919b;            /* a changed field, a field that cannot be changed yet */
  --on-header-soft:rgba(31,35,40,.12); --on-header-edge:rgba(31,35,40,.45); --on-header-press:rgba(31,35,40,.22);          /* things on the header */
  --dot-off:#9aa4b0; --dot-green:#2ea043; --dot-amber:#f0a020; --dot-red:#7a0010; --banner-ink:#fff;          /* status dots; the test banner's text (white on the red line) */
  --scrim:rgba(0,0,0,.5); --shadow:rgba(0,0,0,.35); --shadow-strong:rgba(0,0,0,.4);          /* behind a popup; shadows */
  --kit-header:var(--accent); --kit-on-header:var(--on-accent); --kit-line:var(--highlight); --kit-sticky-bg:var(--card); --kit-banner-ink:var(--banner-ink);          /* the header, its text and the line under it; behind a stuck heading */
}
@media (prefers-color-scheme: dark) {
  :root { --accent:#efad42; --accent-strong:#f4c076; --on-accent:#1f2328; --link:#f4c076; --heading:#f4c076; --highlight:#c8102e; --danger:#c8102e; --on-danger:#fff;
          --ink:#e6e8eb; --grey:#9aa4b0; --line:#2d333b; --bg:#12161b; --card:#1b2027; --field-line:#3a424d;
          --ok:#6fd49a; --ok-bg:#12301f; --ok-ink:#9be0b5; --err-bg:#3a1218; --err-ink:#ffb3bd; --note-bg:#33290a; --busy-bg:#222a33;
          --changed-bg:#4a3d0a; --disabled-bg:#2a3038; --disabled-ink:#7d8794;
          --on-header-soft:rgba(31,35,40,.12); --on-header-edge:rgba(31,35,40,.45); --on-header-press:rgba(31,35,40,.22);
          --dot-off:#9aa4b0; --dot-green:#2ea043; --dot-amber:#f0a020; --dot-red:#7a0010; --banner-ink:#fff;
          --scrim:rgba(0,0,0,.65); --shadow:rgba(0,0,0,.6); --shadow-strong:rgba(0,0,0,.7); }          /* (every colour has its dark value; the header, its text and the line stay as they are) */
}
.dry { --kit-header:#1f5fbf; --kit-on-header:#fff; --on-header-soft:rgba(255,255,255,.16); --on-header-edge:rgba(255,255,255,.45); --on-header-press:rgba(255,255,255,.28); }          /* test mode: a blue header with white on it (the page's body has the class dry) */
/* ---- end of the brand ---- */