diff --git a/frontend/src/components/License/LicenseManager.css b/frontend/src/components/License/LicenseManager.css
index 4ed2008..bbda742 100644
--- a/frontend/src/components/License/LicenseManager.css
+++ b/frontend/src/components/License/LicenseManager.css
@@ -1,110 +1,110 @@
 .license-manager {
     min-height: 100vh;
-    background-color: #f5f5f7;
+    background-color: var(--surface-sunken);
 }
 
 .lm-body {
-    padding: 20px;
+    padding: var(--space-5);
     max-width: 800px;
     margin: 0 auto;
 }
 
 .lm-loading,
 .lm-empty {
-    padding: 24px;
+    padding: var(--space-6);
     text-align: center;
-    color: #999;
+    color: var(--text-muted);
     font-style: italic;
 }
 
 .lm-toolbar {
-    margin-bottom: 16px;
+    margin-bottom: var(--space-4);
 }
 
 .lm-back {
-    padding: 6px 12px;
-    background: white;
-    border: 1px solid #ddd;
+    padding: var(--space-1-5) var(--space-3);
+    background: var(--surface);
+    border: 1px solid var(--border);
     border-radius: 6px;
-    color: #666;
+    color: var(--text-muted);
     cursor: pointer;
-    font-size: 13px;
+    font-size: var(--fs-base);
 }
 
 .lm-back:hover {
-    border-color: #667eea;
-    color: #667eea;
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
 .lm-ok,
 .lm-error {
-    padding: 8px 12px;
+    padding: var(--space-2) var(--space-3);
     border-radius: 6px;
-    font-size: 13px;
-    margin-bottom: 12px;
+    font-size: var(--fs-base);
+    margin-bottom: var(--space-3);
 }
 
 .lm-ok {
-    background-color: #e8f5e9;
-    border: 1px solid #c8e6c9;
-    color: #2e7d32;
+    background-color: var(--success-soft);
+    border: 1px solid var(--success);
+    color: var(--success);
 }
 
 .lm-error {
-    background-color: #fee;
-    border: 1px solid #fcc;
-    color: #c33;
+    background-color: var(--danger-soft);
+    border: 1px solid var(--danger);
+    color: var(--danger);
 }
 
 .lm-panel {
-    background: white;
+    background: var(--surface);
     border-radius: 8px;
-    padding: 18px;
-    margin-bottom: 16px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    padding: var(--space-5);
+    margin-bottom: var(--space-4);
+    box-shadow: var(--shadow-card);
 }
 
 .lm-panel h3 {
-    margin: 0 0 12px 0;
-    font-size: 12px;
-    font-weight: 600;
-    color: #888;
+    margin: 0 0 var(--space-3) 0;
+    font-size: var(--fs-sm);
+    font-weight: var(--fw-semibold);
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .lm-badge {
     display: inline-block;
-    padding: 3px 10px;
+    padding: var(--space-1) var(--space-2-5);
     border-radius: 4px;
-    font-size: 11px;
-    font-weight: 600;
+    font-size: var(--fs-xs);
+    font-weight: var(--fw-semibold);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    margin-bottom: 10px;
+    margin-bottom: var(--space-2-5);
 }
 
 .lm-badge--ok {
-    background-color: #e8f5e9;
-    color: #2e7d32;
+    background-color: var(--success-soft);
+    color: var(--success);
 }
 
 .lm-badge--warn {
-    background-color: #fff3cd;
-    color: #856404;
+    background-color: var(--warning-soft);
+    color: var(--warning);
 }
 
 .lm-facts {
     display: grid;
     grid-template-columns: 140px 1fr;
-    gap: 6px 12px;
+    gap: var(--space-1-5) var(--space-3);
     margin: 0;
 }
 
 .lm-facts dt {
-    font-size: 11px;
-    font-weight: 600;
-    color: #888;
+    font-size: var(--fs-xs);
+    font-weight: var(--fw-semibold);
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     align-self: center;
@@ -112,107 +112,107 @@
 
 .lm-facts dd {
     margin: 0;
-    font-size: 14px;
-    color: #333;
+    font-size: var(--fs-md);
+    color: var(--text);
 }
 
 .lm-reason {
-    margin: 0 0 8px 0;
-    font-size: 14px;
-    color: #333;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--fs-md);
+    color: var(--text);
 }
 
 .lm-grace {
     margin: 0;
-    font-size: 13px;
-    color: #666;
+    font-size: var(--fs-base);
+    color: var(--text-muted);
     line-height: 1.5;
 }
 
 .lm-hint {
-    margin: 0 0 12px 0;
-    font-size: 13px;
-    color: #666;
+    margin: 0 0 var(--space-3) 0;
+    font-size: var(--fs-base);
+    color: var(--text-muted);
     line-height: 1.5;
 }
 
 .lm-fingerprint {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
 }
 
 .lm-fingerprint code {
     flex: 1;
-    padding: 10px 12px;
-    background-color: #f8f9fa;
-    border: 1px solid #dee2e6;
+    padding: var(--space-2-5) var(--space-3);
+    background-color: var(--surface-sunken);
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-family: 'Courier New', monospace;
-    font-size: 18px;
+    font-family: var(--font-mono);
+    font-size: var(--fs-xl);
     letter-spacing: 1px;
-    color: #333;
+    color: var(--text);
     word-break: break-all;
 }
 
 .lm-components {
-    font-size: 11px !important;
+    font-size: var(--fs-xs) !important;
     letter-spacing: 0 !important;
 }
 
 .lm-fingerprint button {
-    padding: 8px 14px;
+    padding: var(--space-2) var(--space-4);
     background: none;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    color: #666;
-    font-size: 13px;
+    color: var(--text-muted);
+    font-size: var(--fs-base);
     cursor: pointer;
     flex-shrink: 0;
 }
 
 .lm-fingerprint button:hover {
-    border-color: #667eea;
-    color: #667eea;
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
 .lm-details {
-    margin-top: 10px;
+    margin-top: var(--space-2-5);
 }
 
 .lm-details summary {
-    font-size: 12px;
-    color: #888;
+    font-size: var(--fs-sm);
+    color: var(--text-muted);
     cursor: pointer;
-    margin-bottom: 8px;
+    margin-bottom: var(--space-2);
 }
 
 .lm-blob {
     width: 100%;
-    padding: 10px;
-    border: 1px solid #ddd;
+    padding: var(--space-2-5);
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-family: 'Courier New', monospace;
-    font-size: 12px;
+    font-family: var(--font-mono);
+    font-size: var(--fs-sm);
     box-sizing: border-box;
     resize: vertical;
 }
 
 .lm-install {
-    margin-top: 10px;
-    padding: 9px 18px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    margin-top: var(--space-2-5);
+    padding: var(--space-2-5) var(--space-5);
+    background: var(--accent-gradient);
     border: none;
     border-radius: 6px;
-    color: white;
-    font-size: 13px;
-    font-weight: 600;
+    color: var(--accent-contrast);
+    font-size: var(--fs-base);
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
 .lm-install:hover:not(:disabled) {
     transform: translateY(-1px);
-    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .lm-install:disabled {
@@ -226,41 +226,41 @@
 }
 
 .lm-table th {
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
     text-align: left;
-    font-weight: 600;
-    color: #495057;
-    font-size: 0.75rem;
-    border-bottom: 2px solid #dee2e6;
+    font-weight: var(--fw-semibold);
+    color: var(--text);
+    font-size: var(--fs-sm);
+    border-bottom: 2px solid var(--border);
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
 }
 
 .lm-table td {
-    padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid #dee2e6;
-    font-size: 0.85rem;
-    color: #333;
-    font-family: 'Courier New', monospace;
+    padding: var(--space-2) var(--space-3);
+    border-bottom: 1px solid var(--border);
+    font-size: var(--fs-md);
+    color: var(--text);
+    font-family: var(--font-mono);
 }
 
 /* Persistent, non-dismissible banner shown app-wide during grace */
 .license-banner {
-    padding: 8px 16px;
-    background-color: #fff3cd;
-    border-bottom: 1px solid #ffe69c;
-    color: #856404;
-    font-size: 13px;
+    padding: var(--space-2) var(--space-4);
+    background-color: var(--warning-soft);
+    border-bottom: 1px solid var(--warning);
+    color: var(--warning);
+    font-size: var(--fs-base);
     text-align: center;
 }
 
 .license-banner strong {
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
 }
 
 .license-banner--blocked {
-    background-color: #fee;
-    border-bottom-color: #fcc;
-    color: #c33;
+    background-color: var(--danger-soft);
+    border-bottom-color: var(--danger);
+    color: var(--danger);
 }
diff --git a/frontend/src/components/Main.css b/frontend/src/components/Main.css
index 32693e6..8b9864f 100644
--- a/frontend/src/components/Main.css
+++ b/frontend/src/components/Main.css
@@ -727,7 +727,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/frontend/src/components/NomenclatureManager/NomenclatureManager.css b/frontend/src/components/NomenclatureManager/NomenclatureManager.css
index 3ae188a..d7b8310 100644
--- a/frontend/src/components/NomenclatureManager/NomenclatureManager.css
+++ b/frontend/src/components/NomenclatureManager/NomenclatureManager.css
@@ -5,12 +5,12 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 20px;
+  padding: var(--space-5);
   animation: nmFadeIn 0.2s ease-in;
 }
 
@@ -21,9 +21,9 @@
 
 /* Main content container */
 .nm-content {
-  background: white;
+  background: var(--surface);
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
   width: 100%;
   max-width: 960px;
   max-height: 90vh;
@@ -39,8 +39,8 @@
 
 /* Header */
 .nm-header {
-  padding: 20px 24px;
-  border-bottom: 2px solid #667eea;
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 2px solid var(--accent);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -49,15 +49,15 @@
 
 .nm-header h2 {
   margin: 0;
-  color: #667eea;
-  font-size: 22px;
+  color: var(--accent);
+  font-size: var(--fs-2xl);
 }
 
 .nm-close-button {
   background: none;
   border: none;
-  font-size: 32px;
-  color: #999;
+  font-size: var(--fs-display);
+  color: var(--text-muted);
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -70,8 +70,8 @@
 }
 
 .nm-close-button:hover {
-  background: #f5f5f5;
-  color: #333;
+  background: var(--surface-sunken);
+  color: var(--text);
 }
 
 /* Body - two panels */
@@ -85,28 +85,28 @@
 /* Left panel */
 .nm-list-panel {
   width: 250px;
-  border-right: 1px solid #e0e0e0;
+  border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }
 
 .nm-add-btn {
-  margin: 12px;
-  padding: 8px 16px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  margin: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  background: var(--accent-gradient);
+  color: var(--accent-contrast);
   border: none;
   border-radius: 6px;
-  font-size: 14px;
-  font-weight: 600;
+  font-size: var(--fs-md);
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .nm-add-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .nm-list {
@@ -117,20 +117,20 @@
 .nm-list-item {
   display: flex;
   align-items: center;
-  padding: 10px 12px;
+  padding: var(--space-2-5) var(--space-3);
   cursor: pointer;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border);
   transition: background 0.15s;
   user-select: none;
 }
 
 .nm-list-item:hover {
-  background: #f5f5ff;
+  background: var(--accent-soft);
 }
 
 .nm-list-item--active {
-  background: #eef0ff;
-  border-left: 3px solid #667eea;
+  background: var(--accent-soft);
+  border-left: 3px solid var(--accent);
 }
 
 .nm-list-item--dragging {
@@ -139,7 +139,7 @@
 
 /* Inset shadow rather than a border, so the drop line adds no row height */
 .nm-list-item--drag-over {
-  box-shadow: inset 0 2px 0 #667eea;
+  box-shadow: inset 0 2px 0 var(--accent);
 }
 
 .nm-list-item-info {
@@ -149,9 +149,9 @@
 
 .nm-list-item-name {
   display: block;
-  font-weight: 600;
-  font-size: 14px;
-  color: #333;
+  font-weight: var(--fw-semibold);
+  font-size: var(--fs-md);
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -159,40 +159,40 @@
 
 .nm-list-item-meta {
   display: block;
-  font-size: 11px;
-  color: #999;
-  margin-top: 2px;
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+  margin-top: var(--space-0-5);
 }
 
 .nm-edit-btn {
   background: none;
   border: none;
-  color: #999;
-  font-size: 16px;
+  color: var(--text-muted);
+  font-size: var(--fs-lg);
   cursor: pointer;
-  padding: 4px;
+  padding: var(--space-1);
   border-radius: 4px;
   transition: color 0.2s, background 0.2s;
   flex-shrink: 0;
 }
 
 .nm-edit-btn:hover {
-  color: #667eea;
-  background: #f0f0ff;
+  color: var(--accent);
+  background: var(--accent-soft);
 }
 
 .nm-loading {
-  padding: 20px;
+  padding: var(--space-5);
   text-align: center;
-  color: #999;
-  font-size: 14px;
+  color: var(--text-muted);
+  font-size: var(--fs-md);
 }
 
 .nm-empty {
-  padding: 16px;
+  padding: var(--space-4);
   text-align: center;
-  color: #999;
-  font-size: 13px;
+  color: var(--text-muted);
+  font-size: var(--fs-base);
 }
 
 /* Right panel */
@@ -207,51 +207,51 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: #999;
-  font-size: 15px;
-  padding: 40px;
+  color: var(--text-muted);
+  font-size: var(--fs-lg);
+  padding: var(--space-10);
   text-align: center;
 }
 
 .nm-form {
-  padding: 20px 24px;
+  padding: var(--space-5) var(--space-6);
 }
 
 .nm-form-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 16px;
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semibold);
+  color: var(--text);
+  margin-bottom: var(--space-4);
 }
 
 .nm-error {
-  background-color: #fee;
-  color: #c33;
-  padding: 10px 14px;
+  background-color: var(--danger-soft);
+  color: var(--danger);
+  padding: var(--space-2-5) var(--space-4);
   border-radius: 6px;
-  border: 1px solid #fcc;
-  font-size: 13px;
-  margin-bottom: 14px;
+  border: 1px solid var(--danger);
+  font-size: var(--fs-base);
+  margin-bottom: var(--space-4);
 }
 
 /* Form grid */
 .nm-form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-bottom: 20px;
+  gap: var(--space-3);
+  margin-bottom: var(--space-5);
 }
 
 .nm-form-group {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
 }
 
 .nm-form-group label {
-  font-weight: 600;
-  color: #555;
-  font-size: 12px;
+  font-weight: var(--fw-semibold);
+  color: var(--text-muted);
+  font-size: var(--fs-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -259,61 +259,61 @@
 .nm-form-group input[type="text"],
 .nm-form-group input[type="number"],
 .nm-form-group select {
-  padding: 8px 10px;
-  border: 1px solid #ddd;
+  padding: var(--space-2) var(--space-2-5);
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
   transition: border-color 0.2s;
 }
 
 .nm-form-group input:focus,
 .nm-form-group select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-form-group input:disabled,
 .nm-form-group select:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 /* Sections */
 .nm-section {
-  margin-bottom: 20px;
+  margin-bottom: var(--space-5);
 }
 
 .nm-section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: var(--space-2);
+  padding-bottom: var(--space-1-5);
+  border-bottom: 1px solid var(--border);
 }
 
 .nm-section-header h3 {
   margin: 0;
-  font-size: 14px;
-  color: #667eea;
-  font-weight: 600;
+  font-size: var(--fs-md);
+  color: var(--accent);
+  font-weight: var(--fw-semibold);
 }
 
 .nm-section-add {
   background: none;
-  border: 1px solid #667eea;
-  color: #667eea;
-  padding: 4px 10px;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  padding: var(--space-1) var(--space-2-5);
   border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
 }
 
 .nm-section-add:hover {
-  background: #667eea;
-  color: white;
+  background: var(--accent);
+  color: var(--accent-contrast);
 }
 
 .nm-section-add:disabled {
@@ -323,7 +323,7 @@
 
 /* Fields table */
 .nm-fields-table {
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border);
   border-radius: 6px;
   overflow: hidden;
 }
@@ -331,12 +331,12 @@
 .nm-fields-header {
   display: grid;
   grid-template-columns: 2fr 2fr 1.2fr 40px 32px;
-  gap: 6px;
-  padding: 6px 8px;
-  background: #f8f8fc;
-  font-size: 11px;
-  font-weight: 600;
-  color: #666;
+  gap: var(--space-1-5);
+  padding: var(--space-1-5) var(--space-2);
+  background: var(--surface-sunken);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -344,38 +344,38 @@
 .nm-fields-row {
   display: grid;
   grid-template-columns: 2fr 2fr 1.2fr 40px 32px;
-  gap: 6px;
-  padding: 6px 8px;
-  border-top: 1px solid #f0f0f0;
+  gap: var(--space-1-5);
+  padding: var(--space-1-5) var(--space-2);
+  border-top: 1px solid var(--border);
   align-items: center;
 }
 
 .nm-fields-row input[type="text"] {
-  padding: 5px 8px;
-  border: 1px solid #ddd;
+  padding: var(--space-1-5) var(--space-2);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
 
 .nm-fields-row input[type="text"]:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-fields-row select {
-  padding: 5px 4px;
-  border: 1px solid #ddd;
+  padding: var(--space-1-5) var(--space-1);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
 
 .nm-fields-row select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-fields-row input[type="checkbox"] {
@@ -388,8 +388,8 @@
 .nm-remove-btn {
   background: none;
   border: none;
-  color: #ccc;
-  font-size: 20px;
+  color: var(--border-strong);
+  font-size: var(--fs-2xl);
   cursor: pointer;
   padding: 0;
   width: 24px;
@@ -402,8 +402,8 @@
 }
 
 .nm-remove-btn:hover:not(:disabled) {
-  color: #c33;
-  background: #fee;
+  color: var(--danger);
+  background: var(--danger-soft);
 }
 
 .nm-remove-btn:disabled {
@@ -415,51 +415,51 @@
 .nm-entries {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .nm-entry {
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  padding: 10px 12px;
+  padding: var(--space-2-5) var(--space-3);
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  gap: var(--space-2-5);
 }
 
 .nm-entry--inactive {
   opacity: 0.5;
-  background: #fafafa;
+  background: var(--surface-sunken);
 }
 
 .nm-entry-fields {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .nm-entry-field {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-0-5);
   min-width: 100px;
   flex: 1;
 }
 
 .nm-entry-field label {
-  font-size: 11px;
-  color: #888;
-  font-weight: 500;
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+  font-weight: var(--fw-medium);
 }
 
 .nm-entry-field input[type="text"],
 .nm-entry-field input[type="number"],
 .nm-entry-field select {
-  padding: 5px 8px;
-  border: 1px solid #ddd;
+  padding: var(--space-1-5) var(--space-2);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
@@ -467,61 +467,61 @@
 .nm-entry-field input:focus,
 .nm-entry-field select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-entry-field input[type="checkbox"] {
   width: 16px;
   height: 16px;
-  margin-top: 4px;
+  margin-top: var(--space-1);
 }
 
 .nm-entry-actions {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
   flex-shrink: 0;
 }
 
 .nm-entry-save {
-  background: #667eea;
-  color: white;
+  background: var(--accent);
+  color: var(--accent-contrast);
   border: none;
-  padding: 4px 10px;
+  padding: var(--space-1) var(--space-2-5);
   border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .nm-entry-save:hover {
-  background: #5568d3;
+  background: var(--accent-hover);
 }
 
 .nm-entry-toggle {
-  background: #e8f5e9;
-  color: #2e7d32;
+  background: var(--success-soft);
+  color: var(--success);
   border: none;
-  padding: 4px 10px;
+  padding: var(--space-1) var(--space-2-5);
   border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .nm-entry-toggle:hover {
-  background: #c8e6c9;
+  background: color-mix(in srgb, var(--success) 25%, transparent);
 }
 
 .nm-entry-toggle--inactive {
-  background: #fff3e0;
-  color: #e65100;
+  background: var(--warning-soft);
+  color: var(--warning);
 }
 
 .nm-entry-toggle--inactive:hover {
-  background: #ffe0b2;
+  background: color-mix(in srgb, var(--warning) 25%, transparent);
 }
 
 /* Form actions */
@@ -529,49 +529,49 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 20px;
-  padding-top: 16px;
-  border-top: 1px solid #e0e0e0;
+  margin-top: var(--space-5);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border);
 }
 
 .nm-form-actions-right {
   display: flex;
-  gap: 10px;
+  gap: var(--space-2-5);
   margin-left: auto;
 }
 
 .nm-cancel-btn {
-  padding: 8px 20px;
-  background: white;
-  border: 1px solid #ddd;
-  color: #666;
+  padding: var(--space-2) var(--space-5);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
   border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--fs-md);
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: border-color 0.2s, color 0.2s;
 }
 
 .nm-cancel-btn:hover:not(:disabled) {
-  border-color: #999;
-  color: #333;
+  border-color: var(--border-strong);
+  color: var(--text);
 }
 
 .nm-save-btn {
-  padding: 8px 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: var(--space-2) var(--space-6);
+  background: var(--accent-gradient);
   border: none;
-  color: white;
+  color: var(--accent-contrast);
   border-radius: 6px;
-  font-size: 14px;
-  font-weight: 600;
+  font-size: var(--fs-md);
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .nm-save-btn:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .nm-save-btn:disabled,
@@ -581,19 +581,19 @@
 }
 
 .nm-delete-btn {
-  padding: 8px 16px;
-  background: white;
-  border: 1px solid #e57373;
-  color: #c33;
+  padding: var(--space-2) var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--danger);
+  color: var(--danger);
   border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: var(--fs-base);
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
 }
 
 .nm-delete-btn:hover:not(:disabled) {
-  background: #fee;
+  background: var(--danger-soft);
 }
 
 .nm-delete-btn:disabled {
@@ -617,7 +617,7 @@
     width: 100%;
     max-height: 200px;
     border-right: none;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border);
   }
 
   .nm-form-grid {
@@ -628,50 +628,50 @@
 /* --- Selector options editor --- */
 .nm-options-empty {
   margin: 0;
-  padding: 10px 8px;
-  font-size: 13px;
-  color: #888;
+  padding: var(--space-2-5) var(--space-2);
+  font-size: var(--fs-base);
+  color: var(--text-muted);
   line-height: 1.5;
 }
 
 .nm-option-row {
-  border-top: 1px solid #f0f0f0;
-  padding: 8px;
+  border-top: 1px solid var(--border);
+  padding: var(--space-2);
 }
 
 .nm-option-head {
   display: grid;
   grid-template-columns: 1fr 1fr 32px;
-  gap: 6px;
+  gap: var(--space-1-5);
   align-items: center;
 }
 
 .nm-option-head input[type="text"] {
-  padding: 5px 8px;
-  border: 1px solid #ddd;
+  padding: var(--space-1-5) var(--space-2);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
 
 .nm-option-head input[type="text"]:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-option-remove {
   background: none;
   border: none;
-  color: #c0392b;
-  font-size: 18px;
+  color: var(--danger);
+  font-size: var(--fs-xl);
   cursor: pointer;
   padding: 0;
   line-height: 1;
 }
 
 .nm-option-remove:disabled {
-  color: #ccc;
+  color: var(--border-strong);
   cursor: not-allowed;
 }
 
@@ -679,14 +679,14 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 10px;
-  margin-top: 6px;
-  padding-left: 2px;
+  gap: var(--space-2-5);
+  margin-top: var(--space-1-5);
+  padding-left: var(--space-0-5);
 }
 
 .nm-option-reveals-label {
-  font-size: 12px;
-  color: #888;
+  font-size: var(--fs-sm);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -694,8 +694,8 @@
 .nm-option-reveal {
   display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  color: #333;
+  gap: var(--space-1);
+  font-size: var(--fs-base);
+  color: var(--text);
   cursor: pointer;
 }
diff --git a/frontend/src/components/NomenclatureUI/FormOverlay.css b/frontend/src/components/NomenclatureUI/FormOverlay.css
index b81bd14..6886c76 100644
--- a/frontend/src/components/NomenclatureUI/FormOverlay.css
+++ b/frontend/src/components/NomenclatureUI/FormOverlay.css
@@ -5,7 +5,7 @@
     right: 0;
     bottom: 0;
     z-index: 13000;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,9 +21,9 @@
     width: 90%;
     max-width: 600px;
     max-height: 80vh;
-    background: white;
+    background: var(--surface);
     border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-overlay);
     display: flex;
     flex-direction: column;
     animation: nuiFormSlideUp 0.15s ease-out;
@@ -38,18 +38,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid #eee;
-    background-color: #f8f9fa;
+    padding: var(--space-4) var(--space-6);
+    border-bottom: 1px solid var(--border);
+    background-color: var(--surface-sunken);
     border-radius: 8px 8px 0 0;
     flex-shrink: 0;
 }
 
 .nui-form-modal-header h3 {
     margin: 0;
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #333;
+    font-size: var(--fs-xl);
+    font-weight: var(--fw-semibold);
+    color: var(--text);
 }
 
 .nui-form-modal-close {
@@ -60,8 +60,8 @@
     justify-content: center;
     background: none;
     border: none;
-    font-size: 1.4rem;
-    color: #666;
+    font-size: var(--fs-2xl);
+    color: var(--text-muted);
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.2s, color 0.2s;
@@ -69,12 +69,12 @@
 }
 
 .nui-form-modal-close:hover {
-    background-color: #e9ecef;
-    color: #333;
+    background-color: var(--surface-hover);
+    color: var(--text);
 }
 
 .nui-form-modal-content {
-    padding: 1.5rem;
+    padding: var(--space-6);
     overflow-y: auto;
     flex: 1;
 }
diff --git a/frontend/src/components/NomenclatureUI/NomenclatureDropdown.css b/frontend/src/components/NomenclatureUI/NomenclatureDropdown.css
index 1c5cce7..622570e 100644
--- a/frontend/src/components/NomenclatureUI/NomenclatureDropdown.css
+++ b/frontend/src/components/NomenclatureUI/NomenclatureDropdown.css
@@ -1,13 +1,13 @@
 .nui-dropdown {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: var(--space-1);
 }
 
 .nui-dropdown-label {
-    font-size: 12px;
-    font-weight: 600;
-    color: #555;
+    font-size: var(--fs-sm);
+    font-weight: var(--fw-semibold);
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -15,58 +15,58 @@
 .nui-dropdown-label--checkbox {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     cursor: pointer;
     text-transform: uppercase;
 }
 
 .nui-dropdown-row {
     display: flex;
-    gap: 4px;
+    gap: var(--space-1);
 }
 
 .nui-dropdown-select {
     flex: 1;
-    padding: 7px 10px;
-    border: 1px solid #ddd;
+    padding: var(--space-2) var(--space-2-5);
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 14px;
-    background-color: white;
-    color: #333;
+    font-size: var(--fs-md);
+    background-color: var(--surface);
+    color: var(--text);
     transition: border-color 0.2s;
     min-width: 0;
 }
 
 .nui-dropdown-select:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--accent);
 }
 
 .nui-dropdown-select:disabled {
-    background-color: #f0f0f0;
+    background-color: var(--surface-hover);
     cursor: not-allowed;
     opacity: 0.6;
 }
 
 .nui-dropdown-input {
     width: 100%;
-    padding: 7px 10px;
-    border: 1px solid #ddd;
+    padding: var(--space-2) var(--space-2-5);
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 14px;
-    background-color: white;
-    color: #333;
+    font-size: var(--fs-md);
+    background-color: var(--surface);
+    color: var(--text);
     transition: border-color 0.2s;
     box-sizing: border-box;
 }
 
 .nui-dropdown-input:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--accent);
 }
 
 .nui-dropdown-input:disabled {
-    background-color: #f0f0f0;
+    background-color: var(--surface-hover);
     cursor: not-allowed;
     opacity: 0.6;
 }
@@ -94,11 +94,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: white;
-    border: 1px solid #ddd;
+    background: var(--surface);
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 18px;
-    color: #666;
+    font-size: var(--fs-xl);
+    color: var(--text-muted);
     cursor: pointer;
     transition: all 0.2s;
     flex-shrink: 0;
@@ -107,9 +107,9 @@
 }
 
 .nui-dropdown-manage-btn:hover:not(:disabled) {
-    border-color: #667eea;
-    color: #667eea;
-    background-color: #f0f0ff;
+    border-color: var(--accent);
+    color: var(--accent);
+    background-color: var(--accent-soft);
 }
 
 .nui-dropdown-manage-btn:disabled {
diff --git a/frontend/src/components/NomenclatureUI/NomenclatureEntryForm.css b/frontend/src/components/NomenclatureUI/NomenclatureEntryForm.css
index 22f2577..77f59da 100644
--- a/frontend/src/components/NomenclatureUI/NomenclatureEntryForm.css
+++ b/frontend/src/components/NomenclatureUI/NomenclatureEntryForm.css
@@ -1,31 +1,31 @@
 .nui-entry-form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
 }
 
 .nui-entry-form-field {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--space-2);
 }
 
 .nui-entry-form-field > label {
-    font-weight: 500;
-    color: #333;
-    font-size: 0.9rem;
+    font-weight: var(--fw-medium);
+    color: var(--text);
+    font-size: var(--fs-md);
 }
 
 .nui-entry-form-field input[type="text"],
 .nui-entry-form-field input[type="number"],
 .nui-entry-form-field select {
     width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #ddd;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border);
     border-radius: 4px;
-    font-size: 0.95rem;
-    background-color: white;
-    color: #333;
+    font-size: var(--fs-lg);
+    background-color: var(--surface);
+    color: var(--text);
     transition: border-color 0.2s, box-shadow 0.2s;
     box-sizing: border-box;
 }
@@ -34,14 +34,14 @@
 .nui-entry-form-field input[type="number"]:focus,
 .nui-entry-form-field select:focus {
     outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
 .nui-entry-form-field input[type="text"]:disabled,
 .nui-entry-form-field input[type="number"]:disabled,
 .nui-entry-form-field select:disabled {
-    background-color: #f0f0f0;
+    background-color: var(--surface-hover);
     cursor: not-allowed;
     opacity: 0.6;
 }
@@ -58,23 +58,23 @@
 
 /* Error state */
 .nui-entry-form-input-error {
-    border-color: #dc3545 !important;
+    border-color: var(--danger) !important;
 }
 
 .nui-entry-form-error {
-    font-size: 0.8rem;
-    color: #dc3545;
+    font-size: var(--fs-base);
+    color: var(--danger);
 }
 
 /* Checkbox field */
 .nui-entry-form-checkbox-label {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     cursor: pointer;
-    font-weight: normal !important;
-    font-size: 0.95rem;
-    color: #333;
+    font-weight: var(--fw-regular) !important;
+    font-size: var(--fs-lg);
+    color: var(--text);
 }
 
 .nui-entry-form-checkbox {
@@ -86,27 +86,27 @@
 /* Actions */
 .nui-entry-form-actions {
     display: flex;
-    gap: 0.75rem;
+    gap: var(--space-3);
     justify-content: flex-end;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #eee;
+    margin-top: var(--space-4);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border);
 }
 
 .nui-entry-form-cancel {
-    background-color: #6c757d;
-    color: white;
-    padding: 0.5rem 1.5rem;
+    background-color: var(--text-muted);
+    color: var(--text-inverse);
+    padding: var(--space-2) var(--space-6);
     border: none;
     border-radius: 4px;
-    font-size: 0.95rem;
-    font-weight: 500;
+    font-size: var(--fs-lg);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: background-color 0.2s, transform 0.1s;
 }
 
 .nui-entry-form-cancel:hover {
-    background-color: #5a6268;
+    background-color: var(--text);
 }
 
 .nui-entry-form-cancel:active {
@@ -114,19 +114,19 @@
 }
 
 .nui-entry-form-save {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 0.5rem 1.5rem;
+    background: var(--accent-gradient);
+    color: var(--accent-contrast);
+    padding: var(--space-2) var(--space-6);
     border: none;
     border-radius: 4px;
-    font-size: 0.95rem;
-    font-weight: 500;
+    font-size: var(--fs-lg);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: box-shadow 0.2s, transform 0.1s;
 }
 
 .nui-entry-form-save:hover:not(:disabled) {
-    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .nui-entry-form-save:active:not(:disabled) {
diff --git a/frontend/src/components/NomenclatureUI/NomenclatureManagementOverlay.css b/frontend/src/components/NomenclatureUI/NomenclatureManagementOverlay.css
index 1fa4d56..ed26b82 100644
--- a/frontend/src/components/NomenclatureUI/NomenclatureManagementOverlay.css
+++ b/frontend/src/components/NomenclatureUI/NomenclatureManagementOverlay.css
@@ -5,7 +5,7 @@
     right: 0;
     bottom: 0;
     z-index: 12000;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,9 +21,9 @@
     width: 90%;
     max-width: 1200px;
     max-height: 90vh;
-    background: white;
+    background: var(--surface);
     border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-overlay);
     display: flex;
     flex-direction: column;
     animation: nuiMgmtSlideUp 0.15s ease-out;
@@ -39,18 +39,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid #dee2e6;
-    background-color: #f8f9fa;
+    padding: var(--space-4) var(--space-6);
+    border-bottom: 1px solid var(--border);
+    background-color: var(--surface-sunken);
     border-radius: 8px 8px 0 0;
     flex-shrink: 0;
 }
 
 .nui-mgmt-header h2 {
     margin: 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #333;
+    font-size: var(--fs-xl);
+    font-weight: var(--fw-semibold);
+    color: var(--text);
 }
 
 .nui-mgmt-close {
@@ -61,8 +61,8 @@
     justify-content: center;
     background: none;
     border: none;
-    font-size: 1.5rem;
-    color: #666;
+    font-size: var(--fs-2xl);
+    color: var(--text-muted);
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.2s, color 0.2s;
@@ -70,60 +70,60 @@
 }
 
 .nui-mgmt-close:hover {
-    background-color: #e9ecef;
-    color: #333;
+    background-color: var(--surface-hover);
+    color: var(--text);
 }
 
 /* Toolbar */
 .nui-mgmt-toolbar {
     display: flex;
-    gap: 1rem;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid #dee2e6;
+    gap: var(--space-4);
+    padding: var(--space-4) var(--space-6);
+    border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }
 
 .nui-mgmt-search {
     flex: 1;
-    padding: 0.5rem 1rem;
-    border: 1px solid #ced4da;
+    padding: var(--space-2) var(--space-4);
+    border: 1px solid var(--border-strong);
     border-radius: 4px;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
     transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .nui-mgmt-search:focus {
     outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 0.2rem var(--accent-soft);
 }
 
 .nui-mgmt-add-btn {
-    background-color: #28a745;
-    color: white;
-    padding: 0.5rem 1rem;
+    background-color: var(--success);
+    color: var(--text-inverse);
+    padding: var(--space-2) var(--space-4);
     border: none;
     border-radius: 4px;
-    font-size: 0.95rem;
-    font-weight: 500;
+    font-size: var(--fs-lg);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: background-color 0.2s;
     white-space: nowrap;
 }
 
 .nui-mgmt-add-btn:hover {
-    background-color: #218838;
+    background-color: color-mix(in srgb, var(--success) 85%, var(--text));
 }
 
 /* Error */
 .nui-mgmt-error {
-    margin: 0.5rem 1.5rem;
-    padding: 0.5rem 1rem;
-    background-color: #fee;
-    color: #c33;
-    border: 1px solid #fcc;
+    margin: var(--space-2) var(--space-6);
+    padding: var(--space-2) var(--space-4);
+    background-color: var(--danger-soft);
+    color: var(--danger);
+    border: 1px solid var(--danger);
     border-radius: 4px;
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
     flex-shrink: 0;
 }
 
@@ -141,17 +141,17 @@
 }
 
 .nui-mgmt-table-container::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--surface-sunken);
     border-radius: 4px;
 }
 
 .nui-mgmt-table-container::-webkit-scrollbar-thumb {
-    background: #888;
+    background: var(--text-muted);
     border-radius: 4px;
 }
 
 .nui-mgmt-table-container::-webkit-scrollbar-thumb:hover {
-    background: #555;
+    background: var(--text);
 }
 
 /* Table */
@@ -161,19 +161,19 @@
 }
 
 .nui-mgmt-table thead {
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
     position: sticky;
     top: 0;
     z-index: 1;
 }
 
 .nui-mgmt-table th {
-    padding: 0.6rem 1rem;
+    padding: var(--space-2-5) var(--space-4);
     text-align: left;
-    font-weight: 600;
-    color: #495057;
-    font-size: 0.85rem;
-    border-bottom: 2px solid #dee2e6;
+    font-weight: var(--fw-semibold);
+    color: var(--text);
+    font-size: var(--fs-md);
+    border-bottom: 2px solid var(--border);
     white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: 0.3px;
@@ -195,16 +195,16 @@
 }
 
 .nui-mgmt-table td {
-    padding: 0.5rem 1rem;
-    border-bottom: 1px solid #dee2e6;
-    font-size: 0.95rem;
-    color: #333;
+    padding: var(--space-2) var(--space-4);
+    border-bottom: 1px solid var(--border);
+    font-size: var(--fs-lg);
+    color: var(--text);
 }
 
 .nui-mgmt-td-id {
     text-align: center;
-    color: #888;
-    font-size: 0.85rem;
+    color: var(--text-muted);
+    font-size: var(--fs-md);
 }
 
 .nui-mgmt-td-status {
@@ -222,15 +222,15 @@
 }
 
 .nui-mgmt-row:hover {
-    background-color: #f0f0ff;
+    background-color: var(--surface-hover);
 }
 
 .nui-mgmt-row--selected {
-    background-color: #e8eaff;
+    background-color: var(--accent-soft);
 }
 
 .nui-mgmt-row--selected:hover {
-    background-color: #dcdeff;
+    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 .nui-mgmt-row--inactive {
@@ -239,7 +239,7 @@
 
 .nui-mgmt-row--inactive td {
     text-decoration: line-through;
-    color: #999;
+    color: var(--text-muted);
 }
 
 .nui-mgmt-row--inactive .nui-mgmt-td-id,
@@ -251,56 +251,56 @@
 /* Active badge */
 .nui-mgmt-active-badge {
     display: inline-block;
-    padding: 2px 8px;
+    padding: var(--space-0-5) var(--space-2);
     border-radius: 10px;
-    font-size: 0.75rem;
-    font-weight: 500;
+    font-size: var(--fs-sm);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: all 0.2s;
     user-select: none;
 }
 
 .nui-mgmt-active-badge--active {
-    background-color: #d4edda;
-    color: #155724;
+    background-color: var(--success-soft);
+    color: var(--success);
 }
 
 .nui-mgmt-active-badge--active:hover {
-    background-color: #c3e6cb;
+    background-color: color-mix(in srgb, var(--success) 25%, transparent);
 }
 
 .nui-mgmt-active-badge--inactive {
-    background-color: #f8d7da;
-    color: #721c24;
+    background-color: var(--danger-soft);
+    color: var(--danger);
 }
 
 .nui-mgmt-active-badge--inactive:hover {
-    background-color: #f5c6cb;
+    background-color: color-mix(in srgb, var(--danger) 25%, transparent);
 }
 
 /* Edit button in row */
 .nui-mgmt-edit-btn {
     background: none;
-    border: 1px solid #dee2e6;
-    padding: 0.2rem 0.5rem;
+    border: 1px solid var(--border);
+    padding: var(--space-1) var(--space-2);
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 0.85rem;
-    color: #666;
+    font-size: var(--fs-md);
+    color: var(--text-muted);
 }
 
 .nui-mgmt-edit-btn:hover {
-    background-color: #e9ecef;
-    border-color: #adb5bd;
-    color: #333;
+    background-color: var(--surface-hover);
+    border-color: var(--border-strong);
+    color: var(--text);
 }
 
 /* Empty state */
 .nui-mgmt-empty {
     text-align: center;
-    padding: 2rem !important;
-    color: #999;
+    padding: var(--space-8) !important;
+    color: var(--text-muted);
     font-style: italic;
 }
 
@@ -309,75 +309,75 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1.5rem;
-    border-top: 1px solid #dee2e6;
-    background-color: #f8f9fa;
+    padding: var(--space-4) var(--space-6);
+    border-top: 1px solid var(--border);
+    background-color: var(--surface-sunken);
     border-radius: 0 0 8px 8px;
     flex-shrink: 0;
 }
 
 .nui-mgmt-footer-info {
-    font-size: 0.85rem;
-    color: #666;
+    font-size: var(--fs-md);
+    color: var(--text-muted);
 }
 
 .nui-mgmt-footer-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
 }
 
 .nui-mgmt-footer-edit-btn {
     background: none;
-    border: 1px solid #667eea;
-    color: #667eea;
-    padding: 0.4rem 1rem;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    padding: var(--space-1-5) var(--space-4);
     border-radius: 4px;
-    font-size: 0.9rem;
-    font-weight: 500;
+    font-size: var(--fs-md);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: all 0.2s;
 }
 
 .nui-mgmt-footer-edit-btn:hover {
-    background-color: #667eea;
-    color: white;
+    background-color: var(--accent);
+    color: var(--accent-contrast);
 }
 
 .nui-mgmt-delete-btn {
     background: none;
-    border: 1px solid #dc3545;
-    color: #dc3545;
-    padding: 0.4rem 1rem;
+    border: 1px solid var(--danger);
+    color: var(--danger);
+    padding: var(--space-1-5) var(--space-4);
     border-radius: 4px;
-    font-size: 0.9rem;
-    font-weight: 500;
+    font-size: var(--fs-md);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: all 0.2s;
 }
 
 .nui-mgmt-delete-btn:hover {
-    background-color: #dc3545;
-    color: white;
+    background-color: var(--danger);
+    color: var(--text-inverse);
 }
 
 .nui-mgmt-select-btn {
-    background-color: #667eea;
-    color: white;
-    padding: 0.4rem 1.5rem;
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+    padding: var(--space-1-5) var(--space-6);
     border: none;
     border-radius: 4px;
-    font-size: 0.9rem;
-    font-weight: 500;
+    font-size: var(--fs-md);
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: background-color 0.2s;
 }
 
 .nui-mgmt-select-btn:hover:not(:disabled) {
-    background-color: #5568d3;
+    background-color: var(--accent-hover);
 }
 
 .nui-mgmt-select-btn:disabled {
-    background-color: #6c757d;
+    background-color: var(--text-muted);
     opacity: 0.6;
     cursor: not-allowed;
 }
diff --git a/frontend/src/components/ReportPreviewModal.css b/frontend/src/components/ReportPreviewModal.css
index 894bc4c..df1eac8 100644
--- a/frontend/src/components/ReportPreviewModal.css
+++ b/frontend/src/components/ReportPreviewModal.css
@@ -1,7 +1,7 @@
 .report-preview-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/frontend/src/components/Users/ChangePasswordOverlay.css b/frontend/src/components/Users/ChangePasswordOverlay.css
index 34a7ae9..f2c198b 100644
--- a/frontend/src/components/Users/ChangePasswordOverlay.css
+++ b/frontend/src/components/Users/ChangePasswordOverlay.css
@@ -4,12 +4,12 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 20px;
+  padding: var(--space-5);
   animation: fadeIn 0.2s ease-in;
 }
 
@@ -23,9 +23,9 @@
 }
 
 .overlay-content {
-  background: white;
+  background: var(--surface);
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
@@ -45,8 +45,8 @@
 }
 
 .overlay-header {
-  padding: 24px 24px 16px;
-  border-bottom: 2px solid #667eea;
+  padding: var(--space-6) var(--space-6) var(--space-4);
+  border-bottom: 2px solid var(--accent);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -54,15 +54,15 @@
 
 .overlay-header h2 {
   margin: 0;
-  color: #667eea;
-  font-size: 24px;
+  color: var(--accent);
+  font-size: var(--fs-2xl);
 }
 
 .close-button {
   background: none;
   border: none;
-  font-size: 32px;
-  color: #999;
+  font-size: var(--fs-display);
+  color: var(--text-muted);
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -75,84 +75,84 @@
 }
 
 .close-button:hover {
-  background: #f5f5f5;
-  color: #333;
+  background: var(--surface-sunken);
+  color: var(--text);
 }
 
 .password-form {
-  padding: 24px;
+  padding: var(--space-6);
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--space-5);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .form-group label {
-  font-weight: 600;
-  color: #333;
-  font-size: 14px;
+  font-weight: var(--fw-semibold);
+  color: var(--text);
+  font-size: var(--fs-md);
 }
 
 .form-group input {
-  padding: 12px 16px;
-  border: 2px solid #e0e0e0;
+  padding: var(--space-3) var(--space-4);
+  border: 2px solid var(--border);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: var(--fs-lg);
   transition: border-color 0.3s;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .form-group input:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 .form-actions {
   display: flex;
-  gap: 12px;
-  margin-top: 8px;
+  gap: var(--space-3);
+  margin-top: var(--space-2);
 }
 
 .cancel-button,
 .submit-button {
   flex: 1;
-  padding: 12px 24px;
+  padding: var(--space-3) var(--space-6);
   border-radius: 8px;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .cancel-button {
-  background: white;
-  border: 2px solid #ddd;
-  color: #666;
+  background: var(--surface);
+  border: 2px solid var(--border);
+  color: var(--text-muted);
 }
 
 .cancel-button:hover:not(:disabled) {
-  border-color: #999;
-  color: #333;
+  border-color: var(--border-strong);
+  color: var(--text);
 }
 
 .submit-button {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
   border: none;
-  color: white;
+  color: var(--accent-contrast);
 }
 
 .submit-button:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px var(--accent-soft);
 }
 
 .cancel-button:disabled,
@@ -162,16 +162,16 @@
 }
 
 .error-message {
-  background-color: #fee;
-  color: #c33;
-  padding: 12px 16px;
+  background-color: var(--danger-soft);
+  color: var(--danger);
+  padding: var(--space-3) var(--space-4);
   border-radius: 8px;
-  border: 1px solid #fcc;
-  font-size: 14px;
+  border: 1px solid var(--danger);
+  font-size: var(--fs-md);
 }
 
 .success-message {
-  padding: 40px 24px;
+  padding: var(--space-10) var(--space-6);
   text-align: center;
 }
 
@@ -179,13 +179,13 @@
   width: 64px;
   height: 64px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  background: var(--accent-gradient);
+  color: var(--accent-contrast);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 36px;
-  margin: 0 auto 16px;
+  font-size: var(--fs-display);
+  margin: 0 auto var(--space-4);
   animation: scaleIn 0.4s ease-out;
 }
 
@@ -200,9 +200,9 @@
 
 .success-message p {
   margin: 0;
-  color: #333;
-  font-size: 18px;
-  font-weight: 500;
+  color: var(--text);
+  font-size: var(--fs-xl);
+  font-weight: var(--fw-medium);
 }
 
 @media (max-width: 540px) {
@@ -211,7 +211,7 @@
   }
 
   .password-form {
-    padding: 20px;
+    padding: var(--space-5);
   }
 
   .form-actions {
diff --git a/frontend/src/components/Users/Login.css b/frontend/src/components/Users/Login.css
index 3505cb6..8951213 100644
--- a/frontend/src/components/Users/Login.css
+++ b/frontend/src/components/Users/Login.css
@@ -3,88 +3,88 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
+  background: var(--accent-gradient);
+  padding: var(--space-5);
 }
 
 .login-card {
-  background: white;
+  background: var(--surface);
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-overlay);
   width: 100%;
   max-width: 400px;
-  padding: 40px;
+  padding: var(--space-10);
 }
 
 .login-header {
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: var(--space-8);
 }
 
 .login-header h1 {
-  margin: 0 0 10px 0;
-  color: #667eea;
-  font-size: 32px;
+  margin: 0 0 var(--space-2-5) 0;
+  color: var(--accent);
+  font-size: var(--fs-display);
 }
 
 .login-header p {
   margin: 0;
-  color: #666;
-  font-size: 16px;
+  color: var(--text-muted);
+  font-size: var(--fs-lg);
 }
 
 .login-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--space-5);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .form-group label {
-  font-weight: 600;
-  color: #333;
-  font-size: 14px;
+  font-weight: var(--fw-semibold);
+  color: var(--text);
+  font-size: var(--fs-md);
 }
 
 .form-group input {
-  padding: 12px 16px;
-  border: 2px solid #e0e0e0;
+  padding: var(--space-3) var(--space-4);
+  border: 2px solid var(--border);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: var(--fs-lg);
   transition: border-color 0.3s;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .form-group input:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 .login-button {
-  padding: 14px 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  padding: var(--space-4) var(--space-6);
+  background: var(--accent-gradient);
+  color: var(--accent-contrast);
   border: none;
   border-radius: 8px;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
-  margin-top: 10px;
+  margin-top: var(--space-2-5);
 }
 
 .login-button:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px var(--accent-soft);
 }
 
 .login-button:active:not(:disabled) {
@@ -97,12 +97,12 @@
 }
 
 .error-message {
-  background-color: #fee;
-  color: #c33;
-  padding: 12px 16px;
+  background-color: var(--danger-soft);
+  color: var(--danger);
+  padding: var(--space-3) var(--space-4);
   border-radius: 8px;
-  border: 1px solid #fcc;
-  font-size: 14px;
+  border: 1px solid var(--danger);
+  font-size: var(--fs-md);
 }
 
 .loading {
@@ -111,18 +111,18 @@
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  background: var(--accent-gradient);
+  color: var(--accent-contrast);
 }
 
 .loading-spinner {
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  border-top: 4px solid white;
+  border: 4px solid color-mix(in srgb, var(--accent-contrast) 30%, transparent);
+  border-top: 4px solid var(--accent-contrast);
   border-radius: 50%;
   width: 40px;
   height: 40px;
   animation: spin 1s linear infinite;
-  margin-bottom: 10px;
+  margin-bottom: var(--space-2-5);
 }
 
 @keyframes spin {
@@ -132,10 +132,10 @@
 
 @media (max-width: 480px) {
   .login-card {
-    padding: 30px 20px;
+    padding: var(--space-8) var(--space-5);
   }
 
   .login-header h1 {
-    font-size: 28px;
+    font-size: var(--fs-3xl);
   }
 }
diff --git a/frontend/src/components/Users/UserManager.css b/frontend/src/components/Users/UserManager.css
new file mode 100644
index 0000000..3d0fbb0
--- /dev/null
+++ b/frontend/src/components/Users/UserManager.css
@@ -0,0 +1,116 @@
+/* The form and buttons reuse Main.css classes (.extra-field,
+   .vehicle-form-actions, .extra-save-btn ...); the compound selectors below
+   exist only to outrank those where this screen differs. */
+
+.um-page {
+  padding: var(--space-6);
+  max-width: 900px;
+}
+
+.um-toolbar {
+  margin-bottom: var(--space-4);
+}
+
+.um-add-form {
+  margin-bottom: var(--space-6);
+  padding: var(--space-4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-sunken);
+}
+
+.um-add-form-title {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--fs-md);
+  color: var(--accent);
+  font-weight: var(--fw-semibold);
+}
+
+.extra-field.um-permission-field {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Three classes deep to outrank the cockpit `.extra-field label` rule */
+.um-add-form .extra-field.um-permission-field label {
+  text-transform: none;
+  letter-spacing: normal;
+  cursor: pointer;
+}
+
+.vehicle-form-actions.um-form-actions {
+  margin-top: var(--space-4);
+  padding-top: var(--space-3);
+}
+
+.um-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-md);
+}
+
+.um-table thead tr {
+  border-bottom: 2px solid var(--border);
+  text-align: left;
+}
+
+.um-table th,
+.um-table td {
+  padding: var(--space-2-5) var(--space-3);
+}
+
+.um-table th {
+  color: var(--text-muted);
+  font-weight: var(--fw-semibold);
+}
+
+.um-row {
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.um-row--inactive {
+  background: var(--surface-sunken);
+}
+
+.um-table .um-username {
+  font-weight: var(--fw-semibold);
+  color: var(--text);
+}
+
+.um-table .um-cell-center {
+  text-align: center;
+}
+
+.um-status {
+  display: inline-block;
+  padding: var(--space-0-5) var(--space-2);
+  border-radius: 10px;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.um-status--inactive {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.um-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.um-table .um-action-btn {
+  font-size: var(--fs-sm);
+  padding: var(--space-1-5) var(--space-3);
+}
+
+.um-table .um-empty {
+  padding: var(--space-5);
+  text-align: center;
+  color: var(--text-muted);
+}
diff --git a/frontend/src/components/Users/UserManager.jsx b/frontend/src/components/Users/UserManager.jsx
index 9a2c66f..d30abb3 100644
--- a/frontend/src/components/Users/UserManager.jsx
+++ b/frontend/src/components/Users/UserManager.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import api from '../../services/api';
 import Header from '../Header';
+import './UserManager.css';
 
 const PERMISSION_FIELDS = [
     { key: 'can_measure', label: 'Can Measure' },
@@ -87,12 +88,12 @@ export default function UserManager() {
     return (
         <div>
             <Header />
-            <div style={{ padding: '24px', maxWidth: '900px' }}>
+            <div className="um-page">
                 <h2 className="vehicle-detail-title">User Manager</h2>
 
                 {error && <div className="vehicle-error">{error}</div>}
 
-                <div style={{ marginBottom: '16px' }}>
+                <div className="um-toolbar">
                     <button
                         className="vehicle-add-btn"
                         onClick={() => setAddFormOpen(prev => !prev)}
@@ -102,8 +103,8 @@ export default function UserManager() {
                 </div>
 
                 {addFormOpen && (
-                    <form onSubmit={handleAddUser} style={{ marginBottom: '24px', padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', background: '#fafafa' }}>
-                        <h3 style={{ margin: '0 0 14px 0', fontSize: '14px', color: '#667eea', fontWeight: 600 }}>New User</h3>
+                    <form onSubmit={handleAddUser} className="um-add-form">
+                        <h3 className="um-add-form-title">New User</h3>
                         <div className="extra-fields">
                             <div className="extra-field">
                                 <label>Username</label>
@@ -125,18 +126,18 @@ export default function UserManager() {
                                 />
                             </div>
                             {PERMISSION_FIELDS.map(({ key, label }) => (
-                                <div key={key} className="extra-field" style={{ flexDirection: 'row', alignItems: 'center', gap: '8px' }}>
+                                <div key={key} className="extra-field um-permission-field">
                                     <input
                                         type="checkbox"
                                         id={`new-${key}`}
                                         checked={newUser[key]}
                                         onChange={e => setNewUser(prev => ({ ...prev, [key]: e.target.checked }))}
                                     />
-                                    <label htmlFor={`new-${key}`} style={{ textTransform: 'none', letterSpacing: 'normal', cursor: 'pointer' }}>{label}</label>
+                                    <label htmlFor={`new-${key}`}>{label}</label>
                                 </div>
                             ))}
                         </div>
-                        <div className="vehicle-form-actions" style={{ marginTop: '14px', paddingTop: '12px' }}>
+                        <div className="vehicle-form-actions um-form-actions">
                             <button
                                 type="button"
                                 className="vehicle-form-cancel"
@@ -155,60 +156,50 @@ export default function UserManager() {
                     </form>
                 )}
 
-                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>
+                <table className="um-table">
                     <thead>
-                        <tr style={{ borderBottom: '2px solid #e0e0e0', textAlign: 'left' }}>
-                            <th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Username</th>
-                            <th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Status</th>
+                        <tr>
+                            <th>Username</th>
+                            <th>Status</th>
                             {PERMISSION_FIELDS.map(({ key, label }) => (
-                                <th key={key} style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>{label}</th>
+                                <th key={key}>{label}</th>
                             ))}
-                            <th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Actions</th>
+                            <th>Actions</th>
                         </tr>
                     </thead>
                     <tbody>
                         {users.map(u => (
-                            <tr key={u.id} style={{ borderBottom: '1px solid #f0f0f0', background: u.is_active ? 'white' : '#fafafa' }}>
-                                <td style={{ padding: '10px 12px', fontWeight: 600, color: '#333' }}>{u.username}</td>
-                                <td style={{ padding: '10px 12px' }}>
-                                    <span style={{
-                                        display: 'inline-block',
-                                        padding: '2px 8px',
-                                        borderRadius: '10px',
-                                        fontSize: '12px',
-                                        fontWeight: 600,
-                                        background: u.is_active ? '#e8f5e9' : '#fce4ec',
-                                        color: u.is_active ? '#2e7d32' : '#c62828',
-                                    }}>
+                            <tr key={u.id} className={u.is_active ? 'um-row' : 'um-row um-row--inactive'}>
+                                <td className="um-username">{u.username}</td>
+                                <td>
+                                    <span className={u.is_active ? 'um-status' : 'um-status um-status--inactive'}>
                                         {u.is_active ? 'Active' : 'Inactive'}
                                     </span>
                                 </td>
                                 {PERMISSION_FIELDS.map(({ key }) => (
-                                    <td key={key} style={{ padding: '10px 12px', textAlign: 'center' }}>
+                                    <td key={key} className="um-cell-center">
                                         <input
                                             type="checkbox"
                                             checked={!!u[key]}
                                             onChange={e => handlePermissionChange(u.id, key, e.target.checked)}
-                                            style={{ width: '18px', height: '18px', cursor: 'pointer' }}
+                                            className="um-checkbox"
                                         />
                                     </td>
                                 ))}
-                                <td style={{ padding: '10px 12px' }}>
+                                <td>
                                     {u.is_active ? (
                                         <button
-                                            className="vehicle-form-cancel"
+                                            className="vehicle-form-cancel um-action-btn"
                                             onClick={() => handleDeactivate(u.id)}
                                             disabled={u.id === currentUser?.id}
                                             title={u.id === currentUser?.id ? 'Cannot deactivate yourself' : undefined}
-                                            style={{ fontSize: '12px', padding: '5px 12px' }}
                                         >
                                             Deactivate
                                         </button>
                                     ) : (
                                         <button
-                                            className="extra-save-btn"
+                                            className="extra-save-btn um-action-btn"
                                             onClick={() => handleReactivate(u.id)}
-                                            style={{ fontSize: '12px', padding: '5px 12px' }}
                                         >
                                             Reactivate
                                         </button>
@@ -218,7 +209,7 @@ export default function UserManager() {
                         ))}
                         {users.length === 0 && (
                             <tr>
-                                <td colSpan={PERMISSION_FIELDS.length + 3} style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
+                                <td colSpan={PERMISSION_FIELDS.length + 3} className="um-empty">
                                     No users found
                                 </td>
                             </tr>
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index 9f0ddc7..b65d157 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -65,6 +65,8 @@
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.12);
   --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.18);
+  /* The dim behind a modal */
+  --backdrop: rgba(0, 0, 0, 0.5);
 
   /* The header is its own surface: a saturated bar with white chrome on it,
      so it cannot borrow --surface/--text without losing that contrast. */
@@ -128,6 +130,9 @@
   --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                    0 6px 18px rgba(0, 0, 0, 0.6);
   --shadow-overlay: 0 12px 48px rgba(0, 0, 0, 0.7);
+  /* Tinted with --bg rather than pure black, so the page behind a modal
+     sinks into the theme instead of turning grey. */
+  --backdrop: rgba(2, 10, 18, 0.75);
 
   --header-bg: linear-gradient(180deg, #0a2336 0%, #04121e 100%);
   --header-text: #d9f6ff;