phase-4: scss upgrade

ui/src/lib/MarketContext.svelte

@@ -93,27 +93,24 @@
     align-items: center;
     gap: 8px;
     background: none;
-    border: 1px solid #1e293b;
-    border-radius: 6px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
     padding: 6px 12px;
     cursor: pointer;
     margin-bottom: 10px;
   }
 
   .ctx-toggle-label {
-    font-size: 11px;
+    font-size: var(--fs-sm);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.07em;
-    color: #475569;
+    color: var(--text-dimmer);
   }
 
-  .ctx-toggle-chevron {
-    font-size: 9px;
-    color: #334155;
-  }
+  .ctx-toggle-chevron { font-size: var(--fs-2xs); color: var(--text-faint); }
 
-  /* ── Cards grid ────────────────────────────────────────────────── */
+  /* ── Cards grid ─────────────────────────────────────────────────── */
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
@@ -121,28 +118,13 @@
     margin-bottom: 8px;
   }
 
-  .card { background: #1e293b; border-radius: 8px; padding: 12px 14px; }
+  .card { background: var(--bg-card); border-radius: var(--radius-md); padding: 12px var(--space-lg); }
 
-  .label-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px;
-  }
+  .label-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+  .label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
 
-  .label {
-    font-size: 10px;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  /* ── Tooltip ──────────────────────────────────────────────────── */
-  .tip-wrap {
-    position: relative;
-    display: inline-flex;
-    flex-shrink: 0;
-  }
+  /* ── Tooltip ─────────────────────────────────────────────────────── */
+  .tip-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
 
   .tip-anchor {
     display: inline-flex;
@@ -151,10 +133,10 @@
     width: 13px;
     height: 13px;
     border-radius: 50%;
-    background: #1e293b;
-    border: 1px solid #334155;
-    color: #475569;
-    font-size: 9px;
+    background: var(--bg-card);
+    border: 1px solid var(--text-faint);
+    color: var(--text-dimmer);
+    font-size: var(--fs-2xs);
     font-weight: 700;
     cursor: help;
   }
@@ -166,12 +148,12 @@
     left: 50%;
     transform: translateX(-50%);
     width: 220px;
-    background: #1e293b;
-    border: 1px solid #334155;
-    border-radius: 6px;
+    background: var(--bg-card);
+    border: 1px solid var(--text-faint);
+    border-radius: var(--radius-sm);
     padding: 8px 10px;
-    font-size: 11px;
-    color: #94a3b8;
+    font-size: var(--fs-sm);
+    color: var(--text-muted);
     line-height: 1.5;
     z-index: 50;
     pointer-events: none;
@@ -185,10 +167,10 @@
     left: 50%;
     transform: translateX(-50%);
     border: 5px solid transparent;
-    border-top-color: #334155;
+    border-top-color: var(--text-faint);
   }
 
   .tip-wrap:hover .tip-box { display: block; }
 
-  .value { font-size: 17px; font-weight: 700; color: #f1f5f9; margin-top: 4px; }
+  .value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
 </style>