From 2dbc35b2855cdb0f9f0e02638b7c6ea6407f0b43 Mon Sep 17 00:00:00 2001
From: gramps <gramps@llamachile.shop>
Date: Fri, 30 Oct 2026 08:00:43 -0700
Subject: [PATCH] =?UTF-8?q?design:=20left=20panel=20to=20tokens=20(surface?=
 =?UTF-8?q?=203=20of=20the=20sweep)=20=E2=80=94=20101=20colours=20gone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The layers/properties panel is the surface the creator looks at most, and it carried the
largest hardcoded palette in the app: 50 label greys, 15 icon blues, and a scatter of
one-off hexes. All of it resolves from tokens now.

Three sites needed a decision rather than a mapping, because the same hex meant different things:
- the + add icon and the chat author name were the old brand red → interactive accent (blue)
- the webcam lock alert is an ERROR, not decoration → error surface + error border
- the ✕ revert affordance was red, which the standard reserves for live/record → muted. ✓ stays
  a positive confirm, now in the interactive accent rather than a green that exists nowhere else
  in the palette. If green checks are missed, a `positive` token is the way back, not a literal.
- Super Chat gold was #eab308; it is the standard's amber now (game audio + Super Chat only).

Guard list extended: Controls/LeftPanel.xaml can no longer regress to a raw colour.
---
 Controls/LeftPanel.xaml           | 198 +++++++++++++++---------------
 ytLive.Tests/DesignTokensTests.cs |   3 +-
 2 files changed, 101 insertions(+), 100 deletions(-)

diff --git a/Controls/LeftPanel.xaml b/Controls/LeftPanel.xaml
index f58805f..de8145b 100644
--- a/Controls/LeftPanel.xaml
+++ b/Controls/LeftPanel.xaml
@@ -13,20 +13,20 @@
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                 <Border Width="12" Height="12" CornerRadius="2" VerticalAlignment="Center"
                         Background="{Binding Hex, Converter={StaticResource HexToBrush}}"
-                        BorderBrush="#2a3a5e" BorderThickness="1"/>
+                        BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"/>
                 <TextBlock Text="{Binding Name}" Margin="6,0,0,0" FontSize="12"
-                           Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                           Foreground="{StaticResource Brush.OnSurface}" VerticalAlignment="Center"/>
             </StackPanel>
         </DataTemplate>
         <DataTemplate x:Key="BorderColorRowTemplate">
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                 <Border Width="12" Height="12" CornerRadius="2" VerticalAlignment="Center"
                         Background="{Binding Hex, Converter={StaticResource HexToBrush}}"
-                        BorderBrush="#2a3a5e" BorderThickness="1"/>
+                        BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"/>
                 <TextBlock Text="{Binding Hex}" Margin="6,0,0,0" FontSize="12"
-                           Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                           Foreground="{StaticResource Brush.OnSurface}" VerticalAlignment="Center"/>
                 <TextBlock Text="{Binding Name}" Margin="8,0,0,0" FontSize="12"
-                           Foreground="#a0a0b0" VerticalAlignment="Center"/>
+                           Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
             </StackPanel>
         </DataTemplate>
         <Helpers:ClosedBoxTemplateSelector x:Key="BorderColorTemplates"
@@ -34,7 +34,7 @@
                                            RowTemplate="{StaticResource BorderColorRowTemplate}"/>
     </UserControl.Resources>
 
-    <Border Background="#16213e" CornerRadius="6" Padding="12">
+    <Border Background="{StaticResource Brush.SurfaceContainer}" CornerRadius="6" Padding="12">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="*"/>
@@ -55,11 +55,11 @@
                         <!-- LAYERS header + Add button -->
                         <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,8,0,0">
                             <Path Data="M12,3 L21,8 L12,13 L3,8 Z M3,12 L12,17 L21,12 M3,16 L12,21 L21,16"
-                                  Stroke="#38bdf8" StrokeThickness="1.8" StrokeLineJoin="Round"
+                                  Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.8" StrokeLineJoin="Round"
                                   Width="16" Height="16" Stretch="Uniform" VerticalAlignment="Center" Margin="0,-4,6,0"/>
                             <TextBlock Text="SCENE LAYERS" Style="{StaticResource SectionHeader}" VerticalAlignment="Center"/>
-                            <Border Width="20" Height="20" CornerRadius="10" Background="#334155" Margin="6,-4,0,0" VerticalAlignment="Center">
-                                <TextBlock Text="{Binding LayerCount}" Foreground="#38bdf8" FontSize="11" FontWeight="SemiBold"
+                            <Border Width="20" Height="20" CornerRadius="10" Background="{StaticResource Brush.Outline}" Margin="6,-4,0,0" VerticalAlignment="Center">
+                                <TextBlock Text="{Binding LayerCount}" Foreground="{StaticResource Brush.Tertiary}" FontSize="11" FontWeight="SemiBold"
                                            HorizontalAlignment="Center" VerticalAlignment="Center"/>
                             </Border>
                             <Button ToolTip="Add Layer" Style="{StaticResource IconButton}" Margin="4,-4,0,0"
@@ -84,7 +84,7 @@
                                               ToolTip="Celebration zone for Super Chat &amp; memberships — one alert layer at a time"/>
                                 </ContextMenu>
                             </Button.ContextMenu>
