:root {
  --dark: #333;
  --mid: #555;
  --light: #ddd;
  --white: #fff;
}

/* Set default to light mode */
body {
  background-color: var(--white);
  color: var(--dark);
}

/* TODO: In light stealth mode, set font colors to light. This should
 * all text, including the buttons. */
.stealth {
  color: var(--light);
}

/* TODO: Dark mode:
 * Switch the background color to dark and switch the article
 * border to white. Any text on a gray background should become
 * dark while text on the new dark background becomes light.
 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--dark);
    color: var(--light);
  }
  article {
    border-color: var(--white);
  }
  main h2,
  main h3 {
    color: var(--dark);
  }

  body.stealth {
    color: var(--mid);
  }

  body.stealth > main h2,
  body.stealth > main h3,
  body.stealth > nav button {
    color: var(--light);
  }
}

/* TODO: Stealth dark mode:
 * Set the font colors to mid, except for those that are on a gray
 * background. Make that text have a light font color.
 */