From 8502c1d194db3e5611fa94521f58ad8cd420044d Mon Sep 17 00:00:00 2001
From: gramps <gramps@llamachile.shop>
Date: Fri, 30 Oct 2026 08:29:28 -0700
Subject: [PATCH] design: app settings + dialogs to tokens (surface 5 of the
 sweep)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OverlayHost (the App Settings surface) and every dialog — Go Live, Socials, Mic picker, Camera
picker, Hotkey config, Reuse Image, Rename Recording, Keep Broadcast — now resolve from tokens.
That closes the last place the creator sees a dialog: the settings overlay was still wearing the
old palette while the main window had moved on.

Every #e94560 in these files was an ERROR or validation affordance (hotkey conflicts, socials
validation, the remove tooltip, the go-live error line) — six sites all borrowing the retired
brand red to mean "something is wrong". They are `error` now, which is what the standard says
red-adjacent means; live/record keeps `primary`.

Guard list extended to all nine files.
---
 CameraPickerDialog.xaml           | 20 ++++++------
 Controls/OverlayHost.xaml         | 52 +++++++++++++++----------------
 GoLiveWindow.xaml                 | 22 ++++++-------
 HotkeyConfigDialog.xaml           | 20 ++++++------
 KeepBroadcastDialog.xaml          |  8 ++---
 MicPickerDialog.xaml              | 20 ++++++------
 RenameRecordingDialog.xaml        |  8 ++---
 ReuseImageDialog.xaml             | 16 +++++-----
 SocialsDialog.xaml                | 26 ++++++++--------
 ytLive.Tests/DesignTokensTests.cs |  6 +++-
 10 files changed, 101 insertions(+), 97 deletions(-)

diff --git a/CameraPickerDialog.xaml b/CameraPickerDialog.xaml
index 85a8281..277ca43 100644
--- a/CameraPickerDialog.xaml
+++ b/CameraPickerDialog.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.CameraPickerDialog"
+<Window x:Class="ytLive.CameraPickerDialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Add Webcam" Height="340" Width="460"
         Icon="/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Window.Resources>
         <ResourceDictionary>
@@ -21,10 +21,10 @@
                             </Border>
                             <ControlTemplate.Triggers>
                                 <Trigger Property="IsMouseOver" Value="True">
-                                    <Setter TargetName="Bd" Property="Background" Value="#1c2a52"/>
+                                    <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
                                 </Trigger>
                                 <Trigger Property="IsSelected" Value="True">
-                                    <Setter TargetName="Bd" Property="Background" Value="#2a2450"/>
+                                    <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
                                 </Trigger>
                             </ControlTemplate.Triggers>
                         </ControlTemplate>
@@ -43,10 +43,10 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Add Webcam" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,14"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,14"/>
 
         <TextBlock Grid.Row="1" Text="Pick the camera to add to your stream."
-                   Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,12"/>
 
         <Grid Grid.Row="2">
             <ListBox Background="Transparent" BorderThickness="0"
@@ -58,7 +58,7 @@
                     <DataTemplate>
                         <StackPanel Orientation="Horizontal">
                             <TextBlock Text="📷" FontSize="15" VerticalAlignment="Center" Margin="0,0,10,0"/>
-                            <TextBlock Text="{Binding Name}" Foreground="#e0e0e0" FontSize="13"
+                            <TextBlock Text="{Binding Name}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"
                                        VerticalAlignment="Center" TextTrimming="CharacterEllipsis"/>
                         </StackPanel>
                     </DataTemplate>
@@ -67,15 +67,15 @@
 
             <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"
                         Visibility="{Binding IsLoading, Converter={StaticResource BoolToVis}}">
-                <TextBlock Text="Searching for cameras…" Foreground="#a0a0b0" FontSize="13"/>
+                <TextBlock Text="Searching for cameras…" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13"/>
             </StackPanel>
 
             <StackPanel VerticalAlignment="Center"
                         Visibility="{Binding NoCameras, Converter={StaticResource BoolToVis}}">
-                <TextBlock Text="No cameras found" Foreground="#e0e0e0" FontSize="15"
+                <TextBlock Text="No cameras found" Foreground="{StaticResource Brush.OnSurface}" FontSize="15"
                            FontWeight="SemiBold" HorizontalAlignment="Center"/>
                 <TextBlock Text="Check that a webcam is connected and that Windows camera access is enabled."
-                           Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" MaxWidth="360"
+                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" TextWrapping="Wrap" MaxWidth="360"
                            TextAlignment="Center" HorizontalAlignment="Center" Margin="0,8,0,0"/>
             </StackPanel>
         </Grid>
