web: primary -> steel blue, split from danger (C5)

primary was byte-identical to danger (both red), so every focus ring, toggle,
tab and link read as an error. primary is now steel #336699 (red lives on as
danger). Walked the stray hard-coded interactives onto the token — StackDriftPanel,
software-binding buttons/links, retry CTA — and left the destructive reds alone.

web/src/components/AgentSoftwareBindings.tsx

@@ -122,7 +122,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
         {allTracked.length > 0 && bindable.length > 0 && (
           <button
             onClick={() => setShowAdd((v) => !v)}
-            className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-red-600 text-white rounded hover:bg-red-700"
+            className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-primary-600 text-white rounded hover:bg-primary-700"
           >
             <Plus className="w-4 h-4" />
             Bind
@@ -143,7 +143,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
               <select
                 value={form.tracked_software_id}
                 onChange={(e) => setForm({ ...form, tracked_software_id: e.target.value })}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-red-500"
+                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
               >
                 <option value="">— choose —</option>
                 {bindable.map((s) => (
@@ -159,7 +159,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
                 value={form.installed_version}
                 onChange={(e) => setForm({ ...form, installed_version: e.target.value })}
                 placeholder="e.g. 15.4"
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-red-500"
+                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
               />
             </div>
             <div>
@@ -170,7 +170,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
                 value={form.install_path ?? ''}
                 onChange={(e) => setForm({ ...form, install_path: e.target.value })}
                 placeholder="/opt/postgres"
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-red-500"
+                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
               />
             </div>
             <div className="md:col-span-2">
@@ -181,7 +181,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
                 value={form.notes ?? ''}
                 onChange={(e) => setForm({ ...form, notes: e.target.value })}
                 placeholder="built from main; --with-openssl"
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-red-500"
+                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
               />
             </div>
           </div>
@@ -195,7 +195,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
             <button
               onClick={handleAdd}
               disabled={!form.tracked_software_id || !form.installed_version || upsert.isPending}
-              className="px-3 py-1.5 text-sm bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
+              className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50"
             >
               {upsert.isPending ? 'Saving…' : 'Save binding'}
             </button>
@@ -205,7 +205,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
 
       {isPending ? (
         <div className="text-center py-6">
-          <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-red-600"></div>
+          <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
         </div>
       ) : list.length === 0 ? (
         <div className="text-center py-8 border border-dashed border-gray-200 rounded-lg">
@@ -217,7 +217,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
               </p>
               <Link
                 to="/settings/upstream"
-                className="inline-flex items-center gap-1 text-sm text-red-600 hover:text-red-800"
+                className="inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-800"
               >
                 Open Upstream Tracking <ArrowRight className="w-4 h-4" />
               </Link>

web/src/components/ServerStatusOverlay.tsx

@@ -34,7 +34,7 @@ const ServerStatusOverlay: React.FC<ServerStatusOverlayProps> = ({
             </p>
             <button
               onClick={onRetryNow}
-              className="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-red-600 hover:text-red-700 transition-colors"
+              className="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-primary-600 hover:text-primary-700 transition-colors"
             >
               <RefreshCw className="w-3 h-3" />
               Retry now

web/src/components/StackDriftPanel.tsx

@@ -24,7 +24,7 @@ const StackDriftPanel: React.FC = () => {
 
       {isPending ? (
         <div className="text-center py-6">
-          <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+          <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
         </div>
       ) : drift.length === 0 ? (
         <div className="text-center py-6">
@@ -33,7 +33,7 @@ const StackDriftPanel: React.FC = () => {
           </p>
           <Link
             to="/settings/upstream"
-            className="mt-3 inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
+            className="mt-3 inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-800"
           >
             Track something <ArrowRight className="w-4 h-4" />
           </Link>
@@ -81,7 +81,7 @@ const StackDriftPanel: React.FC = () => {
           {drift.length > 3 && (
             <Link
               to="/settings/upstream"
-              className="mt-3 inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
+              className="mt-3 inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-800"
             >
               View all {drift.length} <ArrowRight className="w-4 h-4" />
             </Link>

web/tailwind.config.js

@@ -7,17 +7,21 @@ export default {
   theme: {
     extend: {
       colors: {
+        // Steel blue — interactive/brand surface (focus rings, toggles, active
+        // tabs, links, primary buttons). Anchored at 600 = #336699 (Novell-era
+        // steel). Distinct from `danger` so red reads as error again; the red
+        // scale lives on unchanged under `danger`.
         primary: {
-          50: '#fef2f2',
-          100: '#fee2e2',
-          200: '#fecaca',
-          300: '#fca5a5',
-          400: '#f87171',
-          500: '#ef4444',
-          600: '#dc2626',
-          700: '#b91c1c',
-          800: '#991b1b',
-          900: '#7f1d1d',
+          50: '#f0f5fa',
+          100: '#d9e6f2',
+          200: '#b3cce6',
+          300: '#85add6',
+          400: '#4f8ac4',
+          500: '#3b75b0',
+          600: '#336699',
+          700: '#2a547e',
+          800: '#224567',
+          900: '#1b3650',
         },
         success: {
           50: '#f0fdf4',