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/ProjectView.vue

@@ -932,9 +932,9 @@ async function confirmDelete() {
 <style scoped>
 /* ── Layout ─────────────────────────────────────────────────── */
 .project-view {
-  max-width: var(--page-max-width);
+  max-width: var(--fs-layout-page-max);
   margin: 2rem auto;
-  padding: 0 var(--page-padding-x);
+  padding: 0 var(--fs-layout-page-pad);
   overflow-x: clip;
 }
 
@@ -947,9 +947,9 @@ async function confirmDelete() {
 }
 .page-header-actions { display: flex; gap: 0.5rem; align-items: center; }
 .plan-title-input {
-  background: var(--color-bg);
+  background: var(--fs-surface-page);
   color: inherit;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
   padding: 0.4rem 0.6rem;
   font: inherit;
@@ -961,7 +961,7 @@ async function confirmDelete() {
   font-size: 1.75rem;
   font-weight: 500;
   font-family: "Fraunces", Georgia, serif;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   background: transparent;
   border: none;
   border-bottom: 1.5px solid transparent;
@@ -970,8 +970,8 @@ async function confirmDelete() {
   min-width: 0;
   transition: border-color 0.15s;
 }
-.project-title-input:focus { border-bottom-color: var(--color-primary); }
-.project-title-input::placeholder { color: var(--color-text-muted); font-weight: 400; }
+.project-title-input:focus { border-bottom-color: var(--fs-accent); }
+.project-title-input::placeholder { color: var(--fs-text-tertiary); font-weight: 400; }
 
 .status-badge {
   font-size: 0.68rem;
@@ -982,14 +982,14 @@ async function confirmDelete() {
   border-radius: 999px;
   flex-shrink: 0;
 }
-.status-active   { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
-.status-paused    { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
-.status-completed { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }
-.status-archived  { background: color-mix(in srgb, var(--color-text-muted) 14%, transparent); color: var(--color-text-muted); border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); }
+.status-active   { background: color-mix(in srgb, var(--fs-success) 14%, transparent); color: var(--fs-success); border: 1px solid color-mix(in srgb, var(--fs-success) 30%, transparent); }
+.status-paused    { background: color-mix(in srgb, var(--fs-warning) 14%, transparent); color: var(--fs-warning); border: 1px solid color-mix(in srgb, var(--fs-warning) 30%, transparent); }
+.status-completed { background: color-mix(in srgb, var(--fs-accent) 14%, transparent); color: var(--fs-accent); border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent); }
+.status-archived  { background: color-mix(in srgb, var(--fs-text-tertiary) 14%, transparent); color: var(--fs-text-tertiary); border: 1px solid color-mix(in srgb, var(--fs-text-tertiary) 30%, transparent); }
 
 .project-goal {
   font-size: 1rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin: 0 0 0.3rem;
   line-height: 1.45;
 }
@@ -998,7 +998,7 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.3rem;
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0;
 }
 
@@ -1015,7 +1015,7 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.3rem 0.65rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   font-size: 0.82rem;
   border: 1px solid;
 }
@@ -1028,14 +1028,14 @@ async function confirmDelete() {
   border-radius: 50%;
   flex-shrink: 0;
 }
-.dot-todo      { background: transparent; border: 2px solid var(--color-text-muted); }
-.dot-inprogress { background: var(--color-status-in-progress); }
-.dot-done      { background: var(--color-status-done); }
+.dot-todo      { background: transparent; border: 2px solid var(--fs-text-tertiary); }
+.dot-inprogress { background: var(--fs-status-in-progress); }
+.dot-done      { background: var(--fs-status-done); }
 
-.stat-todo      { background: color-mix(in srgb, var(--color-text-muted) 8%, transparent); color: var(--color-text-secondary); border-color: var(--color-border); }
+.stat-todo      { background: color-mix(in srgb, var(--fs-text-tertiary) 8%, transparent); color: var(--fs-text-secondary); border-color: var(--fs-border-color); }
 .stat-inprogress { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 28%, transparent); }
-.stat-done      { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
-.stat-notes     { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }
+.stat-done      { background: color-mix(in srgb, var(--fs-success) 10%, transparent); color: var(--fs-success); border-color: color-mix(in srgb, var(--fs-success) 28%, transparent); }
+.stat-notes     { background: color-mix(in srgb, var(--fs-accent) 8%, transparent); color: var(--fs-accent); border-color: color-mix(in srgb, var(--fs-accent) 22%, transparent); }
 
 /* ── Two-column body ─────────────────────────────────────────── */
 /* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` track has an AUTO minimum, so it
@@ -1059,9 +1059,9 @@ async function confirmDelete() {
 
 /* ── Edit panel ──────────────────────────────────────────────── */
 .edit-panel {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1rem 1.1rem;
   display: flex;
   flex-direction: column;
@@ -1075,28 +1075,28 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .edit-field { display: flex; flex-direction: column; gap: 0.3rem; }
 .edit-label {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.03em;
 }
 .edit-input, .edit-textarea, .edit-select {
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
   box-sizing: border-box;
   width: 100%;
 }
-.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--color-primary); }
+.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--fs-accent); }
 .edit-textarea { resize: vertical; }
 
 /* Save panel: Moss action-primary per Hybrid rule */
