:root {
  --accent: var(--editor-accent, #0c0d10);
  --bg: #fafbfc;
  --text: #0c0d10;
  --muted: #5e5f66;
  --light: #8a8b90;
  --fill: rgba(12, 13, 16, 0.04);
  --fill-strong: rgba(12, 13, 16, 0.08);
  --hairline: rgba(12, 13, 16, 0.08);
  --invert-bg: #0c0d10;
  --invert-text: #fafbfc;
  --radius: var(--editor-card-radius, 14px);
  --max: 760px;
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0c0d10;
  --text: #f2f2f3;
  --muted: #9a9a9e;
  --light: #737377;
  --fill: rgba(255, 255, 255, 0.06);
  --fill-strong: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.12);
  --invert-bg: #f2f2f3;
  --invert-text: #0c0d10;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0d10;
    --text: #f2f2f3;
    --muted: #9a9a9e;
    --light: #737377;
    --fill: rgba(255, 255, 255, 0.06);
    --fill-strong: rgba(255, 255, 255, 0.12);
    --hairline: rgba(255, 255, 255, 0.12);
    --invert-bg: #f2f2f3;
    --invert-text: #0c0d10;
    color-scheme: dark;
  }
}