From 8415bb5f37282b6d4cf9e47086f80530664f04f7 Mon Sep 17 00:00:00 2001
From: gramps <gramps@llamachile.shop>
Date: Fri, 30 Oct 2026 08:28:21 -0700
Subject: [PATCH] design: preview pane to tokens (surface 4), and one palette
 list instead of two
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

110 hardcoded colours gone from the preview — the biggest surface in the app. Nicknames:
- the webcam selection ring is the interactive accent (was the retired brand red)
- the mute chips are `attention` (a muted mic is a caution, not a live state) with a white play
  glyph; the live badge is `primary`
- YPP progress bars/track, TRAX level zones, the error line, the dim strips and the poster veil
  all resolve from tokens (`positive`, `secondary-container`, `error-container`, `scrim-dark`,
  `scrim-dark-strong`)

Plus the duplication this sweep exposed: the webcam's right-click "Border Color" submenu carried
**seven hand-written colours**, a second source of truth beside the properties drop-down that
TASK 63 had already unified onto `Models/BorderColorPalette.cs` — and the two lists disagreed
(7 vs 14). The submenu is now built from the palette when it opens, so every offered colour is
the same colour everywhere, with the palette's name beside it. The click handler is unchanged;
generated rows inherit the menu's SceneElement DataContext.

Guard list extended: Controls/PreviewPane.xaml.
---
 Controls/PreviewPane.xaml         | 210 ++++++++++++++----------------
 Controls/PreviewPane.xaml.cs      |  28 ++++
 ytLive.Tests/DesignTokensTests.cs |   3 +-
 3 files changed, 126 insertions(+), 115 deletions(-)

diff --git a/Controls/PreviewPane.xaml b/Controls/PreviewPane.xaml
index 90d0558..51f7934 100644
--- a/Controls/PreviewPane.xaml
+++ b/Controls/PreviewPane.xaml
@@ -3,7 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:Helpers="clr-namespace:ytLive.Helpers"
              xmlns:local="clr-namespace:ytLive">
-    <Border Background="#0a0a1a" CornerRadius="6" Margin="8,0"
+    <Border Background="{StaticResource Brush.SurfaceContainerLowest}" CornerRadius="6" Margin="8,0"
             BorderBrush="{Binding PreviewGlowBrush}" BorderThickness="{Binding PreviewGlowThickness}">
                 <Grid>
                     <Grid.RowDefinitions>
@@ -235,7 +235,7 @@
                                                             <Separator/>
                                                             <MenuItem Header="Border Thickness">
                                                                 <StackPanel Orientation="Horizontal" Margin="8,2">
-                                                                    <TextBlock Text="Thickness" Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                                                                    <TextBlock Text="Thickness" Foreground="{StaticResource Brush.OnSurface}" VerticalAlignment="Center"/>
                                                                     <Slider Width="120" Minimum="0" Maximum="20" Margin="8,0,0,0"
                                                                             Value="{Binding BorderWidth, Mode=TwoWay}"
                                                                             VerticalAlignment="Center"/>
@@ -243,35 +243,17 @@
                                                             </MenuItem>
                                                             <MenuItem Header="Border Opacity">
                                                                 <StackPanel Orientation="Horizontal" Margin="8,2">
-                                                                    <TextBlock Text="Opacity" Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                                                                    <TextBlock Text="Opacity" Foreground="{StaticResource Brush.OnSurface}" VerticalAlignment="Center"/>
                                                                     <Slider Width="120" Minimum="0" Maximum="1" Margin="8,0,0,0"
                                                                             Value="{Binding BorderOpacity, Mode=TwoWay}"
                                                                             VerticalAlignment="Center"/>
                                                                 </StackPanel>
                                                             </MenuItem>
-                                                            <MenuItem Header="Border Color">
-                                                                <MenuItem Header="None" Tag="" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=''}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                                <MenuItem Header="#ffffff" Tag="#ffffff" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#ffffff}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                                <MenuItem Header="#000000" Tag="#000000" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#000000}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                                <MenuItem Header="#e94560" Tag="#e94560" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#e94560}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                                <MenuItem Header="#22c55e" Tag="#22c55e" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#22c55e}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                                <MenuItem Header="#eab308" Tag="#eab308" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#eab308}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                                <MenuItem Header="#38bdf8" Tag="#38bdf8" IsCheckable="True"
-                                                                          IsChecked="{Binding BorderColor, Converter={StaticResource EnumToBool}, ConverterParameter=#38bdf8}"
-                                                                          Click="WebcamMenu_SetBorderColor"/>
-                                                            </MenuItem>
+                                                            <!-- Filled from Models/BorderColorPalette on open — the list used to be
+                                                                 seven hand-written rows here, a second source of truth beside the
+                                                                 properties drop-down (TASK 63). -->
+                                                            <MenuItem x:Name="WebcamBorderColorMenu" Header="Border Color"
+                                                                      SubmenuOpened="WebcamBorderColorMenu_SubmenuOpened"/>
                                                             <MenuItem Header="Border Effect">
                                                                 <MenuItem Header="None" Tag="None" IsCheckable="True"
                                                                           IsChecked="{Binding BorderAnimation, Converter={StaticResource EnumToBool}, ConverterParameter=None}"
@@ -314,12 +296,12 @@
                                     <Grid x:Name="SelectionOverlay" IsHitTestVisible="False"
                                           Canvas.Left="{Binding SelectedElement.X}" Canvas.Top="{Binding SelectedElement.Y}"
                                           Width="{Binding SelectedElement.Width}" Height="{Binding SelectedElement.Height}">
