:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --border: #e2e2e6;
  --text: #1a1a1e;
  --text-dim: #5b5b64;
  --accent: #3b6ff0;
  --accent-text: #ffffff;
  --code-bg: #f0f1f4;
  --shadow: 0 1px 2px rgba(20, 20, 30, 0.06), 0 1px 12px rgba(20, 20, 30, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --surface: #1e1e23;
    --border: #2d2d34;
    --text: #ededf0;
    --text-dim: #9a9aa4;
    --accent: #7ea1ff;
    --accent-text: #10131f;
    --code-bg: #26262d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 12px rgba(0, 0, 0, 0.2);
  }
}

html {
  color-scheme: light dark;
}