feat: unify trading workspace visual system

app/frontend/shared/components/cards.css

@@ -201,13 +201,13 @@
 }
 
 .card {
-  background: var(--card);
+  background: var(--card-bg);
 
-  border: 1px solid var(--line);
+  border: 1px solid var(--card-border);
 
-  border-radius: var(--radius);
+  border-radius: var(--card-radius);
 
-  box-shadow: var(--shadow);
+  box-shadow: var(--card-shadow);
 }
 
 .card-h {
@@ -219,19 +219,21 @@
 
   padding: 11px 14px;
 
-  border-bottom: 1px solid var(--line-soft);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .card-h h3 {
-  font-size: 14px;
+  color: var(--text-primary);
 
-  font-weight: 700;
+  font-size: var(--font-size-card-title);
+
+  font-weight: var(--font-weight-bold);
 }
 
 .card-h .sub {
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 
-  color: var(--faint);
+  color: var(--text-tertiary);
 }
 
 .card-h .right {
@@ -285,11 +287,11 @@
 }
 
 .tag.neu {
-  background: rgb(243, 244, 246);
+  background: var(--surface-muted);
 
-  color: rgb(75, 85, 99);
+  color: var(--text-secondary);
 
-  border-color: rgb(229, 231, 235);
+  border-color: var(--border);
 }
 
 .tag.red {
@@ -313,7 +315,7 @@
 .tag.b3 {
   background: var(--blue);
 
-  color: rgb(255, 255, 255);
+  color: var(--text-inverse);
 }
 
 .field {
@@ -335,9 +337,9 @@
 .src {
   display: inline-block;
 
-  background: rgb(243, 244, 246);
+  background: var(--surface-muted);
 
-  color: rgb(107, 114, 128);
+  color: var(--text-secondary);
 
   border-radius: 4px;
 
@@ -435,7 +437,7 @@
 
   background: var(--up-soft);
 
-  border: 1px solid rgb(245, 207, 201);
+  border: 1px solid var(--up);
 
   border-radius: 10px;
 
@@ -467,7 +469,7 @@
 .phase-info .sum {
   font-size: 12.5px;
 
-  color: rgb(55, 65, 81);
+  color: var(--text-primary);
 
   line-height: 1.7;
 }
@@ -651,19 +653,19 @@
 }
 
 .tier.t4 .lab {
-  background: linear-gradient(90deg, rgb(253, 241, 239), rgb(255, 255, 255));
+  background: var(--up-soft);
 }
 
 .tier.t3 .lab {
-  background: linear-gradient(90deg, rgb(253, 246, 236), rgb(255, 255, 255));
+  background: var(--warning-soft);
 }
 
 .tier.t2 .lab {
-  background: linear-gradient(90deg, rgb(236, 247, 241), rgb(255, 255, 255));
+  background: var(--down-soft);
 }
 
 .tier.t1 .lab {
-  background: linear-gradient(90deg, rgb(238, 244, 253), rgb(255, 255, 255));
+  background: var(--action-soft);
 }
 
 .tier.gap .cards {
@@ -797,7 +799,7 @@
 
   height: 8px;
 
-  background: rgb(243, 244, 246);
+  background: var(--surface-muted);
 
   border-radius: 4px;
 
@@ -875,7 +877,7 @@
 
   height: 9px;
 
-  background: rgb(240, 242, 245);
+  background: var(--surface-muted);
 
   border-radius: 5px;
 
@@ -887,7 +889,7 @@
 
   height: 100%;
 
-  background: linear-gradient(90deg,#93b4f5,var(--blue));
+  background: var(--blue);
 
   border-radius: 5px;
 }
@@ -913,7 +915,7 @@
 }
 
 .perf-card {
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   border: 1px solid var(--line);
 
@@ -939,7 +941,7 @@
 .perf-card .bar {
   height: 6px;
 
-  background: rgb(240, 242, 245);
+  background: var(--surface-muted);
 
   border-radius: 3px;
 
@@ -973,7 +975,7 @@
 }
 
 .width-bar .dn {
-  background: rgb(22, 163, 74);
+  background: var(--down);
 }
 
 .width-legend {
@@ -1011,7 +1013,7 @@
 }
 
 .model:hover {
-  background: rgb(248, 250, 255);
+  background: var(--table-hover);
 }
 
 .model .r1 {