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

@@ -162,7 +162,7 @@ export const EKKLESIA_UI_STYLESHEET = `
 
 .ek-control {
   background: ${designToken("background.surface")};
-  border: ${designToken("border.width")} solid ${designToken("border.base")};
+  border: ${designToken("border.width")} solid ${designToken("border.control")};
   border-radius: ${designToken("radius.md")};
   box-sizing: border-box;
   color: ${designToken("text.primary")};
@@ -587,7 +587,8 @@ export const EKKLESIA_UI_STYLESHEET = `
 }
 
 .ek-spinner {
-  animation: ek-spin 1s linear infinite;
+  /* Spins at 0.625 of the ambient cycle (1s by default); not at all when motion is reduced. */
+  animation: ek-spin calc(${designToken("motion.duration-ambient")} * 0.625) linear infinite;
   border: ${designToken("state.focus-visible-width")} solid ${designToken("border.base")};
   border-block-start-color: ${designToken("accent.base")};
   border-radius: ${designToken("radius.pill")};
@@ -656,7 +657,7 @@ export const EKKLESIA_UI_STYLESHEET = `
 }
 
 .ek-toast-region .ek-toast {
-  animation: ek-toast-enter 160ms ease-out;
+  animation: ek-toast-enter ${designToken("motion.duration-short")} ease-out;
   pointer-events: auto;
 }
 
@@ -727,8 +728,8 @@ export const EKKLESIA_UI_STYLESHEET = `
 }
 
 .ek-skeleton {
-  animation: ek-skeleton-pulse 1.6s ease-in-out infinite;
-  background: ${designToken("background.inset")};
+  animation: ek-skeleton-pulse ${designToken("motion.duration-ambient")} ease-in-out infinite;
+  background: ${designToken("background.placeholder")};
   border-radius: ${designToken("radius.sm")};
   display: block;
 }
@@ -768,15 +769,9 @@ export const EKKLESIA_UI_STYLESHEET = `
   }
 }
 
-/* Every animation in these elements stops for a person who asked for reduced motion; nothing in
-   them depends on movement to be understood. */
-@media (prefers-reduced-motion: reduce) {
-  .ek-spinner,
-  .ek-skeleton,
-  .ek-toast-region .ek-toast {
-    animation: none;
-  }
-}
+/* Every animation above takes its duration from a motion token, which is zero when motion is
+   reduced — by the system, or by a person's own preference (ADR 0060) — so none of them needs a
+   reduced-motion rule of its own, and nothing here depends on movement to be understood. */
 `;
 
 /** Marks a stylesheet this package installed, so installation is idempotent per root. */