html, body {
  font-family: sans;
  margin: 0;
  padding: 0;

  --step: 8px;

  /* @see https://acorn.firefox.com/latest/styles/color-MZHBVuZc#section-gray-c2 */
  --gray-light-05: #fbfbfe;
  --gray-light-10: #f9f9fb;
  --gray-light-20: #f0f0f4;
  --gray-light-30: #e0e0e6;
  --gray-light-40: #cfcfd8;
  --gray-light-50: #bfbfc9;

  --gray-dark-05: #5b5b66;
  --gray-dark-10: #52525e;
  --gray-dark-30: #42414d;
  --gray-dark-40: #3a3944;
  --gray-dark-60: #2b2a33;
  --gray-dark-80: #1c1b22;
  --gray-dark-90: #15141a;

  --green-20: #b3ffe3;
  --green-40: #54ffbd;
  --green-60: #2ac3a2;
}

body {
  --color-bg: var(--gray-light-10);
  --color-text: var(--gray-dark-80);
}

@media (prefers-color-scheme: dark) {
  body {
    --color-bg: var(--gray-dark-60);
    --color-text: var(--gray-light-40);
  }
}

/* Common */

body {
  font-size: calc(2 * var(--step));

  background-color: var(--color-bg);
  color: var(--color-text);
}