npm - great-cto - Versions diffs - 3.2.0 → 3.4.0 - Mend

great-cto 3.2.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +23 -2
package/board/.claude-plugin/plugin.json +1 -1
package/board/packages/board/lib/routes.mjs +18 -3
package/board/packages/board/public/index.html +444 -313
package/package.json +1 -1

package/board/packages/board/public/index.html CHANGED Viewed

@@ -123,17 +123,106 @@
   --shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 168, 98, 0.08);
   --drawer-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
 }
+/* ── Type scale ──────────────────────────────────────────────────────────────
+   The board had 22 raw font sizes (9px…52px, including 11.5/12.5/13.5) and no
+   rule for h1/h2/h3 at all — so Budgets, Docs, Sessions and Activity rendered
+   their titles in the browser's default bold 700, a weight used nowhere else in
+   the design. One role, six renderings.
+   Two ramps, because the board has two kinds of text. Text steps by +1px in the
+   dense band (this is a single-operator console; density is the point) and by
+   ~1.2x in the title band. Live numbers get their own ramp: they are read as
+   quantities, not prose, so they take --serif at 500 with tabular-nums.
+   --serif is NOT a serif face — it resolves to the same Geist as --sans. The
+   name is legacy; the role is "display numerals". Reach for it only at >=24px.
+   Legal 10px: --fs-eyebrow, and only for mono uppercase labels with tracking.
+   10px in sans body text is not a size, it is a mistake. */
+:root {
+  --fs-eyebrow:  10px;   /* mono uppercase label, tracking 0.08–0.1em */
+  --fs-caption:  11px;   /* metadata, counts, timestamps */
+  --fs-small:    12px;   /* table cells, secondary meta, chips */
+  --fs-body:     13px;   /* dense body: cards, list rows, form fields */
+  --fs-base:     14px;   /* document base / longform prose */
+  --fs-title-s:  15px;   /* card or section heading (h3 role) */
+  --fs-title-m:  18px;   /* region heading (h2 role) */
+  --fs-title-l:  22px;   /* page heading (h1 role) */
+  --fs-num-s:    24px;   /* inline stat */
+  --fs-num-m:    30px;   /* secondary metric card */
+  --fs-num-l:    36px;   /* second-tier hero KPI */
+  --fs-num-xl:   52px;   /* primary hero KPI */
+}
 * { box-sizing: border-box; margin: 0; padding: 0; }
 html, body { height: 100%; }
 body {
   font-family: var(--sans);
   color: var(--text);
-  font-size: 14px;
+  font-size: var(--fs-base);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   background: var(--bg-card);
 }
-button { font-family: inherit; cursor: pointer; }
+/* Form controls do not inherit type from the page — they start at the browser's
+   own font, and `font-family: inherit` alone fixed only half of that. The size
+   stayed at the UA default 13.333px: off every step of the scale, on nine inputs
+   and four buttons, including the fields the CTO actually types into. A scale
+   that the text you enter does not follow is not the page's scale.
+   Bare-element specificity (0,0,1), so every component rule below still wins —
+   this only supplies a floor where nothing else speaks. */
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: var(--fs-body);
+}
+button { cursor: pointer; }
+/* Headings had no base rule, so every unstyled h1/h2/h3 fell to the browser's
+   bold 700. Three weights exist in this design — 400 body, 500 value, 600 title
+   — and 700 is not one of them. This removes it everywhere at once. Bare-element
+   specificity (0,0,1), so every component rule below still wins. */
+h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
+/* The page's own title. Present on every panel, one size, one weight. Before
+   this, two panels had no title element at all, four rendered the browser
+   default, and one rendered a section heading at title size. */
+.page-title {
+  font-size: var(--fs-title-l);
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  color: var(--text);
+  margin: 0 0 14px;
+}
+/* A heading INSIDE a page. Notifications rendered its three sections through
+   .share-card h2 — the showcase hero — so "Email alerts" was set at 28px, the
+   size of a page title, three times on one screen. */
+.section-title {
+  font-size: var(--fs-title-m);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--text);
+  margin: 0 0 6px;
+}
+/* Sessions had a .panel-head element with no rule of any kind: its h2 fell to
+   the browser default of 1.5em bold-700 and the search box beside it did not
+   align to anything. */
+.panel-head {
+  display: flex; align-items: center; gap: 12px;
+  margin: 0 0 14px; flex-wrap: wrap;
+}
+.panel-head h2 {
+  font-size: var(--fs-title-l);
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+  margin: 0; flex: 1 1 auto;
+}
 .board {
   position: relative;
@@ -159,16 +248,16 @@ button { font-family: inherit; cursor: pointer; }
   background: rgba(180, 83, 9, 0.10);
   border: 1px solid var(--status-progress);
   border-radius: 8px;
-  font-size: 13px; color: var(--text);
+  font-size: var(--fs-body); color: var(--text);
 }
-.stale-board code { font-family: var(--mono); font-size: 12px; }
+.stale-board code { font-family: var(--mono); font-size: var(--fs-small); }
 /* Per-agent budget. Four states, and they must not look alike: `exceeded` holds
    a dispatch, `unmeasured` deliberately does not. A shared grey chip for
    "under the cap" and "we never measured it" would be the same silent zero this
    board spends its time refusing to render. */
 .budget-chip {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   padding: 1px 6px; border-radius: 3px;
   border: 1px solid var(--border);
   white-space: nowrap;
@@ -187,11 +276,11 @@ button { font-family: inherit; cursor: pointer; }
 .ab-row:first-of-type { border-top: 0; }
 .ab-name { font-family: var(--mono); flex: 1 1 auto; min-width: 0; }
 .ab-cap { font-family: var(--mono); color: var(--text2); }
-.ab-spent { font-family: var(--mono); font-size: 11px; color: var(--text3); }
-.ab-note { margin-top: 8px; font-size: 11px; color: var(--status-progress); }
+.ab-spent { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text3); }
+.ab-note { margin-top: 8px; font-size: var(--fs-caption); color: var(--status-progress); }
 .ab-note.ab-bad { color: var(--status-blocked); }
 .ab-btn {
-  font-family: inherit; font-size: 11px;
+  font-family: inherit; font-size: var(--fs-caption);
   min-height: 24px; padding: 0 8px;
   border: 1px solid var(--border); border-radius: 5px;
   background: var(--bg-card); color: var(--text2);
@@ -203,7 +292,7 @@ button { font-family: inherit; cursor: pointer; }
 .budget-line {
   margin: -18px 0 24px; padding: 8px 12px;
-  border-radius: 8px; font-size: 12px;
+  border-radius: 8px; font-size: var(--fs-small);
   border: 1px solid var(--border);
 }
 .budget-line.exceeded   { color: var(--status-blocked); border-color: var(--status-blocked); background: var(--p0-bg); font-weight: 500; }
@@ -263,7 +352,7 @@ button { font-family: inherit; cursor: pointer; }
 .sidebar-brand .brand-mark svg { width: 22px; height: 22px; }
 .sidebar-brand .brand-name {
   font-family: var(--serif); font-weight: 600;
-  font-size: 15px; letter-spacing: -0.01em;
+  font-size: var(--fs-title-s); letter-spacing: -0.01em;
   color: var(--text);
 }
 .proj-switch {
@@ -276,9 +365,9 @@ button { font-family: inherit; cursor: pointer; }
 }
 .proj-switch:hover { background: var(--bg-muted); }
 .proj-switch .star { color: var(--accent); font-size: 16px; }
-.proj-switch .name { font-weight: 600; font-size: 14px; }
+.proj-switch .name { font-weight: 600; font-size: var(--fs-base); }
 .proj-switch .sw-meta { flex: 1; display: flex; flex-direction: column; gap: 1px; }
-.proj-switch .sw-arch { font-size: 10px; color: var(--text3); font-weight: 400; letter-spacing: 0.03em; }
+.proj-switch .sw-arch { font-size: var(--fs-eyebrow); color: var(--text3); font-weight: 400; letter-spacing: 0.03em; }
 .proj-switch .chev {
   color: var(--text3); width: 12px; height: 12px;
   transition: transform 0.15s;
@@ -306,7 +395,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .proj-menu-search input {
   flex: 1; border: none; outline: none;
-  font-family: inherit; font-size: 12px;
+  font-family: inherit; font-size: var(--fs-small);
   color: var(--text); background: transparent;
 }
 .proj-item {
@@ -314,11 +403,11 @@ button { font-family: inherit; cursor: pointer; }
   padding: 8px 10px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--fs-body);
 }
 .proj-item:hover { background: var(--bg-muted); }
 .proj-item.active { background: var(--bg-strong); font-weight: 500; }
-.proj-item .star { color: var(--accent); font-size: 14px; }
+.proj-item .star { color: var(--accent); font-size: var(--fs-base); }
 .proj-icon, .proj-switch .proj-icon, .crumbs .proj-icon {
   display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0;
@@ -327,9 +416,9 @@ button { font-family: inherit; cursor: pointer; }
 .proj-item .proj-icon { width: 22px; height: 22px; }
 .crumbs .proj-icon { width: 14px; height: 14px; margin-right: 2px; }
 .proj-item-info { flex: 1; min-width: 0; }
-.proj-item-info .name { font-weight: 500; font-size: 13px; }
+.proj-item-info .name { font-weight: 500; font-size: var(--fs-body); }
 .proj-item-info .arch {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3);
   letter-spacing: 0.04em;
 }
@@ -341,7 +430,7 @@ button { font-family: inherit; cursor: pointer; }
 .proj-menu-empty {
   padding: 14px 10px;
   text-align: center;
-  font-size: 12px;
+  font-size: var(--fs-small);
   color: var(--text3);
 }
@@ -350,7 +439,7 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; align-items: center; gap: 10px;
   height: 32px; padding: 0 10px;
   border-radius: 6px;
-  font-size: 13px;
+  font-size: var(--fs-body);
   color: var(--text);
   cursor: pointer;
   position: relative;
@@ -368,14 +457,14 @@ button { font-family: inherit; cursor: pointer; }
 }
 .nav-item .icon { width: 16px; height: 16px; color: var(--text2); flex-shrink: 0; }
 .nav-item.active .icon { color: var(--accent); }
-.nav-item .count { margin-left: auto; font-size: 11px; color: var(--text3); font-family: var(--mono); }
+.nav-item .count { margin-left: auto; font-size: var(--fs-caption); color: var(--text3); font-family: var(--mono); }
 .nav-divider { height: 1px; background: var(--border); margin: 12px 8px; }
 .sidebar-footer {
   padding: 12px 16px;
   border-top: 1px solid var(--border);
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--fs-caption);
   color: var(--text3);
   letter-spacing: 0.04em;
   display: flex; align-items: center; gap: 6px;
@@ -395,7 +484,7 @@ button { font-family: inherit; cursor: pointer; }
   border-bottom: 1px solid var(--border);
   display: flex; align-items: center; justify-content: space-between;
   padding: 0 20px;
-  font-size: 13px;
+  font-size: var(--fs-body);
 }
 .crumbs { display: flex; align-items: center; gap: 8px; color: var(--text2); }
 .crumbs .star { color: var(--accent); }
@@ -416,12 +505,12 @@ button { font-family: inherit; cursor: pointer; }
 .search-box svg { color: var(--text3); flex-shrink: 0; }
 .search-box input {
   flex: 1; border: none; outline: none; background: transparent;
-  font-family: inherit; font-size: 13px;
+  font-family: inherit; font-size: var(--fs-body);
   color: var(--text); padding: 3px 0;
 }
 .search-box input::placeholder { color: var(--text3); }
 .search-box kbd {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3);
   background: var(--bg-strong);
   border-radius: 3px; padding: 1px 5px;
@@ -438,7 +527,7 @@ button { font-family: inherit; cursor: pointer; }
 .btn-bell-badge {
   position: absolute; top: -5px; right: -5px;
   background: var(--accent); color: #04140d;
-  font-size: 10px; font-weight: 700; line-height: 1;
+  font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1;
   min-width: 16px; height: 16px; border-radius: 8px;
   display: none; align-items: center; justify-content: center;
   padding: 0 3px;
@@ -448,7 +537,7 @@ button { font-family: inherit; cursor: pointer; }
 .tab-btn {
   background: transparent; border: none;
   padding: 6px 12px; border-radius: 6px;
-  font-size: 13px; color: var(--text2);
+  font-size: var(--fs-body); color: var(--text2);
 }
 .tab-btn:hover { background: var(--bg-muted); color: var(--text); }
 .tab-btn.active { background: var(--bg-strong); color: var(--text); font-weight: 500; }
@@ -469,13 +558,13 @@ button { font-family: inherit; cursor: pointer; }
   background: #0f1115; color: #fff; border: none;
   height: 30px; padding: 0 14px;
   border-radius: 999px;
-  font-size: 13px; font-weight: 500;
+  font-size: var(--fs-body); font-weight: 500;
   display: inline-flex; align-items: center; gap: 6px;
 }
 .btn-new:hover { background: #2a2d33; }
 .task-count {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3); letter-spacing: 0.04em;
   margin-right: 6px;
 }
@@ -505,7 +594,7 @@ button { font-family: inherit; cursor: pointer; }
 .col-head {
   display: flex; align-items: center; gap: 8px;
   padding: 4px 6px 8px;
-  font-size: 13px; font-weight: 600;
+  font-size: var(--fs-body); font-weight: 600;
 }
 .col-dot {
   width: 10px; height: 10px; border-radius: 50%;
@@ -515,7 +604,7 @@ button { font-family: inherit; cursor: pointer; }
 .col-dot.filled { background: currentColor; }
 .col-dot.half { background: conic-gradient(currentColor 50%, transparent 50%); }
 .col-count {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3); margin-left: 2px; font-weight: 500;
 }
 .col-title { color: var(--text); }
@@ -537,7 +626,7 @@ button { font-family: inherit; cursor: pointer; }
   overflow: hidden;
 }
 .card-desc {
-  font-size: 12px;
+  font-size: var(--fs-small);
   line-height: 1.4;
   color: var(--text2);
   display: -webkit-box;
@@ -549,12 +638,12 @@ button { font-family: inherit; cursor: pointer; }
 .card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
 .card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .card .id {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.04em; color: var(--text3);
   flex-shrink: 0;
 }
 .card .title {
-  font-weight: 600; font-size: 13px;
+  font-weight: 600; font-size: var(--fs-body);
   line-height: 1.35;
   color: var(--text);
   display: -webkit-box;
@@ -577,7 +666,7 @@ button { font-family: inherit; cursor: pointer; }
 .card-footer > * { flex-shrink: 0; }
 .card-time {
   margin-left: auto;
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3);
 }
@@ -585,7 +674,7 @@ button { font-family: inherit; cursor: pointer; }
   display: inline-flex; align-items: center; gap: 4px;
   height: 20px; padding: 0 8px;
   border-radius: 999px;
-  font-size: 11px; font-weight: 500;
+  font-size: var(--fs-caption); font-weight: 500;
   background: var(--bg-strong); color: var(--text2);
 }
 .chip-p0 { background: var(--p0-bg); color: var(--p0-fg); }
