feat(frontend): add a warm dark theme and close the DESIGN.md drift

The palette is restated for dark rather than inverted: elevation reads
through lightness on dark and through darkness on light, so the floor is
the darkest surface here and the second-lightest there. The clay hue is
kept and lifted, because #85432f is 2.1:1 on a dark ground. All 37
themeable tokens are covered, in an OS-preference block and a data-theme
block that a contract test keeps identical, and ink, action, danger,
success and warning are asserted at 4.5:1 against the dark canvas.

Four raw colors that would have stayed light-theme values are tokenised
(the avatar hairline, the sheen sweep, a one-off shadow, a literal
warning hex). The QR keeps literal white in both themes, since scanners
need light modules to be light, and print keeps white paper.

The four root boundary pages cannot read a token, so they restate the
handful they need in both themes. forbidden.tsx also stops painting a
bespoke near-black page in four colours that appear nowhere in the
palette, which broke the rule that dark ink is never a page-scale
surface.

Also fixes what the audit found in DESIGN.md itself: two ink values that
had drifted from the code, a motion tier documented at 360ms that was
never implemented, a breakpoint section claiming three tiers where the
stylesheet has eleven, an undocumented report-paper palette, and an admin
section describing a bespoke panel that antd + Refine replaced. Five
zero-reference admin rules go with it.

The sidebar gets the accent, opaque drawer, heading rank and empty-state
guidance settled earlier, and fenced code blocks finally get a container.

BUG-439.

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

frontend/src/app/error.tsx

@@ -1,17 +1,22 @@
 "use client";
 
+// These pages sit in the shared root layout segment and must not import the
+// site stylesheet — that would drag the chat styles onto every admin route — so
+// they cannot read a single design token. They restate the handful they need,
+// in both themes, and those values are kept in step with the palette by hand.
+
 import { useEffect } from "react";
 
 import { TriangleAlert } from "lucide-react";
 import Link from "next/link";
 
-const canvas = "var(--color-canvas, #fbfaf7)";
-const ink = "var(--color-ink, #1d1d1f)";
-const inkSecondary = "var(--color-ink-secondary, #5f5f59)";
-const danger = "var(--color-danger, #9a2f2f)";
-const border = "var(--color-border, #d8d6cf)";
-const action = "var(--color-action, #85432f)";
-const focus = "var(--color-focus, #85432f)";
+const canvas = "var(--bp-canvas)";
+const ink = "var(--bp-ink)";
+const inkSecondary = "var(--bp-ink-soft)";
+const danger = "var(--bp-danger)";
+const border = "var(--bp-border)";
+const action = "var(--bp-action)";
+const focus = "var(--bp-action)";
 
 const actionStyle = {
   alignItems: "center",
@@ -55,6 +60,35 @@ export default function RootError({
       }}
     >
       <style>{`
+        :root {
+          color-scheme: light;
+          --bp-canvas: #fbfaf7;
+          --bp-ink: #1d1d1f;
+          --bp-ink-soft: #5f5f59;
+          --bp-border: #d8d6cf;
+          --bp-action: #85432f;
+          --bp-danger: #9a2f2f;
+        }
+        @media (prefers-color-scheme: dark) {
+          :root:not([data-theme="light"]) {
+            color-scheme: dark;
+            --bp-canvas: #262624;
+            --bp-ink: #f2f0ea;
+            --bp-ink-soft: #b3afa4;
+            --bp-border: #3c3b37;
+            --bp-action: #d4785a;
+            --bp-danger: #e08573;
+          }
+        }
+        :root[data-theme="dark"] {
+          color-scheme: dark;
+          --bp-canvas: #262624;
+          --bp-ink: #f2f0ea;
+          --bp-ink-soft: #b3afa4;
+          --bp-border: #3c3b37;
+          --bp-action: #d4785a;
+          --bp-danger: #e08573;
+        }
         .root-error-action:focus-visible { outline: 3px solid ${focus}; outline-offset: 2px; }
       `}</style>
       <TriangleAlert aria-hidden="true" color={danger} size={32} />