/* The two themes, used by both the React app and the login pages.
   Dark is the default, data-theme="light" on <html> switches to light. */
:root {
  color-scheme: dark;
  --bg-main: #222428;
  --bg-main-light: #2a2c31;
  --bg-main-dark: #44474e;
  --bg-raised: #34373c;
  --bg-row-hover: rgba(255, 255, 255, 0.04);
  --fg-main: #ececec;
  --fg-main-light: #bfc1c2;
  --fg-main-dark: #9da1aa;
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 0 0 1px #44474e, 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 0 0 1px #44474e;
  --shadow-element: 0 1px 2px rgba(0, 0, 0, 0.6);
  --focus: #e2b007;
  --link: #e2b007;
  --info: #6cb6e0;
  --good: #4cbb7f;
  --bad: #ef6555;
}

/* The yellow is too pale for text and thin lines on white, so links and focus get a darker shade */
:root[data-theme='light'] {
  color-scheme: light;
  --bg-main: #eef0f2;
  --bg-main-light: #ffffff;
  --bg-main-dark: #d2d5da;
  --bg-raised: #e6e8eb;
  --bg-row-hover: rgba(0, 0, 0, 0.04);
  --fg-main: #1b1d20;
  --fg-main-light: #4a4e55;
  --fg-main-dark: #6b7079;
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 0 0 1px #d2d5da, 0 10px 40px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 0 0 1px #d2d5da;
  --shadow-element: 0 1px 2px rgba(0, 0, 0, 0.2);
  --focus: #b08600;
  --link: #8a6800;
  --info: #1f6fa8;
  --good: #1e7f4a;
  --bad: #b3261e;
}