@symerian/symi 3.5.30 → 3.5.32

package/dist/control-ui/css/style.css

@@ -865,36 +865,143 @@ body {
        which lets the substrate / cards container's overflow-y: auto
        reliably engage instead of pushing the parent.
    Combined: every mode reliably bounds to the column. */
+/* ── Symframe Design Tokens (Option 3 — 3.5.32) ─────────────────────────
+   Semantic token system. Option 1 (3.5.31) extracted every literal as a
+   numeric token; Option 3 collapses close tiers, renames to semantic names,
+   and tunes the panel as one coherent system.
+
+   Tiers per primitive:
+     cyan:   hairline · veil · edge · pulse · flash       (5)
+     veil:   faint · soft · strong                         (3)  white-on-dark
+     shadow: soft · mid · deep                             (3)  black drop shadows
+     ink:    badge                                         (1)  near-opaque black
+     intent palette per hue: tint · edge · strong (· peak/text/mid)
+     pad:    xs(2) · sm(4) · md(6) · lg(8) · xl(10) · 2xl(12)
+     text:   xs(9) · sm(10) · md(11) · lg(13) · xl(16)
+     radius: xs(2) · sm(4) · md(6) · lg(8) · xl(10) · pill
+     bound:  row · tool · detail · list · media · body
+     time:   fast(.15) · quick(.2) · normal(.4) · medium(.6) · easy(.8)
+             · slow(1) · pulse(1.2) · breathe(3.2)
+*/
+:root {
+  /* ── Cyan accent (primary accent — 5 tiers) ── */
+  --sf-cyan-hairline: rgba(0, 212, 255, 0.06);
+  --sf-cyan-veil: rgba(0, 212, 255, 0.12);
+  --sf-cyan-edge: rgba(0, 212, 255, 0.2);
+  --sf-cyan-pulse: rgba(0, 212, 255, 0.35);
+  --sf-cyan-flash: rgba(0, 212, 255, 0.6);
+
+  /* ── Veil (white-on-dark surface depth — 3 tiers) ── */
+  --sf-veil-faint: rgba(255, 255, 255, 0.04);
+  --sf-veil-soft: rgba(255, 255, 255, 0.06);
+  --sf-veil-strong: rgba(255, 255, 255, 0.1);
+
+  /* ── Shadow + ink (4 tiers) ── */
+  --sf-shadow-soft: rgba(0, 0, 0, 0.2);
+  --sf-shadow-mid: rgba(0, 0, 0, 0.25);
+  --sf-shadow-deep: rgba(0, 0, 0, 0.4);
+  --sf-ink-badge: rgba(0, 0, 0, 0.55);
+
+  /* ── Surface fills (dark blue-tinted glass) ── */
+  --sf-surface-card: rgba(10, 16, 26, 0.62);
+  --sf-surface-menu: rgba(10, 16, 26, 0.95);
+
+  /* ── Intent palette (4 hues — Stage D.1 semantic) ── */
+  --sf-amber-tint: rgba(245, 183, 58, 0.12); /* weighing bg */
+  --sf-amber-edge: rgba(245, 183, 58, 0.32); /* weighing stripe */
+
+  --sf-pink-tint: rgba(244, 114, 182, 0.1); /* awaiting bg */
+  --sf-pink-edge: rgba(244, 114, 182, 0.22); /* awaiting border */
+  --sf-pink-strong: rgba(244, 114, 182, 0.6); /* hover edge */
+  --sf-pink-text: rgba(244, 114, 182, 0.85); /* awaiting text */
+
+  --sf-green-tint: rgba(52, 211, 153, 0.1); /* producing bg */
+  --sf-green-edge: rgba(52, 211, 153, 0.2); /* producing border */
+  --sf-green-strong: rgba(52, 211, 153, 0.75); /* producing pulse */
+  --sf-green-peak: rgba(52, 211, 153, 1); /* producing peak */
+
+  --sf-violet-tint: rgba(139, 92, 246, 0.12); /* drafted bg */
+  --sf-violet-edge: rgba(139, 92, 246, 0.22); /* drafted border */
+  --sf-violet-mid: rgba(139, 92, 246, 0.32); /* drafted stripe */
+  --sf-violet-strong: rgba(139, 92, 246, 0.55); /* drafted highlight */
+
+  /* ── Spacing (4px grid) ── */
+  --sf-pad-xs: 2px;
+  --sf-pad-sm: 4px;
+  --sf-pad-md: 6px;
+  --sf-pad-lg: 8px;
+  --sf-pad-xl: 10px;
+  --sf-pad-2xl: 12px;
+
+  /* ── Type scale ── */
+  --sf-text-xs: 9px;
+  --sf-text-sm: 10px;
+  --sf-text-md: 11px;
+  --sf-text-lg: 13px;
+  --sf-text-xl: 16px;
+
+  /* ── Corner radii ── */
+  --sf-radius-xs: 2px;
+  --sf-radius-sm: 4px;
+  --sf-radius-md: 6px;
+  --sf-radius-lg: 8px;
+  --sf-radius-xl: 10px;
+  --sf-radius-pill: 50%;
+
+  /* ── Content bounds (semantic, unchanged) ── */
+  --sf-bound-row: 38px;
+  --sf-bound-tool: 100px;
+  --sf-bound-detail: 120px;
+  --sf-bound-list: 200px;
+  --sf-bound-media: 280px;
+  --sf-bound-body: 320px;
+
+  /* ── Motion durations ── */
+  --sf-time-fast: 0.15s;
+  --sf-time-quick: 0.2s;
+  --sf-time-normal: 0.4s;
+  --sf-time-medium: 0.6s;
+  --sf-time-easy: 0.8s;
+  --sf-time-slow: 1s;
+  --sf-time-pulse: 1.2s;
+  --sf-time-breathe: 3.2s;
+}
+
 .symframe {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
-  gap: 8px;
+  gap: var(--sf-pad-lg);
+
   flex: 1 1 0;
   min-height: 0;
   overflow: hidden;
 }
 .symframe-header {
-  padding: 8px 10px 10px;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
-  margin-bottom: 4px;
+  padding: var(--sf-pad-lg) var(--sf-pad-xl) var(--sf-pad-xl);
+
+  border-bottom: 1px solid var(--sf-cyan-veil);
+  margin-bottom: var(--sf-pad-sm);
+
   min-height: 0;
 }
 .symframe-header-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 10px;
+  gap: var(--sf-pad-xl);
 }
 .symframe-title {
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: var(--sf-text-lg);
+
   font-weight: 600;
   letter-spacing: 0.14em;
   color: var(--accent-cyan);
 }
 .symframe-count {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   letter-spacing: 0.06em;
   color: var(--text-dim);
   opacity: 0.7;
@@ -902,11 +1009,13 @@ body {
 }
 .symframe-sub {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   letter-spacing: 0.04em;
   color: var(--text-dim);
   opacity: 0.55;
-  margin-top: 4px;
+  margin-top: var(--sf-pad-sm);
+
   line-height: 1.4;
 }
 
@@ -914,14 +1023,16 @@ body {
 .symframe-modes {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 6px;
+  gap: var(--sf-pad-md);
+
+  margin-top: var(--sf-pad-md);
 }
 .mode-chip {
   width: 10px;
   height: 10px;
-  border-radius: 50%;
-  border: 1px solid rgba(0, 212, 255, 0.32);
+  border-radius: var(--sf-radius-pill);
+
+  border: 1px solid var(--sf-cyan-pulse);
   background: transparent;
   padding: 0;
   cursor: pointer;
@@ -933,32 +1044,35 @@ body {
 }
 .mode-chip:hover {
   border-color: var(--accent-cyan);
-  background: rgba(0, 212, 255, 0.15);
+  background: var(--sf-cyan-edge);
   transform: scale(1.15);
 }
 .mode-chip.active {
   background: var(--accent-cyan);
   border-color: var(--accent-cyan);
-  box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 6px var(--sf-cyan-flash);
 }
 .mode-auto {
   margin-left: auto;
-  padding: 2px 8px;
+  padding: var(--sf-pad-xs) var(--sf-pad-lg);
+
   font-family: var(--font-mono);
-  font-size: 8px;
+  font-size: var(--sf-text-xs);
+
   font-weight: 700;
   letter-spacing: 0.12em;
   color: var(--accent-cyan);
-  background: rgba(0, 212, 255, 0.08);
-  border: 1px solid rgba(0, 212, 255, 0.32);
-  border-radius: 8px;
+  background: var(--sf-cyan-veil);
+  border: 1px solid var(--sf-cyan-pulse);
+  border-radius: var(--sf-radius-lg);
+
   cursor: pointer;
   transition:
     background 0.15s ease,
     color 0.15s ease;
 }
 .mode-auto:hover {
-  background: rgba(0, 212, 255, 0.2);
+  background: var(--sf-cyan-edge);
   color: var(--text);
 }
 
@@ -967,15 +1081,19 @@ body {
    AND adds .considering-weighing to #symframe (CSS below) which dims
    non-weighing cards for the duration. */
 .considering-btn {
-  margin-left: 4px;
-  padding: 2px 7px;
-  font-size: 11px;
+  margin-left: var(--sf-pad-sm);
+
+  padding: var(--sf-pad-xs) 7px;
+
+  font-size: var(--sf-text-md);
+
   line-height: 1;
   font-family: var(--font-mono);
   color: #f5b73a; /* amber — same hue as weighing intent */
   background: transparent;
-  border: 1px solid rgba(245, 183, 58, 0.32);
-  border-radius: 8px;
+  border: 1px solid var(--sf-amber-edge);
+  border-radius: var(--sf-radius-lg);
+
   cursor: pointer;
   transition:
     background 0.15s ease,
@@ -983,7 +1101,7 @@ body {
     transform 0.15s ease;
 }
 .considering-btn:hover {
-  background: rgba(245, 183, 58, 0.12);
+  background: var(--sf-amber-tint);
   border-color: #f5b73a;
 }
 .considering-btn:active {
@@ -992,16 +1110,16 @@ body {
 /* Brief red flash when clicked while no weighing cards exist —
    tells the user "I have nothing to surface here." */
 .considering-btn.considering-empty {
-  animation: considering-empty-pulse 0.8s ease-out;
+  animation: considering-empty-pulse var(--sf-time-easy) ease-out;
 }
 @keyframes considering-empty-pulse {
   0%,
   100% {
-    border-color: rgba(245, 183, 58, 0.32);
+    border-color: var(--sf-amber-edge);
   }
   50% {
-    border-color: rgba(244, 114, 182, 0.6);
-    background: rgba(244, 114, 182, 0.1);
+    border-color: var(--sf-pink-strong);
+    background: var(--sf-pink-tint);
   }
 }
 /* While considering-weighing is active, dim non-weighing cards so the
@@ -1015,14 +1133,15 @@ body {
 }
 .symframe.considering-weighing .symframe-substrate {
   opacity: 0.45;
-  transition: opacity 0.4s ease;
+  transition: opacity var(--sf-time-normal) ease;
 }
 @media (prefers-reduced-motion: reduce) {
   .considering-btn.considering-empty {
     animation: none;
   }
   .symframe.considering-weighing .symframe-card-dynamic:not([data-intent="weighing"]) {
-    transition: opacity 0.2s ease;
+    transition: opacity var(--sf-time-quick) ease;
+
     filter: none;
   }
 }
@@ -1038,8 +1157,10 @@ body {
   border-bottom: 1px dashed currentColor;
   cursor: pointer;
   font-weight: 500;
-  padding: 0 2px;
-  border-radius: 3px;
+  padding: 0 var(--sf-pad-xs);
+
+  border-radius: var(--sf-radius-xs);
+
   transition:
     background 0.15s ease,
     border-bottom-style 0.15s ease;
@@ -1050,7 +1171,7 @@ body {
   opacity: 0.7;
 }
 .panel-ref:hover {
-  background: rgba(0, 212, 255, 0.12);
+  background: var(--sf-cyan-veil);
   border-bottom-style: solid;
 }
 /* Orphan reference — the card is no longer in the panel. Subdued so
@@ -1065,15 +1186,15 @@ body {
 /* Click-miss flash: a brief pink tint signals "I tried to dwell but
    that card isn't currently registered." */
 .panel-ref.panel-ref-miss {
-  animation: panel-ref-miss-pulse 1s ease-out;
+  animation: panel-ref-miss-pulse var(--sf-time-slow) ease-out;
 }
 @keyframes panel-ref-miss-pulse {
   0%,
   100% {
-    background: rgba(0, 212, 255, 0.12);
+    background: var(--sf-cyan-veil);
   }
   50% {
-    background: rgba(244, 114, 182, 0.22);
+    background: var(--sf-pink-edge);
   }
 }
 
@@ -1104,7 +1225,7 @@ body {
 /* When focusedId is set, dim non-matching cards. */
 .symframe[data-mode="focus"][data-focus-id] .symframe-card-dynamic {
   opacity: 0.25;
-  transition: opacity 0.4s ease;
+  transition: opacity var(--sf-time-normal) ease;
 }
 .symframe[data-mode="focus"][data-focus-id] .symframe-card-dynamic:hover {
   opacity: 0.6;
@@ -1121,9 +1242,9 @@ body {
      plenty of focus signal on their own. */
   opacity: 1 !important;
   box-shadow:
-    0 0 24px rgba(0, 212, 255, 0.35),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    0 0 24px var(--sf-cyan-pulse),
+    inset 0 1px 0 var(--sf-veil-soft),
+    0 4px 12px var(--sf-shadow-mid);
   border-color: var(--accent-cyan) !important;
   transition:
     box-shadow 0.4s ease,
@@ -1159,7 +1280,8 @@ body {
   opacity: 0.35;
 }
 .symframe[data-mode="awaiting"] .symframe-card-dynamic {
-  max-height: 38px;
+  max-height: var(--sf-bound-row);
+
   overflow: hidden;
   transition:
     max-height 0.4s ease,
@@ -1174,9 +1296,10 @@ body {
      "dominant" without exceeding the column. The `overflow: hidden`
      from C.4 still clips any overflow from misbehaving children. */
   max-height: 80%;
-  background: rgba(0, 212, 255, 0.04);
-  border-radius: 10px;
-  margin-top: 8px;
+  background: var(--sf-cyan-hairline);
+  border-radius: var(--sf-radius-xl);
+
+  margin-top: var(--sf-pad-lg);
 }
 .symframe[data-mode="awaiting"] .awaiting-list {
   /* The footer is now sized larger than baseline. Let the list flex
@@ -1242,10 +1365,11 @@ body {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--sf-pad-xl);
+
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.12) transparent;
+  scrollbar-color: var(--sf-cyan-veil) transparent;
   /* Let scroll/click events fall through the empty space between cards
      down to the substrate, so the user can scroll reasoning even when
      foreground cards are foregrounded. Cards themselves re-enable
@@ -1259,8 +1383,8 @@ body {
   width: 3px;
 }
 .symframe-cards::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.12);
-  border-radius: 2px;
+  background: var(--sf-cyan-veil);
+  border-radius: var(--sf-radius-xs);
 }
 
 /* ── Substrate (ambient reasoning layer, Stage B) ──────────────────── */
@@ -1275,17 +1399,19 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 2px 4px 4px;
+  gap: var(--sf-pad-md);
+
+  padding: var(--sf-pad-xs) var(--sf-pad-sm) var(--sf-pad-sm);
+
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.18) transparent;
+  scrollbar-color: var(--sf-cyan-edge) transparent;
 }
 .symframe-substrate::-webkit-scrollbar {
   width: 3px;
 }
 .symframe-substrate::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.18);
-  border-radius: 2px;
+  background: var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-xs);
 }
 
 /* Substrate entry — decay-driven visual. Custom properties are written
@@ -1308,17 +1434,20 @@ body {
   opacity: 1;
   filter: none;
   transform: none;
-  border-color: rgba(0, 212, 255, 0.32);
-  box-shadow: 0 0 12px rgba(0, 212, 255, 0.08);
+  border-color: var(--sf-cyan-pulse);
+  box-shadow: 0 0 12px var(--sf-cyan-veil);
 }
 .substrate-live-dot {
   display: inline-block;
   width: 6px;
   height: 6px;
-  border-radius: 50%;
+  border-radius: var(--sf-radius-pill);
+
   background: var(--accent-cyan);
-  margin-right: 6px;
-  animation: pulse 1.2s ease-in-out infinite;
+  margin-right: var(--sf-pad-md);
+
+  animation: pulse var(--sf-time-pulse) ease-in-out infinite;
+
   flex-shrink: 0;
 }
 
@@ -1329,13 +1458,15 @@ body {
   max-height: 2px;
   padding: 0;
   border-width: 0;
-  border-top: 1px solid rgba(0, 212, 255, 0.06);
+  border-top: 1px solid var(--sf-cyan-hairline);
   overflow: hidden;
 }
 .substrate-entry.substrate-texture:hover {
-  max-height: 200px;
-  padding: 6px 8px;
-  border: 1px solid rgba(0, 212, 255, 0.18);
+  max-height: var(--sf-bound-list);
+
+  padding: var(--sf-pad-md) var(--sf-pad-lg);
+
+  border: 1px solid var(--sf-cyan-edge);
   opacity: 0.7;
   filter: none;
 }
@@ -1356,7 +1487,8 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: var(--sf-pad-xl);
+
   padding: 40px 0;
   margin: auto;
   opacity: 0.85;
@@ -1364,17 +1496,15 @@ body {
 .substrate-quiet-dot {
   width: 14px;
   height: 14px;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle at center,
-    rgba(0, 212, 255, 0.45) 0%,
-    rgba(0, 212, 255, 0) 70%
-  );
-  animation: quiet-pulse 3.2s ease-in-out infinite;
+  border-radius: var(--sf-radius-pill);
+
+  background: radial-gradient(circle at center, var(--sf-cyan-pulse) 0%, rgba(0, 212, 255, 0) 70%);
+  animation: quiet-pulse var(--sf-time-breathe) ease-in-out infinite;
 }
 .substrate-quiet-label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-dim);
@@ -1397,7 +1527,8 @@ body {
    informative; the panel stays still. */
 @media (prefers-reduced-motion: reduce) {
   .substrate-entry {
-    transition: opacity 0.2s ease;
+    transition: opacity var(--sf-time-quick) ease;
+
     filter: none !important;
     transform: none !important;
   }
@@ -1417,22 +1548,24 @@ body {
      the substrate breathe through. The backdrop-filter blurs whatever
      substrate texture is behind, so even at moderate transparency the
      card body stays crisp. */
-  background: rgba(10, 16, 26, 0.62);
+  background: var(--sf-surface-card);
   backdrop-filter: blur(10px) saturate(140%);
   -webkit-backdrop-filter: blur(10px) saturate(140%);
-  border: 1px solid rgba(0, 212, 255, 0.12);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border: 1px solid var(--sf-cyan-veil);
+  border-radius: var(--sf-radius-xl);
+
+  padding: var(--sf-pad-xl) var(--sf-pad-2xl);
+
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
 }
 .symframe .symframe-card::before,
 .symframe .symframe-card::after {
   display: none;
 }
 .symframe .symframe-card:hover {
-  border-color: rgba(0, 212, 255, 0.18);
+  border-color: var(--sf-cyan-edge);
 }
 
 /* Phase 2: dynamic-card sub-elements (only present on cards added via
@@ -1441,17 +1574,19 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: var(--sf-pad-lg);
 }
 .symframe-card-dismiss {
   background: transparent;
   border: none;
   color: var(--text-dim);
-  font-size: 16px;
+  font-size: var(--sf-text-xl);
+
   line-height: 1;
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--sf-radius-sm);
+
   cursor: pointer;
   opacity: 0.6;
   transition:
@@ -1466,7 +1601,7 @@ body {
 .symframe-card-dismiss:hover {
   opacity: 1;
   color: var(--accent-cyan);
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-veil);
 }
 
 /* Stage C: pin glyph — replaces dismiss button on pinned cards. Click
@@ -1477,11 +1612,13 @@ body {
   background: transparent;
   border: none;
   color: var(--accent-cyan);
-  font-size: 13px;
+  font-size: var(--sf-text-lg);
+
   line-height: 1;
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--sf-radius-sm);
+
   cursor: pointer;
   opacity: 0.8;
   padding: 0;
@@ -1494,33 +1631,33 @@ body {
 }
 .symframe-card-pin:hover {
   opacity: 1;
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-veil);
 }
 
 /* Stage C: dwell pulse — 600ms cyan border + glow then return. */
 .symframe-card.symframe-dwelling {
-  animation: symframe-dwell 600ms ease-out;
+  animation: symframe-dwell var(--sf-time-medium) ease-out;
 }
 @keyframes symframe-dwell {
   0% {
     border-color: var(--accent-cyan);
     box-shadow:
-      0 0 0 0 rgba(0, 212, 255, 0.55),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 4px 12px rgba(0, 0, 0, 0.25);
+      0 0 0 0 var(--sf-cyan-flash),
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
   60% {
-    border-color: rgba(0, 212, 255, 0.6);
+    border-color: var(--sf-cyan-flash);
     box-shadow:
       0 0 0 6px rgba(0, 212, 255, 0),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 4px 12px rgba(0, 0, 0, 0.25);
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
   100% {
-    border-color: rgba(0, 212, 255, 0.12);
+    border-color: var(--sf-cyan-veil);
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 4px 12px rgba(0, 0, 0, 0.25);
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
 }
 
@@ -1529,10 +1666,10 @@ body {
    on transitionend or after a 900ms fail-safe timeout. */
 .symframe-card.symframe-releasing {
   transition:
-    opacity 800ms cubic-bezier(0.4, 0, 0.6, 1),
-    transform 800ms cubic-bezier(0.4, 0, 0.6, 1),
-    max-height 800ms cubic-bezier(0.4, 0, 0.6, 1),
-    margin 800ms ease;
+    opacity var(--sf-time-easy) cubic-bezier(0.4, 0, 0.6, 1),
+    transform var(--sf-time-easy) cubic-bezier(0.4, 0, 0.6, 1),
+    max-height var(--sf-time-easy) cubic-bezier(0.4, 0, 0.6, 1),
+    margin var(--sf-time-easy) ease;
   opacity: 0;
   transform: scale(0.92);
   max-height: 0;
@@ -1549,7 +1686,7 @@ body {
     border-color: var(--accent-cyan);
   }
   .symframe-card.symframe-releasing {
-    transition: opacity 200ms ease;
+    transition: opacity var(--sf-time-quick) ease;
     transform: none;
     max-height: none;
   }
@@ -1564,12 +1701,15 @@ body {
    Click [+ Add] → menu with "Spawn subagent" / "Add scheduled task". */
 .symframe-awaiting {
   position: relative;
-  border-top: 1px solid rgba(0, 212, 255, 0.12);
-  margin-top: 8px;
-  padding: 8px 6px 4px;
+  border-top: 1px solid var(--sf-cyan-veil);
+  margin-top: var(--sf-pad-lg);
+
+  padding: var(--sf-pad-lg) var(--sf-pad-md) var(--sf-pad-sm);
+
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--sf-pad-sm);
+
   /* Stage C.4: cap the AWAITING footer so it can't claim more than ~40%
      of the column height even if the user has many cron jobs. The
      list inside still scrolls (max-height: 200px on .awaiting-list)
@@ -1584,19 +1724,22 @@ body {
 .awaiting-header {
   display: flex;
   align-items: baseline;
-  gap: 8px;
-  padding: 0 4px 4px;
+  gap: var(--sf-pad-lg);
+
+  padding: 0 var(--sf-pad-sm) var(--sf-pad-sm);
 }
 .awaiting-title {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   font-weight: 600;
   letter-spacing: 0.14em;
   color: var(--accent-cyan);
 }
 .awaiting-count {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   letter-spacing: 0.04em;
   color: var(--text-dim);
   opacity: 0.6;
@@ -1605,38 +1748,44 @@ body {
 .awaiting-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  max-height: 200px;
+  gap: var(--sf-pad-xs);
+
+  max-height: var(--sf-bound-list);
+
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.18) transparent;
+  scrollbar-color: var(--sf-cyan-edge) transparent;
 }
 .awaiting-list::-webkit-scrollbar {
   width: 3px;
 }
 .awaiting-list::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.18);
-  border-radius: 2px;
+  background: var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-xs);
 }
 .awaiting-item {
   display: grid;
   grid-template-columns: 18px 1fr auto;
   align-items: center;
-  gap: 6px;
-  padding: 5px 8px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.02);
+  gap: var(--sf-pad-md);
+
+  padding: var(--sf-pad-sm) var(--sf-pad-lg);
+
+  border-radius: var(--sf-radius-md);
+
+  background: var(--sf-veil-faint);
   border: 1px solid transparent;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   cursor: pointer;
   transition:
     background 0.15s ease,
     border-color 0.15s ease;
 }
 .awaiting-item:hover {
-  background: rgba(0, 212, 255, 0.06);
-  border-color: rgba(0, 212, 255, 0.15);
+  background: var(--sf-cyan-hairline);
+  border-color: var(--sf-cyan-edge);
 }
 .awaiting-item-disabled {
   opacity: 0.45;
@@ -1647,7 +1796,8 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: var(--sf-text-md);
+
   line-height: 1;
 }
 .awaiting-glyph-subagent {
@@ -1669,7 +1819,8 @@ body {
 .awaiting-meta {
   color: var(--text-dim);
   opacity: 0.75;
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   letter-spacing: 0.04em;
   text-transform: lowercase;
   white-space: nowrap;
@@ -1678,10 +1829,12 @@ body {
 /* Empty-state placeholder when no subagents and no schedules exist. */
 .awaiting-empty {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   color: var(--text-dim);
   opacity: 0.55;
-  padding: 8px 10px;
+  padding: var(--sf-pad-lg) var(--sf-pad-xl);
+
   text-align: center;
   font-style: italic;
 }
@@ -1690,16 +1843,21 @@ body {
 .awaiting-add-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 4px;
+  gap: var(--sf-pad-md);
+
+  margin-top: var(--sf-pad-sm);
+
   align-self: flex-start;
-  padding: 4px 10px;
+  padding: var(--sf-pad-sm) var(--sf-pad-xl);
+
   background: transparent;
-  border: 1px dashed rgba(0, 212, 255, 0.25);
-  border-radius: 6px;
+  border: 1px dashed var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-md);
+
   color: var(--text-dim);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   letter-spacing: 0.04em;
   cursor: pointer;
   transition:
@@ -1710,7 +1868,7 @@ body {
 .awaiting-add-btn:hover {
   color: var(--accent-cyan);
   border-color: var(--accent-cyan);
-  background: rgba(0, 212, 255, 0.04);
+  background: var(--sf-cyan-hairline);
 }
 .awaiting-add-btn svg {
   width: 12px;
@@ -1720,36 +1878,44 @@ body {
   position: absolute;
   left: 10px;
   bottom: 100%;
-  margin-bottom: 6px;
-  background: rgba(10, 16, 26, 0.95);
+  margin-bottom: var(--sf-pad-md);
+
+  background: var(--sf-surface-menu);
   backdrop-filter: blur(12px) saturate(140%);
   -webkit-backdrop-filter: blur(12px) saturate(140%);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 8px;
-  padding: 4px;
+  border: 1px solid var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-lg);
+
+  padding: var(--sf-pad-sm);
+
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--sf-pad-xs);
+
   min-width: 180px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 8px 24px var(--sf-shadow-deep);
   z-index: 20;
 }
 .awaiting-add-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
+  gap: var(--sf-pad-lg);
+
+  padding: var(--sf-pad-md) var(--sf-pad-xl);
+
   background: transparent;
   border: none;
-  border-radius: 5px;
+  border-radius: var(--sf-radius-sm);
+
   color: var(--text);
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--sf-text-md);
+
   cursor: pointer;
   text-align: left;
 }
 .awaiting-add-item:hover {
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-veil);
   color: var(--accent-cyan);
 }
 .awaiting-add-glyph {
@@ -1760,49 +1926,58 @@ body {
 
 .symframe-card-body {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--sf-text-md);
+
   line-height: 1.5;
   color: var(--text);
-  margin-top: 8px;
+  margin-top: var(--sf-pad-lg);
+
   white-space: pre-wrap;
   word-break: break-word;
-  max-height: 320px;
+  max-height: var(--sf-bound-body);
+
   overflow-y: auto;
 }
 .symframe-card-actions {
   display: flex;
-  gap: 6px;
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  gap: var(--sf-pad-md);
+
+  margin-top: var(--sf-pad-xl);
+
+  padding-top: var(--sf-pad-lg);
+
+  border-top: 1px solid var(--sf-veil-soft);
   flex-wrap: wrap;
 }
 .symframe-card-action {
   flex: 1 1 auto;
   min-width: 60px;
-  padding: 6px 10px;
+  padding: var(--sf-pad-md) var(--sf-pad-xl);
+
   border: 1px solid var(--glass-border);
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--sf-radius-sm);
+
+  background: var(--sf-veil-faint);
   color: var(--text-dim);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   letter-spacing: 0.04em;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all var(--sf-time-fast) ease;
 }
 .symframe-card-action:hover {
   border-color: var(--accent-cyan);
   color: var(--text);
 }
 .symframe-card-action-primary {
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-veil);
   border-color: var(--accent-cyan);
   color: var(--accent-cyan);
 }
 .symframe-card-action-primary:hover {
-  background: rgba(0, 212, 255, 0.14);
-  box-shadow: 0 0 8px rgba(0, 212, 255, 0.18);
+  background: var(--sf-cyan-veil);
+  box-shadow: 0 0 8px var(--sf-cyan-edge);
 }
 
 /* ── Stage D.1 (3.5.27): intent-aware visual treatment ──────────── */
@@ -1826,14 +2001,17 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  padding: 2px 8px 2px 6px;
+  padding: var(--sf-pad-xs) var(--sf-pad-lg) var(--sf-pad-xs) var(--sf-pad-md);
+
   font-family: var(--font-mono);
-  font-size: 8px;
+  font-size: var(--sf-text-xs);
+
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  background: rgba(0, 0, 0, 0.55);
-  border-radius: 10px 0 6px 0;
+  background: var(--sf-ink-badge);
+  border-radius: var(--sf-radius-xl) 0 var(--sf-radius-md) 0;
+
   border-right: 1px solid currentColor;
   border-bottom: 1px solid currentColor;
   pointer-events: none;
@@ -1849,9 +2027,9 @@ body {
 /* holding — cyan; working memory */
 .symframe-card-dynamic[data-intent="holding"] {
   box-shadow:
-    inset 3px 0 0 0 rgba(0, 212, 255, 0.65),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    inset 3px 0 0 0 var(--sf-cyan-flash),
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
 }
 .symframe-card-dynamic[data-intent="holding"]::before {
   color: var(--accent-cyan);
@@ -1861,8 +2039,8 @@ body {
 .symframe-card-dynamic[data-intent="weighing"] {
   box-shadow:
     inset 3px 0 0 0 #f5b73a,
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
 }
 .symframe-card-dynamic[data-intent="weighing"]::before {
   color: #f5b73a;
@@ -1870,22 +2048,22 @@ body {
 
 /* producing — green; actively drafting, slow pulse on the stripe */
 .symframe-card-dynamic[data-intent="producing"] {
-  animation: intent-producing-pulse 2.6s ease-in-out infinite;
+  animation: intent-producing-pulse var(--sf-time-breathe) ease-in-out infinite;
 }
 @keyframes intent-producing-pulse {
   0%,
   100% {
     box-shadow:
-      inset 3px 0 0 0 rgba(52, 211, 153, 0.55),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 4px 12px rgba(0, 0, 0, 0.25);
+      inset 3px 0 0 0 var(--sf-green-strong),
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
   50% {
     box-shadow:
-      inset 3px 0 0 0 rgba(52, 211, 153, 1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 4px 12px rgba(0, 0, 0, 0.25),
-      0 0 14px rgba(52, 211, 153, 0.2);
+      inset 3px 0 0 0 var(--sf-green-peak),
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid),
+      0 0 14px var(--sf-green-edge);
   }
 }
 .symframe-card-dynamic[data-intent="producing"]::before {
@@ -1897,8 +2075,8 @@ body {
 .symframe-card-dynamic[data-intent="drafted"] {
   box-shadow:
     inset 3px 0 0 0 #8b5cf6,
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
 }
 .symframe-card-dynamic[data-intent="drafted"]::before {
   color: #8b5cf6;
@@ -1906,30 +2084,30 @@ body {
 /* Emphasize action buttons on drafted cards — these cards exist to
    be acted on (Send / Copy / Open). Make the buttons more clickable. */
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action {
-  border-color: rgba(139, 92, 246, 0.55);
+  border-color: var(--sf-violet-strong);
   color: var(--text);
   font-weight: 600;
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action:hover {
-  background: rgba(139, 92, 246, 0.12);
+  background: var(--sf-violet-tint);
   border-color: #8b5cf6;
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary {
-  background: rgba(139, 92, 246, 0.22);
+  background: var(--sf-violet-edge);
   border-color: #8b5cf6;
   color: var(--text);
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary:hover {
-  background: rgba(139, 92, 246, 0.32);
-  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
+  background: var(--sf-violet-mid);
+  box-shadow: 0 0 10px var(--sf-violet-edge);
 }
 
 /* reference — muted gray; passive read-only context */
 .symframe-card-dynamic[data-intent="reference"] {
   box-shadow:
     inset 3px 0 0 0 rgba(255, 255, 255, 0.22),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
   opacity: 0.88;
   filter: saturate(0.75);
 }
@@ -1943,13 +2121,13 @@ body {
    miscategorization. */
 .symframe-card-dynamic[data-intent="awaiting"] {
   box-shadow:
-    inset 3px 0 0 0 rgba(244, 114, 182, 0.55),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    0 4px 12px rgba(0, 0, 0, 0.25);
+    inset 3px 0 0 0 var(--sf-pink-strong),
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
 }
 .symframe-card-dynamic[data-intent="awaiting"]::before {
   content: "awaiting → footer";
-  color: rgba(244, 114, 182, 0.85);
+  color: var(--sf-pink-text);
 }
 
 /* Reduced-motion: skip the producing pulse but keep the static
@@ -1958,9 +2136,9 @@ body {
   .symframe-card-dynamic[data-intent="producing"] {
     animation: none;
     box-shadow:
-      inset 3px 0 0 0 rgba(52, 211, 153, 0.75),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 4px 12px rgba(0, 0, 0, 0.25);
+      inset 3px 0 0 0 var(--sf-green-strong),
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
 }
 
@@ -1973,54 +2151,64 @@ body {
 .symframe-body-markdown h2,
 .symframe-body-markdown h3,
 .symframe-body-markdown h4 {
-  font-size: 12px;
+  font-size: var(--sf-text-lg);
+
   font-weight: 600;
-  margin: 8px 0 4px;
+  margin: var(--sf-pad-lg) 0 var(--sf-pad-sm);
+
   color: var(--text);
 }
 .symframe-body-markdown p {
-  margin: 4px 0;
+  margin: var(--sf-pad-sm) 0;
 }
 .symframe-body-markdown ul,
 .symframe-body-markdown ol {
   padding-left: 18px;
-  margin: 4px 0;
+  margin: var(--sf-pad-sm) 0;
 }
 .symframe-body-markdown code {
   font-family: var(--font-mono);
-  font-size: 10px;
-  padding: 1px 4px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 3px;
+  font-size: var(--sf-text-sm);
+
+  padding: 1px var(--sf-pad-sm);
+
+  background: var(--sf-veil-faint);
+  border-radius: var(--sf-radius-xs);
 }
 .symframe-body-markdown pre {
-  background: rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 5px;
-  padding: 8px;
+  background: var(--sf-shadow-mid);
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-sm);
+
+  padding: var(--sf-pad-lg);
+
   overflow-x: auto;
-  margin: 6px 0;
+  margin: var(--sf-pad-md) 0;
 }
 .symframe-body-markdown pre code {
   background: transparent;
   padding: 0;
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
 }
 
 /* Code body — pre/code wrapper with hljs theme-friendly chrome. */
 .symframe-body-code {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 5px;
-  padding: 8px 10px;
+  background: var(--sf-shadow-mid);
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-sm);
+
+  padding: var(--sf-pad-lg) var(--sf-pad-xl);
+
   margin: 0;
   overflow-x: auto;
-  max-height: 320px;
+  max-height: var(--sf-bound-body);
+
   overflow-y: auto;
 }
 .symframe-body-code code {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   line-height: 1.45;
   color: var(--text);
   background: transparent;
@@ -2030,28 +2218,33 @@ body {
 .symframe-body-email {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--sf-pad-sm);
 }
 .symframe-email-row {
   display: flex;
-  gap: 6px;
+  gap: var(--sf-pad-md);
+
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   letter-spacing: 0.02em;
-  padding: 2px 0;
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
+  padding: var(--sf-pad-xs) 0;
+
+  border-bottom: 1px dashed var(--sf-veil-soft);
 }
 .symframe-email-row:last-of-type {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  margin-bottom: 4px;
-  padding-bottom: 4px;
+  border-bottom: 1px solid var(--sf-veil-soft);
+  margin-bottom: var(--sf-pad-sm);
+
+  padding-bottom: var(--sf-pad-sm);
 }
 .symframe-email-label {
   flex: 0 0 auto;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   min-width: 48px;
   opacity: 0.7;
 }
@@ -2061,26 +2254,29 @@ body {
 }
 .symframe-email-body {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--sf-text-md);
+
   line-height: 1.5;
   color: var(--text);
   white-space: pre-wrap;
   word-break: break-word;
-  margin-top: 4px;
+  margin-top: var(--sf-pad-sm);
 }
 
 /* PDF embed */
 .symframe-body-pdf {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--sf-pad-md);
 }
 .symframe-pdf-iframe {
   width: 100%;
-  height: 280px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  height: var(--sf-bound-media);
+
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-sm);
+
+  background: var(--sf-shadow-soft);
 }
 
 /* Audio + video shared chrome */
@@ -2088,23 +2284,26 @@ body {
 .symframe-body-video {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--sf-pad-md);
 }
 .symframe-audio,
 .symframe-video {
   width: 100%;
-  border-radius: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  border-radius: var(--sf-radius-sm);
+
+  background: var(--sf-shadow-soft);
 }
 .symframe-video {
-  max-height: 280px;
+  max-height: var(--sf-bound-media);
+
   object-fit: contain;
 }
 
 /* Empty-media placeholder when url is missing */
 .symframe-body-empty {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   color: var(--text-dim);
   opacity: 0.6;
   font-style: italic;
@@ -2113,15 +2312,19 @@ body {
 /* Download link — used by pdf/audio/video renderers */
 .symframe-download {
   display: inline-block;
-  padding: 4px 8px;
+  padding: var(--sf-pad-sm) var(--sf-pad-lg);
+
   border: 1px solid var(--glass-border);
-  border-radius: 4px;
+  border-radius: var(--sf-radius-sm);
+
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   letter-spacing: 0.04em;
   color: var(--text-dim);
   text-decoration: none;
-  transition: all 0.15s ease;
+  transition: all var(--sf-time-fast) ease;
+
   align-self: flex-start;
 }
 .symframe-download:hover {
@@ -6703,17 +6906,20 @@ body {
   display: inline-block;
   width: 6px;
   height: 6px;
-  border-radius: 50%;
+  border-radius: var(--sf-radius-pill);
+
   background: var(--accent-cyan);
-  margin-left: 6px;
+  margin-left: var(--sf-pad-md);
+
   vertical-align: middle;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity var(--sf-time-normal) ease;
+
   flex-shrink: 0;
 }
 .reasoning-live-dot.active {
   opacity: 1;
-  animation: pulse 1.2s ease-in-out infinite;
+  animation: pulse var(--sf-time-pulse) ease-in-out infinite;
 }
 
 /* The .reasoning-panel / .reasoning-feed / .reasoning-empty* rules were
@@ -6726,18 +6932,20 @@ body {
 .reasoning-run-sep {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin: 4px 0 2px;
+  gap: var(--sf-pad-lg);
+
+  margin: var(--sf-pad-sm) 0 var(--sf-pad-xs);
 }
 .reasoning-run-sep::before,
 .reasoning-run-sep::after {
   content: "";
   flex: 1;
   height: 1px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--sf-veil-soft);
 }
 .reasoning-run-sep-label {
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   font-family: var(--font-mono);
   font-weight: 600;
   letter-spacing: 0.1em;
@@ -6749,59 +6957,66 @@ body {
 .reasoning-entry {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 6px 8px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  transition: border-color 0.2s;
+  gap: var(--sf-pad-sm);
+
+  padding: var(--sf-pad-md) var(--sf-pad-lg);
+
+  background: var(--sf-veil-faint);
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-lg);
+
+  transition: border-color var(--sf-time-quick);
 }
 .reasoning-entry:hover {
-  border-color: rgba(255, 255, 255, 0.09);
+  border-color: var(--sf-veil-soft);
 }
 
 /* Entry header row: badge + label */
 .reasoning-entry-header {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--sf-pad-md);
 }
 .reasoning-entry-badge {
-  font-size: 9px;
+  font-size: var(--sf-text-xs);
+
   font-family: var(--font-mono);
   font-weight: 700;
   letter-spacing: 0.1em;
-  padding: 1px 5px;
-  border-radius: 4px;
+  padding: 1px var(--sf-pad-sm);
+
+  border-radius: var(--sf-radius-sm);
+
   flex-shrink: 0;
 }
 /* Thinking badge — cyan tint */
 .reasoning-entry-badge.badge-think {
-  background: rgba(0, 212, 255, 0.1);
+  background: var(--sf-cyan-veil);
   color: var(--accent-cyan);
-  border: 1px solid rgba(0, 212, 255, 0.18);
+  border: 1px solid var(--sf-cyan-edge);
 }
 /* Tool call badge — purple tint */
 .reasoning-entry-badge.badge-tool {
-  background: rgba(139, 92, 246, 0.12);
+  background: var(--sf-violet-tint);
   color: var(--accent-purple);
-  border: 1px solid rgba(139, 92, 246, 0.2);
+  border: 1px solid var(--sf-violet-edge);
 }
 /* Tool result badge — green tint */
 .reasoning-entry-badge.badge-result {
-  background: rgba(52, 211, 153, 0.1);
+  background: var(--sf-green-tint);
   color: var(--accent-green);
-  border: 1px solid rgba(52, 211, 153, 0.18);
+  border: 1px solid var(--sf-green-edge);
 }
 /* Narration badge — dim white tint */
 .reasoning-entry-badge.badge-narration {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--sf-veil-soft);
   color: var(--text-muted);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--sf-veil-strong);
 }
 
 .reasoning-entry-name {
-  font-size: 11px;
+  font-size: var(--sf-text-md);
+
   font-family: var(--font-mono);
   color: var(--text-muted);
   white-space: nowrap;
@@ -6812,48 +7027,55 @@ body {
 
 /* Thinking body */
 .reasoning-think-body {
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   font-family: var(--font-mono);
   color: var(--text-muted);
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-word;
-  max-height: 120px;
+  max-height: var(--sf-bound-detail);
+
   overflow-y: auto;
-  padding: 4px 2px 0;
+  padding: var(--sf-pad-sm) var(--sf-pad-xs) 0;
+
   opacity: 0.75;
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.15) transparent;
+  scrollbar-color: var(--sf-cyan-edge) transparent;
 }
 .reasoning-think-body::-webkit-scrollbar {
   width: 2px;
 }
 .reasoning-think-body::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.15);
-  border-radius: 2px;
+  background: var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-xs);
 }
 
 /* Tool detail — compact JSON preview, collapsible */
 .reasoning-tool-preview {
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   font-family: var(--font-mono);
   color: var(--text-muted);
   opacity: 0.65;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 2px 0 0;
+  padding: var(--sf-pad-xs) 0 0;
 }
 .reasoning-tool-detail {
   display: none;
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
+
   font-family: var(--font-mono);
   color: var(--text-muted);
   white-space: pre-wrap;
   word-break: break-all;
-  padding: 4px 2px 0;
+  padding: var(--sf-pad-sm) var(--sf-pad-xs) 0;
+
   opacity: 0.65;
-  max-height: 100px;
+  max-height: var(--sf-bound-tool);
+
   overflow-y: auto;
 }
 .reasoning-entry.expanded .reasoning-tool-detail {
@@ -6865,10 +7087,10 @@ body {
 
 /* Result row */
 .reasoning-result-meta {
-  font-size: 10px;
+  font-size: var(--sf-text-sm);
   font-family: var(--font-mono);
   color: var(--text-dim);
-  padding: 2px 0 0;
+  padding: var(--sf-pad-xs) 0 0;
 }
 
 /* ── Lazy-load sentinel ──────────────────────────────────────────── */