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/sections.module.css

@@ -36,7 +36,7 @@
 
 .skill p {
   max-width: 52ch;
-  color: rgba(21, 24, 29, 0.82);
+  color: var(--ink-2);
 }
 
 .tags {
@@ -49,7 +49,7 @@
 .tags li {
   padding: 3px 11px;
   border-radius: 999px;
-  background: rgba(21, 24, 29, 0.06);
+  background: var(--chip);
   font-size: 13.5px;
   line-height: 1.5;
 }
@@ -136,8 +136,8 @@
 .contact {
   margin-top: var(--section);
   padding: clamp(72px, 9vw, 128px) 0 40px;
-  background: var(--ink);
-  color: var(--paper);
+  background: var(--band-bg);
+  color: var(--band-ink);
 }
 
 .contactTitle {
@@ -147,7 +147,7 @@
 
 .contactLead {
   margin-top: 16px;
-  color: rgba(244, 246, 248, 0.7);
+  color: var(--band-2);
 }
 
 .mail {
@@ -177,19 +177,19 @@
   flex-direction: column;
   gap: 2px;
   padding: 18px 0;
-  border-top: 1px solid rgba(244, 246, 248, 0.2);
+  border-top: 1px solid var(--band-line);
 }
 
 .contacts span {
   font-size: 14px;
-  color: rgba(244, 246, 248, 0.6);
+  color: var(--band-3);
 }
 
 .contacts a {
   text-decoration: underline;
   text-decoration-thickness: 1.5px;
   text-underline-offset: 4px;
-  text-decoration-color: rgba(244, 246, 248, 0.35);
+  text-decoration-color: var(--band-underline);
   overflow-wrap: anywhere;
 }
 
@@ -200,7 +200,7 @@
 .legal {
   margin-top: clamp(48px, 6vw, 80px);
   font-size: 14px;
-  color: rgba(244, 246, 248, 0.55);
+  color: var(--band-3);
 }
 
 @media (max-width: 900px) {