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

tests/theme-guards.test.ts

@@ -0,0 +1,90 @@
+import { readdir, readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Every colour and corner in the Dashboard's own product UI comes from a design token (ADR 0039,
+ * ADR 0060), so Light, Dark, and System — and later a church's theme — reach all of it.
+ *
+ * The scan covers the shell's Dashboard source and `@ekklesia/ui`. It looks for what a design token
+ * would replace: a hex, `rgb()`, or `hsl()` colour, and a literal corner radius. Comments are ignored,
+ * and so is `@ekklesia/design-tokens` itself, which is where those values are meant to live.
+ */
+
+const repositoryRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
+
+const PRODUCT_SOURCE = [
+  path.join("surfaces", "shell", "src", "browser"),
+  path.join("packages", "ui", "src"),
+];
+
+/**
+ * Deliberate, named exceptions. The display host (`surfaces/shell/src/display`) is not scanned at
+ * all: it is pinned to the light scheme and its pairing and offline screens keep their Stage 0 look
+ * until displays move to Settings → Displays.
+ */
+const RAW_COLOUR = /#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?)\(/u;
+const RAW_RADIUS = /\bborder-?[Rr]adius["']?\s*:\s*["'`]?\s*(?!var\(|\$\{)\d/u;
+
+function withoutComments(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//gu, "").replace(/(^|[^:])\/\/.*$/gmu, "$1");
+}
+
+async function files(directory: string): Promise<string[]> {
+  const found: string[] = [];
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const full = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      found.push(...(await files(full)));
+    } else if (/\.tsx?$/u.test(entry.name)) {
+      found.push(full);
+    }
+  }
+  return found;
+}
+
+async function offenders(pattern: RegExp): Promise<string[]> {
+  const found: string[] = [];
+  for (const root of PRODUCT_SOURCE) {
+    for (const file of await files(path.join(repositoryRoot, root))) {
+      withoutComments(await readFile(file, "utf8"))
+        .split("\n")
+        .forEach((line, index) => {
+          if (pattern.test(line)) {
+            found.push(`${path.relative(repositoryRoot, file)}:${index + 1}: ${line.trim()}`);
+          }
+        });
+    }
+  }
+  return found;
+}
+
+describe("the Dashboard's product UI is built from tokens", () => {
+  it("has no raw colour outside the token package", async () => {
+    expect(await offenders(RAW_COLOUR)).toEqual([]);
+  });
+
+  it("has no literal corner radius", async () => {
+    expect(await offenders(RAW_RADIUS)).toEqual([]);
+  });
+
+  it("would notice one", () => {
+    for (const line of [
+      'color: "#9f1239",',
+      "background: rgb(28 25 23 / 0.08);",
+      'borderRadius: "0.375rem",',
+      "border-radius: 4px;",
+    ]) {
+      expect(RAW_COLOUR.test(line) || RAW_RADIUS.test(line), line).toBe(true);
+    }
+    for (const line of [
+      'borderRadius: designToken("radius.md"),',
+      `border-radius: \${designToken("radius.md")};`,
+      'querySelector("#ekklesia-host")',
+      'id="ekklesia-sidebar-navigation"',
+    ]) {
+      expect(RAW_COLOUR.test(line) || RAW_RADIUS.test(line), line).toBe(false);
+    }
+  });
+});