diff --git a/Controls/OverlayHost.xaml b/Controls/OverlayHost.xaml
index 7b3dc87..a41e0dc 100644
--- a/Controls/OverlayHost.xaml
+++ b/Controls/OverlayHost.xaml
@@ -1,4 +1,4 @@
-<UserControl x:Class="ytLive.Controls.OverlayHost"
+<UserControl x:Class="ytLive.Controls.OverlayHost"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:Helpers="clr-namespace:ytLive.Helpers"
@@ -6,7 +6,7 @@
              xmlns:services="clr-namespace:ytLive.Services">
         <Grid Grid.RowSpan="3"
               Visibility="{Binding IsAnyOverlayOpen, Converter={StaticResource BoolToVis}}">
-            <Button Background="#99000000" BorderThickness="0" Cursor="Hand"
+            <Button Background="{StaticResource Brush.ScrimDarkStrong}" BorderThickness="0" Cursor="Hand"
                     Command="{Binding CloseOverlayCommand}">
                 <Button.Template>
                     <ControlTemplate TargetType="Button">
@@ -15,7 +15,7 @@
                 </Button.Template>
             </Button>
 
-            <Border Background="#0A0C1A" CornerRadius="8" Width="650" MaxHeight="700"
+            <Border Background="{StaticResource Brush.Background}" CornerRadius="8" Width="650" MaxHeight="700"
                     VerticalAlignment="Center" HorizontalAlignment="Center"
                     Padding="28" BorderBrush="#333" BorderThickness="1">
                 <Grid>
@@ -27,11 +27,11 @@
                     <!-- Header -->
                     <Grid Grid.Row="0">
                         <TextBlock Text="{Binding OverlayTitle}" FontSize="18" FontWeight="Bold"
-                                   Foreground="#e0e0e0" VerticalAlignment="Center"/>
+                                   Foreground="{StaticResource Brush.OnSurface}" VerticalAlignment="Center"/>
                         <Button HorizontalAlignment="Right" ToolTip="Close" Style="{StaticResource IconButton}"
                                 Command="{Binding CloseOverlayCommand}">
                             <Path Data="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
-                                  Fill="#d0d0d0" Width="14" Height="14" Stretch="Uniform"/>
+                                  Fill="{StaticResource Brush.OnSurface}" Width="14" Height="14" Stretch="Uniform"/>
                         </Button>
                     </Grid>
 
@@ -41,36 +41,36 @@
                     <StackPanel Grid.Row="1" Margin="0,8,0,0"
                                 Visibility="{Binding IsSettingsOpen, Converter={StaticResource BoolToVis}}">
 
-                        <TextBlock Text="Recordings" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
-                        <TextBlock Text="Default location" Foreground="#a0a0b0" FontSize="11" Margin="10,0,0,2"/>
+                        <TextBlock Text="Recordings" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
+                        <TextBlock Text="Default location" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="10,0,0,2"/>
                         <DockPanel Margin="10,0,0,8">
                             <Button DockPanel.Dock="Right" Content="Browse…" Command="{Binding ChooseRecordFolderCommand}"
                                     Style="{StaticResource YtButtonSecondary}" Padding="8,2" FontSize="11" Margin="6,0,0,0"/>
                             <Button DockPanel.Dock="Right" Content="Use Downloads" Command="{Binding ResetRecordFolderCommand}"
                                     Style="{StaticResource YtButtonSecondary}" Padding="8,2" FontSize="11" Margin="6,0,0,0"/>
                             <TextBox Style="{StaticResource YtTextBoxCompact}" Text="{Binding RecordFolderDisplay, Mode=OneWay}"
-                                     IsReadOnly="True" Foreground="#a0a0b0" VerticalAlignment="Center"/>
+                                     IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
                         </DockPanel>
 
-                        <TextBlock Text="Brand logo" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
-                        <TextBlock Text="Image file (shown on every scene)" Foreground="#a0a0b0" FontSize="11" Margin="10,0,0,2"/>
+                        <TextBlock Text="Brand logo" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
+                        <TextBlock Text="Image file (shown on every scene)" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="10,0,0,2"/>
                         <DockPanel Margin="10,0,0,8">
                             <Button DockPanel.Dock="Right" Content="Browse…" Command="{Binding BrowseBrandLogoCommand}"
                                     Style="{StaticResource YtButtonSecondary}" Padding="8,2" FontSize="11" Margin="6,0,0,0"/>
                             <TextBox Style="{StaticResource YtTextBoxCompact}" Text="{Binding BrandLogoFileDisplay, Mode=OneWay}"
-                                     IsReadOnly="True" Foreground="#a0a0b0" VerticalAlignment="Center"/>
+                                     IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
                         </DockPanel>
 
