From 07abc03ef49f4966636ae3ff47c65cfc4b8bdcb9 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Fri, 24 Apr 2026 16:38:38 -0400
Subject: [PATCH] style(dashboard): complete design token migration and live
 view cleanup

Replace remaining hard-coded colors across all CSS files with design
tokens from tokens.css. Remove duplicate inline positioning from
live.html panels (now in layout.css). Add replay session blob fetch
for immediate 3D scene state on seek.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 dashboard/css/ambient.css         |  22 ++--
 dashboard/css/anomaly.css         |   6 +-
 dashboard/css/apdetection.css     |   2 +-
 dashboard/css/ble-panel.css       |  34 +++---
 dashboard/css/briefing.css        |   4 +-
 dashboard/css/command-palette.css |   8 +-
 dashboard/css/expert.css          |   6 +-
 dashboard/css/explainability.css  |  16 +--
 dashboard/css/fleet-page.css      |  40 +++----
 dashboard/css/floorplan.css       |  18 +--
 dashboard/css/guided-help.css     |   8 +-
 dashboard/css/notifications.css   |   4 +-
 dashboard/css/panels.css          | 178 +++++++++++++++---------------
 dashboard/css/quick-actions.css   |   6 +-
 dashboard/css/replay.css          |  12 +-
 dashboard/css/security.css        |  18 +--
 dashboard/css/simple.css          |  58 +++++-----
 dashboard/css/simulator.css       |  24 ++--
 dashboard/css/sleep.css           |  14 +--
 dashboard/css/timeline.css        |  38 +++----
 dashboard/css/tokens.css          |  23 ++++
 dashboard/css/troubleshoot.css    |  16 +--
 dashboard/js/replay.js            |  27 ++++-
 dashboard/live.html               |  29 +----
 24 files changed, 318 insertions(+), 293 deletions(-)

diff --git a/dashboard/css/ambient.css b/dashboard/css/ambient.css
index db585b7..d05e686 100644
--- a/dashboard/css/ambient.css
+++ b/dashboard/css/ambient.css
@@ -267,7 +267,7 @@ body.ambient-mode {
     padding: 6px var(--space-3);
     background: var(--slate-4);
     border-radius: var(--radius-card);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     color: var(--text-primary);
     box-shadow: 0 2px 8px var(--shadow);
@@ -289,7 +289,7 @@ body.ambient-mode {
 }
 
 .ambient-zone-label .zone-count {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     opacity: 0.8;
     margin-left: var(--space-1);
 }
@@ -325,7 +325,7 @@ body.ambient-mode {
 }
 
 .ambient-alert-icon {
-    font-size: 64px;
+    font-size: var(--text-6xl);
     margin-bottom: var(--space-5);
     animation: alert-pulse 1.5s ease-in-out infinite;
 }
@@ -342,7 +342,7 @@ body.ambient-mode {
 }
 
 .ambient-alert-title {
-    font-size: 32px;
+    font-size: var(--text-4xl);
     font-weight: 700;
     color: var(--text-on-accent);
     margin-bottom: var(--space-3);
@@ -350,7 +350,7 @@ body.ambient-mode {
 }
 
 .ambient-alert-message {
-    font-size: 18px;
+    font-size: var(--text-xl);
     color: var(--text-on-accent);
     margin-bottom: var(--space-8);
     text-align: center;
@@ -438,9 +438,9 @@ body.ambient-mode {
 }
 
 .ambient-briefing-section-label {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     opacity: 0.7;
     margin-bottom: var(--space-1);
 }
@@ -479,12 +479,12 @@ body.ambient-mode {
 }
 
 .ambient-secure-icon {
-    font-size: 64px;
+    font-size: var(--text-6xl);
     margin-bottom: var(--space-4);
 }
 
 .ambient-secure-text {
-    font-size: 24px;
+    font-size: var(--text-3xl);
     font-weight: 500;
 }
 
@@ -502,11 +502,11 @@ body.ambient-mode {
 
     .ambient-zone-label {
         padding: var(--space-1) var(--space-2);
-        font-size: 11px;
+        font-size: var(--text-2xs);
     }
 
     .ambient-alert-title {
-        font-size: 24px;
+        font-size: var(--text-3xl);
     }
 
     .ambient-alert-message {
diff --git a/dashboard/css/anomaly.css b/dashboard/css/anomaly.css
index b4aa566..ec85b97 100644
--- a/dashboard/css/anomaly.css
+++ b/dashboard/css/anomaly.css
@@ -231,7 +231,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    font-size: 18px;
+    font-size: var(--text-xl);
     flex-shrink: 0;
 }
 
@@ -351,7 +351,7 @@
 
 .learning-icon {
     color: var(--blue-10);
-    font-size: 18px;
+    font-size: var(--text-xl);
 }
 
 .learning-text {
@@ -483,7 +483,7 @@
 }
 
 .alert-banner-icon {
-    font-size: 24px;
+    font-size: var(--text-3xl);
 }
 
 .alert-banner-content {
diff --git a/dashboard/css/apdetection.css b/dashboard/css/apdetection.css
index 1896db3..e979a90 100644
--- a/dashboard/css/apdetection.css
+++ b/dashboard/css/apdetection.css
@@ -55,7 +55,7 @@
 }
 
 .ap-detection-title {
-	font-size: 18px;
+	font-size: var(--text-xl);
 	font-weight: 600;
 	margin-bottom: var(--space-1);
 }
diff --git a/dashboard/css/ble-panel.css b/dashboard/css/ble-panel.css
index 21aa66d..19bec11 100644
--- a/dashboard/css/ble-panel.css
+++ b/dashboard/css/ble-panel.css
@@ -29,7 +29,7 @@
     border-radius: var(--radius-card);
     padding: var(--space-4);
     color: var(--alert);
-    font-size: 13px;
+    font-size: var(--text-sm);
     text-align: center;
 }
 
@@ -54,15 +54,15 @@
     text-align: center;
     padding: var(--space-10) var(--space-5);
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: var(--text-sm);
     line-height: var(--lh-body);
 }
 
 /* Section Header */
 .ble-section-header {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     color: var(--text-muted);
     margin: var(--space-3);
     padding-bottom: 6px;
@@ -108,7 +108,7 @@
 
 /* Device Icon */
 .ble-device-icon {
-    font-size: 18px;
+    font-size: var(--text-xl);
     flex-shrink: 0;
     width: 24px;
     text-align: center;
@@ -117,7 +117,7 @@
 /* Device Name */
 .ble-device-name {
     flex: 1;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-12);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -126,7 +126,7 @@
 
 /* Device RSSI */
 .ble-device-rssi {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     font-family: var(--font-mono);
     flex-shrink: 0;
@@ -183,7 +183,7 @@
 
 .ble-hint {
     margin: 0;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
     line-height: 1.4;
 }
@@ -208,7 +208,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
     box-sizing: border-box;
 }
 
@@ -238,7 +238,7 @@
     border: none;
     border-radius: var(--radius-control);
     color: var(--slate-11);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: background 0.2s;
 }
@@ -253,7 +253,7 @@
     border: none;
     border-radius: var(--radius-control);
     color: var(--text-on-accent);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     transition: background 0.2s;
@@ -269,7 +269,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-11);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: background 0.2s;
 }
@@ -285,7 +285,7 @@
     border: 1px solid var(--alert-border);
     border-radius: var(--radius-control);
     color: var(--alert);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: background 0.2s;
 }