-                            <Path Data="M12,4 L12,20 M4,12 L20,12" Stroke="#e94560" StrokeThickness="2"
+                            <Path Data="M12,4 L12,20 M4,12 L20,12" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2"
                                   Width="14" Height="14" Stretch="Uniform"/>
                         </Button>
                     </StackPanel>
@@ -95,7 +95,7 @@
                              PreviewMouseLeftButtonDown="List_PreviewMouseLeftButtonDown"
                              PreviewMouseMove="List_PreviewMouseMove"
                              PreviewMouseLeftButtonUp="List_PreviewMouseLeftButtonUp"
-                             Foreground="#e0e0e0" FontSize="13">
+                             Foreground="{StaticResource Brush.OnSurface}" FontSize="13">
                         <Helpers:FocusPreservingListBox.ItemContainerStyle>
                             <Style TargetType="ListBoxItem" BasedOn="{StaticResource YtListBoxItem}">
                                 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
@@ -181,34 +181,34 @@
                                     </Grid.ContextMenu>
 
                                     <Grid Grid.Column="0" Width="16" Height="16" Margin="0,0,6,0" VerticalAlignment="Center">
-                                        <Path Data="M7,8 H17 A4,4 0 0 1 21,12 V14 A3,3 0 0 1 17,16 L15,14 H9 L7,16 A3,3 0 0 1 3,14 V12 A4,4 0 0 1 7,8 Z M8,11 V13 M7,12 H9 M15,11 H15.01 M17,13 H17.01" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M7,8 H17 A4,4 0 0 1 21,12 V14 A3,3 0 0 1 17,16 L15,14 H9 L7,16 A3,3 0 0 1 3,14 V12 A4,4 0 0 1 7,8 Z M8,11 V13 M7,12 H9 M15,11 H15.01 M17,13 H17.01" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsLiveCapture}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M3,5 H21 V19 H3 Z M3,16 L9,10 L13,14 L16,11 L21,16" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M3,5 H21 V19 H3 Z M3,16 L9,10 L13,14 L16,11 L21,16" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsBackground}" Value="True"/><Condition Binding="{Binding IsLiveCapture}" Value="False"/></MultiDataTrigger.Conditions><Setter Property="Visibility" Value="Visible"/></MultiDataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M3,7 H15 V17 H3 Z M15,11 L21,8 V16 L15,13" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M3,7 H15 V17 H3 Z M15,11 L21,8 V16 L15,13" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsWebcam}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M4,4 H20 V20 H4 Z M4,16 L9,11 L13,15 L16,12 L20,16 M15,8 H15.01" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M4,4 H20 V20 H4 Z M4,16 L9,11 L13,15 L16,12 L20,16 M15,8 H15.01" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsImageSource}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M5,5 H19 M12,5 V19 M8,19 H16" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M5,5 H19 M12,5 V19 M8,19 H16" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsTextOverlay}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M12,3 A9,9 0 1 0 12.01,3 M12,7 V12 L15,14" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M12,3 A9,9 0 1 0 12.01,3 M12,7 V12 L15,14" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsCountdown}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M12,3 A9,9 0 1 0 12.01,3 M3,12 H21 M12,3 C8,7 8,17 12,21 M12,3 C16,7 16,17 12,21" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M12,3 A9,9 0 1 0 12.01,3 M3,12 H21 M12,3 C8,7 8,17 12,21 M12,3 C16,7 16,17 12,21" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsWebSource}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M4,5 H20 V16 H10 L6,20 V16 H4 Z" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M4,5 H20 V16 H10 L6,20 V16 H4 Z" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsChatBox}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M4,5 H20 V19 H4 Z M10,9 L15,12 L10,15 Z" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M4,5 H20 V19 H4 Z M10,9 L15,12 L10,15 Z" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsMediaSource}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
-                                        <Path Data="M6,16 V11 A6,6 0 0 1 18,11 V16 L20,18 H4 Z M10,20 H14" Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
+                                        <Path Data="M6,16 V11 A6,6 0 0 1 18,11 V16 L20,18 H4 Z M10,20 H14" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round" Stretch="Uniform">
                                             <Path.Style><Style TargetType="Path"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding IsAlertBox}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Path.Style>
                                         </Path>
                                     </Grid>
@@ -247,13 +247,13 @@
                                             Command="{Binding DataContext.EditElementCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                                             CommandParameter="{Binding}" Style="{StaticResource IconButton}">
                                         <Path Data="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"
-                                              Fill="#d0d0d0" Width="13" Height="13" Stretch="Uniform"/>
+                                              Fill="{StaticResource Brush.OnSurface}" Width="13" Height="13" Stretch="Uniform"/>
                                     </Button>
 
                                     <Button Grid.Column="3" Style="{StaticResource EyeButton}"
                                             Command="{Binding DataContext.ToggleElementVisibilityCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                                             CommandParameter="{Binding}">
-                                        <Path Style="{StaticResource EyeIconStyle}" Fill="#d0d0d0"
+                                        <Path Style="{StaticResource EyeIconStyle}" Fill="{StaticResource Brush.OnSurface}"
                                               Width="13" Height="13" Stretch="Uniform"/>
                                     </Button>
 
