/* RouteMule Fleet Systems look: colors, fonts and shadows for light and dark. Change the look here. */

:root {
  --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* the VIN font everywhere (Mav, Build 31); was -apple-system, "Inter", "Segoe UI" */
  color-scheme: light;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* table data (Mav, Build 30) */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;  /* the original font, used in the side menu (Mav, Build 34) */

  --bg: #f5f5f7;                      /* page background */
  --surface: #ffffff;                 /* cards */
  --side: rgba(236, 236, 240, .78);   /* side menu (see-through) */
  --text: #1d1d1f;
  --text2: #6e6e73;
  --text3: #8e8e93;
  --sep: rgba(60, 60, 67, .12);       /* thin lines */
  --accent: #007aff;                  /* Apple blue */
  --fill: rgba(118, 118, 128, .12);   /* search boxes, light grey fills */
  --hover: rgba(0, 0, 0, .045);
  --head-bg: var(--accent);  /* table header row = same blue as the Dashboard highlight (Mav, Build 37; light blue in Build 35) */
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px rgba(0, 0, 0, .05);

  /* status colours: text + soft background */
  --crit: #d70015; --crit-bg: rgba(255, 59, 48, .12);
  --warn: #b25000; --warn-bg: rgba(255, 149, 0, .15);
  --good: #1f7a36; --good-bg: rgba(52, 199, 89, .15);
  --info: #0040dd; --info-bg: rgba(0, 122, 255, .12);
  --gray: #636366; --gray-bg: rgba(118, 118, 128, .13);
  /* status fills for bars and dots */
  --crit-fill: #ff3b30; --warn-fill: #ff9500; --good-fill: #34c759; --info-fill: #007aff; --gray-fill: #aeaeb2;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161618;
  --surface: #232325;
  --side: rgba(36, 36, 38, .82);
  --text: #f5f5f7;
  --text2: #a1a1a6;
  --text3: #8e8e93;
  --sep: rgba(84, 84, 88, .5);
  --accent: #0a84ff;
  --fill: rgba(118, 118, 128, .24);
  --hover: rgba(255, 255, 255, .06);
  --head-bg: var(--accent);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .05);

  --crit: #ff6961; --crit-bg: rgba(255, 69, 58, .2);
  --warn: #ffb340; --warn-bg: rgba(255, 159, 10, .2);
  --good: #4cd964; --good-bg: rgba(48, 209, 88, .18);
  --info: #5eabff; --info-bg: rgba(10, 132, 255, .22);
  --gray: #aeaeb2; --gray-bg: rgba(118, 118, 128, .26);
  --crit-fill: #ff453a; --warn-fill: #ff9f0a; --good-fill: #30d158; --info-fill: #0a84ff; --gray-fill: #636366;
}