@@ -319,7 +319,7 @@
 }
 
 .ble-detail-value {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-12);
     font-family: var(--font-mono);
 }
@@ -354,7 +354,7 @@
     padding: 6px var(--space-2);
     background: var(--border-subtle);
     border-radius: var(--radius-control);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .ble-history-time {
@@ -369,7 +369,7 @@
 
 .ble-history-node {
     color: var(--text-secondary);
-    font-size: 10px;
+    font-size: var(--text-3xs);
 }
 
 /* ============================================
@@ -382,7 +382,7 @@
     border-radius: var(--radius-control);
     padding: 10px var(--space-3);
     margin-bottom: var(--space-4);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--blue-10);
     line-height: 1.4;
 }
diff --git a/dashboard/css/briefing.css b/dashboard/css/briefing.css
index 5267e07..7f9bbc0 100644
--- a/dashboard/css/briefing.css
+++ b/dashboard/css/briefing.css
@@ -56,7 +56,7 @@
 }
 
 #briefing-card .briefing-content {
-	font-size: 15px;
+	font-size: var(--text-md);
 	line-height: 1.6;
 	color: var(--slate-11);
 	white-space: pre-line;
@@ -236,7 +236,7 @@
 }
 
 #briefing-settings h3 {
-	font-size: 18px;
+	font-size: var(--text-xl);
 	color: var(--blue-10);
 	margin-bottom: var(--space-5);
 }
diff --git a/dashboard/css/command-palette.css b/dashboard/css/command-palette.css
index 66b53ad..5d8d74c 100644
--- a/dashboard/css/command-palette.css
+++ b/dashboard/css/command-palette.css
@@ -79,7 +79,7 @@
     border: none;
     outline: none;
     color: var(--slate-12);
-    font-size: 15px;
+    font-size: var(--text-md);
     font-family: inherit;
     line-height: var(--lh-body);
 }
@@ -89,7 +89,7 @@
 }
 
 .cp-esc-hint {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--slate-7);
     background: var(--highlight-subtle);
     border-radius: var(--radius-control);
@@ -124,7 +124,7 @@
 /* Group header */
 .cp-group-header {
     padding: 6px var(--space-4) var(--space-1);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
@@ -191,7 +191,7 @@
 }
 
 .cp-item-arrow {
-    font-size: 18px;
+    font-size: var(--text-xl);
     color: var(--slate-7);
     flex-shrink: 0;
     line-height: 1;
diff --git a/dashboard/css/expert.css b/dashboard/css/expert.css
index fcff88d..5948689 100644
--- a/dashboard/css/expert.css
+++ b/dashboard/css/expert.css
@@ -114,7 +114,7 @@
     min-height: 44px;
     width: 44px;
     height: 44px;
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 44px;
     padding: 0;
 }
@@ -130,7 +130,7 @@
 .link-item {
     min-height: 44px;
     padding: var(--space-3) var(--space-4);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 /* Ensure all buttons meet 44x44px minimum */
@@ -184,7 +184,7 @@
     min-height: 44px;
     width: 44px;
     height: 44px;
-    font-size: 18px;
+    font-size: var(--text-xl);
 }
 
 /* Mode toggle buttons */
diff --git a/dashboard/css/explainability.css b/dashboard/css/explainability.css
index 526c707..2f27daf 100644
--- a/dashboard/css/explainability.css
+++ b/dashboard/css/explainability.css
@@ -37,7 +37,7 @@
 }
 
 .panel-empty-icon {
-    font-size: 48px;
+    font-size: var(--text-5xl);
     margin-bottom: var(--space-3);
     opacity: 0.5;
 }
@@ -89,7 +89,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     font-weight: 700;
     color: var(--blue-10);
 }
@@ -145,7 +145,7 @@
 .links-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .links-table th,
