@symerian/symi 3.5.29 → 3.5.31

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

@@ -853,47 +853,189 @@ body {
    the now-removed reasoning panel up into the header row, where it
    still pulses on agent activity (app.js:840-845 untouched, single id
    continues to bind that semantic). */
-/* Stage C.4 (3.5.25): switched the symframe from flex to grid. The
-   flex-based layout (flex: 1 1 0 + min-height: 0 + child grid
-   overflow: hidden) intermittently failed to bound the substrate's
-   intrinsic content size — observed on real hardware where the
-   substrate's reasoning entries still pushed the AWAITING footer
-   past the viewport.
-
-   Grid handles the "auto-row + 1fr-row + auto-row" pattern natively:
-   the 1fr row is constrained to whatever space remains after the
-   two auto rows resolve. There's no flex-basis-vs-content-size
-   negotiation to get wrong. The grid track shrinks to fit and the
-   substrate's overflow-y reliably engages. */
+/* Stage C.4 (3.5.25) + Stage D.3 (3.5.30) revision: the symframe is
+   a grid container (rows: header / stack / footer) sized to fill its
+   metrics-col flex parent. The two key sizing primitives:
+     - flex: 1 1 0 + min-height: 0 on the symframe itself ensures the
+       grid container has a *definite* height inside the flex column
+       parent. Without this, `height: 100%` was unreliable across
+       browsers + modes (modes 2-4 overflow report from 3.5.29).
+     - minmax(0, 1fr) on the flex middle row (instead of plain 1fr)
+       explicitly allows the row to shrink below its content size,
+       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 1 — 3.5.31) ─────────────────────────
+   Exhaustive token set extracted from existing symframe CSS — every literal
+   value used in the symframe surface has been replaced with a var(--sf-*)
+   reference. Visual identity preserved exactly. Token names are numeric
+   (--sf-cyan-12) rather than semantic (--sf-cyan-border); semantic naming +
+   tier consolidation happens in Option 3 (visual harmonization).
+
+   Defined at :root so the tokens are inherited by every selector in the
+   symframe surface without scoping concerns. Future selectors elsewhere
+   in the codebase will see the tokens but won't accidentally use them.
+*/
+:root {
+  /* ── Cyan accent opacities (15 distinct tiers from existing usage) ── */
+  --sf-cyan-04: rgba(0, 212, 255, 0.04);
+  --sf-cyan-05: rgba(0, 212, 255, 0.05);
+  --sf-cyan-06: rgba(0, 212, 255, 0.06);
+  --sf-cyan-08: rgba(0, 212, 255, 0.08);
+  --sf-cyan-10: rgba(0, 212, 255, 0.1);
+  --sf-cyan-12: rgba(0, 212, 255, 0.12);
+  --sf-cyan-14: rgba(0, 212, 255, 0.14);
+  --sf-cyan-15: rgba(0, 212, 255, 0.15);
+  --sf-cyan-18: rgba(0, 212, 255, 0.18);
+  --sf-cyan-20: rgba(0, 212, 255, 0.2);
+  --sf-cyan-25: rgba(0, 212, 255, 0.25);
+  --sf-cyan-32: rgba(0, 212, 255, 0.32);
+  --sf-cyan-35: rgba(0, 212, 255, 0.35);
+  --sf-cyan-45: rgba(0, 212, 255, 0.45);
+  --sf-cyan-50: rgba(0, 212, 255, 0.5);
+  --sf-cyan-55: rgba(0, 212, 255, 0.55);
+  --sf-cyan-60: rgba(0, 212, 255, 0.6);
+  --sf-cyan-65: rgba(0, 212, 255, 0.65);
+
+  /* ── White opacity tiers ── */
+  --sf-white-02: rgba(255, 255, 255, 0.02);
+  --sf-white-03: rgba(255, 255, 255, 0.03);
+  --sf-white-04: rgba(255, 255, 255, 0.04);
+  --sf-white-05: rgba(255, 255, 255, 0.05);
+  --sf-white-06: rgba(255, 255, 255, 0.06);
+  --sf-white-08: rgba(255, 255, 255, 0.08);
+  --sf-white-09: rgba(255, 255, 255, 0.09);
+  --sf-white-10: rgba(255, 255, 255, 0.1);
+  --sf-white-12: rgba(255, 255, 255, 0.12);
+
+  /* ── Black opacity tiers (shadows + dark fills) ── */
+  --sf-black-15: rgba(0, 0, 0, 0.15);
+  --sf-black-20: rgba(0, 0, 0, 0.2);
+  --sf-black-25: rgba(0, 0, 0, 0.25);
+  --sf-black-30: rgba(0, 0, 0, 0.3);
+  --sf-black-35: rgba(0, 0, 0, 0.35);
+  --sf-black-40: rgba(0, 0, 0, 0.4);
+  --sf-black-55: 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 (Stage D.1 — used by intent stripes, considering
+     button, AWAITING flag, producing pulse, and the substrate badges
+     that mirror these colors) ── */
+  /* amber — weighing intent + considering button */
+  --sf-amber-12: rgba(245, 183, 58, 0.12);
+  --sf-amber-32: rgba(245, 183, 58, 0.32);
+  /* pink — awaiting flag + considering-empty + panel-ref-miss pulse */
+  --sf-pink-10: rgba(244, 114, 182, 0.1);
+  --sf-pink-22: rgba(244, 114, 182, 0.22);
+  --sf-pink-55: rgba(244, 114, 182, 0.55);
+  --sf-pink-60: rgba(244, 114, 182, 0.6);
+  --sf-pink-85: rgba(244, 114, 182, 0.85);
+  /* green — producing intent + result reasoning badge */
+  --sf-green-10: rgba(52, 211, 153, 0.1);
+  --sf-green-18: rgba(52, 211, 153, 0.18);
+  --sf-green-20: rgba(52, 211, 153, 0.2);
+  --sf-green-55: rgba(52, 211, 153, 0.55);
+  --sf-green-75: rgba(52, 211, 153, 0.75);
+  --sf-green-100: rgba(52, 211, 153, 1);
+  /* violet — drafted intent + tool reasoning badge */
+  --sf-violet-12: rgba(139, 92, 246, 0.12);
+  --sf-violet-20: rgba(139, 92, 246, 0.2);
+  --sf-violet-22: rgba(139, 92, 246, 0.22);
+  --sf-violet-25: rgba(139, 92, 246, 0.25);
+  --sf-violet-32: rgba(139, 92, 246, 0.32);
+  --sf-violet-55: rgba(139, 92, 246, 0.55);
+
+  /* ── Padding / gap / margin values (px) ── */
+  --sf-pad-2: 2px;
+  --sf-pad-4: 4px;
+  --sf-pad-5: 5px;
+  --sf-pad-6: 6px;
+  --sf-pad-8: 8px;
+  --sf-pad-10: 10px;
+  --sf-pad-12: 12px;
+
+  /* ── Font sizes (px) ── */
+  --sf-text-8: 8px;
+  --sf-text-9: 9px;
+  --sf-text-10: 10px;
+  --sf-text-11: 11px;
+  --sf-text-12: 12px;
+  --sf-text-13: 13px;
+  --sf-text-16: 16px;
+
+  /* ── Border-radius (px / %) ── */
+  --sf-radius-2: 2px;
+  --sf-radius-3: 3px;
+  --sf-radius-4: 4px;
+  --sf-radius-5: 5px;
+  --sf-radius-6: 6px;
+  --sf-radius-8: 8px;
+  --sf-radius-10: 10px;
+  --sf-radius-pill: 50%;
+
+  /* ── Content bounds (height limits) ── */
+  --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-200ms: 200ms;
+  --sf-time-slow: 0.3s;
+  --sf-time-normal: 0.4s;
+  --sf-time-medium: 0.5s;
+  --sf-time-soft: 0.6s;
+  --sf-time-600ms: 600ms;
+  --sf-time-easy: 0.8s;
+  --sf-time-800ms: 800ms;
+  --sf-time-1s: 1s;
+  --sf-time-pulse: 1.2s;
+  --sf-time-pulse-prod: 2.6s;
+  --sf-time-pulse-quiet: 3.2s;
+}
+
 .symframe {
   display: grid;
-  grid-template-rows: auto 1fr auto;
-  gap: 8px;
-  height: 100%;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: var(--sf-pad-8);
+
+  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-8) var(--sf-pad-10) var(--sf-pad-10);
+
+  border-bottom: 1px solid var(--sf-cyan-12);
+  margin-bottom: var(--sf-pad-4);
+
   min-height: 0;
 }
 .symframe-header-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 10px;