@@ -262,7 +262,7 @@
                                             CommandParameter="{Binding}" Style="{StaticResource IconButton}"
                                             Visibility="{Binding IsBackground, Converter={StaticResource HiddenBoolToVis}}">
                                         <Path Data="M6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM19,4h-3.5l-1,-1h-5l-1,1H5v2h14V4z"
-                                              Fill="#d0d0d0" Width="13" Height="13" Stretch="Uniform"/>
+                                              Fill="{StaticResource Brush.OnSurface}" Width="13" Height="13" Stretch="Uniform"/>
                                     </Button>
                                 </Grid>
                             </DataTemplate>
@@ -277,10 +277,10 @@
                          Red when a required resource (the one-and-only webcam)
                          could not be locked; persists and re-polls until resolved. -->
                     <Border Grid.Row="3" Margin="0,8,0,0" Padding="8,6" CornerRadius="4"
-                            Background="#3a1216" BorderBrush="#e94560" BorderThickness="1"
+                            Background="{StaticResource Brush.ErrorContainer}" BorderBrush="{StaticResource Brush.Error}" BorderThickness="1"
                             Visibility="{Binding WebcamLockAlert, Converter={StaticResource NotNullToVis}}">
                         <StackPanel>
-                            <TextBlock Text="{Binding WebcamLockAlert}" Foreground="#ffb4b4" FontSize="11"
+                            <TextBlock Text="{Binding WebcamLockAlert}" Foreground="{StaticResource Brush.OnError}" FontSize="11"
                                        TextWrapping="Wrap"/>
                             <Button Content="Retry" Command="{Binding RetryWebcamLockCommand}"
                                     Style="{StaticResource YtButtonSecondary}" Padding="10,2"
@@ -290,14 +290,14 @@
 
                     <!-- ELEMENTS panel: per-element config beneath Sources.
                          Collapses entirely when no element is selected. -->
-                    <Rectangle Grid.Row="4" Height="1" Fill="#2c3a5c" Margin="0,22,0,10"/>
+                    <Rectangle Grid.Row="4" Height="1" Fill="{StaticResource Brush.Outline}" Margin="0,22,0,10"/>
                     <StackPanel Grid.Row="5" Orientation="Horizontal" Margin="0,8,0,0">
                         <Path Data="M12,8 A4,4 0 1 0 12.01,8 M19.4,15 L21,16.2 L19.4,19 L17.2,18.3 A7,7 0 0 1 15,19.4 L14.5,21.5 H9.5 L9,19.4 A7,7 0 0 1 6.8,18.3 L4.6,19 L3,16.2 L4.6,15 A7,7 0 0 1 4.6,9 L3,7.8 L4.6,5 L6.8,5.7 A7,7 0 0 1 9,4.6 L9.5,2.5 H14.5 L15,4.6 A7,7 0 0 1 17.2,5.7 L19.4,5 L21,7.8 L19.4,9 A7,7 0 0 1 19.4,15 Z"
-                              Stroke="#38bdf8" StrokeThickness="1.6" StrokeLineJoin="Round"
+                              Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="1.6" StrokeLineJoin="Round"
                               Width="16" Height="16" Stretch="Uniform" VerticalAlignment="Center" Margin="0,0,6,0"/>
                         <TextBlock Text="PROPERTIES" Style="{StaticResource SectionHeader}" VerticalAlignment="Center"/>
                     </StackPanel>
-                    <TextBlock Grid.Row="6" Text="Select an item to edit its properties" Foreground="#94a3b8" FontSize="12"
+                    <TextBlock Grid.Row="6" Text="Select an item to edit its properties" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                                Margin="8,4,0,0" TextWrapping="Wrap"
                                Visibility="{Binding SelectedElement, Converter={StaticResource NullToVis}}"/>
                     <ScrollViewer x:Name="ElementsScrollViewer" Grid.Row="6" MaxHeight="420" VerticalScrollBarVisibility="Auto" Background="Transparent"
@@ -306,9 +306,9 @@
                             <!-- Opacity + mirror/shape (draggable elements: image, webcam) -->
                             <StackPanel Visibility="{Binding SelectedElement.IsDraggable, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
                                 <StackPanel Visibility="{Binding SelectedElement.IsChatBox, Converter={StaticResource InverseBoolToVis}}">
-                                    <TextBlock Text="Opacity" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                    <TextBlock Text="Opacity" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="0,0,0,2"/>
                                     <DockPanel Margin="0,0,0,6">
-                                        <TextBlock x:Name="OpacityValueText" Text="100%" Foreground="#a0a0b0" FontSize="11"
+                                        <TextBlock x:Name="OpacityValueText" Text="100%" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                    DockPanel.Dock="Right" VerticalAlignment="Center" Margin="8,0,0,0" Width="32"/>
                                         <Slider x:Name="OpacitySlider" Width="120" Minimum="0" Maximum="1"
                                                 Value="{Binding SelectedElement.Opacity, Mode=TwoWay}"
@@ -320,7 +320,7 @@
                                      is not offered in the vertical Chat layout, so that option
                                      is not even shown there (CanToggleClipShape). -->
                                 <StackPanel Visibility="{Binding IsWebcamSelected, Converter={StaticResource BoolToVis}}">
