Docs: moodboard-identity glow-up for the home page (draft)

[testtest126]

Summary

The docs/index.html "How MateMate Works" home page (served at testtest126.github.io/chess/) was styling itself with an invented green/buff palette that has nothing to do with the project's actual visual identity. This recolors it to the real MateMate identity from the canonical moodboard (docs/design/moodboard/MOODBOARD.md in the LULL repo, shared reference for both projects):

• Accent: brass #8A6216 (light) / gold #E7BA5C (dark) — never default iOS blue, never an invented hue.
• Surfaces: cream #F6EFE2 / card #FFFDF8 (light); walnut #171109 / card #251C11 (dark).
• Hero: now a deliberately dark, walnut-toned surface in both page themes — same idea as the original "deliberately green in both themes" comment, just recolored to the real identity. Since it's a permanently dark surface, it always pairs with gold (the dark-surface half of the accent), never brass — mirrors how the app itself swaps accent by surface darkness, not just by page theme. Introduced named --hero-* tokens in place of the hardcoded hex the hero rules used before.
• Contrast rule carried over exactly: dark mode's accent-fill label color is #1F1F1F, not white — this is the app's own BrandCTALabelColor rule (white on gold fails WCAG). All new text/background pairs verified ≥4.5:1 (most are 5.5–15:1); decorative dividers stay at the original's low contrast (~1.3:1), unchanged from before — they're non-text visual separators, not functional UI boundaries.
• Removed the --green*/--buff* tokens the old palette left dead in :root — never actually read via var(), since the hero rules hardcoded their own hex instead.
• No copy, stats, layout, or structure changed. Every fact on the page (file counts, wire-message counts, etc.) is untouched — colors only.

Scope

Home page only (docs/index.html), per the task. architecture/ and the-fleet/ each run their own larger multi-skin "theme engine" with a much bigger token set (cultural skins: arabic/indian/andalus/terminal/codex) that doesn't extend cleanly from this page's simple palette — recoloring either risked moving their existing baseline in ways I couldn't fully verify. the-fleet/index.html is also mid-flight in open PR #200 (viewport-meta fix), so I left it untouched entirely to avoid any collision.

Constraints held

• ✅ Fully self-contained: inline CSS only, system font stack (Iowan Old Style/Palatino/Georgia serif + system sans, both already in place, unchanged) — no external fonts/scripts/CDNs/trackers added.
• ✅ prefers-color-scheme kept, with both a deliberate light and a designed warm dark (not a naive invert) — verified both the real media-query path (matchMedia('(prefers-color-scheme: dark)')) and the data-theme attribute override resolve to the same tokens.
• ✅ WCAG AA contrast — computed every new text/background pair; see numbers above. Focus ring (:focus-visible outline uses --accent) is 4.78:1 (light) / 10.33:1 (dark), well past the 3:1 UI-component threshold.
• ✅ Semantic HTML unchanged; focus states unchanged (still :focus-visible{outline:2px solid var(--accent)}, just recolored).
• ✅ Every factual claim (build products, wire-message counts, agent-session scaling, coordination rules) is byte-for-byte unchanged from the source.
• ✅ No added weight: same number of style rules, just different hex values plus a small named-token cleanup.

Verification

Served docs/ locally and captured after-screenshots via a CDP-driven headless Chrome (Emulation.setDeviceMetricsOverride + setEmulatedMedia, full-page capture) — plain --window-size on this Chrome build silently floors narrow widths to 500px, so I drove the DevTools protocol directly instead of trusting the CLI flag for the mobile shot. Confirmed:

• Desktop, light (prefers-color-scheme: light): hero + cards + facts + footer all render in the new brass/cream palette.
• Desktop, dark (prefers-color-scheme: dark, verified via real media-query emulation, not just the manual attribute): full warm walnut/gold treatment, not an inverted light theme.
• Mobile, 390px: single-column cards, wrapped hero heading, 2-column facts grid — the existing @media (max-width:760px) rules unchanged and still correct at this width.

Screenshots saved locally (not attached here — reported as absolute paths to Yakiv directly, since gh CLI has no way to embed local images in a PR body/comment).

🤖 Generated with Claude Code