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",
   },

surfaces/shell/src/browser/ModuleUiFrame.tsx

@@ -1,3 +1,4 @@
+import { designToken } from "@ekklesia/design-tokens";
 import { loadModuleUi, type ModuleUiImporter } from "@ekklesia/module-ui-host";
 import type { ModuleUiPrincipal } from "@ekklesia/module-ui-sdk";
 import { type ReactElement, useEffect, useRef, useState } from "react";
@@ -121,12 +122,12 @@ export function ModuleUiFrame(props: ModuleUiFrameProps): ReactElement {
       style={{ display: "grid", gap: "0.75rem", minWidth: 0, width: "100%" }}
     >
       {status === "loading" ? (
-        <p data-testid="module-loading" style={{ color: "#57534e", margin: 0 }}>
+        <p data-testid="module-loading" style={{ color: designToken("text.secondary"), margin: 0 }}>
           Loading module…
         </p>
       ) : undefined}
       {status === "failed" ? (
-        <p data-testid="module-error" style={{ color: "#9f1239", margin: 0 }}>
+        <p data-testid="module-error" style={{ color: designToken("text.danger"), margin: 0 }}>
           This module’s interface could not be loaded. Try another module, or ask an administrator
           to check the installation.
         </p>

surfaces/shell/src/browser/main.tsx

@@ -1,4 +1,7 @@
-import { installEkklesiaDesignTokens } from "@ekklesia/design-tokens";
+import {
+  createEkklesiaThemeController,
+  installEkklesiaDesignTokens,
+} from "@ekklesia/design-tokens";
 import { EkklesiaUiStyles } from "@ekklesia/ui";
 import { createRoot } from "react-dom/client";
 import { consumeAuthLanding } from "../auth-protocol.js";
@@ -65,6 +68,25 @@ if (!container) {
  */
 installEkklesiaDesignTokens(document);
 
+/**
+ * The Dashboard's appearance and motion (ADR 0060), applied to the document root before React
+ * renders anything.
+ *
+ * Both are `system` until a person chooses otherwise: the token stylesheet then follows the
+ * operating system's light/dark and reduced-motion settings live, by CSS alone, into every module
+ * root. This is the one place a remembered choice will be supplied: the account preferences work
+ * reads it synchronously and passes it here, so an explicit Light or Dark is in place before the
+ * first frame. Nothing is stored yet, and there is no second, temporary way to choose.
+ */
+createEkklesiaThemeController({
+  appearance: "system",
+  ...(typeof window.matchMedia === "function"
+    ? { matchMedia: (query: string) => window.matchMedia(query) }
+    : {}),
+  motion: "system",
+  target: document.documentElement,
+});
+
 /**
  * A page whose API origin is not a canonical origin fails closed: it makes no request at all, because
  * every request it would make carries credentials to an address it cannot vouch for. The message is

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). */
 `;

surfaces/shell/src/display/main.tsx

@@ -1,4 +1,8 @@
-import { designToken, installEkklesiaDesignTokens } from "@ekklesia/design-tokens";
+import {
+  createEkklesiaThemeController,
+  designToken,
+  installEkklesiaDesignTokens,
+} from "@ekklesia/design-tokens";
 import { EkklesiaUiStyles } from "@ekklesia/ui";
 import { createRoot } from "react-dom/client";
 import type { EkklesiaHostConfig } from "../host-protocol.js";
@@ -52,6 +56,17 @@ try {
  * module's display artifact then inherits the tokens into its isolated root (ADR 0039). */
 installEkklesiaDesignTokens(document);
 
+/**
+ * A display stays light, whatever its operating system prefers (ADR 0060). A screen in a lobby or
+ * a sanctuary is configured once by whoever set it up, not by a person's appearance preference, and
+ * Stage 0 displays must look exactly as they did. Motion still follows the system.
+ */
+createEkklesiaThemeController({
+  appearance: "light",
+  motion: "system",
+  target: document.documentElement,
+});
+
 createRoot(container).render(
   <>
     <EkklesiaUiStyles />