@@ -158,7 +158,7 @@
 .links-table th {
     font-weight: 600;
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -179,7 +179,7 @@
 /* ----- Table Cells ----- */
 .link-cell {
     font-family: var(--font-mono);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .link-id {
@@ -200,7 +200,7 @@
     min-width: 20px;
     padding: 2px 6px;
     border-radius: var(--radius-control);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     font-weight: 600;
     text-align: center;
 }
@@ -235,7 +235,7 @@
 .contribution-cell {
     font-family: var(--font-mono);
     color: var(--blue-9);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 /* ----- BLE Match Card ----- */
@@ -260,7 +260,7 @@
 }
 
 .ble-match-name {
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
     color: var(--slate-12);
 }
diff --git a/dashboard/css/fleet-page.css b/dashboard/css/fleet-page.css
index de75d6d..d44fa82 100644
--- a/dashboard/css/fleet-page.css
+++ b/dashboard/css/fleet-page.css
@@ -45,11 +45,11 @@ body.fleet-page {
     text-decoration: none;
     color: var(--text-primary);
     font-weight: 600;
-    font-size: 18px;
+    font-size: var(--text-xl);
 }
 
 .logo-icon {
-    font-size: 24px;
+    font-size: var(--text-3xl);
 }
 
 .nav-title {
@@ -73,7 +73,7 @@ body.fleet-page {
     border-radius: var(--radius-control);
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 13px;
+    font-size: var(--text-sm);
     transition: all 0.2s;
     cursor: pointer;
 }
@@ -103,7 +103,7 @@ body.fleet-page {
 }
 
 .header-content h1 {
-    font-size: 24px;
+    font-size: var(--text-3xl);
     font-weight: 600;
     margin-bottom: var(--space-2);
 }
@@ -146,7 +146,7 @@ body.fleet-page {
     gap: 6px;
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     border: none;
@@ -242,7 +242,7 @@ body.fleet-page {
     border: 1px solid var(--border-default);
     border-radius: var(--radius-control);
     color: var(--text-primary);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .search-input {
@@ -332,7 +332,7 @@ body.fleet-page {
 .fleet-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .fleet-table thead {
@@ -348,7 +348,7 @@ body.fleet-page {
     font-weight: 600;
     color: var(--text-secondary);
     text-transform: uppercase;
-    font-size: 11px;
+    font-size: var(--text-2xs);
     letter-spacing: 0.5px;
     border-bottom: 2px solid var(--border-default);
     white-space: nowrap;
@@ -493,7 +493,7 @@ body.fleet-page {
 }
 
 .mac-full {
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .mac-truncated {
@@ -577,7 +577,7 @@ body.fleet-page {
     padding: 2px 6px;
     background: var(--warn-bg);
     border-radius: var(--radius-control);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .firmware-arrow {
@@ -589,7 +589,7 @@ body.fleet-page {
     display: inline-block;
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-control);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     font-weight: 600;
     text-transform: uppercase;
 }
@@ -647,7 +647,7 @@ body.fleet-page {
 }
 
 .health-value {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-secondary);
     min-width: 35px;
     text-align: right;
@@ -739,7 +739,7 @@ body.fleet-page {
     border: none;
     color: var(--text-primary);
     text-align: left;
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: background 0.2s;
     display: flex;
@@ -801,7 +801,7 @@ body.fleet-page {
 }
 
 .empty-icon {
-    font-size: 64px;
+    font-size: var(--text-6xl);
     margin-bottom: var(--space-4);
     opacity: 0.5;
 }
@@ -853,7 +853,7 @@ body.fleet-page {
 }
 
 .modal-header h3 {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
 }
 
@@ -861,7 +861,7 @@ body.fleet-page {
     background: none;
     border: none;
     color: var(--text-secondary);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     cursor: pointer;
     padding: 0;
     width: 32px;
@@ -968,12 +968,12 @@ body.fleet-page {
 
 .remove-warning ul {
     margin: 0;
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .remove-warning-text {
     color: var(--alert);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 /* ============================================
@@ -1030,7 +1030,7 @@ body.fleet-page {
 }
 
 .toast-icon {
-    font-size: 18px;
+    font-size: var(--text-xl);
 }
 
 .toast.success .toast-icon { color: var(--ok); }
@@ -1040,7 +1040,7 @@ body.fleet-page {
 
 .toast-message {
     flex: 1;
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .toast-dismiss {
diff --git a/dashboard/css/floorplan.css b/dashboard/css/floorplan.css
index e6d3f1e..8c9807b 100644
--- a/dashboard/css/floorplan.css
+++ b/dashboard/css/floorplan.css
@@ -26,7 +26,7 @@
     font-size: var(--text-sm);
     color: var(--text-muted);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     margin: 0;
 }
 
@@ -34,7 +34,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     cursor: pointer;
     padding: 0 4px;
     line-height: 1;
@@ -54,13 +54,13 @@
 }
 
 .floorplan-section h4 {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
     margin-bottom: var(--space-2);
 }
 
 .floorplan-hint {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-bottom: var(--space-2);
 }
@@ -113,7 +113,7 @@
 }
 
 .floorplan-file-name {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     max-width: 180px;
     overflow: hidden;
@@ -192,7 +192,7 @@
 .floorplan-point-info {
     display: flex;
     justify-content: space-between;
-    font-size: 11px;
+    font-size: var(--text-2xs);
     margin-bottom: var(--space-1);
 }
 
@@ -206,7 +206,7 @@
 
 .floorplan-distance-input label {
     display: block;
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-secondary);
     margin-bottom: var(--space-1);
 }
@@ -218,7 +218,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
     box-sizing: border-box;
 }
 
@@ -245,7 +245,7 @@
 .status-item {
     display: flex;
     justify-content: space-between;
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .status-label {
diff --git a/dashboard/css/guided-help.css b/dashboard/css/guided-help.css
index e3b7ff2..3e396b5 100644
--- a/dashboard/css/guided-help.css
+++ b/dashboard/css/guided-help.css
@@ -50,7 +50,7 @@
 }
 
 .help-icon {
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 1;
 }
 
@@ -65,7 +65,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     cursor: pointer;
     padding: 0;
     line-height: 1;
@@ -120,7 +120,7 @@
 }
 
 .step-title {
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
     color: var(--blue-10);
     margin: var(--space-2);
@@ -173,7 +173,7 @@
 .help-btn {
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     border: none;
diff --git a/dashboard/css/notifications.css b/dashboard/css/notifications.css
index 1e8bc52..95a10dd 100644
--- a/dashboard/css/notifications.css
+++ b/dashboard/css/notifications.css
@@ -107,7 +107,7 @@
 .btn-icon {
 	background: none;
 	border: none;
-	font-size: 18px;
+	font-size: var(--text-xl);
 	cursor: pointer;
 	padding: 5px;
 	opacity: 0.7;
@@ -342,7 +342,7 @@
 	background: none;
 	border: none;
 	color: var(--text-muted);
-	font-size: 24px;
+	font-size: var(--text-3xl);
 	cursor: pointer;
 	padding: 5px;
 	line-height: 1;
diff --git a/dashboard/css/panels.css b/dashboard/css/panels.css
index bedb762..77eb78b 100644
--- a/dashboard/css/panels.css
+++ b/dashboard/css/panels.css
@@ -63,7 +63,7 @@
 
 .panel-title {
     margin: 0;
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--slate-12);
     overflow: hidden;
@@ -75,7 +75,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 1;
     cursor: pointer;
     padding: 0;
@@ -188,7 +188,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 1;
     cursor: pointer;
     padding: 0;
@@ -442,7 +442,7 @@
 
 .panel-form-group label {
     display: block;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
     margin-bottom: 6px;
     font-weight: 500;
@@ -526,7 +526,7 @@
 }
 
 .panel-form-range-value {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--blue-10);
     font-weight: 500;
     text-align: right;
@@ -565,7 +565,7 @@
 .panel-section-header {
     font-size: var(--text-xs);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     color: var(--text-muted);
     margin-bottom: var(--space-3);
     padding-bottom: 6px;
@@ -640,7 +640,7 @@
 }
 
 .panel-info-card-title {
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 600;
     color: var(--slate-12);
     margin-bottom: var(--space-1);
@@ -653,7 +653,7 @@
 }
 
 .panel-info-card-subtitle {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-top: var(--space-1);
 }
@@ -696,7 +696,7 @@
 }
 
 .panel-empty-icon {
-    font-size: 48px;
+    font-size: var(--text-5xl);
     margin-bottom: var(--space-3);
     opacity: 0.5;
 }
@@ -716,7 +716,7 @@
     border-radius: var(--radius-modal);
     cursor: pointer;
     transition: background 0.2s;
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
 }
 
@@ -824,7 +824,7 @@
     border-radius: var(--radius-card);
     padding: var(--space-3);
     margin-bottom: var(--space-5);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--warn);
     display: flex;
     align-items: center;
@@ -833,7 +833,7 @@
 
 #security-dialog .learning-warning::before {
     content: '⚠';
-    font-size: 18px;
+    font-size: var(--text-xl);
 }
 
 #security-dialog-buttons {
@@ -873,7 +873,7 @@
 }
 
 .alert-banner-icon {
-    font-size: 24px;
+    font-size: var(--text-3xl);
     animation: alert-shake 0.5s ease-in-out infinite;
 }
 
@@ -894,7 +894,7 @@
 }
 
 .alert-banner-subtitle {
-    font-size: 13px;
+    font-size: var(--text-sm);
     opacity: 0.9;
 }
 
@@ -906,7 +906,7 @@
 .alert-banner-btn {
     padding: 10px var(--space-4);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     border: none;
@@ -972,7 +972,7 @@
 }
 
 .security-status-badge-value {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--slate-12);
 }
@@ -983,7 +983,7 @@
 .security-status-badge.value-alert { color: var(--alert); }
 
 .security-status-icon {
-    font-size: 32px;
+    font-size: var(--text-4xl);
 }
 
 /* Learning Progress Bar */
@@ -1004,7 +1004,7 @@
 }
 
 .learning-progress-percent {
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 600;
     color: var(--warn);
 }
@@ -1031,7 +1031,7 @@
     padding: var(--space-1) 10px;
     background: var(--ok-muted);
     border-radius: var(--radius-card);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     font-weight: 600;
     color: var(--ok);
     margin-top: var(--space-2);
@@ -1053,13 +1053,13 @@
 }
 
 .security-stat-value {
-    font-size: 24px;
+    font-size: var(--text-3xl);
     font-weight: 600;
     color: var(--blue-10);
 }
 
 .security-stat-label {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-top: var(--space-1);
     text-transform: uppercase;
@@ -1072,18 +1072,18 @@
 }
 
 .security-last-event-label {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-bottom: var(--space-1);
 }
 
 .security-last-event-value {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
 .security-last-event-time {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-top: var(--space-1);
 }
@@ -1093,7 +1093,7 @@
     width: 100%;
     padding: 14px;
     border-radius: var(--radius-card);
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
     cursor: pointer;
     border: none;
@@ -1143,7 +1143,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-11);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: all 0.2s;
 }
@@ -1190,13 +1190,13 @@
 }
 
 .anomaly-item-type {
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 600;
     color: var(--slate-12);
 }
 
 .anomaly-item-time {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
 }
 
@@ -1210,7 +1210,7 @@
     display: inline-block;
     padding: 2px var(--space-2);
     border-radius: var(--radius-card);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     margin-top: 6px;
 }
@@ -1232,13 +1232,13 @@
 }
 
 .anomaly-timeline-empty-icon {
-    font-size: 32px;
+    font-size: var(--text-4xl);
     margin-bottom: var(--space-2);
     opacity: 0.5;
 }
 
 .anomaly-timeline-empty-text {
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 /* Responsive */
@@ -1360,7 +1360,7 @@
 
 .auth-header p {
     margin: 0;
-    font-size: 15px;
+    font-size: var(--text-md);
     color: var(--text-secondary);
 }
 
@@ -1388,7 +1388,7 @@
     border: 1px solid var(--alert-border);
     border-radius: var(--radius-control);
     padding: 10px var(--space-4);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--alert);
     margin: 0;
 }
@@ -1406,7 +1406,7 @@
     border: 2px solid var(--border-strong);
     border-radius: var(--radius-card);
     color: var(--slate-12);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     font-weight: 600;
     text-align: center;
     transition: all 0.2s;
@@ -1426,7 +1426,7 @@
 .auth-button {
     padding: 14px var(--space-8);
     border-radius: var(--radius-card);
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
     cursor: pointer;
     border: none;
@@ -1468,7 +1468,7 @@
     }
 
     .auth-header h1 {
-        font-size: 24px;
+        font-size: var(--text-3xl);
     }
 
     .pin-digit {
@@ -1551,7 +1551,7 @@
 }
 
 .confidence-label {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
 }
 
@@ -1607,7 +1607,7 @@
     color: var(--text-muted);
     font-weight: 500;
     border-bottom: 1px solid var(--bg-hover);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -1623,7 +1623,7 @@
 
 .links-table-detailed {
     margin-top: var(--space-2);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .link-cell {
@@ -1632,7 +1632,7 @@
 
 .link-id {
     color: var(--blue-10);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .deltarms-cell {
@@ -1648,7 +1648,7 @@
     display: inline-block;
     padding: 2px var(--space-2);
     border-radius: var(--radius-control);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     color: var(--bg-card);
 }
@@ -1673,7 +1673,7 @@
     display: inline-block;
     padding: 2px 6px;
     border-radius: var(--radius-control);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     font-weight: 600;
     background: var(--ok-border);
     color: var(--ok);
@@ -1715,13 +1715,13 @@
 
 .ble-match-name {
     flex: 1;
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
     color: var(--slate-12);
 }
 
 .ble-match-confidence {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     font-weight: 600;
     padding: 3px var(--space-2);
     border-radius: var(--radius-control);
@@ -1788,7 +1788,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
     transition: background 0.2s, color 0.2s;
 }
@@ -1836,11 +1836,11 @@
     }
 
     .confidence-value {
-        font-size: 18px;
+        font-size: var(--text-xl);
     }
 
     .links-table {
-        font-size: 11px;
+        font-size: var(--text-2xs);
     }
 
     .links-table th,
@@ -1862,7 +1862,7 @@
 
 .automation-header h3 {
     margin: 0;
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
 }
 
@@ -1910,7 +1910,7 @@
 }
 
 .trigger-card-title {
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     flex: 1;
     min-width: 0;
@@ -1920,7 +1920,7 @@
 }
 
 .trigger-card-meta {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-top: var(--space-1);
 }
@@ -1937,7 +1937,7 @@
     align-items: center;
     gap: 3px;
     padding: 2px 7px;
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     border-radius: var(--radius-control);
     background: var(--alert-bg);
@@ -1951,7 +1951,7 @@
     align-items: center;
     gap: 3px;
     padding: 2px 7px;
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     border-radius: var(--radius-control);
     background: var(--warn-bg);
@@ -1965,7 +1965,7 @@
     align-items: center;
     gap: 3px;
     padding: 2px 7px;
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     border-radius: var(--radius-control);
     background: var(--warn-muted);
@@ -1997,7 +1997,7 @@
 
 .btn-sm {
     padding: 3px var(--space-2);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .btn-primary {
@@ -2126,7 +2126,7 @@
 .form-control {
     width: 100%;
     padding: 6px 10px;
-    font-size: 13px;
+    font-size: var(--text-sm);
     background: var(--border-subtle);
     border: 1px solid var(--bg-active);
     border-radius: var(--radius-control);
@@ -2158,7 +2158,7 @@
 
 .text-muted {
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: var(--text-2xs);
 }
 
 .volume-shape-info {
@@ -2181,7 +2181,7 @@
     align-items: center;
     gap: var(--space-2);
     padding: 4px 0;
-    font-size: 11px;
+    font-size: var(--text-2xs);
     border-bottom: 1px solid var(--border-subtle);
 }
 
@@ -2208,7 +2208,7 @@
 
 .trigger-log-entry .log-time {
     color: var(--slate-7);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     flex-shrink: 0;
 }
 
@@ -2273,7 +2273,7 @@
 
 .panel-modal-header h2 {
     margin: 0;
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--slate-12);
 }
@@ -2282,7 +2282,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 1;
     cursor: pointer;
     padding: 0;
@@ -2345,7 +2345,7 @@
     border: 1px solid var(--alert-border);
     border-radius: var(--radius-control);
     padding: 10px var(--space-4);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--alert);
     margin-bottom: var(--space-4);
 }
@@ -2414,7 +2414,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 18px;
+    font-size: var(--text-xl);
     cursor: pointer;
     padding: var(--space-1);
     width: 28px;
@@ -2449,7 +2449,7 @@
 
 .sim-section h3 {
     margin: 0;
-    font-size: 13px;
+    font-size: var(--text-sm);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--text-muted);
@@ -2467,7 +2467,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
@@ -2478,7 +2478,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
     text-align: right;
 }
 
@@ -2521,7 +2521,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-11);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
@@ -2584,7 +2584,7 @@
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-control);
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
 }
 
@@ -2610,12 +2610,12 @@
 
 .sim-item-name {
     flex: 1;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-12);
 }
 
 .sim-item-position {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     font-family: var(--font-mono);
 }
@@ -2626,7 +2626,7 @@
     border: none;
     border-radius: var(--radius-control);
     color: var(--alert);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     cursor: pointer;
     transition: background 0.2s;
 }
@@ -2646,7 +2646,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
     cursor: pointer;
 }
@@ -2712,7 +2712,7 @@
 }
 
 .sim-result-label {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
@@ -2742,7 +2742,7 @@
 .sim-rec-priority {
     padding: 2px var(--space-2);
     border-radius: var(--radius-control);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     text-transform: uppercase;
     flex-shrink: 0;
@@ -2764,7 +2764,7 @@
 }
 
 .sim-rec-text {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
     line-height: 1.4;
 }
@@ -2786,7 +2786,7 @@
 }
 
 .sim-shopping-item span {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
@@ -2864,7 +2864,7 @@
 
 .simulator-header h2 {
     margin: 0;
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--slate-12);
 }
@@ -2873,7 +2873,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     cursor: pointer;
     padding: 0;
     width: 32px;
@@ -2936,7 +2936,7 @@
     border: 1px solid var(--bg-hover);
     border-radius: var(--radius-control);
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .sim-space-controls input:focus {
@@ -3006,12 +3006,12 @@
 
 .sim-item-name {
     flex: 1;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-12);
 }
 
 .sim-item-position {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-right: var(--space-2);
 }
@@ -3022,7 +3022,7 @@
     border: 1px solid var(--alert-border);
     border-radius: var(--radius-control);
     color: var(--alert);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     cursor: pointer;
     transition: all 0.2s;
 }
@@ -3042,7 +3042,7 @@
 .sim-gdop-controls label {
     display: flex;
     align-items: center;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-muted);
     gap: 6px;
 }
@@ -3088,7 +3088,7 @@
     border: 1px solid var(--bg-hover);
     border-radius: var(--radius-control);
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: all 0.2s;
 }
