MAESTRO: frontend retheme pass 3 — palette-driven canvas sim, PlaylistsPage display type

- BrowsePage preview simulation canvas now reads colors from the theme
  tokens (basalt/walnut ground, bone stroke) instead of hardcoded neutral
  grays; position marker is the live-teal glowing ball instead of stock
  blue, matching the mobile app's live treatment
- font-display (Bricolage Grotesque) on PlaylistsPage headings, playlist
  names, and pattern-name labels, matching BrowsePage

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/BrowsePage.tsx

@@ -466,16 +466,20 @@ export function BrowsePage() {
   const lastDrawnIndexRef = useRef<number>(-1)
   const lastThemeRef = useRef<boolean | null>(null)
 
-  // Get theme colors
+  // Get theme colors from the palette tokens (index.css @theme / .dark)
   const getThemeColors = useCallback(() => {
     const isDark = document.documentElement.classList.contains('dark')
+    const styles = getComputedStyle(document.documentElement)
+    const token = (name: string, fallback: string) =>
+      styles.getPropertyValue(name).trim() || fallback
     return {
       isDark,
-      bgOuter: isDark ? '#1a1a1a' : '#f5f5f5',
-      bgInner: isDark ? '#262626' : '#ffffff',
-      borderColor: isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(128, 128, 128, 0.3)',
-      lineColor: isDark ? '#e5e5e5' : '#333333',
-      markerBorder: isDark ? '#333333' : '#ffffff',
+      bgOuter: token('--color-background', isDark ? '#171310' : '#F5EFE6'),
+      bgInner: token('--color-card', isDark ? '#211C17' : '#FDFAF4'),
+      borderColor: token('--color-border', isDark ? '#352D23' : '#E2D6C2'),
+      lineColor: token('--color-foreground', isDark ? '#F2EAD9' : '#292219'),
+      markerColor: token('--color-live', isDark ? '#7BC4B0' : '#35836F'),
+      markerBorder: token('--color-card', isDark ? '#211C17' : '#FDFAF4'),
     }
   }, [])
 
@@ -580,8 +584,11 @@ export function BrowsePage() {
       const currentPoint = polarToCartesian(coords[upToIndex][0], coords[upToIndex][1], size)
       ctx.beginPath()
       ctx.arc(currentPoint.x, currentPoint.y, 5, 0, Math.PI * 2)
-      ctx.fillStyle = '#0b80ee'
+      ctx.fillStyle = colors.markerColor
+      ctx.shadowColor = colors.markerColor
+      ctx.shadowBlur = 8
       ctx.fill()
+      ctx.shadowBlur = 0
       ctx.strokeStyle = colors.markerBorder
       ctx.lineWidth = 1
       ctx.stroke()

frontend/src/pages/PlaylistsPage.tsx

@@ -556,7 +556,7 @@ export function PlaylistsPage() {
     <div className="flex flex-col w-full max-w-5xl mx-auto gap-4 sm:gap-6 py-3 sm:py-6 px-0 sm:px-4 overflow-hidden" style={{ height: 'calc(100dvh - 14rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))' }}>
       {/* Page Header */}
       <div className="space-y-0.5 sm:space-y-1 shrink-0 pl-1">
-        <h1 className="text-xl font-semibold tracking-tight">Playlists</h1>
+        <h1 className="font-display text-xl font-semibold tracking-tight">Playlists</h1>
         <p className="text-xs text-muted-foreground">
           Create and manage pattern playlists
         </p>
@@ -572,7 +572,7 @@ export function PlaylistsPage() {
         }`}>
           <div className="flex items-center justify-between px-3 py-2.5 border-b shrink-0">
             <div>
-              <h2 className="text-lg font-semibold">My Playlists</h2>
+              <h2 className="font-display text-lg font-semibold">My Playlists</h2>
               <p className="text-sm text-muted-foreground">{playlists.length} playlist{playlists.length !== 1 ? 's' : ''}</p>
             </div>
             {!isPlayOnlyActive && (
@@ -613,7 +613,7 @@ export function PlaylistsPage() {
               >
                 <div className="flex items-center gap-2 min-w-0">
                   <span className="material-icons-outlined text-lg">playlist_play</span>
-                  <span className="truncate text-sm font-medium">{name}</span>
+                  <span className="font-display truncate text-sm font-semibold">{name}</span>
                 </div>
                 {!isPlayOnlyActive && (
                   <div className="flex items-center gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
@@ -670,7 +670,7 @@ export function PlaylistsPage() {
                 <span className="material-icons-outlined">arrow_back</span>
               </Button>
               <div className="min-w-0">
-                <h2 className="text-lg font-semibold truncate">
+                <h2 className="font-display text-lg font-semibold truncate">
                   {selectedPlaylist || 'Select a Playlist'}
                 </h2>
                 {selectedPlaylist && playlistPatterns.length > 0 && (
@@ -747,7 +747,7 @@ export function PlaylistsPage() {
                         </button>
                       )}
                     </div>
-                    <p className="text-[10px] sm:text-xs truncate font-medium w-full text-center">{getPatternName(path)}</p>
+                    <p className="font-display font-bold text-[10px] sm:text-xs truncate w-full text-center">{getPatternName(path)}</p>
                   </div>
                 ))}
               </div>
@@ -1097,7 +1097,7 @@ export function PlaylistsPage() {
                           </div>
                         )}
                       </div>
-                      <p className={`text-xs truncate font-medium w-full text-center ${isSelected ? 'text-primary' : ''}`}>
+                      <p className={`font-display font-bold text-xs truncate w-full text-center ${isSelected ? 'text-primary' : ''}`}>
                         {pattern.name}
                       </p>
                     </div>

static/dist/index.html

@@ -58,8 +58,8 @@
           .catch(function() {});
       })();
     </script>
-    <script type="module" crossorigin src="/assets/index-Dfvjm5gw.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-fbNDffn3.css">
+    <script type="module" crossorigin src="/assets/index-BbPVIrry.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CEWL2r_b.css">
   <script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
   <body>
     <div id="root"></div>