Polish: team page title, and accent swatches that match the theme

The accent swatches always previewed the light-mode value, which made the
near-black "Pig" swatch effectively invisible on a dark card — the one place
the preview needed to be accurate. Each accent is tuned twice because a colour
that reads well on white is usually too dark on near-black; the swatch now
shows the value for the theme actually in effect.

Team and the placeholder routes also set document titles, so every route in
the app is now distinguishable in history and in a tab strip.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/web/src/pages/Settings.tsx

@@ -42,7 +42,7 @@ export function Settings() {
 }
 
 function Appearance() {
-  const { mode, accent, setMode, setAccent, accents } = useTheme();
+  const { mode, accent, resolved, setMode, setAccent, accents } = useTheme();
 
   return (
     <Card>
@@ -95,14 +95,20 @@ function Appearance() {
                   ].join(' ')}
                 >
                   {/*
-                    The swatch previews the light-mode value while the app is in
-                    light mode and the dark value in dark mode, because the two
-                    are tuned separately and a single preview would misrepresent
-                    one of them.
+                    The swatch previews the value for the CURRENT theme, because
+                    each accent is tuned twice — a colour that reads well on
+                    white is usually too dark on near-black. Showing the light
+                    value in dark mode made the near-black "Pig" swatch
+                    effectively invisible against a dark card, which is exactly
+                    the misrepresentation this avoids.
                   */}
                   <span
-                    className="h-4 w-4 rounded-full border border-black/10"
-                    style={{ backgroundColor: `hsl(${definition.light.accent})` }}
+                    className="h-4 w-4 rounded-full border border-fg/15"
+                    style={{
+                      backgroundColor: `hsl(${
+                        resolved === 'dark' ? definition.dark.accent : definition.light.accent
+                      })`,
+                    }}
                     aria-hidden
                   />
                   {option.label}