:root {
  color-scheme: light dark;
  --w: 760px;

  /* light defaults (used if system is light OR when we switch to [data-theme="light"]) */
  --bg: #fdfdfd;
  --fg: #111111;
  --muted: #666666;
  --line: #e5e5e5;
  --link: #0066cc;
}

/* System: dark preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --fg: #e6e6e6;
    --muted: #9a9a9a;
    --line: #1b1b1b;
    --link: #9ad3ff;
  }
}

/* Explicit overrides via data-theme attribute */
:root[data-theme="light"] {
  --bg: #fdfdfd;
  --fg: #111111;
  --muted: #666666;
  --line: #e5e5e5;
  --link: #0066cc;
}
:root[data-theme="dark"] {
  --bg: #000000;
  --fg: #f5f5f5;
  --muted: #9a9a9a;
  --line: #222222;
  --link: #67e8f9;
}

/* Your existing base styles (keep these) */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font:16px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.container { max-width: var(--w); margin: 64px auto; padding: 0 16px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { margin: 20px 0 10px; font-weight: 600; }
hr { border:0; border-top:1px solid var(--line); margin: 24px 0; }
.muted { color: var(--muted); }
nav a { margin-right: 12px; }
.list { list-style: none; padding:0; }
.list li { margin: 8px 0; }
.post pre, .post code { background: #121212; padding: 2px 4px; border-radius: 4px; }