feat: initial shared design system extracted from newerror

Foundation + chrome for the bchen.dev static sites: design tokens, Spectral /
Helvetica / IBM Plex Mono type, base + .prose typography, data-driven nav +
footer, and prefers-color-scheme + [data-theme] dark mode with a pre-paint
init. Colors are overridable CSS custom properties (defaults = newerror's
palette); each site sets only its own colors.css.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C96hwEU9cM7mJpqATiv7R5

theme-toggle.js

@@ -0,0 +1,36 @@
+/* static-design-system — theme-toggle.js
+   Shared chrome behavior: color-theme toggle + mobile (hamburger) menu.
+   Served to each site via a wrapper (assets/ds.js) and loaded at end of body.
+   Storage key must match ds/theme-init.js. */
+(function () {
+  "use strict";
+
+  var THEME_KEY = "bchen-theme";
+
+  function effectiveTheme() {
+    var set = document.documentElement.getAttribute("data-theme");
+    if (set) return set;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+
+  /* ---- theme toggle ---- */
+  var toggleBtn = document.querySelector(".theme-toggle");
+  if (toggleBtn) {
+    toggleBtn.addEventListener("click", function () {
+      var next = effectiveTheme() === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      try { localStorage.setItem(THEME_KEY, next); } catch (e) {}
+    });
+  }
+
+  /* ---- mobile menu ---- */
+  var hamburger = document.querySelector(".hamburger");
+  var mobileMenu = document.querySelector(".mobile-menu");
+  if (hamburger && mobileMenu) {
+    hamburger.addEventListener("click", function () {
+      var open = mobileMenu.classList.toggle("open");
+      hamburger.classList.toggle("is-open", open);
+      hamburger.setAttribute("aria-expanded", open ? "true" : "false");
+    });
+  }
+})();