great-cto 3.3.0 → 3.4.0

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

@@ -160,12 +160,24 @@ 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
@@ -236,16 +248,16 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -264,11 +276,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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);
@@ -280,7 +292,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 .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; }
@@ -340,7 +352,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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 {
@@ -353,9 +365,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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;
@@ -383,7 +395,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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 {
@@ -391,11 +403,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -404,9 +416,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
 }
@@ -418,7 +430,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .proj-menu-empty {
   padding: 14px 10px;
   text-align: center;
-  font-size: 12px;
+  font-size: var(--fs-small);
   color: var(--text3);
 }
 
@@ -427,7 +439,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -445,14 +457,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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;
@@ -472,7 +484,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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); }
@@ -493,12 +505,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -515,7 +527,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -525,7 +537,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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; }
@@ -546,13 +558,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
@@ -582,7 +594,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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%;
@@ -592,7 +604,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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); }
@@ -614,7 +626,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   overflow: hidden;
 }
 .card-desc {
-  font-size: 12px;
+  font-size: var(--fs-small);
   line-height: 1.4;
   color: var(--text2);
   display: -webkit-box;
@@ -626,7 +638,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
 }
@@ -654,7 +666,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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);
 }
 
@@ -662,7 +674,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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); }
@@ -686,7 +698,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -704,13 +716,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 #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 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(--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-muted); color: var(--text, #ecf2ee); border: 1px solid var(--border, #1f2a26); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
+#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} }
@@ -734,7 +746,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 .empty {
   padding: 20px 8px;
-  font-size: 12px;
+  font-size: var(--fs-small);
   color: var(--text3);
   text-align: center;
 }
@@ -751,7 +763,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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(--text); font-weight: 600; }
@@ -795,7 +807,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -817,7 +829,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -828,30 +840,30 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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; }
@@ -873,7 +885,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -903,7 +915,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 #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 {
@@ -913,14 +925,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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: 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;
@@ -935,16 +947,16 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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 {
@@ -962,30 +974,30 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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-muted); }
 .rdm-artefact .rdm-art-kind {
-  font-size: 10px; padding: 1px 4px; border-radius: 3px;
+  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; }
 
@@ -1039,7 +1051,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1055,7 +1067,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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(--text2); }
@@ -1065,7 +1077,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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 {
@@ -1089,14 +1101,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
 }
@@ -1113,12 +1125,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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); }
@@ -1132,7 +1144,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1153,7 +1165,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1169,12 +1181,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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 {
@@ -1182,14 +1194,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1209,18 +1221,18 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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;
@@ -1233,7 +1245,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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 {
@@ -1249,27 +1261,27 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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; }
@@ -1306,12 +1318,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
@@ -1325,7 +1337,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -1334,7 +1346,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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; }
@@ -1355,11 +1367,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
@@ -1376,7 +1388,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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);
@@ -1387,7 +1399,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -1408,7 +1420,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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);
 }
@@ -1418,7 +1430,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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 .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); }
@@ -1451,7 +1463,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1464,7 +1476,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
    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; }
@@ -1472,13 +1484,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
 }
@@ -1491,13 +1503,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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 ────────────────────────────────────────────────────── */
@@ -1507,7 +1519,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
@@ -1517,7 +1529,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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(--text);
@@ -1526,7 +1538,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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(--text); text-align: right; }
-.feat-runs { font-size: 11px; color: var(--text3); text-align: right; }
+.feat-runs { font-size: var(--fs-caption); color: var(--text3); text-align: right; }
 
 /* ── Inbox page ───────────────────────────────────────────────────────────── */
 .inbox-page {
@@ -1559,7 +1571,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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);
 }
@@ -1586,11 +1598,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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);
 }
@@ -1599,7 +1611,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1610,7 +1622,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -1635,7 +1647,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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; }
@@ -1654,7 +1666,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
 
@@ -1680,7 +1692,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -1712,16 +1724,20 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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);
 }
@@ -1730,21 +1746,21 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
    over what period. The slug alone answered none of them. */
 .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; }
@@ -1752,18 +1768,18 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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);
 }
@@ -1773,14 +1789,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
@@ -1793,7 +1809,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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 {
@@ -1804,7 +1820,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
 }
@@ -1845,23 +1861,23 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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 {
@@ -1885,12 +1901,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -1915,7 +1931,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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 {
@@ -1924,7 +1940,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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 {
@@ -1934,16 +1950,16 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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: var(--fs-title-l); letter-spacing: -0.02em; }
-.logs-hint { font-size: 12px; color: var(--text3); }
+.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; }
@@ -1956,7 +1972,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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); }
@@ -1965,18 +1981,18 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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: var(--fs-title-m); letter-spacing: -0.01em; }
-.log-detail-head .log-detail-meta { font-size: 12px; color: var(--text3); }
+.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; }
@@ -1986,9 +2002,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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; }
@@ -2018,17 +2034,17 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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; }
@@ -2037,12 +2053,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
 }
@@ -2056,16 +2072,16 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 .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); }
@@ -2102,11 +2118,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
@@ -2119,13 +2135,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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);
 }
@@ -2171,7 +2187,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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;
 }
@@ -2183,20 +2199,20 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .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); }
@@ -2206,15 +2222,15 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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); }
@@ -2264,8 +2280,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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(--bg-muted); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; }
 .notif-row:hover { border-color: var(--accent); }
@@ -2311,17 +2327,17 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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); }
@@ -2331,7 +2347,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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 {
@@ -2345,7 +2361,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 .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;
@@ -2372,7 +2388,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -2386,7 +2402,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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;
 }
@@ -2397,7 +2413,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -2418,7 +2434,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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;
@@ -2442,14 +2458,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .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 {
@@ -2459,15 +2475,15 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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 {
@@ -2475,10 +2491,10 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   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: 13px; font-weight: 500; }
-.kpi-empty .kpi-value { color: var(--accent); font-size: 22px; }
+.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; }
@@ -2547,7 +2563,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
     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
@@ -2594,7 +2610,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
      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; }
@@ -2624,7 +2640,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         </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>
@@ -2709,7 +2725,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         <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>
@@ -2731,7 +2747,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         <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">
@@ -2759,9 +2775,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         </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">
@@ -2859,7 +2875,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
              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">
@@ -2939,10 +2955,10 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         <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.
@@ -3047,7 +3063,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
               <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.
@@ -3082,18 +3098,18 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
           <!-- 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(--bg-muted);border:1px solid var(--border);border-radius:6px;color:var(--text);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(--bg-muted);border:1px solid var(--border);border-radius:6px;color:var(--text);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>
@@ -3101,7 +3117,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
           <!-- 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: var(--fs-body)">
-            <span style="color:var(--accent);font-size:18px">✓</span>
+            <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>
@@ -3122,7 +3138,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
             <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>.
@@ -3153,7 +3169,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           <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>
@@ -3337,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?
@@ -3371,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>`;
@@ -3411,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>
@@ -3456,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) : '';
@@ -3641,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);
 
@@ -3989,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'];
@@ -4017,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);
@@ -4497,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>
@@ -4505,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('');
@@ -4600,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('');
@@ -4648,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>
@@ -4683,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>
@@ -5549,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}
@@ -6182,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('')}
@@ -6585,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('');
@@ -6948,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">
@@ -6993,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>`;
@@ -7328,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(--text);
+          <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>
@@ -7354,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('');
@@ -7519,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(--text)">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()"