From 4ef84f2a972d642abf7f643712d1093662d5d723 Mon Sep 17 00:00:00 2001
From: gramps <gramps@llamachile.shop>
Date: Fri, 30 Oct 2026 07:47:00 -0700
Subject: [PATCH] design: convert Themes/Controls.xaml to tokens (surface 1 of
 the sweep)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The theme file that every control inherits is now token-driven: 73 hardcoded colours became
Brush.* references, and the two role changes the standard requires landed here first.

- Red leaves the chrome. The seven #e94560 sites (base button, focus borders, checked box and
  segment backgrounds, the selected-layer accent strip) were all interactive/selection roles,
  so they are blue now. Red stays for live/record only.
- The slider was green: its fill and gloss knob are blue now, with the track on
  SurfaceContainerLowest. The old green fill predated the standard.
- The pill toggle was ON = green, OFF = red — a settings control using the live colour. It is
  now OFF = neutral surface, ON = blue.
- Added scrim-soft/scrim-strong tokens (#22FFFFFF/#26FFFFFF) for the existing white washes, and
  Color.* resources for the two gradients (a GradientStop needs a Color, not a Brush).

Guard: DesignTokensTests gains Converted_surfaces_carry_no_raw_colour — a declared list of
converted files, so each sweep commit is guarded as it lands instead of waiting for one global
grep at the end. Pure white/black highlights are the only allowed literals.

No layout, spacing or behaviour change: this unit is colour only.
---
 DESIGN.md                         |   2 +
 Themes/Controls.xaml              | 144 +++++++++++++-----------------
 Themes/Tokens.xaml                |   7 ++
 ytLive.Tests/DesignTokensTests.cs |  26 +++++-
 4 files changed, 96 insertions(+), 83 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index a51c4ed..9e55779 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -25,6 +25,8 @@
 | `surface-bright` | `#31394d` | Lightest surface, rare use (strong hover) |
 | `outline` | `#334155` | Borders, dividers |
 | `outline-variant` | `#1e293b` | Subtle dividers, inactive meter segments |
+| `scrim-soft` | `#22FFFFFF` | Hover/press wash over a surface (13% white) |
+| `scrim-strong` | `#26FFFFFF` | Stronger wash — selected icon, dimmed image (15% white) |
 
 ### Text
 
diff --git a/Themes/Controls.xaml b/Themes/Controls.xaml
index 0ed5c54..3f63732 100644
--- a/Themes/Controls.xaml
+++ b/Themes/Controls.xaml
@@ -4,7 +4,7 @@
 
     <!-- Base button style -->
     <Style x:Key="YtButton" TargetType="Button">
-        <Setter Property="Background" Value="#e94560"/>
+        <Setter Property="Background" Value="{StaticResource Brush.Tertiary}"/>
         <Setter Property="Foreground" Value="White"/>
         <Setter Property="FontSize" Value="13"/>
         <Setter Property="FontWeight" Value="SemiBold"/>
@@ -39,12 +39,12 @@
     </Style>
 
     <Style x:Key="YtButtonSecondary" TargetType="Button" BasedOn="{StaticResource YtButton}">
-        <Setter Property="Background" Value="#16213e"/>
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainer}"/>
     </Style>
 
     <Style x:Key="IconButton" TargetType="Button">
         <Setter Property="Background" Value="Transparent"/>
-        <Setter Property="Foreground" Value="#d0d0d0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
         <Setter Property="BorderThickness" Value="0"/>
         <Setter Property="Padding" Value="4"/>
         <Setter Property="Cursor" Value="Hand"/>
@@ -61,7 +61,7 @@
         </Setter>
         <Style.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
-                <Setter Property="Background" Value="#26ffffff"/>
+                <Setter Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
             </Trigger>
         </Style.Triggers>
     </Style>
@@ -90,9 +90,9 @@
     </Style>
 
     <Style x:Key="YtTextBox" TargetType="TextBox">
-        <Setter Property="Background" Value="#0f3460"/>
-        <Setter Property="Foreground" Value="#e0e0e0"/>
-        <Setter Property="BorderBrush" Value="#2a3a5e"/>
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="Padding" Value="8,6"/>
         <Setter Property="FontSize" Value="13"/>