@@ -3139,7 +3139,7 @@
 }
 
 .sim-result-label {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-muted);
 }
 
@@ -3180,7 +3180,7 @@
 .sim-rec-priority {
     padding: 2px 6px;
     border-radius: var(--radius-control);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     text-transform: uppercase;
 }
@@ -3202,7 +3202,7 @@
 
 .sim-rec-text {
     flex: 1;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-12);
 }
 
@@ -3220,7 +3220,7 @@
     padding: var(--space-2) var(--space-3);
     background: var(--slate-1);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-12);
 }
 
@@ -3243,7 +3243,7 @@
     display: flex;
     align-items: center;
     margin-bottom: var(--space-2);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
 }
 
@@ -3276,7 +3276,7 @@
 }
 
 .gdop-stat-item {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
 }
 
diff --git a/dashboard/css/quick-actions.css b/dashboard/css/quick-actions.css
index f7154e4..09bd9c6 100644
--- a/dashboard/css/quick-actions.css
+++ b/dashboard/css/quick-actions.css
@@ -109,7 +109,7 @@
 
 .context-title {
     flex: 1;
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 600;
     color: var(--context-text, var(--slate-12));
     white-space: nowrap;
@@ -161,7 +161,7 @@
 }
 
 .item-icon {
-    font-size: 18px;
+    font-size: var(--text-xl);
     flex-shrink: 0;
     width: 24px;
     text-align: center;
@@ -273,7 +273,7 @@
     .follow-mode-indicator {
         bottom: 100px;
         padding: var(--space-3) var(--space-6);
-        font-size: 15px;
+        font-size: var(--text-md);
     }
 }
 