+  gap: var(--sf-pad-10);
 }
 .symframe-title {
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: var(--sf-text-12);
+
   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-9);
+
   letter-spacing: 0.06em;
   color: var(--text-dim);
   opacity: 0.7;
@@ -901,11 +1043,13 @@ body {
 }
 .symframe-sub {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--sf-text-9);
+
   letter-spacing: 0.04em;
   color: var(--text-dim);
   opacity: 0.55;
-  margin-top: 4px;
+  margin-top: var(--sf-pad-4);
+
   line-height: 1.4;
 }
 
@@ -913,14 +1057,16 @@ body {
 .symframe-modes {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 6px;
+  gap: var(--sf-pad-6);
+
+  margin-top: var(--sf-pad-6);
 }
 .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-32);
   background: transparent;
   padding: 0;
   cursor: pointer;
@@ -932,32 +1078,35 @@ body {
 }
 .mode-chip:hover {
   border-color: var(--accent-cyan);
-  background: rgba(0, 212, 255, 0.15);
+  background: var(--sf-cyan-15);
   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-50);
 }
 .mode-auto {
   margin-left: auto;
-  padding: 2px 8px;
+  padding: var(--sf-pad-2) var(--sf-pad-8);
+
   font-family: var(--font-mono);
-  font-size: 8px;
+  font-size: var(--sf-text-8);
+
   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-08);
