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

components/hero.module.css

@@ -6,7 +6,7 @@
   flex-direction: column;
   min-height: min(100svh, 1000px);
   overflow: clip;
-  background: linear-gradient(180deg, #f5f7fa 0%, #e6e9ee 100%);
+  background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
 }
 
 /* The floor is a stage of its own below the text, so the grid never runs through the copy at any window height. */
@@ -15,8 +15,8 @@
   flex: 1;
   min-height: 260px;
   overflow: hidden;
-  background: linear-gradient(180deg, #d8dde4 0%, var(--studio-deep) 100%);
-  border-top: 1px solid rgba(21, 24, 29, 0.2);
+  background: linear-gradient(180deg, var(--stage-top) 0%, var(--stage-bottom) 100%);
+  border-top: 1px solid var(--horizon);
 }
 
 .stage::after {
@@ -44,8 +44,8 @@
   transform-origin: 50% 0;
   transform: rotateX(76deg) rotateZ(var(--sway));
   background-image:
-    linear-gradient(to right, rgba(21, 24, 29, 0.2) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(21, 24, 29, 0.2) 1px, transparent 1px);
+    linear-gradient(to right, var(--grid) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
   background-size: 80px 80px;
   background-position: center top;
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
@@ -89,7 +89,7 @@
   max-width: 100%;
   padding: 8px 16px 8px 13px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--pill-bg);
   box-shadow: inset 0 0 0 1px var(--line);
   font-size: 15px;
   font-weight: 500;
@@ -102,12 +102,12 @@
   height: 9px;
   border-radius: 50%;
   background: var(--y);
-  box-shadow: 0 0 0 4px rgba(90, 163, 0, 0.2);
+  box-shadow: 0 0 0 4px var(--dot-glow);
 }
 
 .name {
   margin: 30px 0 0 -0.045em;
-  font: 800 clamp(56px, 12.6vw, 204px) / 0.88 var(--font-head);
+  font: var(--name-weight) clamp(56px, 12.6vw, 204px) / 0.88 var(--font-head);
   letter-spacing: -0.048em;
 }
 
@@ -122,7 +122,7 @@
   margin-top: 44px;
   font-size: 19px;
   line-height: 1.62;
-  color: rgba(21, 24, 29, 0.88);
+  color: var(--ink-2);
 }
 
 .actions {