diff --git a/dashboard/css/replay.css b/dashboard/css/replay.css
index 2c2980f..baead9d 100644
--- a/dashboard/css/replay.css
+++ b/dashboard/css/replay.css
@@ -91,7 +91,7 @@
     border-radius: var(--radius-control);
     color: var(--slate-11);
     padding: 6px 10px;
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: all 0.2s ease;
 }
@@ -179,7 +179,7 @@
     border-radius: var(--radius-card);
     color: var(--ok);
     padding: var(--space-2) 14px;
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -243,7 +243,7 @@
 
 .replay-tuning-header h2 {
     margin: 0;
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--slate-12);
 }
@@ -252,7 +252,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 1;
     cursor: pointer;
     padding: 0;
@@ -286,7 +286,7 @@
 
 .tuning-param label {
     display: block;
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     color: var(--slate-11);
     margin-bottom: var(--space-2);
@@ -340,7 +340,7 @@
 
 .tuning-value {
     font-family: var(--font-mono);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--blue-10);
     float: right;
 }
diff --git a/dashboard/css/security.css b/dashboard/css/security.css
index 7729c05..7c60020 100644
--- a/dashboard/css/security.css
+++ b/dashboard/css/security.css
@@ -12,7 +12,7 @@
     border-radius: var(--radius-modal);
     cursor: pointer;
     transition: background 0.2s;
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
 }
 
@@ -149,7 +149,7 @@
     background: none;
     border: none;
     color: var(--text-muted);
-    font-size: 24px;
+    font-size: var(--text-3xl);
     line-height: 1;
     cursor: pointer;
     padding: 0;
@@ -173,7 +173,7 @@
 
 .security-dialog-prompt {
     margin: 0;
-    font-size: 15px;
+    font-size: var(--text-md);
     color: var(--slate-11);
     line-height: var(--lh-body);
 }
@@ -188,7 +188,7 @@
 
 .security-dialog-warning p {
     margin: 0;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--warn);
 }
 
