:root {
  color-scheme: dark light;
  --act4-canvas: #07090d;
  --act4-surface: #11151d;
  --act4-surface-raised: #171d27;
  --act4-ink: #f6f7fb;
  --act4-muted: #aab2c0;
  --act4-line: #303949;
  --act4-action: #8dc6ff;
  --act4-action-ink: #07111c;
  --act4-good: #65d391;
  --act4-watch: #f3c969;
  --act4-stop: #ff7777;
  --act4-family-min: 16rem;
  --act4-gap: 0.75rem;
  --act4-radius: 1.25rem;
  --act4-width-ceiling: 70vw;
  --act4-height-ceiling: 85vh;
}

@media (prefers-color-scheme: light) {
  :root {
    --act4-canvas: #eef5fc;
    --act4-surface: #ffffff;
    --act4-surface-raised: #f7faff;
    --act4-ink: #101722;
    --act4-muted: #596474;
    --act4-line: #c9d5e3;
    --act4-action: #1c6eb5;
    --act4-action-ink: #ffffff;
  }
}