+  border: 1px solid var(--sf-cyan-32);
+  border-radius: var(--sf-radius-8);
+
   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-20);
   color: var(--text);
 }
 
@@ -966,15 +1115,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-4);
+
+  padding: var(--sf-pad-2) 7px;
+
+  font-size: var(--sf-text-11);
+
   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-32);
+  border-radius: var(--sf-radius-8);
+
   cursor: pointer;
   transition:
     background 0.15s ease,
@@ -982,7 +1135,7 @@ body {
     transform 0.15s ease;
 }
 .considering-btn:hover {
-  background: rgba(245, 183, 58, 0.12);
+  background: var(--sf-amber-12);
   border-color: #f5b73a;
 }
 .considering-btn:active {
@@ -991,16 +1144,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-32);
   }
   50% {
-    border-color: rgba(244, 114, 182, 0.6);
-    background: rgba(244, 114, 182, 0.1);
+    border-color: var(--sf-pink-60);
+    background: var(--sf-pink-10);
   }
 }
 /* While considering-weighing is active, dim non-weighing cards so the
@@ -1014,14 +1167,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;
   }
 }
@@ -1037,8 +1191,10 @@ body {
   border-bottom: 1px dashed currentColor;
   cursor: pointer;
   font-weight: 500;
-  padding: 0 2px;
-  border-radius: 3px;
+  padding: 0 var(--sf-pad-2);
+
+  border-radius: var(--sf-radius-3);
+
   transition:
     background 0.15s ease,
     border-bottom-style 0.15s ease;
@@ -1049,7 +1205,7 @@ body {
   opacity: 0.7;
 }
 .panel-ref:hover {
-  background: rgba(0, 212, 255, 0.12);
+  background: var(--sf-cyan-12);
   border-bottom-style: solid;
 }
 /* Orphan reference — the card is no longer in the panel. Subdued so
@@ -1064,15 +1220,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-1s) ease-out;
 }
 @keyframes panel-ref-miss-pulse {
   0%,
   100% {
-    background: rgba(0, 212, 255, 0.12);
+    background: var(--sf-cyan-12);
   }
   50% {
-    background: rgba(244, 114, 182, 0.22);
+    background: var(--sf-pink-22);
   }
 }
 
@@ -1084,7 +1240,10 @@ body {
    foreground card takes the visual stage. If a focusedId is set, the
    matching card gets a cyan halo + others fade out. */
 .symframe[data-mode="focus"] {
-  grid-template-rows: auto 1fr 0;
+  /* Stage D.3: minmax(0, 1fr) so the middle row can shrink below
+     content size and the cards container's overflow-y: auto engages
+     instead of expanding the row. */
+  grid-template-rows: auto minmax(0, 1fr) 0;
 }
 .symframe[data-mode="focus"] .symframe-awaiting {
   display: none;
@@ -1100,7 +1259,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;
@@ -1117,9 +1276,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-35),
+    inset 0 1px 0 var(--sf-white-06),
+    0 4px 12px var(--sf-black-25);
   border-color: var(--accent-cyan) !important;
   transition:
     box-shadow 0.4s ease,