@@ -1110,27 +1110,27 @@ async function confirmDelete() {
   border-bottom: 2px solid transparent;
   cursor: pointer;
   font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-family: inherit;
   margin-bottom: -1px;
   transition: color 0.15s;
 }
-.tab-btn:hover { color: var(--color-primary); }
-.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }
+.tab-btn:hover { color: var(--fs-accent); }
+.tab-btn.active { color: var(--fs-accent); border-bottom-color: var(--fs-accent); font-weight: 500; }
 .tab-count {
   font-size: 0.7rem;
   font-weight: 500;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0 0.4rem;
   line-height: 1.5;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .tab-btn.active .tab-count {
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
+  color: var(--fs-accent);
 }
 
 /* ── Tasks view ──────────────────────────────────────────────── */
@@ -1139,28 +1139,28 @@ async function confirmDelete() {
 .milestone-actions { display: flex; align-items: center; }
 .btn-add-milestone {
   background: none;
-  border: 1px dashed var(--color-border);
-  color: var(--color-text-secondary);
+  border: 1px dashed var(--fs-border-color);
+  color: var(--fs-text-secondary);
   padding: 0.28rem 0.65rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
-.btn-add-milestone:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-add-milestone:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .new-milestone-row { display: flex; gap: 0.4rem; align-items: center; flex: 1; }
 .milestone-title-input {
   flex: 1;
   padding: 0.3rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
 }
-.milestone-title-input:focus { outline: none; border-color: var(--color-primary); }
+.milestone-title-input:focus { outline: none; border-color: var(--fs-accent); }
 /* Milestone confirm: Moss action-primary; Cancel: Bronze action-secondary */
 /* RESTORED. Both of these lost their base rule to a CSS sweep and left only
    modifiers behind — `.milestone-header.clickable`, `.milestone-header:hover`.
@@ -1170,9 +1170,9 @@ async function confirmDelete() {
    the "uses space poorly" the operator saw, and it was a deletion rather than a
    design change. A dangling `:hover` is the tell, and it is now checked for. */
 .milestone-group {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   overflow: hidden;
   margin-bottom: 0.75rem;
 }
@@ -1182,20 +1182,20 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.85rem;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 .milestone-header.clickable { cursor: pointer; }
-.milestone-header.clickable:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-secondary)); }
+.milestone-header.clickable:hover { background: color-mix(in srgb, var(--fs-accent) 4%, var(--fs-surface-raised)); }
 
 /* Plan body: the milestone's design/intent, shown above its task columns. */
 .ms-plan {
   padding: 0.6rem 0.85rem;
-  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card));
-  border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--fs-accent) 3%, var(--fs-surface-raised));
+  border-bottom: 1px solid var(--fs-border-color);
 }
