@symerian/symi 3.5.31 → 3.5.32

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

@@ -865,118 +865,90 @@ 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 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.
+/* ── 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 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);
+  /* ── 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 (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;
+  /* ── 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 (height limits) ── */
+  /* ── Content bounds (semantic, unchanged) ── */
   --sf-bound-row: 38px;
   --sf-bound-tool: 100px;
   --sf-bound-detail: 120px;
@@ -987,34 +959,28 @@ body {
   /* ── 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-medium: 0.6s;
   --sf-time-easy: 0.8s;
-  --sf-time-800ms: 800ms;
-  --sf-time-1s: 1s;
+  --sf-time-slow: 1s;
   --sf-time-pulse: 1.2s;
-  --sf-time-pulse-prod: 2.6s;
-  --sf-time-pulse-quiet: 3.2s;
+  --sf-time-breathe: 3.2s;
 }
 
 .symframe {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
-  gap: var(--sf-pad-8);
+  gap: var(--sf-pad-lg);
 
   flex: 1 1 0;
   min-height: 0;
   overflow: hidden;
 }
 .symframe-header {
-  padding: var(--sf-pad-8) var(--sf-pad-10) var(--sf-pad-10);
+  padding: var(--sf-pad-lg) var(--sf-pad-xl) var(--sf-pad-xl);
 
-  border-bottom: 1px solid var(--sf-cyan-12);
-  margin-bottom: var(--sf-pad-4);
+  border-bottom: 1px solid var(--sf-cyan-veil);
+  margin-bottom: var(--sf-pad-sm);
 
   min-height: 0;
 }
@@ -1022,11 +988,11 @@ body {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: var(--sf-pad-10);
+  gap: var(--sf-pad-xl);
 }
 .symframe-title {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-12);
+  font-size: var(--sf-text-lg);
 
   font-weight: 600;
   letter-spacing: 0.14em;
@@ -1034,7 +1000,7 @@ body {
 }
 .symframe-count {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   letter-spacing: 0.06em;
   color: var(--text-dim);
@@ -1043,12 +1009,12 @@ body {
 }
 .symframe-sub {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   letter-spacing: 0.04em;
   color: var(--text-dim);
   opacity: 0.55;
-  margin-top: var(--sf-pad-4);
+  margin-top: var(--sf-pad-sm);
 
   line-height: 1.4;
 }
@@ -1057,16 +1023,16 @@ body {
 .symframe-modes {
   display: flex;
   align-items: center;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 
-  margin-top: var(--sf-pad-6);
+  margin-top: var(--sf-pad-md);
 }
 .mode-chip {
   width: 10px;
   height: 10px;
   border-radius: var(--sf-radius-pill);
 
-  border: 1px solid var(--sf-cyan-32);
+  border: 1px solid var(--sf-cyan-pulse);
   background: transparent;
   padding: 0;
   cursor: pointer;
@@ -1078,27 +1044,27 @@ body {
 }
 .mode-chip:hover {
   border-color: var(--accent-cyan);
-  background: var(--sf-cyan-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 var(--sf-cyan-50);
+  box-shadow: 0 0 6px var(--sf-cyan-flash);
 }
 .mode-auto {
   margin-left: auto;
-  padding: var(--sf-pad-2) var(--sf-pad-8);
+  padding: var(--sf-pad-xs) var(--sf-pad-lg);
 
   font-family: var(--font-mono);
-  font-size: var(--sf-text-8);
+  font-size: var(--sf-text-xs);
 
   font-weight: 700;
   letter-spacing: 0.12em;
   color: var(--accent-cyan);
-  background: var(--sf-cyan-08);
-  border: 1px solid var(--sf-cyan-32);
-  border-radius: var(--sf-radius-8);
+  background: var(--sf-cyan-veil);
+  border: 1px solid var(--sf-cyan-pulse);
+  border-radius: var(--sf-radius-lg);
 
   cursor: pointer;
   transition:
@@ -1106,7 +1072,7 @@ body {
     color 0.15s ease;
 }
 .mode-auto:hover {
-  background: var(--sf-cyan-20);
+  background: var(--sf-cyan-edge);
   color: var(--text);
 }
 
@@ -1115,18 +1081,18 @@ body {
    AND adds .considering-weighing to #symframe (CSS below) which dims
    non-weighing cards for the duration. */
 .considering-btn {
-  margin-left: var(--sf-pad-4);
+  margin-left: var(--sf-pad-sm);
 
-  padding: var(--sf-pad-2) 7px;
+  padding: var(--sf-pad-xs) 7px;
 
-  font-size: var(--sf-text-11);
+  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 var(--sf-amber-32);
-  border-radius: var(--sf-radius-8);
+  border: 1px solid var(--sf-amber-edge);
+  border-radius: var(--sf-radius-lg);
 
   cursor: pointer;
   transition:
@@ -1135,7 +1101,7 @@ body {
     transform 0.15s ease;
 }
 .considering-btn:hover {
-  background: var(--sf-amber-12);
+  background: var(--sf-amber-tint);
   border-color: #f5b73a;
 }
 .considering-btn:active {
@@ -1149,11 +1115,11 @@ body {
 @keyframes considering-empty-pulse {
   0%,
   100% {
-    border-color: var(--sf-amber-32);
+    border-color: var(--sf-amber-edge);
   }
   50% {
-    border-color: var(--sf-pink-60);
-    background: var(--sf-pink-10);
+    border-color: var(--sf-pink-strong);
+    background: var(--sf-pink-tint);
   }
 }
 /* While considering-weighing is active, dim non-weighing cards so the
@@ -1191,9 +1157,9 @@ body {
   border-bottom: 1px dashed currentColor;
   cursor: pointer;
   font-weight: 500;
-  padding: 0 var(--sf-pad-2);
+  padding: 0 var(--sf-pad-xs);
 
-  border-radius: var(--sf-radius-3);
+  border-radius: var(--sf-radius-xs);
 
   transition:
     background 0.15s ease,
@@ -1205,7 +1171,7 @@ body {
   opacity: 0.7;
 }
 .panel-ref:hover {
-  background: var(--sf-cyan-12);
+  background: var(--sf-cyan-veil);
   border-bottom-style: solid;
 }
 /* Orphan reference — the card is no longer in the panel. Subdued so
@@ -1220,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 var(--sf-time-1s) ease-out;
+  animation: panel-ref-miss-pulse var(--sf-time-slow) ease-out;
 }
 @keyframes panel-ref-miss-pulse {
   0%,
   100% {
-    background: var(--sf-cyan-12);
+    background: var(--sf-cyan-veil);
   }
   50% {
-    background: var(--sf-pink-22);
+    background: var(--sf-pink-edge);
   }
 }
 
@@ -1276,9 +1242,9 @@ body {
      plenty of focus signal on their own. */
   opacity: 1 !important;
   box-shadow:
-    0 0 24px var(--sf-cyan-35),
-    inset 0 1px 0 var(--sf-white-06),
-    0 4px 12px var(--sf-black-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,
@@ -1330,10 +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: var(--sf-cyan-04);
-  border-radius: var(--sf-radius-10);
+  background: var(--sf-cyan-hairline);
+  border-radius: var(--sf-radius-xl);
 
-  margin-top: var(--sf-pad-8);
+  margin-top: var(--sf-pad-lg);
 }
 .symframe[data-mode="awaiting"] .awaiting-list {
   /* The footer is now sized larger than baseline. Let the list flex
@@ -1399,11 +1365,11 @@ body {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-10);
+  gap: var(--sf-pad-xl);
 
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--sf-cyan-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
@@ -1417,8 +1383,8 @@ body {
   width: 3px;
 }
 .symframe-cards::-webkit-scrollbar-thumb {
-  background: var(--sf-cyan-12);
-  border-radius: var(--sf-radius-2);
+  background: var(--sf-cyan-veil);
+  border-radius: var(--sf-radius-xs);
 }
 
 /* ── Substrate (ambient reasoning layer, Stage B) ──────────────────── */
@@ -1433,19 +1399,19 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 
-  padding: var(--sf-pad-2) var(--sf-pad-4) var(--sf-pad-4);
+  padding: var(--sf-pad-xs) var(--sf-pad-sm) var(--sf-pad-sm);
 
   scrollbar-width: thin;
-  scrollbar-color: var(--sf-cyan-18) transparent;
+  scrollbar-color: var(--sf-cyan-edge) transparent;
 }
 .symframe-substrate::-webkit-scrollbar {
   width: 3px;
 }
 .symframe-substrate::-webkit-scrollbar-thumb {
-  background: var(--sf-cyan-18);
-  border-radius: var(--sf-radius-2);
+  background: var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-xs);
 }
 
 /* Substrate entry — decay-driven visual. Custom properties are written
@@ -1468,8 +1434,8 @@ body {
   opacity: 1;
   filter: none;
   transform: none;
-  border-color: var(--sf-cyan-32);
-  box-shadow: 0 0 12px var(--sf-cyan-08);
+  border-color: var(--sf-cyan-pulse);
+  box-shadow: 0 0 12px var(--sf-cyan-veil);
 }
 .substrate-live-dot {
   display: inline-block;
@@ -1478,7 +1444,7 @@ body {
   border-radius: var(--sf-radius-pill);
 
   background: var(--accent-cyan);
-  margin-right: var(--sf-pad-6);
+  margin-right: var(--sf-pad-md);
 
   animation: pulse var(--sf-time-pulse) ease-in-out infinite;
 
@@ -1492,15 +1458,15 @@ body {
   max-height: 2px;
   padding: 0;
   border-width: 0;
-  border-top: 1px solid var(--sf-cyan-06);
+  border-top: 1px solid var(--sf-cyan-hairline);
   overflow: hidden;
 }
 .substrate-entry.substrate-texture:hover {
   max-height: var(--sf-bound-list);
 
-  padding: var(--sf-pad-6) var(--sf-pad-8);
+  padding: var(--sf-pad-md) var(--sf-pad-lg);
 
-  border: 1px solid var(--sf-cyan-18);
+  border: 1px solid var(--sf-cyan-edge);
   opacity: 0.7;
   filter: none;
 }
@@ -1521,7 +1487,7 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--sf-pad-10);
+  gap: var(--sf-pad-xl);
 
   padding: 40px 0;
   margin: auto;
@@ -1532,12 +1498,12 @@ body {
   height: 14px;
   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;
+  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: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   letter-spacing: 0.18em;
   text-transform: uppercase;
@@ -1585,21 +1551,21 @@ body {
   background: var(--sf-surface-card);
   backdrop-filter: blur(10px) saturate(140%);
   -webkit-backdrop-filter: blur(10px) saturate(140%);
-  border: 1px solid var(--sf-cyan-12);
-  border-radius: var(--sf-radius-10);
+  border: 1px solid var(--sf-cyan-veil);
+  border-radius: var(--sf-radius-xl);
 
-  padding: var(--sf-pad-10) var(--sf-pad-12);
+  padding: var(--sf-pad-xl) var(--sf-pad-2xl);
 
   box-shadow:
-    inset 0 1px 0 var(--sf-white-04),
-    0 4px 12px var(--sf-black-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: var(--sf-cyan-18);
+  border-color: var(--sf-cyan-edge);
 }
 
 /* Phase 2: dynamic-card sub-elements (only present on cards added via
@@ -1608,18 +1574,18 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sf-pad-8);
+  gap: var(--sf-pad-lg);
 }
 .symframe-card-dismiss {
   background: transparent;
   border: none;
   color: var(--text-dim);
-  font-size: var(--sf-text-16);
+  font-size: var(--sf-text-xl);
 
   line-height: 1;
   width: 18px;
   height: 18px;
-  border-radius: var(--sf-radius-4);
+  border-radius: var(--sf-radius-sm);
 
   cursor: pointer;
   opacity: 0.6;
@@ -1635,7 +1601,7 @@ body {
 .symframe-card-dismiss:hover {
   opacity: 1;
   color: var(--accent-cyan);
-  background: var(--sf-cyan-08);
+  background: var(--sf-cyan-veil);
 }
 
 /* Stage C: pin glyph — replaces dismiss button on pinned cards. Click
@@ -1646,12 +1612,12 @@ body {
   background: transparent;
   border: none;
   color: var(--accent-cyan);
-  font-size: var(--sf-text-13);
+  font-size: var(--sf-text-lg);
 
   line-height: 1;
   width: 18px;
   height: 18px;
-  border-radius: var(--sf-radius-4);
+  border-radius: var(--sf-radius-sm);
 
   cursor: pointer;
   opacity: 0.8;
@@ -1665,33 +1631,33 @@ body {
 }
 .symframe-card-pin:hover {
   opacity: 1;
-  background: var(--sf-cyan-08);
+  background: var(--sf-cyan-veil);
 }
 
 /* Stage C: dwell pulse — 600ms cyan border + glow then return. */
 .symframe-card.symframe-dwelling {
-  animation: symframe-dwell var(--sf-time-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 var(--sf-cyan-55),
-      inset 0 1px 0 var(--sf-white-04),
-      0 4px 12px var(--sf-black-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: var(--sf-cyan-60);
+    border-color: var(--sf-cyan-flash);
     box-shadow:
       0 0 0 6px rgba(0, 212, 255, 0),
-      inset 0 1px 0 var(--sf-white-04),
-      0 4px 12px var(--sf-black-25);
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
   100% {
-    border-color: var(--sf-cyan-12);
+    border-color: var(--sf-cyan-veil);
     box-shadow:
-      inset 0 1px 0 var(--sf-white-04),
-      0 4px 12px var(--sf-black-25);
+      inset 0 1px 0 var(--sf-veil-faint),
+      0 4px 12px var(--sf-shadow-mid);
   }
 }
 
@@ -1700,10 +1666,10 @@ body {
    on transitionend or after a 900ms fail-safe timeout. */
 .symframe-card.symframe-releasing {
   transition:
-    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 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;
@@ -1720,7 +1686,7 @@ body {
     border-color: var(--accent-cyan);
   }
   .symframe-card.symframe-releasing {
-    transition: opacity var(--sf-time-200ms) ease;
+    transition: opacity var(--sf-time-quick) ease;
     transform: none;
     max-height: none;
   }
@@ -1735,14 +1701,14 @@ body {
    Click [+ Add] → menu with "Spawn subagent" / "Add scheduled task". */
 .symframe-awaiting {
   position: relative;
-  border-top: 1px solid var(--sf-cyan-12);
-  margin-top: var(--sf-pad-8);
+  border-top: 1px solid var(--sf-cyan-veil);
+  margin-top: var(--sf-pad-lg);
 
-  padding: var(--sf-pad-8) var(--sf-pad-6) var(--sf-pad-4);
+  padding: var(--sf-pad-lg) var(--sf-pad-md) var(--sf-pad-sm);
 
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-4);
+  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
@@ -1758,13 +1724,13 @@ body {
 .awaiting-header {
   display: flex;
   align-items: baseline;
-  gap: var(--sf-pad-8);
+  gap: var(--sf-pad-lg);
 
-  padding: 0 var(--sf-pad-4) var(--sf-pad-4);
+  padding: 0 var(--sf-pad-sm) var(--sf-pad-sm);
 }
 .awaiting-title {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   font-weight: 600;
   letter-spacing: 0.14em;
@@ -1772,7 +1738,7 @@ body {
 }
 .awaiting-count {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   letter-spacing: 0.04em;
   color: var(--text-dim);
@@ -1782,35 +1748,35 @@ body {
 .awaiting-list {
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-2);
+  gap: var(--sf-pad-xs);
 
   max-height: var(--sf-bound-list);
 
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--sf-cyan-18) transparent;
+  scrollbar-color: var(--sf-cyan-edge) transparent;
 }
 .awaiting-list::-webkit-scrollbar {
   width: 3px;
 }
 .awaiting-list::-webkit-scrollbar-thumb {
-  background: var(--sf-cyan-18);
-  border-radius: var(--sf-radius-2);
+  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: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 
-  padding: var(--sf-pad-5) var(--sf-pad-8);
+  padding: var(--sf-pad-sm) var(--sf-pad-lg);
 
-  border-radius: var(--sf-radius-6);
+  border-radius: var(--sf-radius-md);
 
-  background: var(--sf-white-02);
+  background: var(--sf-veil-faint);
   border: 1px solid transparent;
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   cursor: pointer;
   transition:
@@ -1818,8 +1784,8 @@ body {
     border-color 0.15s ease;
 }
 .awaiting-item:hover {
-  background: var(--sf-cyan-06);
-  border-color: var(--sf-cyan-15);
+  background: var(--sf-cyan-hairline);
+  border-color: var(--sf-cyan-edge);
 }
 .awaiting-item-disabled {
   opacity: 0.45;
@@ -1830,7 +1796,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--sf-text-11);
+  font-size: var(--sf-text-md);
 
   line-height: 1;
 }
@@ -1853,7 +1819,7 @@ body {
 .awaiting-meta {
   color: var(--text-dim);
   opacity: 0.75;
-  font-size: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   letter-spacing: 0.04em;
   text-transform: lowercase;
@@ -1863,11 +1829,11 @@ body {
 /* Empty-state placeholder when no subagents and no schedules exist. */
 .awaiting-empty {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   color: var(--text-dim);
   opacity: 0.55;
-  padding: var(--sf-pad-8) var(--sf-pad-10);
+  padding: var(--sf-pad-lg) var(--sf-pad-xl);
 
   text-align: center;
   font-style: italic;
@@ -1877,20 +1843,20 @@ body {
 .awaiting-add-btn {
   display: inline-flex;
   align-items: center;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 
-  margin-top: var(--sf-pad-4);
+  margin-top: var(--sf-pad-sm);
 
   align-self: flex-start;
-  padding: var(--sf-pad-4) var(--sf-pad-10);
+  padding: var(--sf-pad-sm) var(--sf-pad-xl);
 
   background: transparent;
-  border: 1px dashed var(--sf-cyan-25);
-  border-radius: var(--sf-radius-6);
+  border: 1px dashed var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-md);
 
   color: var(--text-dim);
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   letter-spacing: 0.04em;
   cursor: pointer;
@@ -1902,7 +1868,7 @@ body {
 .awaiting-add-btn:hover {
   color: var(--accent-cyan);
   border-color: var(--accent-cyan);
-  background: var(--sf-cyan-04);
+  background: var(--sf-cyan-hairline);
 }
 .awaiting-add-btn svg {
   width: 12px;
@@ -1912,44 +1878,44 @@ body {
   position: absolute;
   left: 10px;
   bottom: 100%;
-  margin-bottom: var(--sf-pad-6);
+  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 var(--sf-cyan-20);
-  border-radius: var(--sf-radius-8);
+  border: 1px solid var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-lg);
 
-  padding: var(--sf-pad-4);
+  padding: var(--sf-pad-sm);
 
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-2);
+  gap: var(--sf-pad-xs);
 
   min-width: 180px;
-  box-shadow: 0 8px 24px var(--sf-black-40);
+  box-shadow: 0 8px 24px var(--sf-shadow-deep);
   z-index: 20;
 }
 .awaiting-add-item {
   display: flex;
   align-items: center;
-  gap: var(--sf-pad-8);
+  gap: var(--sf-pad-lg);
 
-  padding: var(--sf-pad-6) var(--sf-pad-10);
+  padding: var(--sf-pad-md) var(--sf-pad-xl);
 
   background: transparent;
   border: none;
-  border-radius: var(--sf-radius-5);
+  border-radius: var(--sf-radius-sm);
 
   color: var(--text);
   font-family: var(--font-mono);
-  font-size: var(--sf-text-11);
+  font-size: var(--sf-text-md);
 
   cursor: pointer;
   text-align: left;
 }
 .awaiting-add-item:hover {
-  background: var(--sf-cyan-08);
+  background: var(--sf-cyan-veil);
   color: var(--accent-cyan);
 }
 .awaiting-add-glyph {
@@ -1960,11 +1926,11 @@ body {
 
 .symframe-card-body {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-11);
+  font-size: var(--sf-text-md);
 
   line-height: 1.5;
   color: var(--text);
-  margin-top: var(--sf-pad-8);
+  margin-top: var(--sf-pad-lg);
 
   white-space: pre-wrap;
   word-break: break-word;
@@ -1974,27 +1940,27 @@ body {
 }
 .symframe-card-actions {
   display: flex;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 
-  margin-top: var(--sf-pad-10);
+  margin-top: var(--sf-pad-xl);
 
-  padding-top: var(--sf-pad-8);
+  padding-top: var(--sf-pad-lg);
 
-  border-top: 1px solid var(--sf-white-05);
+  border-top: 1px solid var(--sf-veil-soft);
   flex-wrap: wrap;
 }
 .symframe-card-action {
   flex: 1 1 auto;
   min-width: 60px;
-  padding: var(--sf-pad-6) var(--sf-pad-10);
+  padding: var(--sf-pad-md) var(--sf-pad-xl);
 
   border: 1px solid var(--glass-border);
-  border-radius: var(--sf-radius-5);
+  border-radius: var(--sf-radius-sm);
 
-  background: var(--sf-white-03);
+  background: var(--sf-veil-faint);
   color: var(--text-dim);
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   letter-spacing: 0.04em;
   cursor: pointer;
@@ -2005,13 +1971,13 @@ body {
   color: var(--text);
 }
 .symframe-card-action-primary {
-  background: var(--sf-cyan-08);
+  background: var(--sf-cyan-veil);
   border-color: var(--accent-cyan);
   color: var(--accent-cyan);
 }
 .symframe-card-action-primary:hover {
-  background: var(--sf-cyan-14);
-  box-shadow: 0 0 8px var(--sf-cyan-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 ──────────── */
@@ -2035,16 +2001,16 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  padding: var(--sf-pad-2) var(--sf-pad-8) var(--sf-pad-2) var(--sf-pad-6);
+  padding: var(--sf-pad-xs) var(--sf-pad-lg) var(--sf-pad-xs) var(--sf-pad-md);
 
   font-family: var(--font-mono);
-  font-size: var(--sf-text-8);
+  font-size: var(--sf-text-xs);
 
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  background: var(--sf-black-55);
-  border-radius: var(--sf-radius-10) 0 var(--sf-radius-6) 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;
@@ -2061,9 +2027,9 @@ body {
 /* holding — cyan; working memory */
 .symframe-card-dynamic[data-intent="holding"] {
   box-shadow:
-    inset 3px 0 0 0 var(--sf-cyan-65),
-    inset 0 1px 0 var(--sf-white-04),
-    0 4px 12px var(--sf-black-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);
@@ -2073,8 +2039,8 @@ body {
 .symframe-card-dynamic[data-intent="weighing"] {
   box-shadow:
     inset 3px 0 0 0 #f5b73a,
-    inset 0 1px 0 var(--sf-white-04),
-    0 4px 12px var(--sf-black-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;
@@ -2082,22 +2048,22 @@ body {
 
 /* producing — green; actively drafting, slow pulse on the stripe */
 .symframe-card-dynamic[data-intent="producing"] {
-  animation: intent-producing-pulse var(--sf-time-pulse-prod) 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 var(--sf-green-55),
-      inset 0 1px 0 var(--sf-white-04),
-      0 4px 12px var(--sf-black-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 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);
+      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 {
@@ -2109,8 +2075,8 @@ body {
 .symframe-card-dynamic[data-intent="drafted"] {
   box-shadow:
     inset 3px 0 0 0 #8b5cf6,
-    inset 0 1px 0 var(--sf-white-04),
-    0 4px 12px var(--sf-black-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;
@@ -2118,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: var(--sf-violet-55);
+  border-color: var(--sf-violet-strong);
   color: var(--text);
   font-weight: 600;
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action:hover {
-  background: var(--sf-violet-12);
+  background: var(--sf-violet-tint);
   border-color: #8b5cf6;
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary {
-  background: var(--sf-violet-22);
+  background: var(--sf-violet-edge);
   border-color: #8b5cf6;
   color: var(--text);
 }
 .symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary:hover {
-  background: var(--sf-violet-32);
-  box-shadow: 0 0 10px var(--sf-violet-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 var(--sf-white-04),
-    0 4px 12px var(--sf-black-25);
+    inset 0 1px 0 var(--sf-veil-faint),
+    0 4px 12px var(--sf-shadow-mid);
   opacity: 0.88;
   filter: saturate(0.75);
 }
@@ -2155,13 +2121,13 @@ body {
    miscategorization. */
 .symframe-card-dynamic[data-intent="awaiting"] {
   box-shadow:
-    inset 3px 0 0 0 var(--sf-pink-55),
-    inset 0 1px 0 var(--sf-white-04),
-    0 4px 12px var(--sf-black-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: var(--sf-pink-85);
+  color: var(--sf-pink-text);
 }
 
 /* Reduced-motion: skip the producing pulse but keep the static
@@ -2170,9 +2136,9 @@ body {
   .symframe-card-dynamic[data-intent="producing"] {
     animation: none;
     box-shadow:
-      inset 3px 0 0 0 var(--sf-green-75),
-      inset 0 1px 0 var(--sf-white-04),
-      0 4px 12px var(--sf-black-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);
   }
 }
 
@@ -2185,53 +2151,53 @@ body {
 .symframe-body-markdown h2,
 .symframe-body-markdown h3,
 .symframe-body-markdown h4 {
-  font-size: var(--sf-text-12);
+  font-size: var(--sf-text-lg);
 
   font-weight: 600;
-  margin: var(--sf-pad-8) 0 var(--sf-pad-4);
+  margin: var(--sf-pad-lg) 0 var(--sf-pad-sm);
 
   color: var(--text);
 }
 .symframe-body-markdown p {
-  margin: var(--sf-pad-4) 0;
+  margin: var(--sf-pad-sm) 0;
 }
 .symframe-body-markdown ul,
 .symframe-body-markdown ol {
   padding-left: 18px;
-  margin: var(--sf-pad-4) 0;
+  margin: var(--sf-pad-sm) 0;
 }
 .symframe-body-markdown code {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
-  padding: 1px var(--sf-pad-4);
+  padding: 1px var(--sf-pad-sm);
 
-  background: var(--sf-white-04);
-  border-radius: var(--sf-radius-3);
+  background: var(--sf-veil-faint);
+  border-radius: var(--sf-radius-xs);
 }
 .symframe-body-markdown pre {
-  background: var(--sf-black-25);
-  border: 1px solid var(--sf-white-05);
-  border-radius: var(--sf-radius-5);
+  background: var(--sf-shadow-mid);
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-sm);
 
-  padding: var(--sf-pad-8);
+  padding: var(--sf-pad-lg);
 
   overflow-x: auto;
-  margin: var(--sf-pad-6) 0;
+  margin: var(--sf-pad-md) 0;
 }
 .symframe-body-markdown pre code {
   background: transparent;
   padding: 0;
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 }
 
 /* Code body — pre/code wrapper with hljs theme-friendly chrome. */
 .symframe-body-code {
-  background: var(--sf-black-30);
-  border: 1px solid var(--sf-white-06);
-  border-radius: var(--sf-radius-5);
+  background: var(--sf-shadow-mid);
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-sm);
 
-  padding: var(--sf-pad-8) var(--sf-pad-10);
+  padding: var(--sf-pad-lg) var(--sf-pad-xl);
 
   margin: 0;
   overflow-x: auto;
@@ -2241,7 +2207,7 @@ body {
 }
 .symframe-body-code code {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   line-height: 1.45;
   color: var(--text);
@@ -2252,32 +2218,32 @@ body {
 .symframe-body-email {
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-4);
+  gap: var(--sf-pad-sm);
 }
 .symframe-email-row {
   display: flex;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   letter-spacing: 0.02em;
-  padding: var(--sf-pad-2) 0;
+  padding: var(--sf-pad-xs) 0;
 
-  border-bottom: 1px dashed var(--sf-white-05);
+  border-bottom: 1px dashed var(--sf-veil-soft);
 }
 .symframe-email-row:last-of-type {
-  border-bottom: 1px solid var(--sf-white-08);
-  margin-bottom: var(--sf-pad-4);
+  border-bottom: 1px solid var(--sf-veil-soft);
+  margin-bottom: var(--sf-pad-sm);
 
-  padding-bottom: var(--sf-pad-4);
+  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: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   min-width: 48px;
   opacity: 0.7;
@@ -2288,29 +2254,29 @@ body {
 }
 .symframe-email-body {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-11);
+  font-size: var(--sf-text-md);
 
   line-height: 1.5;
   color: var(--text);
   white-space: pre-wrap;
   word-break: break-word;
-  margin-top: var(--sf-pad-4);
+  margin-top: var(--sf-pad-sm);
 }
 
 /* PDF embed */
 .symframe-body-pdf {
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 }
 .symframe-pdf-iframe {
   width: 100%;
   height: var(--sf-bound-media);
 
-  border: 1px solid var(--sf-white-08);
-  border-radius: var(--sf-radius-5);
+  border: 1px solid var(--sf-veil-soft);
+  border-radius: var(--sf-radius-sm);
 
-  background: var(--sf-black-20);
+  background: var(--sf-shadow-soft);
 }
 
 /* Audio + video shared chrome */
@@ -2318,14 +2284,14 @@ body {
 .symframe-body-video {
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 }
 .symframe-audio,
 .symframe-video {
   width: 100%;
-  border-radius: var(--sf-radius-5);
+  border-radius: var(--sf-radius-sm);
 
-  background: var(--sf-black-20);
+  background: var(--sf-shadow-soft);
 }
 .symframe-video {
   max-height: var(--sf-bound-media);
@@ -2336,7 +2302,7 @@ body {
 /* Empty-media placeholder when url is missing */
 .symframe-body-empty {
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   color: var(--text-dim);
   opacity: 0.6;
@@ -2346,13 +2312,13 @@ body {
 /* Download link — used by pdf/audio/video renderers */
 .symframe-download {
   display: inline-block;
-  padding: var(--sf-pad-4) var(--sf-pad-8);
+  padding: var(--sf-pad-sm) var(--sf-pad-lg);
 
   border: 1px solid var(--glass-border);
-  border-radius: var(--sf-radius-4);
+  border-radius: var(--sf-radius-sm);
 
   font-family: var(--font-mono);
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   letter-spacing: 0.04em;
   color: var(--text-dim);
@@ -6943,11 +6909,11 @@ body {
   border-radius: var(--sf-radius-pill);
 
   background: var(--accent-cyan);
-  margin-left: var(--sf-pad-6);
+  margin-left: var(--sf-pad-md);
 
   vertical-align: middle;
   opacity: 0;
-  transition: opacity var(--sf-time-slow) ease;
+  transition: opacity var(--sf-time-normal) ease;
 
   flex-shrink: 0;
 }
@@ -6966,19 +6932,19 @@ body {
 .reasoning-run-sep {
   display: flex;
   align-items: center;
-  gap: var(--sf-pad-8);
+  gap: var(--sf-pad-lg);
 
-  margin: var(--sf-pad-4) 0 var(--sf-pad-2);
+  margin: var(--sf-pad-sm) 0 var(--sf-pad-xs);
 }
 .reasoning-run-sep::before,
 .reasoning-run-sep::after {
   content: "";
   flex: 1;
   height: 1px;
-  background: var(--sf-white-06);
+  background: var(--sf-veil-soft);
 }
 .reasoning-run-sep-label {
-  font-size: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   font-family: var(--font-mono);
   font-weight: 600;
@@ -6991,65 +6957,65 @@ body {
 .reasoning-entry {
   display: flex;
   flex-direction: column;
-  gap: var(--sf-pad-4);
+  gap: var(--sf-pad-sm);
 
-  padding: var(--sf-pad-6) var(--sf-pad-8);
+  padding: var(--sf-pad-md) var(--sf-pad-lg);
 
-  background: var(--sf-white-02);
-  border: 1px solid var(--sf-white-05);
-  border-radius: var(--sf-radius-8);
+  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: var(--sf-white-09);
+  border-color: var(--sf-veil-soft);
 }
 
 /* Entry header row: badge + label */
 .reasoning-entry-header {
   display: flex;
   align-items: center;
-  gap: var(--sf-pad-6);
+  gap: var(--sf-pad-md);
 }
 .reasoning-entry-badge {
-  font-size: var(--sf-text-9);
+  font-size: var(--sf-text-xs);
 
   font-family: var(--font-mono);
   font-weight: 700;
   letter-spacing: 0.1em;
-  padding: 1px var(--sf-pad-5);
+  padding: 1px var(--sf-pad-sm);
 
-  border-radius: var(--sf-radius-4);
+  border-radius: var(--sf-radius-sm);
 
   flex-shrink: 0;
 }
 /* Thinking badge — cyan tint */
 .reasoning-entry-badge.badge-think {
-  background: var(--sf-cyan-10);
+  background: var(--sf-cyan-veil);
   color: var(--accent-cyan);
-  border: 1px solid var(--sf-cyan-18);
+  border: 1px solid var(--sf-cyan-edge);
 }
 /* Tool call badge — purple tint */
 .reasoning-entry-badge.badge-tool {
-  background: var(--sf-violet-12);
+  background: var(--sf-violet-tint);
   color: var(--accent-purple);
-  border: 1px solid var(--sf-violet-20);
+  border: 1px solid var(--sf-violet-edge);
 }
 /* Tool result badge — green tint */
 .reasoning-entry-badge.badge-result {
-  background: var(--sf-green-10);
+  background: var(--sf-green-tint);
   color: var(--accent-green);
-  border: 1px solid var(--sf-green-18);
+  border: 1px solid var(--sf-green-edge);
 }
 /* Narration badge — dim white tint */
 .reasoning-entry-badge.badge-narration {
-  background: var(--sf-white-06);
+  background: var(--sf-veil-soft);
   color: var(--text-muted);
-  border: 1px solid var(--sf-white-10);
+  border: 1px solid var(--sf-veil-strong);
 }
 
 .reasoning-entry-name {
-  font-size: var(--sf-text-11);
+  font-size: var(--sf-text-md);
 
   font-family: var(--font-mono);
   color: var(--text-muted);
@@ -7061,7 +7027,7 @@ body {
 
 /* Thinking body */
 .reasoning-think-body {
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   font-family: var(--font-mono);
   color: var(--text-muted);
@@ -7071,23 +7037,23 @@ body {
   max-height: var(--sf-bound-detail);
 
   overflow-y: auto;
-  padding: var(--sf-pad-4) var(--sf-pad-2) 0;
+  padding: var(--sf-pad-sm) var(--sf-pad-xs) 0;
 
   opacity: 0.75;
   scrollbar-width: thin;
-  scrollbar-color: var(--sf-cyan-15) transparent;
+  scrollbar-color: var(--sf-cyan-edge) transparent;
 }
 .reasoning-think-body::-webkit-scrollbar {
   width: 2px;
 }
 .reasoning-think-body::-webkit-scrollbar-thumb {
-  background: var(--sf-cyan-15);
-  border-radius: var(--sf-radius-2);
+  background: var(--sf-cyan-edge);
+  border-radius: var(--sf-radius-xs);
 }
 
 /* Tool detail — compact JSON preview, collapsible */
 .reasoning-tool-preview {
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   font-family: var(--font-mono);
   color: var(--text-muted);
@@ -7095,17 +7061,17 @@ body {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: var(--sf-pad-2) 0 0;
+  padding: var(--sf-pad-xs) 0 0;
 }
 .reasoning-tool-detail {
   display: none;
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
 
   font-family: var(--font-mono);
   color: var(--text-muted);
   white-space: pre-wrap;
   word-break: break-all;
-  padding: var(--sf-pad-4) var(--sf-pad-2) 0;
+  padding: var(--sf-pad-sm) var(--sf-pad-xs) 0;
 
   opacity: 0.65;
   max-height: var(--sf-bound-tool);
@@ -7121,10 +7087,10 @@ body {
 
 /* Result row */
 .reasoning-result-meta {
-  font-size: var(--sf-text-10);
+  font-size: var(--sf-text-sm);
   font-family: var(--font-mono);
   color: var(--text-dim);
-  padding: var(--sf-pad-2) 0 0;
+  padding: var(--sf-pad-xs) 0 0;
 }
 
 /* ── Lazy-load sentinel ──────────────────────────────────────────── */