@@ -108,10 +108,10 @@
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="Bd" Property="BorderBrush" Value="#3d5076"/>
+                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Brush.SurfaceBright}"/>
                         </Trigger>
                         <Trigger Property="IsKeyboardFocusWithin" Value="True">
-                            <Setter TargetName="Bd" Property="BorderBrush" Value="#e94560"/>
+                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
                             <Setter TargetName="Bd" Property="Opacity" Value="0.45"/>
@@ -136,7 +136,7 @@
          sticks out of the dark panels, so every check box carries this style
          (the guard test in ytLive.Tests/PropertiesStyleTests.cs enforces it). -->
     <Style x:Key="YtCheckBox" TargetType="CheckBox">
-        <Setter Property="Foreground" Value="#e0e0e0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
         <Setter Property="FontSize" Value="11"/>
         <Setter Property="Cursor" Value="Hand"/>
         <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -150,7 +150,7 @@
                             <ColumnDefinition Width="*"/>
                         </Grid.ColumnDefinitions>
                         <Border x:Name="Box" Grid.Column="0" Width="14" Height="14" CornerRadius="3"
-                                Background="#0f3460" BorderBrush="#2a3a5e" BorderThickness="1"
+                                Background="{StaticResource Brush.SurfaceContainerHigh}" BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"
                                 VerticalAlignment="Center">
                             <Path x:Name="Tick" Data="M2.5,7.2 L5.8,10.5 L11.5,3.8"
                                   Stroke="#ffffff" StrokeThickness="2"
@@ -162,14 +162,14 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="Box" Property="BorderBrush" Value="#3d5076"/>
+                            <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Brush.SurfaceBright}"/>
                         </Trigger>
                         <Trigger Property="IsKeyboardFocusWithin" Value="True">
-                            <Setter TargetName="Box" Property="BorderBrush" Value="#e94560"/>
+                            <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
                         </Trigger>
                         <Trigger Property="IsChecked" Value="True">
-                            <Setter TargetName="Box" Property="Background" Value="#e94560"/>
-                            <Setter TargetName="Box" Property="BorderBrush" Value="#e94560"/>
+                            <Setter TargetName="Box" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
+                            <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
                             <Setter TargetName="Tick" Property="Visibility" Value="Visible"/>
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
@@ -182,10 +182,10 @@
     </Style>
 
     <Style x:Key="YtComboBox" TargetType="ComboBox">
-        <Setter Property="Foreground" Value="#e0e0e0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
         <Setter Property="FontSize" Value="13"/>
-        <Setter Property="Background" Value="#0f3460"/>
-        <Setter Property="BorderBrush" Value="#2a3a5e"/>
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="Padding" Value="8,6"/>
         <Setter Property="MinHeight" Value="30"/>
@@ -195,7 +195,7 @@
         <Setter Property="ItemContainerStyle">
             <Setter.Value>
                 <Style TargetType="ComboBoxItem">
-                    <Setter Property="Foreground" Value="#e0e0e0"/>
+                    <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
                     <Setter Property="FontSize" Value="13"/>
                     <Setter Property="Padding" Value="10,7"/>
                     <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -209,10 +209,10 @@
                                 </Border>
                                 <ControlTemplate.Triggers>
                                     <Trigger Property="IsHighlighted" Value="True">
-                                        <Setter TargetName="Bd" Property="Background" Value="#26ffffff"/>
+                                        <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
                                     </Trigger>
                                     <Trigger Property="IsSelected" Value="True">
-                                        <Setter TargetName="Bd" Property="Background" Value="#1a3a66"/>
+                                        <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
                                         <Setter Property="Foreground" Value="White"/>
                                     </Trigger>
                                 </ControlTemplate.Triggers>
@@ -243,13 +243,13 @@
                             <ToggleButton.Template>
                                 <ControlTemplate TargetType="ToggleButton">
                                     <Grid Background="Transparent">