@@ -1144,13 +1303,19 @@ body {
    scrolls internally when its content exceeds the now-larger footer.
 */
 .symframe[data-mode="awaiting"] {
-  grid-template-rows: auto minmax(60px, 1fr) auto;
+  /* Stage D.3: minmax(0, 1fr) on substrate so it can shrink (and
+     scroll internally) when awaiting takes most of the column.
+     `auto` on the footer row + max-height: 80% on .symframe-awaiting
+     bounds it; `overflow: hidden` on the footer clips any overflow
+     from its inner list (which has its own overflow-y: auto). */
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .symframe[data-mode="awaiting"] .symframe-substrate {
   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,
@@ -1165,9 +1330,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-04);
+  border-radius: var(--sf-radius-10);
+
+  margin-top: var(--sf-pad-8);
 }
 .symframe[data-mode="awaiting"] .awaiting-list {
   /* The footer is now sized larger than baseline. Let the list flex
@@ -1178,9 +1344,11 @@ body {
 }
 
 /* Quiet mode: only the substrate breathes. Cards + AWAITING hidden.
-   This is the "deep think" or "nothing to surface" posture. */
+   This is the "deep think" or "nothing to surface" posture.
+   Stage D.3: minmax(0, 1fr) so the substrate can shrink below
+   content size and scroll internally. */
 .symframe[data-mode="quiet"] {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .symframe[data-mode="quiet"] .symframe-cards,
 .symframe[data-mode="quiet"] .symframe-awaiting {
@@ -1231,10 +1399,11 @@ body {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--sf-pad-10);
+
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.12) transparent;
+  scrollbar-color: var(--sf-cyan-12) 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
@@ -1248,8 +1417,8 @@ body {
   width: 3px;
 }
 .symframe-cards::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.12);
-  border-radius: 2px;
+  background: var(--sf-cyan-12);
+  border-radius: var(--sf-radius-2);
 }
 
 /* ── Substrate (ambient reasoning layer, Stage B) ──────────────────── */
@@ -1264,17 +1433,19 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 2px 4px 4px;
+  gap: var(--sf-pad-6);
+
+  padding: var(--sf-pad-2) var(--sf-pad-4) var(--sf-pad-4);
+
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.18) transparent;
+  scrollbar-color: var(--sf-cyan-18) 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-18);
+  border-radius: var(--sf-radius-2);
 }
 
 /* Substrate entry — decay-driven visual. Custom properties are written
@@ -1297,17 +1468,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-32);
+  box-shadow: 0 0 12px var(--sf-cyan-08);
 }
 .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-6);
+
+  animation: pulse var(--sf-time-pulse) ease-in-out infinite;
+
   flex-shrink: 0;
 }
 
@@ -1318,13 +1492,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-06);
   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-6) var(--sf-pad-8);
+
+  border: 1px solid var(--sf-cyan-18);
   opacity: 0.7;
   filter: none;
 }
@@ -1345,7 +1521,8 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: var(--sf-pad-10);
+
   padding: 40px 0;
   margin: auto;
   opacity: 0.85;
@@ -1353,17 +1530,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-45) 0%, rgba(0, 212, 255, 0) 70%);
+  animation: quiet-pulse var(--sf-time-pulse-quiet) ease-in-out infinite;
 }
 .substrate-quiet-label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--sf-text-9);
+
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-dim);
@@ -1386,7 +1561,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;
   }
@@ -1406,22 +1582,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-12);
+  border-radius: var(--sf-radius-10);
+
+  padding: var(--sf-pad-10) var(--sf-pad-12);
+
   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-white-04),
+    0 4px 12px var(--sf-black-25);
 }
 .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-18);
 }
 
 /* Phase 2: dynamic-card sub-elements (only present on cards added via
@@ -1430,17 +1608,19 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: var(--sf-pad-8);
 }
 .symframe-card-dismiss {
   background: transparent;
   border: none;
   color: var(--text-dim);
-  font-size: 16px;
+  font-size: var(--sf-text-16);
+
   line-height: 1;
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--sf-radius-4);
+
   cursor: pointer;
   opacity: 0.6;
   transition:
@@ -1455,7 +1635,7 @@ body {
 .symframe-card-dismiss:hover {
   opacity: 1;
   color: var(--accent-cyan);
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-08);
 }
 
 /* Stage C: pin glyph — replaces dismiss button on pinned cards. Click
@@ -1466,11 +1646,13 @@ body {
   background: transparent;
   border: none;
   color: var(--accent-cyan);
-  font-size: 13px;
+  font-size: var(--sf-text-13);
+
   line-height: 1;
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--sf-radius-4);
+
   cursor: pointer;
   opacity: 0.8;
   padding: 0;
@@ -1483,33 +1665,33 @@ body {
 }
 .symframe-card-pin:hover {
   opacity: 1;
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-08);
 }
 
 /* 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-600ms) 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-55),
+      inset 0 1px 0 var(--sf-white-04),
+      0 4px 12px var(--sf-black-25);
   }
   60% {
-    border-color: rgba(0, 212, 255, 0.6);
+    border-color: var(--sf-cyan-60);
     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-white-04),
+      0 4px 12px var(--sf-black-25);
   }
   100% {
-    border-color: rgba(0, 212, 255, 0.12);
+    border-color: var(--sf-cyan-12);
     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-white-04),
+      0 4px 12px var(--sf-black-25);
   }
 }
 
@@ -1518,10 +1700,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-800ms) cubic-bezier(0.4, 0, 0.6, 1),
+    transform var(--sf-time-800ms) cubic-bezier(0.4, 0, 0.6, 1),
+    max-height var(--sf-time-800ms) cubic-bezier(0.4, 0, 0.6, 1),
+    margin var(--sf-time-800ms) ease;
   opacity: 0;
   transform: scale(0.92);
   max-height: 0;
@@ -1538,7 +1720,7 @@ body {
     border-color: var(--accent-cyan);
   }
   .symframe-card.symframe-releasing {
-    transition: opacity 200ms ease;
+    transition: opacity var(--sf-time-200ms) ease;
     transform: none;
     max-height: none;
   }
@@ -1553,12 +1735,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-12);
+  margin-top: var(--sf-pad-8);
+
+  padding: var(--sf-pad-8) var(--sf-pad-6) var(--sf-pad-4);
+
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--sf-pad-4);
+
   /* 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)
@@ -1573,19 +1758,22 @@ body {
 .awaiting-header {
   display: flex;
   align-items: baseline;
-  gap: 8px;
-  padding: 0 4px 4px;
+  gap: var(--sf-pad-8);
+
+  padding: 0 var(--sf-pad-4) var(--sf-pad-4);
 }
 .awaiting-title {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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-9);
+
   letter-spacing: 0.04em;
   color: var(--text-dim);
   opacity: 0.6;
@@ -1594,38 +1782,44 @@ body {
 .awaiting-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  max-height: 200px;
+  gap: var(--sf-pad-2);
+
+  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-18) 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-18);
+  border-radius: var(--sf-radius-2);
 }
 .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-6);
+
+  padding: var(--sf-pad-5) var(--sf-pad-8);
+
+  border-radius: var(--sf-radius-6);
+
+  background: var(--sf-white-02);
   border: 1px solid transparent;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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-06);
+  border-color: var(--sf-cyan-15);
 }
 .awaiting-item-disabled {
   opacity: 0.45;
@@ -1636,7 +1830,8 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: var(--sf-text-11);
+
   line-height: 1;
 }
 .awaiting-glyph-subagent {
@@ -1658,7 +1853,8 @@ body {
 .awaiting-meta {
   color: var(--text-dim);
   opacity: 0.75;
-  font-size: 9px;
+  font-size: var(--sf-text-9);
+
   letter-spacing: 0.04em;
   text-transform: lowercase;
   white-space: nowrap;
@@ -1667,10 +1863,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-10);
+
   color: var(--text-dim);
   opacity: 0.55;
-  padding: 8px 10px;
+  padding: var(--sf-pad-8) var(--sf-pad-10);
+
   text-align: center;
   font-style: italic;
 }
@@ -1679,16 +1877,21 @@ body {
 .awaiting-add-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 4px;
+  gap: var(--sf-pad-6);
+
+  margin-top: var(--sf-pad-4);
+
   align-self: flex-start;
-  padding: 4px 10px;
+  padding: var(--sf-pad-4) var(--sf-pad-10);
+
   background: transparent;
-  border: 1px dashed rgba(0, 212, 255, 0.25);
-  border-radius: 6px;
+  border: 1px dashed var(--sf-cyan-25);
+  border-radius: var(--sf-radius-6);
+
   color: var(--text-dim);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   letter-spacing: 0.04em;
   cursor: pointer;
   transition:
@@ -1699,7 +1902,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-04);
 }
 .awaiting-add-btn svg {
   width: 12px;
@@ -1709,36 +1912,44 @@ body {
   position: absolute;
   left: 10px;
   bottom: 100%;
-  margin-bottom: 6px;
-  background: rgba(10, 16, 26, 0.95);
+  margin-bottom: var(--sf-pad-6);
+
+  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-20);
+  border-radius: var(--sf-radius-8);
+
+  padding: var(--sf-pad-4);
+
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--sf-pad-2);
+
   min-width: 180px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 8px 24px var(--sf-black-40);
   z-index: 20;
 }
 .awaiting-add-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
+  gap: var(--sf-pad-8);
+
+  padding: var(--sf-pad-6) var(--sf-pad-10);
+
   background: transparent;
   border: none;
-  border-radius: 5px;
+  border-radius: var(--sf-radius-5);
+
   color: var(--text);
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--sf-text-11);
+
   cursor: pointer;
   text-align: left;
 }
 .awaiting-add-item:hover {
-  background: rgba(0, 212, 255, 0.08);
+  background: var(--sf-cyan-08);
   color: var(--accent-cyan);
 }
 .awaiting-add-glyph {
@@ -1749,49 +1960,58 @@ body {
 
 .symframe-card-body {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--sf-text-11);
+
   line-height: 1.5;
   color: var(--text);
-  margin-top: 8px;
+  margin-top: var(--sf-pad-8);
+
   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-6);
+
+  margin-top: var(--sf-pad-10);
+
+  padding-top: var(--sf-pad-8);
+
+  border-top: 1px solid var(--sf-white-05);
   flex-wrap: wrap;
 }
 .symframe-card-action {
   flex: 1 1 auto;
   min-width: 60px;
-  padding: 6px 10px;
+  padding: var(--sf-pad-6) var(--sf-pad-10);
+
   border: 1px solid var(--glass-border);
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--sf-radius-5);
+
+  background: var(--sf-white-03);
   color: var(--text-dim);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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-08);
   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-14);
+  box-shadow: 0 0 8px var(--sf-cyan-18);
 }
 
 /* ── Stage D.1 (3.5.27): intent-aware visual treatment ──────────── */
