/* Follows the colour scheme the operating system asks for. */
:root {
  color-scheme: light dark;

  --color-bg: #f6f4f1;
  --color-bg-raised: #ffffff;
  --color-bg-sunken: #eeeae4;
  --color-border: #ddd7ce;
  --color-text: #1a1917;
  --color-text-muted: #67615a;
  --color-accent: #b3121f;
  --color-accent-soft: #fbeced;
  --color-good: #1f7a4d;
  --border-width: 1px;
  --color-backdrop: rgba(26, 25, 23, 0.45);
  --shadow-raised: 0 1px 2px rgba(26, 25, 23, 0.06), 0 8px 24px rgba(26, 25, 23, 0.05);
  /* No picture behind the page, and no notice taken of the daypart: these four
     are plain palettes, and someone who picks one is asking for a page that
     stays where it is put. */
  --backdrop-image: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161a;
    --color-bg-raised: #1c2027;
    --color-bg-sunken: #0f1114;
    --color-border: #2d323b;
    --color-text: #f1efec;
    --color-text-muted: #a2a8b2;
    --color-accent: #ff7b86;
    --color-accent-soft: #2a1a1d;
    --color-good: #5fd3a0;
    --border-width: 1px;
    --color-backdrop: rgba(0, 0, 0, 0.6);
    --shadow-raised: none;
  }
}