@@ -609,7 +698,7 @@ button { font-family: inherit; cursor: pointer; }
   height: 24px;
   border: 1px solid var(--border);
   border-radius: 5px;
-  font-family: inherit; font-size: 11px; font-weight: 500;
+  font-family: inherit; font-size: var(--fs-caption); font-weight: 500;
   cursor: pointer;
   background: var(--bg-card);
   transition: background 0.12s, border-color 0.12s;
@@ -627,14 +716,14 @@ button { font-family: inherit; cursor: pointer; }
 #agent-panel { position: fixed; right: 16px; bottom: 16px; width: min(560px, 94vw); max-height: 70vh; display: none; flex-direction: column; background: var(--bg-card, #11161a); border: 1px solid var(--border, #1f2a26); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.5); z-index: 60; overflow: hidden; }
 #agent-panel.open { display: flex; }
 #agent-panel header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border, #1f2a26); background: transparent; }
-#agent-panel header b { font-size: 13px; }
-#agent-panel .ap-x { margin-left: auto; cursor: pointer; border: 0; background: none; color: var(--text-muted, #8aa); font-size: 16px; }
+#agent-panel header b { font-size: var(--fs-body); }
+#agent-panel .ap-x { margin-left: auto; cursor: pointer; border: 0; background: none; color: var(--text3); font-size: 16px; }
 #agent-log { flex: 1; overflow: auto; padding: 10px 14px; font: 12px/1.55 ui-monospace, Menlo, monospace; }
 #agent-log .al { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
-#agent-log .al.tool { color: var(--status-review); } #agent-log .al.system { color: var(--text-muted, #8aa); } #agent-log .al.error { color: var(--status-blocked, #ff5a5a); } #agent-log .al.done { color: var(--text-muted, #8aa); font-weight: 600; }
+#agent-log .al.tool { color: var(--status-review); } #agent-log .al.system { color: var(--text3); } #agent-log .al.error { color: var(--status-blocked, #ff5a5a); } #agent-log .al.done { color: var(--text3); font-weight: 600; }
 #agent-panel .ap-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border, #1f2a26); }
-#agent-panel input { flex: 1; background: var(--bg, #0a0e0c); color: var(--text, #ecf2ee); border: 1px solid var(--border, #1f2a26); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
-#agent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted, #556); }
+#agent-panel input { flex: 1; background: var(--bg-muted); color: var(--text, #ecf2ee); border: 1px solid var(--border, #1f2a26); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: var(--fs-body); }
+#agent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
 #agent-dot.live { background: var(--status-review); animation: apulse 1.2s infinite; }
 @keyframes apulse { 0%,100%{opacity:1} 50%{opacity:.4} }
 .gate-reject { color: var(--status-blocked); border-color: rgba(220, 38, 38, 0.30); }
@@ -657,7 +746,7 @@ button { font-family: inherit; cursor: pointer; }
 .empty {
   padding: 20px 8px;
-  font-size: 12px;
+  font-size: var(--fs-small);
   color: var(--text3);
   text-align: center;
 }
@@ -674,10 +763,10 @@ button { font-family: inherit; cursor: pointer; }
   border-left-width: 3px;
   border-radius: 6px;
   background: rgba(240, 180, 41, 0.08);
-  font-size: 12px;
+  font-size: var(--fs-small);
   line-height: 1.45;
 }
-.degraded-banner strong { color: var(--text1); font-weight: 600; }
+.degraded-banner strong { color: var(--text); font-weight: 600; }
 .degraded-banner span { color: var(--text2); font-family: var(--mono, ui-monospace, monospace); word-break: break-word; }
 /* ── Side panel ───────────────────────────────────────────────────────────── */
@@ -718,7 +807,7 @@ button { font-family: inherit; cursor: pointer; }
   border-bottom: 1px solid var(--border);
 }
 .side-id {
-  font-family: var(--mono); font-size: 11px; font-weight: 500;
+  font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
   background: var(--bg-strong); color: var(--text);
   padding: 4px 8px; border-radius: 4px;
   letter-spacing: 0.04em;
@@ -733,14 +822,14 @@ button { font-family: inherit; cursor: pointer; }
 .side-close:hover { background: var(--bg-muted); color: var(--text); }
 .side-body { flex: 1; overflow: auto; padding: 18px; }
 .side-title {
-  font-family: var(--serif); font-weight: 600;
-  font-size: 20px;
-  letter-spacing: -0.02em;
+  font-family: var(--sans); font-weight: 600;
+  font-size: var(--fs-title-m);
+  letter-spacing: -0.01em;
   margin-bottom: 12px;
   color: var(--text);
 }
 .side-desc {
-  font-size: 14px; line-height: 1.6;
+  font-size: var(--fs-base); line-height: 1.6;
   color: var(--text2);
   margin-bottom: 16px;
   padding-bottom: 14px;
@@ -751,30 +840,30 @@ button { font-family: inherit; cursor: pointer; }
 .side-desc-empty {
   color: var(--text3, #9ca3af);
   font-style: italic;
-  font-size: 13px;
+  font-size: var(--fs-body);
 }
 .side-desc-empty code {
   font-style: normal;
   background: var(--bg-muted);
   padding: 1px 5px;
   border-radius: 3px;
-  font-size: 12px;
+  font-size: var(--fs-small);
 }
 .side-desc.md { white-space: normal; }
 .side-desc.md h1 { font-size: 16px; margin: 8px 0 6px; font-weight: 600; }
-.side-desc.md h2 { font-size: 14px; margin: 10px 0 4px; font-weight: 600; color: var(--text); }
-.side-desc.md h3 { font-size: 13px; margin: 8px 0 3px; font-weight: 600; color: var(--text); }
-.side-desc.md h4 { font-size: 12px; margin: 6px 0 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); }
+.side-desc.md h2 { font-size: var(--fs-base); margin: 10px 0 4px; font-weight: 600; color: var(--text); }
+.side-desc.md h3 { font-size: var(--fs-body); margin: 8px 0 3px; font-weight: 600; color: var(--text); }
+.side-desc.md h4 { font-size: var(--fs-small); margin: 6px 0 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); }
 .side-desc.md p { margin: 0 0 8px; }
 .side-desc.md ul { padding-left: 18px; margin: 4px 0 8px; }
 .side-desc.md li { margin: 2px 0; }
 .side-desc.md code {
   background: var(--bg-muted); padding: 1px 4px;
-  border-radius: 3px; font-size: 12px; font-family: ui-monospace, monospace;
+  border-radius: 3px; font-size: var(--fs-small); font-family: ui-monospace, monospace;
 }
 .side-desc.md pre.md-pre {
   background: var(--bg-muted); padding: 8px 10px;
-  border-radius: 4px; overflow-x: auto; font-size: 12px;
+  border-radius: 4px; overflow-x: auto; font-size: var(--fs-small);
   margin: 6px 0;
 }
 .side-desc.md pre.md-pre code { background: none; padding: 0; }
@@ -796,7 +885,7 @@ button { font-family: inherit; cursor: pointer; }
 .toast {
   background: #1f2937; color: #fff;
   padding: 8px 14px; border-radius: 6px;
-  font-size: 13px; min-width: 200px; max-width: 360px;
+  font-size: var(--fs-body); min-width: 200px; max-width: 360px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.35);
   opacity: 0; transform: translateY(8px);
   transition: opacity 0.2s, transform 0.2s;
@@ -826,7 +915,7 @@ button { font-family: inherit; cursor: pointer; }
 #cmdk-input {
   border: 0; border-bottom: 1px solid var(--border);
   background: transparent; color: var(--text);
-  font-family: inherit; font-size: 15px; padding: 14px 16px; outline: none;
+  font-family: inherit; font-size: var(--fs-title-s); padding: 14px 16px; outline: none;
 }
 #cmdk-list { overflow-y: auto; padding: 6px; }
 .cmdk-item {
@@ -836,14 +925,14 @@ button { font-family: inherit; cursor: pointer; }
 }
 .cmdk-item.on { background: var(--bg-muted); }
 .cmdk-group {
-  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
+  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--text3);
   min-width: 34px; flex-shrink: 0;
 }