@@ -1815,14 +2035,17 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  padding: 2px 8px 2px 6px;
+  padding: var(--sf-pad-2) var(--sf-pad-8) var(--sf-pad-2) var(--sf-pad-6);
+
   font-family: var(--font-mono);
-  font-size: 8px;
+  font-size: var(--sf-text-8);
+
   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-black-55);
+  border-radius: var(--sf-radius-10) 0 var(--sf-radius-6) 0;
+
   border-right: 1px solid currentColor;
   border-bottom: 1px solid currentColor;
   pointer-events: none;
@@ -1838,9 +2061,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-65),
+    inset 0 1px 0 var(--sf-white-04),
+    0 4px 12px var(--sf-black-25);
 }
 .symframe-card-dynamic[data-intent="holding"]::before {
   color: var(--accent-cyan);
@@ -1850,8 +2073,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-white-04),
+    0 4px 12px var(--sf-black-25);
 }
 .symframe-card-dynamic[data-intent="weighing"]::before {
   color: #f5b73a;
@@ -1859,22 +2082,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-pulse-prod) 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-55),
+      inset 0 1px 0 var(--sf-white-04),
+      0 4px 12px var(--sf-black-25);
   }
   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-100),
+      inset 0 1px 0 var(--sf-white-04),
+      0 4px 12px var(--sf-black-25),
+      0 0 14px var(--sf-green-20);
   }
 }
 .symframe-card-dynamic[data-intent="producing"]::before {
@@ -1886,8 +2109,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-white-04),
+    0 4px 12px var(--sf-black-25);
 }
 .symframe-card-dynamic[data-intent="drafted"]::before {
   color: #8b5cf6;
@@ -1895,30 +2118,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-55);
   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-12);
   border-color: #8b5cf6;
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary {
-  background: rgba(139, 92, 246, 0.22);
+  background: var(--sf-violet-22);
   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-32);