-                        <TextBlock Text="Preview" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
-                        <TextBlock Text="Zoom view shape" Foreground="#a0a0b0" FontSize="11" Margin="10,0,0,2"/>
+                        <TextBlock Text="Preview" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
+                        <TextBlock Text="Zoom view shape" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="10,0,0,2"/>
                         <ComboBox Style="{StaticResource YtComboBox}" Margin="10,0,0,8" SelectedValue="{Binding ZoomShape}" SelectedValuePath="Tag">
                             <ComboBoxItem Content="Circle" Tag="{x:Static Models:ZoomShape.Circle}"/>
                             <ComboBoxItem Content="Phone (Vertical Rectangle)" Tag="{x:Static Models:ZoomShape.VerticalRectangle}"/>
                             <ComboBoxItem Content="Tablet (Horizontal Rectangle)" Tag="{x:Static Models:ZoomShape.HorizontalRectangle}"/>
                         </ComboBox>
 
-                        <TextBlock Text="Scene transition" Foreground="#a0a0b0" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
-                        <TextBlock Text="Type" Foreground="#a0a0b0" FontSize="11" Margin="10,0,0,2"/>
+                        <TextBlock Text="Scene transition" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" FontWeight="SemiBold" Margin="0,8,0,2"/>
+                        <TextBlock Text="Type" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="10,0,0,2"/>
                         <ComboBox Style="{StaticResource YtComboBox}" Margin="10,0,0,8" SelectedValue="{Binding SelectedTransitionType}" SelectedValuePath="Tag">
                             <ComboBoxItem Content="Cut" Tag="{x:Static services:TransitionType.Cut}"/>
                             <ComboBoxItem Content="Fade" Tag="{x:Static services:TransitionType.Fade}"/>
@@ -78,7 +78,7 @@
                             <ComboBoxItem Content="Wipe" Tag="{x:Static services:TransitionType.Wipe}"/>
                         </ComboBox>
                         <DockPanel Margin="10,0,0,6">
-                            <TextBlock DockPanel.Dock="Right" Foreground="#a0a0b0" FontSize="11" VerticalAlignment="Center" Margin="8,0,0,0" Width="56">
+                            <TextBlock DockPanel.Dock="Right" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" VerticalAlignment="Center" Margin="8,0,0,0" Width="56">
                                 <Run Text="{Binding TransitionDurationMs, StringFormat={}{0:0}}"/><Run Text=" ms"/>
                             </TextBlock>
                             <Slider Minimum="100" Maximum="2000" TickFrequency="50" IsSnapToTickEnabled="True"
@@ -124,22 +124,22 @@
 
                     <!-- About -->
                     <Grid Grid.Row="1" Margin="0,16,0,0"
-                          Background="#171928"
+                          Background="{StaticResource Brush.SurfaceContainerLow}"
                           Visibility="{Binding IsAboutOpen, Converter={StaticResource BoolToVis}}">
 
                         <!-- Hub view -->
                         <StackPanel Visibility="{Binding IsHubVisible, Converter={StaticResource BoolToVis}}">
                             <Image Source="/ytLive;component/Assets/llamacasty-logo.jpg" Height="125" Stretch="Uniform"
                                    HorizontalAlignment="Center" Margin="0,0,0,12"/>
-                            <TextBlock Text="{Binding AppVersionLabel}" Foreground="#a0a0b0" FontSize="12"
+                            <TextBlock Text="{Binding AppVersionLabel}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                                        HorizontalAlignment="Center" Margin="0,4,0,0"/>
                             <TextBlock Text="Live streaming for YouTube — simple enough that even the most right-brained person can intuit it."
-                                       Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" MaxWidth="380"
+                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" TextWrapping="Wrap" MaxWidth="380"
                                        TextAlignment="Center" Margin="0,16,0,0"/>
                             <TextBlock Text="Free forever — live streams carry a brief &quot;made with LlamaCasty!&quot; flash. A subscription removes it and adds alerts."
                                        Foreground="#888" FontSize="12" TextWrapping="Wrap" MaxWidth="380"
                                        TextAlignment="Center" Margin="0,12,0,0"/>
-                            <TextBlock Text="Made by gramps · llama chile shop" Foreground="#a0a0b0" FontSize="12"
+                            <TextBlock Text="Made by gramps · llama chile shop" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                                        HorizontalAlignment="Center" Margin="0,16,0,8"/>
 
                             <!-- Creator hub links -->
@@ -169,11 +169,11 @@
                         <!-- Licensing/legal panel -->
                         <StackPanel Visibility="{Binding IsLicensesOpen, Converter={StaticResource BoolToVis}}">
                             <TextBlock Text="Third-party notices &amp; license texts" FontSize="15" FontWeight="Bold"
-                                       Foreground="#e0e0e0" Margin="0,0,0,8"/>
-                            <Border Background="#10101e" CornerRadius="4" Padding="10" MaxHeight="360"
+                                       Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,8"/>
+                            <Border Background="{StaticResource Brush.SurfaceContainerLowest}" CornerRadius="4" Padding="10" MaxHeight="360"
                                     BorderBrush="#333" BorderThickness="1">
                                 <ScrollViewer VerticalScrollBarVisibility="Auto">