-.cmdk-label { font-size: 13.5px; color: var(--text); flex: 1; min-width: 0;
+.cmdk-label { font-size: var(--fs-body); color: var(--text); flex: 1; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cmdk-hint { font-family: var(--mono); font-size: 11px; color: var(--text3); flex-shrink: 0; }
-.cmdk-empty { padding: 18px 14px; font-size: 13px; color: var(--text2); }
+.cmdk-hint { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text3); flex-shrink: 0; }
+.cmdk-empty { padding: 18px 14px; font-size: var(--fs-body); color: var(--text2); }
 #hotkey-modal {
   position: fixed; inset: 0; z-index: 10000;
@@ -853,21 +942,21 @@ button { font-family: inherit; cursor: pointer; }
   position: absolute; inset: 0; background: rgba(0,0,0,0.5);
 }
 .hk-card {
-  position: relative; background: var(--bg, #0f172a);
+  position: relative; background: var(--bg-elevated);
   color: var(--text); border: 1px solid var(--border);
   border-radius: 8px; padding: 20px 24px; min-width: 360px;
   box-shadow: 0 12px 32px rgba(0,0,0,0.5);
 }
-.hk-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+.hk-title { font-size: var(--fs-title-s); font-weight: 600; margin-bottom: 12px; }
 .hk-table { border-collapse: collapse; width: 100%; }
-.hk-table td { padding: 4px 8px; font-size: 13px; }
+.hk-table td { padding: 4px 8px; font-size: var(--fs-body); }
 .hk-table td:first-child { text-align: right; white-space: nowrap; color: var(--text2); }
 .hk-table kbd {
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 3px; padding: 1px 5px; font-size: 11px;
+  border-radius: 3px; padding: 1px 5px; font-size: var(--fs-caption);
   font-family: ui-monospace, monospace; color: var(--text);
 }
-.hk-foot { margin-top: 12px; font-size: 11px; color: var(--text3, #9ca3af); text-align: center; }
+.hk-foot { margin-top: 12px; font-size: var(--fs-caption); color: var(--text3, #9ca3af); text-align: center; }
 /* ── Resume detail modal (clickable verdicts + decisions) ───────────── */
 #resume-detail-modal {
@@ -876,7 +965,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .rdm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
 .rdm-card {
-  position: relative; background: var(--bg, #0f172a);
+  position: relative; background: var(--bg-elevated);
   color: var(--text); border: 1px solid var(--border);
   border-radius: 8px; padding: 18px 22px; min-width: 480px; max-width: 720px;
   box-shadow: 0 12px 32px rgba(0,0,0,0.5);
@@ -885,30 +974,30 @@ button { font-family: inherit; cursor: pointer; }
 .rdm-head .rdm-agent { font-weight: 600; }
 .rdm-head .rdm-verdict.ok { color: #4ade80; }
 .rdm-head .rdm-verdict.fail { color: #f87171; }
-.rdm-head .rdm-ts { color: var(--text2); font-size: 11px; margin-left: auto; }
+.rdm-head .rdm-ts { color: var(--text2); font-size: var(--fs-caption); margin-left: auto; }
 .rdm-raw {
   background: var(--bg-muted); padding: 8px 10px; border-radius: 4px;
-  font-family: ui-monospace, monospace; font-size: 12px;
+  font-family: ui-monospace, monospace; font-size: var(--fs-small);
   white-space: pre-wrap; word-break: break-all;
   border: 1px solid var(--border);
   max-height: 200px; overflow-y: auto;
 }
 .rdm-artefacts { margin-top: 12px; }
-.rdm-artefacts-title { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
+.rdm-artefacts-title { font-size: var(--fs-caption); color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
 .rdm-artefact {
   display: inline-flex; align-items: center; gap: 4px;
   margin: 2px 4px 2px 0; padding: 4px 8px;
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 4px; font-size: 12px; cursor: pointer;
+  border-radius: 4px; font-size: var(--fs-small); cursor: pointer;
   text-decoration: none; color: var(--text);
   font-family: ui-monospace, monospace;
 }
-.rdm-artefact:hover { background: var(--bg-hover, rgba(255,255,255,0.08)); }
+.rdm-artefact:hover { background: var(--bg-muted); }
 .rdm-artefact .rdm-art-kind {
-  font-size: 10px; padding: 1px 4px; border-radius: 3px;
-  background: var(--accent-bg, rgba(59,130,246,0.2)); color: var(--accent, #3b82f6);
+  font-size: var(--fs-eyebrow); padding: 1px 4px; border-radius: 3px;
+  background: var(--accent-soft); color: var(--accent-text);
 }
-.rdm-foot { margin-top: 12px; font-size: 11px; color: var(--text3, #9ca3af); }
+.rdm-foot { margin-top: 12px; font-size: var(--fs-caption); color: var(--text3, #9ca3af); }
 .resume-item { cursor: pointer; }
 .resume-item:hover { background: var(--bg-muted); border-radius: 4px; }
@@ -937,9 +1026,9 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; align-items: center; justify-content: space-between;
   padding: 14px 18px; border-bottom: 1px solid var(--border);
 }
-.ni-header h3 { font-size: 14px; font-weight: 600; margin: 0; }
+.ni-header h3 { font-size: var(--fs-title-s); font-weight: 600; margin: 0; }
 .ni-close {
-  background: transparent; border: 0; color: var(--text-3, #9ca3af);
+  background: transparent; border: 0; color: var(--text3);
   cursor: pointer; padding: 4px; display: flex; border-radius: 4px;
 }
 .ni-close:hover { background: var(--bg-muted, rgba(255,255,255,0.06)); color: var(--text); }
@@ -952,8 +1041,8 @@ button { font-family: inherit; cursor: pointer; }
   flex: 1;
 }
 .ni-label {
-  font-size: 11px; color: var(--text-3, #9ca3af);
-  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
+  font-family: var(--mono); font-size: var(--fs-eyebrow); color: var(--text3);
+  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
 }
 .ni-field input[type="text"],
 .ni-field textarea,
@@ -962,7 +1051,7 @@ button { font-family: inherit; cursor: pointer; }
   border: 1px solid var(--border, #2a2d33);
   border-radius: 6px;
   color: var(--text);
-  font: inherit; font-size: 13px;
+  font: inherit; font-size: var(--fs-body);
   padding: 8px 10px;
   outline: none;
   transition: border-color 120ms;
@@ -978,21 +1067,21 @@ button { font-family: inherit; cursor: pointer; }
 .ni-row { display: flex; gap: 12px; }
 .ni-checkbox {
   flex-direction: row; align-items: center; gap: 8px;
-  font-size: 13px; cursor: pointer;
+  font-size: var(--fs-body); cursor: pointer;
 }
 .ni-checkbox input { margin: 0; cursor: pointer; }
-.ni-checkbox span { color: var(--text-2); }
+.ni-checkbox span { color: var(--text2); }
 .ni-actions {
   display: flex; justify-content: flex-end; gap: 8px;
   margin-top: 4px;
 }
 .ni-btn {
   border: 1px solid transparent; border-radius: 6px;
-  padding: 7px 14px; font: inherit; font-size: 13px;
+  padding: 7px 14px; font: inherit; font-size: var(--fs-body);
   cursor: pointer; transition: all 120ms;
 }
 .ni-btn-ghost {
-  background: transparent; color: var(--text-2);
+  background: transparent; color: var(--text2);
   border-color: var(--border);
 }
 .ni-btn-ghost:hover { background: var(--bg-muted, rgba(255,255,255,0.05)); color: var(--text); }
@@ -1012,19 +1101,19 @@ button { font-family: inherit; cursor: pointer; }
 .side-gate-actions .gate-btn {
   flex: 1;
   height: 36px;
-  font-size: 13px; font-weight: 500;
+  font-size: var(--fs-body); font-weight: 500;
   padding: 0 14px;
 }
 .side-section {
   margin-top: 18px;
 }
 .side-section-head {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.1em; text-transform: uppercase;
   color: var(--text3); margin-bottom: 6px;
 }
 .side-section-body {
-  font-size: 13.5px; line-height: 1.55;
+  font-size: var(--fs-body); line-height: 1.5;
   color: var(--text2);
   white-space: pre-wrap;
   word-break: break-word;
@@ -1036,12 +1125,12 @@ button { font-family: inherit; cursor: pointer; }
   border-top: 1px solid var(--border);
   padding-top: 14px;
 }
-.prop-key { color: var(--text3); font-size: 12px; padding: 6px 0; font-family: var(--mono); letter-spacing: 0.04em; }
-.prop-val { font-size: 13px; padding: 6px 0; }
+.prop-key { color: var(--text3); font-size: var(--fs-small); padding: 6px 0; font-family: var(--mono); letter-spacing: 0.04em; }
+.prop-val { font-size: var(--fs-body); padding: 6px 0; }
 .pill {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 4px 10px; border-radius: 999px;
-  font-size: 12px; font-weight: 500;
+  font-size: var(--fs-small); font-weight: 500;
   background: var(--bg-strong); color: var(--text2);
 }
 .pill-gate        { background: rgba(124, 58, 237, 0.12); color: var(--status-gate); }
@@ -1055,7 +1144,7 @@ button { font-family: inherit; cursor: pointer; }
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 12px 14px;
-  font-size: 13px;
+  font-size: var(--fs-body);
   color: var(--text2);
   white-space: pre-wrap;
   line-height: 1.55;
@@ -1076,7 +1165,7 @@ button { font-family: inherit; cursor: pointer; }
   overflow-y: auto;
 }
 .memory-side-head {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.1em; text-transform: uppercase;
   color: var(--text3);
   padding: 0 10px 8px;
@@ -1092,27 +1181,27 @@ button { font-family: inherit; cursor: pointer; }
 .mem-item:hover { background: var(--bg-muted); }
 .mem-item.active { background: var(--accent-soft); border-color: rgba(37, 64, 212, 0.16); }
 .mem-item .layer-tag {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--accent); letter-spacing: 0.06em;
   font-weight: 600;
 }
 .mem-item .name {
-  font-family: var(--mono); font-size: 12px;
+  font-family: var(--mono); font-size: var(--fs-small);
   color: var(--text);
 }
 .mem-item .desc {
-  font-size: 11.5px; color: var(--text2);
+  font-size: var(--fs-caption); color: var(--text2);
   margin-top: 2px;
 }
 .mem-item .meta {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3); margin-top: 2px;
 }
 .mem-item.missing { opacity: 0.55; }
 .mem-item.missing .layer-tag { color: var(--text3); }
 .mem-group-label {
   font-family: var(--mono);
-  font-size: 10px;
+  font-size: var(--fs-eyebrow);
   letter-spacing: 0.08em;
   color: var(--text3);
   padding: 14px 12px 6px;
@@ -1132,18 +1221,18 @@ button { font-family: inherit; cursor: pointer; }
 }
 .memory-doc h1 { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--text); }
 .memory-doc h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 28px 0 10px; color: var(--text); }
-.memory-doc h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; margin: 18px 0 8px; color: var(--text); }
-.memory-doc p { font-size: 14px; line-height: 1.65; color: var(--text2); margin: 0 0 10px; }
+.memory-doc h3 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-title-s); margin: 18px 0 8px; color: var(--text); }
+.memory-doc p { font-size: var(--fs-base); line-height: 1.65; color: var(--text2); margin: 0 0 10px; }
 .memory-doc ul, .memory-doc ol { padding-left: 22px; margin: 0 0 12px; color: var(--text2); }
-.memory-doc li { line-height: 1.6; font-size: 14px; }
+.memory-doc li { line-height: 1.6; font-size: var(--fs-base); }
 .memory-doc code {
-  font-family: var(--mono); font-size: 12px;
+  font-family: var(--mono); font-size: var(--fs-small);
   background: var(--bg-muted);
   padding: 1px 6px; border-radius: 3px;
   color: var(--text);
 }
 .memory-doc pre {
-  font-family: var(--mono); font-size: 12px;
+  font-family: var(--mono); font-size: var(--fs-small);
   background: var(--bg-strong);
   padding: 14px 16px;
   border-radius: 8px;
@@ -1156,7 +1245,7 @@ button { font-family: inherit; cursor: pointer; }
 .memory-doc table {
   border-collapse: collapse;
   margin: 12px 0;
-  font-size: 13px;
+  font-size: var(--fs-body);
   width: 100%;
 }
 .memory-doc th, .memory-doc td {
@@ -1172,27 +1261,27 @@ button { font-family: inherit; cursor: pointer; }
   border-bottom: 1px solid var(--border);
 }
 .memory-doc-head .layer-tag {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   background: var(--accent-soft); color: var(--accent);
   padding: 4px 10px; border-radius: 4px;
   letter-spacing: 0.06em; font-weight: 600;
 }
 .memory-doc-head .filename {
-  font-family: var(--mono); font-size: 13px;
+  font-family: var(--mono); font-size: var(--fs-body);
   color: var(--text);
 }
 .memory-doc-head .filesize {
   margin-left: auto;
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3);
 }
 .memory-empty {
   text-align: center; padding: 60px 24px;
-  color: var(--text3); font-size: 13px;
+  color: var(--text3); font-size: var(--fs-body);
 }
 /* ── change_tier badge ────────────────────────────────────────────────────── */
-.tier-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
+.tier-badge { font-size: var(--fs-caption); padding: 1px 8px; border-radius: 999px; margin-left: 6px;
   font-family: var(--mono); white-space: nowrap; }
 .tier-badge:empty { display: none; }
 .tier-badge.tier-T0 { background: var(--status-review); color: #fff; }
@@ -1229,12 +1318,12 @@ button { font-family: inherit; cursor: pointer; }
   min-height: 26px; padding: 0 8px;
   border: 1px solid var(--border); border-radius: 5px;
   background: var(--bg-card); color: var(--text2);
-  font-family: var(--mono); font-size: 10px; cursor: pointer;
+  font-family: var(--mono); font-size: var(--fs-eyebrow); cursor: pointer;
 }
 .pl-recover-btn:hover { border-color: var(--status-blocked); color: var(--status-blocked); }
 .pl-recover-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .pl-stage .pl-name {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   letter-spacing: 0.04em; color: var(--text);
   display: flex; align-items: center; gap: 6px;
 }
@@ -1248,7 +1337,7 @@ button { font-family: inherit; cursor: pointer; }
 .pl-stage.failed .pl-name .dot { background: var(--status-blocked); }
 @keyframes pl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); } }
 .pl-stage .pl-msg {
-  font-size: 11px; color: var(--text2);
+  font-size: var(--fs-caption); color: var(--text2);
   line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -1257,7 +1346,7 @@ button { font-family: inherit; cursor: pointer; }
   text-overflow: ellipsis;
 }
 .pl-stage .pl-meta {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3);
 }
 .pl-stage.idle .pl-msg, .pl-stage.idle .pl-meta { opacity: 0.55; }
@@ -1278,11 +1367,11 @@ button { font-family: inherit; cursor: pointer; }
   border-radius: 50%; background: rgba(0, 217, 126, 0.12);
   color: var(--accent, #00d97e); font-size: 16px; font-weight: 600;
 }
-.inbox-allclear .ac-text { flex: 1; font-size: 14px; color: var(--text2); }
+.inbox-allclear .ac-text { flex: 1; font-size: var(--fs-base); color: var(--text2); }
 .inbox-allclear .ac-text b { color: var(--text); font-weight: 600; }
 .inbox-allclear .ac-actions { display: flex; gap: 8px; }
 .inbox-allclear .ac-btn {
-  font-size: 13px; padding: 7px 14px; border-radius: 8px;
+  font-size: var(--fs-body); padding: 7px 14px; border-radius: 8px;
   border: 1px solid var(--border-strong); background: transparent;
   color: var(--text); cursor: pointer; transition: background 0.12s, border-color 0.12s;
 }
@@ -1299,7 +1388,7 @@ button { font-family: inherit; cursor: pointer; }
   margin: -4px 2px;
   padding: 12px 12px 10px;
 }
-.pl-gate .gate-glyph { font-size: 12px; line-height: 1; flex-shrink: 0; filter: grayscale(1); opacity: 0.6; }
+.pl-gate .gate-glyph { font-size: var(--fs-small); line-height: 1; flex-shrink: 0; filter: grayscale(1); opacity: 0.6; }
 .pl-gate .pl-name { font-weight: 600; }
 .pl-gate.active {
   border-left-color: var(--status-blocked);
@@ -1310,7 +1399,7 @@ button { font-family: inherit; cursor: pointer; }
 .pl-gate .gate-badge {
   margin-left: auto;
   background: var(--status-blocked); color: #fff;
-  font-size: 10px; font-weight: 700;
+  font-size: var(--fs-eyebrow); font-weight: 700;
   min-width: 16px; height: 16px; padding: 0 4px;
   border-radius: 8px;
   display: inline-flex; align-items: center; justify-content: center;
@@ -1331,18 +1420,18 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; flex-direction: column; gap: 2px;
 }
 .cost-cell .lbl {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.08em; text-transform: uppercase;
   color: var(--text2);
 }
 .cost-cell .v {
   font-family: var(--serif); font-weight: 500;
   font-variant-numeric: tabular-nums;
-  font-size: 26px; letter-spacing: -0.02em;
+  font-size: var(--fs-num-s); letter-spacing: -0.02em;
   color: var(--text); line-height: 1.1;
 }
-.cost-cell .v small { font-size: 14px; color: var(--text2); margin-left: 2px; font-weight: 400; }
-.cost-cell .sub { font-size: 11.5px; color: var(--text2); }
+.cost-cell .v small { font-size: var(--fs-base); color: var(--text2); margin-left: 2px; font-weight: 400; }
+.cost-cell .sub { font-size: var(--fs-caption); color: var(--text2); }
 .cost-cell.warn .v { color: var(--status-blocked); }
 .cost-cell.good .v { color: var(--status-review); }
@@ -1374,7 +1463,7 @@ button { font-family: inherit; cursor: pointer; }
   transform: translateX(-50%);
   background: #0f1115; color: #fff;
   padding: 4px 8px; border-radius: 4px;
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   white-space: nowrap;
   display: none;
   pointer-events: none;
@@ -1387,7 +1476,7 @@ button { font-family: inherit; cursor: pointer; }
    chart is the primary reading and this is the exact one. */
 .cost-table { margin-top: 10px; }
 .cost-table summary {
-  cursor: pointer; font-size: 12px; color: var(--text2);
+  cursor: pointer; font-size: var(--fs-small); color: var(--text2);
   padding: 4px 0; list-style-position: inside;
 }
 .cost-table summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
@@ -1395,13 +1484,13 @@ button { font-family: inherit; cursor: pointer; }
 .cost-table th, .cost-table td {
   text-align: left; padding: 5px 10px 5px 0;
   border-bottom: 1px solid var(--border);
-  font-size: 12px; white-space: nowrap;
+  font-size: var(--fs-small); white-space: nowrap;
 }
-.cost-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
+.cost-table th { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
 .cost-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
 .cost-axis {
   display: flex; justify-content: space-between;
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3);
   margin-top: 4px;
 }
@@ -1414,13 +1503,13 @@ button { font-family: inherit; cursor: pointer; }
 }
 .cost-budget-line .label {
   position: absolute; right: 4px; top: -16px;
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--status-progress);
   background: var(--bg-card); padding: 0 4px;
 }
 .cost-empty {
   text-align: center; padding: 30px 16px;
-  font-size: 13px; color: var(--text3);
+  font-size: var(--fs-body); color: var(--text3);
 }
 /* ── Cost per feature ────────────────────────────────────────────────────── */
@@ -1430,7 +1519,7 @@ button { font-family: inherit; cursor: pointer; }
   padding-top: 16px;
 }
 .feat-title {
-  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase;
   letter-spacing: .06em; color: var(--text3);
   margin-bottom: 10px;
 }
@@ -1440,16 +1529,16 @@ button { font-family: inherit; cursor: pointer; }
   grid-template-columns: 160px 1fr 56px 32px;
   align-items: center;
   gap: 8px;
-  font-size: 12px;
+  font-size: var(--fs-small);
 }
 .feat-name {
-  font-family: var(--mono); color: var(--text1);
+  font-family: var(--mono); color: var(--text);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.feat-bar-wrap { background: var(--bg); border-radius: 3px; height: 6px; }
+.feat-bar-wrap { background: var(--bg-strong); border-radius: 3px; height: 6px; }
 .feat-bar { height: 6px; border-radius: 3px; background: var(--accent); transition: width .3s; }
-.feat-cost { font-family: var(--mono); color: var(--text1); text-align: right; }
-.feat-runs { font-size: 11px; color: var(--text3); text-align: right; }
+.feat-cost { font-family: var(--mono); color: var(--text); text-align: right; }
+.feat-runs { font-size: var(--fs-caption); color: var(--text3); text-align: right; }
 /* ── Inbox page ───────────────────────────────────────────────────────────── */
 .inbox-page {
@@ -1476,11 +1565,13 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; align-items: center; gap: 10px;
 }
 .inbox-summary .pill-stat .num {
-  font-family: var(--mono); font-weight: 600;
-  font-size: 24px; color: var(--text);
+  font-family: var(--serif); font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  font-size: var(--fs-num-s); letter-spacing: -0.02em;
+  color: var(--text);
 }
 .inbox-summary .pill-stat .lbl {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.08em; text-transform: uppercase;
   color: var(--text2);
 }
@@ -1507,11 +1598,11 @@ button { font-family: inherit; cursor: pointer; }
 }
 .resume-title {
   font-family: var(--sans); font-weight: 600;
-  font-size: 13px; color: var(--text);
+  font-size: var(--fs-body); color: var(--text);
 }
 .resume-meta {
   margin-left: auto;
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.08em; text-transform: uppercase;
   color: var(--text3);
 }
@@ -1520,7 +1611,7 @@ button { font-family: inherit; cursor: pointer; }
   gap: 16px;
 }
 .resume-col-head {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.08em; text-transform: uppercase;
   color: var(--text3);
   margin-bottom: 8px;
@@ -1531,7 +1622,7 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; flex-direction: column; gap: 8px;
 }
 .resume-list .resume-item {
-  font-size: 12px;
+  font-size: var(--fs-small);
   line-height: 1.4;
   color: var(--text2);
   cursor: pointer;
@@ -1542,7 +1633,7 @@ button { font-family: inherit; cursor: pointer; }
 .resume-list .resume-item:hover { color: var(--text); }
 .resume-list .resume-item .ri-tag {
   flex-shrink: 0;
-  font-family: var(--mono); font-size: 9px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   padding: 2px 5px; border-radius: 3px;
   letter-spacing: 0.04em;
   background: rgba(255,255,255,0.05);
@@ -1550,13 +1641,13 @@ button { font-family: inherit; cursor: pointer; }
   margin-top: 1px;
 }
 .resume-list .resume-item .ri-tag.ok { color: var(--accent); background: rgba(0,217,126,0.08); }
-.resume-list .resume-item .ri-tag.fail { color: var(--p1); background: rgba(255,80,80,0.08); }
+.resume-list .resume-item .ri-tag.fail { color: var(--p1-fg); background: rgba(255,80,80,0.08); }
 .resume-list .resume-item .ri-text {
   flex: 1; min-width: 0;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .resume-list .empty {
-  font-size: 12px; color: var(--text3); font-style: italic;
+  font-size: var(--fs-small); color: var(--text3); font-style: italic;
 }
 @media (max-width: 880px) {
   .resume-grid { grid-template-columns: 1fr; gap: 12px; }
@@ -1572,10 +1663,10 @@ button { font-family: inherit; cursor: pointer; }
 }
 .inbox-section-head h3 {
   font-family: var(--sans); font-weight: 600;
-  font-size: 14px; margin: 0; color: var(--text);
+  font-size: var(--fs-title-s); margin: 0; color: var(--text);
 }
 .inbox-section-head .inbox-count {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3); margin-left: 2px;
 }
@@ -1601,13 +1692,13 @@ button { font-family: inherit; cursor: pointer; }
 .inbox-row:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
 .inbox-row .id {
   padding-top: 2px;
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3); letter-spacing: 0.04em;
   /* keep a long project-prefixed id inside its own column — never overlap the title */
   min-width: 0; overflow-wrap: anywhere; word-break: break-word;
 }
 .inbox-row .ttl {
-  font-size: 13.5px; color: var(--text);
+  font-size: var(--fs-body); color: var(--text);
   font-weight: 500;
   display: flex;
   flex-direction: column;
@@ -1623,7 +1714,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .inbox-row .ttl .ttl-desc {
   font-weight: 400;
-  font-size: 12.5px;
+  font-size: var(--fs-small);
   color: var(--text2);
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -1633,39 +1724,43 @@ button { font-family: inherit; cursor: pointer; }
   margin-top: 2px;
 }
 .inbox-row .ttl .meta {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3); margin-top: 4px;
 }
 .inbox-row .actions {
   display: flex; gap: 4px; align-items: center;
 }
-.inbox-row .actions .gate-btn { height: 26px; padding: 0 10px; font-size: 11px; }
-.budgets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.inbox-row .actions .gate-btn { height: 26px; padding: 0 10px; font-size: var(--fs-caption); }
+.budgets-failed { padding: 20px 0; max-width: 560px; }
+.budgets-failed .bf-head { font-size: var(--fs-title-s); font-weight: 600; margin-bottom: 6px; }
+.budgets-failed .bf-why { font-family: var(--mono); font-size: var(--fs-small); color: var(--status-blocked); margin-bottom: 10px; word-break: break-word; }
+.budgets-failed .bf-note { font-size: var(--fs-body); color: var(--text2); line-height: 1.5; margin-bottom: 14px; }
+.budgets-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
 .budgets-table th {
-  text-align: left; font-family: var(--mono); font-size: 10px;
+  text-align: left; font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2);
   padding: 0 12px 8px 0; border-bottom: 1px solid var(--border);
 }
 .budgets-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
 /* A row has to answer three questions: what is this agent, what does it cost,
    over what period. The slug alone answered none of them. */