+  box-shadow: 0 0 10px var(--sf-violet-25);
 }
 
 /* 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-white-04),
+    0 4px 12px var(--sf-black-25);
   opacity: 0.88;
   filter: saturate(0.75);
 }
@@ -1932,13 +2155,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-55),
+    inset 0 1px 0 var(--sf-white-04),
+    0 4px 12px var(--sf-black-25);
 }
 .symframe-card-dynamic[data-intent="awaiting"]::before {
   content: "awaiting → footer";
-  color: rgba(244, 114, 182, 0.85);
+  color: var(--sf-pink-85);
 }
 
 /* Reduced-motion: skip the producing pulse but keep the static
@@ -1947,9 +2170,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-75),
+      inset 0 1px 0 var(--sf-white-04),
+      0 4px 12px var(--sf-black-25);
   }
 }
 
@@ -1962,54 +2185,64 @@ body {
 .symframe-body-markdown h2,
 .symframe-body-markdown h3,
 .symframe-body-markdown h4 {
-  font-size: 12px;
+  font-size: var(--sf-text-12);
+
   font-weight: 600;
-  margin: 8px 0 4px;
+  margin: var(--sf-pad-8) 0 var(--sf-pad-4);
+
   color: var(--text);
 }
 .symframe-body-markdown p {
-  margin: 4px 0;
+  margin: var(--sf-pad-4) 0;
 }
 .symframe-body-markdown ul,
 .symframe-body-markdown ol {
   padding-left: 18px;
-  margin: 4px 0;
+  margin: var(--sf-pad-4) 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-10);
+
+  padding: 1px var(--sf-pad-4);
+
+  background: var(--sf-white-04);
+  border-radius: var(--sf-radius-3);
 }
 .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-black-25);
+  border: 1px solid var(--sf-white-05);
+  border-radius: var(--sf-radius-5);
+
+  padding: var(--sf-pad-8);
+
   overflow-x: auto;
-  margin: 6px 0;
+  margin: var(--sf-pad-6) 0;
 }
 .symframe-body-markdown pre code {
   background: transparent;
   padding: 0;
-  font-size: 10px;
+  font-size: var(--sf-text-10);
 }
 
 /* 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-black-30);
+  border: 1px solid var(--sf-white-06);
+  border-radius: var(--sf-radius-5);
+
+  padding: var(--sf-pad-8) var(--sf-pad-10);
+
   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-10);
+
   line-height: 1.45;
   color: var(--text);
   background: transparent;
@@ -2019,28 +2252,33 @@ body {
 .symframe-body-email {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--sf-pad-4);
 }
 .symframe-email-row {
   display: flex;
-  gap: 6px;
+  gap: var(--sf-pad-6);
+
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   letter-spacing: 0.02em;
-  padding: 2px 0;
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
+  padding: var(--sf-pad-2) 0;
+
+  border-bottom: 1px dashed var(--sf-white-05);
 }
 .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-white-08);
+  margin-bottom: var(--sf-pad-4);
+
+  padding-bottom: var(--sf-pad-4);
 }
 .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-9);
+
   min-width: 48px;
   opacity: 0.7;
 }
@@ -2050,26 +2288,29 @@ body {
 }
 .symframe-email-body {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--sf-text-11);
+
   line-height: 1.5;
   color: var(--text);
   white-space: pre-wrap;
   word-break: break-word;
-  margin-top: 4px;
+  margin-top: var(--sf-pad-4);
 }
 
 /* PDF embed */
 .symframe-body-pdf {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--sf-pad-6);
 }
 .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-white-08);
