fix(web): light theme is not actually light — largest surfaces stay black

[TheMaestr-o]

Problem

In light theme the site still reads as predominantly dark. The design tokens themselves are genuinely light (packages/ui/src/styles/tokens.css:53-68):

[data-theme='light'] {
  --dark: #fcfbf8;
  --bg-section: #f7f5f1;
  --bg-card: #f3f1ec;
}

The problem is that the two largest surfaces on the page are pinned dark in light theme:

1. hero-welcome — full-viewport on the home page, deliberately pinned dark:

/* apps/web/app/globals.css:266-274 */
[data-theme='light'] .hero-welcome {
  --gold: #c9a96e;
  --text: #d6d0c8;
  --muted: #7a7470;
}

plus data-nav-overlay="dark" on apps/web/app/components/HeroWelcome.tsx:9.

2. .site-footer — light theme sets --footer-bg: #0a0908 (tokens.css:68) and re-pins the footer's gold/text/muted to their dark values (tokens.css:73-78). Tall section, present on every page of every app.

3. .post-hero — background: #1a1612 in light theme (globals.css:2554), on post detail pages.

Result: on sdarm.life/de in light theme the first viewport is a full-height black hero and the page ends in a black footer. Proportionally more black than white.

PageHero in @sdarm/ui is not affected — it correctly goes #ffffff in light (packages/ui/src/styles/page-hero.css:235), so the songbook / treasures / events landings are already fine. The problem is specific to apps/web home + post detail, and to the footer everywhere.

Decision required before coding

The hero and footer are pinned dark on purpose — the code comments say so ("hero is deep space", the footer keeps its gold glowing). Changing them is a design call, not a bug fix. Three options:

• (a) True light hero + light footer — biggest change, genuinely light site. Risk: the WebGL globe (PlanetEarth) and the sunset clock were both designed against black.
• (b) Keep the hero dark, make the footer light — the footer has no dark-dependent rendering except the gold accent. This alone flips a large share of every page and is the smaller, safer change. Recommended starting point.
• (c) Keep both dark, brighten everything between them — smallest diff, does not really address the complaint.

Depends on

Blocked by the globals.css split issue. After the split, each section's light-theme rules live in exactly one file and can be changed in one place. Attempting this against the current globals.css means editing the same trailing ═══ LIGHT THEME ═══ block that every other branch touches.

Success criteria

• In light theme, light surfaces dominate the viewport on the home page and on post detail pages.
• Gold accent still passes contrast on whatever background it ends up on.
• Every light-theme screenshot baseline changes — review the diff carefully rather than blanket-accepting, then pnpm test:screenshots:update.
• pnpm test:a11y passes.
• Manual pass at 1280 / 1024 / 768 / 375 px in both themes.

Branch: feat/light-theme-balance