-.budgets-table .bt-slug { font-family: var(--mono); font-size: 12.5px; }
+.budgets-table .bt-slug { font-family: var(--mono); font-size: var(--fs-small); }
 .budgets-table .bt-desc {
-  font-size: 12px; color: var(--text2); margin-top: 2px;
+  font-size: var(--fs-small); color: var(--text2); margin-top: 2px;
   max-width: 52ch; text-wrap: pretty;
 }
 .budgets-table .bt-runs,
 .budgets-table .bt-cap { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
-.budgets-table .bt-spend { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
+.budgets-table .bt-spend { font-family: var(--mono); font-size: var(--fs-small); white-space: nowrap; }
 .budgets-table .bt-usd { font-variant-numeric: tabular-nums; color: var(--text); }
 .budgets-table th[title] { cursor: help; }
-.budgets-idle summary { cursor: pointer; font-size: 13px; color: var(--text2); }
+.budgets-idle summary { cursor: pointer; font-size: var(--fs-body); color: var(--text2); }
 .budgets-idle summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
 .budgets-table .bt-actions { text-align: right; white-space: nowrap; }
 .budgets-table .bt-actions .ab-btn + .ab-btn { margin-left: 6px; }
 .budgets-empty {
   padding: 16px; border: 1px dashed var(--border-strong); border-radius: 8px;
-  color: var(--text2); font-size: 13px;
+  color: var(--text2); font-size: var(--fs-body);
 }
 .budgets-uncapped { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
 .docs-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; }
@@ -1673,18 +1768,18 @@ button { font-family: inherit; cursor: pointer; }
   flex: 1 1 auto; min-width: 0; max-width: 460px;
   height: 32px; padding: 0 10px;
   border: 1px solid var(--border); border-radius: 8px;
-  background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px;
+  background: var(--bg-card); color: var(--text); font: inherit; font-size: var(--fs-body);
 }
 .docs-search input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
-.docs-search-hint { font-family: var(--mono); font-size: 10px; color: var(--text3); }
-.docs-search-meta { font-size: 12px; color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.docs-search-hint { font-family: var(--mono); font-size: var(--fs-eyebrow); color: var(--text3); }
+.docs-search-meta { font-size: var(--fs-small); color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .docs-hit { padding: 10px 0; border-top: 1px solid var(--border); }
-.docs-hit-line { display: flex; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--text2); margin-top: 4px; }
+.docs-hit-line { display: flex; gap: 10px; font-family: var(--mono); font-size: var(--fs-caption); color: var(--text2); margin-top: 4px; }
 .docs-hit-no { color: var(--text3); min-width: 34px; text-align: right; }
 .col-more {
   display: block; width: 100%;
   margin-top: 6px; padding: 8px;
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   border: 1px dashed var(--border-strong); border-radius: 8px;
   background: transparent; color: var(--text2);
 }
@@ -1694,14 +1789,14 @@ button { font-family: inherit; cursor: pointer; }
   padding: 14px 16px;
   background: var(--bg-muted);
   border-radius: 8px;
-  font-size: 12px; color: var(--text3);
+  font-size: var(--fs-small); color: var(--text3);
   text-align: center;
 }
 /* ── Metrics page ─────────────────────────────────────────────────────────── */
 .metrics-page { padding: 24px 32px; }
 .mp-section-label {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   letter-spacing: 0.1em; text-transform: uppercase;
   color: var(--text3); margin: 0 0 12px;
 }
@@ -1714,7 +1809,7 @@ button { font-family: inherit; cursor: pointer; }
   margin-bottom: 16px;
 }
 .period-label {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.12em; color: var(--text3);
 }
 .period-chips {
@@ -1725,7 +1820,7 @@ button { font-family: inherit; cursor: pointer; }
 .period-chip {
   background: transparent; border: none; color: var(--text2);
   padding: 5px 12px; border-radius: 5px;
-  font-family: var(--mono); font-size: 11px; font-weight: 500;
+  font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
   letter-spacing: 0.05em; cursor: pointer;
   transition: background .12s, color .12s;
 }
@@ -1753,7 +1848,7 @@ button { font-family: inherit; cursor: pointer; }
      so a figure that ticks over re-flows its own width and the number appears to
      breathe. Tabular figures cost nothing here and stop it. */
   font-variant-numeric: tabular-nums;
-  font-size: 52px; line-height: 1;
+  font-size: var(--fs-num-xl); line-height: 1;
   letter-spacing: -0.02em;
 }
 /* An absence is rendered quietly and never silently — the glyph stays out of the
@@ -1766,23 +1861,23 @@ button { font-family: inherit; cursor: pointer; }
 }
 .delta {
   margin-left: 6px;
-  font-family: var(--mono); font-size: 10px; font-weight: 600;
+  font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 600;
   letter-spacing: 0.02em; white-space: nowrap;
   color: var(--text3); cursor: help;
 }
 .delta.up   { color: var(--status-review); }
 .delta.down { color: var(--status-progress); }
 .metric-num small {
-  font-size: 22px; color: var(--text2);
+  font-size: var(--fs-title-l); color: var(--text2);
   margin-left: 4px; font-weight: 400;
 }
 .metric-label {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   letter-spacing: 0.08em; text-transform: uppercase;
   color: var(--text2); margin-top: 14px;
 }
 .metric-trend {
-  margin-top: 6px; font-size: 12px; color: var(--text2);
+  margin-top: 6px; font-size: var(--fs-small); color: var(--text2);
 }
 .mp-secondary {
@@ -1790,7 +1885,7 @@ button { font-family: inherit; cursor: pointer; }
   gap: 12px; margin-bottom: 28px;
 }
 .mp-secondary .metric-card { padding: 18px; }
-.mp-secondary .metric-num { font-size: 30px; }
+.mp-secondary .metric-num { font-size: var(--fs-num-m); }
 .mp-row {
   display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
@@ -1801,17 +1896,17 @@ button { font-family: inherit; cursor: pointer; }
 }
 .mp-card h3 {
   font-family: var(--sans); font-weight: 600;
-  font-size: 15px; margin: 0 0 16px;
+  font-size: var(--fs-title-s); margin: 0 0 16px;
 }
 .mp-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
 .mp-card-head h3 { margin: 0; }
 .mp-card-meta {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3); letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 .feed-cost {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--accent);
   background: var(--accent-soft);
   padding: 2px 6px; border-radius: 4px;
@@ -1821,7 +1916,7 @@ button { font-family: inherit; cursor: pointer; }
 .bar-row {
   display: grid; grid-template-columns: 130px 1fr 50px;
   align-items: center; gap: 12px;
-  margin-bottom: 10px; font-size: 12.5px;
+  margin-bottom: 10px; font-size: var(--fs-small);
 }
 .bar-row .name { font-family: var(--mono); color: var(--text); }
 .bar-row .rail {
@@ -1836,7 +1931,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .bar-row .pct {
   text-align: right; color: var(--text2);
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
 }
 .feed-row {
@@ -1845,7 +1940,7 @@ button { font-family: inherit; cursor: pointer; }
   gap: 12px; align-items: baseline;
   padding: 10px 0;
   border-top: 1px solid var(--border);
-  font-size: 13px;
+  font-size: var(--fs-body);
 }
 .feed-row:first-child { border-top: none; }
 .feed-dot {
@@ -1855,16 +1950,16 @@ button { font-family: inherit; cursor: pointer; }
 .feed-dot.ok { background: var(--status-review); }
 .feed-dot.fail { background: var(--status-blocked); }
 .feed-dot.def { background: var(--text3); }
-.feed-row .agent { font-family: var(--mono); color: var(--text2); font-size: 12px; }
+.feed-row .agent { font-family: var(--mono); color: var(--text2); font-size: var(--fs-small); }
 .feed-row .msg { color: var(--text); }
-.feed-row .time { font-family: var(--mono); font-size: 11px; color: var(--text3); }
+.feed-row .time { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text3); }
 /* ── Share page ───────────────────────────────────────────────────────────── */
 /* ── Logs tab ───────────────────────────────────────────── */
 .logs-page { display: flex; flex-direction: column; height: 100%; }
 .logs-header { padding: 20px 24px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 16px; }
-.logs-header h2 { margin: 0; font-size: 18px; }
-.logs-hint { font-size: 12px; color: var(--text3); }
+.logs-header h2 { margin: 0; font-size: var(--fs-title-l); letter-spacing: -0.02em; }
+.logs-hint { font-size: var(--fs-small); color: var(--text3); }
 .logs-hint code { font-family: var(--mono); background: var(--bg-strong); padding: 1px 5px; border-radius: 3px; }
 .logs-layout { display: flex; flex: 1; overflow: hidden; }
 .logs-list { width: 280px; min-width: 220px; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 0; flex-shrink: 0; }