-                                    <TextBlock Text="{Binding LicensesText}" Foreground="#b8b8c8" FontSize="11"
+                                    <TextBlock Text="{Binding LicensesText}" Foreground="{StaticResource Brush.OnSurface}" FontSize="11"
                                                FontFamily="Consolas" TextWrapping="Wrap"/>
                                 </ScrollViewer>
                             </Border>
@@ -185,9 +185,9 @@
                         <!-- License key entry panel -->
                         <StackPanel Visibility="{Binding IsLicenseEntryOpen, Converter={StaticResource BoolToVis}}">
                             <TextBlock Text="Activate LlamaCasty Premium" FontSize="15" FontWeight="Bold"
-                                       Foreground="#e0e0e0" Margin="0,0,0,8"/>
+                                       Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,8"/>
                             <TextBlock Text="Enter your license key to remove the branding watermark."
-                                       Foreground="#a0a0b0" FontSize="12" TextWrapping="Wrap" Margin="0,0,0,12"/>
+                                       Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" TextWrapping="Wrap" Margin="0,0,0,12"/>
                             <TextBlock Text="License Key" Style="{StaticResource YtLabel}" Margin="0,0,0,4"/>
                             <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,12"
                                      Text="{Binding LicenseKey, UpdateSourceTrigger=PropertyChanged}"
@@ -195,7 +195,7 @@
                             <Button Content="Activate" Command="{Binding ActivateLicenseCommand}"
                                     Style="{StaticResource YtButton}" HorizontalAlignment="Right"
                                     Margin="0,0,0,8"/>
-                            <TextBlock Text="{Binding LicenseMessage}" Foreground="#a0a0b0" FontSize="12"
+                            <TextBlock Text="{Binding LicenseMessage}" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                                        TextWrapping="Wrap" Margin="0,0,0,8"/>
                             <Button Content="← Back to About" Style="{StaticResource YtButtonSecondary}"
                                     HorizontalAlignment="Left" Margin="0,8,0,0"
diff --git a/GoLiveWindow.xaml b/GoLiveWindow.xaml
index d0aecff..9c72da2 100644
--- a/GoLiveWindow.xaml
+++ b/GoLiveWindow.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.GoLiveWindow"
+<Window x:Class="ytLive.GoLiveWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Start Stream" Height="480" Width="520"
         Icon="/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Window.Resources>
         <ResourceDictionary>
@@ -22,12 +22,12 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Start Stream" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,16"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,16"/>
 
         <!-- ACCOUNT -->
         <StackPanel Grid.Row="1" Margin="0,0,0,16">
             <TextBlock Text="ACCOUNT" FontSize="12" FontWeight="SemiBold"
-                       Foreground="#a0a0b0" Margin="0,0,0,8"/>
+                       Foreground="{StaticResource Brush.OnSurfaceVariant}" Margin="0,0,0,8"/>
 
             <!-- signed in -->
             <StackPanel Orientation="Horizontal">
@@ -41,11 +41,11 @@
                         </Style.Triggers>
                     </Style>
                 </StackPanel.Style>
-                <Border Width="34" Height="34" CornerRadius="17" Background="#16213e" ClipToBounds="True"
+                <Border Width="34" Height="34" CornerRadius="17" Background="{StaticResource Brush.SurfaceContainer}" ClipToBounds="True"
                         VerticalAlignment="Center" Margin="0,0,10,0">
                     <Image Source="{Binding AccountAvatarUrl}" Stretch="UniformToFill"/>
                 </Border>
-                <TextBlock Text="{Binding AccountDisplayName}" Foreground="#e0e0e0" FontSize="14"
+                <TextBlock Text="{Binding AccountDisplayName}" Foreground="{StaticResource Brush.OnSurface}" FontSize="14"
                            VerticalAlignment="Center" Margin="0,0,12,0"/>
                 <Button Content="Change Account" Command="{Binding SignInCommand}"
                         Style="{StaticResource YtButtonSecondary}" VerticalAlignment="Center"/>
@@ -65,12 +65,12 @@
                 </StackPanel.Style>
                 <Button Content="Sign in to YouTube" Command="{Binding SignInCommand}"
                         Style="{StaticResource YtButtonSecondary}" Margin="0,0,10,0"/>
-                <TextBlock Text="Going live requires a YouTube account." Foreground="#a0a0b0" FontSize="12"
+                <TextBlock Text="Going live requires a YouTube account." Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
                            VerticalAlignment="Center"/>
             </StackPanel>
 
             <TextBlock Text="Signing in… open the browser to authorize, then come back here."
-                       Foreground="#e94560" FontSize="12" Margin="0,8,0,0">
+                       Foreground="{StaticResource Brush.Error}" FontSize="12" Margin="0,8,0,0">
                 <TextBlock.Style>
                     <Style TargetType="TextBlock">
                         <Setter Property="Visibility" Value="Collapsed"/>
