diff --git a/master-frontend/src/App.vue b/master-frontend/src/App.vue
index 17ff68e..8ff879a 100644
--- a/master-frontend/src/App.vue
+++ b/master-frontend/src/App.vue
@@ -164,8 +164,8 @@ html, body, #app {
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-  background: #11111b;
-  color: #cdd6f4;
+  background: var(--c-crust);
+  color: var(--c-text);
 }
 
 .app-layout {
@@ -186,34 +186,34 @@ body {
 
 .toolbar-area {
   grid-area: toolbar;
-  background: #1e1e2e;
-  border-bottom: 1px solid #313244;
+  background: var(--c-base);
+  border-bottom: 1px solid var(--c-surface0);
 }
 
 .tree-area {
   grid-area: tree;
-  background: #181825;
-  border-right: 1px solid #313244;
+  background: var(--c-mantle);
+  border-right: 1px solid var(--c-surface0);
   overflow-y: auto;
 }
 
 .content-area {
   grid-area: content;
-  background: #11111b;
+  background: var(--c-crust);
   overflow: hidden;
 }
 
 .panel-area {
   grid-area: panel;
-  background: #181825;
-  border-left: 1px solid #313244;
+  background: var(--c-mantle);
+  border-left: 1px solid var(--c-surface0);
   overflow-y: auto;
 }
 
 .log-area {
   grid-area: log;
-  background: #1e1e2e;
-  border-top: 1px solid #313244;
+  background: var(--c-base);
+  border-top: 1px solid var(--c-surface0);
   overflow: hidden;
 }
 </style>
diff --git a/master-frontend/src/components/CommunicationSettings.vue b/master-frontend/src/components/CommunicationSettings.vue
index 7f4d73c..ae1a46c 100644
--- a/master-frontend/src/components/CommunicationSettings.vue
+++ b/master-frontend/src/components/CommunicationSettings.vue
@@ -54,12 +54,12 @@ const { t } = useI18n()
 </template>
 
 <style scoped>
-.communication-settings { border-top: 1px solid #45475a; padding-top: 12px; }
-summary { color: #cdd6f4; font-size: 13px; cursor: pointer; }
+.communication-settings { border-top: 1px solid var(--c-surface1); padding-top: 12px; }
+summary { color: var(--c-text); font-size: 13px; cursor: pointer; }
 .settings-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
-label { display: flex; flex-direction: column; gap: 4px; color: #a6adc8; font-size: 12px; }
-input[type="number"] { min-width: 0; padding: 6px 10px; background: #313244; border: 1px solid #45475a; border-radius: 4px; color: #cdd6f4; font-size: 13px; }
-input:focus-visible, summary:focus-visible { outline: 2px solid #89b4fa; outline-offset: 2px; }
+label { display: flex; flex-direction: column; gap: 4px; color: var(--c-subtext0); font-size: 12px; }
+input[type="number"] { min-width: 0; padding: 6px 10px; background: var(--c-control-bg); border: 1px solid var(--c-surface1); border-radius: 4px; color: var(--c-text); font-size: 13px; }
+input:focus-visible, summary:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
 .checkbox-label { flex-direction: row; align-items: center; }
-p { margin: -6px 0 0; color: #a6adc8; font-size: 12px; line-height: 1.5; }
+p { margin: -6px 0 0; color: var(--c-subtext0); font-size: 12px; line-height: 1.5; }
 </style>
diff --git a/master-frontend/src/components/ConnectionTree.vue b/master-frontend/src/components/ConnectionTree.vue
index 559667b..f3a9ee2 100644
--- a/master-frontend/src/components/ConnectionTree.vue
+++ b/master-frontend/src/components/ConnectionTree.vue
@@ -195,13 +195,13 @@ function fcLabel(fn: string): string {
   padding: 8px 12px;
   font-size: 11px;
   text-transform: uppercase;
-  color: #6c7086;
+  color: var(--c-subtext0);
   letter-spacing: 0.5px;
 }
 
 .tree-empty {
   padding: 24px 12px;
-  color: #6c7086;
+  color: var(--c-subtext0);
   text-align: center;
 }
 
@@ -216,18 +216,18 @@ function fcLabel(fn: string): string {
 }
 
 .tree-node:hover {
-  background: #1e1e2e;
+  background: var(--c-hover-bg);
 }
 
 .tree-node.selected {
-  background: #89b4fa;
-  color: #1e1e2e;
+  background: var(--c-selection-bg);
+  color: var(--c-selection-text);
 }
 
 .tree-node.selected .node-meta,
 .tree-node.selected .node-slave {
-  color: #1e1e2e;
-  opacity: 0.7;
+  color: var(--c-selection-text);
+  opacity: 1;
 }
 
 .tree-child {
@@ -238,7 +238,7 @@ function fcLabel(fn: string): string {
   font-size: 8px;
   width: 12px;
   text-align: center;
-  color: #6c7086;
+  color: var(--c-subtext0);
 }
 
 .node-status {
@@ -248,11 +248,11 @@ function fcLabel(fn: string): string {
   flex-shrink: 0;
 }
 
-.node-status.connected { background: #a6e3a1; }
-.node-status.disconnected { background: #f38ba8; }
-.node-status.error { background: #fab387; }
+.node-status.connected { background: var(--c-green); }
+.node-status.disconnected { background: var(--c-red); }
+.node-status.error { background: var(--c-peach); }
 .node-status.reconnecting {
-  background: #f9e2af;
+  background: var(--c-yellow);
   animation: reconnecting-pulse 1s ease-in-out infinite;
 }
 
@@ -266,12 +266,12 @@ function fcLabel(fn: string): string {
   height: 6px;
   border-radius: 50%;
   flex-shrink: 0;
-  background: #45475a;
+  background: var(--c-surface1);
 }
 
 .poll-indicator.active {
-  background: #a6e3a1;
-  box-shadow: 0 0 4px #a6e3a1;
+  background: var(--c-green);
+  box-shadow: 0 0 4px var(--c-green);
 }
 
 .node-label {
@@ -283,20 +283,20 @@ function fcLabel(fn: string): string {
 
 .node-slave {
   font-size: 10px;
-  color: #6c7086;
+  color: var(--c-subtext0);
 }
 
 .node-meta {
   font-size: 10px;
-  color: #6c7086;
+  color: var(--c-subtext0);
   font-family: monospace;
 }
 
 /* Context Menu */
 .context-menu {
   position: fixed;
-  background: #1e1e2e;
-  border: 1px solid #45475a;
+  background: var(--c-base);
+  border: 1px solid var(--c-surface1);
   border-radius: 6px;
   padding: 4px 0;
   z-index: 999;
@@ -311,10 +311,10 @@ function fcLabel(fn: string): string {
 }
 
 .ctx-item:hover {
-  background: #313244;
+  background: var(--c-control-bg);
 }
 
 .ctx-item.danger {
-  color: #f38ba8;
+  color: var(--c-red);
 }
 </style>
diff --git a/master-frontend/src/components/DataTable.vue b/master-frontend/src/components/DataTable.vue
index f59a669..c5287f1 100644
--- a/master-frontend/src/components/DataTable.vue
+++ b/master-frontend/src/components/DataTable.vue
@@ -418,26 +418,26 @@ const valueColumnLabel = computed(() => {
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: #6c7086;
+  color: var(--c-subtext0);
   font-size: 13px;
   text-align: center;
 }
 
 .empty-hint {
   font-size: 11px;
-  color: #45475a;
+  color: var(--c-subtext0);
   margin-top: 6px;
 }
 
 .error-text {
-  color: #f38ba8;
+  color: var(--c-red);
   font-size: 12px;
 }
 
 .error-badge {
   font-size: 10px;
-  background: #f38ba8;
-  color: #1e1e2e;
+  background: var(--c-red);
+  color: var(--c-on-accent);
   padding: 1px 6px;
   border-radius: 3px;
   font-weight: 600;
@@ -450,9 +450,9 @@ const valueColumnLabel = computed(() => {
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
-  border-bottom: 1px solid #313244;
+  border-bottom: 1px solid var(--c-surface0);
   flex-shrink: 0;
-  background: #1e1e2e;
+  background: var(--c-base);
 }
 
 .header-title {
@@ -462,24 +462,24 @@ const valueColumnLabel = computed(() => {
   text-overflow: ellipsis;
   font-size: 12px;
   font-weight: 600;
-  color: #89b4fa;
+  color: var(--c-blue);
   white-space: nowrap;
 }
 
 .format-select {
   flex: none;
   padding: 2px 6px;
-  background: #313244;
-  border: 1px solid #45475a;
+  background: var(--c-control-bg);
+  border: 1px solid var(--c-surface1);
   border-radius: 4px;
-  color: #cdd6f4;
+  color: var(--c-text);
   font-size: 11px;
   cursor: pointer;
 }
 
 .format-select:focus {
   outline: none;
-  border-color: #89b4fa;
+  border-color: var(--c-blue);
 }
 
 .search-input {
@@ -487,37 +487,37 @@ const valueColumnLabel = computed(() => {
   min-width: min(140px, 100%);
   max-width: 160px;
   padding: 3px 8px;
-  background: #313244;
-  border: 1px solid #45475a;
+  background: var(--c-control-bg);
+  border: 1px solid var(--c-surface1);
   border-radius: 4px;
-  color: #cdd6f4;
+  color: var(--c-text);
   font-size: 12px;
   margin-left: auto;
 }
 
 .search-input:focus {
   outline: none;
-  border-color: #89b4fa;
+  border-color: var(--c-blue);
 }
 
 .mode-btn {
   padding: 2px 8px;
-  background: #313244;
-  border: 1px solid #45475a;
+  background: var(--c-control-bg);
+  border: 1px solid var(--c-surface1);
   border-radius: 4px;
-  color: #cdd6f4;
+  color: var(--c-text);
   cursor: pointer;
   font-size: 11px;
   font-family: monospace;
 }
 
 .mode-btn:hover {
-  background: #45475a;
+  background: var(--c-surface1);
 }
 
 .register-count {
   font-size: 11px;
-  color: #6c7086;
+  color: var(--c-subtext0);
   white-space: nowrap;
 }
 
@@ -543,12 +543,12 @@ const valueColumnLabel = computed(() => {
 }
 
 .table th {
-  background: #1e1e2e;
-  color: #6c7086;
+  background: var(--c-mantle);
+  color: var(--c-subtext0);
   font-weight: 500;
   padding: 6px 10px;
   text-align: left;
-  border-bottom: 1px solid #313244;
+  border-bottom: 1px solid var(--c-surface0);
   z-index: 1;
 }
 
@@ -557,37 +557,37 @@ const valueColumnLabel = computed(() => {
 }
 
 .table tbody tr:hover {
-  background: #1e1e2e;
+  background: var(--c-hover-bg);
 }
 
 .table tbody tr.selected {
-  background: #89b4fa;
-  color: #1e1e2e;
+  background: var(--c-selection-bg);
+  color: var(--c-selection-text);
 }
 
 .table td {
   padding: 4px 10px;
-  border-bottom: 1px solid #1e1e2e;
+  border-bottom: 1px solid var(--c-row-border);
 }
 
 .col-addr {
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: var(--font-mono);
   width: 90px;
-  color: #89b4fa;
+  color: var(--c-blue);
 }
 
 .table tbody tr.selected .col-addr {
-  color: #1e1e2e;
+  color: var(--c-selection-text);
 }
 
 .col-raw {
   font-family: monospace;
   width: 120px;
-  color: #6c7086;
+  color: var(--c-subtext0);
 }
 
 .col-display {
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: var(--font-mono);
 }
 
 .bool-value {
@@ -599,13 +599,13 @@ const valueColumnLabel = computed(() => {
 }
 
 .bool-value.on {
-  background: #a6e3a1;
-  color: #1e1e2e;
+  background: var(--c-success-bg);
+  color: var(--c-success-text);
 }
 
 .bool-value.off {
-  background: #45475a;
-  color: #6c7086;
+  background: var(--c-neutral-bg);
+  color: var(--c-neutral-text);
 }
 
 /* Virtual rows */
@@ -614,20 +614,20 @@ const valueColumnLabel = computed(() => {
   align-items: center;
   cursor: pointer;
   font-size: 12px;
-  border-bottom: 1px solid #1e1e2e;
+  border-bottom: 1px solid var(--c-row-border);
 }
 
 .virtual-row:hover {
-  background: #1e1e2e;
+  background: var(--c-hover-bg);
 }
 
 .virtual-row.selected {
-  background: #89b4fa;
-  color: #1e1e2e;
+  background: var(--c-selection-bg);
+  color: var(--c-selection-text);
 }
 
 .virtual-row.selected .col-addr {
-  color: #1e1e2e;
+  color: var(--c-selection-text);
 }
 
 .vcol {
@@ -648,12 +648,12 @@ const valueColumnLabel = computed(() => {
   width: 120px;
   min-width: 120px;
   font-family: monospace;
-  color: #6c7086;
+  color: var(--c-subtext0);
 }
 
 .vcol.col-display {
   flex: 1;
   min-width: 0;
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: var(--font-mono);
 }
 </style>
diff --git a/master-frontend/src/components/NewConnectionDialog.vue b/master-frontend/src/components/NewConnectionDialog.vue
index 3084b69..3c60ec3 100644
--- a/master-frontend/src/components/NewConnectionDialog.vue
+++ b/master-frontend/src/components/NewConnectionDialog.vue
@@ -393,25 +393,25 @@ async function submit() {
 
 <style scoped>
 .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal-box { box-sizing: border-box; background: #1e1e2e; border: 1px solid #45475a; border-radius: 8px; padding: 20px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
-.modal-title { font-size: 15px; font-weight: 600; color: #cdd6f4; margin-bottom: 16px; }
+.modal-box { box-sizing: border-box; background: var(--c-base); border: 1px solid var(--c-surface1); border-radius: 8px; padding: 20px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
+.modal-title { font-size: 15px; font-weight: 600; color: var(--c-text); margin-bottom: 16px; }
 .modal-body { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
 .form-error { color: var(--c-red); white-space: pre-wrap; overflow-wrap: anywhere; }
 button:disabled { opacity: 0.4; cursor: default; }
 .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
 .form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-subtext0); }
 .checkbox-label { flex-direction: row; align-items: center; }
-.form-hint { margin-top: -6px; color: #a6adc8; font-size: 11px; line-height: 1.4; }
+.form-hint { margin-top: -6px; color: var(--c-subtext0); font-size: 11px; line-height: 1.4; }
 .timeout-hint { max-width: 300px; font-size: 12px; line-height: 1.5; }
-.form-input { padding: 6px 10px; background: #313244; border: 1px solid #45475a; border-radius: 4px; color: #cdd6f4; font-size: 13px; }
-.form-input:focus { outline: none; border-color: #89b4fa; }
+.form-input { padding: 6px 10px; background: var(--c-control-bg); border: 1px solid var(--c-surface1); border-radius: 4px; color: var(--c-text); font-size: 13px; }
+.form-input:focus { outline: none; border-color: var(--c-blue); }
 .file-row { display: flex; gap: 4px; }
 .file-row > input, .file-row > select { flex: 1; min-width: 0; }
-.tool-btn { padding: 4px 8px; background: #313244; border: 1px solid #45475a; border-radius: 4px; color: #cdd6f4; cursor: pointer; font-size: 14px; }
-.tool-btn:hover { background: #45475a; }
+.tool-btn { padding: 4px 8px; background: var(--c-control-bg); border: 1px solid var(--c-surface1); border-radius: 4px; color: var(--c-text); cursor: pointer; font-size: 14px; }
+.tool-btn:hover { background: var(--c-surface1); }
 .btn { padding: 7px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
-.btn-primary { background: #89b4fa; color: #1e1e2e; }
-.btn-primary:hover { background: #74c7ec; }
-.btn-secondary { background: #45475a; color: #cdd6f4; }
-.btn-secondary:hover { background: #585b70; }
+.btn-primary { background: var(--c-blue); color: var(--c-on-accent); }
+.btn-primary:hover { background: var(--c-accent-hover); }
+.btn-secondary { background: var(--c-neutral-bg); color: var(--c-text); }
+.btn-secondary:hover { background: var(--c-hover-bg); }
 </style>
diff --git a/master-frontend/src/components/NewScanGroupDialog.vue b/master-frontend/src/components/NewScanGroupDialog.vue
index 2080d17..2a13d30 100644
--- a/master-frontend/src/components/NewScanGroupDialog.vue
+++ b/master-frontend/src/components/NewScanGroupDialog.vue
@@ -93,17 +93,17 @@ async function submit() {
 
 <style scoped>
 .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal-box { box-sizing: border-box; background: #1e1e2e; border: 1px solid #45475a; border-radius: 8px; padding: 20px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
-.modal-title { font-size: 15px; font-weight: 600; color: #cdd6f4; margin-bottom: 16px; }
+.modal-box { box-sizing: border-box; background: var(--c-base); border: 1px solid var(--c-surface1); border-radius: 8px; padding: 20px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
+.modal-title { font-size: 15px; font-weight: 600; color: var(--c-text); margin-bottom: 16px; }
 .modal-body { display: flex; flex-direction: column; gap: 12px; }
 .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
-.form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6c7086; }
-.form-hint { margin: -6px 0 0; color: #a6adc8; font-size: 12px; line-height: 1.5; }
-.form-input { padding: 6px 10px; background: #313244; border: 1px solid #45475a; border-radius: 4px; color: #cdd6f4; font-size: 13px; }
-.form-input:focus { outline: none; border-color: #89b4fa; }
+.form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-subtext0); }
+.form-hint { margin: -6px 0 0; color: var(--c-subtext0); font-size: 12px; line-height: 1.5; }
+.form-input { padding: 6px 10px; background: var(--c-control-bg); border: 1px solid var(--c-surface1); border-radius: 4px; color: var(--c-text); font-size: 13px; }
+.form-input:focus { outline: none; border-color: var(--c-blue); }
 .btn { padding: 7px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
-.btn-primary { background: #89b4fa; color: #1e1e2e; }
-.btn-primary:hover { background: #74c7ec; }
-.btn-secondary { background: #45475a; color: #cdd6f4; }
-.btn-secondary:hover { background: #585b70; }
+.btn-primary { background: var(--c-blue); color: var(--c-on-accent); }
+.btn-primary:hover { background: var(--c-accent-hover); }
+.btn-secondary { background: var(--c-neutral-bg); color: var(--c-text); }
+.btn-secondary:hover { background: var(--c-hover-bg); }
 </style>
diff --git a/master-frontend/src/components/ScanDialog.vue b/master-frontend/src/components/ScanDialog.vue
index 54101ea..fa7721e 100644
--- a/master-frontend/src/components/ScanDialog.vue
+++ b/master-frontend/src/components/ScanDialog.vue
@@ -345,46 +345,46 @@ async function scanAndAddAllRegistersForSlaves(slaveIds: number[]) {
 
 <style scoped>
 .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal-box { background: #1e1e2e; border: 1px solid #45475a; border-radius: 8px; width: 520px; max-height: 80vh; display: flex; flex-direction: column; }
-.modal-title { padding: 12px 16px; font-size: 14px; font-weight: 600; color: #cdd6f4; border-bottom: 1px solid #313244; }
-.modal-footer { padding: 8px 16px; border-top: 1px solid #313244; display: flex; justify-content: flex-end; }
+.modal-box { background: var(--c-base); border: 1px solid var(--c-surface1); border-radius: 8px; width: 520px; max-height: 80vh; display: flex; flex-direction: column; }
+.modal-title { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-surface0); }
+.modal-footer { padding: 8px 16px; border-top: 1px solid var(--c-surface0); display: flex; justify-content: flex-end; }
 
-.tab-bar { display: flex; border-bottom: 1px solid #313244; }
-.tab-btn { flex: 1; padding: 8px; background: transparent; border: none; color: #6c7086; cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; }
-.tab-btn.active { color: #89b4fa; border-bottom-color: #89b4fa; }
+.tab-bar { display: flex; border-bottom: 1px solid var(--c-surface0); }
+.tab-btn { flex: 1; padding: 8px; background: transparent; border: none; color: var(--c-subtext0); cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; }
+.tab-btn.active { color: var(--c-blue); border-bottom-color: var(--c-blue); }
 .tab-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .tab-content { padding: 12px 16px; overflow-y: auto; flex: 1; }
 
 .form-row { margin-bottom: 8px; }
-.form-row label { display: block; font-size: 11px; color: #6c7086; margin-bottom: 3px; }
-.form-row input, .form-row select { width: 100%; padding: 5px 8px; background: #313244; border: 1px solid #45475a; border-radius: 4px; color: #cdd6f4; font-size: 12px; }
-.form-row input:focus, .form-row select:focus { outline: none; border-color: #89b4fa; }
+.form-row label { display: block; font-size: 11px; color: var(--c-subtext0); margin-bottom: 3px; }
+.form-row input, .form-row select { width: 100%; padding: 5px 8px; background: var(--c-control-bg); border: 1px solid var(--c-surface1); border-radius: 4px; color: var(--c-text); font-size: 12px; }
+.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--c-blue); }
 .form-row-inline { display: flex; gap: 8px; }
 .form-row-inline .form-row { flex: 1; }
 
-.checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #cdd6f4; cursor: pointer; margin-bottom: 8px; }
-.checkbox-row input { accent-color: #89b4fa; }
+.checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text); cursor: pointer; margin-bottom: 8px; }
+.checkbox-row input { accent-color: var(--c-blue); }
 .action-row { margin: 10px 0; }
-.btn-primary { width: 100%; padding: 6px; background: #89b4fa; color: #1e1e2e; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
-.btn-primary:hover { background: #74c7ec; }
-.btn-danger { width: 100%; padding: 6px; background: #f38ba8; color: #1e1e2e; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
-.btn-secondary { padding: 5px 16px; background: #313244; color: #cdd6f4; border: 1px solid #45475a; border-radius: 4px; cursor: pointer; font-size: 12px; }
+.btn-primary { width: 100%; padding: 6px; background: var(--c-blue); color: var(--c-on-accent); border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
+.btn-primary:hover { background: var(--c-accent-hover); }
+.btn-danger { width: 100%; padding: 6px; background: var(--c-red); color: var(--c-on-accent); border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
+.btn-secondary { padding: 5px 16px; background: var(--c-control-bg); color: var(--c-text); border: 1px solid var(--c-surface1); border-radius: 4px; cursor: pointer; font-size: 12px; }
 .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .progress-section { margin: 8px 0; }
-.progress-bar-bg { height: 6px; background: #313244; border-radius: 3px; overflow: hidden; }
-.progress-bar-fill { height: 100%; background: #89b4fa; transition: width 0.15s ease; }
-.progress-text { font-size: 11px; color: #6c7086; text-align: center; margin-top: 4px; }
+.progress-bar-bg { height: 6px; background: var(--c-control-bg); border-radius: 3px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: var(--c-blue); transition: width 0.15s ease; }
+.progress-text { font-size: 11px; color: var(--c-subtext0); text-align: center; margin-top: 4px; }
 
 .result-section { margin-top: 8px; }
-.result-title { font-size: 12px; color: #a6e3a1; margin-bottom: 4px; font-weight: 600; }
-.result-scroll { max-height: 200px; overflow-y: auto; border: 1px solid #313244; border-radius: 4px; }
+.result-title { font-size: 12px; color: var(--c-green); margin-bottom: 4px; font-weight: 600; }
+.result-scroll { max-height: 200px; overflow-y: auto; border: 1px solid var(--c-surface0); border-radius: 4px; }
 .result-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-.result-table th { background: #181825; color: #6c7086; font-weight: 500; padding: 4px 10px; text-align: left; position: sticky; top: 0; }
-.result-table td { padding: 3px 10px; border-top: 1px solid #1e1e2e; color: #cdd6f4; }
-.result-table .mono { font-family: 'SF Mono', 'Fira Code', monospace; }
-.empty-result { text-align: center; color: #6c7086; font-size: 12px; padding: 16px; }
-.scan-hint { font-size: 11px; color: #6c7086; margin-bottom: 8px; }
-.status-text { font-size: 12px; color: #89b4fa; text-align: center; padding: 6px; }
+.result-table th { background: var(--c-mantle); color: var(--c-subtext0); font-weight: 500; padding: 4px 10px; text-align: left; position: sticky; top: 0; }
+.result-table td { padding: 3px 10px; border-top: 1px solid var(--c-base); color: var(--c-text); }
+.result-table .mono { font-family: var(--font-mono); }
+.empty-result { text-align: center; color: var(--c-subtext0); font-size: 12px; padding: 16px; }
+.scan-hint { font-size: 11px; color: var(--c-subtext0); margin-bottom: 8px; }
+.status-text { font-size: 12px; color: var(--c-blue); text-align: center; padding: 6px; }
 </style>
diff --git a/master-frontend/src/components/ValuePanel.vue b/master-frontend/src/components/ValuePanel.vue
index 67f3534..b1868be 100644
--- a/master-frontend/src/components/ValuePanel.vue
+++ b/master-frontend/src/components/ValuePanel.vue
@@ -355,17 +355,17 @@ const writeCategory = computed<'register' | 'coil' | null>(() => {
 
 <style scoped>
 .value-panel { padding: 0; font-size: 13px; }
-.panel-header { padding: 8px 12px; font-size: 11px; text-transform: uppercase; color: #6c7086; letter-spacing: 0.5px; }
-.empty-state { padding: 24px 12px; color: #6c7086; text-align: center; font-size: 12px; }
-.panel-title { padding: 6px 12px; font-size: 12px; font-weight: 600; color: #89b4fa; border-bottom: 1px solid #313244; margin-bottom: 4px; }
-.panel-hint { padding: 6px 12px; font-size: 11px; color: #fab387; }
-.value-section { padding: 4px 0; border-bottom: 1px solid #313244; }
-.section-title { padding: 4px 12px; font-size: 11px; color: #6c7086; text-transform: uppercase; }
+.panel-header { padding: 8px 12px; font-size: 11px; text-transform: uppercase; color: var(--c-subtext0); letter-spacing: 0.5px; }
+.empty-state { padding: 24px 12px; color: var(--c-subtext0); text-align: center; font-size: 12px; }
+.panel-title { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--c-blue); border-bottom: 1px solid var(--c-surface0); margin-bottom: 4px; }
+.panel-hint { padding: 6px 12px; font-size: 11px; color: var(--c-peach); }
+.value-section { padding: 4px 0; border-bottom: 1px solid var(--c-surface0); }
+.section-title { padding: 4px 12px; font-size: 11px; color: var(--c-subtext0); text-transform: uppercase; }
 .value-row { display: flex; justify-content: space-between; padding: 3px 12px; }
-.value-label { color: #6c7086; font-size: 12px; }
-.value-data { color: #cdd6f4; font-size: 12px; text-align: right; }
-.value-data.mono { font-family: 'SF Mono', 'Fira Code', monospace; }
+.value-label { color: var(--c-subtext0); font-size: 12px; }
+.value-data { color: var(--c-text); font-size: 12px; text-align: right; }
+.value-data.mono { font-family: var(--font-mono); }
 .value-data.editable { cursor: pointer; border-radius: 3px; padding: 0 4px; user-select: none; }
-.value-data.editable:hover { background: #313244; }
-.panel-edit-input { width: 120px; padding: 1px 6px; background: #1e1e2e; border: 1px solid #89b4fa; border-radius: 3px; color: #cdd6f4; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; text-align: right; outline: none; }
+.value-data.editable:hover { background: var(--c-control-bg); }
+.panel-edit-input { width: 120px; padding: 1px 6px; background: var(--c-base); border: 1px solid var(--c-blue); border-radius: 3px; color: var(--c-text); font-family: var(--font-mono); font-size: 12px; text-align: right; outline: none; }
 </style>
diff --git a/master-frontend/src/components/WriteDialog.vue b/master-frontend/src/components/WriteDialog.vue
index 37d3a6c..843873f 100644
--- a/master-frontend/src/components/WriteDialog.vue
+++ b/master-frontend/src/components/WriteDialog.vue
@@ -180,26 +180,26 @@ async function submit() {
 
 <style scoped>
 .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal-box { background: #1e1e2e; border: 1px solid #45475a; border-radius: 8px; padding: 20px; min-width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
-.modal-title { font-size: 15px; font-weight: 600; color: #cdd6f4; margin-bottom: 16px; }
+.modal-box { background: var(--c-base); border: 1px solid var(--c-surface1); border-radius: 8px; padding: 20px; min-width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
+.modal-title { font-size: 15px; font-weight: 600; color: var(--c-text); margin-bottom: 16px; }
 .modal-body { display: flex; flex-direction: column; gap: 12px; }
 .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
-.form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6c7086; }
-.form-input { padding: 6px 10px; background: #313244; border: 1px solid #45475a; border-radius: 4px; color: #cdd6f4; font-size: 13px; }
-.form-input:focus { outline: none; border-color: #89b4fa; }
-.form-hint { color: #6c7086; font-size: 11px; }
-.form-textarea { resize: vertical; min-height: 60px; font-family: 'SF Mono', 'Fira Code', monospace; }
+.form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-subtext0); }
+.form-input { padding: 6px 10px; background: var(--c-control-bg); border: 1px solid var(--c-surface1); border-radius: 4px; color: var(--c-text); font-size: 13px; }
+.form-input:focus { outline: none; border-color: var(--c-blue); }
+.form-hint { color: var(--c-subtext0); font-size: 11px; }
+.form-textarea { resize: vertical; min-height: 60px; font-family: var(--font-mono); }
 .btn { padding: 7px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
-.btn-primary { background: #89b4fa; color: #1e1e2e; }
-.btn-primary:hover { background: #74c7ec; }
+.btn-primary { background: var(--c-blue); color: var(--c-on-accent); }
+.btn-primary:hover { background: var(--c-accent-hover); }
 .btn-primary:disabled { opacity: 0.4; cursor: default; }
-.btn-secondary { background: #45475a; color: #cdd6f4; }
-.btn-secondary:hover { background: #585b70; }
-.float-preview { margin-top: 4px; border: 1px solid #313244; border-radius: 4px; overflow: hidden; }
-.preview-summary { padding: 4px 8px; font-size: 11px; color: #a6e3a1; background: #181825; }
-.preview-warn { color: #fab387; margin-left: 8px; }
+.btn-secondary { background: var(--c-neutral-bg); color: var(--c-text); }
+.btn-secondary:hover { background: var(--c-hover-bg); }
+.float-preview { margin-top: 4px; border: 1px solid var(--c-surface0); border-radius: 4px; overflow: hidden; }
+.preview-summary { padding: 4px 8px; font-size: 11px; color: var(--c-green); background: var(--c-mantle); }
+.preview-warn { color: var(--c-peach); margin-left: 8px; }
 .preview-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-.preview-table th { background: #181825; color: #6c7086; font-weight: 500; padding: 3px 8px; text-align: left; }
-.preview-table td { padding: 2px 8px; color: #cdd6f4; font-family: 'SF Mono', 'Fira Code', monospace; border-top: 1px solid #1e1e2e; }
-.preview-error td { color: #f38ba8; }
+.preview-table th { background: var(--c-mantle); color: var(--c-subtext0); font-weight: 500; padding: 3px 8px; text-align: left; }
+.preview-table td { padding: 2px 8px; color: var(--c-text); font-family: var(--font-mono); border-top: 1px solid var(--c-base); }
+.preview-error td { color: var(--c-red); }
 </style>
diff --git a/master-frontend/src/main.ts b/master-frontend/src/main.ts
index 2578901..4975400 100644
--- a/master-frontend/src/main.ts
+++ b/master-frontend/src/main.ts
@@ -1,6 +1,8 @@
 import 'shared-frontend/src/styles/tokens.css'
 import 'shared-frontend/src/styles/toolbar.css'
+import { initTheme } from 'shared-frontend'
 import { createApp } from 'vue'
 import App from './App.vue'
 
+initTheme()
 createApp(App).mount('#app')
diff --git a/shared-frontend/src/components/LangToggle.vue b/shared-frontend/src/components/LangToggle.vue
index bca445d..9b2dff0 100644
--- a/shared-frontend/src/components/LangToggle.vue
+++ b/shared-frontend/src/components/LangToggle.vue
@@ -34,7 +34,7 @@ function pick(next: Locale) {
   margin-right: 8px;
   border-radius: 4px;
   overflow: hidden;
-  background: var(--c-surface0);
+  background: var(--c-control-bg);
   border: 1px solid var(--c-surface1);
 }
 
@@ -50,13 +50,13 @@ function pick(next: Locale) {
 }
 
 .lang-toggle-btn:hover:not(.active) {
-  background: var(--c-surface1);
+  background: var(--c-hover-bg);
   color: var(--c-text);
 }
 
 .lang-toggle-btn.active {
-  background: var(--c-surface1);
-  color: var(--c-text);
+  background: var(--c-selection-bg);
+  color: var(--c-selection-text);
   font-weight: 600;
 }
 </style>
diff --git a/shared-frontend/src/components/ThemeToggle.vue b/shared-frontend/src/components/ThemeToggle.vue
index bd636ad..5e161a0 100644
--- a/shared-frontend/src/components/ThemeToggle.vue
+++ b/shared-frontend/src/components/ThemeToggle.vue
@@ -34,7 +34,7 @@ function toggle() {
   height: 24px;
   margin-right: 8px;
   border-radius: 4px;
-  background: var(--c-surface0);
+  background: var(--c-control-bg);
   border: 1px solid var(--c-surface1);
   color: var(--c-subtext0);
   cursor: pointer;
@@ -42,7 +42,7 @@ function toggle() {
 }
 
 .theme-toggle:hover {
-  background: var(--c-surface1);
+  background: var(--c-hover-bg);
   color: var(--c-text);
 }
 </style>
diff --git a/shared-frontend/src/styles/tokens.css b/shared-frontend/src/styles/tokens.css
index e96b4a2..1ba2464 100644
--- a/shared-frontend/src/styles/tokens.css
+++ b/shared-frontend/src/styles/tokens.css
@@ -1,6 +1,6 @@
-/* Catppuccin palettes + semantic aliases.
+/* Theme palettes + semantic aliases.
    Imported once from main.ts so every component can use var(--…).
-   Mocha (dark) is the default; [data-theme='light'] switches to Latte. */
+   Mocha (dark) is the default; light uses neutral white and gray surfaces. */
 
 :root, :root[data-theme='dark'] {
   /* Base layers (dark → light) */
@@ -29,33 +29,56 @@
 
   --c-row-danger-bg: #3d2a30;
 
+  /* Roles whose foreground/background relationship changes with the theme. */
+  --c-on-accent: var(--c-base);
+  --c-accent-hover: var(--c-sapphire);
+  --c-control-bg: var(--c-surface0);
+  --c-hover-bg: var(--c-base);
+  --c-selection-bg: var(--c-blue);
+  --c-selection-text: var(--c-base);
+  --c-row-border: var(--c-base);
+  --c-success-bg: var(--c-green);
+  --c-success-text: var(--c-base);
+  --c-neutral-bg: var(--c-surface1);
+  --c-neutral-text: var(--c-subtext1);
+
   /* Mono stack with broader fallback chain than the original SF Mono / Fira Code. */
   --font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
 }
 
 :root[data-theme='light'] {
-  /* Catppuccin Latte */
-  --c-crust:    #dce0e8;
-  --c-mantle:   #e6e9ef;
-  --c-base:     #eff1f5;
-  --c-surface0: #ccd0da;
-  --c-surface1: #bcc0cc;
-  --c-surface2: #acb0be;
-  --c-overlay0: #9ca0b0;
-  --c-subtext0: #6c6f85;
-  --c-subtext1: #5c5f77;
-  --c-text:     #4c4f69;
-
-  --c-blue:     #1e66f5;
-  --c-lavender: #7287fd;
-  --c-sapphire: #209fb5;
-  --c-sky:      #04a5e5;
-  --c-teal:     #179299;
-  --c-green:    #40a02b;
-  --c-yellow:   #df8e1d;
-  --c-peach:    #fe640b;
-  --c-red:      #d20f39;
-  --c-mauve:    #8839ef;
-
-  --c-row-danger-bg: #ecd6de;
+  --c-crust:    #ffffff;
+  --c-mantle:   #f5f7fa;
+  --c-base:     #ffffff;
+  --c-surface0: #e2e7ee;
+  --c-surface1: #c7d0db;
+  --c-surface2: #aebbc9;
+  --c-overlay0: #66758a;
+  --c-subtext0: #526176;
+  --c-subtext1: #3f4e63;
+  --c-text:     #202c3c;
+
+  --c-blue:     #245dcc;
+  --c-lavender: #5753bb;
+  --c-sapphire: #176b86;
+  --c-sky:      #126e99;
+  --c-teal:     #16746d;
+  --c-green:    #217345;
+  --c-yellow:   #8a6400;
+  --c-peach:    #a94d12;
+  --c-red:      #b42340;
+  --c-mauve:    #793ac1;
+
+  --c-row-danger-bg: #fff0f2;
+  --c-on-accent: #ffffff;
+  --c-accent-hover: #1c4ca8;
+  --c-control-bg: #ffffff;
+  --c-hover-bg: #edf2f8;
+  --c-selection-bg: #e5efff;
+  --c-selection-text: #193e80;
+  --c-row-border: #e9edf2;
+  --c-success-bg: #e4f3e9;
+  --c-success-text: #21663e;
+  --c-neutral-bg: #edf0f4;
+  --c-neutral-text: #546174;
 }