-                                        <Rectangle Stroke="#ff8c3a" StrokeDashArray="4 3" StrokeThickness="5"/>
-                                        <Ellipse Width="26" Height="26" Fill="#ff8c3a" Stroke="White" StrokeThickness="2"
+                                        <Rectangle Stroke="{StaticResource Brush.Attention}" StrokeDashArray="4 3" StrokeThickness="5"/>
+                                        <Ellipse Width="26" Height="26" Fill="{StaticResource Brush.Attention}" Stroke="White" StrokeThickness="2"
                                                  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,-13,-13"/>
                                     </Grid>
 
-                                    <Rectangle IsHitTestVisible="False" Stroke="#e94560" StrokeThickness="3"
+                                    <Rectangle IsHitTestVisible="False" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="3"
                                                Canvas.Left="{Binding OutputRectX}" Canvas.Top="{Binding OutputRectY}"
                                                Width="{Binding OutputRectWidth}" Height="{Binding OutputRectHeight}"
                                                Visibility="{Binding IsOutputCropped, Converter={StaticResource BoolToVis}}"/>
@@ -430,8 +412,8 @@
                                   Canvas.Left="{Binding ZoomState.X}" Canvas.Top="{Binding ZoomState.Y}"
                                   Width="{Binding ZoomState.Width}" Height="{Binding ZoomState.Height}"
                                   Visibility="{Binding IsZoomActive, Converter={StaticResource BoolToVis}}">
-                                <Rectangle x:Name="ZoomRectOutline" Stroke="#d8a72b" StrokeThickness="3" Fill="Transparent"/>
-                                <Ellipse x:Name="ZoomCircleOutline" Stroke="#d8a72b" StrokeThickness="3" Fill="Transparent" Visibility="Collapsed"/>
+                                <Rectangle x:Name="ZoomRectOutline" Stroke="{StaticResource Brush.Secondary}" StrokeThickness="3" Fill="Transparent"/>
+                                <Ellipse x:Name="ZoomCircleOutline" Stroke="{StaticResource Brush.Secondary}" StrokeThickness="3" Fill="Transparent" Visibility="Collapsed"/>
                                 <Grid.Background>
                                     <VisualBrush x:Name="ZoomVisualBrush" ViewboxUnits="Absolute" Stretch="Fill"/>
                                 </Grid.Background>
@@ -439,7 +421,7 @@
                             </Canvas>
                         </Viewbox>
                         <Border HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,8,0,0"
-                                Background="#CCe94560" CornerRadius="4" Padding="8,3" IsHitTestVisible="False"
+                                Background="{StaticResource Brush.Primary}" CornerRadius="4" Padding="8,3" IsHitTestVisible="False"
                                 Visibility="{Binding WebcamError, Converter={StaticResource NotNullToVis}}">
                             <TextBlock Text="{Binding WebcamError}" Foreground="White" FontSize="12"
                                        MaxWidth="520" TextTrimming="CharacterEllipsis"/>
@@ -455,10 +437,10 @@
                                 <TextBlock Text="🖼️" Foreground="White" FontSize="30" Margin="0,0,20,0"/>
                                 <TextBlock Text="✏️" Foreground="White" FontSize="30"/>
                             </StackPanel>
-                            <TextBlock Text="Make it yours!" Foreground="#e0e0e0" FontSize="18"
+                            <TextBlock Text="Make it yours!" Foreground="{StaticResource Brush.OnSurface}" FontSize="18"
                                        FontWeight="SemiBold" HorizontalAlignment="Center" Margin="0,18,0,0"/>
                                     <TextBlock Text="Add layers — your webcam, your screen, images, and text — to craft a brand and identity that's unmistakably you."
-                                       Foreground="#a0a0b0" FontSize="13" Margin="0,8,0,0"
+                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" Margin="0,8,0,0"
                                        TextWrapping="Wrap" MaxWidth="440" TextAlignment="Center"
                                        HorizontalAlignment="Center"/>
                         </StackPanel>
@@ -474,7 +456,7 @@
                         <StackPanel x:Name="TextPullOutHost" Orientation="Horizontal"
                                     HorizontalAlignment="Right" VerticalAlignment="Stretch">
                             <!-- The broadcast-metadata drawer -->
-                            <Border Background="#16213e" ClipToBounds="True">
+                            <Border Background="{StaticResource Brush.SurfaceContainer}" ClipToBounds="True">
                                 <Border.Style>
                                     <Style TargetType="Border">
                                         <Setter Property="Width" Value="0"/>
@@ -527,7 +509,7 @@
                                                     <ContentPresenter/>
                                                 </ControlTemplate>
                                             </Button.Template>
-                                            <TextBlock Text="✕" Foreground="#a0a0b0" FontSize="14" FontWeight="Bold"/>
+                                            <TextBlock Text="✕" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="14" FontWeight="Bold"/>
                                         </Button>
                                     </Grid>
                                     <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
@@ -551,20 +533,20 @@
                                                       IsChecked="{Binding BroadcastForm.MadeForKids}"/>
                                             <TextBlock Text="SCHEDULED START" Style="{StaticResource YtLabel}" Margin="0,0,0,3"/>
                                             <TextBlock Text="{Binding BroadcastForm.ScheduledStartText}"
-                                                       Foreground="#888899" FontSize="12" Margin="0,0,0,4"/>
+                                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" Margin="0,0,0,4"/>
                                         </StackPanel>
                                     </ScrollViewer>
                                     <StackPanel Grid.Row="2" Margin="0,10,0,0">
                                         <Button Style="{StaticResource YtButton}" Content="Update Broadcast"
                                                 Command="{Binding BroadcastForm.UpdateBroadcastCommand}"/>
                                         <TextBlock Text="{Binding BroadcastForm.UpdateError}"