-                                        <Path x:Name="Chevron" Data="M0,0 L4,4 L8,0" Stroke="#8a93a8"
+                                        <Path x:Name="Chevron" Data="M0,0 L4,4 L8,0" Stroke="{StaticResource Brush.OnSurfaceVariant}"
                                               StrokeThickness="1.5" HorizontalAlignment="Right"
                                               VerticalAlignment="Center" Margin="0,0,10,0"/>
                                     </Grid>
                                     <ControlTemplate.Triggers>
                                         <Trigger Property="IsMouseOver" Value="True">
-                                            <Setter TargetName="Chevron" Property="Stroke" Value="#c8d0e0"/>
+                                            <Setter TargetName="Chevron" Property="Stroke" Value="{StaticResource Brush.OnSurface}"/>
                                         </Trigger>
                                         <Trigger Property="IsEnabled" Value="False">
                                             <Setter Property="Opacity" Value="0.45"/>
@@ -261,7 +261,7 @@
                         <Popup x:Name="PART_Popup" Placement="Bottom" AllowsTransparency="True"
                                PopupAnimation="Fade" StaysOpen="False"
                                IsOpen="{TemplateBinding IsDropDownOpen}">
-                            <Border Background="#16213e" BorderBrush="#2a3a5e" BorderThickness="1"
+                            <Border Background="{StaticResource Brush.SurfaceContainer}" BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"
                                     CornerRadius="5" Padding="2" Margin="0,4,0,0"
                                     SnapsToDevicePixels="True">
                                 <ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}"
@@ -273,10 +273,10 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="Chrome" Property="Background" Value="#163a6b"/>
+                            <Setter TargetName="Chrome" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
                         </Trigger>
                         <Trigger Property="IsDropDownOpen" Value="True">
-                            <Setter TargetName="Chrome" Property="Background" Value="#163a6b"/>
+                            <Setter TargetName="Chrome" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
                             <Setter TargetName="Chrome" Property="Opacity" Value="0.45"/>
@@ -304,13 +304,13 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Thumb">
-                    <Border x:Name="ThumbBd" Background="#2c3c5e" CornerRadius="4" Margin="2"/>
+                    <Border x:Name="ThumbBd" Background="{StaticResource Brush.SurfaceBright}" CornerRadius="4" Margin="2"/>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="ThumbBd" Property="Background" Value="#3d5076"/>
+                            <Setter TargetName="ThumbBd" Property="Background" Value="{StaticResource Brush.SurfaceBright}"/>
                         </Trigger>
                         <Trigger Property="IsDragging" Value="True">
-                            <Setter TargetName="ThumbBd" Property="Background" Value="#4a5f8a"/>
+                            <Setter TargetName="ThumbBd" Property="Background" Value="{StaticResource Brush.SurfaceBright}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -352,32 +352,11 @@
         </Style.Triggers>
     </Style>
 
-    <!-- Slider: slim and dimensional — gradient track, beveled fill, gloss-sphere
-         thumb. The filled side sits on a 5px pill aligned with the track; the
-         click target stays the full track height. -->
-    <LinearGradientBrush x:Key="YtSliderTrackBrush" StartPoint="0,0" EndPoint="0,1">
-        <GradientStop Color="#0f1b33" Offset="0"/>
-        <GradientStop Color="#283b60" Offset="1"/>
-    </LinearGradientBrush>
-
-    <LinearGradientBrush x:Key="YtSliderFillBrush" StartPoint="0,0" EndPoint="0,1">
-        <GradientStop Color="#4fe097" Offset="0"/>
-        <GradientStop Color="#2dbd7a" Offset="0.5"/>
-        <GradientStop Color="#1a9e63" Offset="1"/>
-    </LinearGradientBrush>
-
+    <!-- Slider: slim track, solid interactive fill. Blue is the only interactive accent
+         (DESIGN.md); the pre-standard green fill is gone. -->
     <RadialGradientBrush x:Key="YtSliderKnobBrush" Center="0.35,0.3" GradientOrigin="0.35,0.3">
         <GradientStop Color="#ffffff" Offset="0"/>