@@ -212,7 +212,7 @@
 
 .stat-label {
     display: block;
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -221,7 +221,7 @@
 
 .stat-value {
     display: block;
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--slate-12);
 }
@@ -355,7 +355,7 @@
 .alert-banner-btn {
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     cursor: pointer;
     border: none;
@@ -397,7 +397,7 @@
     border-radius: var(--radius-control);
     font-size: var(--text-xs);
     font-weight: 600;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     z-index: 150;
     display: none;
     animation: security-pulse 2s ease-in-out infinite;
@@ -465,7 +465,7 @@
     color: var(--text-on-accent);
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     display: none;
     align-items: center;
     gap: 10px;
diff --git a/dashboard/css/simple.css b/dashboard/css/simple.css
index 9267ebf..b5549ee 100644
--- a/dashboard/css/simple.css
+++ b/dashboard/css/simple.css
@@ -77,7 +77,7 @@ body.simple-mode {
     border: none;
     padding: 6px var(--space-3);
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     color: var(--simple-text-secondary);
     cursor: pointer;
@@ -132,7 +132,7 @@ body.simple-mode {
 }
 
 .simple-alert-banner .alert-icon {
-    font-size: 24px;
+    font-size: var(--text-3xl);
     flex-shrink: 0;
 }
 
@@ -159,7 +159,7 @@ body.simple-mode {
     height: 28px;
     border-radius: 50%;
     cursor: pointer;
-    font-size: 18px;
+    font-size: var(--text-xl);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -200,12 +200,12 @@ body.simple-mode {
 }
 
 .simple-morning-briefing .briefing-greeting {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
 }
 
 .simple-morning-briefing .briefing-date {
-    font-size: 13px;
+    font-size: var(--text-sm);
     opacity: 0.8;
 }
 
@@ -222,15 +222,15 @@ body.simple-mode {
 }
 
 .simple-morning-briefing .section-label {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     opacity: 0.7;
     margin-bottom: var(--space-1);
 }
 
 .simple-morning-briefing .section-value {
-    font-size: 15px;
+    font-size: var(--text-md);
     font-weight: 500;
 }
 
@@ -340,7 +340,7 @@ body.simple-mode {
 }
 
 .simple-room-card .room-name {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--simple-text-primary);
 }
@@ -349,7 +349,7 @@ body.simple-mode {
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     padding: var(--space-1) 10px;
     border-radius: var(--radius-modal);
@@ -390,7 +390,7 @@ body.simple-mode {
 }
 
 .simple-room-card .room-activity {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--simple-text-secondary);
     margin-bottom: var(--space-2);
 }
@@ -426,7 +426,7 @@ body.simple-mode {
 }
 
 .simple-activity-feed .feed-title {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--simple-text-primary);
 }
@@ -441,7 +441,7 @@ body.simple-mode {
     border: none;
     padding: 6px var(--space-3);
     border-radius: var(--radius-card);
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 500;
     color: var(--simple-text-secondary);
     cursor: pointer;
@@ -460,18 +460,18 @@ body.simple-mode {
 }
 
 .simple-activity-feed .feed-empty-icon {
-    font-size: 48px;
+    font-size: var(--text-5xl);
     margin-bottom: var(--space-3);
     opacity: 0.5;
 }
 
 .simple-activity-feed .feed-empty-text {
-    font-size: 15px;
+    font-size: var(--text-md);
     margin-bottom: var(--space-1);
 }
 
 .simple-activity-feed .feed-empty-subtext {
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .simple-activity-feed .activity-list {
@@ -536,7 +536,7 @@ body.simple-mode {
 }
 
 .simple-activity-feed .activity-description {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--simple-text-secondary);
     margin-bottom: var(--space-1);
 }
@@ -614,11 +614,11 @@ body.simple-mode {
 }
 
 .simple-quick-actions .action-icon {
-    font-size: 24px;
+    font-size: var(--text-3xl);
 }
 
 .simple-quick-actions .action-label {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     font-weight: 500;
     color: var(--simple-text-secondary);
     text-align: center;
@@ -630,7 +630,7 @@ body.simple-mode {
     right: 4px;
     background: var(--simple-accent-red);
     color: var(--text-on-accent);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 600;
     padding: 2px 6px;
     border-radius: var(--radius-card);
@@ -656,7 +656,7 @@ body.simple-mode {
 }
 
 .simple-sleep-summary .sleep-title {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     display: flex;
     align-items: center;
@@ -664,7 +664,7 @@ body.simple-mode {
 }
 
 .simple-sleep-summary .sleep-date {
-    font-size: 13px;
+    font-size: var(--text-sm);
     opacity: 0.8;
 }
 
@@ -681,9 +681,9 @@ body.simple-mode {
 }
 
 .simple-sleep-summary .metric-label {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: var(--ls-wide);
     opacity: 0.7;
     margin-bottom: var(--space-1);
 }
@@ -694,7 +694,7 @@ body.simple-mode {
 }
 
 .simple-sleep-summary .metric-unit {
-    font-size: 13px;
+    font-size: var(--text-sm);
     opacity: 0.8;
     margin-left: 2px;
 }
@@ -837,7 +837,7 @@ body.simple-mode {
 }
 
 .simple-room-modal .stat-value {
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--simple-text-primary);
 }
@@ -871,7 +871,7 @@ body.simple-mode {
 
 .simple-room-modal .history-time {
     color: var(--simple-text-secondary);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .simple-room-modal .history-event {
@@ -932,7 +932,7 @@ body.simple-mode {
 
 .simple-security-toggle .security-status {
     text-align: center;
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--simple-text-secondary);
     margin-top: var(--space-2);
 }
@@ -962,7 +962,7 @@ body.simple-mode {
 }
 
 .simple-loading-text {
-    font-size: 15px;
+    font-size: var(--text-md);
 }
 
 /* ===== Responsive Design ===== */
diff --git a/dashboard/css/simulator.css b/dashboard/css/simulator.css
index bb3ed7a..37738cf 100644
--- a/dashboard/css/simulator.css
+++ b/dashboard/css/simulator.css
@@ -55,7 +55,7 @@
 
 .simulator-header h2 {
     margin: 0;
-    font-size: 18px;
+    font-size: var(--text-xl);
     font-weight: 600;
     color: var(--text-on-accent);
 }
@@ -113,7 +113,7 @@
     display: flex;
     align-items: center;
     gap: var(--space-1);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
@@ -124,7 +124,7 @@
     border: 1px solid var(--slate-6);
     border-radius: var(--radius-control);
     color: var(--text-on-accent);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .sim-space-controls input[type="number"]:focus {
@@ -182,7 +182,7 @@
     border: 1px solid var(--slate-6);
     border-radius: var(--radius-control);
     color: var(--slate-11);
-    font-size: 13px;
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s, color 0.2s;
 }
@@ -245,12 +245,12 @@
 }
 
 .sim-item-name {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-on-accent);
 }
 
 .sim-item-position {
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted);
     margin-left: var(--space-2);
 }
@@ -259,7 +259,7 @@
     background: none;
     border: none;
     color: var(--alert);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     cursor: pointer;
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-control);
@@ -287,7 +287,7 @@
     border: 1px solid var(--slate-6);
     border-radius: var(--radius-control);
     color: var(--text-on-accent);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 /* ============================================
@@ -406,12 +406,12 @@
 }
 
 .sim-result-label {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
 .sim-result-value {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--text-on-accent);
     font-weight: 600;
 }
@@ -448,7 +448,7 @@
 }
 
 .sim-rec-text {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
     flex: 1;
 }
@@ -471,7 +471,7 @@
 }
 
 .sim-shopping-item span {
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--slate-11);
 }
 
diff --git a/dashboard/css/sleep.css b/dashboard/css/sleep.css
index 982d836..d207b90 100644
--- a/dashboard/css/sleep.css
+++ b/dashboard/css/sleep.css
@@ -52,7 +52,7 @@
     background: none;
     border: none;
     color: var(--text-muted, var(--text-muted));
-    font-size: 18px;
+    font-size: var(--text-xl);
     cursor: pointer;
     padding: 2px 6px;
     line-height: 1;
@@ -71,13 +71,13 @@
 }
 
 .sleep-summary-body > div {
-    font-size: 13px;
+    font-size: var(--text-sm);
     line-height: var(--lh-body);
 }
 
 .sleep-summary-duration {
     font-weight: 600;
-    font-size: 18px;
+    font-size: var(--text-xl);
     margin-bottom: var(--space-1);
 }
 
@@ -186,7 +186,7 @@
 }
 
 .sleep-panel-section h4 {
-    font-size: 13px;
+    font-size: var(--text-sm);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -260,7 +260,7 @@
 
 .sleep-stat-label {
     display: block;
-    font-size: 11px;
+    font-size: var(--text-2xs);
     color: var(--text-muted, var(--text-muted));
     margin-bottom: var(--space-1);
 }
@@ -287,7 +287,7 @@
     padding: var(--space-2) 10px;
     background: var(--bg-card, var(--bg-card));
     border-radius: var(--radius-control);
-    font-size: 13px;
+    font-size: var(--text-sm);
 }
 
 .sleep-history-date {
@@ -308,6 +308,6 @@
 .sleep-history-empty {
     text-align: center;
     color: var(--text-muted, var(--text-muted));
-    font-size: 13px;
+    font-size: var(--text-sm);
     padding: 24px 0;
 }
diff --git a/dashboard/css/timeline.css b/dashboard/css/timeline.css
index 8df1658..864c20c 100644
--- a/dashboard/css/timeline.css
+++ b/dashboard/css/timeline.css
@@ -98,9 +98,9 @@
 }
 
 .timeline-filter-section-title {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--ls-wide);
   color: var(--text-muted, var(--text-muted));
   margin: var(--space-2);
 }
@@ -178,7 +178,7 @@
   color: var(--text-primary, var(--slate-11));
   padding: 6px 10px;
   border-radius: var(--radius-control);
-  font-size: 13px;
+  font-size: var(--text-sm);
   min-width: 100px;
   cursor: pointer;
   transition: border-color 0.2s;
@@ -200,7 +200,7 @@
   color: var(--text-primary, var(--slate-11));
   padding: 6px 10px 6px var(--space-8);
   border-radius: var(--radius-control);
-  font-size: 13px;
+  font-size: var(--text-sm);
   min-width: 200px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -361,7 +361,7 @@
 
 /* Event Details */
 .timeline-event-details {
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--text-secondary, var(--text-secondary));
   margin-top: 6px;
   line-height: 1.4;
@@ -386,7 +386,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-1);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--text-muted, var(--text-muted));
   transition: all 0.2s;
 }
@@ -439,7 +439,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-1);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--text-muted, var(--text-muted));
   transition: all 0.2s;
 }