-                                                   Foreground="#ef4444" FontSize="11" TextWrapping="Wrap" Margin="0,6,0,0"
+                                                   Foreground="{StaticResource Brush.Error}" FontSize="11" TextWrapping="Wrap" Margin="0,6,0,0"
                                                    Visibility="{Binding BroadcastForm.UpdateError, Converter={StaticResource NotNullToVis}}"/>
                                     </StackPanel>
                                 </Grid>
                             </Border>
                             <!-- The Socials drawer (same pattern as the other pull-outs) -->
-                            <Border Background="#16213e" ClipToBounds="True">
+                            <Border Background="{StaticResource Brush.SurfaceContainer}" ClipToBounds="True">
                                 <Border.Style>
                                     <Style TargetType="Border">
                                         <Setter Property="Width" Value="0"/>
@@ -614,14 +596,14 @@
                                                     <ContentPresenter/>
                                                 </ControlTemplate>
                                             </Button.Template>
-                                            <TextBlock Text="✕" Foreground="#a0a0b0" FontSize="14" FontWeight="Bold"/>
+                                            <TextBlock Text="✕" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="14" FontWeight="Bold"/>
                                         </Button>
                                     </Grid>
                                     <local:SocialsDialog Grid.Row="1" DataContext="{Binding SocialsDrawer}"/>
                                 </Grid>
                             </Border>
                             <!-- The YPP-progress drawer (below Stream Settings on the rail) -->
-                            <Border Background="#16213e" ClipToBounds="True">
+                            <Border Background="{StaticResource Brush.SurfaceContainer}" ClipToBounds="True">
                                 <Border.Style>
                                     <Style TargetType="Border">
                                         <Setter Property="Width" Value="0"/>
@@ -673,48 +655,48 @@
                                                     <ContentPresenter/>
                                                 </ControlTemplate>
                                             </Button.Template>
-                                            <TextBlock Text="✕" Foreground="#a0a0b0" FontSize="14" FontWeight="Bold"/>
+                                            <TextBlock Text="✕" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="14" FontWeight="Bold"/>
                                         </Button>
                                     </Grid>
                                     <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                                         <StackPanel>
                                             <TextBlock Text="Sign in to YouTube to see your Partner Program progress and eligibility checklist here."
-                                                       Foreground="#d0d0e0" FontSize="13" TextWrapping="Wrap"
+                                                       Foreground="{StaticResource Brush.OnSurface}" FontSize="13" TextWrapping="Wrap"
                                                        Visibility="{Binding Ypp.IsSignedOut, Converter={StaticResource BoolToVis}}"/>
-                                            <TextBlock Text="Refreshing from YouTube…" Foreground="#a0a0b0" FontSize="12"
+                                            <TextBlock Text="Refreshing from YouTube…" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                                                        Margin="0,0,0,4"
                                                        Visibility="{Binding Ypp.IsLoading, Converter={StaticResource BoolToVis}}"/>
-                                            <TextBlock Text="{Binding Ypp.LoadError}" Foreground="#ef4444" FontSize="11"
+                                            <TextBlock Text="{Binding Ypp.LoadError}" Foreground="{StaticResource Brush.Error}" FontSize="11"
                                                        TextWrapping="Wrap" Margin="0,0,0,4"
                                                        Visibility="{Binding Ypp.LoadError, Converter={StaticResource NotNullToVis}}"/>
                                             <StackPanel Visibility="{Binding Ypp.IsSignedOut, Converter={StaticResource InverseBoolToVis}}">
-                                                <TextBlock Text="{Binding Ypp.DisplayName}" Foreground="#e0e0e0" FontSize="13"
+                                                <TextBlock Text="{Binding Ypp.DisplayName}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"
                                                            FontWeight="SemiBold" Margin="0,0,0,10"/>
                                                 <TextBlock Text="SUBSCRIBERS — TIER 1 · FAN FUNDING" Style="{StaticResource YtLabel}" Margin="0,0,0,2"/>
-                                                <TextBlock Text="{Binding Ypp.Tier1SubsText}" Foreground="#e0e0e0" FontSize="13"/>
-                                                <Border Height="8" Background="#2a2a40" CornerRadius="4" Margin="0,4,0,10">
-                                                    <Border Height="8" Background="#e94560" CornerRadius="4" HorizontalAlignment="Left"
+                                                <TextBlock Text="{Binding Ypp.Tier1SubsText}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"/>
+                                                <Border Height="8" Background="{StaticResource Brush.SurfaceContainerHigh}" CornerRadius="4" Margin="0,4,0,10">
+                                                    <Border Height="8" Background="{StaticResource Brush.Tertiary}" CornerRadius="4" HorizontalAlignment="Left"
                                                             Width="{Binding Ypp.Tier1SubsBarWidth}"/>
                                                 </Border>
                                                 <TextBlock Text="SUBSCRIBERS — TIER 2 · AD REVENUE" Style="{StaticResource YtLabel}" Margin="0,0,0,2"/>
-                                                <TextBlock Text="{Binding Ypp.Tier2SubsText}" Foreground="#e0e0e0" FontSize="13"/>
-                                                <Border Height="8" Background="#2a2a40" CornerRadius="4" Margin="0,4,0,10">
-                                                    <Border Height="8" Background="#e94560" CornerRadius="4" HorizontalAlignment="Left"
+                                                <TextBlock Text="{Binding Ypp.Tier2SubsText}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"/>
+                                                <Border Height="8" Background="{StaticResource Brush.SurfaceContainerHigh}" CornerRadius="4" Margin="0,4,0,10">
+                                                    <Border Height="8" Background="{StaticResource Brush.Tertiary}" CornerRadius="4" HorizontalAlignment="Left"
                                                             Width="{Binding Ypp.Tier2SubsBarWidth}"/>
                                                 </Border>
                                                 <TextBlock Text="PUBLIC UPLOADS (90 DAYS)" Style="{StaticResource YtLabel}" Margin="0,0,0,2"/>
