feat(theme): Light/Dark/System, reduced motion, and one radius scale

The theme foundation DESIGN.md requires (ADR 0060):

- A design token may carry a `dark` value and a `reduced` value. The
  token stylesheet selects them in CSS alone: dark under
  prefers-color-scheme unless the host chose light, or when it chose
  dark; motion durations zero under prefers-reduced-motion unless it
  allowed motion, or when it chose reduce. `color-scheme` travels with
  the tokens. System is live, an explicit choice wins, and every module
  root follows through custom-property inheritance, with no module
  contract change.
- @ekklesia/design-tokens adds a small appearance API: system/light/dark
  and system/reduce/allow, parsers for untrusted stored values,
  resolvers, and a controller that applies the attributes immediately.
  The shell applies it before React renders. That is the hook the
  account preferences work will feed; nothing is persisted. The
  Dashboard page declares `color-scheme: light dark` so a dark system
  never flashes white. Displays stay light.
- A designed dark theme: teal-tinted charcoal, never pure black or
  white, the same teal accent.
- WCAG AA contrast is tested for 41 element pairings in both schemes.
  Two light pairings failed and are fixed visibly: text.muted darkens,
  and form controls get a new border.control (3:1).
  background.placeholder keeps skeletons visible in dark.
- Motion tokens (duration-short, duration-ambient) replace literal
  durations and every per-element reduced-motion rule. radius.scale
  multiplies sm/md/lg, unchanged at its default of 1.
- The sign-in card and module loading/error text move from literal
  colours to tokens. Guards keep raw colours and literal radii out of
  Dashboard product source and @ekklesia/ui.
- Fixes ConfirmationDialog's phrase input, which used a class that
  does not exist (`ek-input`) and so was unstyled.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

surfaces/shell/src/browser/AuthCard.tsx

@@ -1,3 +1,4 @@
+import { designToken } from "@ekklesia/design-tokens";
 import { type FormEvent, type ReactElement, useEffect, useRef, useState } from "react";
 import { HostAuthError } from "../auth-protocol.js";
 
@@ -5,60 +6,68 @@ import { HostAuthError } from "../auth-protocol.js";
  * The shared visual language of every host-owned auth screen.
  *
  * Exported so the login, recovery, reset, and verification screens are literally the same card
- * rather than four that drift apart. Modules never render any of them.
+ * rather than four that drift apart. Modules never render any of them. Every colour, radius, and
+ * size is a design token (ADR 0039, ADR 0060), so these screens follow the person's light, dark, or
+ * system appearance like the rest of the Dashboard; the action is the platform's primary button.
  */
 export const authStyles = {
   button: {
-    background: "#1c1917",
-    border: "1px solid #1c1917",
-    borderRadius: "0.375rem",
-    color: "#fafaf9",
+    background: designToken("accent.base"),
+    border: `${designToken("border.width")} solid ${designToken("accent.base")}`,
+    borderRadius: designToken("radius.md"),
+    color: designToken("accent.foreground"),
     cursor: "pointer",
     font: "inherit",
-    fontWeight: 600,
-    padding: "0.625rem 0.875rem",
+    fontWeight: designToken("typography.weight-bold"),
+    minHeight: designToken("control.height-md"),
+    padding: `${designToken("spacing.sm")} ${designToken("spacing.lg")}`,
   },
   card: {
-    background: "#ffffff",
-    border: "1px solid #e7e5e4",
-    borderRadius: "0.75rem",
-    boxShadow: "0 12px 32px rgb(28 25 23 / 0.08)",
+    background: designToken("background.raised"),
+    border: `${designToken("border.width")} solid ${designToken("border.base")}`,
+    borderRadius: designToken("radius.lg"),
+    boxShadow: designToken("shadow.md"),
     display: "grid",
-    gap: "1rem",
+    gap: designToken("spacing.lg"),
     maxWidth: "24rem",
-    padding: "1.5rem",
+    padding: designToken("spacing.xl"),
     width: "100%",
   },
-  error: { color: "#9f1239", margin: 0 },
-  field: { display: "grid", gap: "0.375rem" },
-  form: { display: "grid", gap: "1rem" },
-  heading: { fontSize: "1.5rem", margin: 0 },
+  error: { color: designToken("text.danger"), margin: 0 },
+  field: { display: "grid", gap: designToken("spacing.xs") },
+  form: { display: "grid", gap: designToken("spacing.lg") },
+  heading: { fontSize: designToken("typography.size-heading-2"), margin: 0 },
   host: {
     alignItems: "center",
-    background: "#fafaf9",
-    color: "#1c1917",
+    background: designToken("background.page"),
+    color: designToken("text.primary"),
     display: "flex",
-    fontFamily: "system-ui, sans-serif",
+    fontFamily: designToken("typography.family-sans"),
     justifyContent: "center",
     minHeight: "100vh",
-    padding: "1rem",
+    padding: designToken("spacing.lg"),
   },
   input: {
-    border: "1px solid #a8a29e",
-    borderRadius: "0.375rem",
+    background: designToken("background.surface"),
+    border: `${designToken("border.width")} solid ${designToken("border.control")}`,
+    borderRadius: designToken("radius.md"),
+    boxSizing: "border-box",
+    color: designToken("text.primary"),
     font: "inherit",
-    padding: "0.625rem 0.75rem",
+    minHeight: designToken("control.height-md"),
+    padding: `${designToken("spacing.sm")} ${designToken("control.padding-inline")}`,
     width: "100%",
   },
-  introduction: { color: "#57534e", margin: 0 },
-  label: { fontWeight: 600 },
+  introduction: { color: designToken("text.secondary"), margin: 0 },
+  label: { fontWeight: designToken("typography.weight-bold") },
   secondaryAction: {
     background: "transparent",
     border: "none",
-    color: "#1c1917",
+    color: designToken("accent.strong"),
     cursor: "pointer",
     font: "inherit",
     justifySelf: "start",
+    minHeight: designToken("control.height-sm"),
     padding: 0,
     textDecoration: "underline",
   },