feat(planner): restyle map markers + route on tokens

Bring the map surface on-brand (visual-redesign group 4):

- Waypoint markers: sage accent numbered circles (was blue #2563eb);
  overnight stops keep the warm stop tone; note indicator uses the
  eg-mid gold token.
- Plain route line + ghost (insert) marker: sage accent (was blue).
- Map highlight dot (synced with the chart hover): sage accent (was
  red), so map and chart hovers match.
- Day labels: bg-raised surface + text-hi.
- No-go areas: danger token (#a03c3c) instead of bright red.
- GPX drag-over overlay: accent tokens.

Per-mode route coloring (surface/grade/…) is unchanged (data-viz);
coordinating the elevation-mode gradient with the route line is task 1.5.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/planner/app/components/ColoredRoute.tsx

@@ -210,7 +210,7 @@ export function ColoredRoute({ coordinates, colorMode, surfaces, highways, maxsp
     return (
       <Polyline
         positions={plainPositions}
-        pathOptions={{ color: "#2563eb", weight: 4, opacity: 0.8 }}
+        pathOptions={{ color: "#4a6b40", weight: 4, opacity: 0.85 }}
         interactive={false}
       />
     );

apps/planner/app/components/NoGoAreaLayer.tsx

@@ -12,10 +12,11 @@ interface NoGoAreaLayerProps {
   onToggle: () => void;
 }
 
+// --color-danger (the no-go hue at full strength)
 const NO_GO_STYLE: L.PathOptions = {
-  color: "#ef4444",
-  fillColor: "#ef4444",
-  fillOpacity: 0.2,
+  color: "#a03c3c",
+  fillColor: "#a03c3c",
+  fillOpacity: 0.15,
   weight: 2,
 };
 

apps/planner/app/components/PlannerMap.tsx

@@ -33,10 +33,11 @@ import type { Poi } from "~/lib/pois";
 import "leaflet/dist/leaflet.css";
 
 function waypointIcon(index: number, overnight?: boolean, highlighted?: boolean, hasNote?: boolean): L.DivIcon {
-  const bg = overnight ? "#8B6D3A" : "#2563eb";
+  // token colors: --color-accent / --color-stop (overnight). Note dot: --color-eg-mid.
+  const bg = overnight ? "#8b6d3a" : "#4a6b40";
   const scale = highlighted ? "scale(1.17)" : "scale(1)";
   const noteIndicator = hasNote
-    ? `<span style="position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#f59e0b;border:1.5px solid white;font-size:7px;display:flex;align-items:center;justify-content:center;line-height:1;">✎</span>`
+    ? `<span style="position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#c4a840;border:1.5px solid white;font-size:7px;display:flex;align-items:center;justify-content:center;line-height:1;">✎</span>`
     : "";
   return L.divIcon({
     className: "",
@@ -59,7 +60,7 @@ function dayLabelIcon(dayNumber: number, distanceKm: string): L.DivIcon {
     className: "",
     html: `<div style="position:absolute;left:50%;transform:translate(-50%,-40px);">
       <div style="
-        background:white;color:#1f2937;
+        background:#faf8f4;color:#1a1916;
         padding:1px 6px;border-radius:8px;
         font-size:10px;font-weight:600;white-space:nowrap;
         box-shadow:0 1px 3px rgba(0,0,0,0.15);
@@ -148,8 +149,8 @@ export function PlannerMap({ yjs, sessionId, onRouteRequest, highlightPosition,
       onDrop={handleDrop}
     >
       {draggingOver && (
-        <div className="absolute inset-0 z-[2000] flex items-center justify-center bg-blue-500/20 backdrop-blur-sm">
-          <div className="rounded-xl bg-white px-8 py-6 text-lg font-medium text-blue-600 shadow-lg">
+        <div className="absolute inset-0 z-[2000] flex items-center justify-center bg-accent/15 backdrop-blur-sm">
+          <div className="rounded-xl bg-bg-raised px-8 py-6 text-lg font-medium text-accent shadow-md">
             {t("dropGpxHere")}
           </div>
         </div>
@@ -280,7 +281,7 @@ export function PlannerMap({ yjs, sessionId, onRouteRequest, highlightPosition,
             interactive={false}
             icon={L.divIcon({
               className: "",
-              html: '<div style="width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translate(-6px,-6px)"></div>',
+              html: '<div style="width:12px;height:12px;border-radius:50%;background:#4a6b40;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translate(-6px,-6px)"></div>',
               iconSize: [0, 0],
             })}
           />

apps/planner/app/components/RouteInteraction.tsx

@@ -18,7 +18,7 @@ const ghostIcon = L.divIcon({
   className: "route-ghost-marker",
   html: `<div style="
     width:14px;height:14px;border-radius:50%;
-    background:white;border:3px solid #2563eb;
+    background:white;border:3px solid #4a6b40;
     box-shadow:0 1px 4px rgba(0,0,0,0.3);
     transform:translate(-7px,-7px);
     cursor:grab;