Adopt the DMC house style, and a light theme

[khagele]

The triangulator was its own island: teal accent on a teal-dark ground, Avenir Next throughout, no light theme, and a tricolour stripe in colours that were not the brand's. DutchMeshCore-Branding is the source of truth for the DMC identity and the app had never been held against it.

Closes #139, #140.

1 · Tokens, type, background (65bd110)

Canonical token names from STYLE-GUIDE.md — --text-muted, --text-faint, --surface, --border — with the brand constants and semantic state on top. No bridge aliases: an alias keeps the divergence alive, which is the thing the issue is about.

• Aldrich for headings and the brand, IBM Plex Sans for body, IBM Plex Mono for data, served as woff2 from assets/fonts/ (75KB) and packaged into the image.
• The red/blue glow ground with the grid and scanline overlays the guide layers on it. Panels take the glass fill.
• One --radius (8px) and --radius-lg (16px), replacing eight ad-hoc values between 8 and 24px.
• The brand stripe becomes a full-width band above the navbar, as the guide calls for, instead of a 4px vertical bar beside it in near-flag hexes.

Every chrome literal moved into :root. The only hex left outside it is in a comment.

2 · Light theme (8168d19)

There was none — no data-theme, no prefers-color-scheme, nothing. Light is an override on the same token names, so no rule below :root changed. Pre-paint script in <head> so a light user never sees a flash of dark; color-scheme per root block so native selects and scrollbars follow.

dark | light | system, under the canonical meshcore-theme key so the choice carries across the DMC subdomains, following system as it changes.

This meant tokenising 64 more rgba() literals by role: a hardcoded rgba(5,15,22,.9) field stays dark whatever the theme says.

3 · Map colours (aec4615)

Thirty literals across the MapLibre layers — magenta coverage, lime observers, a blue-green-yellow-orange-red heat rainbow, teal links — several of them fighting for the same meaning. Now one MAP object with three roles:

green	what is known — observers, proven links, support nodes
blue	what is assumed — coverage ranges, the selected region
warm	where the target is — heat ramp, estimate markers

The heat ramp runs --yellow to --red with three interpolations, so hotter reads as one direction instead of a rainbow colliding with the other two roles.

These stay literals rather than reading CSS tokens for two reasons: MapLibre paint takes colour strings, and the basemap is the light OSM raster in both themes, so a theme-flipping colour would be unreadable half the time. They are brand constants, which are theme-identical by definition.

4 · Three fixes found on the way

• 6637a24 — the z-index: 1 content layer put .topbar and .shell on the same level, and at equal z-index the later element wins, so the map strip's buttons cut through the What's new and theme panels. Their own z-index: 20 could not help: it only ranks them inside the topbar's context.
• 0841e60 (Scroll-to-zoom needs a modifier key on desktop, where nothing requires it #140) — cooperativeGestures was global, so every zoom needed cmd. It exists for the stacked layout (On a phone the map traps the scroll, results appear off-screen and the top bar takes three rows #117), where the map sits in the page's scroll path; from 861px up the map is its own sticky column and there is nothing to be trapped in.
• c5cb545 — changelog entries capped at one or two lines, not sentences; two long sentences already render as six lines in that panel.

Result

	before	after
var(--token) uses	90	249
hex outside :root in CSS	46 unique	2 (one in a shadow, one in a comment)
map colours	30 loose literals	one palette, three roles
themes	1	dark, light, system

Verified

Full run at 1200×780 and 375×812 in both themes: discovery, lock, estimate, the map layers painting green/blue/warm as designed, both dropdowns hit-tested as topmost, fields and menus following the theme, fresh loads confirming the gesture mode at each size.

Not verified end-to-end: a window crossing the 861px breakpoint mid-session. Neither resize nor matchMedia change fires under the test harness's viewport emulation — a probe listener confirmed zero events — so that path was verified by calling the sync directly.

I hit the upstream feeds' rate limits twice while testing, which AGENTS.md warns against.

🤖 Generated with Claude Code