:root,
html[data-color-scheme="dark"] {
  color-scheme: dark;
  --devcm-bg: #070908;
  --devcm-bg-deep: #040504;
  --devcm-panel: rgba(12, 14, 11, 0.94);
  --devcm-panel-soft: rgba(18, 20, 14, 0.88);
  --devcm-panel-warm: rgba(22, 18, 10, 0.74);
  --devcm-line: rgba(255, 176, 0, 0.22);
  --devcm-line-strong: rgba(255, 176, 0, 0.48);
  --devcm-text: #ddd6b9;
  --devcm-muted: #a79c78;
  --devcm-dim: #756b4d;
  --devcm-amber: #ffb000;
  --devcm-amber-soft: #d88900;
  --devcm-green: #68f37f;
  --devcm-green-soft: rgba(104, 243, 127, 0.15);
  --devcm-cyan: #00e5ff;
  --devcm-purple: #b58cff;
  --devcm-red: #ff5d5d;
  --devcm-radius: 12px;
  --devcm-activity-width: 58px;
  --devcm-sidebar-width: 284px;
  --devcm-rightbar-width: 308px;
  --devcm-topbar-height: 88px;
  --devcm-status-height: 34px;
  --devcm-mono: Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
  --devcm-shadow: 0 0 22px rgba(255, 176, 0, 0.08), inset 0 0 0 1px rgba(255, 176, 0, 0.16);
  --devcm-green-glow: 0 0 18px rgba(104, 243, 127, 0.14);

  --background: var(--devcm-bg);
  --foreground: var(--devcm-text);
  --selectionBackground: rgba(104, 243, 127, 0.24);
  --blue: var(--devcm-cyan);
  --green: var(--devcm-green);
  --red: var(--devcm-red);
  --yellow: var(--devcm-amber);
  --brightBlue: var(--devcm-cyan);
  --brightGreen: var(--devcm-green);
  --brightRed: var(--devcm-red);
}

html[data-color-scheme="light"] {
  color-scheme: light;
  --devcm-bg: #fdf8e8;
  --devcm-bg-deep: #f4eedc;
  --devcm-panel: rgba(255, 250, 235, 0.9);
  --devcm-panel-soft: rgba(244, 238, 220, 0.5);
  --devcm-panel-warm: rgba(244, 238, 220, 0.34);
  --devcm-line: rgba(101, 123, 131, 0.2);
  --devcm-line-strong: rgba(181, 137, 0, 0.42);
  --devcm-text: #586e75;
  --devcm-muted: #657b83;
  --devcm-dim: #93a1a1;
  --devcm-amber: #b58900;
  --devcm-amber-soft: #cb4b16;
  --devcm-green: #859900;
  --devcm-green-soft: rgba(133, 153, 0, 0.14);
  --devcm-cyan: #2aa198;
  --devcm-purple: #6c71c4;
  --devcm-red: #dc322f;
  --devcm-shadow: inset 0 0 0 1px rgba(181, 137, 0, 0.16);
  --devcm-green-glow: 0 0 0 1px rgba(133, 153, 0, 0.12);

  --background: var(--devcm-bg);
  --foreground: var(--devcm-text);
  --selectionBackground: rgba(42, 161, 152, 0.18);
  --blue: var(--devcm-cyan);
  --green: var(--devcm-green);
  --red: var(--devcm-red);
  --yellow: var(--devcm-amber);
  --brightBlue: var(--devcm-cyan);
  --brightGreen: var(--devcm-green);
  --brightRed: var(--devcm-red);
}

::selection {
  background: rgba(104, 243, 127, 0.26);
  color: #fff6d4;
}