diff --git a/docs/cookies.html b/docs/cookies.html
index f49dab26..de3c61b7 100644
--- a/docs/cookies.html
+++ b/docs/cookies.html
@@ -8,7 +8,7 @@
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --color-primary: #3B7DD8;
+      --color-primary: #2D63B0;
       --color-navy: #1A2D50;
       --color-navy-dark: #0F1A30;
       --color-bg: #F4F7FA;
diff --git a/docs/datenschutz.html b/docs/datenschutz.html
index 7aa5229b..0e28f0be 100644
--- a/docs/datenschutz.html
+++ b/docs/datenschutz.html
@@ -8,7 +8,7 @@
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --color-primary: #3B7DD8;
+      --color-primary: #2D63B0;
       --color-navy: #1A2D50;
       --color-navy-dark: #0F1A30;
       --color-bg: #F4F7FA;
diff --git a/docs/impressum.html b/docs/impressum.html
index 88e4488c..46923bfb 100644
--- a/docs/impressum.html
+++ b/docs/impressum.html
@@ -8,7 +8,7 @@
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --color-primary: #3B7DD8;
+      --color-primary: #2D63B0;
       --color-navy: #1A2D50;
       --color-navy-dark: #0F1A30;
       --color-bg: #F4F7FA;
diff --git a/docs/index.html b/docs/index.html
index 460f88ca..d03f6c97 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,8 +10,8 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --color-primary: #3B7DD8;
-      --color-primary-hover: #2E6BC0;
+      --color-primary: #2D63B0;
+      --color-primary-hover: #1F4E8C;
       --color-accent: #D4883E;
       --color-navy: #1A2D50;
       --color-navy-dark: #0F1A30;
@@ -183,15 +183,15 @@
       position: absolute;
       inset: 0;
       background-image:
-        linear-gradient(rgba(59, 125, 216, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(59, 125, 216, 0.03) 1px, transparent 1px);
+        linear-gradient(rgba(45, 99, 176, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(45, 99, 176, 0.03) 1px, transparent 1px);
       background-size: 48px 48px;
       pointer-events: none;
     }
     .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
     .hero-orb-1 {
       width: 600px; height: 600px;
-      background: radial-gradient(circle, rgba(59, 125, 216, 0.08) 0%, transparent 70%);
+      background: radial-gradient(circle, rgba(45, 99, 176, 0.08) 0%, transparent 70%);
       top: -200px; right: -150px;
       animation: floatOrb 20s ease-in-out infinite;
     }
@@ -203,7 +203,7 @@
     }
     .hero-orb-3 {
       width: 250px; height: 250px;
-      background: radial-gradient(circle, rgba(59, 125, 216, 0.06) 0%, transparent 70%);
+      background: radial-gradient(circle, rgba(45, 99, 176, 0.06) 0%, transparent 70%);
       top: 40%; left: 15%;
       animation: pulse 8s ease-in-out infinite;
     }
@@ -223,7 +223,7 @@
       height: 80px;
       width: auto;
       margin-bottom: 24px;
-      filter: drop-shadow(0 4px 16px rgba(59, 125, 216, 0.3));
+      filter: drop-shadow(0 4px 16px rgba(45, 99, 176, 0.3));
       animation: heroFadeIn 0.8s ease-out both;
     }
     .hero h1 {
@@ -277,9 +277,9 @@
     .btn-primary {
       background: var(--color-primary);
       color: #fff;
-      box-shadow: 0 4px 14px rgba(59, 125, 216, 0.35);
+      box-shadow: 0 4px 14px rgba(45, 99, 176, 0.35);
     }
-    .btn-primary:hover { background: var(--color-primary-hover); text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 125, 216, 0.4); }
+    .btn-primary:hover { background: var(--color-primary-hover); text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(45, 99, 176, 0.4); }
     .btn-ghost {
       background: transparent;
       color: #fff;
@@ -367,7 +367,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgba(59, 125, 216, 0.08);
+      background: rgba(45, 99, 176, 0.08);
       border-radius: 10px;
     }
     .why-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
@@ -387,9 +387,9 @@
       transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
     }
     .feature-card:hover {
-      box-shadow: 0 8px 30px rgba(59, 125, 216, 0.12);
+      box-shadow: 0 8px 30px rgba(45, 99, 176, 0.12);
       transform: translateY(-4px);
-      border-color: rgba(59, 125, 216, 0.2);
+      border-color: rgba(45, 99, 176, 0.2);
     }
     .feature-icon {
       width: 48px; height: 48px;
@@ -400,7 +400,7 @@
       font-size: 1.5rem;
       margin-bottom: 14px;
     }
-    .feature-icon-blue { background: rgba(59, 125, 216, 0.1); }
+    .feature-icon-blue { background: rgba(45, 99, 176, 0.1); }
     .feature-icon-amber { background: rgba(212, 136, 62, 0.1); }
     .feature-icon-green { background: rgba(34, 197, 94, 0.1); }
     .feature-icon-purple { background: rgba(139, 92, 246, 0.1); }
@@ -455,7 +455,7 @@
       transition: all 0.25s;
     }
     .tab-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