@@ -1877,7 +1972,7 @@ button { font-family: inherit; cursor: pointer; }
   min-height: 28px; padding: 0 10px;
   border: 1px solid var(--border); border-radius: 999px;
   background: transparent; color: var(--text2);
-  font-family: var(--mono); font-size: 11px; cursor: pointer;
+  font-family: var(--mono); font-size: var(--fs-caption); cursor: pointer;
 }
 .log-facet:hover { border-color: var(--border-strong); }
 .log-facet.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-text); }
@@ -1886,18 +1981,18 @@ button { font-family: inherit; cursor: pointer; }
 .log-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); }
 .log-item:hover { background: var(--bg-muted); }
 .log-item.active { background: var(--bg-strong); border-left: 2px solid var(--accent); }
-.log-item .log-date { font-size: 11px; color: var(--text3); font-family: var(--mono); }
-.log-item .log-title { font-size: 13px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.log-item .log-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
+.log-item .log-date { font-size: var(--fs-caption); color: var(--text3); font-family: var(--mono); }
+.log-item .log-title { font-size: var(--fs-body); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.log-item .log-meta { font-size: var(--fs-caption); color: var(--text3); margin-top: 2px; }
 .log-detail-head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
-.log-detail-head h3 { margin: 0 0 4px; font-size: 17px; }
-.log-detail-head .log-detail-meta { font-size: 12px; color: var(--text3); }
+.log-detail-head h3 { margin: 0 0 4px; font-size: var(--fs-title-m); letter-spacing: -0.01em; }
+.log-detail-head .log-detail-meta { font-size: var(--fs-small); color: var(--text3); }
 .log-section { margin-bottom: 18px; }
-.log-section-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+.log-section-label { font-size: var(--fs-caption); color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
 .log-bullets { list-style: none; padding: 0; margin: 0; }
-.log-bullets li { padding: 3px 0 3px 12px; position: relative; font-size: 13px; color: var(--text2); }
+.log-bullets li { padding: 3px 0 3px 12px; position: relative; font-size: var(--fs-body); color: var(--text2); }
 .log-bullets li::before { content: '·'; position: absolute; left: 0; color: var(--accent); }
-.log-empty { font-size: 13px; color: var(--text3); font-style: italic; }
+.log-empty { font-size: var(--fs-body); color: var(--text3); font-style: italic; }
 /* ── Agents installed list (legacy — kept for fallback) ───────────────── */
 .agents-installed { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
@@ -1907,9 +2002,9 @@ button { font-family: inherit; cursor: pointer; }
 .ab-name { font-family: var(--mono, monospace); color: var(--accent); }
 .ab-cap { color: var(--text3); }
 .agent-card { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
-.agent-card .ac-name { font-size: 12px; font-weight: 600; font-family: var(--mono); color: var(--accent); }
-.agent-card .ac-desc { font-size: 11px; color: var(--text3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.agent-card .ac-meta { font-size: 10px; color: var(--text3); margin-top: 5px; display: flex; gap: 8px; }
+.agent-card .ac-name { font-size: var(--fs-small); font-weight: 600; font-family: var(--mono); color: var(--accent); }
+.agent-card .ac-desc { font-size: var(--fs-caption); color: var(--text3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-card .ac-meta { font-size: var(--fs-eyebrow); color: var(--text3); margin-top: 5px; display: flex; gap: 8px; }
 .agent-card .ac-model { background: var(--bg-strong); padding: 1px 5px; border-radius: 3px; }
 .agent-card .ac-used { color: var(--status-review); }
 .agent-card .ac-never { color: var(--text3); font-style: italic; }
@@ -1939,17 +2034,17 @@ button { font-family: inherit; cursor: pointer; }
 .fleet-search input[type="search"] {
   flex: 1; max-width: 320px;
   background: var(--bg-muted); border: 1px solid var(--border);
-  color: var(--text); font-family: var(--mono); font-size: 13px;
+  color: var(--text); font-family: var(--mono); font-size: var(--fs-body);
   padding: 8px 12px; border-radius: 6px;
 }
 .fleet-search input[type="search"]:focus {
   outline: 2px solid var(--focus-ring); outline-offset: 1px;
   border-color: transparent;
 }
-.fleet-search .search-hint { font-size: 11px; color: var(--text3); font-family: var(--mono); }
+.fleet-search .search-hint { font-size: var(--fs-caption); color: var(--text3); font-family: var(--mono); }
 .fleet-search .search-hint kbd {
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 3px; padding: 1px 5px; font-size: 10px;
+  border-radius: 3px; padding: 1px 5px; font-size: var(--fs-eyebrow);
 }
 .fleet-facets { display: flex; flex-direction: column; gap: 6px; }
@@ -1958,12 +2053,12 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
 }
 .fleet-facets legend {
-  font-size: 11px; color: var(--text3); text-transform: uppercase;
+  font-size: var(--fs-caption); color: var(--text3); text-transform: uppercase;
   letter-spacing: 0.05em; margin-right: 6px; min-width: 60px;
 }
 .facet-chip {
   background: var(--bg-muted); border: 1px solid var(--border);
-  color: var(--text2); font-size: 12px; font-family: var(--mono);
+  color: var(--text2); font-size: var(--fs-small); font-family: var(--mono);
   padding: 4px 10px; border-radius: 12px; cursor: pointer;
   transition: background-color 0.15s, color 0.15s, border-color 0.15s;
 }
@@ -1977,16 +2072,16 @@ button { font-family: inherit; cursor: pointer; }
 .fleet-sort {
   display: flex; gap: 8px; align-items: center;
-  font-size: 11px; color: var(--text3);
+  font-size: var(--fs-caption); color: var(--text3);
 }
 .fleet-sort select {
   background: var(--bg-muted); border: 1px solid var(--border);
-  color: var(--text); font-family: var(--mono); font-size: 12px;
+  color: var(--text); font-family: var(--mono); font-size: var(--fs-small);
   padding: 4px 8px; border-radius: 6px;
 }
 .fleet-sort button {
   background: transparent; border: 1px solid var(--border);
-  color: var(--text2); font-size: 11px; font-family: var(--mono);
+  color: var(--text2); font-size: var(--fs-caption); font-family: var(--mono);
   padding: 4px 8px; border-radius: 6px;
 }
 .fleet-sort button:hover { color: var(--text); border-color: var(--border-strong); }
@@ -2023,11 +2118,11 @@ button { font-family: inherit; cursor: pointer; }
 .agent-row.status-unused  .ar-status { background: var(--agent-unused); }
 .agent-row.status-retired .ar-status { background: var(--agent-retired); }
 .agent-row .ar-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.agent-row .ar-name { font-family: var(--mono); font-size: 13px; color: var(--text); }
-.agent-row .ar-meta { font-size: 11px; color: var(--text3); display: flex; gap: 10px; flex-wrap: wrap; }
+.agent-row .ar-name { font-family: var(--mono); font-size: var(--fs-body); color: var(--text); }
+.agent-row .ar-meta { font-size: var(--fs-caption); color: var(--text3); display: flex; gap: 10px; flex-wrap: wrap; }
 .agent-row .ar-meta .ar-domain {
   background: var(--bg-muted); padding: 1px 6px; border-radius: 3px;
-  color: var(--text2); font-family: var(--mono); font-size: 10px;
+  color: var(--text2); font-family: var(--mono); font-size: var(--fs-eyebrow);
 }
 .agent-row .ar-rail {
   width: 80px; height: 4px;
@@ -2040,13 +2135,13 @@ button { font-family: inherit; cursor: pointer; }
 }
 .agent-row.status-failing .ar-rail-fill { background: var(--agent-failing); }
 .agent-row .ar-chev {
-  color: var(--text3); font-size: 14px; padding: 0 4px;
+  color: var(--text3); font-size: var(--fs-base); padding: 0 4px;
 }
 /* Status pill — used in drawer header */
 .status-pill {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: 11px; font-family: var(--mono);
+  font-size: var(--fs-caption); font-family: var(--mono);
   padding: 2px 8px; border-radius: 10px;
   background: var(--bg-muted); border: 1px solid var(--border);
 }
@@ -2086,12 +2181,13 @@ button { font-family: inherit; cursor: pointer; }
   padding: 16px 20px; border-bottom: 1px solid var(--border);
 }
 .agent-drawer-header h3 {
-  font-family: var(--mono); font-size: 14px;
+  font-family: var(--sans); font-weight: 600;
+  font-size: var(--fs-title-s);
   color: var(--text); flex: 1; margin: 0;
 }
 .agent-drawer-close {
   background: transparent; border: 1px solid var(--border);
-  color: var(--text2); font-size: 18px; line-height: 1;
+  color: var(--text2); font-size: var(--fs-title-m); line-height: 1;
   width: 28px; height: 28px; border-radius: 6px;
   display: flex; align-items: center; justify-content: center;
 }
@@ -2103,20 +2199,20 @@ button { font-family: inherit; cursor: pointer; }
 }
 .agent-drawer-body .mp-card { padding: 12px 14px; }
 .agent-drawer-body h4 {
-  font-size: 11px; text-transform: uppercase;
+  font-size: var(--fs-caption); text-transform: uppercase;
   color: var(--text3); letter-spacing: 0.05em;
   margin: 0 0 8px;
 }
 .agent-summary-grid {
   display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
-  font-size: 12px;
+  font-size: var(--fs-small);
 }
 .agent-summary-grid dt { color: var(--text3); font-family: var(--mono); }
 .agent-summary-grid dd { color: var(--text); font-family: var(--mono); margin: 0; }
 .run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
 .run-row {
   display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px;
-  font-size: 11px; font-family: var(--mono); color: var(--text2);
+  font-size: var(--fs-caption); font-family: var(--mono); color: var(--text2);
   padding: 4px 0;
 }
 .run-row .rr-verdict.ok      { color: var(--agent-ok); }
@@ -2126,15 +2222,15 @@ button { font-family: inherit; cursor: pointer; }
 .failure-list { list-style: none; margin: 0; padding: 0; }
 .failure-list li {
   display: flex; gap: 10px; padding: 4px 0;
-  font-family: var(--mono); font-size: 12px;
+  font-family: var(--mono); font-size: var(--fs-small);
 }
 .failure-list .fm-key   { flex: 1; color: var(--text); }
 .failure-list .fm-count { color: var(--agent-failing); }
-.failure-list .fm-last  { color: var(--text3); font-size: 11px; }
+.failure-list .fm-last  { color: var(--text3); font-size: var(--fs-caption); }
 .agent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
 .agent-actions button {
   background: var(--bg-muted); border: 1px solid var(--border);
-  color: var(--text); font-family: var(--mono); font-size: 12px;
+  color: var(--text); font-family: var(--mono); font-size: var(--fs-small);
   padding: 6px 12px; border-radius: 6px;
 }
 .agent-actions button:hover { border-color: var(--border-strong); }
@@ -2169,7 +2265,7 @@ button { font-family: inherit; cursor: pointer; }
   border-radius: 16px;
   padding: 32px;
 }
-.share-card h2 {
+.share-card h2:not(.section-title) {
   font-family: var(--serif); font-weight: 500;
   font-size: 28px; letter-spacing: -0.01em;
   margin: 0 0 6px;
@@ -2184,13 +2280,13 @@ button { font-family: inherit; cursor: pointer; }
   margin-bottom: 16px;
 }
 .share-toggle-row .label-grp { flex: 1; }
-.share-toggle-row .label-grp .l { font-weight: 600; font-size: 14px; }
-.share-toggle-row .label-grp .h { color: var(--text2); font-size: 12px; }
+.share-toggle-row .label-grp .l { font-weight: 600; font-size: var(--fs-base); }
+.share-toggle-row .label-grp .h { color: var(--text2); font-size: var(--fs-small); }
-.notif-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; }
+.notif-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; }
 .notif-row:hover { border-color: var(--accent); }
 .notif-row .emoji { font-size: 16px; flex-shrink: 0; }
-.notif-row strong { color: var(--text1); margin-right: 4px; }
+.notif-row strong { color: var(--text); margin-right: 4px; }
 .notif-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
 .toggle {
@@ -2224,24 +2320,24 @@ button { font-family: inherit; cursor: pointer; }
 }
 .url-block .url-text {
   flex: 1; font-family: var(--mono);
-  font-size: 12.5px; color: var(--text);
+  font-size: var(--fs-small); color: var(--text);
   white-space: nowrap; overflow: hidden;
   text-overflow: ellipsis;
 }
 .btn-black {
   background: #0f1115; color: #fff; border: none;
   padding: 8px 14px; border-radius: 999px;
-  font-size: 12px; font-weight: 500;
+  font-size: var(--fs-small); font-weight: 500;
 }
 .btn-ghost-sm {
   background: transparent;
   border: 1px solid var(--border-strong);
   color: var(--text);
   padding: 8px 12px; border-radius: 999px;
-  font-size: 12px;
+  font-size: var(--fs-small);
 }
 .share-note {
-  font-size: 13px; color: var(--text2);
+  font-size: var(--fs-body); color: var(--text2);
   margin-top: 16px; line-height: 1.55;
 }
 .share-note strong { color: var(--text); }
@@ -2251,7 +2347,7 @@ button { font-family: inherit; cursor: pointer; }
   padding: 12px 16px;
   background: var(--bg-muted);
   border-radius: 10px;
-  font-size: 13px; color: var(--text2);
+  font-size: var(--fs-body); color: var(--text2);
   margin-top: 12px;
 }
 .spinner {
@@ -2265,7 +2361,7 @@ button { font-family: inherit; cursor: pointer; }
 .share-badge {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: 10px;
+  font-size: var(--fs-eyebrow);
   padding: 2px 6px; border-radius: 999px;
   font-family: var(--mono);
   text-transform: uppercase;
@@ -2292,7 +2388,7 @@ button { font-family: inherit; cursor: pointer; }
   display: inline-flex; align-items: center; gap: 4px;
   height: 22px; padding: 0 9px;
   border-radius: 999px;
-  font-size: 11px; font-weight: 500;
+  font-size: var(--fs-caption); font-weight: 500;
   background: var(--bg-strong); color: var(--text2);
   border: 1px solid var(--border);
   cursor: pointer;
@@ -2306,7 +2402,7 @@ button { font-family: inherit; cursor: pointer; }
 .fchip-clear { background: transparent; color: var(--text3); border-color: transparent; }
 .fchip-clear:hover { background: var(--bg-strong); color: var(--status-blocked); }
 .filter-section-label {
-  font-family: var(--mono); font-size: 10px;
+  font-family: var(--mono); font-size: var(--fs-eyebrow);
   letter-spacing: 0.06em; text-transform: uppercase;
   color: var(--text3); padding: 0 4px;
 }
@@ -2317,7 +2413,7 @@ button { font-family: inherit; cursor: pointer; }
   cursor: pointer;
   position: relative;
 }
-.card-status-edit .pill { font-size: 10px; height: 18px; padding: 0 7px; }
+.card-status-edit .pill { font-size: var(--fs-eyebrow); height: 18px; padding: 0 7px; }
 .card-status-chev {
   color: var(--text3); transition: color 0.12s;
   display: inline-flex; align-items: center;
@@ -2338,7 +2434,7 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; align-items: center; gap: 8px;
   padding: 6px 10px;
   border-radius: 4px;
-  font-size: 12px; font-weight: 500;
+  font-size: var(--fs-small); font-weight: 500;
   color: var(--text);
   background: transparent; border: none;
   width: 100%; text-align: left;
@@ -2357,19 +2453,19 @@ button { font-family: inherit; cursor: pointer; }
   display: grid;
   grid-template-columns: 130px 1fr 70px;
   align-items: center; gap: 12px;
-  margin-bottom: 10px; font-size: 12.5px;
+  margin-bottom: 10px; font-size: var(--fs-small);
 }
 .agent-cost-row .name { font-family: var(--mono); color: var(--text); }
 .agent-cost-row .rail { display: block; height: 6px; background: var(--bg-strong); border-radius: 999px; overflow: hidden; }
 .agent-cost-row .fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
-.agent-cost-row .amt { text-align: right; color: var(--text2); font-family: var(--mono); font-size: 11px; }
+.agent-cost-row .amt { text-align: right; color: var(--text2); font-family: var(--mono); font-size: var(--fs-caption); }
 /* ── Task timeline ────────────────────────────────────────────────────────── */
 .tl-event {
   display: flex; gap: 10px;
   padding: 6px 0;
   border-top: 1px solid var(--border);
-  font-size: 12px;
+  font-size: var(--fs-small);
 }
 .tl-event:first-child { border-top: none; }
 .tl-dot {
@@ -2379,22 +2475,26 @@ button { font-family: inherit; cursor: pointer; }
   margin-top: 4px; flex-shrink: 0;
 }
 .tl-content { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
-.tl-actor { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent); }
+.tl-actor { font-family: var(--mono); font-size: var(--fs-caption); font-weight: 600; color: var(--accent); }
 .tl-action { color: var(--text2); }
 .tl-change {
-  font-family: var(--mono); font-size: 11px;
+  font-family: var(--mono); font-size: var(--fs-caption);
   background: var(--bg-strong); color: var(--text);
   padding: 1px 6px; border-radius: 3px;
 }
-.tl-ts { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text3); }
-.side-section-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; margin-top: 16px; }
+.tl-ts { margin-left: auto; font-family: var(--mono); font-size: var(--fs-eyebrow); color: var(--text3); }
+.side-section-head { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; margin-top: 16px; }
 /* ── Security tab: hero KPI tile + activity feed ──────────────────────────── */
-.kpi-hero .kpi-value-hero { font-size: 36px; line-height: 1.1; font-weight: 500; }
-.kpi-hero .kpi-label { font-size: 13px; font-weight: 500; }
-.kpi-empty .kpi-value { color: var(--accent); font-size: 22px; }
+.kpi-hero .kpi-value-hero {
+  font-family: var(--serif); font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  font-size: var(--fs-num-l); line-height: 1.1; letter-spacing: -0.02em;
+}
+.kpi-hero .kpi-label { font-size: var(--fs-body); font-weight: 500; }
+.kpi-empty .kpi-value { color: var(--accent); font-size: var(--fs-title-l); }
 .kpi-empty .kpi-value::after {
-  content: ' all clear'; font-size: 11px; color: var(--text3); font-weight: 400;
+  content: ' all clear'; font-size: var(--fs-caption); color: var(--text3); font-weight: 400;
 }
 @media (max-width: 900px) {
 .kpi-hero { grid-column: span 2; }
@@ -2463,7 +2563,7 @@ button { font-family: inherit; cursor: pointer; }
     display: flex; flex-wrap: wrap;
     gap: 8px 10px; align-items: baseline;
   }
-  .inbox-row .ttl { order: 1; flex: 1 1 100%; font-size: 14px; }
+  .inbox-row .ttl { order: 1; flex: 1 1 100%; font-size: var(--fs-base); }
   /* Two lines, wrapped — a phone has the vertical room it lacks sideways. */
   .inbox-row .ttl > :first-child { -webkit-line-clamp: 2; white-space: normal; }
   /* The id and the status share a line: stacked, each took a full row of its
@@ -2510,7 +2610,7 @@ button { font-family: inherit; cursor: pointer; }
      their own size say it after. A button added tomorrow is covered by default;
      one that must stay small has to opt out in writing. */
   button, [role="button"], .nav-item, .toggle, summary { min-height: 44px; }
-  .gate-btn, .inbox-row .actions .gate-btn { height: 44px; font-size: 13px; }
+  .gate-btn, .inbox-row .actions .gate-btn { height: 44px; font-size: var(--fs-body); }
   .menu-btn { width: 44px; height: 44px; }
   .btn-bell { min-width: 44px; justify-content: center; }
   .gate-actions, .side-gate-actions, .inbox-row .actions { gap: 12px; }
@@ -2540,7 +2640,7 @@ button { font-family: inherit; cursor: pointer; }
         </svg>
       </span>
       <span class="brand-name">greatcto</span>
-      <span id="build-version" title="great_cto build version" style="margin-left:6px;font-size:10px;color:var(--text3);font-family:var(--mono);align-self:center">—</span>
+      <span id="build-version" title="great_cto build version" style="margin-left:6px;font-size:var(--fs-eyebrow);color:var(--text3);font-family:var(--mono);align-self:center">—</span>
     </div>
     <div class="proj-switch" id="proj-switch" onclick="toggleProjMenu(event)">
       <span class="proj-icon" id="proj-switch-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>
@@ -2625,7 +2725,7 @@ button { font-family: inherit; cursor: pointer; }
         <span class="task-count" id="topbar-task-count">0 ISSUES</span>
         <button class="btn-bell" data-tab="share" onclick="switchTab('share', this)" title="Share a public project report" aria-label="Share" style="gap:6px;padding:6px 10px;">
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
-          <span class="btn-label" style="font-size:12px;font-weight:500">Share</span>
+          <span class="btn-label" style="font-size:var(--fs-small);font-weight:500">Share</span>
           <span id="share-nav-badge" class="share-badge off"><span class="share-badge-dot"></span>off</span>
         </button>
         <button class="btn-bell" id="board-theme-btn" onclick="toggleBoardTheme()" title="Toggle light / dark theme" aria-label="Toggle theme">🌙</button>
@@ -2647,7 +2747,7 @@ button { font-family: inherit; cursor: pointer; }
         <div class="inbox-summary" id="inbox-summary"></div>
         <!-- Top rung of the evidence ladder: are the bytes that were reviewed
              still the bytes in the tree? Hidden while they match. -->
-        <div id="inbox-receipt" style="display:none;margin:6px 0 2px;font-size:12px"></div>
+        <div id="inbox-receipt" style="display:none;margin:6px 0 2px;font-size:var(--fs-small)"></div>
         <!-- Resume — pick up where you left off -->
         <div class="resume-card" id="resume-card" style="display:none">
@@ -2675,9 +2775,9 @@ button { font-family: inherit; cursor: pointer; }
         </div>
         <!-- Goal ancestry banner (Paperclip pattern) — shows archetype+compliance+phase -->
-        <div id="goal-ancestry-banner" style="display:none;font-family:var(--mono,monospace);font-size:11px;color:var(--text3,#6b7280);background:var(--bg-muted);padding:6px 10px;border-radius:6px;margin-bottom:10px;letter-spacing:0.3px;"></div>
+        <div id="goal-ancestry-banner" style="display:none;font-family:var(--mono,monospace);font-size:var(--fs-caption);color:var(--text3,#6b7280);background:var(--bg-muted);padding:6px 10px;border-radius:6px;margin-bottom:10px;letter-spacing:0.3px;"></div>
         <!-- Tool failure rate watchdog warning -->
-        <div id="tool-failure-rate" style="display:none;font-size:12px;color:var(--status-blocked,#f87171);background:rgba(248,113,113,0.08);padding:6px 10px;border-radius:6px;margin-bottom:10px;"></div>
+        <div id="tool-failure-rate" style="display:none;font-size:var(--fs-small);color:var(--status-blocked,#f87171);background:rgba(248,113,113,0.08);padding:6px 10px;border-radius:6px;margin-bottom:10px;"></div>
         <div class="inbox-section">
           <div class="inbox-section-head">
@@ -2745,6 +2845,7 @@ button { font-family: inherit; cursor: pointer; }
     <!-- Kanban -->
     <div class="panel" id="panel-kanban">
+      <h1 class="page-title">Tasks</h1>
       <div id="filter-bar" class="filter-bar"></div>
       <div class="kanban" id="kanban-board"></div>
     </div>
@@ -2753,6 +2854,7 @@ button { font-family: inherit; cursor: pointer; }
     <!-- Metrics -->
     <div class="panel" id="panel-dashboard">
       <div class="metrics-page">
+        <h1 class="page-title">Metrics</h1>
         <div class="period-toolbar">
           <span class="period-label">PERIOD</span>
           <div class="period-chips" id="period-chips">
@@ -2773,7 +2875,7 @@ button { font-family: inherit; cursor: pointer; }
              project had declared no caps, which is exactly the project that
              needs the button to declare one. -->
         <div class="mp-section-label" style="margin-top:24px">Agent budgets</div>
-        <div id="agent-budgets" class="mp-card" style="padding:12px 16px;font-size:12px;margin-bottom:4px;"></div>
+        <div id="agent-budgets" class="mp-card" style="padding:12px 16px;font-size:var(--fs-small);margin-bottom:4px;"></div>
         <div class="mp-section-label" id="mp-cost-label" style="margin-top:24px">Cost · last 30 days</div>
         <div class="mp-card cost-panel" id="cost-panel">
@@ -2853,10 +2955,10 @@ button { font-family: inherit; cursor: pointer; }
         <section aria-label="Legacy agents" id="legacy-agents-section" style="margin-top:20px" hidden>
           <div class="mp-card">
             <div class="mp-card-head">
-              <h3 style="font-size:13px">Legacy / non-canonical sources</h3>
+              <h3 style="font-size:var(--fs-body)">Legacy / non-canonical sources</h3>
               <span class="mp-card-meta" id="legacy-agents-count"></span>
             </div>
-            <div style="font-size:12px;color:var(--text3);margin-top:6px">
+            <div style="font-size:var(--fs-small);color:var(--text3);margin-top:6px">
               Verdicts logged under agent names not in <code>~/.claude/agents/great_cto-*.md</code>
               (older log files, custom scripts). Listed in <code>m.legacy_agent_runs</code>; cleanup is a
               one-time housekeeping task.
@@ -2898,7 +3000,7 @@ button { font-family: inherit; cursor: pointer; }
     <div class="panel" id="panel-budgets" role="tabpanel">
       <div class="metrics-page">
-        <h1>Agent budgets</h1>
+        <h1 class="page-title">Agent budgets</h1>
         <p class="muted" style="max-width:70ch;margin:6px 0 20px">
           A cap on what one agent may spend. When measured spend passes it, the pipeline
           refuses to dispatch that agent and says so — it does not fail quietly.
@@ -2910,7 +3012,7 @@ button { font-family: inherit; cursor: pointer; }
     </div>
     <div class="panel" id="panel-docs">
-      <h1>Docs</h1>
+      <h1 class="page-title">Docs</h1>
       <div class="docs-search">
         <input type="search" id="docs-q" placeholder="Search inside documents…"
                aria-label="Search inside documents"
@@ -2961,7 +3063,7 @@ button { font-family: inherit; cursor: pointer; }
               <button class="btn-black" onclick="copyUrl(event)">Copy</button>
             </div>
-            <div class="share-meta" id="share-meta" style="font-size:11px;color:var(--text3);margin-top:8px;font-family:var(--mono);"></div>
+            <div class="share-meta" id="share-meta" style="font-size:var(--fs-caption);color:var(--text3);margin-top:8px;font-family:var(--mono);"></div>
             <div class="share-note">
               The report includes shipped tasks, recent activity, agent utilization, and the six headline metrics.
               Open issues, code, and credentials are <strong>never</strong> exposed.
@@ -2979,8 +3081,9 @@ button { font-family: inherit; cursor: pointer; }
     <!-- Notifications -->
     <div class="panel" id="panel-notifications">
       <div class="share-page">
+        <h1 class="page-title">Notifications</h1>
         <div class="share-card">
-          <h2>Email alerts</h2>
+          <h2 class="section-title">Email alerts</h2>
           <p class="sub">Get notified when something needs your attention — even when you're away from the board. Verify your email once, pick what to receive, done. No API keys, no extra signup.</p>
           <div class="share-toggle-row">
@@ -2995,34 +3098,34 @@ button { font-family: inherit; cursor: pointer; }
           <!-- Step 1: enter email + send code -->
           <div id="notif-step-email">
-            <div style="font-size:11px;color:var(--text3);margin-bottom:4px;font-family:var(--mono);letter-spacing:.05em">RECIPIENT EMAIL</div>
+            <div style="font-size:var(--fs-caption);color:var(--text3);margin-bottom:4px;font-family:var(--mono);letter-spacing:.05em">RECIPIENT EMAIL</div>
             <div style="display:flex;gap:8px;flex-wrap:wrap">
-              <input id="notif-to" type="email" placeholder="you@example.com" style="flex:1 1 280px;min-width:240px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:14px" />
+              <input id="notif-to" type="email" placeholder="you@example.com" style="flex:1 1 280px;min-width:240px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:var(--fs-base)" />
               <button class="btn-black" onclick="sendVerifyCode()">Send code</button>
             </div>
           </div>
           <!-- Step 2: enter code -->
           <div id="notif-step-code" style="display:none;margin-top:14px">
-            <div style="font-size:11px;color:var(--text3);margin-bottom:4px;font-family:var(--mono);letter-spacing:.05em">VERIFICATION CODE (CHECK <span id="notif-code-target">YOUR INBOX</span>)</div>
+            <div style="font-size:var(--fs-caption);color:var(--text3);margin-bottom:4px;font-family:var(--mono);letter-spacing:.05em">VERIFICATION CODE (CHECK <span id="notif-code-target">YOUR INBOX</span>)</div>
             <div style="display:flex;gap:8px;flex-wrap:wrap">
-              <input id="notif-code" type="text" inputmode="numeric" pattern="\d{6}" maxlength="6" placeholder="123456" style="flex:1 1 200px;min-width:140px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:18px;font-family:var(--mono);letter-spacing:.2em;text-align:center" />
+              <input id="notif-code" type="text" inputmode="numeric" pattern="\d{6}" maxlength="6" placeholder="123456" style="flex:1 1 200px;min-width:140px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:var(--fs-title-m);font-family:var(--mono);letter-spacing:.2em;text-align:center" />
               <button class="btn-black" onclick="confirmVerifyCode()">Verify</button>
               <button class="btn-ghost-sm" onclick="sendVerifyCode()">Resend code</button>
             </div>
           </div>
           <!-- Step 3: verified -->
-          <div id="notif-step-verified" style="display:none;margin-top:14px;padding:10px 14px;background:rgba(0,217,126,0.08);border:1px solid rgba(0,217,126,0.30);border-radius:8px;display:none;align-items:center;gap:10px;font-size:13.5px">
-            <span style="color:var(--accent);font-size:18px">✓</span>
+          <div id="notif-step-verified" style="display:none;margin-top:14px;padding:10px 14px;background:rgba(0,217,126,0.08);border:1px solid rgba(0,217,126,0.30);border-radius:8px;display:none;align-items:center;gap:10px;font-size: var(--fs-body)">
+            <span style="color:var(--accent);font-size:var(--fs-title-m)">✓</span>
             <span><strong id="notif-verified-email">—</strong> verified · alerts delivered through <code>greatcto.systems/notify</code></span>
             <button class="btn-ghost-sm" style="margin-left:auto" onclick="changeEmail()">Change</button>
           </div>
           <div class="share-note" style="margin-top:24px">
-            <strong style="color:var(--text1)">Which alerts to send</strong>
+            <strong style="color:var(--text)">Which alerts to send</strong>
           </div>
-          <div id="notif-triggers" style="display:flex;flex-direction:column;gap:10px;margin-top:10px;font-size:13.5px">
+          <div id="notif-triggers" style="display:flex;flex-direction:column;gap:10px;margin-top:10px;font-size: var(--fs-body)">
             <label class="notif-row"><input type="checkbox" data-trigger="incident.p0"> <span class="emoji">🚨</span><strong>P0 incident</strong> — production failure, ack-grade</label>
             <label class="notif-row"><input type="checkbox" data-trigger="gate.stale"> <span class="emoji">⏸️</span><strong>Gate stale &gt; 2h</strong> — ship gate waiting for your approval</label>
             <label class="notif-row"><input type="checkbox" data-trigger="gate.blocked"> <span class="emoji">🛡️</span><strong>Security BLOCKED</strong> — security-officer rejected a merge</label>
@@ -3035,7 +3138,7 @@ button { font-family: inherit; cursor: pointer; }
             <button class="btn-ghost-sm" onclick="testNotifications()">Send test email</button>
           </div>
-          <div id="notif-status" style="margin-top:14px;font-size:13px;font-family:var(--mono)"></div>
+          <div id="notif-status" style="margin-top:14px;font-size:var(--fs-body);font-family:var(--mono)"></div>
           <div class="share-note" style="margin-top:24px">
             Free — up to 100 emails per day per verified email. Delivered through our <code>greatcto.systems/notify</code> relay; your inbox address never leaves your machine without your verification. Local state in <code>~/.great_cto/notifications.json</code>.
@@ -3044,7 +3147,7 @@ button { font-family: inherit; cursor: pointer; }
         <!-- ── Browser push card ───────────────────────────────────────── -->
         <div class="share-card" style="margin-top:16px" id="push-card">
-          <h2>Browser push</h2>
+          <h2 class="section-title">Browser push</h2>
           <p class="sub">Native desktop notifications — works even when the board tab is in the background. No email required. Uses Web Push (VAPID) — keys stay local.</p>
           <div class="share-toggle-row">
             <div class="label-grp">
@@ -3055,7 +3158,7 @@ button { font-family: inherit; cursor: pointer; }
               <input type="checkbox" id="push-toggle" onclick="event.stopPropagation()">
             </div>
           </div>
-          <div id="push-status" style="margin-top:10px;font-size:12.5px;font-family:var(--mono);color:var(--text3)"></div>
+          <div id="push-status" style="margin-top:10px;font-size: var(--fs-small);font-family:var(--mono);color:var(--text3)"></div>
           <div class="share-note" style="margin-top:16px">
             Push subscriptions are stored locally in <code>~/.great_cto/push-subscriptions.json</code>. Notifications fire for the same 5 triggers as email alerts.
           </div>
@@ -3063,10 +3166,10 @@ button { font-family: inherit; cursor: pointer; }
         <!-- ── In-app notification history ─────────────────────────────── -->
         <div class="share-card" style="margin-top:16px">
-          <h2>Recent notifications</h2>
+          <h2 class="section-title">Recent notifications</h2>
           <p class="sub">Last 100 alerts fired this session. Also accessible via the notification drawer (bell icon).</p>
           <div id="notif-history-inline" style="display:flex;flex-direction:column;gap:0;margin-top:12px;
-            border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:13px">
+            border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:var(--fs-body)">
             <div id="notif-history-empty" style="padding:20px 16px;color:var(--text3);text-align:center">
               No notifications yet this session.
             </div>
@@ -3250,7 +3353,7 @@ function freshnessBadge(doc) {
   const unreadable = doc.freshnessBasis === 'unreadable';
   const colour = v === 'stale' ? 'var(--status-gate)' : 'var(--text3)';
   const label = v === 'stale' ? 'stale' : (unreadable ? 'could not read' : 'unknown');
-  return `<span title="${esc(doc.freshnessWhy || '')}" style="font-family:var(--mono);font-size:10px;margin-left:6px;padding:0 4px;border:1px solid var(--border);border-radius:3px;color:${colour}">${esc(label)}</span>`;
+  return `<span title="${esc(doc.freshnessWhy || '')}" style="font-family:var(--mono);font-size:var(--fs-eyebrow);margin-left:6px;padding:0 4px;border:1px solid var(--border);border-radius:3px;color:${colour}">${esc(label)}</span>`;
 }
 // Will this gate wait for you, or did the pipeline already go past it?
@@ -3284,7 +3387,7 @@ function gateTierNote(t) {
   // conclusively, which says nothing about the rest of what this agent is for.
   // It is the reading most worth a second look, so it reads differently.
   const caveat = thin ? ' — one eval, coverage unmeasured' : '';
-  return `<div style="margin-top:3px;font-size:11px;color:${colour}">
+  return `<div style="margin-top:3px;font-size:var(--fs-caption);color:${colour}">
     <span style="font-family:var(--mono);border:1px solid var(--border);border-radius:3px;padding:0 4px">${esc(info.tier)}</span>
     the pipeline did not wait for this${esc(caveat)} · <span title="${esc(info.why || '')}">${esc((info.why || '').slice(0, 90))}</span>
   </div>`;
@@ -3324,7 +3427,7 @@ async function refreshStandDowns() {
     // unmeasured coverage. That is the row most worth a second look, so it is
     // the row that looks different.
     const thin = r.tier === 'notify-thin';
-    const tierTag = `<span style="font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:3px;border:1px solid var(--border);color:${thin ? 'var(--status-gate)' : 'var(--text3)'}">${esc(r.tier || 'unknown')}</span>`;
+    const tierTag = `<span style="font-family:var(--mono);font-size:var(--fs-eyebrow);padding:1px 5px;border-radius:3px;border:1px solid var(--border);color:${thin ? 'var(--status-gate)' : 'var(--text3)'}">${esc(r.tier || 'unknown')}</span>`;
     return `
       <div class="inbox-row">
         <span class="id">gate:${esc(r.gate || '?')}</span>
@@ -3369,7 +3472,7 @@ function renderInboxList(rootId, items, countId, opts = {}) {
            <button class="gate-btn gate-approve" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'approve')">Approve</button>
            <button class="gate-btn gate-reject" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'reject')">Reject</button>
          </div>`
-      : `<div class="actions"><span style="font-family:var(--mono);font-size:11px;color:var(--text3)">${t.status || ''}</span></div>`;
+      : `<div class="actions"><span style="font-family:var(--mono);font-size:var(--fs-caption);color:var(--text3)">${t.status || ''}</span></div>`;
     const desc = t.description ? `<span class="ttl-desc">${esc(t.description.slice(0, 140))}${t.description.length > 140 ? '…' : ''}</span>` : '';
     // Only gate rows can stand down, so only they carry the note.
     const tierNote = opts.showApprove ? gateTierNote(t) : '';
@@ -3554,11 +3657,32 @@ async function loadBudgetsPage() {
   if (!body) return;
   body.innerHTML = '<div class="muted">loading…</div>';
-  const [h] = await Promise.all([
-    api(`/api/heartbeat${pqs()}`),
-    (typeof refreshAgentsInstalled === 'function' && !(fleetState?.agents || []).length)
-      ? refreshAgentsInstalled() : Promise.resolve(),
-  ]);
+  // Three states, not two: loading | loaded | failed.
+  //
+  // Without this catch the two reads below were awaited bare, so a rejection
+  // returned from the function and left `loading…` on screen permanently. Caught
+  // once in the wild: opening Budgets during startup raced the agent list, the
+  // promise rejected, and the page sat there looking busy. A page that failed
+  // and a page still working are the same picture, and the one you are looking
+  // at is the one where nothing more is coming.
+  let h;
+  try {
+    [h] = await Promise.all([
+      api(`/api/heartbeat${pqs()}`),
+      (typeof refreshAgentsInstalled === 'function' && !(fleetState?.agents || []).length)
+        ? refreshAgentsInstalled() : Promise.resolve(),
+    ]);
+  } catch (err) {
+    body.innerHTML = `
+      <div class="budgets-failed">
+        <div class="bf-head">Could not read the caps.</div>
+        <div class="bf-why">${esc(String(err && err.message || err))}</div>
+        <div class="bf-note">Caps already set are unaffected — this failed to
+          <em>read</em> them, and the pipeline reads them itself, not from here.</div>
+        <button class="btn" onclick="loadBudgetsPage()">Try again</button>
+      </div>`;
+    return;
+  }
   const caps = h?.budgets || {};
   const agents = (fleetState?.agents || []).filter((a) => !a.retired);
@@ -3902,7 +4026,7 @@ function showVerdictDetail(idx) {
           <span>${esc(a.path)}</span>
         </a>`;
       }).join('')