-.ms-plan-rendered { font-size: 0.85rem; color: var(--color-text); cursor: text; }
-.ms-plan-rendered:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
+.ms-plan-rendered { font-size: 0.85rem; color: var(--fs-text-primary); cursor: text; }
+.ms-plan-rendered:hover { background: color-mix(in srgb, var(--fs-accent) 4%, transparent); }
 
 /* max-height rather than -webkit-line-clamp: the body is rendered markdown, so
    it holds headings, lists and tables. line-clamp counts lines inside ONE inline
@@ -1216,21 +1216,21 @@ async function confirmDelete() {
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card))
+    color-mix(in srgb, var(--fs-accent) 3%, var(--fs-surface-raised))
   );
   pointer-events: none;   /* the text under the fade stays clickable to edit */
 }
 .ms-plan-toggle { padding-left: 0; margin-top: 0.15rem; }
 .ms-plan-editor {
   width: 100%;
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 0.8rem;
   line-height: 1.5;
   padding: 0.5rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   resize: vertical;
   box-sizing: border-box;
 }
@@ -1241,19 +1241,19 @@ async function confirmDelete() {
   padding: 0.3rem 0.75rem;
   border-radius: 6px;
   cursor: pointer;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
 }
-.ms-plan-actions .btn-primary { background: var(--color-action-primary); color: var(--fs-text-on-action); border-color: var(--color-action-primary); }
+.ms-plan-actions .btn-primary { background: var(--fs-action-primary); color: var(--fs-text-on-action); border-color: var(--fs-action-primary); }
 .ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