-        <GradientStop Color="#d7f5e6" Offset="0.22"/>
-        <GradientStop Color="#3ed588" Offset="0.72"/>
-        <GradientStop Color="#137a4d" Offset="1"/>
-    </RadialGradientBrush>
-
-    <RadialGradientBrush x:Key="YtSliderKnobHoverBrush" Center="0.35,0.3" GradientOrigin="0.35,0.3">
-        <GradientStop Color="#ffffff" Offset="0"/>
-        <GradientStop Color="#e6faef" Offset="0.22"/>
-        <GradientStop Color="#57e9a1" Offset="0.72"/>
-        <GradientStop Color="#1b9a63" Offset="1"/>
+        <GradientStop Color="{StaticResource Color.Tertiary}" Offset="1"/>
     </RadialGradientBrush>
 
     <Style x:Key="YtSliderTrackButton" TargetType="RepeatButton">
@@ -398,8 +377,8 @@
                 <ControlTemplate TargetType="RepeatButton">
                     <Grid>
                         <Border Height="5" VerticalAlignment="Center"
-                                Background="{StaticResource YtSliderFillBrush}"
-                                BorderBrush="#0f7a4e" BorderThickness="1" CornerRadius="2.5"/>
+                                Background="{StaticResource Brush.Tertiary}"
+                                BorderThickness="1" CornerRadius="2.5"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
@@ -413,7 +392,7 @@
                 <ControlTemplate TargetType="Thumb">
                     <Grid Width="13" Height="13">
                         <Ellipse x:Name="Knob" Fill="{StaticResource YtSliderKnobBrush}"
-                                 Stroke="#0b1626" StrokeThickness="1">
+                                 Stroke="{StaticResource Brush.Background}" StrokeThickness="1">
                             <Ellipse.Effect>
                                 <DropShadowEffect BlurRadius="3" ShadowDepth="1" Opacity="0.55"/>
                             </Ellipse.Effect>
@@ -441,8 +420,8 @@
                 <ControlTemplate TargetType="Slider">
                     <Grid VerticalAlignment="Center">
                         <Border Height="5" CornerRadius="2.5" VerticalAlignment="Center"
-                                Background="{StaticResource YtSliderTrackBrush}"
-                                BorderBrush="#0a1424" BorderThickness="1"/>
+                                Background="{StaticResource Brush.SurfaceContainerLowest}"
+                                BorderBrush="{StaticResource Brush.Background}" BorderThickness="1"/>
                         <Track x:Name="PART_Track" Height="18">
                             <Track.DecreaseRepeatButton>
                                 <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
@@ -464,9 +443,9 @@
 
     <!-- Dark tooltip -->
     <Style TargetType="ToolTip">
-        <Setter Property="Background" Value="#1a1a2e"/>
-        <Setter Property="Foreground" Value="#e0e0e0"/>
-        <Setter Property="BorderBrush" Value="#2a3a5e"/>
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerLow}"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="Padding" Value="8,6"/>
         <Setter Property="FontSize" Value="12"/>
@@ -486,7 +465,7 @@
             <Setter.Value>
                 <DataTemplate>
                     <TextBlock Text="{Binding}" TextWrapping="Wrap" MaxWidth="320"
-                               Foreground="#e0e0e0" FontSize="12"/>
+                               Foreground="{StaticResource Brush.OnSurface}" FontSize="12"/>
                 </DataTemplate>
             </Setter.Value>
         </Setter>
@@ -494,9 +473,9 @@
 
     <!-- Dark context menu -->
     <Style TargetType="ContextMenu">
-        <Setter Property="Background" Value="#16213e"/>
-        <Setter Property="Foreground" Value="#e0e0e0"/>
-        <Setter Property="BorderBrush" Value="#2a3a5e"/>
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainer}"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="Padding" Value="3"/>
         <Setter Property="SnapsToDevicePixels" Value="True"/>
@@ -517,7 +496,7 @@
     </Style>
 
     <Style TargetType="MenuItem">
-        <Setter Property="Foreground" Value="#e0e0e0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="Padding" Value="10,6"/>
         <Setter Property="Template">
@@ -550,7 +529,7 @@
                                AllowsTransparency="True"
                                PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
                                Focusable="False">
-                            <Border Background="#16213e" BorderBrush="#2a3a5e"
+                            <Border Background="{StaticResource Brush.SurfaceContainer}" BorderBrush="{StaticResource Brush.Outline}"
                                     BorderThickness="1" CornerRadius="5" Padding="3">
                                 <Grid IsSharedSizeScope="True">
                                     <ScrollViewer VerticalScrollBarVisibility="Auto">