-                                                <TextBlock Text="{Binding Ypp.UploadsText}" Foreground="#e0e0e0" FontSize="13"/>
-                                                <Border Height="8" Background="#2a2a40" CornerRadius="4" Margin="0,4,0,6">
-                                                    <Border Height="8" Background="#e94560" CornerRadius="4" HorizontalAlignment="Left"
+                                                <TextBlock Text="{Binding Ypp.UploadsText}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"/>
+                                                <Border Height="8" Background="{StaticResource Brush.SurfaceContainerHigh}" CornerRadius="4" Margin="0,4,0,6">
+                                                    <Border Height="8" Background="{StaticResource Brush.Tertiary}" CornerRadius="4" HorizontalAlignment="Left"
                                                             Width="{Binding Ypp.UploadsBarWidth}"/>
                                                 </Border>
                                                 <TextBlock Text="LONG-FORM WATCH HOURS + SHORTS VIEWS" Style="{StaticResource YtLabel}" Margin="0,10,0,2"/>
                                                 <TextBlock Text="These arrive with the extended analytics update — subscriber + upload + standing progress is live now."
-                                                           Foreground="#666677" FontSize="12" TextWrapping="Wrap"/>
+                                                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" TextWrapping="Wrap"/>
 
                                                 <TextBlock Text="COMPLIANCE CHECKLIST" Style="{StaticResource YtLabel}" Margin="0,14,0,4"/>
                                                 <TextBlock Text="CHANNEL STANDING" Style="{StaticResource YtLabel}" Margin="0,0,0,2"/>
-                                                <TextBlock Text="{Binding Ypp.StandingDetailText}" Foreground="#888899" FontSize="11"
+                                                <TextBlock Text="{Binding Ypp.StandingDetailText}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                            TextWrapping="Wrap" Margin="0,0,0,8"/>
                                                 <CheckBox Content="Two-Step Verification switched on" Style="{StaticResource YtCheckBox}"
                                                           FontSize="12" Margin="0,2,0,0"
@@ -726,7 +708,7 @@
                                                             <ContentPresenter/>
                                                         </ControlTemplate>
                                                     </Button.Template>
-                                                    <TextBlock Text="Set up on Google →" Foreground="#5aa7ff" FontSize="12" Margin="0,0,0,6"/>
+                                                    <TextBlock Text="Set up on Google →" Foreground="{StaticResource Brush.Tertiary}" FontSize="12" Margin="0,0,0,6"/>
                                                 </Button>
                                                 <CheckBox Content="AdSense account linked" Style="{StaticResource YtCheckBox}"
                                                           FontSize="12" Margin="0,2,0,0"
@@ -738,11 +720,11 @@
                                                             <ContentPresenter/>
                                                         </ControlTemplate>
                                                     </Button.Template>
-                                                    <TextBlock Text="How to link on YouTube →" Foreground="#5aa7ff" FontSize="12" Margin="0,0,0,6"/>
+                                                    <TextBlock Text="How to link on YouTube →" Foreground="{StaticResource Brush.Tertiary}" FontSize="12" Margin="0,0,0,6"/>
                                                 </Button>
 
                                                 <TextBlock Text="WHAT COUNTS" Style="{StaticResource YtLabel}" Margin="0,10,0,4"/>
-                                                <TextBlock Text="{Binding Ypp.WhatCountsText}" Foreground="#a0a0b0" FontSize="12"
+                                                <TextBlock Text="{Binding Ypp.WhatCountsText}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                                                            TextWrapping="Wrap" Margin="0,0,0,6"/>
                                             </StackPanel>
                                         </StackPanel>
@@ -750,12 +732,12 @@
                                     <StackPanel Grid.Row="2" Margin="0,10,0,0">
                                         <Button Style="{StaticResource YtButton}" Content="Refresh from YouTube"
                                                 Command="{Binding Ypp.RefreshCommand}"/>
-                                        <TextBlock Text="{Binding Ypp.LastUpdatedText}" Foreground="#888899" FontSize="11" Margin="0,6,0,0"/>
+                                        <TextBlock Text="{Binding Ypp.LastUpdatedText}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="0,6,0,0"/>
                                     </StackPanel>
                                 </Grid>
                             </Border>
                             <!-- The Test-stream drawer (below YPP on the rail) -->
-                            <Border Background="#16213e" ClipToBounds="True">
+                            <Border Background="{StaticResource Brush.SurfaceContainer}" ClipToBounds="True">
                                 <Border.Style>
                                     <Style TargetType="Border">
                                         <Setter Property="Width" Value="0"/>
@@ -807,20 +789,20 @@
                                                     <ContentPresenter/>
                                                 </ControlTemplate>
                                             </Button.Template>
-                                            <TextBlock Text="✕" Foreground="#a0a0b0" FontSize="14" FontWeight="Bold"/>
+                                            <TextBlock Text="✕" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="14" FontWeight="Bold"/>
                                         </Button>
                                     </Grid>
                                     <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                                         <StackPanel>
                                             <TextBlock Text="{Binding TestSession.SessionCaption}"
