refactor(ui): tokenize legacy app css colors

web/src/App.css

@@ -1,11 +1,11 @@
 :root {
-  --bg-dark: #0a0b0d;
+  --bg-dark: var(--background);
-  --bg-card: #14151a;
+  --bg-card: var(--card);
-  --accent: #00ff88;
+  --accent: var(--bl-success);
-  --accent-down: #ff3366;
+  --accent-down: var(--bl-danger);
-  --text-main: #ffffff;
+  --text-main: var(--foreground);
-  --text-dim: #929292;
+  --text-dim: var(--muted-foreground);
-  --border: rgba(255, 255, 255, 0.1);
+  --border: var(--bl-border);
   --header-height: 120px;
 }
 
@@ -47,7 +47,7 @@ body {
   font-size: 1.25rem;
   font-weight: 700;
   margin: 0;
-  background: linear-gradient(90deg, #fff, var(--accent));
+  background: linear-gradient(90deg, var(--text-main), var(--accent));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -73,7 +73,7 @@ body {
 }
 
 .tab-navigation button:hover {
-  color: #fff;
+  color: var(--text-main);
 }
 
 .tab-navigation button.active {
@@ -377,7 +377,8 @@ body {
 }
 
 .metric .value {
-  color: #fff;
+  font-size: 1.5rem;
+  color: var(--text-main);
   font-weight: 600;
 }
 
@@ -401,14 +402,14 @@ body {
 
 /* Tables (Premium Pro Style) */
 .table-container {
-  background: linear-gradient(145deg, rgba(20, 21, 26, 0.8), rgba(10, 11, 13, 0.9));
+  background: linear-gradient(145deg, color-mix(in oklab, var(--bg-card) 86%, transparent), color-mix(in oklab, var(--bg-dark) 92%, transparent));
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border);
   border-radius: 20px;
   overflow: hidden;
   margin-bottom: 32px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--card-shadow);
   position: relative;
 }
 
@@ -419,7 +420,7 @@ body {
   left: 0;
   right: 0;
   height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
+  background: linear-gradient(90deg, transparent, var(--bl-success-muted), transparent);
 }
 
 .pro-table {
@@ -431,20 +432,20 @@ body {
 
 .pro-table th {
   padding: 20px 24px;
-  background: rgba(255, 255, 255, 0.02);
+  background: color-mix(in oklab, var(--text-main) 2%, transparent);
   font-size: 0.7rem;
   font-weight: 800;
   text-transform: uppercase;
   color: var(--text-dim);
   letter-spacing: 0.15em;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--border);
 }
 
 .pro-table td {
   padding: 16px 24px;
   font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.8);
+  color: color-mix(in oklab, var(--text-main) 80%, transparent);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid color-mix(in oklab, var(--text-main) 3%, transparent);
   transition: all 0.2s ease;
 }
 
@@ -453,13 +454,13 @@ body {
 }
 
 .pro-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.02);
+  background: color-mix(in oklab, var(--text-main) 2%, transparent);
   transform: scale(1.002);
 }
 
 .pro-table tbody tr:hover td {
-  color: #fff;
+  color: var(--text-main);
-  border-bottom-color: rgba(255, 255, 255, 0.1);
+  border-bottom-color: var(--border);
 }
 
 .pro-table tr:last-child td {
@@ -475,7 +476,7 @@ body {
 
 .bold {
   font-weight: 700;
-  color: #fff;
+  color: var(--text-main);
 }
 
 .fade {
@@ -582,7 +583,7 @@ body {
 .dot {
   width: 12px;
   height: 12px;
-  background: #555;
+  background: var(--muted-foreground);
   border-radius: 50%;
 }
 
@@ -594,8 +595,8 @@ body {
 .kill-switch {
   width: 100%;
   padding: 16px;
-  background: #ff3366;
+  background: var(--accent-down);
-  color: #fff;
+  color: var(--primary-foreground);
   border: none;
   border-radius: 8px;
   font-weight: 800;
@@ -610,7 +611,7 @@ body {
 }
 
 .env-vars {
-  background: #000;
+  background: var(--bg-dark);
   padding: 16px;
   border-radius: 8px;
   font-family: monospace;