@@ -460,7 +460,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-1);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--accent-color, var(--blue-9));
   transition: all 0.2s;
 }
@@ -587,7 +587,7 @@
 }
 
 .timeline-empty p {
-  font-size: 13px;
+  font-size: var(--text-sm);
   margin: 0;
   max-width: 300px;
 }
@@ -607,7 +607,7 @@
   border-radius: var(--radius-control);
   padding: var(--space-2) var(--space-4);
   color: var(--text-secondary, var(--text-secondary));
-  font-size: 13px;
+  font-size: var(--text-sm);
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -627,7 +627,7 @@
 .timeline-count {
   background: var(--accent-color, var(--blue-9));
   color: var(--text-on-accent);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   padding: 2px 6px;
   border-radius: var(--radius-card);
@@ -711,8 +711,8 @@
   margin-left: var(--space-2);
   background: color-mix(in srgb, var(--blue-9) 20%, transparent);
   color: var(--blue-11);
-  border-radius: 9999px;
-  font-size: 11px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-2xs);
   font-weight: 600;
   font-family: var(--font-mono, ui-monospace, monospace);
   white-space: nowrap;
@@ -742,12 +742,12 @@
 }
 
 .timeline-event.secondary .timeline-event-title {
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--text-secondary, var(--text-secondary));
 }
 
 .timeline-event.secondary .timeline-event-meta {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--text-muted, var(--text-muted));
 }
 
@@ -1028,7 +1028,7 @@
 }
 
 .sidebar-timeline-event-title {
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--text-primary, var(--slate-11));
   line-height: 1.3;
@@ -1041,7 +1041,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--text-muted, var(--text-muted));
 }
 
@@ -1244,8 +1244,8 @@
   margin-left: var(--space-2);
   background: color-mix(in srgb, var(--blue-9) 20%, transparent);
   color: var(--blue-11);
-  border-radius: 9999px;
-  font-size: 11px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-2xs);
   font-weight: 600;
   font-family: var(--font-mono, ui-monospace, monospace);
   white-space: nowrap;
diff --git a/dashboard/css/tokens.css b/dashboard/css/tokens.css
index ee980b4..14b8c70 100644
--- a/dashboard/css/tokens.css
+++ b/dashboard/css/tokens.css
@@ -81,11 +81,19 @@
   --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
 
+  --text-3xs:  10px;
+  --text-2xs:  11px;
   --text-xs:   12px;
   --text-sm:   14px;
   --text-base: 16px;
+  --text-md:   15px;
   --text-lg:   20px;
+  --text-xl:   18px;
   --text-2xl:  28px;
+  --text-3xl:  24px;
+  --text-4xl:  32px;
+  --text-5xl:  48px;
+  --text-6xl:  64px;
 
   --lh-body:    1.5;
   --lh-heading: 1.2;