-                                                       Foreground="#d0d0e0" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,8"/>
+                                                       Foreground="{StaticResource Brush.OnSurface}" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,8"/>
                                             <TextBlock Text="{Binding TestSession.ChatIdLine}"
-                                                       Foreground="#888899" FontSize="11"
+                                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                        Visibility="{Binding TestSession.IsTestSession, Converter={StaticResource BoolToVis}}"/>
 
                                             <TextBlock Text="MOCK CHAT INPUT" Style="{StaticResource YtLabel}" Margin="0,10,0,3"/>
                                             <TextBlock Text="Sends a real live chat message — it round-trips through the actual chat poll and renders on your chat overlay."
-                                                       Foreground="#a0a0b0" FontSize="11" TextWrapping="Wrap" Margin="0,0,0,4"/>
+                                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" TextWrapping="Wrap" Margin="0,0,0,4"/>
                                             <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,6"
                                                      Text="{Binding TestSession.SendMessageText, UpdateSourceTrigger=PropertyChanged}"/>
                                             <Button Style="{StaticResource YtButton}" Content="Send Message"
@@ -828,7 +810,7 @@
 
                                             <TextBlock Text="SIMULATED EVENTS" Style="{StaticResource YtLabel}" Margin="0,14,0,3"/>
                                             <TextBlock Text="Fired into your chat overlay locally — YouTube's insert API only creates text, so these never reach YouTube."
-                                                       Foreground="#a0a0b0" FontSize="11" TextWrapping="Wrap" Margin="0,0,0,4"/>
+                                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" TextWrapping="Wrap" Margin="0,0,0,4"/>
                                             <StackPanel Orientation="Horizontal" Margin="0,0,0,4">
                                                 <Button Style="{StaticResource YtButtonSecondary}" Content="Subscriber" Padding="10,4" FontSize="11"
                                                         Margin="0,0,6,0" Command="{Binding TestSession.SimulateSubscriberCommand}"/>
@@ -839,7 +821,7 @@
                                                     HorizontalAlignment="Left" Command="{Binding TestSession.SimulateSuperChatCommand}"/>
 
                                             <TextBlock Text="{Binding TestSession.LastEventText}"
-                                                       Foreground="#22c55e" FontSize="11" TextWrapping="Wrap" Margin="0,10,0,0"
+                                                       Foreground="{StaticResource Brush.Positive}" FontSize="11" TextWrapping="Wrap" Margin="0,10,0,0"
                                                        Visibility="{Binding TestSession.LastEventText, Converter={StaticResource NotNullToVis}}"/>
                                         </StackPanel>
                                     </ScrollViewer>
@@ -848,13 +830,13 @@
                                                 Command="{Binding TestSession.EndTestCommand}"
                                                 Visibility="{Binding TestSession.IsTestSession, Converter={StaticResource BoolToVis}}"/>
                                         <TextBlock Text="Test broadcasts are private — nobody is notified, and it runs through the exact same pipeline as a real live."
-                                                   Foreground="#666677" FontSize="11" TextWrapping="Wrap" Margin="0,6,0,0"/>
+                                                   Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" TextWrapping="Wrap" Margin="0,6,0,0"/>
                                     </StackPanel>
                                 </Grid>
                             </Border>
                             <!-- The stacked white tabs -->
                             <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Stretch">
-                                <Border Width="30" VerticalAlignment="Center" Background="#ff5451"
+                                <Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Attention}"
                                         CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand" Margin="0,4,0,0"
                                         ToolTip="Broadcast text fields">
                                     <Border.InputBindings>
@@ -864,7 +846,7 @@
                                     <StackPanel HorizontalAlignment="Center">
                                     <Border Width="18" Height="13" CornerRadius="3" Background="White" HorizontalAlignment="Center" Margin="0,0,0,6">
                                         <Border.LayoutTransform><RotateTransform Angle="90"/></Border.LayoutTransform>
-                                        <Path Data="M0,0 L6,3.5 L0,7 Z" Fill="#ff0000" Width="6" Height="7"
+                                        <Path Data="M0,0 L6,3.5 L0,7 Z" Fill="{StaticResource Brush.Primary}" Width="6" Height="7"
                                               HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                     </Border>
                                     <TextBlock Text="Stream Info" Foreground="White" FontWeight="Bold" FontSize="15"
@@ -875,7 +857,7 @@
                                     </TextBlock>
                                 </StackPanel>
                                 </Border>
-                                <Border Width="30" VerticalAlignment="Center" Background="#ff5451"
+                                <Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Attention}"
                                         CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand" Margin="0,4,0,0"
                                         ToolTip="YouTube Partner Program progress">
                                     <Border.InputBindings>
@@ -885,7 +867,7 @@
                                     <StackPanel HorizontalAlignment="Center">
                                     <Border Width="18" Height="13" CornerRadius="3" Background="White" HorizontalAlignment="Center" Margin="0,0,0,6">
                                         <Border.LayoutTransform><RotateTransform Angle="90"/></Border.LayoutTransform>
-                                        <Path Data="M0,0 L6,3.5 L0,7 Z" Fill="#ff0000" Width="6" Height="7"
+                                        <Path Data="M0,0 L6,3.5 L0,7 Z" Fill="{StaticResource Brush.Primary}" Width="6" Height="7"
                                               HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                     </Border>
                                     <TextBlock Text="YPP" Foreground="White" FontWeight="Bold" FontSize="15"
@@ -896,7 +878,7 @@
                                     </TextBlock>
                                 </StackPanel>
                                 </Border>
-                                <Border Width="30" VerticalAlignment="Center" Background="#3b82f6"
+                                <Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Tertiary}"
                                         CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand" Margin="0,4,0,0"
                                         ToolTip="Add or manage your social handles">
                                     <Border.InputBindings>