@@ -87,7 +87,7 @@
         <!-- STREAM METADATA -->
         <StackPanel Grid.Row="2">
             <TextBlock Text="STREAM DETAILS" FontSize="12" FontWeight="SemiBold"
-                       Foreground="#a0a0b0" Margin="0,0,0,8"/>
+                       Foreground="{StaticResource Brush.OnSurfaceVariant}" Margin="0,0,0,8"/>
 
             <TextBlock Text="Title" Style="{StaticResource YtLabel}"/>
             <TextBox Style="{StaticResource YtTextBox}" Margin="0,0,0,12"
@@ -100,10 +100,10 @@
 
             <TextBlock Text="Visibility" Style="{StaticResource YtLabel}"/>
             <StackPanel Orientation="Horizontal" Margin="0,0,0,12">
-                <TextBlock Text="Private" Foreground="#e0e0e0" FontSize="14"
+                <TextBlock Text="Private" Foreground="{StaticResource Brush.OnSurface}" FontSize="14"
                            VerticalAlignment="Center"/>
                 <TextBlock Text="Streams always start Private — change it on YouTube after going live."
-                           Foreground="#a0a0b0" FontSize="12" TextWrapping="Wrap"
+                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12" TextWrapping="Wrap"
                            Margin="10,0,0,0" VerticalAlignment="Center"/>
             </StackPanel>
         </StackPanel>
diff --git a/HotkeyConfigDialog.xaml b/HotkeyConfigDialog.xaml
index bb5bdc5..fa83dc7 100644
--- a/HotkeyConfigDialog.xaml
+++ b/HotkeyConfigDialog.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.HotkeyConfigDialog"
+<Window x:Class="ytLive.HotkeyConfigDialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Global Hotkey Bindings" Height="520" Width="480"
         Icon="/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Window.Resources>
         <BooleanToVisibilityConverter x:Key="BoolToVis"/>
@@ -20,7 +20,7 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Global Hotkey Bindings" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,12"/>
 
         <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
             <ItemsControl ItemsSource="{Binding Rows}">
@@ -34,7 +34,7 @@
                             </Grid.ColumnDefinitions>
 
                             <TextBlock Grid.Column="0" Text="{Binding ActionName}"
-                                       Foreground="#e0e0e0" FontSize="13"
+                                       Foreground="{StaticResource Brush.OnSurface}" FontSize="13"
                                        VerticalAlignment="Center" Margin="0,0,12,0"/>
 
                             <Button Grid.Column="1" Click="ChordButton_Click"
@@ -42,8 +42,8 @@
                                     HorizontalAlignment="Left" MinWidth="140"
                                     Padding="10,5" FontSize="13"
                                     VerticalAlignment="Center">
-                                <Border Background="#16213e" CornerRadius="4" Padding="10,5">
-                                    <TextBlock Text="{Binding DisplayText}" Foreground="#e0e0e0"
+                                <Border Background="{StaticResource Brush.SurfaceContainer}" CornerRadius="4" Padding="10,5">
+                                    <TextBlock Text="{Binding DisplayText}" Foreground="{StaticResource Brush.OnSurface}"
                                                FontSize="13"/>
                                 </Border>
                             </Button>
@@ -51,7 +51,7 @@
                             <Button Grid.Column="2" Content="✕" Click="UnbindButton_Click"
                                     Tag="{Binding}" Cursor="Hand"
                                     ToolTip="Remove binding"
-                                    FontSize="12" Foreground="#8a93a8"
+                                    FontSize="12" Foreground="{StaticResource Brush.OnSurfaceVariant}"
                                     Background="Transparent" BorderThickness="0"
                                     Padding="6,4" VerticalAlignment="Center">
                                 <Button.Style>
@@ -71,8 +71,8 @@
         </ScrollViewer>
 
         <!-- Conflict warning: hidden when no message -->
-        <Border Grid.Row="2" Background="#3d1a1a" CornerRadius="4" Padding="10,8"
-                Margin="0,8,0,0" BorderBrush="#e94560" BorderThickness="1">
+        <Border Grid.Row="2" Background="{StaticResource Brush.ErrorContainer}" CornerRadius="4" Padding="10,8"
+                Margin="0,8,0,0" BorderBrush="{StaticResource Brush.Error}" BorderThickness="1">
             <Border.Style>
                 <Style TargetType="Border">
                     <Style.Triggers>
@@ -82,7 +82,7 @@
                     </Style.Triggers>
                 </Style>
             </Border.Style>
-            <TextBlock Text="{Binding ConflictMessage}" Foreground="#e94560"
+            <TextBlock Text="{Binding ConflictMessage}" Foreground="{StaticResource Brush.Error}"
                        FontSize="12" TextWrapping="Wrap"/>
         </Border>
 
