refactor(theme): retire the --color-* shim — the sweep it promised, run

#2533. theme.css claimed "removing this block is a rename sweep across the
components, tracked separately" — written in 67a529a, never filed, which made
the comment itself an instance of the survey's presence-without-reference
pattern. This is that sweep.

73 alias declarations deleted; 69 files rewritten; every --color-*-style name
now references its --fs-* token directly. Mechanical by construction: the map
IS the alias block, applied longest-name-first with a boundary guard so
--color-text never matched inside --color-text-muted. Zero survivors outside
theme.css, verified by grep rather than assumed.

One deliberate survivor: --color-shadow stays DECLARED, because it was never
an alias — it is a literal value the design system has no token for. Marked
in place as a recorded gap: promote it to an --fs-* token when a second app
needs it, don't copy the line.

Nothing is lost mode-wise: the aliases' resolve-at-use-time trick (which
absorbed 48 dark-mode overrides) lives one layer down in the --fs-* tokens'
own derivations, which is why the sweep is a pure rename. Both CSS checkers
green.

Why now rather than never: check_snippets_against_design_system reports every
--color-* reference as "unknown — renders as NOTHING", and nine recipe
snippets recorded from components.css carried the deprecated names, making
them prior art pointing the wrong way. With the sweep in, the checker's
report over re-recorded snippets should be EMPTY — the acceptance test that
proves the checker was right all along (#2517's correction).

Refs #2533

frontend/src/views/KnowledgeView.vue

@@ -579,7 +579,7 @@ onUnmounted(() => {
 .knowledge-root {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--fs-layout-header));
   overflow: hidden;
 }
 
@@ -590,8 +590,8 @@ onUnmounted(() => {
   justify-content: space-between;
   gap: 12px;
   padding: 8px 20px;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
   font-size: 0.82rem;
   flex-wrap: wrap;
@@ -607,7 +607,7 @@ onUnmounted(() => {
   font-size: 0.78rem;
 }
 .today-link {
-  color: var(--color-primary);
+  color: var(--fs-accent);
   text-decoration: none;
   font-weight: 500;
   opacity: 0.85;
@@ -625,19 +625,19 @@ onUnmounted(() => {
 
 /* ── Filter panel ────────────────────────────────────────── */
 .filter-panel {
-  width: var(--sidebar-width);
+  width: var(--fs-layout-sidebar);
   flex-shrink: 0;
   padding: 16px 12px;
-  border-right: 1px solid var(--color-border);
+  border-right: 1px solid var(--fs-border-color);
   overflow-y: auto;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .filter-section { margin-bottom: 20px; }
 .filter-section + .filter-section::before {
   content: '· · ·';
   display: block;
   text-align: center;
-  color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
   font-size: 0.9rem;
   letter-spacing: 0.4em;
   padding: 4px 0 12px;
@@ -645,7 +645,7 @@ onUnmounted(() => {
 .filter-label {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 0.95rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   margin-bottom: 8px;
   padding: 0 4px;
 }
@@ -662,14 +662,14 @@ onUnmounted(() => {
   padding: 8px 12px;
   border-radius: 10px;
   border: none;
-  background: var(--gradient-cta);
+  background: var(--fs-gradient-cta);
   color: var(--fs-text-on-action);
   cursor: pointer;
   font-size: 0.85rem;
   font-weight: 500;
   transition: box-shadow 0.15s;
 }
-.btn-new-note:hover { box-shadow: var(--glow-cta-hover); }
+.btn-new-note:hover { box-shadow: var(--fs-glow-cta-hover); }
 .btn-new-icon {
   font-size: 1.1rem;
   line-height: 1;
@@ -680,8 +680,8 @@ onUnmounted(() => {
   top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 10px;
   overflow: hidden;
   z-index: 50;
@@ -696,15 +696,15 @@ onUnmounted(() => {
   padding: 9px 14px;
   background: none;
   border: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-size: 0.84rem;
   text-align: left;
   transition: background 0.12s, color 0.12s;
 }
 .new-note-menu button:hover {
-  background: var(--color-primary-tint);
-  color: var(--color-primary);
+  background: var(--fs-accent-soft);
+  color: var(--fs-accent);
 }
 .new-note-menu button svg {
   flex-shrink: 0;
@@ -712,7 +712,7 @@ onUnmounted(() => {
 }
 .new-note-menu button:hover svg {
   opacity: 1;
-  stroke: var(--color-primary);
+  stroke: var(--fs-accent);
 }
 
 .filter-btn {
@@ -725,7 +725,7 @@ onUnmounted(() => {
   border-radius: 7px;
   border: none;
   background: transparent;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-size: 0.85rem;
   margin-bottom: 2px;
@@ -734,8 +734,8 @@ onUnmounted(() => {
 }
 .filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
 .filter-btn.active {
-  background: var(--color-primary-wash);
-  color: var(--color-primary);
+  background: var(--fs-accent-wash);
+  color: var(--fs-accent);
   opacity: 1;
 }
 .filter-btn-label { flex: 1; }
@@ -744,15 +744,15 @@ onUnmounted(() => {
   padding: 1px 6px;
   border-radius: 10px;
   background: rgba(255,255,255,0.07);
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   font-weight: 500;
   min-width: 20px;
   text-align: center;
   flex-shrink: 0;
 }
 .filter-btn.active .filter-count {
-  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 20%, transparent);
+  color: var(--fs-accent);
 }
 .filter-tag { font-size: 0.78rem; }
 
@@ -772,7 +772,7 @@ onUnmounted(() => {
   gap: 10px;
   padding: 12px 20px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .search-wrap {
   flex: 1;
@@ -783,27 +783,27 @@ onUnmounted(() => {
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   pointer-events: none;
 }
 .search-input {
   width: 100%;
   padding: 7px 12px 7px 32px;
   border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   font-size: 0.88rem;
   outline: none;
   transition: border-color 0.15s;
 }
-.search-input:focus { border-color: var(--color-primary); }
+.search-input:focus { border-color: var(--fs-accent); }
 .sort-select {
   padding: 7px 10px;
   border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   cursor: pointer;
   outline: none;
@@ -824,9 +824,9 @@ onUnmounted(() => {
 
 .k-card {
   position: relative;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-xl);
   padding: 14px;
   cursor: pointer;
   transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
@@ -838,12 +838,12 @@ onUnmounted(() => {
 }
 .k-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
-  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  box-shadow: 0 8px 28px color-mix(in srgb, var(--fs-accent) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: color-mix(in srgb, var(--fs-accent) 35%, transparent);
 }
 
 /* Type-specific card DNA */
-.k-card--note   { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
+.k-card--note   { border-color: color-mix(in srgb, var(--fs-accent) 20%, transparent); }
 .k-card--task   { border-color: rgba(212, 160, 23, 0.18); }
 
 /* Top gradient bars */
@@ -858,7 +858,7 @@ onUnmounted(() => {
 }
 .k-card--note::before {
   right: 0;
-  background: linear-gradient(90deg, var(--color-primary), #7A6DA8);
+  background: linear-gradient(90deg, var(--fs-accent), #7A6DA8);
 }
 .k-card--task::before {
   right: 0;
@@ -877,7 +877,7 @@ onUnmounted(() => {
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.badge--note   { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: #7A6DA8; }
+.badge--note   { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: #7A6DA8; }
 .badge--task   { background: rgba(212,160,23,0.15); color: #fbbf24; }
 .badge--plan   { background: rgba(99,102,241,0.18); color: #818cf8; }
 
@@ -894,7 +894,7 @@ onUnmounted(() => {
 }
 .k-card-snippet {
   font-size: 0.8rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
@@ -914,9 +914,9 @@ onUnmounted(() => {
   padding: 1px 6px;
   border-radius: 8px;
   background: rgba(255,255,255,0.05);
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
 }
-.k-card-date { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; opacity: 0.7; }
+.k-card-date { font-size: 0.72rem; color: var(--fs-text-secondary); white-space: nowrap; opacity: 0.7; }
 /* Only rendered for a record another user owns, so an unmarked card is
    unambiguously the viewer's own. */
 .shared-tag {
@@ -924,8 +924,8 @@ onUnmounted(() => {
   padding: 0.08rem 0.35rem;
   border-radius: 4px;
   white-space: nowrap;
-  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
-  color: var(--color-text-secondary);
+  background: color-mix(in srgb, var(--fs-text-secondary) 15%, transparent);
+  color: var(--fs-text-secondary);
 }
 
 /* ── Task card ──────────────────────────────────────────── */
@@ -945,10 +945,10 @@ onUnmounted(() => {
   border-radius: 8px;
   font-weight: 500;
 }
-.status--todo { background: var(--color-status-todo-bg); color: var(--color-status-todo); }
-.status--in_progress { background: var(--color-status-in-progress-bg); color: var(--color-status-in-progress); }
-.status--done { background: var(--color-status-done-bg); color: var(--color-status-done); }
-.status--cancelled { background: var(--color-status-todo-bg); color: var(--color-status-todo); text-decoration: line-through; }
+.status--todo { background: var(--fs-status-todo-bg); color: var(--fs-status-todo); }
+.status--in_progress { background: var(--fs-status-in-progress-bg); color: var(--fs-status-in-progress); }
+.status--done { background: var(--fs-status-done-bg); color: var(--fs-status-done); }
+.status--cancelled { background: var(--fs-status-todo-bg); color: var(--fs-status-todo); text-decoration: line-through; }
 
 .priority-badge {
   font-size: 0.7rem;
@@ -956,16 +956,16 @@ onUnmounted(() => {
   border-radius: 8px;
   font-weight: 500;
 }
-.priority--low { background: var(--color-priority-low-bg); color: var(--color-priority-low); }
-.priority--normal { background: var(--color-priority-medium-bg); color: var(--color-priority-medium); }
-.priority--high { background: var(--color-priority-high-bg); color: var(--color-priority-high); }
+.priority--low { background: var(--fs-priority-low-bg); color: var(--fs-priority-low); }
+.priority--normal { background: var(--fs-priority-medium-bg); color: var(--fs-priority-medium); }
+.priority--high { background: var(--fs-priority-high-bg); color: var(--fs-priority-high); }
 
 .task-due {
   font-size: 0.78rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .task-overdue {
-  color: var(--color-overdue);
+  color: var(--fs-overdue);
   font-weight: 500;
 }
 
@@ -977,7 +977,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   text-align: center;
   gap: 6px;
 }
@@ -985,7 +985,7 @@ onUnmounted(() => {
 .empty-narrator {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 1rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   opacity: 0.85;
 }
 
@@ -999,17 +999,17 @@ onUnmounted(() => {
 }
 .sentinel-loading {
   font-size: 0.8rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* ── Graph panel ─────────────────────────────────────────── */
 .graph-panel {
   width: 500px;
   flex-shrink: 0;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--fs-border-color);
   display: flex;
   flex-direction: column;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
   transition: width 0.2s ease;
 }
 .graph-panel.expanded {
@@ -1022,7 +1022,7 @@ onUnmounted(() => {
   padding: 10px 14px;
   font-size: 0.85rem;
   font-weight: 500;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 /* RESTORED (#2444). The panel is a flex COLUMN and its header is
@@ -1050,15 +1050,15 @@ onUnmounted(() => {
 .dup-panel {
   margin-bottom: 1.25rem;
   padding: 0.85rem 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 8px;
-  background: var(--color-surface-alt);
+  background: var(--fs-surface-hover);
 }
 .dup-empty,
 .dup-head {
   margin: 0 0 0.5rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .dup-empty { margin-bottom: 0; }
 .dup-group {
@@ -1067,7 +1067,7 @@ onUnmounted(() => {
   gap: 0.75rem;
   flex-wrap: wrap;
   padding: 0.5rem 0;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 .dup-members {
   display: flex;
@@ -1080,23 +1080,23 @@ onUnmounted(() => {
   font-size: 0.8rem;
   padding: 0.1rem 0.45rem;
   border-radius: 4px;
-  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
-  color: var(--color-text);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
+  color: var(--fs-text-primary);
   text-decoration: none;
   overflow-wrap: anywhere;
 }
-.dup-member:hover { background: var(--color-hover); }
+.dup-member:hover { background: var(--fs-surface-hover); }
 .dup-score {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 /* A set someone already ruled on — quiet, not celebratory: it means "skip". */
 .dup-claimed {
   font-size: 0.72rem;
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
+  color: var(--fs-text-tertiary);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
   padding: 0.05rem 0.4rem;
   white-space: nowrap;