@@ -904,10 +886,10 @@
                                     </Border.InputBindings>
                                     <StackPanel HorizontalAlignment="Center">
                                     <Path Data="M4,4 m-2,0 a2,2 0 1 0 4,0 a2,2 0 1 0 -4,0 M16,8 m-2,0 a2,2 0 1 0 4,0 a2,2 0 1 0 -4,0 M4,14 m-2,0 a2,2 0 1 0 4,0 a2,2 0 1 0 -4,0 M5.8,5.2 L14.2,7.2 M5.8,12.8 L14.2,8.8"
-                                      Stroke="#0b1326" StrokeThickness="1.5" Width="18" Height="18" Stretch="Uniform"
+                                      Stroke="{StaticResource Brush.Background}" StrokeThickness="1.5" Width="18" Height="18" Stretch="Uniform"
                                       HorizontalAlignment="Center" Margin="0,0,0,6">
                                         <Path.LayoutTransform><RotateTransform Angle="90"/></Path.LayoutTransform></Path>
-                                    <TextBlock Text="Socials" Foreground="#0b1326" FontWeight="Bold" FontSize="15"
+                                    <TextBlock Text="Socials" Foreground="{StaticResource Brush.Background}" FontWeight="Bold" FontSize="15"
                                                HorizontalAlignment="Center">
                                         <TextBlock.LayoutTransform>
                                             <RotateTransform Angle="90"/>
@@ -915,7 +897,7 @@
                                     </TextBlock>
                                 </StackPanel>
                                 </Border>
-                                <Border Width="30" VerticalAlignment="Center" Background="#ff8c3a"
+                                <Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Attention}"
                                         CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand" Margin="0,4,0,0"
                                         ToolTip="Test stream — mock chat input and simulated events">
                                     <Border.InputBindings>
@@ -924,10 +906,10 @@
                                     </Border.InputBindings>
                                     <StackPanel HorizontalAlignment="Center">
                                     <Path Data="M8,2 H16 M9,2 V8 L4,18 H20 L15,8 V2 M7,14 H17"
-                                      Stroke="#0b1326" StrokeThickness="1.5" Width="18" Height="18" Stretch="Uniform"
+                                      Stroke="{StaticResource Brush.Background}" StrokeThickness="1.5" Width="18" Height="18" Stretch="Uniform"
                                       HorizontalAlignment="Center" Margin="0,0,0,6">
                                         <Path.LayoutTransform><RotateTransform Angle="90"/></Path.LayoutTransform></Path>
-                                    <TextBlock Text="TEST" Foreground="#0b1326" FontWeight="Bold" FontSize="15"
+                                    <TextBlock Text="TEST" Foreground="{StaticResource Brush.Background}" FontWeight="Bold" FontSize="15"
                                                HorizontalAlignment="Center">
                                         <TextBlock.LayoutTransform>
                                             <RotateTransform Angle="90"/>
@@ -947,7 +929,7 @@
                         <!-- Line 1: Socials + TRAX -->
                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,4">
                             <!-- TRAX meter -->
-                            <Border Background="#D9000000" CornerRadius="6" Padding="12,8">
+                            <Border Background="{StaticResource Brush.ScrimDarkStrong}" CornerRadius="6" Padding="12,8">
                                 <StackPanel Orientation="Horizontal">
                                     <Button Style="{StaticResource YtButtonSecondary}" Padding="8,2"
                                             FontSize="11" VerticalAlignment="Center" Margin="0,0,8,0"
@@ -961,34 +943,34 @@
                                             <TextBlock Text="TRAX"/>
                                         </StackPanel>
                                     </Button>
-                                    <TextBlock Text="Desktop Audio" Foreground="#a0a0b0" FontSize="11"
+                                    <TextBlock Text="Desktop Audio" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                FontWeight="SemiBold" VerticalAlignment="Center" Margin="0,0,8,0"
                                                ToolTip="Desktop/game audio via WASAPI loopback (automatic); TRAX music rides the same channel"/>
-                                    <Border Width="288" Height="14" CornerRadius="7" Background="#3a3b52" Margin="0,0,8,0"
+                                    <Border Width="288" Height="14" CornerRadius="7" Background="{StaticResource Brush.SurfaceContainerHighest}" Margin="0,0,8,0"
                                             ClipToBounds="True" VerticalAlignment="Center">
                                         <Grid>
-                                            <Rectangle Width="57" Fill="#4a4520" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                            <Rectangle Width="57" Fill="{StaticResource Brush.SecondaryContainer}" HorizontalAlignment="Left" Margin="173,0,0,0"
                                                        VerticalAlignment="Stretch"/>
-                                            <Rectangle Width="58" Fill="#4a2222" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                            <Rectangle Width="58" Fill="{StaticResource Brush.ErrorContainer}" HorizontalAlignment="Left" Margin="230,0,0,0"
                                                        VerticalAlignment="Stretch"/>
                                             <Border HorizontalAlignment="Left" Width="{Binding GameMeterFillWidth}"
                                                     Background="{Binding GameMeterBrush}" Opacity="0.75"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="36,0,0,0"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="72,0,0,0"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="108,0,0,0"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="144,0,0,0"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="180,0,0,0"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="216,0,0,0"/>
-                                            <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="252,0,0,0"/>
-                                            <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="36,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="72,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="108,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="144,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="180,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="216,0,0,0"/>
+                                            <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="252,0,0,0"/>
+                                            <Rectangle Width="2" Fill="{StaticResource Brush.ScrimDarkStrong}" HorizontalAlignment="Left" Margin="173,0,0,0"
                                                        VerticalAlignment="Stretch"/>