diff --git a/KeepBroadcastDialog.xaml b/KeepBroadcastDialog.xaml
index 52416d8..17ba354 100644
--- a/KeepBroadcastDialog.xaml
+++ b/KeepBroadcastDialog.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.KeepBroadcastDialog"
+<Window x:Class="ytLive.KeepBroadcastDialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Keep this broadcast?" Height="240" Width="460"
         Icon="/ytLive;component/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Grid Margin="24">
         <Grid.RowDefinitions>
@@ -14,9 +14,9 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Keep this broadcast?" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,12"/>
 
-        <TextBlock Grid.Row="1" x:Name="MessageText" TextWrapping="Wrap" Foreground="#a0a0b0" FontSize="13"
+        <TextBlock Grid.Row="1" x:Name="MessageText" TextWrapping="Wrap" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13"
                    Margin="0,0,0,16"/>
 
         <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
diff --git a/MicPickerDialog.xaml b/MicPickerDialog.xaml
index aa4ffa1..1c261a8 100644
--- a/MicPickerDialog.xaml
+++ b/MicPickerDialog.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.MicPickerDialog"
+<Window x:Class="ytLive.MicPickerDialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Select Microphone" Height="340" Width="460"
         Icon="/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Window.Resources>
         <ResourceDictionary>
@@ -21,10 +21,10 @@
                             </Border>
                             <ControlTemplate.Triggers>
                                 <Trigger Property="IsMouseOver" Value="True">
-                                    <Setter TargetName="Bd" Property="Background" Value="#1c2a52"/>
+                                    <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
                                 </Trigger>
                                 <Trigger Property="IsSelected" Value="True">
-                                    <Setter TargetName="Bd" Property="Background" Value="#2a2450"/>
+                                    <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
                                 </Trigger>
                             </ControlTemplate.Triggers>
                         </ControlTemplate>
@@ -43,10 +43,10 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Select Microphone" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,14"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,14"/>
 
         <TextBlock Grid.Row="1" Text="Pick the microphone to use as your voice source."
-                   Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,12"/>
 
         <Grid Grid.Row="2">
             <ListBox Background="Transparent" BorderThickness="0"
@@ -58,7 +58,7 @@
                     <DataTemplate>
                         <StackPanel Orientation="Horizontal">
                             <TextBlock Text="🎙️" FontSize="15" VerticalAlignment="Center" Margin="0,0,10,0"/>
-                            <TextBlock Text="{Binding Name}" Foreground="#e0e0e0" FontSize="13"
+                            <TextBlock Text="{Binding Name}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"
                                        VerticalAlignment="Center" TextTrimming="CharacterEllipsis"/>
                         </StackPanel>
                     </DataTemplate>
@@ -67,15 +67,15 @@
 
             <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"
                         Visibility="{Binding IsLoading, Converter={StaticResource BoolToVis}}">
-                <TextBlock Text="Searching for microphones…" Foreground="#a0a0b0" FontSize="13"/>
+                <TextBlock Text="Searching for microphones…" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13"/>
             </StackPanel>
 
             <StackPanel VerticalAlignment="Center"
                         Visibility="{Binding NoMicrophones, Converter={StaticResource BoolToVis}}">
-                <TextBlock Text="No microphones found" Foreground="#e0e0e0" FontSize="15"
+                <TextBlock Text="No microphones found" Foreground="{StaticResource Brush.OnSurface}" FontSize="15"
                            FontWeight="SemiBold" HorizontalAlignment="Center"/>
                 <TextBlock Text="Check that a microphone is connected and that Windows microphone access is enabled."
-                           Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" MaxWidth="360"
+                           Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" TextWrapping="Wrap" MaxWidth="360"
                            TextAlignment="Center" HorizontalAlignment="Center" Margin="0,8,0,0"/>
             </StackPanel>
         </Grid>
diff --git a/RenameRecordingDialog.xaml b/RenameRecordingDialog.xaml
index a673e6a..15d9202 100644
--- a/RenameRecordingDialog.xaml
+++ b/RenameRecordingDialog.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.RenameRecordingDialog"
+<Window x:Class="ytLive.RenameRecordingDialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Rename Recording" Height="304" Width="460"
         Icon="/ytLive;component/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Grid Margin="24">
         <Grid.RowDefinitions>
@@ -16,9 +16,9 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Rename Recording" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,12"/>
 
-        <TextBlock Grid.Row="1" TextWrapping="Wrap" Foreground="#a0a0b0" FontSize="13"
+        <TextBlock Grid.Row="1" TextWrapping="Wrap" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13"
                    Margin="0,0,0,16">
             The recording is saved with an auto-generated name. Give it a clearer name —
             leave it empty to keep the auto name.