-    .tab-btn.active { background: var(--color-primary); color: #fff; box-shadow: 0 2px 10px rgba(59, 125, 216, 0.3); }
+    .tab-btn.active { background: var(--color-primary); color: #fff; box-shadow: 0 2px 10px rgba(45, 99, 176, 0.3); }
 
     .tab-panels { position: relative; }
     .tab-panel {
@@ -583,7 +583,7 @@
       background: var(--color-primary);
       color: #fff;
       border-color: var(--color-primary);
-      box-shadow: 0 2px 10px rgba(59, 125, 216, 0.3);
+      box-shadow: 0 2px 10px rgba(45, 99, 176, 0.3);
     }
     .install-tab-btn .tab-badge {
       font-size: 0.65rem;
@@ -594,7 +594,7 @@
       letter-spacing: 0.3px;
     }
     .install-tab-btn.active .tab-badge { background: rgba(255,255,255,0.25); color: #fff; }
-    .install-tab-btn:not(.active) .tab-badge { background: rgba(59, 125, 216, 0.1); color: var(--color-primary); }
+    .install-tab-btn:not(.active) .tab-badge { background: rgba(45, 99, 176, 0.1); color: var(--color-primary); }
     .install-panel {
       display: none;
       max-width: 600px;
diff --git a/e2e/tests/phase4-accessibility.spec.ts b/e2e/tests/phase4-accessibility.spec.ts
index a54c6a8f..c463b7ec 100644
--- a/e2e/tests/phase4-accessibility.spec.ts
+++ b/e2e/tests/phase4-accessibility.spec.ts
@@ -55,18 +55,8 @@ test.describe('Phase 4 accessibility (axe-core)', () => {
     );
     await page.goto('/login');
 
-    // The brand `--color-primary: #3B7DD8` on light backgrounds
-    // (and white-on-primary in CTAs) sits at ~3.8 / 4.1 contrast
-    // ratios — close to but below the WCAG-AA 4.5 threshold for
-    // text. Tightening the brand palette is a design pass scoped
-    // for after 0.9.0; tracked in #38. Disable just the
-    // `color-contrast` rule so the gate still catches the
-    // structurally-critical violations (missing labels, broken
-    // ARIA, broken keyboard nav, …) which is what this gate is
-    // really for.
     const results = await new AxeBuilder({ page })
       .withTags(['wcag2a', 'wcag2aa'])
-      .disableRules(['color-contrast'])
       .analyze();
     const blocking = results.violations.filter(
       (v) => v.impact === 'critical' || v.impact === 'serious',
@@ -87,18 +77,8 @@ test.describe('Phase 4 accessibility (axe-core)', () => {
     );
     await page.goto('/sso-error?code=idp.unreachable');
 
-    // The brand `--color-primary: #3B7DD8` on light backgrounds
-    // (and white-on-primary in CTAs) sits at ~3.8 / 4.1 contrast
-    // ratios — close to but below the WCAG-AA 4.5 threshold for
-    // text. Tightening the brand palette is a design pass scoped
-    // for after 0.9.0; tracked in #38. Disable just the
-    // `color-contrast` rule so the gate still catches the
-    // structurally-critical violations (missing labels, broken
-    // ARIA, broken keyboard nav, …) which is what this gate is
-    // really for.
     const results = await new AxeBuilder({ page })
       .withTags(['wcag2a', 'wcag2aa'])
-      .disableRules(['color-contrast'])
       .analyze();
     const blocking = results.violations.filter(
       (v) => v.impact === 'critical' || v.impact === 'serious',
@@ -140,18 +120,8 @@ test.describe('Phase 4 accessibility (axe-core)', () => {
     await page.goto('/welcome');
     await page.waitForLoadState('networkidle');
 
-    // The brand `--color-primary: #3B7DD8` on light backgrounds
-    // (and white-on-primary in CTAs) sits at ~3.8 / 4.1 contrast
-    // ratios — close to but below the WCAG-AA 4.5 threshold for
-    // text. Tightening the brand palette is a design pass scoped
-    // for after 0.9.0; tracked in #38. Disable just the
-    // `color-contrast` rule so the gate still catches the
-    // structurally-critical violations (missing labels, broken
-    // ARIA, broken keyboard nav, …) which is what this gate is
-    // really for.
     const results = await new AxeBuilder({ page })
       .withTags(['wcag2a', 'wcag2aa'])
-      .disableRules(['color-contrast'])
       .analyze();
     const blocking = results.violations.filter(
       (v) => v.impact === 'critical' || v.impact === 'serious',
diff --git a/frontend/src/assets/styles/main.css b/frontend/src/assets/styles/main.css
index d05b4d79..630dcb20 100644
--- a/frontend/src/assets/styles/main.css
+++ b/frontend/src/assets/styles/main.css
@@ -1,8 +1,8 @@
 /* RoboScope Global Styles */
 :root {
   /* Primary: Steel Blue (RoboScope brand) */
-  --color-primary: #3B7DD8;
-  --color-primary-dark: #2A5FA8;
+  --color-primary: #2D63B0;
+  --color-primary-dark: #1F4E8C;
   --color-primary-light: #7BABEA;
   --color-primary-lighter: #B3D1F5;
   --color-primary-bg: #EBF3FD;
@@ -24,7 +24,7 @@
   --color-warning-bg: #FEF3C7;
   --color-danger: #DC3545;
   --color-danger-bg: #FEE2E2;
-  --color-info: #3B7DD8;
+  --color-info: #2D63B0;
   --color-info-bg: #EBF3FD;
 
   /* Backgrounds */
diff --git a/frontend/src/components/ai/SpecEditor.vue b/frontend/src/components/ai/SpecEditor.vue
index 2e2077aa..fda17e37 100644
--- a/frontend/src/components/ai/SpecEditor.vue
+++ b/frontend/src/components/ai/SpecEditor.vue
@@ -1389,7 +1389,7 @@ watch(() => props.content, (newContent) => {
 
 .tab-btn:hover {
   color: var(--color-text);
-  background: rgba(59, 125, 216, 0.05);
+  background: rgba(45, 99, 176, 0.05);
 }
 
 .tab-btn.active {
@@ -1556,7 +1556,7 @@ watch(() => props.content, (newContent) => {
 .form-input:focus {
   outline: none;
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px rgba(59, 125, 216, 0.15);
+  box-shadow: 0 0 0 2px rgba(45, 99, 176, 0.15);
 }
 
 .form-textarea {
@@ -1675,7 +1675,7 @@ watch(() => props.content, (newContent) => {
   font-size: 11px;
   color: var(--color-text-muted);
   padding: 1px 8px;
-  background: rgba(59, 125, 216, 0.1);
+  background: rgba(45, 99, 176, 0.1);
   border-radius: 8px;
 }
 
@@ -1876,7 +1876,7 @@ watch(() => props.content, (newContent) => {
 }
 
 .step-btn.active {
-  background: rgba(59, 125, 216, 0.1);
+  background: rgba(45, 99, 176, 0.1);
   border-color: var(--color-primary);
   color: var(--color-primary);
 }
@@ -1948,7 +1948,7 @@ watch(() => props.content, (newContent) => {
 
 .library-dropdown-item:hover,
 .library-dropdown-item.active {
-  background: rgba(59, 125, 216, 0.08);
+  background: rgba(45, 99, 176, 0.08);
 }
 
 .library-name {
diff --git a/frontend/src/components/debug/DebugPanel.vue b/frontend/src/components/debug/DebugPanel.vue
index e0a0e74b..93b1fd70 100644
--- a/frontend/src/components/debug/DebugPanel.vue
+++ b/frontend/src/components/debug/DebugPanel.vue
@@ -313,7 +313,7 @@ function truncate(s: string, max = 200): string {
   gap: 14px;
   padding: 10px 14px;
   background: var(--color-primary-bg, #dbeafe);
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 8px;
 }
 .debug-panel__line-number {
@@ -334,7 +334,7 @@ function truncate(s: string, max = 200): string {
 .debug-panel__line-value {
   font-size: 32px;
   font-weight: 700;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   font-variant-numeric: tabular-nums;
 }
 .debug-panel__line-meta {
diff --git a/frontend/src/components/editor/FlowEditor.vue b/frontend/src/components/editor/FlowEditor.vue
index 51532f4d..fa42dccf 100644
--- a/frontend/src/components/editor/FlowEditor.vue
+++ b/frontend/src/components/editor/FlowEditor.vue
@@ -3128,13 +3128,13 @@ function onDebugOverlayClose(): void {
   cursor: pointer;
 }
 .flow-libs-toggle:hover {
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 .flow-libs-toggle.active {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 
 /* Library management panel — opens below the section bar. */
@@ -3161,7 +3161,7 @@ function onDebugOverlayClose(): void {
   padding: 2px 4px 2px 0;
   border: 1px solid var(--color-border, #e2e8f0);
   border-radius: 4px;
-  background: rgba(59, 125, 216, 0.08);
+  background: rgba(45, 99, 176, 0.08);
   font-size: 12px;
 }
 .flow-libraries__chip--resource {
@@ -3174,8 +3174,8 @@ function onDebugOverlayClose(): void {
   text-align: center;
   font-size: 10px;
   font-weight: 700;
-  color: var(--color-primary, #3B7DD8);
-  background: rgba(59, 125, 216, 0.15);
+  color: var(--color-primary, #2D63B0);
+  background: rgba(45, 99, 176, 0.15);
   border-right: 1px solid var(--color-border, #e2e8f0);
   border-radius: 4px 0 0 4px;
   padding: 2px 0;
@@ -3215,13 +3215,13 @@ function onDebugOverlayClose(): void {
 }
 .flow-libraries__input:focus {
   outline: none;
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .flow-libraries__add {
   padding: 4px 12px;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 4px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
   font-size: 12px;
   font-weight: 600;
@@ -3246,8 +3246,8 @@ function onDebugOverlayClose(): void {
   cursor: pointer;
 }
 .flow-libraries__suggestion:hover {
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 /* Variables + suite-settings rows (reuse the .flow-libraries container). */
 .flow-vars__rows {
@@ -3305,7 +3305,7 @@ function onDebugOverlayClose(): void {
 }
 .flow-node-template__badge {
   font-size: 10px; font-weight: 600; color: #fff;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   border-radius: 6px; padding: 0 6px; line-height: 16px;
 }
 .flow-node-template__kw { font-family: var(--font-mono, monospace); font-size: 12px; }
@@ -3325,7 +3325,7 @@ function onDebugOverlayClose(): void {
 .flow-node-template__actions { display: flex; gap: 6px; margin-top: 6px; }
 .flow-node-template__actions button { padding: 2px 8px; }
 .flow-node-template__actions button:hover {
-  border-color: var(--color-primary, #3B7DD8); color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0); color: var(--color-primary, #2D63B0);
 }
 .flow-section-tab {
   padding: 7px 18px;
@@ -3338,9 +3338,9 @@ function onDebugOverlayClose(): void {
   cursor: pointer;
 }
 .flow-section-tab.active {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .flow-item-tabs {
   display: flex;
@@ -3368,8 +3368,8 @@ function onDebugOverlayClose(): void {
   font-weight: 500;
 }
 .flow-item-tab--add:hover {
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 
 .flow-empty {
@@ -3387,9 +3387,9 @@ function onDebugOverlayClose(): void {
 }
 .flow-empty__cta {
   padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 4px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
   font-size: 0.85rem;
   cursor: pointer;
@@ -3399,7 +3399,7 @@ function onDebugOverlayClose(): void {
 }
 .flow-empty__cta--secondary {
   background: #fff;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .flow-canvas-wrapper {
@@ -3466,7 +3466,7 @@ function onDebugOverlayClose(): void {
 }
 .flow-detail-resizer:hover::after,
 .flow-detail-panel--resizing .flow-detail-resizer::after {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
 }
 .flow-detail-header {
   display: flex;
@@ -3479,7 +3479,7 @@ function onDebugOverlayClose(): void {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 .flow-detail-actions {
   display: flex;
@@ -3508,13 +3508,13 @@ function onDebugOverlayClose(): void {
   background: #fee;
 }
 .flow-action-info {
-  color: var(--color-primary, #3B7DD8);
-  border-color: rgba(59, 125, 216, 0.4);
+  color: var(--color-primary, #2D63B0);
+  border-color: rgba(45, 99, 176, 0.4);
   font-style: italic;
   font-weight: 700;
 }
 .flow-action-info:hover {
-  background: rgba(59, 125, 216, 0.08);
+  background: rgba(45, 99, 176, 0.08);
 }
 .flow-detail-row {
   margin-bottom: 10px;
@@ -3538,7 +3538,7 @@ function onDebugOverlayClose(): void {
   box-sizing: border-box;
 }
 .flow-input:focus {
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .flow-textarea {
   font-family: var(--font-sans, sans-serif);
@@ -3574,9 +3574,9 @@ function onDebugOverlayClose(): void {
 }
 .flow-btn-add {
   font-size: 11px;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   background: none;
-  border: 1px dashed var(--color-primary, #3B7DD8);
+  border: 1px dashed var(--color-primary, #2D63B0);
   border-radius: 4px;
   padding: 3px 8px;
   cursor: pointer;
@@ -3608,7 +3608,7 @@ function onDebugOverlayClose(): void {
   user-select: none;
 }
 .flow-arg-type-icon {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   font-weight: 700;
   font-size: 9px;
   font-family: var(--font-mono, monospace);
@@ -3625,7 +3625,7 @@ function onDebugOverlayClose(): void {
   height: 18px;
   flex-shrink: 0;
   cursor: pointer;
-  accent-color: var(--color-primary, #3B7DD8);
+  accent-color: var(--color-primary, #2D63B0);
 }
 /* Story EDITOR-VAR-1 — toggle between typed control and plain text.
    Lets the user enter a Robot Framework variable reference on a slot
@@ -3643,9 +3643,9 @@ function onDebugOverlayClose(): void {
   flex-shrink: 0;
 }
 .flow-input-toggle:hover {
-  background: rgba(59, 125, 216, 0.10);
-  color: var(--color-primary, #3B7DD8);
-  border-color: var(--color-primary, #3B7DD8);
+  background: rgba(45, 99, 176, 0.10);
+  color: var(--color-primary, #2D63B0);
+  border-color: var(--color-primary, #2D63B0);
 }
 /* Story EDITOR-9 — named-arg picker popover */
 .flow-add-arg-wrap {
@@ -3748,9 +3748,9 @@ function onDebugOverlayClose(): void {
 .flow-add-arg-custom-add {
   flex: 0 0 auto;
   padding: 4px 10px;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 4px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
   font-size: 12px;
   cursor: pointer;
@@ -3830,8 +3830,8 @@ function onDebugOverlayClose(): void {
   transition: border-color 0.15s, background 0.15s;
 }
 .flow-node-doc-meta:hover {
-  border-color: var(--color-primary, #3B7DD8);
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 6%, var(--color-bg-card, #fff));
+  border-color: var(--color-primary, #2D63B0);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 6%, var(--color-bg-card, #fff));
 }
 .flow-node-doc-meta__body {
   flex: 1;
@@ -3884,10 +3884,10 @@ function onDebugOverlayClose(): void {
   font-style: italic;
 }
 .flow-node-doc-meta.flow-node--selected {
-  outline: 3px solid var(--color-primary, #3B7DD8);
+  outline: 3px solid var(--color-primary, #2D63B0);
   outline-offset: 2px;
-  border-color: var(--color-primary, #3B7DD8);
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 10%, var(--color-bg-card, #fff));
+  border-color: var(--color-primary, #2D63B0);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 10%, var(--color-bg-card, #fff));
 }
 
 /* RETURN node — distinct from BREAK / CONTINUE because it carries
@@ -3949,10 +3949,10 @@ function onDebugOverlayClose(): void {
 .flow-node-comment.flow-node--selected,
 .flow-node-flowctrl.flow-node--selected,
 .flow-node-return-block.flow-node--selected {
-  outline: 3px solid var(--color-primary, #3B7DD8);
+  outline: 3px solid var(--color-primary, #2D63B0);
   outline-offset: 2px;
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 10%, var(--color-bg-card, #fff));
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #3B7DD8) 18%, transparent);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 10%, var(--color-bg-card, #fff));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #2D63B0) 18%, transparent);
 }
 
 /* Drag handle on nodes */
@@ -3986,13 +3986,13 @@ function onDebugOverlayClose(): void {
 .flow-drop-line {
   flex: 1;
   height: 3px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   border-radius: 2px;
 }
 .flow-drop-dot {
   width: 10px;
   height: 10px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   border-radius: 50%;
   flex-shrink: 0;
 }
@@ -4011,9 +4011,9 @@ function onDebugOverlayClose(): void {
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: var(--color-on-dark, #ffffff);
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 6px;
   font-size: 12px;
   font-weight: 600;
@@ -4022,7 +4022,7 @@ function onDebugOverlayClose(): void {
 }
 .flow-debug-step-btn:hover { filter: brightness(1.05); }
 .flow-debug-step-btn:focus-visible {
-  outline: 2px solid var(--color-primary, #3B7DD8);
+  outline: 2px solid var(--color-primary, #2D63B0);
   outline-offset: 2px;
 }
 .flow-debug-action-error {
diff --git a/frontend/src/components/editor/RobotEditor.vue b/frontend/src/components/editor/RobotEditor.vue
index 7b65e554..6e8feff9 100644
--- a/frontend/src/components/editor/RobotEditor.vue
+++ b/frontend/src/components/editor/RobotEditor.vue
@@ -2517,7 +2517,7 @@ watch(() => props.content, (newContent) => {
   font-weight: 500; color: var(--color-text-muted); cursor: pointer;
   border-bottom: 2px solid transparent; transition: all 0.15s ease;
 }
-.tab-btn:hover { color: var(--color-text); background: rgba(59, 125, 216, 0.05); }
+.tab-btn:hover { color: var(--color-text); background: rgba(45, 99, 176, 0.05); }
 .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
 .tab-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
 .tab-toolbar .icon-btn { background: none; border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; color: var(--color-text-muted); }
@@ -2536,12 +2536,12 @@ watch(() => props.content, (newContent) => {
   cursor: pointer;
 }
 .heal-toggle-btn:hover {
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 .heal-toggle-btn--on {
-  background: var(--color-primary, #3B7DD8);
-  border-color: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
+  border-color: var(--color-primary, #2D63B0);
   color: #fff;
 }
 .heal-toggle-btn--on:hover {
@@ -2564,11 +2564,11 @@ watch(() => props.content, (newContent) => {
 .editor-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 8px; overflow: visible; flex-shrink: 0; }
 .section-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); cursor: pointer; user-select: none; }
 .section-header h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
-.section-count { font-size: 11px; color: var(--color-text-muted); padding: 1px 8px; background: rgba(59, 125, 216, 0.1); border-radius: 8px; }
+.section-count { font-size: 11px; color: var(--color-text-muted); padding: 1px 8px; background: rgba(45, 99, 176, 0.1); border-radius: 8px; }
 
 /* Section accent colors */
-.section-settings > .section-header { border-left: 3px solid #3B7DD8; }
-.section-settings .section-count { background: rgba(59, 125, 216, 0.1); color: #1a5fb4; }
+.section-settings > .section-header { border-left: 3px solid #2D63B0; }
+.section-settings .section-count { background: rgba(45, 99, 176, 0.1); color: #1a5fb4; }
 .section-variables > .section-header { border-left: 3px solid #7c3aed; }
 .section-variables .section-count { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }
 .section-testcases > .section-header { border-left: 3px solid #2e7d32; }
@@ -2600,7 +2600,7 @@ watch(() => props.content, (newContent) => {
 .item-card { border: 1px solid var(--color-border); border-radius: 8px; }
 .item-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); cursor: pointer; user-select: none; }
 .item-title { flex: 1; font-weight: 500; font-size: 13px; }
-.item-count { font-size: 11px; color: var(--color-text-muted); padding: 1px 8px; background: rgba(59, 125, 216, 0.1); border-radius: 8px; }
+.item-count { font-size: 11px; color: var(--color-text-muted); padding: 1px 8px; background: rgba(45, 99, 176, 0.1); border-radius: 8px; }
 .item-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
 .remove-btn { border: none; background: none; cursor: pointer; font-size: 14px; padding: 2px 4px; opacity: 0.5; transition: opacity 0.15s; }
 .remove-btn:hover { opacity: 1; }
@@ -2612,7 +2612,7 @@ watch(() => props.content, (newContent) => {
 .form-label { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
 .required { color: var(--color-danger); }
 .form-input { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; background: var(--color-bg-card); color: var(--color-text); transition: border-color 0.15s; }
-.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59, 125, 216, 0.15); }
+.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(45, 99, 176, 0.15); }
 .form-textarea { resize: vertical; min-height: 40px; font-family: inherit; }
 
 /* Chips/Tags */
diff --git a/frontend/src/components/editor/flow/ControlNode.vue b/frontend/src/components/editor/flow/ControlNode.vue
index 7435ac1c..ba531544 100644
--- a/frontend/src/components/editor/flow/ControlNode.vue
+++ b/frontend/src/components/editor/flow/ControlNode.vue
@@ -121,10 +121,10 @@ const iconMap: Record<string, string> = {
 /* Selected-node highlight — outline + tint, mirrors KeywordNode and
    the inline comment/flow-control nodes in FlowEditor.vue. */
 .flow-node--selected {
-  outline: 3px solid var(--color-primary, #3B7DD8);
+  outline: 3px solid var(--color-primary, #2D63B0);
   outline-offset: 2px;
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 10%, #FFFBF0);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #3B7DD8) 18%, transparent),
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 10%, #FFFBF0);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #2D63B0) 18%, transparent),
               0 2px 6px rgba(0, 0, 0, 0.1);
 }
 .flow-node-header {
diff --git a/frontend/src/components/editor/flow/KeywordAutocompleteInput.vue b/frontend/src/components/editor/flow/KeywordAutocompleteInput.vue
index 841c49cc..8ccfd695 100644
--- a/frontend/src/components/editor/flow/KeywordAutocompleteInput.vue
+++ b/frontend/src/components/editor/flow/KeywordAutocompleteInput.vue
@@ -239,7 +239,7 @@ onBeforeUnmount(unbindOutsideClick)
   box-sizing: border-box;
 }
 .flow-input:focus {
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .kw-autocomplete-dropdown {
   position: absolute;
diff --git a/frontend/src/components/editor/flow/KeywordDocModal.vue b/frontend/src/components/editor/flow/KeywordDocModal.vue
index e349ec88..9715772a 100644
--- a/frontend/src/components/editor/flow/KeywordDocModal.vue
+++ b/frontend/src/components/editor/flow/KeywordDocModal.vue
@@ -227,7 +227,7 @@ function formatArg(parsed: ReturnType<typeof parseArgSignature>): string {
   border-radius: 6px;
 }
 .kw-doc-html :deep(a) {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   text-decoration: underline;
 }
 .kw-doc-html :deep(table) {
diff --git a/frontend/src/components/editor/flow/KeywordNode.vue b/frontend/src/components/editor/flow/KeywordNode.vue
index 008f2abc..107580b0 100644
--- a/frontend/src/components/editor/flow/KeywordNode.vue
+++ b/frontend/src/components/editor/flow/KeywordNode.vue
@@ -193,16 +193,16 @@ const candidateTooltip = computed(() =>
 }
 .flow-node-keyword {
   background: #fff;
-  border: 2px solid var(--color-primary, #3B7DD8);
+  border: 2px solid var(--color-primary, #2D63B0);
 }
 /* Selected-node highlight — outline + tint so the active node
    stands out from the others. Mirrors the rule on inline
    comment / flow-control nodes inside FlowEditor.vue. */
 .flow-node--selected {
-  outline: 3px solid var(--color-primary, #3B7DD8);
+  outline: 3px solid var(--color-primary, #2D63B0);
   outline-offset: 2px;
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 10%, var(--color-bg-card, #fff));
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #3B7DD8) 18%, transparent),
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 10%, var(--color-bg-card, #fff));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #2D63B0) 18%, transparent),
               0 2px 6px rgba(0, 0, 0, 0.1);
 }
 .flow-node-header {
@@ -265,7 +265,7 @@ const candidateTooltip = computed(() =>
 .flow-drag-handle:active,
 .flow-drag-handle--armed {
   cursor: grabbing;
-  background: rgba(59, 125, 216, 0.15);
+  background: rgba(45, 99, 176, 0.15);
   opacity: 1;
 }
 .flow-node-args {
@@ -289,8 +289,8 @@ const candidateTooltip = computed(() =>
   gap: 4px;
 }
 .flow-arg--has-candidates {
-  background: rgba(59, 125, 216, 0.10);
-  border: 1px solid rgba(59, 125, 216, 0.30);
+  background: rgba(45, 99, 176, 0.10);
+  border: 1px solid rgba(45, 99, 176, 0.30);
   padding: 0 6px;
 }
 .flow-arg-dot {
@@ -312,7 +312,7 @@ const candidateTooltip = computed(() =>
   font-family: var(--font-mono, monospace);
   font-size: 9px;
   font-weight: 700;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   opacity: 0.85;
 }
 .flow-arg-value {
@@ -328,7 +328,7 @@ const candidateTooltip = computed(() =>
 }
 .flow-arg-count {
   font-size: 10px;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   font-weight: 600;
 }
 .flow-node-return {
diff --git a/frontend/src/components/editor/flow/KeywordPalette.vue b/frontend/src/components/editor/flow/KeywordPalette.vue
index ddec60a1..472116a5 100644
--- a/frontend/src/components/editor/flow/KeywordPalette.vue
+++ b/frontend/src/components/editor/flow/KeywordPalette.vue
@@ -655,7 +655,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
   margin: 0 10px 8px;
   padding: 5px 8px;
   background: #EBF4FF;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 6px;
 }
 .palette-add-info {
@@ -665,7 +665,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
 .palette-add-label {
   font-size: 12px;
   font-weight: 600;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -679,7 +679,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
 }
 .palette-arg-tag {
   background: #fff;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   color: var(--color-text-muted, #5A6380);
   padding: 1px 5px;
   border-radius: 3px;
@@ -694,7 +694,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
   width: 24px;
   height: 24px;
   border: none;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
   border-radius: 50%;
   font-size: 16px;
@@ -717,7 +717,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
   outline: none;
 }
 .palette-search:focus {
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .palette-categories {
   flex: 1;
@@ -771,19 +771,19 @@ function onControlDragStart(event: DragEvent, type: StepType) {
    right now — pinned to the top of the palette and tinted so it
    stands out from the other Project: entries. */
 .palette-category--current .category-header {
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 8%, transparent);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 8%, transparent);
 }
 .palette-category--current .category-name {
   font-weight: 700;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 .category-current-badge {
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-primary, #3B7DD8);
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 14%, transparent);
+  color: var(--color-primary, #2D63B0);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 14%, transparent);
   padding: 1px 6px;
   border-radius: 8px;
   margin-right: 4px;
@@ -804,7 +804,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
 }
 .palette-item.selected {
   background: #EBF4FF;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   margin: -1px 0;
 }
 .palette-item-content {
@@ -855,7 +855,7 @@ function onControlDragStart(event: DragEvent, type: StepType) {
   cursor: grabbing;
 }
 .palette-item-keyword .palette-icon {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 .palette-item-control .palette-icon {
   color: #E8A838;
diff --git a/frontend/src/components/execution/RunDetailPanel.vue b/frontend/src/components/execution/RunDetailPanel.vue
index 16808394..6e8101c2 100644
--- a/frontend/src/components/execution/RunDetailPanel.vue
+++ b/frontend/src/components/execution/RunDetailPanel.vue
@@ -555,7 +555,7 @@ watch(() => props.run.status, (newStatus, oldStatus) => {
 <style scoped>
 .run-detail-panel {
   padding: 20px;
-  border-top: 2px solid var(--color-primary, #3B7DD8);
+  border-top: 2px solid var(--color-primary, #2D63B0);
   background: var(--color-bg-card, #ffffff);
 }
 
@@ -636,8 +636,8 @@ watch(() => props.run.status, (newStatus, oldStatus) => {
 }
 
 .tab-btn.active {
-  color: var(--color-primary, #3B7DD8);
-  border-bottom-color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
+  border-bottom-color: var(--color-primary, #2D63B0);
 }
 
 .tab-content {
@@ -767,7 +767,7 @@ watch(() => props.run.status, (newStatus, oldStatus) => {
 .analysis-card {
   margin-top: 16px;
   padding: 16px;
-  border-left: 4px solid var(--color-primary, #3B7DD8);
+  border-left: 4px solid var(--color-primary, #2D63B0);
   background: var(--color-bg, #f4f7fa);
   border-radius: var(--radius-sm, 6px);
 }
@@ -775,7 +775,7 @@ watch(() => props.run.status, (newStatus, oldStatus) => {
 .analysis-header h4 {
   margin: 0 0 12px 0;
   font-size: 14px;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .analysis-body { padding: 0; }
diff --git a/frontend/src/components/execution/RunPendingActivity.vue b/frontend/src/components/execution/RunPendingActivity.vue
index b9cdadc2..3b3af0f7 100644
--- a/frontend/src/components/execution/RunPendingActivity.vue
+++ b/frontend/src/components/execution/RunPendingActivity.vue
@@ -167,7 +167,7 @@ const headline = computed(() => {
 }
 
 .pending-activity__link {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   text-decoration: none;
   font-size: 0.85rem;
 }
diff --git a/frontend/src/components/layout/TeamSwitcher.vue b/frontend/src/components/layout/TeamSwitcher.vue
index e5be1e90..d3a0b2ca 100644
--- a/frontend/src/components/layout/TeamSwitcher.vue
+++ b/frontend/src/components/layout/TeamSwitcher.vue
@@ -121,16 +121,16 @@ function onKeyDown(event: KeyboardEvent) {
 .team-switcher--single {
   padding: 0.25rem 0.6rem;
   border-radius: 999px;
-  background: rgba(59, 125, 216, 0.1);
-  color: var(--color-primary, #3B7DD8);
+  background: rgba(45, 99, 176, 0.1);
+  color: var(--color-primary, #2D63B0);
 }
 
 .team-switcher__chip {
   padding: 0.25rem 0.6rem;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 999px;
   background: transparent;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   font: inherit;
   cursor: pointer;
   display: inline-flex;
@@ -160,6 +160,6 @@ function onKeyDown(event: KeyboardEvent) {
 
 .team-switcher__item:hover,
 .team-switcher__item.is-active {
-  background: rgba(59, 125, 216, 0.1);
+  background: rgba(45, 99, 176, 0.1);
 }
 </style>
diff --git a/frontend/src/components/recorder/SelectorPicker.vue b/frontend/src/components/recorder/SelectorPicker.vue
index ba522aa1..60ea663c 100644
--- a/frontend/src/components/recorder/SelectorPicker.vue
+++ b/frontend/src/components/recorder/SelectorPicker.vue
@@ -662,7 +662,7 @@ const addEffectiveIsOverride = computed(() => {
 
 .selector-picker__item:hover,
 .selector-picker__item.is-active {
-  background: rgba(59, 125, 216, 0.08);
+  background: rgba(45, 99, 176, 0.08);
 }
 
 .selector-picker__item .selector-picker__dot,
@@ -694,7 +694,7 @@ const addEffectiveIsOverride = computed(() => {
   font-family: var(--font-mono, monospace);
   font-size: 0.85rem;
   padding: 3px 6px;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 3px;
   outline: none;
   min-width: 0;
@@ -755,14 +755,14 @@ const addEffectiveIsOverride = computed(() => {
   border-radius: 3px;
   padding: 4px 8px;
   cursor: pointer;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   font-family: var(--font-sans, sans-serif);
   font-size: 0.82rem;
   text-align: left;
 }
 .selector-picker__add-btn:hover {
-  border-color: var(--color-primary, #3B7DD8);
-  background: rgba(59, 125, 216, 0.06);
+  border-color: var(--color-primary, #2D63B0);
+  background: rgba(45, 99, 176, 0.06);
 }
 
 .selector-picker--compact .selector-picker__value {
@@ -800,7 +800,7 @@ const addEffectiveIsOverride = computed(() => {
   min-width: 0;
 }
 .selector-picker__effective-input:focus {
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .selector-picker__effective-input.is-override {
   border-color: var(--color-accent, #D4883E);
diff --git a/frontend/src/components/report/ReportXmlView.vue b/frontend/src/components/report/ReportXmlView.vue
index 9c07c50f..4f1b36b3 100644
--- a/frontend/src/components/report/ReportXmlView.vue
+++ b/frontend/src/components/report/ReportXmlView.vue
@@ -294,8 +294,8 @@ onMounted(async () => {
 
 .toolbar-btn:hover {
   background: var(--color-bg-hover, #f1f5f9);
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 
 .toolbar-select {
@@ -431,7 +431,7 @@ onMounted(async () => {
 
 .xml-view .tag-chip {
   font-size: 10px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
   padding: 1px 6px;
   border-radius: 8px;
diff --git a/frontend/src/components/repos/PublishModal.vue b/frontend/src/components/repos/PublishModal.vue
index 1edc0da7..4aa4fe35 100644
--- a/frontend/src/components/repos/PublishModal.vue
+++ b/frontend/src/components/repos/PublishModal.vue
@@ -258,7 +258,7 @@ function onCancel() {
 }
 .publish-message-input:focus {
   outline: none;
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .publish-conflict { display: flex; flex-direction: column; gap: 10px; }
 .publish-conflict h4 { margin: 0; color: var(--color-accent, #D4883E); }
diff --git a/frontend/src/layouts/AuthLayout.vue b/frontend/src/layouts/AuthLayout.vue
index 25906159..034dad8a 100644
--- a/frontend/src/layouts/AuthLayout.vue
+++ b/frontend/src/layouts/AuthLayout.vue
@@ -101,8 +101,8 @@ const { t } = useI18n()
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(rgba(59, 125, 216, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(59, 125, 216, 0.03) 1px, transparent 1px);
+    linear-gradient(rgba(45, 99, 176, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(45, 99, 176, 0.03) 1px, transparent 1px);
   background-size: 40px 40px;
   z-index: 0;
 }
@@ -132,7 +132,7 @@ const { t } = useI18n()
   height: 56px;
   width: auto;
   margin-bottom: 16px;
-  filter: drop-shadow(0 2px 8px rgba(59, 125, 216, 0.3));
+  filter: drop-shadow(0 2px 8px rgba(45, 99, 176, 0.3));
 }
 
 .hero-tagline {
@@ -167,13 +167,13 @@ const { t } = useI18n()
 }
 
 .feature-icon {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(59, 125, 216, 0.1);
+  background: rgba(45, 99, 176, 0.1);
   border-radius: 8px;
   flex-shrink: 0;
 }
@@ -258,7 +258,7 @@ const { t } = useI18n()
 .bg-circle-1 {
   width: 600px;
   height: 600px;
-  background: radial-gradient(circle, rgba(59, 125, 216, 0.07) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(45, 99, 176, 0.07) 0%, transparent 70%);
   top: -200px;
   right: -150px;
   animation: floatSlow 20s ease-in-out infinite;
@@ -276,7 +276,7 @@ const { t } = useI18n()
 .bg-circle-3 {
   width: 300px;
   height: 300px;
-  background: radial-gradient(circle, rgba(59, 125, 216, 0.04) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(45, 99, 176, 0.04) 0%, transparent 70%);
   top: 50%;
   left: 40%;
   transform: translate(-50%, -50%);
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 7426517f..ee79190f 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -78,7 +78,7 @@ onUnmounted(() => {
   top: 0;
   z-index: 10000;
   padding: 8px 16px;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
   text-decoration: none;
   font-weight: 600;
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index d2a521c6..f444035c 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -167,10 +167,10 @@ function go(to: string) {
 .dashboard-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(16, 25, 51, 0.10);
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .dashboard-card:focus-visible {
-  outline: 3px solid var(--color-primary, #3B7DD8);
+  outline: 3px solid var(--color-primary, #2D63B0);
   outline-offset: 3px;
 }
 
@@ -194,7 +194,7 @@ function go(to: string) {
   right: 18px;
   bottom: 14px;
   font-size: 18px;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   opacity: 0.5;
   transition: opacity 0.15s, transform 0.15s;
 }
@@ -207,13 +207,13 @@ function go(to: string) {
    reads as informational rather than a navigation target. */
 .dashboard-card--tip {
   cursor: default;
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 6%, var(--color-bg-card, #fff));
-  border-color: color-mix(in srgb, var(--color-primary, #3B7DD8) 30%, var(--color-border, #e2e8f0));
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 6%, var(--color-bg-card, #fff));
+  border-color: color-mix(in srgb, var(--color-primary, #2D63B0) 30%, var(--color-border, #e2e8f0));
   padding-bottom: 22px;
 }
 .dashboard-card--tip:hover {
   transform: none;
   box-shadow: none;
-  border-color: color-mix(in srgb, var(--color-primary, #3B7DD8) 30%, var(--color-border, #e2e8f0));
+  border-color: color-mix(in srgb, var(--color-primary, #2D63B0) 30%, var(--color-border, #e2e8f0));
 }
 </style>
diff --git a/frontend/src/views/EmergencyBypassView.vue b/frontend/src/views/EmergencyBypassView.vue
index a60c3171..91d06718 100644
--- a/frontend/src/views/EmergencyBypassView.vue
+++ b/frontend/src/views/EmergencyBypassView.vue
@@ -160,14 +160,14 @@ onUnmounted(() => {
 
 .bypass-admin__cta {
   padding: 0.5rem 1rem;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 4px;
   font: inherit;
   cursor: pointer;
 }
 
 .bypass-admin__cta--primary {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
 }
 
diff --git a/frontend/src/views/EnvironmentsView.vue b/frontend/src/views/EnvironmentsView.vue
index 4cddb169..3f1530de 100644
--- a/frontend/src/views/EnvironmentsView.vue
+++ b/frontend/src/views/EnvironmentsView.vue
@@ -819,7 +819,7 @@ function isBrowserConflict(pkg: { name: string; group?: string }): boolean {
   display: inline-block;
   padding: 2px 8px;
   background: rgba(60, 181, 161, 0.1);
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   border-radius: 4px;
   font-size: 12px;
   font-family: monospace;
@@ -889,9 +889,9 @@ function isBrowserConflict(pkg: { name: string; group?: string }): boolean {
 }
 
 .docker-build-building {
-  background: rgba(59, 125, 216, 0.08);
-  border: 1px solid rgba(59, 125, 216, 0.25);
-  color: var(--color-primary, #3B7DD8);
+  background: rgba(45, 99, 176, 0.08);
+  border: 1px solid rgba(45, 99, 176, 0.25);
+  color: var(--color-primary, #2D63B0);
   flex-direction: column;
 }
 
@@ -942,8 +942,8 @@ function isBrowserConflict(pkg: { name: string; group?: string }): boolean {
 .docker-build-toggle {
   margin-left: auto;
   background: none;
-  border: 1px solid rgba(59, 125, 216, 0.3);
-  color: var(--color-primary, #3B7DD8);
+  border: 1px solid rgba(45, 99, 176, 0.3);
+  color: var(--color-primary, #2D63B0);
   cursor: pointer;
   font-size: 11px;
   padding: 2px 8px;
@@ -951,14 +951,14 @@ function isBrowserConflict(pkg: { name: string; group?: string }): boolean {
 }
 
 .docker-build-toggle:hover {
-  background: rgba(59, 125, 216, 0.08);
+  background: rgba(45, 99, 176, 0.08);
 }
 
 .docker-build-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   animation: pulse-dot 1.5s ease-in-out infinite;
   flex-shrink: 0;
 }
@@ -1103,7 +1103,7 @@ function isBrowserConflict(pkg: { name: string; group?: string }): boolean {
 }
 
 .setup-icon {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   margin-bottom: 16px;
 }
 
@@ -1132,7 +1132,7 @@ function isBrowserConflict(pkg: { name: string; group?: string }): boolean {
   display: inline-block;
   padding: 4px 12px;
   background: rgba(60, 181, 161, 0.1);
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
diff --git a/frontend/src/views/ExecutionView.vue b/frontend/src/views/ExecutionView.vue
index b724e54b..ba0ed060 100644
--- a/frontend/src/views/ExecutionView.vue
+++ b/frontend/src/views/ExecutionView.vue
@@ -737,7 +737,7 @@ function isTerminal(status: string): boolean {
 
 .selected-row {
   background: rgba(60, 181, 161, 0.08) !important;
-  border-left: 3px solid var(--color-primary, #3B7DD8);
+  border-left: 3px solid var(--color-primary, #2D63B0);
 }
 
 .detail-card {
@@ -772,7 +772,7 @@ function isTerminal(status: string): boolean {
 
 .page-size-select:focus {
   outline: none;
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
   box-shadow: 0 0 0 2px rgba(60, 181, 161, 0.15);
 }
 
@@ -838,7 +838,7 @@ function isTerminal(status: string): boolean {
 }
 
 .env-prompt-icon {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .env-prompt-body p {
@@ -859,7 +859,7 @@ function isTerminal(status: string): boolean {
   display: inline-block;
   padding: 3px 10px;
   background: rgba(60, 181, 161, 0.1);
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
@@ -887,7 +887,7 @@ function isTerminal(status: string): boolean {
 
 .icon-btn:hover {
   background: var(--color-bg-hover, #f0f2f5);
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .status-cell {
@@ -900,7 +900,7 @@ function isTerminal(status: string): boolean {
   width: 14px;
   height: 14px;
   border: 2px solid var(--color-border, #e2e8f0);
-  border-top-color: var(--color-primary, #3B7DD8);
+  border-top-color: var(--color-primary, #2D63B0);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -939,8 +939,8 @@ function isTerminal(status: string): boolean {
 }
 
 .tab-btn.active {
-  color: var(--color-primary, #3B7DD8);
-  border-bottom-color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
+  border-bottom-color: var(--color-primary, #2D63B0);
 }
 
 .tab-badge {
@@ -1034,7 +1034,7 @@ function isTerminal(status: string): boolean {
 }
 
 .rebuild-checkbox input[type="checkbox"] {
-  accent-color: var(--color-primary, #3B7DD8);
+  accent-color: var(--color-primary, #2D63B0);
   cursor: pointer;
 }
 </style>
diff --git a/frontend/src/views/ExplorerView.vue b/frontend/src/views/ExplorerView.vue
index 20a7b4ec..751edd42 100644
--- a/frontend/src/views/ExplorerView.vue
+++ b/frontend/src/views/ExplorerView.vue
@@ -1686,7 +1686,7 @@ const flatNodes = computed(() => {
 }
 
 .env-prompt-icon {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .env-prompt-body p {
@@ -1707,7 +1707,7 @@ const flatNodes = computed(() => {
   display: inline-block;
   padding: 3px 10px;
   background: rgba(60, 181, 161, 0.1);
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
@@ -1801,7 +1801,7 @@ const flatNodes = computed(() => {
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 30%;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   opacity: 0.15;
   animation: keyword-loading-slide 1.5s ease-in-out infinite;
 }
diff --git a/frontend/src/views/FirstLoginView.vue b/frontend/src/views/FirstLoginView.vue
index 54865e65..ae60f9d5 100644
--- a/frontend/src/views/FirstLoginView.vue
+++ b/frontend/src/views/FirstLoginView.vue
@@ -154,14 +154,14 @@ async function dismissAndGo(path: string) {
 }
 
 .welcome-cta--primary {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
 }
 
 .welcome-cta--secondary {
   background: transparent;
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 
 .welcome-skip {
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index a5aafa8f..5782efcf 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -135,7 +135,7 @@ async function handleLogin() {
   justify-content: center;
   color: white;
   margin-bottom: 14px;
-  box-shadow: 0 4px 12px rgba(59, 125, 216, 0.3);
+  box-shadow: 0 4px 12px rgba(45, 99, 176, 0.3);
 }
 
 .login-header h2 {
@@ -160,7 +160,7 @@ async function handleLogin() {
 .login-card .form-input:focus {
   background: #ffffff;
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 125, 216, 0.12);
+  box-shadow: 0 0 0 3px rgba(45, 99, 176, 0.12);
   transform: translateY(-1px);
 }
 
diff --git a/frontend/src/views/RecordingLiveView.vue b/frontend/src/views/RecordingLiveView.vue
index 83a58c4d..458e34a1 100644
--- a/frontend/src/views/RecordingLiveView.vue
+++ b/frontend/src/views/RecordingLiveView.vue
@@ -520,7 +520,7 @@ const uptimeLabel = computed<string | null>(() => {
 .recording-live__status.is-browser_ready       { background: rgba(44, 152, 70, 0.15); color: #1a5c2a; }
 .recording-live__status.is-browser_restarting  { background: rgba(212, 136, 62, 0.2);  color: #6e3d09; }
 .recording-live__status.is-browser_crashed     { background: #fee2e2; color: #7f1d1d; }
-.recording-live__status.is-done                { background: rgba(59, 125, 216, 0.15); color: #1a3c7a; }
+.recording-live__status.is-done                { background: rgba(45, 99, 176, 0.15); color: #1a3c7a; }
 .recording-live__status.is-error               { background: #fee2e2; color: #7f1d1d; }
 
 /* Story RECORDER-VIS-1 — phase card next to the heading. */
@@ -545,8 +545,8 @@ const uptimeLabel = computed<string | null>(() => {
   color: var(--color-text-muted, #5A6380);
 }
 .recording-live__restart-browser:hover:not(:disabled) {
-  border-color: var(--color-primary, #3B7DD8);
-  color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
+  color: var(--color-primary, #2D63B0);
 }
 .recording-live__restart-browser:disabled {
   opacity: 0.45;
@@ -607,7 +607,7 @@ const uptimeLabel = computed<string | null>(() => {
 
 .recording-live__keyword {
   font-weight: 600;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .recording-live__args {
diff --git a/frontend/src/views/ReportDetailView.vue b/frontend/src/views/ReportDetailView.vue
index 84c935f6..496efe70 100644
--- a/frontend/src/views/ReportDetailView.vue
+++ b/frontend/src/views/ReportDetailView.vue
@@ -489,8 +489,8 @@ async function copyPatch(unifiedDiff: string) {
 }
 
 .tab-btn.active {
-  color: var(--color-primary, #3B7DD8);
-  border-bottom-color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
+  border-bottom-color: var(--color-primary, #2D63B0);
 }
 
 .tab-content {
@@ -555,11 +555,11 @@ async function copyPatch(unifiedDiff: string) {
 
 /* AI Analysis Card */
 .analysis-card {
-  border-left: 4px solid var(--color-primary, #3B7DD8);
+  border-left: 4px solid var(--color-primary, #2D63B0);
 }
 
 .analysis-header h3 {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .analysis-body {
diff --git a/frontend/src/views/ReposView.vue b/frontend/src/views/ReposView.vue
index ee9ecdad..f92f1173 100644
--- a/frontend/src/views/ReposView.vue
+++ b/frontend/src/views/ReposView.vue
@@ -1049,10 +1049,10 @@ async function removeMember(member: ProjectMember) {
 }
 .branch-fallback-btn {
   padding: 10px 16px;
-  border: 2px solid var(--color-primary, #3B7DD8);
+  border: 2px solid var(--color-primary, #2D63B0);
   border-radius: 8px;
   background: #EBF4FF;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
@@ -1060,7 +1060,7 @@ async function removeMember(member: ProjectMember) {
   transition: background 0.15s;
 }
 .branch-fallback-btn:hover {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: #fff;
 }
 
@@ -1092,14 +1092,14 @@ async function removeMember(member: ProjectMember) {
 }
 .repo-title-link:hover h3,
 .repo-title-link:focus-visible h3 {
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 .repo-title-link:hover p,
 .repo-title-link:focus-visible p {
   text-decoration: underline;
 }
 .repo-title-link:focus-visible {
-  outline: 2px solid var(--color-primary, #3B7DD8);
+  outline: 2px solid var(--color-primary, #2D63B0);
   outline-offset: 4px;
   border-radius: 4px;
 }
@@ -1152,15 +1152,15 @@ async function removeMember(member: ProjectMember) {
 }
 .info-tip:hover,
 .info-tip:focus {
-  color: var(--color-primary, #3B7DD8);
-  border-color: var(--color-primary, #3B7DD8);
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 14%, transparent);
+  color: var(--color-primary, #2D63B0);
+  border-color: var(--color-primary, #2D63B0);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 14%, transparent);
   outline: none;
 }
 .info-tip[aria-expanded="true"] {
-  color: var(--color-primary, #3B7DD8);
-  border-color: var(--color-primary, #3B7DD8);
-  background: color-mix(in srgb, var(--color-primary, #3B7DD8) 18%, transparent);
+  color: var(--color-primary, #2D63B0);
+  border-color: var(--color-primary, #2D63B0);
+  background: color-mix(in srgb, var(--color-primary, #2D63B0) 18%, transparent);
 }
 /* Click-popover that surfaces the help text. Pinned right of the
    icon, fixed max-width so long German strings wrap instead of
@@ -1286,12 +1286,12 @@ async function removeMember(member: ProjectMember) {
   height: 16px;
   margin-top: 4px;
   cursor: pointer;
-  accent-color: var(--color-primary, #3B7DD8);
+  accent-color: var(--color-primary, #2D63B0);
   flex-shrink: 0;
 }
 
 .card-selected {
-  outline: 2px solid var(--color-primary, #3B7DD8);
+  outline: 2px solid var(--color-primary, #2D63B0);
   outline-offset: -2px;
   background: rgba(60, 181, 161, 0.04);
 }
diff --git a/frontend/src/views/SsoLinkConsentView.vue b/frontend/src/views/SsoLinkConsentView.vue
index 5084c194..1e3f764c 100644
--- a/frontend/src/views/SsoLinkConsentView.vue
+++ b/frontend/src/views/SsoLinkConsentView.vue
@@ -122,20 +122,20 @@ async function submit(approve: boolean) {
 
 .sso-consent__cta {
   padding: 0.6rem 1.5rem;
-  border: 1px solid var(--color-primary, #3B7DD8);
+  border: 1px solid var(--color-primary, #2D63B0);
   border-radius: 4px;
   font: inherit;
   cursor: pointer;
 }
 
 .sso-consent__cta--primary {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
 }
 
 .sso-consent__cta--secondary {
   background: transparent;
-  color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
 }
 
 .sso-consent__cta:disabled {
diff --git a/frontend/src/views/StatsView.vue b/frontend/src/views/StatsView.vue
index 477d595e..de21a183 100644
--- a/frontend/src/views/StatsView.vue
+++ b/frontend/src/views/StatsView.vue
@@ -1260,8 +1260,8 @@ function formatDate(d: string | null) {
   background: var(--color-bg-hover, #f8fafc);
 }
 .tab-btn.active {
-  color: var(--color-primary, #3B7DD8);
-  border-bottom-color: var(--color-primary, #3B7DD8);
+  color: var(--color-primary, #2D63B0);
+  border-bottom-color: var(--color-primary, #2D63B0);
 }
 
 /* Progress */
@@ -1282,7 +1282,7 @@ function formatDate(d: string | null) {
 }
 .progress-bar {
   height: 100%;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   border-radius: 4px;
   transition: width 0.3s ease;
 }
@@ -1316,7 +1316,7 @@ function formatDate(d: string | null) {
 }
 .lib-bar-label { width: 140px; font-size: 13px; text-align: right; flex-shrink: 0; }
 .lib-bar-track { flex: 1; height: 18px; background: var(--color-bg, #f4f7fa); border-radius: 3px; overflow: hidden; }
-.lib-bar-fill { height: 100%; background: var(--color-primary, #3B7DD8); border-radius: 3px; transition: width 0.3s; }
+.lib-bar-fill { height: 100%; background: var(--color-primary, #2D63B0); border-radius: 3px; transition: width 0.3s; }
 .lib-bar-value { width: 100px; font-size: 12px; color: var(--color-text-muted); }
 
 /* Histogram */
@@ -1347,7 +1347,7 @@ function formatDate(d: string | null) {
   font-size: 13px;
 }
 .tag-count {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
   border-radius: 10px;
   padding: 1px 6px;
@@ -1417,7 +1417,7 @@ function formatDate(d: string | null) {
   min-height: 80px;
 }
 .treemap-block {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
   border-radius: 6px;
   padding: 10px;
@@ -1522,7 +1522,7 @@ function formatDate(d: string | null) {
 }
 .heal-kpi__bar {
   flex: 1;
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   border-radius: 2px 2px 0 0;
   min-height: 2px;
   transition: height 0.2s ease;
@@ -1560,9 +1560,9 @@ function formatDate(d: string | null) {
   margin-left: 4px;
 }
 .quarantine-btn:hover:not(:disabled) {
-  background: var(--color-primary, #3B7DD8);
+  background: var(--color-primary, #2D63B0);
   color: white;
-  border-color: var(--color-primary, #3B7DD8);
+  border-color: var(--color-primary, #2D63B0);
 }
 .quarantine-btn:disabled {
   opacity: 0.5;