:root {

  /* misc */
  --border: #49515a;
  --table-stripe: #313942;
  --text-label: #e0e0e0;
  --logo-text-color: #a4adb2;

  /* menu icon color (dark mode uses text-label instead of foreground-1) */
  --menu-icon-color: var(--text-label);

  /* header */
  --background-0: #1e1f22;
  --foreground-0: var(--logo-text-color);
  --hover-0: transparent;
  --hover-text-0: #e0e0e0;

  /* menu */
  --background-1: #2b2d31;
  --foreground-1: #e0e0e0;
  --hover-1: #303841;

  /* main pane */
  --background-2: #313338;
  --foreground-2: #e0e0e0;
  --hover-2: #404851;

  /* buttons: alternate */
  --background-3: #313338;
  --foreground-3: var(--logo-text-color);
  --hover-3: #38464c;

  /* input fields */
  --background-4: #363b3f;
  --foreground-4: #e0e0e0;
  --hover-4: #72787e;

  /* menu top nav buttons */
  --background-5: #2b2d31;
  --foreground-5: var(--logo-text-color);
  --hover-5: #303841;

  /* buttons: new, tiny */
  --background-6: #2196F3;
  --foreground-6: #000000;
  --hover-6: #64B5F6;

  /* buttons: save, send, confirm, etc. */
  --background-7: #88b61d;
  --foreground-7: #ffffff;
  --hover-7: #6a8f16;

  /* buttons: cancel, alternate function; normal messages */
  --background-8: var(--background-1);
  --foreground-8: var(--foreground-1);
  --foreground-8-icon: var(--logo-text-color);
  --hover-8: var(--hover-1);

  /* buttons: delete, warning, etc.; error messages */
  --background-9: #f44336;
  --foreground-9: #e0e0e0;
  --hover-9: #d32f2f;

  /* settings top tab highlight */
  --foreground-23: #ffffff;
  --background-23: #2196F3;
  --hover-23: #64B5F6;

  /* settings lower tabs */
  --foreground-24: #e0e0e0;
  --background-24: #2b2d31;
  --hover-24: #303841;

  /* device panel */
  --background-10: #29465B;
  --foreground-10: #e0e0e0;
  --hover-10: #19364B;

  /* record label */
  --background-11: #313338;
  --foreground-11: #e0e0e0;

  /* status up */
  --background-12: #88b61d;
  --foreground-12: #ffffff;
  --hover-12: #6a8f16;
  --border-12: #88b61d;

  /* status down */
  --background-13: #f44336;
  --foreground-13: #ffffff;
  --hover-13: #d32f2f;
  --border-13: #f44336;

  /* status maint */
  --background-14: var(--logo-text-color);
  --foreground-14: #ffffff;
  --hover-14: #404851;
  --border-14: var(--logo-text-color);

  /* check color */
  --foreground-15: #88b61d;

  /* minus color */
  --foreground-16: #9e9e9e;

  /* exclamation color */
  --foreground-17: #f44336;

  /* alert/info color */
  --foreground-22: #2196F3;

  /* status warning */
  --background-18: #e0e0e0;
  --foreground-18: #000000;
  --hover-18: #b8b8b8;
  --border-18: #000000;

  /* event up */
  --background-19: #2f3a22;
  --foreground-19: #d2f18c;
  --hover-19: #3c4a2b;
  --border-19: #88b61d;

  /* event down */
  --background-20: #3a2222;
  --foreground-20: #ffb1aa;
  --hover-20: #4c2b2b;
  --border-20: #f44336;

  /* event warning */
  --background-21: #3a2c1f;
  --foreground-21: #ffd06b;
  --hover-21: #4b3826;
  --border-21: #ffb300;

}

/* Dark mode specific: native dark color scheme for date pickers, etc. */
input {
  color-scheme: dark;
}