diff --git a/ReuseImageDialog.xaml b/ReuseImageDialog.xaml
index b9a7f9a..f1f86ca 100644
--- a/ReuseImageDialog.xaml
+++ b/ReuseImageDialog.xaml
@@ -1,10 +1,10 @@
-<Window x:Class="ytLive.ReuseImageDialog"
+<Window x:Class="ytLive.ReuseImageDialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Add Image" Height="380" Width="460"
         Icon="/Assets/llamacasty-icon.png"
         WindowStartupLocation="CenterOwner" ResizeMode="NoResize"
-        ShowInTaskbar="False" Background="#1a1a2e">
+        ShowInTaskbar="False" Background="{StaticResource Brush.Background}">
 
     <Window.Resources>
         <ResourceDictionary>
@@ -20,10 +20,10 @@
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsMouseOver" Value="True">
-                                <Setter TargetName="Bd" Property="Background" Value="#1c2a52"/>
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
                             </Trigger>
                             <Trigger Property="IsSelected" Value="True">
-                                <Setter TargetName="Bd" Property="Background" Value="#2a2450"/>
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
@@ -42,10 +42,10 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Add Image" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,14"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,14"/>
 
         <TextBlock Grid.Row="1" Text="Re-use an image that's already in your stream, or add a new one?"
-                   Foreground="#a0a0b0" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="13" TextWrapping="Wrap" Margin="0,0,0,12"/>
 
         <ListBox Grid.Row="2" Background="Transparent" BorderThickness="0"
                  ItemContainerStyle="{StaticResource CandidateItem}"
@@ -59,11 +59,11 @@
                             <ColumnDefinition Width="*"/>
                         </Grid.ColumnDefinitions>
 
-                        <Border Background="#0f3460" CornerRadius="3" Width="48" Height="27" ClipToBounds="True">
+                        <Border Background="{StaticResource Brush.SurfaceContainerHigh}" CornerRadius="3" Width="48" Height="27" ClipToBounds="True">
                             <Image Source="{Binding Thumbnail}" Stretch="Uniform" Margin="1"/>
                         </Border>
 
-                        <TextBlock Grid.Column="1" Text="{Binding Header}" Foreground="#e0e0e0" FontSize="13"
+                        <TextBlock Grid.Column="1" Text="{Binding Header}" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"
                                    VerticalAlignment="Center" Margin="10,0,0,0"
                                    TextTrimming="CharacterEllipsis"/>
                     </Grid>
diff --git a/SocialsDialog.xaml b/SocialsDialog.xaml
index 87a5161..2a8b103 100644
--- a/SocialsDialog.xaml
+++ b/SocialsDialog.xaml
@@ -1,4 +1,4 @@
-<UserControl x:Class="ytLive.SocialsDialog"
+<UserControl x:Class="ytLive.SocialsDialog"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
@@ -18,26 +18,26 @@
         </Grid.RowDefinitions>
 
         <TextBlock Grid.Row="0" Text="Social Media Site Promotion" FontSize="18" FontWeight="Bold"
-                   Foreground="#e0e0e0" Margin="0,0,0,12"/>
+                   Foreground="{StaticResource Brush.OnSurface}" Margin="0,0,0,12"/>
 
         <!-- Show/hide the bar on the stream -->
         <CheckBox Grid.Row="1" IsChecked="{Binding BarEnabled}" Style="{StaticResource YtCheckBox}" Margin="0,0,0,10">
-            <TextBlock Text="Show the social bar on the stream" Foreground="#e0e0e0" FontSize="13"/>
+            <TextBlock Text="Show the social bar on the stream" Foreground="{StaticResource Brush.OnSurface}" FontSize="13"/>
         </CheckBox>
 
         <!-- Sign-in gate: the first slot is always your YouTube channel -->
-        <Border Grid.Row="2" Background="#16213e" CornerRadius="5" Padding="10,8" Margin="0,0,0,10"
+        <Border Grid.Row="2" Background="{StaticResource Brush.SurfaceContainer}" CornerRadius="5" Padding="10,8" Margin="0,0,0,10"
                 Visibility="{Binding ShowSignInBanner, Converter={StaticResource BoolToVis}}">
             <StackPanel>
                 <TextBlock Text="Sign in to YouTube first — the first slot is your channel."
-                           Foreground="#e0e0e0" FontSize="12" TextWrapping="Wrap"/>
+                           Foreground="{StaticResource Brush.OnSurface}" FontSize="12" TextWrapping="Wrap"/>
                 <Button Content="Sign in to YouTube" Command="{Binding SignInCommand}"
                         Style="{StaticResource YtButtonSecondary}" HorizontalAlignment="Left"
                         Margin="0,8,0,0" Padding="12,4" FontSize="11"/>
             </StackPanel>
         </Border>
         <TextBlock Grid.Row="2" Text="Signing in… open the browser to authorize, then come back here."
-                   Foreground="#e94560" FontSize="12" Margin="0,0,0,10"
+                   Foreground="{StaticResource Brush.Error}" FontSize="12" Margin="0,0,0,10"
                    Visibility="{Binding IsBusy, Converter={StaticResource BoolToVis}}"/>
 
         <!-- The six fixed slots -->