@@ -562,10 +541,10 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsHighlighted" Value="True">
-                            <Setter TargetName="Bd" Property="Background" Value="#26ffffff"/>
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
                         </Trigger>
                         <Trigger Property="IsSubmenuOpen" Value="True">
-                            <Setter TargetName="Bd" Property="Background" Value="#26ffffff"/>
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimStrong}"/>
                         </Trigger>
                         <Trigger Property="IsChecked" Value="True">
                             <Setter TargetName="CheckGlyph" Property="Visibility" Value="Visible"/>
@@ -588,7 +567,7 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Separator">
-                    <Border Height="1" Background="#2a3a5e" Margin="8,4"/>
+                    <Border Height="1" Background="{StaticResource Brush.Outline}" Margin="8,4"/>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
@@ -596,7 +575,7 @@
 
     <!-- Dark list item (used by all list boxes) -->
     <Style x:Key="YtListBoxItem" TargetType="ListBoxItem">
-        <Setter Property="Foreground" Value="#e0e0e0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
         <Setter Property="Padding" Value="4,2"/>
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -605,7 +584,7 @@
                 <ControlTemplate TargetType="ListBoxItem">
                     <Grid>
                         <Border x:Name="Accent" Width="3" HorizontalAlignment="Left" CornerRadius="1"
-                                Background="#e94560" Margin="0,2" Opacity="0"
+                                Background="{StaticResource Brush.Tertiary}" Margin="0,2" Opacity="0"
                                 VerticalAlignment="Stretch"/>
                         <Border x:Name="Bd" Background="{TemplateBinding Background}"
                                 CornerRadius="3" Padding="{TemplateBinding Padding}" Margin="0,1">
@@ -615,10 +594,10 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="Bd" Property="Background" Value="#22ffffff"/>
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.ScrimSoft}"/>
                         </Trigger>
                         <Trigger Property="IsSelected" Value="True">
-                            <Setter TargetName="Bd" Property="Background" Value="#1a3a66"/>
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
                             <Setter TargetName="Accent" Property="Opacity" Value="1"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
@@ -628,19 +607,19 @@
     </Style>
 
     <Style x:Key="YtLabel" TargetType="TextBlock">
-        <Setter Property="Foreground" Value="#a0a0b0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
         <Setter Property="FontSize" Value="12"/>
     </Style>
 
     <Style x:Key="SectionHeader" TargetType="TextBlock">
-        <Setter Property="Foreground" Value="#e0e0e0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="FontWeight" Value="SemiBold"/>
         <Setter Property="Margin" Value="0,0,0,8"/>
     </Style>
 
     <Style x:Key="SubHeader" TargetType="TextBlock">
-        <Setter Property="Foreground" Value="#a0a0b0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
         <Setter Property="FontSize" Value="11"/>
         <Setter Property="FontWeight" Value="SemiBold"/>
         <Setter Property="Margin" Value="4,0,0,4"/>
@@ -655,12 +634,13 @@
         <Setter Property="Margin" Value="8,0,0,0"/>
     </Style>
 