@@ -108,6 +116,7 @@
   --radius-control: 6px;
   --radius-card:    10px;
   --radius-modal:   16px;
+  --radius-pill:    9999px;
 
   /* ── Shadows (flat elevation, no drop shadows per §8e) ── */
   --shadow:     0 2px 8px rgba(0, 0, 0, 0.3);
@@ -174,4 +183,18 @@
 
   /* ── Green glow dot ── */
   --ok-glow:           rgba(70, 167, 88, 0.5);
+
+  /* ── Letter-spacing ── */
+  --ls-wide: 1px;
+
+  /* ── Component sizes ── */
+  --size-icon-sm:   16px;
+  --size-icon:      18px;
+  --size-icon-md:   20px;
+  --size-icon-lg:   24px;
+  --size-icon-xl:   28px;
+  --size-icon-2xl:  32px;
+  --size-touch:     44px;
+  --size-header:    56px;
+  --size-sidebar:   360px;
 }
diff --git a/dashboard/css/troubleshoot.css b/dashboard/css/troubleshoot.css
index 09b5068..3da7115 100644
--- a/dashboard/css/troubleshoot.css
+++ b/dashboard/css/troubleshoot.css
@@ -74,7 +74,7 @@
     border-radius: 50%;
     background: var(--warn-muted);
     color: var(--warn);
-    font-size: 10px;
+    font-size: var(--text-3xs);
     font-weight: 700;
     display: flex;
     align-items: center;
@@ -99,7 +99,7 @@
 
 .troubleshoot-more summary {
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     cursor: pointer;
     padding: 2px 0;
 }
@@ -117,7 +117,7 @@
     background: var(--alert-bg);
     border: 1px solid var(--alert-border);
     color: var(--alert);
-    font-size: 11px;
+    font-size: var(--text-2xs);
     padding: 2px var(--space-2);
     border-radius: var(--radius-control);
     cursor: pointer;
@@ -140,7 +140,7 @@
     display: flex;
     align-items: center;
     gap: var(--space-2);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--warn);
     z-index: 150;
     max-width: 600px;
@@ -197,7 +197,7 @@
 
 .troubleshoot-list {
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: var(--text-sm);
     line-height: 1.8;
     padding-left: var(--space-5);
     margin-bottom: var(--space-4);
@@ -235,7 +235,7 @@
 
 .spaxel-tooltip-text {
     color: var(--slate-12);
-    font-size: 13px;
+    font-size: var(--text-sm);
     line-height: 1.4;
 }
 
@@ -326,7 +326,7 @@
 }
 
 .post-cal-card h3 {
-    font-size: 18px;
+    font-size: var(--text-xl);
     color: var(--slate-12);
     margin-bottom: var(--space-2);
 }
@@ -340,7 +340,7 @@
 
 .post-cal-expect {
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: var(--text-sm);
     line-height: var(--lh-body);
     margin-bottom: var(--space-4);
 }
diff --git a/dashboard/js/replay.js b/dashboard/js/replay.js
index 832e947..8c5d3ed 100644
--- a/dashboard/js/replay.js
+++ b/dashboard/js/replay.js
@@ -320,6 +320,25 @@
         });
     }
 
+    function fetchSessionBlobs(sessionId) {
+        if (!sessionId) return Promise.resolve();
+
+        return fetch('/api/replay/session/' + encodeURIComponent(sessionId))
+            .then(function(res) {
+                if (!res.ok) throw new Error('Failed to fetch session state');
+                return res.json();
+            })
+            .then(function(data) {
+                // Feed replay blobs to 3D scene
+                if (data.blobs && data.blobs.length > 0 && window.Viz3D && Viz3D.updateReplayBlobs) {
+                    Viz3D.updateReplayBlobs(data.blobs, data.timestamp_ms);
+                }
+            })
+            .catch(function(err) {
+                console.warn('[Replay] Failed to fetch session blobs:', err);
+            });
+    }
+
     function tuneParams(params) {
         if (!state.activeSessionId) return Promise.resolve();
 
@@ -780,8 +799,12 @@
                 Viz3D.enterReplayMode();
             }
 
-            console.log('[Replay] Jump-to-time session:', data.session_id);
-            return data;
+            // Fetch session state (includes blobs at the seeked timestamp)
+            // so the 3D scene immediately shows the correct state
+            return fetchSessionBlobs(data.session_id).then(function() {
+                console.log('[Replay] Jump-to-time session:', data.session_id);
+                return data;
+            });
         });
     }
 
diff --git a/dashboard/live.html b/dashboard/live.html
index e409bf9..5f6179b 100644
--- a/dashboard/live.html
+++ b/dashboard/live.html
@@ -1493,18 +1493,12 @@
         #portal-editor-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
         #portal-editor-btn.active { background: var(--warn-muted); color: var(--warn); border-color: var(--warn); }
 
-        /* Portal editor panel */
+        /* Portal editor panel — positioning in layout.css with responsive breakpoints */
         #portal-editor-panel {
-            position: fixed;
-            top: 60px;
-            left: 580px;
-            width: 240px;
             background: var(--live-status-bg);
             border: 1px solid var(--bg-hover);
             border-radius: 8px;
             padding: 16px;
-            z-index: 100;
-            display: none;
             backdrop-filter: blur(10px);
         }
 
@@ -1735,17 +1729,11 @@
             color: var(--warn);
         }
 
-        /* Room editor panel */
+        /* Room editor panel — positioning in layout.css with responsive breakpoints */
         #room-editor-panel {
-            position: fixed;
-            top: 60px;
-            left: 320px;
-            width: 240px;
             background: var(--live-status-bg);
             border-radius: 8px;
             padding: 16px;
-            z-index: 100;
-            display: none;
         }
 
         #room-editor-panel h3 {
@@ -1808,16 +1796,11 @@
             background: var(--blue-10);
         }
 
-        /* GDOP legend */
+        /* GDOP legend — positioning in layout.css with responsive breakpoints */
         #gdop-legend {
-            position: fixed;
-            bottom: 20px;
-            left: 320px;
             background: var(--live-status-bg);
             border-radius: var(--radius-control);
             padding: 10px 14px;
-            z-index: 100;
-            display: none;
             font-size: 11px;
         }
 
@@ -2144,11 +2127,8 @@
             cursor: not-allowed;
         }
 
-        /* ===== Security Mode Indicator ===== */
+        /* ===== Security Mode Indicator — positioning in layout.css ===== */
         #security-mode-indicator {
-            position: fixed;
-            top: 45px;
-            right: 20px;
             background: var(--alert);
             color: var(--text-on-accent);
             padding: 6px 12px;
@@ -2156,7 +2136,6 @@
             font-size: var(--text-xs);
             font-weight: 600;
             letter-spacing: 1px;
-            z-index: 150;
             display: none;
             animation: security-pulse 2s ease-in-out infinite;
         }