/* Dark mode for the blog pages. Switched by js/theme.js through html[data-theme="dark"]. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 4px; padding: 0;
  border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}
.theme-toggle:hover { background: rgba(127, 127, 127, 0.16); }
.theme-toggle:focus-visible { outline: 2px solid #647de5; outline-offset: 2px; }

html[data-theme="dark"] {
  --bg: #0f1012; --surface: #17181b; --muted: #1f2024;
  --ink: #ececec; --ink-soft: #a8a8a8; --border: rgba(255, 255, 255, 0.13);
  --accent: #8fa2f5;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .site-header { background: rgba(15, 16, 18, 0.92); }
html[data-theme="dark"] .blog-card:hover { border-color: rgba(255, 255, 255, 0.32); }

/* post pages carry their own tokens on .post */
html[data-theme="dark"] .post {
  --ink: #ececec; --copy: #c6c6c6; --muted: #9b9b9b; --line: #2d2e33; --soft: #18191c;
  --brand-link: #8fa2f5; --brand-link-hover: #b3c0fb; --brand-accent-wash: #2b3463;
  background: #0f1012; color: var(--ink);
}
html[data-theme="dark"] .post .markdown-chart .chart-axis-label { fill: #fff; }
html[data-theme="dark"] .post .markdown-chart .chart-legend { color: #fff; }
html[data-theme="dark"] .post .chart-gridline { stroke: #34353a; }
/* the hero illustration is drawn for a light page, so it keeps a light panel */
html[data-theme="dark"] .post .hero { background: #fff; border-radius: 12px; padding: 8px; }

/* hard-coded greys in the post stylesheet and the shared header button */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .nav-links a.btn-primary { background: #ececec; color: #111; }
html[data-theme="dark"] .nav-links a.btn-primary:hover { color: #111; }
html[data-theme="dark"] body.post-page { background: #0f1012; }
html[data-theme="dark"] .post .dek,
html[data-theme="dark"] .post strong,
html[data-theme="dark"] .post .chart-heading strong { color: #f1f1f1; }
html[data-theme="dark"] .post .callout,
html[data-theme="dark"] .post .site-header nav a,
html[data-theme="dark"] .post .type-card p { color: #c6c6c6; }
html[data-theme="dark"] .post .kicker,
html[data-theme="dark"] .post .nav-meta,
html[data-theme="dark"] .post .post-jumps a,
html[data-theme="dark"] .post .chart-note,
html[data-theme="dark"] .post .chart-heading span { color: #9b9b9b; }
html[data-theme="dark"] .post .post-jumps a:hover,
html[data-theme="dark"] .post .site-header nav a:hover { color: #fff; }
html[data-theme="dark"] .post li::marker { color: #8a8a8a; }
html[data-theme="dark"] .post .callout { border-left-color: #6d6e75; }
html[data-theme="dark"] .post code { background: #24252a; color: #e4e4e4; }
html[data-theme="dark"] .post pre { background: #141518; color: #d6d6d6; border-color: #2d2e33; }
html[data-theme="dark"] .post pre code { background: none; }
html[data-theme="dark"] .post .type-card code { color: #e4e4e4; }