-                                    <TextBlock Text="Shape" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,4"/>
+                                    <TextBlock Text="Shape" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,4"/>
                                     <StackPanel Orientation="Horizontal" Margin="10,0,0,4">
                                         <Button Content="{Binding SelectedElement.MirrorButtonText}"
                                                 Style="{StaticResource YtButtonSecondary}" Padding="10,4"
@@ -339,7 +339,7 @@
                                 <!-- The drag hint sits under the shape row — indented, so the
                                      parentage shows. -->
                                 <TextBlock Text="Drag to move · drag the corner dot to resize"
-                                           Foreground="#a0a0b0" FontSize="10" Margin="10,2,0,0"/>
+                                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" Margin="10,2,0,0"/>
                             </StackPanel>
 
                             <!-- Webcam geometry (TASK 57): under the vertical tier the camera
@@ -349,23 +349,23 @@
                                  above) so the webcam's border/background section stays the
                                  one panel bound to SelectedElement.IsWebcam. -->
                             <StackPanel Visibility="{Binding IsWebcamSelected, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
-                                <TextBlock Text="Geometry" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,4"/>
+                                <TextBlock Text="Geometry" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,4"/>
                                 <!-- TASK 61: the four fields share ONE fixed width — wide enough
                                      for the largest geometry value (1920, plus a typed sign) and
                                      no wider, so Y/H no longer stretch to fill the row. -->
                                 <DockPanel Margin="10,0,0,4" LastChildFill="False">
-                                    <TextBlock DockPanel.Dock="Left" Text="X" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="16"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="X" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="16"/>
                                     <TextBox Text="{Binding SelectedElement.X, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="44"/>
-                                    <TextBlock DockPanel.Dock="Left" Text="  Y" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="  Y" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
                                     <TextBox Text="{Binding SelectedElement.Y, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="44"/>
                                 </DockPanel>
                                 <DockPanel Margin="10,0,0,4" LastChildFill="False">
-                                    <TextBlock DockPanel.Dock="Left" Text="W" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="16"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="W" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="16"/>
                                     <TextBox Text="{Binding SelectedElement.Width, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="44"/>
-                                    <TextBlock DockPanel.Dock="Left" Text="  H" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="  H" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
                                     <TextBox Text="{Binding SelectedElement.Height, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="44"/>
                                 </DockPanel>
@@ -373,7 +373,7 @@
 
                             <!-- Webcam border config -->
                             <StackPanel Visibility="{Binding SelectedElement.IsWebcam, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
-                                <TextBlock Text="Border Color" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
+                                <TextBlock Text="Border Color" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
                                 <!-- TASK 63: the border colour is picked with the app's OWN
                                      drop-down (YtComboBox) — the same widget the Display
                                      and Font pickers use — not a hand-rolled menu. The hex
@@ -392,24 +392,24 @@
                                               ToolTip="Border colour" MinWidth="100"
                                               Margin="8,0,0,0" VerticalAlignment="Center"/>
                                 </DockPanel>
-                                <TextBlock Text="Border Thickness" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
+                                <TextBlock Text="Border Thickness" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
                                 <DockPanel Margin="10,0,0,6">
                                     <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
                                             Width="22" Height="22" Margin="4,0,0,0"
                                             Click="WebcamBorderAccept_Click">
-                                        <Path Data="M4,9 L8,14 L16,4" Stroke="#22c55e" StrokeThickness="2"
+                                        <Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2"
                                               Width="14" Height="14" Stretch="Uniform"/>
                                     </Button>
                                     <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
                                             Width="22" Height="22" ToolTip="Revert"
                                             Click="WebcamBorderRevert_Click" Margin="4,0,0,0">
-                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="#e94560" StrokeThickness="2"
+                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="{StaticResource Brush.OnSurfaceVariant}" StrokeThickness="2"
                                               Width="14" Height="14" Stretch="Uniform"/>
                                     </Button>
                                     <Slider DockPanel.Dock="Left" Width="120" Minimum="0" Maximum="10"
                                             Value="{Binding SelectedElement.BorderWidth, Mode=TwoWay}"
                                             VerticalAlignment="Center" TickFrequency="1" IsSnapToTickEnabled="True"/>
-                                    <TextBlock Text="{Binding SelectedElement.BorderWidth}" Foreground="#a0a0b0" FontSize="11"
+                                    <TextBlock Text="{Binding SelectedElement.BorderWidth}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                VerticalAlignment="Center" Margin="8,0,0,0" Width="20"/>
                                 </DockPanel>
 
@@ -417,9 +417,9 @@
                                      (one on turns the other off; both off = no effect). TASK 59:
                                      the pills are indented under the Background title, and the
                                      strength row one level deeper, under Blur. -->
-                                <TextBlock Text="Background" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,6"/>
+                                <TextBlock Text="Background" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,6"/>
                                 <DockPanel Margin="10,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Remove" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Remove" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <ToggleButton x:Name="RemoveBackgroundPill" Style="{StaticResource PillToggle}"
                                                   IsChecked="{Binding SelectedElement.RemoveBackground, Mode=TwoWay}"
                                                   AutomationProperties.Name="Remove background"
