Theme & Branding Engine

Theming is a thin layer on top of the design tokens shared by www and web. Each CmsSite stores a BrandingConfig containing logo URL, primary_color, accent_color, font_pair_id, sender-name and dark-mode preference. On render, the Next.js layout emits a server-rendered `<style>` tag scoped to `[data-tenant-brand="<site.id>"]` that injects CSS variables — `--tenant-brand-primary`, `--tenant-brand-accent`, foreground variants derived via YIQ luminance for AA contrast, and an auto-derived accent (×1.18 lightness) when the editor leaves accent_color blank.

Pre-built theme templates (modern, classic, sport, minimal) are JSON presets that the wizard applies to BrandingConfig in one click; switching themes never destroys the logo or custom colors, only the structural layout choices. Header and footer are configurable via layout presets (six headers including sticky, centered-logo, transparent-hero; six footers including multi-column, social-focused, hidden) so editors don't write code to change shell. Advanced users can inject scoped custom CSS — validated for brace mismatches and warned about `!important` use, version-tracked, and prefixed with the site selector so it cannot leak into other tenants.

Every site is responsive by default with mobile-first breakpoints, and dark mode flips the variable set via the shared ThemeProvider hook. Federation brand inheritance is opt-in per club site: a child site can declare `inherit_from_parent: true` and pick which fields to override, ensuring national visual identity without locking clubs in. The default theme out of the box is the platform's bottle-green primary, ivory surface, Fraunces display and Inter body, giving full shadcn parity with www.petanque.life.