UI/UX: modernize the app's look & feel to a state-of-the-art standard

[DocGerd]

Goal

Raise the overall UI/UX to a modern, state-of-the-art standard. The app is functionally strong (routing, offline, PWA) but the visual layer should feel as considered as the engine: intentional typography, spacing, color system, motion, and polished interaction details across planner panel, map controls, route summary, depth profile, plans list and live view.

Direction

• Process: brainstorm → design exploration → spec addendum → staged implementation PRs. This is NOT a single PR; expect a design pass first.
• Tooling: design work should use the Claude design tooling (the frontend-design skill for aesthetic direction and DesignSync where applicable) rather than ad-hoc styling.
• Build on the existing identity work (feat: DocGerdSoft corporate identity (Datum → Waterline) #34: brand identity, 13.46:1 contrast) — evolve it, don't replace it.

Candidate areas (to be refined in the design pass)

• Cohesive design tokens (type scale, spacing scale, radii, elevation, semantic colors) instead of per-component values.
• Panel/layout modernization: planner panel, settings, route summary hierarchy; mobile-first ergonomics (this is used on a boat, often one-handed, in sunlight — legibility and touch targets matter more than density).
• Map control styling (layer toggles, time slider, zoom) consistent with the identity.
• Micro-interactions: state transitions (planning → result), skeleton/progress states for solver runs, toast/error surfaces.
• Dark mode / sunlight-readable high-contrast mode evaluation.
• Empty states and first-run experience.

Constraints (non-negotiable, from CLAUDE.md/spec)

• Offline-first: no new runtime network dependencies (fonts/icons must be bundled or already pipeline-built).
• All user-facing strings through the de/en i18n dictionaries (key parity enforced).
• The app is a passage-planning aid, not a navigation device — copy must not claim chart authority.
• Accessibility: keep or improve current contrast levels; keyboard/focus states included.
• PWA precache budget: watch bundle/asset growth.

Acceptance

• A user-approved design direction (spec addendum) exists before implementation PRs.
• Each implementation PR passes lint/typecheck/tests/e2e and a real-browser visual pass.