@@ -427,7 +427,7 @@
                                                   HorizontalAlignment="Left"/>
                                 </DockPanel>
                                 <DockPanel Margin="10,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Blur" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Blur" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <ToggleButton x:Name="BlurBackgroundPill" Style="{StaticResource PillToggle}"
                                                   IsChecked="{Binding SelectedElement.BlurBackground, Mode=TwoWay}"
                                                   AutomationProperties.Name="Blur background"
@@ -436,9 +436,9 @@
                                 </DockPanel>
                                 <DockPanel Margin="20,0,0,6"
                                            Visibility="{Binding SelectedElement.HasBackgroundEffect, Converter={StaticResource BoolToVis}}">
-                                    <TextBlock DockPanel.Dock="Left" Text="Strength" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Strength" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.BackgroundStrength, StringFormat={}{0:P0}}"
-                                               Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Margin="8,0,0,0" Width="34"/>
+                                               Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Margin="8,0,0,0" Width="34"/>
                                     <Slider x:Name="BackgroundStrengthSlider" Minimum="0" Maximum="1"
                                             Value="{Binding SelectedElement.BackgroundStrength, Mode=TwoWay}"
                                             TickFrequency="0.05" IsSnapToTickEnabled="True" VerticalAlignment="Center"
@@ -449,59 +449,59 @@
 
                             <!-- Countdown config -->
                             <StackPanel Visibility="{Binding SelectedElement.IsCountdown, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
-                                <TextBlock Text="Timer (minutes)" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                <TextBlock Text="Timer (minutes)" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="0,0,0,2"/>
                                 <DockPanel Margin="0,0,0,6">
                                     <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
                                             Width="22" Height="22" Margin="4,0,0,0"
                                             Click="CountdownAccept_Click">
-                                        <Path Data="M4,9 L8,14 L16,4" Stroke="#22c55e" StrokeThickness="2"
+                                        <Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2"
                                               Width="14" Height="14" Stretch="Uniform"/>
                                     </Button>
                                     <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
                                             Width="22" Height="22" ToolTip="Revert"
                                             Click="CountdownRevert_Click" Margin="4,0,0,0">
-                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="#e94560" StrokeThickness="2"
+                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="{StaticResource Brush.OnSurfaceVariant}" StrokeThickness="2"
                                               Width="14" Height="14" Stretch="Uniform"/>
                                     </Button>
                                     <Slider DockPanel.Dock="Left" Width="120" Minimum="1" Maximum="60"
                                             Value="{Binding SelectedElement.TimerMinutes, Mode=TwoWay}"
                                             VerticalAlignment="Center" TickFrequency="1" IsSnapToTickEnabled="True"/>
-                                    <TextBlock Text="{Binding SelectedElement.TimerMinutes}" Foreground="#a0a0b0" FontSize="11"
+                                    <TextBlock Text="{Binding SelectedElement.TimerMinutes}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                VerticalAlignment="Center" Margin="8,0,0,0" Width="20"/>
                                 </DockPanel>
                             </StackPanel>
 
                             <!-- Web source config -->
                             <StackPanel Visibility="{Binding SelectedElement.IsWebSource, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
-                                <TextBlock Text="Geometry" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,4"/>
+                                <TextBlock Text="Geometry" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,4"/>
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="X" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="16"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="X" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="16"/>
                                     <TextBox Text="{Binding SelectedElement.X, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}"/>
-                                    <TextBlock DockPanel.Dock="Left" Text="  Y" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="  Y" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
                                     <TextBox Text="{Binding SelectedElement.Y, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}"/>
                                 </DockPanel>
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="W" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="16"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="W" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="16"/>
                                     <TextBox Text="{Binding SelectedElement.Width, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}"/>
-                                    <TextBlock DockPanel.Dock="Left" Text="  H" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="  H" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="20" Margin="8,0,0,0"/>
                                     <TextBox Text="{Binding SelectedElement.Height, UpdateSourceTrigger=PropertyChanged, StringFormat=F0}"
                                              Style="{StaticResource YtTextBoxCompact}"/>
                                 </DockPanel>
-                                <TextBlock Text="URI" Foreground="#a0a0b0" FontSize="11" Margin="0,0,0,2"/>
+                                <TextBlock Text="URI" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="0,0,0,2"/>
                                 <DockPanel>
                                     <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
                                             Width="22" Height="22" Margin="4,0,0,0" IsTabStop="False"
                                             Click="WebAccept_Click">
-                                        <Path Data="M4,9 L8,14 L16,4" Stroke="#22c55e" StrokeThickness="2"
+                                        <Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2"
                                               Width="14" Height="14" Stretch="Uniform"/>
                                     </Button>
                                     <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
                                             Width="22" Height="22" ToolTip="Revert" IsTabStop="False"
                                             Click="WebRevert_Click" Margin="4,0,0,0">
-                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="#e94560" StrokeThickness="2"
+                                        <Path Data="M5,5 L15,15 M15,5 L5,15" Stroke="{StaticResource Brush.OnSurfaceVariant}" StrokeThickness="2"
                                               Width="14" Height="14" Stretch="Uniform"/>
                                     </Button>
                                     <TextBox Text="{Binding SelectedElement.WebUri, UpdateSourceTrigger=PropertyChanged}"
@@ -512,10 +512,10 @@
 
                             <!-- Chat box config -->
                             <StackPanel Visibility="{Binding SelectedElement.IsChatBox, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
