Add a dark theme, default, with a switch in the top bar

Colours move into theme tokens (light values in :root, dark in
[data-theme=dark]); the closing contact band inverts on each theme. The
choice is stored in localStorage and applied by a head script before the
first paint. Voxel covers and image shadows follow the theme.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9

app/globals.css

@@ -1,16 +1,59 @@
 /* Design tokens: a studio-lit 3D viewport. Axis colours (X red, Y green, Z blue) are marks and lines, not text. */
 :root {
-  --studio: #e6e9ed;
-  --studio-deep: #cdd3db;
+  color-scheme: light;
+
+  /* Palette. The page is a 3D viewport: a studio backdrop and the three axis colours (X red, Y green, Z blue),
+     which are marks and lines rather than text. Dark is the default theme; see :root[data-theme='dark']. */
   --paper: #f4f6f8;
   --ink: #15181d;
   --muted: #5b6571;
-  --line: rgba(21, 24, 29, 0.14);
   --x: #e0384b;
   --y: #5aa300;
   --z: #2c63e0;
   --z-text: #2455c9;
 
+  /* Surfaces */
+  --hero-top: #f5f7fa;
+  --hero-bottom: #e6e9ee;
+  --stage-top: #d8dde4;
+  --stage-bottom: #cdd3db;
+  --plate-a: #f3f5f8;
+  --plate-b: #e6e9ed;
+  --plate-c: #d3d9e0;
+  --pill-bg: rgba(255, 255, 255, 0.72);
+  --disc-bg: rgba(244, 246, 248, 0.62);
+  --topbar-bg: rgba(244, 246, 248, 0.86);
+  --grid: rgba(21, 24, 29, 0.2);
+  --img-shadow: rgba(21, 24, 29, 0.28);
+  --dot-glow: rgba(90, 163, 0, 0.2);
+
+  /* Voxel covers of projects without a demo image */
+  --cube-top: #f9fafb;
+  --cube-left: #d6dbe2;
+  --cube-right: #b8c0cb;
+  --cube-edge: rgba(21, 24, 29, 0.16);
+  --cover-grid: rgba(21, 24, 29, 0.09);
+
+  /* The closing contact band is the inverse of the page */
+  --band-bg: #15181d;
+  --band-ink: #f4f6f8;
+
+  /* Light type on a dark ground looks heavier, so the display weight is eased off there */
+  --name-weight: 800;
+
+  /* Derived from the palette above, so they follow the theme */
+  --line: color-mix(in srgb, var(--ink) 14%, transparent);
+  --ring: color-mix(in srgb, var(--ink) 9%, transparent);
+  --horizon: color-mix(in srgb, var(--ink) 22%, transparent);
+  --chip: color-mix(in srgb, var(--ink) 7%, transparent);
+  --ink-2: color-mix(in srgb, var(--ink) 86%, transparent);
+  --ink-3: color-mix(in srgb, var(--ink) 76%, transparent);
+  --ink-line: color-mix(in srgb, var(--ink) 32%, transparent);
+  --band-2: color-mix(in srgb, var(--band-ink) 70%, transparent);
+  --band-3: color-mix(in srgb, var(--band-ink) 58%, transparent);
+  --band-line: color-mix(in srgb, var(--band-ink) 22%, transparent);
+  --band-underline: color-mix(in srgb, var(--band-ink) 38%, transparent);
+
   --radius-plate: 18px;
   --radius-control: 10px;
   --shell: min(1240px, calc(100% - 48px));
@@ -21,6 +64,42 @@
   --font-head: var(--font-display), 'Segoe UI', system-ui, sans-serif;
 }
 
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --paper: #1c2026;
+  --ink: #e9edf2;
+  --muted: #9aa5b1;
+  --x: #ff5a6e;
+  --y: #86d62c;
+  --z: #5b8dff;
+  --z-text: #8db0ff;
+
+  --hero-top: #282d35;
+  --hero-bottom: #1c2026;
+  --stage-top: #14171b;
+  --stage-bottom: #0f1114;
+  --plate-a: #363c46;
+  --plate-b: #2a2f37;
+  --plate-c: #1f2329;
+  --pill-bg: rgba(255, 255, 255, 0.07);
+  --disc-bg: rgba(40, 45, 53, 0.72);
+  --topbar-bg: rgba(28, 32, 38, 0.86);
+  --grid: rgba(255, 255, 255, 0.15);
+  --img-shadow: rgba(0, 0, 0, 0.55);
+  --dot-glow: rgba(134, 214, 44, 0.24);
+
+  --cube-top: #e9edf2;
+  --cube-left: #9aa5b3;
+  --cube-right: #69737f;
+  --cube-edge: rgba(0, 0, 0, 0.4);
+  --cover-grid: rgba(255, 255, 255, 0.09);
+
+  --band-bg: #e8ebef;
+  --band-ink: #15181d;
+
+  --name-weight: 730;
+}
+
 * { box-sizing: border-box; }
 html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 88px; }
 body {