+  border-radius: var(--sf-radius-5);
+
+  background: var(--sf-black-20);
 }
 
 /* Audio + video shared chrome */
@@ -2077,23 +2318,26 @@ body {
 .symframe-body-video {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--sf-pad-6);
 }
 .symframe-audio,
 .symframe-video {
   width: 100%;
-  border-radius: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  border-radius: var(--sf-radius-5);
+
+  background: var(--sf-black-20);
 }
 .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-10);
+
   color: var(--text-dim);
   opacity: 0.6;
   font-style: italic;
@@ -2102,15 +2346,19 @@ body {
 /* Download link — used by pdf/audio/video renderers */
 .symframe-download {
   display: inline-block;
-  padding: 4px 8px;
+  padding: var(--sf-pad-4) var(--sf-pad-8);
+
   border: 1px solid var(--glass-border);
-  border-radius: 4px;
+  border-radius: var(--sf-radius-4);
+
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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 {
@@ -6692,17 +6940,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-6);
+
   vertical-align: middle;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity var(--sf-time-slow) 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
@@ -6715,18 +6966,20 @@ body {
 .reasoning-run-sep {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin: 4px 0 2px;
+  gap: var(--sf-pad-8);
+
+  margin: var(--sf-pad-4) 0 var(--sf-pad-2);
 }
 .reasoning-run-sep::before,
 .reasoning-run-sep::after {
   content: "";
   flex: 1;
   height: 1px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--sf-white-06);
 }
 .reasoning-run-sep-label {
-  font-size: 9px;
+  font-size: var(--sf-text-9);
+
   font-family: var(--font-mono);
   font-weight: 600;
   letter-spacing: 0.1em;
@@ -6738,59 +6991,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-4);
+
+  padding: var(--sf-pad-6) var(--sf-pad-8);
+
+  background: var(--sf-white-02);
+  border: 1px solid var(--sf-white-05);
+  border-radius: var(--sf-radius-8);
+
+  transition: border-color var(--sf-time-quick);
 }
 .reasoning-entry:hover {
-  border-color: rgba(255, 255, 255, 0.09);
+  border-color: var(--sf-white-09);
 }
 
 /* Entry header row: badge + label */
 .reasoning-entry-header {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--sf-pad-6);
 }
 .reasoning-entry-badge {
-  font-size: 9px;
+  font-size: var(--sf-text-9);
+
   font-family: var(--font-mono);
   font-weight: 700;
   letter-spacing: 0.1em;
-  padding: 1px 5px;
-  border-radius: 4px;
+  padding: 1px var(--sf-pad-5);
+
+  border-radius: var(--sf-radius-4);
+
   flex-shrink: 0;
 }
 /* Thinking badge — cyan tint */
 .reasoning-entry-badge.badge-think {
-  background: rgba(0, 212, 255, 0.1);
+  background: var(--sf-cyan-10);
   color: var(--accent-cyan);
-  border: 1px solid rgba(0, 212, 255, 0.18);
+  border: 1px solid var(--sf-cyan-18);
 }
 /* Tool call badge — purple tint */
 .reasoning-entry-badge.badge-tool {
-  background: rgba(139, 92, 246, 0.12);
+  background: var(--sf-violet-12);
   color: var(--accent-purple);
-  border: 1px solid rgba(139, 92, 246, 0.2);
+  border: 1px solid var(--sf-violet-20);
 }
 /* Tool result badge — green tint */
 .reasoning-entry-badge.badge-result {
-  background: rgba(52, 211, 153, 0.1);
+  background: var(--sf-green-10);
   color: var(--accent-green);
-  border: 1px solid rgba(52, 211, 153, 0.18);
+  border: 1px solid var(--sf-green-18);
 }
 /* Narration badge — dim white tint */
 .reasoning-entry-badge.badge-narration {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--sf-white-06);
   color: var(--text-muted);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--sf-white-10);
 }
 
 .reasoning-entry-name {
-  font-size: 11px;
+  font-size: var(--sf-text-11);
+
   font-family: var(--font-mono);
   color: var(--text-muted);
   white-space: nowrap;
@@ -6801,48 +7061,55 @@ body {
 
 /* Thinking body */
 .reasoning-think-body {
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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-4) var(--sf-pad-2) 0;
+
   opacity: 0.75;
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.15) transparent;
+  scrollbar-color: var(--sf-cyan-15) 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-15);
+  border-radius: var(--sf-radius-2);
 }
 
 /* Tool detail — compact JSON preview, collapsible */
 .reasoning-tool-preview {
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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-2) 0 0;
 }
 .reasoning-tool-detail {
   display: none;
-  font-size: 10px;
+  font-size: var(--sf-text-10);
+
   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-4) var(--sf-pad-2) 0;
+
   opacity: 0.65;
-  max-height: 100px;
+  max-height: var(--sf-bound-tool);
+
   overflow-y: auto;
 }
 .reasoning-entry.expanded .reasoning-tool-detail {
@@ -6854,10 +7121,10 @@ body {
 
 /* Result row */
 .reasoning-result-meta {
-  font-size: 10px;
+  font-size: var(--sf-text-10);
   font-family: var(--font-mono);
   color: var(--text-dim);
-  padding: 2px 0 0;
+  padding: var(--sf-pad-2) 0 0;
 }
 
 /* ── Lazy-load sentinel ──────────────────────────────────────────── */