-                                <TextBlock Text="Chat Overlay" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,6"/>
+                                <TextBlock Text="Chat Overlay" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,6"/>
 
                                 <!-- Border (same controls as the webcam's border) -->
-                                <TextBlock Text="Border Color" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,2"/>
+                                <TextBlock Text="Border Color" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,2"/>
                                 <DockPanel Margin="10,0,0,6">
                                     <TextBox DockPanel.Dock="Left"
                                              Text="{Binding SelectedElement.BorderColor, UpdateSourceTrigger=PropertyChanged}"
@@ -529,35 +529,35 @@
                                               ToolTip="Border colour" MinWidth="100"
                                               Margin="8,0,0,0" VerticalAlignment="Center"/>
                                 </DockPanel>
-                                <TextBlock Text="Border Thickness" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,2"/>
+                                <TextBlock Text="Border Thickness" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,2"/>
                                 <DockPanel Margin="10,0,0,6">
                                     <Slider DockPanel.Dock="Left" Width="120" Minimum="0" Maximum="10"
                                             Value="{Binding SelectedElement.BorderWidth, Mode=TwoWay}"
                                             VerticalAlignment="Center" TickFrequency="1" IsSnapToTickEnabled="True"/>
-                                    <TextBlock Text="{Binding SelectedElement.BorderWidth}" Foreground="#a0a0b0" FontSize="11"
+                                    <TextBlock Text="{Binding SelectedElement.BorderWidth}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                VerticalAlignment="Center" Margin="8,0,0,0" Width="20"/>
                                 </DockPanel>
-                                <TextBlock Text="Border Opacity" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,2"/>
+                                <TextBlock Text="Border Opacity" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,2"/>
                                 <DockPanel Margin="10,0,0,8">
                                     <Slider DockPanel.Dock="Left" Width="120" Minimum="0" Maximum="1"
                                             Value="{Binding SelectedElement.BorderOpacity, Mode=TwoWay}"
                                             VerticalAlignment="Center"/>
-                                    <TextBlock Text="{Binding SelectedElement.BorderOpacity, StringFormat={}{0:P0}}" Foreground="#a0a0b0" FontSize="11"
+                                    <TextBlock Text="{Binding SelectedElement.BorderOpacity, StringFormat={}{0:P0}}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
                                                VerticalAlignment="Center" Margin="8,0,0,0" Width="34"/>
                                 </DockPanel>
 
                                 <!-- Font Size -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Font Size" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Font Size" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <Slider x:Name="ChatFontSizeSlider" Width="120" Minimum="8" Maximum="72" TickFrequency="2" IsSnapToTickEnabled="True"
                                             Value="{Binding SelectedElement.ChatFontSize, Mode=TwoWay}"
                                             VerticalAlignment="Center"/>
-                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatFontSize, StringFormat={}{0:0}}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="24"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatFontSize, StringFormat={}{0:0}}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="24"/>
                                 </DockPanel>
 
                                 <!-- Font Family -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Font" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Font" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <ComboBox SelectedValue="{Binding SelectedElement.ChatFontFamily, Mode=TwoWay}"
                                               SelectedValuePath="Content"
                                               Style="{StaticResource YtComboBox}"
@@ -573,57 +573,57 @@
 
                                 <!-- Font Color -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Font Color" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Font Color" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <TextBox Text="{Binding SelectedElement.ChatFontColor, UpdateSourceTrigger=PropertyChanged}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="80"/>
                                 </DockPanel>
 
                                 <!-- Member Color -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Member" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Member" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <TextBox Text="{Binding SelectedElement.ChatMemberColor, UpdateSourceTrigger=PropertyChanged}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="80"/>
                                 </DockPanel>
 
                                 <!-- Super Chat Color -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Super Chat" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Super Chat" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <TextBox Text="{Binding SelectedElement.ChatSuperChatColor, UpdateSourceTrigger=PropertyChanged}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="80"/>
                                 </DockPanel>
 
                                 <!-- Max Messages -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Max Msgs" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Max Msgs" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <Slider x:Name="ChatMaxMsgsSlider" Width="120" Minimum="1" Maximum="20" TickFrequency="1" IsSnapToTickEnabled="True"
                                             Value="{Binding SelectedElement.ChatMaxMessages, Mode=TwoWay}"
                                             VerticalAlignment="Center"/>
-                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatMaxMessages}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="24"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatMaxMessages}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="24"/>
                                 </DockPanel>
 
                                 <!-- Background Color -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Background" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Background" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <TextBox Text="{Binding SelectedElement.ChatBackgroundColor, UpdateSourceTrigger=PropertyChanged}"
                                              Style="{StaticResource YtTextBoxCompact}" Width="80"/>
                                 </DockPanel>
 
                                 <!-- Background Opacity -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Bg Opacity" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Bg Opacity" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <Slider x:Name="ChatBgOpacitySlider" Width="120" Minimum="0" Maximum="1"
                                             Value="{Binding SelectedElement.ChatBackgroundOpacity, Mode=TwoWay}"
                                             VerticalAlignment="Center"/>
