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/shell-styles.ts

@@ -1,9 +1,9 @@
 import { designToken } from "@ekklesia/design-tokens";
 
 /**
- * The Dashboard shell's own stylesheet (ADR 0058): what inline styles cannot express — hover,
- * `:focus-visible`, a reduced-motion override — for the shell's navigation, account menu, tooltip,
- * and drawer.
+ * The Dashboard shell's own stylesheet (ADR 0058): what inline styles cannot express — hover and
+ * `:focus-visible` — for the shell's navigation, account menu, tooltip, and drawer. Durations are
+ * motion tokens, so reduced motion needs no rule here (ADR 0060).
  *
  * Every value is a design token (ADR 0039), never a literal colour. Every class is `ek-shell-`
  * prefixed, so nothing here can collide with `@ekklesia/ui`'s `ek-` elements, and it is installed
@@ -35,7 +35,7 @@ export const SHELL_STYLESHEET = `
   padding: ${designToken("spacing.md")};
   position: sticky;
   top: 0;
-  transition: width 160ms ease;
+  transition: width ${designToken("motion.duration-short")} ease;
 }
 
 .ek-shell-sidebar__top {
@@ -205,9 +205,5 @@ export const SHELL_STYLESHEET = `
   z-index: 41;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ek-shell-sidebar {
-    transition: none;
-  }
-}
+/* The sidebar's transition lasts a motion token, which is zero when motion is reduced (ADR 0060). */
 `;