-    : '<span style="color: var(--text3); font-size: 12px;">No artefacts referenced in this verdict</span>';
+    : '<span style="color: var(--text3); font-size: var(--fs-small);">No artefacts referenced in this verdict</span>';
   // Format additional metadata (cost, feature, etc.) as small chips
   const metaKeys = ['feature', 'task', 'cost'];
@@ -3930,7 +4054,7 @@ function showVerdictDetail(idx) {
         <div class="rdm-artefacts-title">Artefacts (click to open in editor)</div>
         ${artefactsHtml}
       </div>
-      <div class="rdm-foot">Press <kbd style="background:var(--bg-muted);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;">Esc</kbd> or click outside to close</div>
+      <div class="rdm-foot">Press <kbd style="background:var(--bg-muted);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:var(--fs-eyebrow);">Esc</kbd> or click outside to close</div>
     </div>
   `;
   document.body.appendChild(modal);
@@ -4410,7 +4534,7 @@ async function loadDocs() {
     ? `<div class="card"><b>Pipeline</b> <span class="muted">— how a feature moves, drawn from shared/pipeline.toml</span>
          ${renderDeclaredPipeline(d.pipeline)}
          <details style="margin-top:8px"><summary class="muted">Mermaid source</summary>
-           <pre style="white-space:pre-wrap;font-size:11px">${esc(d.pipeline)}</pre></details></div>`
+           <pre style="white-space:pre-wrap;font-size:var(--fs-caption)">${esc(d.pipeline)}</pre></details></div>`
     : '';
   const map = d.map ? `<div class="card"><b>Components</b>
@@ -4418,19 +4542,19 @@ async function loadDocs() {
       <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px">
         ${d.map.nodes.map(n => `<div style="border:1px solid var(--border,#ddd);border-radius:6px;padding:8px 10px;min-width:120px">
           <div><b>${esc(n.label)}</b> <span class="muted">${n.count}</span></div>
-          <div class="muted" style="font-size:11px">${esc(n.what || '')}</div></div>`).join('')}
+          <div class="muted" style="font-size:var(--fs-caption)">${esc(n.what || '')}</div></div>`).join('')}
       </div>
