feat(ui): migrate the page and section components, add the layout tour

Section, SectionHeader and PublicPageShell move onto wire-* classes with
local style blocks, variants as data attributes. SectionHeader loses 38
utility lines, and Section stops spending one line per variant and colour
pairing: tinted and solid now select on two attributes. PageHeader was already
on the convention and only needed the audit.

examples/basic-app/app/pages/layout.wrn composes the whole set into one page.

Building it surfaced a library-wide bug. Ten custom properties were referenced
by components and defined by nothing: --wire-color-focus, --wire-color-surface-soft,
--wire-color-on-danger, --wire-color-surface-subtle and the input-* family,
plus hover and contrast for every semantic colour except primary and
secondary. An undefined custom property does not warn, it resolves to nothing,
so focus rings drew with no colour and every soft surface rendered
transparent -- 27 components referenced surface-soft alone. They are derived
in the theme now, and a test checks every token a component references against
the rendered theme CSS rather than the source, since most are generated.

The semantic spread also had to move ahead of the primary and secondary
entries so the palette keeps winning for those two.

Known and unresolved: LayoutSplitter emits its sizeChange output and the
component does fire it, but a parent binding on the tag is not invoked. The
tour page therefore points at the handle aria-valuenow rather than wiring a
handler that would never update. Outputs work elsewhere, so this is narrower
than an outputs-are-broken problem and needs its own investigation.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

packages/styles/src/theme.ts

@@ -22,6 +22,7 @@ export type ThemeToken =
   | "color-surface-2"
   | "color-surface-raised"
   | "color-surface-muted"
+  | "color-surface-soft"
   | "color-text"
   | "color-text-muted"
   | "color-text-subtle"
@@ -242,24 +243,37 @@ function semanticColorTokens(
     [`color-${name}-soft`]: colorMix(color, dark ? 16 : 8, dark ? "black" : "white"),
     [`color-${name}-muted`]: colorMix(color, dark ? 28 : 16, dark ? "black" : "white"),
     [`color-${name}-text`]: dark ? colorMix(color, 64, "white") : colorMix(color, 82, "black"),
+    /*
+     * hover and contrast are generated for every semantic colour, not just
+     * primary and secondary. Components referenced --wire-color-danger-hover
+     * and the rest for a long time with nothing defining them, so those states
+     * simply did not paint.
+     *
+     * primary and secondary override these from the palette, which is why
+     * this is spread before their explicit entries rather than after.
+     */
+    [`color-${name}-hover`]: dark ? colorMix(color, 84, "white") : colorMix(color, 88, "black"),
+    [`color-${name}-contrast`]: "#ffffff",
   };
 }
 
 function paletteTokens(palette: CustomThemePalette, scheme: ColorScheme): ThemeTokens {
   return {
+    // Spread first so the palette's own hover and contrast win over the
+    // derived defaults below it.
+    ...semanticColorTokens("primary", palette.primary, scheme),
     "color-primary": palette.primary,
     "color-primary-hover": palette.primaryHover,
     "color-primary-active": palette.primaryHover,
     "color-primary-contrast": palette.primaryContrast,
     "color-on-primary": palette.primaryContrast,
-    ...semanticColorTokens("primary", palette.primary, scheme),
 
+    ...semanticColorTokens("secondary", palette.secondary, scheme),
     "color-secondary": palette.secondary,
     "color-secondary-hover": palette.secondaryHover,
     "color-secondary-active": palette.secondaryHover,
     "color-secondary-contrast": palette.secondaryContrast,
     "color-on-secondary": palette.secondaryContrast,
-    ...semanticColorTokens("secondary", palette.secondary, scheme),
 
     "color-info": palette.info,
     ...semanticColorTokens("info", palette.info, scheme),
@@ -287,6 +301,30 @@ function paletteTokens(palette: CustomThemePalette, scheme: ColorScheme): ThemeT
       scheme === "dark"
         ? colorMix(palette.danger, 64, "white")
         : colorMix(palette.danger, 82, "black"),
+
+    /*
+     * Tokens the components have always referenced but nothing defined.
+     *
+     * An undefined custom property does not warn -- it resolves to nothing --
+     * so every focus ring drew with no colour and every soft surface rendered
+     * transparent. Derived here so they follow the palette and the accent
+     * rather than being pinned per scheme.
+     */
+    // The palette has no danger contrast; danger is saturated in both schemes,
+    // so white is right either way.
+    "color-on-danger": "#ffffff",
+    "color-focus": palette.primary,
+    "color-surface-subtle": colorMix(
+      palette.primary,
+      scheme === "dark" ? 6 : 4,
+      scheme === "dark" ? "black" : "white",
+    ),
+    "color-input-background": scheme === "dark" ? "#0f0f0f" : "#ffffff",
+    "color-input-text": scheme === "dark" ? "#f5f5f5" : "#0b1020",
+    "color-input-placeholder": scheme === "dark" ? "#8a8a8a" : "#737b91",
+    "color-input-border": scheme === "dark" ? "#ffffff26" : "#d7dced",
+    "color-input-border-hover": scheme === "dark" ? "#ffffff38" : "#c7cedd",
+    "color-input-border-focus": palette.primary,
   };
 }
 
@@ -352,6 +390,7 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
     "color-foreground": "#0b1020",
     "color-surface-raised": "#ffffff",
     "color-surface-muted": "#eceff6",
+    "color-surface-soft": "#f1f4f9",
     "color-text-muted": "#5a6178",
     "color-text-subtle": "#737b91",
     "color-border-strong": "#c7cedd",
@@ -384,6 +423,7 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
     "color-foreground": "#f5f5f5",
     "color-surface-raised": "#111111",
     "color-surface-muted": "#181818",
+    "color-surface-soft": "#141414",
     "color-text-muted": "#b3b3b3",
     "color-text-subtle": "#8a8a8a",
     "color-border-strong": "#ffffff38",