diff --git a/src/styles/vars.scss b/src/styles/vars.scss
index d91f4c7..b656fec 100644
--- a/src/styles/vars.scss
+++ b/src/styles/vars.scss
@@ -1,39 +1,39 @@
-// Dark application theme
-$color-background-base: #070c11;
-$color-background-panel: #0b1218;
-$color-background-card: #101a21;
-$color-background-card-hover: #16252d;
-$color-background-header-translucent: rgba(11, 18, 24, 0.92);
-$color-background-tooltip-translucent: rgba(11, 18, 24, 0.96);
+// Dark navy technology theme
+$color-background-base: #050a14;
+$color-background-panel: #091321;
+$color-background-card: #0d1a2b;
+$color-background-card-hover: #122640;
+$color-background-header-translucent: rgba(7, 15, 27, 0.96);
+$color-background-tooltip-translucent: rgba(10, 22, 38, 0.98);
 
-$color-text-primary: #c8d9e2;
-$color-text-secondary: #86a7b5;
-$color-text-bright: #edf9fc;
-$color-text-accent-soft: #b4eaf4;
-$color-text-accent-bright: #d2f4fa;
-$color-text-navigation: #a8cbd5;
-$color-text-navigation-active: #effcff;
-$color-text-tooltip: #9db9c3;
+$color-text-primary: #c5d3e3;
+$color-text-secondary: #7790aa;
+$color-text-bright: #edf6ff;
+$color-text-accent-soft: #8dbde3;
+$color-text-accent-bright: #b9ddf8;
+$color-text-navigation: #89a6bf;
+$color-text-navigation-active: #e5f5ff;
+$color-text-tooltip: #9bb1c7;
 
-$color-accent-primary: #66d9f7;
-$color-accent-secondary: #8ee7f9;
-$color-accent-border: rgba(102, 217, 247, 0.14);
-$color-accent-border-strong: rgba(102, 217, 247, 0.34);
-$color-accent-glow: rgba(102, 217, 247, 0.18);
-$color-accent-subtle: rgba(102, 217, 247, 0.07);
-$color-accent-soft: rgba(102, 217, 247, 0.10);
-$color-accent-medium: rgba(102, 217, 247, 0.12);
-$color-accent-selected: rgba(102, 217, 247, 0.16);
-$color-accent-border-muted: rgba(102, 217, 247, 0.20);
-$color-accent-border-header: rgba(102, 217, 247, 0.30);
-$color-accent-border-hover: rgba(102, 217, 247, 0.42);
-$color-accent-border-active: rgba(142, 231, 249, 0.72);
-$color-accent-text-muted: rgba(142, 231, 249, 0.42);
-$color-accent-radial-glow: rgba(102, 217, 247, 0.09);
-$color-accent-inset-glow: rgba(102, 217, 247, 0.06);
-$color-accent-tag-background: rgba(102, 217, 247, 0.08);
-$color-accent-core-background: rgba(102, 217, 247, 0.03);
-$color-accent-slider-glow: rgba(102, 217, 247, 0.35);
+$color-accent-primary: #309fe8;
+$color-accent-secondary: #58b7f0;
+$color-accent-border: rgba(48, 159, 232, 0.16);
+$color-accent-border-strong: rgba(48, 159, 232, 0.34);
+$color-accent-glow: rgba(48, 159, 232, 0.18);
+$color-accent-subtle: rgba(48, 159, 232, 0.06);
+$color-accent-soft: rgba(48, 159, 232, 0.10);
+$color-accent-medium: rgba(48, 159, 232, 0.13);
+$color-accent-selected: rgba(48, 159, 232, 0.18);
+$color-accent-border-muted: rgba(48, 159, 232, 0.22);
+$color-accent-border-header: rgba(48, 159, 232, 0.30);
+$color-accent-border-hover: rgba(48, 159, 232, 0.46);
+$color-accent-border-active: rgba(88, 183, 240, 0.68);
+$color-accent-text-muted: rgba(88, 183, 240, 0.38);
+$color-accent-radial-glow: rgba(48, 159, 232, 0.09);
+$color-accent-inset-glow: rgba(48, 159, 232, 0.07);
+$color-accent-tag-background: rgba(48, 159, 232, 0.09);
+$color-accent-core-background: rgba(48, 159, 232, 0.04);
+$color-accent-slider-glow: rgba(48, 159, 232, 0.32);
 
 $color-danger: #ff2d55;
 $color-danger-background: rgba(255, 45, 85, 0.06);
@@ -49,11 +49,11 @@ $color-axis-z: #38bdf8;
 $color-axis-z-background: rgba(56, 189, 248, 0.15);
 $color-axis-z-border: rgba(56, 189, 248, 0.30);
 
-$color-white-subtle: rgba(255, 255, 255, 0.02);
-$color-white-muted: rgba(255, 255, 255, 0.05);
-$color-shadow-soft: rgba(0, 0, 0, 0.06);
-$color-shadow-header: rgba(0, 0, 0, 0.22);
-$color-shadow-tooltip: rgba(0, 0, 0, 0.50);
+$color-white-subtle: rgba(255, 255, 255, 0.025);
+$color-white-muted: rgba(255, 255, 255, 0.06);
+$color-shadow-soft: rgba(0, 0, 0, 0.20);
+$color-shadow-header: rgba(0, 0, 0, 0.34);
+$color-shadow-tooltip: rgba(0, 0, 0, 0.48);
 
 // Connection page
 $color-connection-card: #ffffff;
@@ -63,25 +63,25 @@ $color-connection-primary: #003af7;
 $color-connection-tip-background: #b7c5f3;
 
 // Canvas and 3D visualization
-$color-canvas-grid-line: rgba(30, 50, 80, 0.25);
+$color-canvas-grid-line: rgba(48, 99, 148, 0.22);
 $color-canvas-area-fill: rgba(224, 64, 251, 0.12);
 $color-canvas-area-border: rgba(224, 64, 251, 0.50);
 $color-canvas-line-default: #ff6e40;
 $color-canvas-line-forbidden: #ff1744;
 $color-canvas-line-virtual: #ffab40;
-$color-canvas-route: #00e5ff;
-$color-canvas-route-arrow: rgba(0, 229, 255, 0.60);
-$color-canvas-curve: #76ff03;
-$color-canvas-curve-arrow: rgba(118, 255, 3, 0.70);
-$color-canvas-curve-marker: rgba(118, 255, 3, 0.25);
+$color-canvas-route: #35aaf2;
+$color-canvas-route-arrow: rgba(53, 170, 242, 0.62);
+$color-canvas-curve: #68b8e8;
+$color-canvas-curve-arrow: rgba(104, 184, 232, 0.68);
+$color-canvas-curve-marker: rgba(104, 184, 232, 0.24);
 $color-canvas-landmark: #ffd600;
 $color-canvas-charging-point: #22c55e;
 $color-canvas-loading-point: #3b82f6;
 $color-canvas-workstation: #a855f7;
-$color-canvas-tooltip-title: #00e5a0;
-$color-canvas-boundary: rgba(0, 229, 160, 0.10);
-$color-canvas-robot: #00d4ff;
-$color-canvas-robot-label: #a0c0f0;
+$color-canvas-tooltip-title: #58b7f0;
+$color-canvas-boundary: rgba(48, 159, 232, 0.14);
+$color-canvas-robot: #309fe8;
+$color-canvas-robot-label: #a8c9e2;
 
 // Video player controls
 $color-player-marker: #ffffff;