-      ${d.map.edges.length ? `<div class="muted" style="margin-top:8px;font-size:11px">
+      ${d.map.edges.length ? `<div class="muted" style="margin-top:8px;font-size:var(--fs-caption)">
         ${d.map.edges.map(e => `${esc(e.from)}→${esc(e.to)} (${e.count})`).join(' · ')}</div>` : ''}
       <details style="margin-top:8px"><summary class="muted">Mermaid source</summary>
-        <pre style="white-space:pre-wrap;font-size:11px">${esc(d.map.mermaid)}</pre></details></div>` : '';
+        <pre style="white-space:pre-wrap;font-size:var(--fs-caption)">${esc(d.map.mermaid)}</pre></details></div>` : '';
   const groups = (d.groups || []).map(g => `<div class="card">
       <b>${esc(g.label)}</b> <span class="muted">${g.docs.length} — ${esc(g.why || '')}</span>
       <div style="margin-top:8px">${g.docs.map(doc => `
         <div style="padding:4px 0;border-bottom:1px solid var(--border,#eee)">
           <a href="#" onclick="openDoc('${esc(doc.path)}');return false">${esc(doc.title)}</a>
-          <span class="muted" style="font-size:11px"> · ${esc(doc.path)} · ${ago(doc.modified)}</span>
+          <span class="muted" style="font-size:var(--fs-caption)"> · ${esc(doc.path)} · ${ago(doc.modified)}</span>
           ${freshnessBadge(doc)}
         </div>`).join('')}</div>
       </div>`).join('');
@@ -4513,11 +4637,11 @@ async function loadContextLayers() {
   const layers = (m.layers || []).map(l => {
     const global = String(l.path || '').includes('/.great_cto/') && !String(l.path || '').includes(projectRootHint());
-    const where = global ? ' <span class="muted" style="font-size:11px">shared by every project</span>' : '';
+    const where = global ? ' <span class="muted" style="font-size:var(--fs-caption)">shared by every project</span>' : '';
     return l.exists
       ? `<div style="padding:4px 0;border-bottom:1px solid var(--border,#eee)">
            <a href="#" onclick="openDoc('${esc(l.path)}');return false">${esc(l.id)}</a>${where}
-           <span class="muted" style="font-size:11px"> · ${esc(l.path)}</span></div>`
+           <span class="muted" style="font-size:var(--fs-caption)"> · ${esc(l.path)}</span></div>`
       : `<div style="padding:4px 0;border-bottom:1px solid var(--border,#eee)" class="muted">
            ${esc(l.id)} — not written yet${where}</div>`;
   }).join('');
