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 {

app/frontend/shared/components/controls.css

@@ -87,7 +87,7 @@ textarea:focus-visible {
 }
 
 .sidebar-collapse-button:hover {
-  background: rgb(241, 244, 247);
+  background: var(--control-hover);
 
   color: var(--text-primary);
 }
@@ -203,7 +203,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 .icon-button:hover {
   border-color: rgb(148, 181, 216);
 
-  background: rgb(248, 251, 255);
+  background: var(--surface-selected);
 
   color: var(--action-hover);
 
@@ -454,7 +454,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   min-height: var(--control-height);
 
-  border-color: var(--border-strong);
+  border-color: var(--control-border);
 
   border-radius: var(--radius-md);
 
@@ -462,13 +462,13 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   padding: 0px 12px;
 
-  background: var(--surface-raised);
+  background: var(--control-surface);
 
-  color: var(--xb-gray-700);
+  color: var(--text-primary);
 
-  font-size: 12px;
+  font-size: var(--font-size-label);
 
-  font-weight: 620;
+  font-weight: var(--font-weight-semibold);
 
   transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
 }
@@ -476,17 +476,17 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 .button:hover {
   box-shadow: none;
 
-  border-color: rgb(184, 199, 232);
+  border-color: var(--color-action-line);
 
   color: var(--primary);
 
-  background: var(--xb-gray-25);
+  background: var(--control-hover);
 }
 
 .button:active {
   box-shadow: none;
 
-  transform: translateY(1px);
+  transform: scale(.98);
 }
 
 .button.primary {
@@ -494,7 +494,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   background: var(--primary);
 
-  color: rgb(255, 255, 255);
+  color: var(--on-action);
 }
 
 .button.primary:hover {
@@ -502,7 +502,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   background: var(--primary-hover);
 
-  color: rgb(255, 255, 255);
+  color: var(--on-action);
 }
 
 .form-field input {
@@ -520,7 +520,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   border-radius: var(--radius-md);
 
-  background: var(--surface-raised);
+  background: var(--control-surface);
 
   box-shadow: none;
 }
@@ -531,7 +531,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   border-radius: var(--radius-md);
 
-  background: var(--surface-raised);
+  background: var(--control-surface);
 
   box-shadow: none;
 }
@@ -579,7 +579,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   border-radius: var(--radius-md);
 
-  background: var(--surface-raised);
+  background: var(--control-surface);
 
   box-shadow: none;
 }
