@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --c-pri: #8a00d4;
    --c-sec: #c224a8;
    --c-tri: #f7b23b;

    --c-err: #f33;
    --c-suc: #007800;

    --c-txt: #202124;
    --c-dim: #4d5156;
    --c-bg: #fff;
    --c-line: #d3d3d3;
    --c-surf: #f3f3f3;
  }
  .bg-tertiary {
    color: var(--c-txt);
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --c-pri: #8a00d4;
  --c-sec: #c224a8;
  --c-tri: #f7b23b;

  --c-err: #b22222;
  --c-suc: #007800;

  --c-txt: #202124;
  --c-dim: #4d5156;
  --c-bg: #fff;
  --c-line: #d3d3d3;
  --c-surf: #f3f3f3;
}

:root[data-theme='light'] .bg-tertiary {
  color: var(--c-txt);
}