-    <!-- Sliding pill toggle: ON = green, OFF = red (#ef4444) -->
+    <!-- Sliding pill toggle: OFF = neutral, ON = blue. Red is reserved for live/record
+         (DESIGN.md), so a settings toggle can never use it. -->
     <Style x:Key="PillToggle" TargetType="ToggleButton">
         <Setter Property="Width" Value="36"/>
         <Setter Property="Height" Value="18"/>
         <Setter Property="Cursor" Value="Hand"/>
-        <Setter Property="Background" Value="#ef4444"/>
+        <Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
@@ -680,7 +660,7 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsChecked" Value="True">
-                            <Setter TargetName="Track" Property="Background" Value="#22c55e"/>
+                            <Setter TargetName="Track" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
                             <Trigger.EnterActions>
                                 <BeginStoryboard>
                                     <Storyboard>
@@ -729,7 +709,7 @@
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsChecked" Value="True">
-                            <Setter TargetName="Seg" Property="Background" Value="#e94560"/>
+                            <Setter TargetName="Seg" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -738,7 +718,7 @@
     </Style>
 
     <Style x:Key="SegmentLabel" TargetType="TextBlock">
-        <Setter Property="Foreground" Value="#a0a0b0"/>
+        <Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
         <Setter Property="FontSize" Value="12"/>
         <Setter Property="FontWeight" Value="Bold"/>
         <Setter Property="VerticalAlignment" Value="Center"/>
diff --git a/Themes/Tokens.xaml b/Themes/Tokens.xaml
index ef0f96f..4596a01 100644
--- a/Themes/Tokens.xaml
+++ b/Themes/Tokens.xaml
@@ -21,6 +21,8 @@
     <SolidColorBrush x:Key="Brush.SurfaceBright" Color="#31394d"/>
     <SolidColorBrush x:Key="Brush.Outline" Color="#334155"/>
     <SolidColorBrush x:Key="Brush.OutlineVariant" Color="#1e293b"/>
+    <SolidColorBrush x:Key="Brush.ScrimSoft" Color="#22FFFFFF"/>
+    <SolidColorBrush x:Key="Brush.ScrimStrong" Color="#26FFFFFF"/>
 
     <!-- Text -->
     <SolidColorBrush x:Key="Brush.OnSurface" Color="#dae2fd"/>
@@ -39,6 +41,11 @@
     <SolidColorBrush x:Key="Brush.ErrorContainer" Color="#93000a"/>
     <SolidColorBrush x:Key="Brush.OnError" Color="#ffdad6"/>
 
+    <!-- Colours (for gradients that cannot take a brush) -->
+    <Color x:Key="Color.Background">#0b1326</Color>
+    <Color x:Key="Color.Tertiary">#38bdf8</Color>
+    <Color x:Key="Color.SurfaceContainerLowest">#060e20</Color>
+
     <!-- Meter bands (measured levels, never gain settings) -->
     <SolidColorBrush x:Key="Brush.Meter.Nominal" Color="#38bdf8"/>
     <SolidColorBrush x:Key="Brush.Meter.Caution" Color="#ffb95f"/>
diff --git a/ytLive.Tests/DesignTokensTests.cs b/ytLive.Tests/DesignTokensTests.cs
index 268ca7a..d87fb3d 100644
--- a/ytLive.Tests/DesignTokensTests.cs
+++ b/ytLive.Tests/DesignTokensTests.cs
@@ -2,6 +2,7 @@ using System;
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
+using System.Text.RegularExpressions;
 using System.Xml.Linq;
 using Xunit;
 
@@ -67,6 +68,28 @@ public class DesignTokensTests
             "Themes/Tokens.xaml must merge BEFORE Themes/Controls.xaml, or styles cannot resolve a token");
     }
 
+    [Fact]
+    public void Converted_surfaces_carry_no_raw_colour()
+    {
+        // 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" };
+
+        foreach (var file in converted)
+        {
+            var text = SourceAssert.Text(file.Split('/'));
+            var raw = Regex.Matches(text, @"#[0-9a-fA-F]{6,8}")
+                .Select(m => m.Value)
+                .Where(v => v is not "#ffffff" and not "#000000" and not "#FFFFFF" and not "#000000")
+                .Distinct(StringComparer.OrdinalIgnoreCase)
+                .ToList();
+
+            Assert.True(raw.Count == 0,
+                $"{file} still hardcodes {string.Join(", ", raw)} — resolve a Brush.* token instead");
+        }
+    }
+
     [Fact]
     public void The_retired_brand_red_is_not_a_token()
     {
@@ -100,7 +123,8 @@ public class DesignTokensTests
             // The token cell may carry a note after the backticked name("`tertiary` (electric blue)").
             var token = Backticked(cells[0]);
             var hex = Backticked(cells[1]);
-            if (!hex.StartsWith("#", StringComparison.Ordinal) || hex.Length != 7) continue;
+            // 6-digit RGB or 8-digit ARGB (the scrim washes carry alpha).
+            if (!hex.StartsWith("#", StringComparison.Ordinal) || hex.Length is not (7 or 9)) continue;
             result[token] = hex;
         }