@@ -588,9 +588,9 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 .form-field select:focus,
 .form-field textarea:focus,
 .search-field:focus-within {
-  border-color: rgb(142, 172, 239);
+  border-color: var(--action);
 
-  box-shadow: rgba(53, 106, 230, 0.1) 0px 0px 0px 3px;
+  box-shadow: 0 0 0 3px var(--focus-ring);
 }
 
 @media (max-width: 720px) {
@@ -682,7 +682,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
 
   border-radius: 0px;
 
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   color: var(--r2-sub);
 
@@ -714,7 +714,7 @@ body.sidebar-collapsed .sidebar-collapse-button {
 
   border-radius: 7px;
 
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   color: rgb(75, 85, 99);
 
@@ -732,7 +732,7 @@ body.sidebar-collapsed .sidebar-collapse-button {
 
   border-radius: 7px;
 
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   color: rgb(55, 65, 81);
 
@@ -748,7 +748,7 @@ body.sidebar-collapsed .sidebar-collapse-button {
 
   background: var(--r2-blue);
 
-  color: rgb(255, 255, 255);
+  color: var(--text-inverse);
 }
 
 @media (max-width: 1023px) and (min-width: 721px) {
@@ -830,7 +830,7 @@ textarea {
 }
 
 .seg button.on {
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   color: var(--ink);
 
@@ -922,7 +922,7 @@ textarea {
 .method button.on {
   background: var(--blue);
 
-  color: rgb(255, 255, 255);
+  color: var(--text-inverse);
 }
 
 .factor input[type="range"] {

app/frontend/shared/components/dialogs.css

@@ -40,7 +40,7 @@
 
   border-radius: 7px;
 
-  background: rgb(250, 251, 252);
+  background: var(--surface-subtle);
 }
 
 @keyframes overlay-enter {
@@ -266,7 +266,7 @@
 
   background: var(--market-up);
 
-  color: rgb(255, 255, 255);
+  color: var(--text-inverse);
 
   font-size: 9px;
 
@@ -977,7 +977,7 @@
 
   border-radius: 7px;
 
-  background: rgb(250, 251, 252);
+  background: var(--surface-subtle);
 }
 
 .global-search-empty {
@@ -1193,7 +1193,7 @@
 
   bottom: 0px;
 
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   z-index: 95;
 

app/frontend/shared/components/feedback.css

@@ -132,7 +132,7 @@
 
   background: rgb(33, 49, 60);
 
-  color: rgb(255, 255, 255);
+  color: var(--text-inverse);
 
   box-shadow: var(--shadow);
 
@@ -364,14 +364,10 @@
 @keyframes stage18-dialog-enter {
   0% {
     opacity: 0;
-
-    transform: translateY(7px) scale(0.992);
   }
 
   100% {
     opacity: 1;
-
-    transform: translateY(0px) scale(1);
   }
 }
 

app/frontend/shared/components/navigation.css

@@ -114,7 +114,7 @@
 
   border-radius: 8px;
 
-  background: rgb(243, 244, 246);
+  background: var(--surface-muted);
 }
 
 .redesigned-page-head .segment {
@@ -134,7 +134,7 @@
 }
 
 .redesigned-page-head .segment.active {
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   color: var(--r2-ink);
 
@@ -204,7 +204,7 @@
 .seg {
   display: inline-flex;
 
-  background: rgb(243, 244, 246);
+  background: var(--surface-muted);
 
   border-radius: 8px;
 

app/frontend/shared/components/tables.css

@@ -6,7 +6,7 @@
 }
 
 .data-table th[data-sort]:hover {
-  background: rgb(227, 237, 242);
+  background: var(--surface-hover);
 
   color: var(--blue-dark);
 }
@@ -76,7 +76,7 @@
 }
 
 .data-table:not(#limitTable) th[data-auto-sort]:hover {
-  background: rgb(227, 237, 242);
+  background: var(--surface-hover);
 
   color: var(--action-hover);
 }
@@ -110,7 +110,7 @@
 }
 
 .data-table td {
-  background: var(--surface);
+  background: transparent;
 
   text-align: left;
 
@@ -120,7 +120,7 @@
 
   border-right: 0px;
 
-  border-bottom: 1px solid rgb(232, 237, 241);
+  border-bottom: 1px solid var(--border-subtle);
 
   line-height: 1.4;
 }
@@ -138,23 +138,23 @@
 
   border-right: 0px;
 
-  border-bottom: 1px solid rgb(232, 237, 241);
+  border-bottom: 1px solid var(--border);
 
   line-height: 1.4;
 
   height: 38px;
 
-  background: rgb(244, 247, 249);
+  background: var(--table-header);
 
-  color: rgb(82, 98, 115);
+  color: var(--text-secondary);
 
-  font-size: 11.5px;
+  font-size: var(--font-size-label);
 
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
 }
 
 .data-table tbody tr.selected td {
-  background: rgb(237, 245, 255);
+  background: var(--table-selected);
 }
 
 @media (max-width: 720px) {
@@ -188,13 +188,13 @@
 
   white-space: nowrap;
 
-  color: rgb(38, 51, 64);
+  color: var(--text-primary);
 
   width: 100%;
 
   border-collapse: collapse;
 
-  font-size: 12.5px;
+  font-size: var(--font-size-table);
 }
 
 .data-table tbody tr:last-child td {
@@ -208,7 +208,7 @@
 }
 
 .data-table tbody tr:hover td {
-  background: rgb(248, 250, 255);
+  background: var(--table-hover);
 }
 
 .data-table .stock-name {
@@ -246,25 +246,25 @@
 
   border-bottom: 1px solid var(--border);
 
-  background: var(--surface-subtle);
+  background: var(--table-header);
 
   color: var(--text-secondary);
 
-  font-weight: 650;
+  font-weight: var(--font-weight-semibold);
 
   white-space: nowrap;
 
   height: 36px;
 
-  font-size: 11.5px;
+  font-size: var(--font-size-label);
 }
 
 .data-table tbody td {
   padding: 6px 11px;
 
-  border-bottom: 1px solid rgb(237, 240, 244);
+  border-bottom: 1px solid var(--border-subtle);
 
-  color: var(--xb-gray-700);
+  color: var(--text-primary);
 
   height: 41px;
 }
@@ -294,7 +294,7 @@
 
   top: 0px;
 
-  background: rgb(248, 250, 252);
+  background: var(--table-header);
 
   color: var(--sub);
 
@@ -346,7 +346,7 @@
 }
 
 .tbl tbody tr:hover {
-  background: rgb(248, 250, 255);
+  background: var(--table-hover);
 }
 
 .tbl.compact tbody td {