Implement light/dark mode and accessibility safeguards

[bmurphy-apescic]

Parent issue

Tracks #13.

Summary

Add a visitor-controlled light/dark theme to the shared APES website, with light as the mandatory first-visit and non-JavaScript default, while preserving accessibility and avoiding a flash of the wrong theme.

Scope

• Extend existing CSS custom properties into semantic light/dark tokens.
• Set data-theme="light|dark" on the document root.
• Add a clearly labelled theme control in the shared header.
• Persist only an explicit visitor choice in local browser storage.
• Apply a stored preference before first paint where practical.
• Update relevant browser theme-color, form controls, focus states, illustrations, surfaces, borders, and shadows.
• Add reduced-motion and forced-colours safeguards.

Behaviour requirements

• First visit is light even when the operating system prefers dark.
• A saved explicit dark choice is restored on reload and across site routes.
• Clearing the stored choice returns the website to light.
• The full website remains usable when JavaScript or storage is unavailable.
• Preference storage contains no personal data and is not transmitted.

Non-scope

• User accounts or server-side theme settings.
• Analytics or preference profiling.
• Automatic first-visit adoption of the operating-system colour scheme.
• Deployment.

Acceptance criteria

• Light is the first-visit and no-JavaScript default.
• Explicit light/dark selection persists and restores without a material theme flash.
• All shared components and representative embedded controls remain legible in both themes.
• Text, links, controls, focus indicators, errors, and status colours meet WCAG AA contrast expectations.
• Keyboard, 200% zoom, reduced motion, and forced colours retain full functionality.
• Storage failure falls back safely to light without breaking the page.

Validation

• Fresh-session, saved-dark, saved-light, cleared-storage, blocked-storage, and no-JavaScript tests.
• Desktop, tablet, and mobile browser checks across representative routes and branded errors.
• Contrast, focus, keyboard, zoom, reduced-motion, and forced-colours checks.
• Regression checks for Chatwoot, donation, navigation, footer, forms, and development notice.

Progress updates

Post updates after token implementation, persistence completion, accessibility validation, blockers, and readiness for review. Include Files changed whenever repository files have changed.

[linear-code]

WEBDEV-39