:root {
  color-scheme: light dark;
}

:root,
:root[data-theme='light'] {
  --page-bg-color: #fff;
  --page-text-color: #000;
  --page-border-color: #999;
  --accent-bg-color: #ccc;
  --accent-text-color: #333;
  --ux-bg-color: #eee;
  --ux-border-color: #ddd;
  --ux-text-color: #444;
}

:root[data-theme='dark'] {
  --page-bg-color: #000;
  --page-text-color: #ddd;
  --page-border-color: #444;
  --accent-bg-color: #262626;
  --accent-text-color: #aaa;
  --ux-bg-color: #171717;
  --ux-border-color: #0c0c0c;
  --ux-text-color: #999;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg-color: #000;
    --page-text-color: #ddd;
    --page-border-color: #444;
    --accent-bg-color: #262626;
    --accent-text-color: #aaa;
    --ux-bg-color: #171717;
    --ux-border-color: #0c0c0c;
    --ux-text-color: #999;
  }
}