-                                            <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                            <Rectangle Width="2" Fill="{StaticResource Brush.ScrimDarkStrong}" HorizontalAlignment="Left" Margin="230,0,0,0"
                                                        VerticalAlignment="Stretch"/>
                                             <!-- TRAX error: a terse message that scrolls across the bar
                                                  (marquee) while the TRAX dot is red. -->
                                             <Canvas x:Name="TraxErrorMarquee" ClipToBounds="True"
                                                     Visibility="{Binding TraxError, Converter={StaticResource NotNullToVis}}">
-                                                <TextBlock x:Name="TraxErrorText" Text="{Binding TraxError}" Foreground="#ff6b81" FontSize="10"
+                                                <TextBlock x:Name="TraxErrorText" Text="{Binding TraxError}" Foreground="{StaticResource Brush.Error}" FontSize="10"
                                                            FontWeight="SemiBold" Canvas.Top="0">
                                                     <TextBlock.RenderTransform>
                                                         <TranslateTransform x:Name="TraxErrorScroll"/>
@@ -1011,13 +993,13 @@
                                     <Grid Width="16" Height="16" Cursor="Hand" Margin="0,0,8,0"
                                           VerticalAlignment="Center" ToolTip="{Binding GameMuteText}"
                                           MouseLeftButtonUp="GameSpeaker_MouseLeftButtonUp">
-                                        <Path Fill="#d0d0d0" Stretch="Uniform"
+                                        <Path Fill="{StaticResource Brush.OnSurface}" Stretch="Uniform"
                                               Data="M3,9v6h4l5,5V4L7,9H3zM16.5,12c0,-1.77 -1,-3.29 -2.5,-4.03v8.05c1.5,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"
                                               Visibility="{Binding GameMuted, Converter={StaticResource InverseBoolToVis}}"/>
-                                        <Path Fill="#ef4444" Stretch="Uniform"
+                                        <Path Fill="{StaticResource Brush.Error}" Stretch="Uniform"
                                               Data="M3,9v6h4l5,5V4L7,9H3zM16.5,12c0,-1.77 -1,-3.29 -2.5,-4.03v8.05c1.5,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"
                                               Visibility="{Binding GameMuted, Converter={StaticResource BoolToVis}}"/>
-                                        <Path Stroke="#ef4444" StrokeThickness="2.5" StrokeEndLineCap="Round" Stretch="Uniform"
+                                        <Path Stroke="{StaticResource Brush.Error}" StrokeThickness="2.5" StrokeEndLineCap="Round" Stretch="Uniform"
                                               Data="M21,3 L3,21"
                                               Visibility="{Binding GameMuted, Converter={StaticResource BoolToVis}}"/>
                                     </Grid>
@@ -1041,42 +1023,42 @@
                                     <TextBlock Text="MIC"/>
                                 </StackPanel>
                             </Button>
-                            <Border Width="288" Height="14" CornerRadius="7" Background="#3a3b52" Margin="0,0,8,0"
+                            <Border Width="288" Height="14" CornerRadius="7" Background="{StaticResource Brush.SurfaceContainerHighest}" Margin="0,0,8,0"
                                     ClipToBounds="True" VerticalAlignment="Center">
                                 <Grid>
-                                    <Rectangle Width="57" Fill="#4a4520" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                    <Rectangle Width="57" Fill="{StaticResource Brush.SecondaryContainer}" HorizontalAlignment="Left" Margin="173,0,0,0"
                                                VerticalAlignment="Stretch"/>
-                                    <Rectangle Width="58" Fill="#4a2222" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                    <Rectangle Width="58" Fill="{StaticResource Brush.ErrorContainer}" HorizontalAlignment="Left" Margin="230,0,0,0"
                                                VerticalAlignment="Stretch"/>
-                                    <TextBlock Text="{Binding MicSourceName}" Foreground="#b8b8c8" FontSize="10"
+                                    <TextBlock Text="{Binding MicSourceName}" Foreground="{StaticResource Brush.OnSurface}" FontSize="10"
                                                VerticalAlignment="Center" Margin="6,0,0,0" MaxWidth="270"
                                                TextTrimming="CharacterEllipsis"
                                                Visibility="{Binding MicSourceName, Converter={StaticResource NotNullToVis}}"/>
                                     <Border HorizontalAlignment="Left" Width="{Binding MeterFillWidth}"
                                             Background="{Binding MeterBrush}" Opacity="0.75"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="36,0,0,0"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="72,0,0,0"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="108,0,0,0"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="144,0,0,0"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="180,0,0,0"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="216,0,0,0"/>
-                                    <Rectangle Width="1" Height="10" Fill="#26000000" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="252,0,0,0"/>
-                                    <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="173,0,0,0"
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="36,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="72,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="108,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="144,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="180,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="216,0,0,0"/>
+                                    <Rectangle Width="1" Height="10" Fill="{StaticResource Brush.ScrimDark}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="252,0,0,0"/>
+                                    <Rectangle Width="2" Fill="{StaticResource Brush.ScrimDarkStrong}" HorizontalAlignment="Left" Margin="173,0,0,0"
                                                VerticalAlignment="Stretch"/>
-                                    <Rectangle Width="2" Fill="#00000080" HorizontalAlignment="Left" Margin="230,0,0,0"
+                                    <Rectangle Width="2" Fill="{StaticResource Brush.ScrimDarkStrong}" HorizontalAlignment="Left" Margin="230,0,0,0"
                                                VerticalAlignment="Stretch"/>
                                 </Grid>
                             </Border>
                             <Grid Width="16" Height="16" Cursor="Hand" Margin="0,0,8,0"
                                   VerticalAlignment="Center" ToolTip="{Binding MicMuteText}"
                                   MouseLeftButtonUp="MicSpeaker_MouseLeftButtonUp">
