diff --git a/frontend/css/base/theme.css b/frontend/css/base/theme.css
index 32b0753..697b7a5 100644
--- a/frontend/css/base/theme.css
+++ b/frontend/css/base/theme.css
@@ -39,6 +39,13 @@
     --radius-sm: 6px;
     --radius-md: 10px;
     --radius-lg: 14px;
+
+    /* Active State Theme Tokens (Light Mode) */
+    --btn-active-bg: #0f172a;
+    --btn-active-text: #ffffff;
+    --btn-active-border: #0f172a;
+    --btn-active-icon: #ffffff;
+    --btn-active-rate: #6ee7b7;
 }
 
 /* Dark Theme */
@@ -75,6 +82,13 @@
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
     --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6);
+
+    /* Active State Theme Tokens (Dark Mode) */
+    --btn-active-bg: #3b82f6;
+    --btn-active-text: #ffffff;
+    --btn-active-border: #60a5fa;
+    --btn-active-icon: #ffffff;
+    --btn-active-rate: #a7f3d0;
 }
 
 * {
diff --git a/frontend/css/layout/header.css b/frontend/css/layout/header.css
index 21923fe..1ba9625 100644
--- a/frontend/css/layout/header.css
+++ b/frontend/css/layout/header.css
@@ -264,18 +264,18 @@
 }
 
 #header-sector-container .sector-pill.active {
-    background: var(--text-primary);
-    color: #ffffff;
-    border-color: var(--text-primary);
+    background: var(--btn-active-bg);
+    color: var(--btn-active-text);
+    border-color: var(--btn-active-border);
     box-shadow: var(--shadow-sm);
 }
 
 #header-sector-container .sector-pill.active iconify-icon {
-    color: #ffffff !important;
+    color: var(--btn-active-icon) !important;
 }
 
 #header-sector-container .sector-pill.active .sector-pill-rate {
-    color: #a7f3d0;
+    color: var(--btn-active-rate);
 }
 
 /* Right Header Actions: Department Nav & Buy Multiplier */
@@ -330,9 +330,9 @@
 }
 
 .header-nav-btn.active {
-    background: var(--primary-blue);
-    color: #ffffff;
-    border-color: var(--primary-blue);
+    background: var(--btn-active-bg);
+    color: var(--btn-active-text);
+    border-color: var(--btn-active-border);
     box-shadow: var(--shadow-sm);
 }
 
@@ -342,7 +342,7 @@
 }
 
 .header-nav-btn.active iconify-icon {
-    color: #ffffff;
+    color: var(--btn-active-icon);
 }
 
 .header-nav-btn .nav-pill-badge {
@@ -397,9 +397,9 @@
 }
 
 .btn-multi-pill.active {
-    background: var(--text-primary);
-    color: #ffffff;
-    border-color: var(--text-primary);
+    background: var(--btn-active-bg);
+    color: var(--btn-active-text);
+    border-color: var(--btn-active-border);
     box-shadow: var(--shadow-sm);
 }
 
diff --git a/frontend/css/views/production.css b/frontend/css/views/production.css
index 83d6b2d..d099ead 100644
--- a/frontend/css/views/production.css
+++ b/frontend/css/views/production.css
@@ -42,17 +42,18 @@
 }
 
 .sector-pill.active {
-    background: var(--text-primary);
-    color: #ffffff;
-    border-color: var(--text-primary);
+    background: var(--btn-active-bg);
+    color: var(--btn-active-text);
+    border-color: var(--btn-active-border);
+    box-shadow: var(--shadow-sm);
 }
 
 .sector-pill.active iconify-icon {
-    color: #ffffff !important;
+    color: var(--btn-active-icon) !important;
 }
 
 .sector-pill.active .sector-pill-rate {
-    color: #a7f3d0;
+    color: var(--btn-active-rate);
 }
 
 .production-grid {