@@ -4561,7 +4685,7 @@ function renderDeclaredPipeline(mermaid) {
   }
   if (!edges.length) return '<div class="muted">no transitions declared</div>';
   const name = (id) => id.replace(/_/g, '-');
-  return `<div style="margin-top:10px;font-size:12px">${edges.map(e => `
+  return `<div style="margin-top:10px;font-size:var(--fs-small)">${edges.map(e => `
     <div style="display:flex;align-items:center;gap:8px;padding:3px 0">
       <span style="border:1px solid var(--border,#ddd);border-radius:4px;padding:2px 8px">${esc(name(e.from))}</span>
       <span class="muted">${e.join ? '⋯ join ⋯' : (e.gate ? `→ ${esc(e.gate)} →` : '→')}</span>
@@ -4596,7 +4720,7 @@ async function openDoc(p) {
     const d = await api(`/api/doc?path=${encodeURIComponent(p)}${q ? '&' + q.slice(1) : ''}`);
     if (!d || d.error) throw new Error(d?.error || 'doc not found');
     idEl.textContent = d.name || p;
-    body.innerHTML = `<div class="muted" style="font-size:11px;margin-bottom:10px">${esc(d.path)}</div>
+    body.innerHTML = `<div class="muted" style="font-size:var(--fs-caption);margin-bottom:10px">${esc(d.path)}</div>
       <div class="side-desc md">${mdToHtml(d.content)}</div>`;
   } catch (e) {
     body.innerHTML = `<div class="side-desc"><b>Could not open ${esc(p)}</b>
@@ -5462,7 +5586,7 @@ function cardHTML(t) {
         ${t.agent ? `<span class="chip chip-agent">${esc(t.agent)}</span>` : ''}
         ${labels.map(l => `<span class="chip">${esc(l)}</span>`).join('')}
         <div class="card-status-edit" onclick="event.stopPropagation(); openStatusPicker('${esc(t.id)}', this)">
-          <span class="pill pill-${t.status || 'backlog'}" style="font-size:10px;height:18px;padding:0 7px">${(t.status || 'backlog').replace('_',' ')}</span>
+          <span class="pill pill-${t.status || 'backlog'}" style="font-size:var(--fs-eyebrow);height:18px;padding:0 7px">${(t.status || 'backlog').replace('_',' ')}</span>
           <span class="card-status-chev"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></span>
         </div>
         ${elapsed}
@@ -6095,7 +6219,7 @@ function openSide(task) {
   const docsSec = docRefs.length ? `
     <div class="side-section"><div class="side-section-head">Documents</div>
       ${docRefs.map(p => `
-        <button onclick="openDocInSide('${esc(p)}')" style="display:flex;width:100%;gap:8px;align-items:center;text-align:left;background:var(--bg2,transparent);border:1px solid var(--line,#ddd);border-radius:6px;padding:6px 10px;margin:4px 0;cursor:pointer;font-family:var(--mono);font-size:12px;color:inherit">
+        <button onclick="openDocInSide('${esc(p)}')" style="display:flex;width:100%;gap:8px;align-items:center;text-align:left;background:var(--bg-muted);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin:4px 0;cursor:pointer;font-family:var(--mono);font-size:var(--fs-small);color:inherit">
           <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(p)}</span>
           <span style="color:var(--text3)">open →</span>
         </button>`).join('')}
@@ -6197,15 +6321,22 @@ document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSide();
  */
 async function checkBoardFreshness() {
   const v = await api('/api/version');
-  if (!v || v.stale !== 'yes') return;
+  // `behind` and `ahead` are different problems with different fixes; `no` and
+  // `unknown` are both silent, because a comparison we could not make must not
+  // render as a mismatch.
+  if (!v || (v.stale !== 'behind' && v.stale !== 'ahead')) return;
   const host = document.querySelector('.workspace');
   if (!host || document.getElementById('stale-board')) return;
   const el = document.createElement('div');
   el.id = 'stale-board';
   el.className = 'stale-board';
   el.setAttribute('role', 'status');
-  el.innerHTML = `<span>This board is running <code>v${esc(v.version)}</code> — `
-    + `<code>v${esc(v.installed)}</code> is installed. Restart it to pick up the new version.</span>`;
+  el.innerHTML = v.stale === 'behind'
+    ? `<span>This board is running <code>v${esc(v.version)}</code> — `
+      + `<code>v${esc(v.installed)}</code> is installed. Restart it to pick up the new version.</span>`
+    : `<span>This board is running <code>v${esc(v.version)}</code>, which is newer than the `
+      + `installed <code>v${esc(v.installed)}</code>. Restarting would go back to the older build — `
+      + `install this version first.</span>`;
   host.insertBefore(el, host.firstChild);
 }
@@ -6491,7 +6622,7 @@ function renderLogsList() {
   el.innerHTML = bar + shown.map(({ log, i }) => `
     <div class="log-item ${i === 0 ? 'active' : ''}" onclick="selectLog(${i}, this)">
-      <div class="log-date">${esc(log.date)}${log.time ? ' · ' + esc(log.time) : ''}${log.source === 'verdicts' || log.source === 'auto' ? ' <span style="color:var(--text3);font-size:10px">· auto</span>' : ''}</div>
+      <div class="log-date">${esc(log.date)}${log.time ? ' · ' + esc(log.time) : ''}${log.source === 'verdicts' || log.source === 'auto' ? ' <span style="color:var(--text3);font-size:var(--fs-eyebrow)">· auto</span>' : ''}</div>
       <div class="log-title">${esc(log.title)}</div>
       <div class="log-meta">${log.done.length} done · ${log.pending.length} pending${log.duration ? ' · ' + esc(log.duration) : ''}</div>
     </div>`).join('');
@@ -6854,14 +6985,14 @@ function renderAgentProfile(p) {
         <dt>domain</dt>      <dd>${esc(p.domain)}</dd>
         <dt>model</dt>       <dd>${esc(p.model)}</dd>
         ${p.applies_to.length ? `<dt>applies_to</dt><dd>${esc(p.applies_to.join(', '))}</dd>` : ''}
-        ${(p.tools && p.tools.length) ? `<dt>tools</dt><dd>${p.tools.map(t => `<span class="chip" style="font-size:11px">${esc(t)}</span>`).join(' ')}</dd>` : '<dt>tools</dt><dd style="color:var(--text3)">none declared</dd>'}
-        ${(p.skills && p.skills.length) ? `<dt>skills</dt><dd>${p.skills.map(s => `<span class="chip chip-agent" style="font-size:11px">${esc(s)}</span>`).join(' ')}</dd>` : ''}
+        ${(p.tools && p.tools.length) ? `<dt>tools</dt><dd>${p.tools.map(t => `<span class="chip" style="font-size:var(--fs-caption)">${esc(t)}</span>`).join(' ')}</dd>` : '<dt>tools</dt><dd style="color:var(--text3)">none declared</dd>'}
+        ${(p.skills && p.skills.length) ? `<dt>skills</dt><dd>${p.skills.map(s => `<span class="chip chip-agent" style="font-size:var(--fs-caption)">${esc(s)}</span>`).join(' ')}</dd>` : ''}
         <dt>runs total</dt>  <dd>${p.runs_total} · ${p.runs_30d} in 30d</dd>
         <dt>success</dt>     <dd>${p.success_rate != null ? `${p.success_rate}% (${p.ok_30d}/${p.ok_30d + p.fail_30d})` : 'no verdicts in 30d'}</dd>
         <dt>last run</dt>    <dd>${p.last_run ? esc(p.last_run.slice(0, 16).replace('T', ' ') + ' · ' + agoStr(p.last_run)) : 'never'}</dd>
         <dt>savings</dt>     <dd>${esc(savings)} ${esc(realCost)}</dd>
       </dl>
-      ${p.description ? `<div style="font-size:11px;color:var(--text3);margin-top:8px;line-height:1.5">${esc(p.description)}</div>` : ''}
+      ${p.description ? `<div style="font-size:var(--fs-caption);color:var(--text3);margin-top:8px;line-height:1.5">${esc(p.description)}</div>` : ''}
     </div>
     <div class="mp-card">
@@ -6899,7 +7030,7 @@ function renderAgentProfile(p) {
           ? `<button type="button" onclick="restoreAgentAction('${esc(p.slug)}')">Restore agent</button>`
           : `<button type="button" class="danger" onclick="retireAgentAction('${esc(p.slug)}')">Retire agent</button>`}
       </div>
-      <div style="font-size:11px;color:var(--text3);margin-top:8px">
+      <div style="font-size:var(--fs-caption);color:var(--text3);margin-top:8px">
         File: <code>${esc(p.file_path)}</code>
       </div>
     </div>`;
@@ -7234,12 +7365,12 @@ function renderNotifDrawer() {
       style="padding:12px 16px;border-bottom:1px solid var(--border);
       ${n.read ? '' : 'background:rgba(59,130,246,0.06);'}">
       <div style="display:flex;align-items:flex-start;gap:10px">
-        <span style="font-size:15px;flex-shrink:0;margin-top:1px">${_notifLevelIcon(n.level)}</span>
+        <span style="font-size:var(--fs-title-s);flex-shrink:0;margin-top:1px">${_notifLevelIcon(n.level)}</span>
         <div style="flex:1;min-width:0">
-          <div style="font-size:13px;font-weight:${n.read ? '400' : '600'};color:var(--text1);
+          <div style="font-size:var(--fs-body);font-weight:${n.read ? '400' : '600'};color:var(--text);
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(n.title)}</div>
-          <div style="font-size:12px;color:var(--text3);margin-top:2px;line-height:1.4">${esc(n.body)}</div>
-          <div style="font-size:11px;color:var(--text3);margin-top:4px;font-family:var(--mono)">
+          <div style="font-size:var(--fs-small);color:var(--text3);margin-top:2px;line-height:1.4">${esc(n.body)}</div>
+          <div style="font-size:var(--fs-caption);color:var(--text3);margin-top:4px;font-family:var(--mono)">
             ${n.project ? `<span style="color:var(--accent);margin-right:6px">${esc(n.project)}</span>` : ''}
             ${new Date(n.ts).toLocaleString()}
           </div>
@@ -7260,12 +7391,12 @@ function renderNotifHistoryInline() {
   el.innerHTML = _notifHistory.slice(0, 20).map(n => `
     <div class="notif-inline-row" style="padding:10px 14px;border-bottom:1px solid var(--border);
       display:flex;align-items:center;gap:10px;${n.read ? '' : 'background:rgba(59,130,246,0.05);'}">
-      <span style="font-size:14px">${_notifLevelIcon(n.level)}</span>
+      <span style="font-size:var(--fs-base)">${_notifLevelIcon(n.level)}</span>
       <div style="flex:1;min-width:0">
-        <span style="font-size:13px;font-weight:${n.read?'400':'600'}">${esc(n.title)}</span>
-        <span style="font-size:12px;color:var(--text3);margin-left:8px">${esc(n.body)}</span>
+        <span style="font-size:var(--fs-body);font-weight:${n.read?'400':'600'}">${esc(n.title)}</span>
+        <span style="font-size:var(--fs-small);color:var(--text3);margin-left:8px">${esc(n.body)}</span>
       </div>
-      <span style="font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0">
+      <span style="font-size:var(--fs-caption);color:var(--text3);font-family:var(--mono);flex-shrink:0">
         ${new Date(n.ts).toLocaleTimeString()}
       </span>
     </div>`).join('');
@@ -7416,7 +7547,7 @@ if (_costLbl) _costLbl.textContent = `Cost · last ${periodLabel(currentPeriod)}
 <!-- ── Notification drawer ──────────────────────────────────────────────── -->
 <div id="notif-drawer" style="position:fixed;top:0;right:-400px;width:380px;height:100vh;
-  background:var(--bg1);border-left:1px solid var(--border);z-index:9999;
+  background:var(--bg-elevated);border-left:1px solid var(--border);z-index:9999;
   transition:right .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
   box-shadow:-4px 0 32px rgba(0,0,0,.5)">
   <div style="padding:14px 16px;border-bottom:1px solid var(--border);
@@ -7425,16 +7556,16 @@ if (_costLbl) _costLbl.textContent = `Cost · last ${periodLabel(currentPeriod)}
       style="width:16px;height:16px;color:var(--text2)">
       <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
     </svg>
-    <span style="font-weight:600;font-size:14px;flex:1;color:var(--text1)">Notifications</span>
+    <span style="font-weight:600;font-size:var(--fs-base);flex:1;color:var(--text)">Notifications</span>
     <button class="btn-ghost-sm" onclick="markAllNotifsRead()"
-      style="font-size:12px">Mark all read</button>
+      style="font-size:var(--fs-small)">Mark all read</button>
     <button onclick="closeNotifDrawer()" style="background:none;border:none;cursor:pointer;
-      color:var(--text3);font-size:22px;line-height:1;padding:0 4px;margin-left:4px">&times;</button>
+      color:var(--text3);font-size:var(--fs-title-l);line-height:1;padding:0 4px;margin-left:4px">&times;</button>
   </div>
   <div id="notif-drawer-list" tabindex="0" role="region" aria-label="Notifications list" style="flex:1;overflow-y:auto"></div>
   <div id="notif-drawer-empty" style="display:flex;flex:1;align-items:center;
-    justify-content:center;flex-direction:column;gap:8px;color:var(--text3);font-size:13px">
-    <span style="font-size:36px">🔔</span>No notifications yet
+    justify-content:center;flex-direction:column;gap:8px;color:var(--text3);font-size:var(--fs-body)">
+    <span style="font-size:var(--fs-num-l)">🔔</span>No notifications yet
   </div>
 </div>
 <div id="notif-drawer-overlay" onclick="closeNotifDrawer()"