feat: theme toggle

apps/web/app/styles/semantic.css

@@ -17,6 +17,13 @@
    :root and [data-surface="dark"] share one block; [data-surface="light"]
    comes afterwards so it wins on the same element, and proximity makes the
    nearest data-surface ancestor win for any subtree.
+
+   THEME TOGGLE (the declared exception to "no global theme"). The nav's
+   theme control flips WHICH surface the DOCUMENT stands on: the root action
+   persists `sharper-theme`, the root loader returns it, and <html
+   data-surface> follows - so light mode means the whole site stands on
+   [data-surface="light"] and every token re-resolves, including the nav and
+   footer, which follow the theme unless a route's handle forces a surface.
    ========================================================================= */
 
 /* ---------------------------------------------------------------------------
@@ -193,6 +200,9 @@
   --surface-danger-subtle: var(--color-red-100);
   --surface-inverse: var(--color-neutral-900);     /* figma background/inverse #0b0b0a */
   --surface-footer: var(--color-white);            /* figma 140:7812, the light footer */
+  /* The light bar floats the same way the dark one does - the ground colour at
+     90% with a blur behind it, so content shows through as it scrolls under. */
+  --surface-nav: color-mix(in srgb, var(--color-white) 90%, transparent);
   --surface-selection: var(--color-green-200);
 
   /* --- text ------------------------------------------------------------- */