@@ -54,17 +54,17 @@
 
                             <!-- Service icon: logo, lock (Premium) or do-not (empty/invalid) -->
                             <Border Grid.Column="0" Width="30" Height="30" CornerRadius="15"
-                                    Background="#16213e" HorizontalAlignment="Left" VerticalAlignment="Top">
+                                    Background="{StaticResource Brush.SurfaceContainer}" HorizontalAlignment="Left" VerticalAlignment="Top">
                                 <Grid>
                                     <Path Data="{Binding LogoData}" Fill="White" Stretch="Uniform"
                                           Width="15" Height="15" HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Visibility="{Binding ShowLogo, Converter={StaticResource BoolToVis}}"/>
-                                    <Path Data="{Binding LockedIconData}" Fill="#8a93a8" Stretch="Uniform"
+                                    <Path Data="{Binding LockedIconData}" Fill="{StaticResource Brush.OnSurfaceVariant}" Stretch="Uniform"
                                           Width="15" Height="15" HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Visibility="{Binding IsLocked, Converter={StaticResource BoolToVis}}"/>
-                                    <Path Data="{Binding DoNotIconData}" Fill="#5a5a6e" Stretch="Uniform"
+                                    <Path Data="{Binding DoNotIconData}" Fill="{StaticResource Brush.OnSurfaceDisabled}" Stretch="Uniform"
                                           Width="15" Height="15" HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Visibility="{Binding ShowDoNot, Converter={StaticResource BoolToVis}}"/>
@@ -73,7 +73,7 @@
 
                             <!-- Handle text / edit box / status -->
                             <Grid Grid.Column="1" Margin="10,0,8,0">
-                                <TextBlock Text="{Binding DisplayText}" Foreground="#e0e0e0" FontSize="14"
+                                <TextBlock Text="{Binding DisplayText}" Foreground="{StaticResource Brush.OnSurface}" FontSize="14"
                                            VerticalAlignment="Top" Margin="0,6,0,0"
                                            TextTrimming="CharacterEllipsis"
                                            Visibility="{Binding ShowDisplay, Converter={StaticResource BoolToVis}}"/>
@@ -81,10 +81,10 @@
                                          Style="{StaticResource YtTextBox}" FontSize="13"
                                          KeyDown="SocialEdit_KeyDown" LostFocus="SocialEdit_LostFocus"
                                          Visibility="{Binding ShowEditBox, Converter={StaticResource BoolToVis}}"/>
-                                <TextBlock Text="{Binding Error}" Foreground="#e94560" FontSize="11"
+                                <TextBlock Text="{Binding Error}" Foreground="{StaticResource Brush.Error}" FontSize="11"
                                            TextWrapping="Wrap" Margin="0,32,0,0"
                                            Visibility="{Binding ShowError, Converter={StaticResource BoolToVis}}"/>
-                                <TextBlock Text="Checking…" Foreground="#a0a0b0" FontSize="11" Margin="0,32,0,0"
+                                <TextBlock Text="Checking…" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11" Margin="0,32,0,0"
                                            Visibility="{Binding ShowBusy, Converter={StaticResource BoolToVis}}"/>
                             </Grid>
 
@@ -105,7 +105,7 @@
                                         Visibility="{Binding ShowEditButton, Converter={StaticResource BoolToVis}}"/>
                                 <Button Content="&#x1F5D1;&#xFE0F;" Click="SlotDelete_Click" Tag="{Binding Index}"
                                         Style="{StaticResource IconButton}" Width="26" Height="26"
-                                        ToolTip="Remove" FontSize="12" Foreground="#e94560"
+                                        ToolTip="Remove" FontSize="12" Foreground="{StaticResource Brush.Error}"
                                         Visibility="{Binding ShowDeleteButton, Converter={StaticResource BoolToVis}}"/>
                             </StackPanel>
                         </Grid>
diff --git a/ytLive.Tests/DesignTokensTests.cs b/ytLive.Tests/DesignTokensTests.cs
index 66ad649..285f0ee 100644
--- a/ytLive.Tests/DesignTokensTests.cs
+++ b/ytLive.Tests/DesignTokensTests.cs
@@ -76,7 +76,11 @@ public class DesignTokensTests
         // 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/PreviewPane.xaml" };
+                                 "Controls/PreviewPane.xaml",
+                                 "Controls/OverlayHost.xaml", "SocialsDialog.xaml", "GoLiveWindow.xaml",
+                                 "HotkeyConfigDialog.xaml", "MicPickerDialog.xaml", "CameraPickerDialog.xaml",
+                                 "ReuseImageDialog.xaml", "RenameRecordingDialog.xaml",
+                                 "KeepBroadcastDialog.xaml" };
 
         foreach (var file in converted)
         {