-                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatBackgroundOpacity, StringFormat={}{0:0%}}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="32"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatBackgroundOpacity, StringFormat={}{0:0%}}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="32"/>
                                 </DockPanel>
 
                                 <!-- Fade After (seconds) -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Fade After" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="70"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Fade After" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="70"/>
                                     <Slider x:Name="ChatFadeSlider" Width="120" Minimum="0" Maximum="60" TickFrequency="5" IsSnapToTickEnabled="True"
                                             Value="{Binding SelectedElement.ChatFadeSeconds, Mode=TwoWay}"
                                             VerticalAlignment="Center"/>
-                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatFadeSeconds, StringFormat='{}{0}s'}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="28"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.ChatFadeSeconds, StringFormat='{}{0}s'}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="28"/>
                                 </DockPanel>
 
                                 <!-- Toggles -->
@@ -635,12 +635,12 @@
 
                             <!-- Stream Alerts config -->
                             <StackPanel Visibility="{Binding SelectedElement.IsAlertBox, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
-                                <TextBlock Text="Stream Alerts" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,6"/>
+                                <TextBlock Text="Stream Alerts" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,0,0,6"/>
                                 <TextBlock Text="The built-in clip plays on every alert (Super Chat, membership…) unless a custom video is picked."
                                            Foreground="#888" FontSize="10" TextWrapping="Wrap" Margin="0,0,0,6"/>
 
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Built-in video" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Built-in video" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <ToggleButton Style="{StaticResource PillToggle}"
                                                   IsChecked="{Binding SelectedElement.AlertUseDefaultVideo, Mode=TwoWay}"
                                                   HorizontalAlignment="Left"/>
@@ -654,7 +654,7 @@
                                     </Grid.ColumnDefinitions>
                                     <TextBox Grid.Column="0" Text="{Binding SelectedElement.AlertVideoPath, Mode=OneWay}"
                                              Style="{StaticResource YtTextBoxCompact}"
-                                             IsReadOnly="True" Foreground="#a0a0b0" VerticalAlignment="Center"/>
+                                             IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
                                     <Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseAlertVideoCommand}"
                                             CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
                                             Margin="4,0,0,0" Padding="8,2"/>
@@ -667,7 +667,7 @@
                                            Foreground="#888" FontSize="10" TextWrapping="Wrap" Margin="0,4,0,6"/>
 
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Message ticker" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Message ticker" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <ToggleButton Style="{StaticResource PillToggle}"
                                                   IsChecked="{Binding SelectedElement.AlertShowTicker, Mode=TwoWay}"
                                                   HorizontalAlignment="Left"/>
@@ -677,7 +677,7 @@
                                      solid (still). Inline items, not a bound ItemsSource —
                                      same shape as the chat Font selector above. -->
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Display" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Display" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <ComboBox SelectedValue="{Binding SelectedElement.AlertDisplayMethod, Mode=TwoWay}"
                                               SelectedValuePath="Tag"
                                               Style="{StaticResource YtComboBox}"
@@ -689,11 +689,11 @@
                                 </DockPanel>
 
                                 <DockPanel Margin="0,0,0,4">
-                                    <TextBlock DockPanel.Dock="Left" Text="Volume" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Width="84"/>
+                                    <TextBlock DockPanel.Dock="Left" Text="Volume" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Width="84"/>
                                     <Slider Width="120" Minimum="0" Maximum="1"
                                             Value="{Binding SelectedElement.AlertVideoVolume, Mode=TwoWay}"
                                             VerticalAlignment="Center"/>
-                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.AlertVideoVolume, StringFormat={}{0:0%}}" Foreground="#e0e0e0" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="32"/>
+                                    <TextBlock DockPanel.Dock="Right" Text="{Binding SelectedElement.AlertVideoVolume, StringFormat={}{0:0%}}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11" Margin="6,0,0,0" VerticalAlignment="Center" Width="32"/>
                                 </DockPanel>
                             </StackPanel>
 
@@ -703,7 +703,7 @@
                                 <TextBlock Text="Background" Style="{StaticResource SubHeader}"/>
                                 <StackPanel Margin="4,0,0,0">
                                     <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
-                                        <TextBlock Text="Use default background:" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center"/>
+                                        <TextBlock Text="Use default background:" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center"/>
                                         <ToggleButton Style="{StaticResource PillToggle}"
                                                       IsChecked="{Binding SelectedElement.UseDefaultBackground, Mode=TwoWay}"
                                                       Margin="8,0,0,0"/>
@@ -716,12 +716,12 @@
                                         </Grid.ColumnDefinitions>
                                         <TextBox Grid.Column="0" Text="{Binding SelectedElement.CustomBackgroundPath, Mode=OneWay}"
                                                   Style="{StaticResource YtTextBoxCompact}"
-                                                  IsReadOnly="True" Foreground="#a0a0b0" VerticalAlignment="Center"/>
+                                                  IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
                                         <Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseBackgroundCommand}"
                                                 Style="{StaticResource YtButtonSecondary}" Margin="4,0,0,0" Padding="8,2"/>
                                     </Grid>
                                     <TextBlock Text="{Binding BackgroundSizeMismatchText}"
-                                               Foreground="#ef4444" FontSize="11" TextWrapping="Wrap"
+                                               Foreground="{StaticResource Brush.Error}" FontSize="11" TextWrapping="Wrap"
                                                Margin="0,4,0,0"
                                                Visibility="{Binding BackgroundSizeMismatch, Converter={StaticResource BoolToVis}}"/>
                                 </StackPanel>