-                                <Path Fill="#d0d0d0" Stretch="Uniform"
+                                <Path Fill="{StaticResource Brush.OnSurface}" Stretch="Uniform"
                                       Data="M12,14c1.66,0 3,-1.34 3,-3V5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6C9,12.66 10.34,14 12,14zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11H5c0,3.41 2.72,6.23 6,6.72V21h2v-3.28c3.28,-0.49 6,-3.31 6,-6.72H17.3z"
                                       Visibility="{Binding MicMuted, Converter={StaticResource InverseBoolToVis}}"/>
-                                <Path Fill="#ef4444" Stretch="Uniform"
+                                <Path Fill="{StaticResource Brush.Error}" Stretch="Uniform"
                                       Data="M12,14c1.66,0 3,-1.34 3,-3V5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6C9,12.66 10.34,14 12,14zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11H5c0,3.41 2.72,6.23 6,6.72V21h2v-3.28c3.28,-0.49 6,-3.31 6,-6.72H17.3z"
                                       Visibility="{Binding MicMuted, Converter={StaticResource BoolToVis}}"/>
-                                <Path Stroke="#ef4444" StrokeThickness="2.5" StrokeEndLineCap="Round" Stretch="Uniform"
+                                <Path Stroke="{StaticResource Brush.Error}" StrokeThickness="2.5" StrokeEndLineCap="Round" Stretch="Uniform"
                                       Data="M21,3 L3,21"
                                       Visibility="{Binding MicMuted, Converter={StaticResource BoolToVis}}"/>
                             </Grid>
@@ -1087,7 +1069,7 @@
                                     LostMouseCapture="VolumeSlider_LostMouseCapture"/>
                             <StackPanel Orientation="Horizontal" Margin="10,0,0,0" VerticalAlignment="Center"
                                         ToolTip="Audio sync (−500..+500 ms). Positive: delays the audio when it runs ahead of the video. Negative: advances it (drops the first |N| ms of the recording) when it runs behind. Calibrate with a clap: is the clap late in the video, move negative; early, move positive.">
-                                <TextBlock Text="AUDIO SYNC" FontSize="9" Foreground="#9898aa"
+                                <TextBlock Text="AUDIO SYNC" FontSize="9" Foreground="{StaticResource Brush.OnSurfaceVariant}"
                                            VerticalAlignment="Center" Margin="0,0,5,0"/>
                                 <Slider Width="70" Minimum="-500" Maximum="500"
                                         Value="{Binding AudioSyncOffsetMs, Mode=TwoWay}"
diff --git a/Controls/PreviewPane.xaml.cs b/Controls/PreviewPane.xaml.cs
index ddc59fc..cc6b652 100644
--- a/Controls/PreviewPane.xaml.cs
+++ b/Controls/PreviewPane.xaml.cs
@@ -365,6 +365,34 @@ public partial class PreviewPane : UserControl
         sb.Children.Add(anim);
     }
 
+    /// <summary>The border-colour submenu is BUILT from the palette on open: the list of
+    /// offered colours lives once, in <see cref="BorderColorPalette"/> (TASK 63's rule —
+    /// a picker never carries its own copy). The generated rows inherit this menu's
+    /// DataContext (the <see cref="SceneElement"/>), so the click handler is unchanged.</summary>
+    private void WebcamBorderColorMenu_SubmenuOpened(object sender, RoutedEventArgs e)
+    {
+        if (sender is not MenuItem { DataContext: SceneElement element } menu) return;
+
+        menu.Items.Clear();
+        var none = new MenuItem { Header = "None", Tag = string.Empty, IsCheckable = true,
+                                  IsChecked = string.IsNullOrEmpty(element.BorderColor) };
+        none.Click += WebcamMenu_SetBorderColor;
+        menu.Items.Add(none);
+
+        foreach (var colour in BorderColorPalette.All)
+        {
+            var row = new MenuItem
+            {
+                Header = colour.ToString(),
+                Tag = colour.Hex,
+                IsCheckable = true,
+                IsChecked = string.Equals(element.BorderColor, colour.Hex, StringComparison.OrdinalIgnoreCase),
+            };
+            row.Click += WebcamMenu_SetBorderColor;
+            menu.Items.Add(row);
+        }
+    }
+
     private void WebcamMenu_SetBorderColor(object sender, RoutedEventArgs e)
     {
         if (sender is MenuItem { DataContext: SceneElement element, Tag: string color })
diff --git a/ytLive.Tests/DesignTokensTests.cs b/ytLive.Tests/DesignTokensTests.cs
index 5b194aa..66ad649 100644
--- a/ytLive.Tests/DesignTokensTests.cs
+++ b/ytLive.Tests/DesignTokensTests.cs
@@ -75,7 +75,8 @@ public class DesignTokensTests
         // guarded on its own instead of waiting for a global grep at the end. Pure white and black
         // are allowed (gloss highlights, knockout masks) — everything else must be a token.
         string[] converted = { "Themes/Controls.xaml", "MainWindow.xaml", "Controls/TopBar.xaml", "Controls/SceneThumbnailStrip.xaml",
-                                 "Controls/LeftPanel.xaml" };
+                                 "Controls/LeftPanel.xaml",
+                                 "Controls/PreviewPane.xaml" };
 
         foreach (var file in converted)
         {