-.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
+.ms-plan-actions .btn-secondary { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
 
-.ms-chevron { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; }
-.ms-name { font-weight: 500; color: var(--color-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-chevron { display: flex; align-items: center; color: var(--fs-text-tertiary); flex-shrink: 0; }
+.ms-name { font-weight: 500; color: var(--fs-text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ms-count {
   font-size: 0.7rem;
-  color: var(--color-text-muted);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  color: var(--fs-text-tertiary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0.05rem 0.4rem;
   flex-shrink: 0;
@@ -1262,18 +1262,18 @@ async function confirmDelete() {
 .ms-progress-track {
   width: 72px;
   height: 6px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   border-radius: 999px;
   overflow: hidden;
   flex-shrink: 0;
 }
 .ms-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-success)));
+  background: linear-gradient(90deg, var(--fs-accent), color-mix(in srgb, var(--fs-accent) 70%, var(--fs-success)));
   border-radius: 999px;
   transition: width 0.4s ease;
 }
-.ms-pct { font-size: 0.72rem; color: var(--color-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 500; }
+.ms-pct { font-size: 0.72rem; color: var(--fs-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 500; }
 
 .ms-actions { display: flex; gap: 0.15rem; margin-left: 0.2rem; opacity: 0; transition: opacity 0.15s; }
 .milestone-header:hover .ms-actions { opacity: 1; }
@@ -1284,22 +1284,22 @@ async function confirmDelete() {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   width: 24px;
   height: 24px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
-.ms-action-btn:hover { background: var(--color-bg-card); color: var(--color-text); }
-.ms-action-delete:hover { color: var(--color-danger); }
+.ms-action-btn:hover { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
+.ms-action-delete:hover { color: var(--fs-error); }
 
 .ms-rename-input {
   flex: 1;
   min-width: 0;
   padding: 0.1rem 0.35rem;
-  border: 1px solid var(--color-primary);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-accent);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   font-family: inherit;
   font-weight: 500;
@@ -1316,20 +1316,20 @@ async function confirmDelete() {
   gap: 0.75rem;
   align-items: start;
   padding: 0.75rem;
-  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--fs-surface-page) 60%, var(--fs-surface-raised));
 }
 .kanban-col {
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border-radius: var(--fs-radius-lg);
   padding: 0.65rem;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   border-top: 3px solid;
 }
-.col-todo      { border-top-color: var(--color-border); }
-.col-inprogress { border-top-color: var(--color-status-in-progress); }
-.col-done      { border-top-color: var(--color-status-done); }
+.col-todo      { border-top-color: var(--fs-border-color); }
+.col-inprogress { border-top-color: var(--fs-status-in-progress); }
+.col-done      { border-top-color: var(--fs-status-done); }
 
 .kanban-col-header {
   display: flex;
@@ -1339,18 +1339,18 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin-bottom: 0.3rem;
 }
 .col-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
 .col-label { flex: 1; }
 .col-count {
-  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: 999px;
   padding: 0.05rem 0.4rem;
   font-size: 0.68rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-weight: 500;
 }
 .col-add-btn {
@@ -1359,40 +1359,40 @@ async function confirmDelete() {
   justify-content: center;
   width: 18px;
   height: 18px;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-decoration: none;
   font-size: 1rem;
   line-height: 1;
   border-radius: 3px;
   margin-left: auto;
 }
-.col-add-btn:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
+.col-add-btn:hover { color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 10%, transparent); }
 
 .kanban-cards { display: flex; flex-direction: column; gap: 0.3rem; }
 
 .task-card {
   display: block;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-left: 3px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.45rem 0.55rem;
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   transition: border-color 0.12s, box-shadow 0.18s, transform 0.18s ease;
   box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .task-card:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
-  border-left-color: var(--color-primary);
+  border-color: color-mix(in srgb, var(--fs-accent) 50%, var(--fs-border-color));
+  border-left-color: var(--fs-accent);
   box-shadow: 0 3px 10px rgba(0,0,0,0.08);
   transform: translateY(-2px);
 }
 /* Priority left-border colors */
-.task-card.pri-high   { border-left-color: var(--color-danger); }
+.task-card.pri-high   { border-left-color: var(--fs-error); }
 .task-card.pri-medium { border-left-color: #f59e0b; }
-.task-card.pri-low    { border-left-color: var(--color-success); }
+.task-card.pri-low    { border-left-color: var(--fs-success); }
 
 .task-card-done { opacity: 0.65; }
 .task-card-done .task-title { text-decoration: line-through; }
@@ -1404,10 +1404,10 @@ async function confirmDelete() {
   flex-shrink: 0;
   display: inline-flex; align-items: center; justify-content: center;
   width: 1.4rem; height: 1.4rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.75rem;
   cursor: pointer;
   opacity: 0;
@@ -1415,8 +1415,8 @@ async function confirmDelete() {
   line-height: 1;
 }
 .task-card:hover .task-advance-btn { opacity: 1; }
-.task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--fs-text-on-action); }
-.task-advance-btn--done:hover { background: var(--color-success); border-color: var(--color-success); color: var(--fs-text-on-action); }
+.task-advance-btn:hover { background: var(--fs-action-primary); border-color: var(--fs-action-primary); color: var(--fs-text-on-action); }
+.task-advance-btn--done:hover { background: var(--fs-success); border-color: var(--fs-success); color: var(--fs-text-on-action); }
 .task-advance-btn:disabled { opacity: 0.4; cursor: default; }
 
 .priority-dot {
@@ -1425,18 +1425,18 @@ async function confirmDelete() {
   border-radius: 50%;
   flex-shrink: 0;
 }
-.dot-pri-high   { background: var(--color-danger); }
+.dot-pri-high   { background: var(--fs-error); }
 .dot-pri-medium { background: #f59e0b; }
-.dot-pri-low    { background: var(--color-success); }
+.dot-pri-low    { background: var(--fs-success); }
 
-.due-date { font-size: 0.7rem; color: var(--color-text-muted); }
+.due-date { font-size: 0.7rem; color: var(--fs-text-tertiary); }
 .col-empty {
   text-align: center;
   padding: 1.25rem 0.5rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.78rem;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px dashed var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   opacity: 0.7;
 }
 
@@ -1447,62 +1447,62 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 0.9rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   transition: border-color 0.12s, box-shadow 0.15s, transform 0.15s;
   box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .note-row:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
+  border-color: color-mix(in srgb, var(--fs-accent) 50%, var(--fs-border-color));
   box-shadow: 0 3px 10px rgba(0,0,0,0.07);
   transform: translateY(-1px);
 }
-.note-icon { color: var(--color-text-muted); flex-shrink: 0; }
+.note-icon { color: var(--fs-text-tertiary); flex-shrink: 0; }
 .note-title { font-weight: 500; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.note-date { font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }
+.note-date { font-size: 0.75rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
 
-.empty-msg { color: var(--color-text-muted); font-size: 0.875rem; text-align: center; padding: 1rem; }
+.empty-msg { color: var(--fs-text-tertiary); font-size: 0.875rem; text-align: center; padding: 1rem; }
 /* Deliberately NOT styled like .empty-msg: "no tasks" and "the tasks did not
    load" look identical to a user, and conflating them is what let a silent
    failure read as an empty project. */
-.tasks-error { color: var(--color-danger); font-size: 0.875rem; padding: 1rem; text-align: center; }
+.tasks-error { color: var(--fs-error); font-size: 0.875rem; padding: 1rem; text-align: center; }
 
 /* ── Modal ───────────────────────────────────────────────────── */
 .modal-overlay {
   position: fixed; inset: 0;
-  background: var(--color-overlay);
+  background: var(--fs-overlay);
   display: flex; align-items: center; justify-content: center;
   z-index: 200;
 }
 .modal-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1.5rem;
   width: 100%;
   max-width: 400px;
   box-shadow: 0 8px 32px var(--color-shadow);
 }
 .modal-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
-.modal-message { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
+.modal-message { font-size: 0.9rem; color: var(--fs-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
 .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
 .modal-btn {
   padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 0.875rem;
   font-family: inherit;
 }
-.modal-btn:hover { background: var(--color-bg); }
-.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--fs-text-on-action); }
-.modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
+.modal-btn:hover { background: var(--fs-surface-page); }
+.modal-btn-danger { background: var(--fs-action-destructive); border-color: var(--fs-action-destructive); color: var(--fs-text-on-action); }
+.modal-btn-danger:hover { background: var(--fs-action-destructive-hover); border-color: var(--fs-action-destructive-hover); }
 
 /* ── Skeleton ────────────────────────────────────────────────── */
 @keyframes skel-shine { to { background-position: 200% center; } }
@@ -1512,21 +1512,21 @@ async function confirmDelete() {
   gap: 0.65rem;
 }
 .skel-title, .skel-goal, .skel-stats, .skel-body, .skel-row {
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   background: linear-gradient(
     90deg,
-    var(--color-bg-secondary) 25%,
-    color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
-    var(--color-bg-secondary) 75%
+    var(--fs-surface-raised) 25%,
+    color-mix(in srgb, var(--fs-text-tertiary) 16%, var(--fs-surface-raised)) 50%,
+    var(--fs-surface-raised) 75%
   );
   background-size: 200% 100%;
   animation: skel-shine 1.5s ease infinite;
 }
-.skel-title  { height: 2.2rem; width: 55%; border-radius: var(--radius-md); }
+.skel-title  { height: 2.2rem; width: 55%; border-radius: var(--fs-radius-lg); }
 .skel-goal   { height: 1rem; width: 75%; }
-.skel-stats  { height: 2rem; width: 50%; border-radius: var(--radius-md); }
-.skel-body   { height: 200px; border-radius: var(--radius-md); }
-.skel-row    { height: 2.5rem; border-radius: var(--radius-sm); }
+.skel-stats  { height: 2rem; width: 50%; border-radius: var(--fs-radius-lg); }
+.skel-body   { height: 200px; border-radius: var(--fs-radius-lg); }
+.skel-row    { height: 2.5rem; border-radius: var(--fs-radius-sm); }
 .skel-row--short { width: 65%; }
 
 /* ── Responsive ──────────────────────────────────────────────── */