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]>

packages/ui/tests/tokens.test.ts

@@ -91,3 +91,31 @@ describe("the shared elements consume design tokens, never hardcoded theme value
     expect(document.querySelectorAll(`style[${EKKLESIA_UI_STYLE_ATTRIBUTE}]`).length).toBe(0);
   });
 });
+
+describe("the element stylesheet takes every colour, radius, and duration from a token (ADR 0060)", () => {
+  // Comments are dropped: they may mention a value without using it.
+  const css = EKKLESIA_UI_STYLESHEET.replace(/\/\*[\s\S]*?\*\//gu, "");
+
+  it("contains no raw colour", () => {
+    expect(css).not.toMatch(/#[0-9a-f]{3,8}\b/iu);
+    expect(css).not.toMatch(/\b(?:rgba?|hsla?|oklch|lab|lch|hwb)\(/iu);
+    // A named colour is a raw colour too; `transparent` and `currentColor` are not colours.
+    expect(css).not.toMatch(/:\s*(?:white|black|red|green|blue|gray|grey)\s*;/iu);
+  });
+
+  it("rounds corners only with radius tokens", () => {
+    for (const match of css.matchAll(/border-radius:\s*([^;]+);/gu)) {
+      // Each corner is a radius token, or square.
+      for (const corner of (match[1] ?? "").split(/\s+/u)) {
+        expect(corner, match[0]).toMatch(/^(?:var\(--ekklesia-radius-[a-z]+\)|0)$/u);
+      }
+    }
+  });
+
+  it("animates only for motion-token durations", () => {
+    for (const match of css.matchAll(/(?:animation|transition):\s*([^;]+);/gu)) {
+      expect(match[1], match[0]).not.toMatch(/\b\d+(?:\.\d+)?m?s\b/u);
+      expect(match[1], match[0]).toContain("--ekklesia-motion-duration-");
+    }
+  });
+});