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

@@ -57,8 +57,8 @@
   aspect-ratio: 3 / 2;
   overflow: hidden;
   border-radius: var(--radius-plate);
-  background: radial-gradient(120% 90% at 50% 0%, #f3f5f8 0%, var(--studio) 55%, #d3d9e0 100%);
-  box-shadow: inset 0 0 0 1px rgba(21, 24, 29, 0.09);
+  background: radial-gradient(120% 90% at 50% 0%, var(--plate-a) 0%, var(--plate-b) 55%, var(--plate-c) 100%);
+  box-shadow: inset 0 0 0 1px var(--ring);
 }
 
 .plate img,
@@ -76,7 +76,7 @@
   position: relative;
   object-fit: contain;
   padding: 6%;
-  filter: drop-shadow(0 10px 24px rgba(21, 24, 29, 0.28));
+  filter: drop-shadow(0 10px 24px var(--img-shadow));
 }
 
 .backdrop {
@@ -108,14 +108,14 @@
 
 .description {
   max-width: 62ch;
-  color: rgba(21, 24, 29, 0.86);
+  color: var(--ink-2);
 }
 
 .points {
   display: grid;
   gap: 4px;
   font-size: 15px;
-  color: rgba(21, 24, 29, 0.78);
+  color: var(--ink-3);
 }
 
 .points li {
@@ -168,7 +168,7 @@
   text-decoration: underline;
   text-decoration-thickness: 1.5px;
   text-underline-offset: 4px;
-  text-decoration-color: rgba(21, 24, 29, 0.3);
+  text-decoration-color: var(--ink-line);
   transition: text-decoration-color 0.2s, color 0.2s;
 }
 
@@ -187,7 +187,7 @@
 .skeleton span {
   aspect-ratio: 3 / 2;
   border-radius: var(--radius-plate);
-  background: linear-gradient(160deg, #eef1f4, var(--studio));
+  background: linear-gradient(160deg, var(--plate-a), var(--plate-c));
 }
 
 @media (min-width: 641px) and (max-width: 1000px) {