@@ -742,7 +742,7 @@
                     <!-- Inactive overlay (shown when NOT live) -->
                     <StackPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"
                                 Visibility="{Binding ShowChatInactiveMessage, Converter={StaticResource BoolToVis}}">
-                        <TextBlock Text="Chat is inactive" Foreground="#a0a0b0" FontSize="13"
+                        <TextBlock Text="Chat is inactive" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13"
                                    HorizontalAlignment="Center" Margin="0,0,0,4"/>
                         <TextBlock Text="Chat becomes active once LlamaCasty is connected and streaming on YouTube."
                                    Foreground="#666" FontSize="11" TextWrapping="Wrap"
@@ -751,11 +751,11 @@
 
                     <!-- Pinned message -->
                     <Border Grid.Row="1" VerticalAlignment="Top" Margin="4,4,4,0" Padding="6,4" CornerRadius="4"
-                            Background="#1a2a3a" BorderBrush="#38bdf8" BorderThickness="1"
+                            Background="{StaticResource Brush.SurfaceContainerHigh}" BorderBrush="{StaticResource Brush.Tertiary}" BorderThickness="1"
                             Visibility="{Binding PinnedChatMessage, Converter={StaticResource NotNullToVis}}">
                         <StackPanel>
-                            <TextBlock Text="{Binding PinnedChatMessage.AuthorName}" Foreground="#38bdf8" FontWeight="SemiBold" FontSize="11"/>
-                            <TextBlock Text="{Binding PinnedChatMessage.Message}" Foreground="#e0e0e0" FontSize="11" TextWrapping="Wrap"/>
+                            <TextBlock Text="{Binding PinnedChatMessage.AuthorName}" Foreground="{StaticResource Brush.Tertiary}" FontWeight="SemiBold" FontSize="11"/>
+                            <TextBlock Text="{Binding PinnedChatMessage.Message}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11" TextWrapping="Wrap"/>
                         </StackPanel>
                     </Border>
 
@@ -772,8 +772,8 @@
                                         <Setter Property="Background" Value="Transparent"/>
                                         <Style.Triggers>
                                             <DataTrigger Binding="{Binding IsSuperChat}" Value="True">
-                                                <Setter Property="Background" Value="#2a1a0a"/>
-                                                <Setter Property="BorderBrush" Value="#eab308"/>
+                                                <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
+                                                <Setter Property="BorderBrush" Value="{StaticResource Brush.Secondary}"/>
                                                 <Setter Property="BorderThickness" Value="1,0,1,0"/>
                                             </DataTrigger>
                                         </Style.Triggers>
@@ -784,17 +784,17 @@
                                         <TextBlock Text="&#x2B50;" FontSize="10" Margin="0,0,4,0"
                                                    VerticalAlignment="Center"
                                                    Visibility="{Binding IsMember, Converter={StaticResource BoolToVis}}"/>
-                                        <TextBlock Text="{Binding AuthorName}" Foreground="#e94560"
+                                        <TextBlock Text="{Binding AuthorName}" Foreground="{StaticResource Brush.Tertiary}"
                                                    FontWeight="Bold" FontSize="12" VerticalAlignment="Center"/>
                                         <TextBlock Text="{Binding SuperChatAmount, StringFormat=${0:F2}}"
-                                                   Foreground="#eab308" FontWeight="Bold" FontSize="12"
+                                                   Foreground="{StaticResource Brush.Secondary}" FontWeight="Bold" FontSize="12"
                                                    Margin="8,0,0,0" VerticalAlignment="Center"
                                                    Visibility="{Binding IsSuperChat, Converter={StaticResource BoolToVis}}"/>
-                                        <TextBlock Text="{Binding SuperChatCurrency}" Foreground="#eab308"
+                                        <TextBlock Text="{Binding SuperChatCurrency}" Foreground="{StaticResource Brush.Secondary}"
                                                    FontSize="11" Margin="2,0,0,0" VerticalAlignment="Center"
                                                    Visibility="{Binding IsSuperChat, Converter={StaticResource BoolToVis}}"/>
                                     </StackPanel>
-                                    <TextBlock Text="{Binding Message}" Foreground="#e0e0e0"
+                                    <TextBlock Text="{Binding Message}" Foreground="{StaticResource Brush.OnSurface}"
                                                TextWrapping="Wrap" Margin="0,2,0,0"/>
                                 </StackPanel>
                             </Border>
diff --git a/ytLive.Tests/DesignTokensTests.cs b/ytLive.Tests/DesignTokensTests.cs
index 1b5ea86..5b194aa 100644
--- a/ytLive.Tests/DesignTokensTests.cs
+++ b/ytLive.Tests/DesignTokensTests.cs
@@ -74,7 +74,8 @@ public class DesignTokensTests
         // The sweep converts one surface per commit; each adds its file here, so every step is
         // 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" };
+        string[] converted = { "Themes/Controls.xaml", "MainWindow.xaml", "Controls/TopBar.xaml", "Controls/SceneThumbnailStrip.xaml",
+                                 "Controls/LeftPanel.xaml" };
 
         foreach (var file in converted)
         {