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/components/AppHeader.vue

@@ -124,8 +124,8 @@ router.afterEach(() => {
 
 <style scoped>
 .app-header {
-  background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
-  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
+  background: linear-gradient(180deg, var(--fs-surface-hover), var(--fs-surface-page));
+  border-bottom: 1px solid color-mix(in srgb, var(--fs-accent) 18%, transparent);
   position: relative;
 }
 /* Three tracks, not a flex row with an absolutely-centred overlay.
@@ -178,7 +178,7 @@ router.afterEach(() => {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: var(--color-primary-faint);
+  background: var(--fs-accent-faint);
   border-radius: 10px;
   padding: 3px;
 }
@@ -194,7 +194,7 @@ router.afterEach(() => {
 }
 
 .nav-link {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-decoration: none;
   font-size: 0.82rem;
   padding: 0.3rem 0.75rem;
@@ -202,14 +202,14 @@ router.afterEach(() => {
   transition: background 0.15s, color 0.15s;
 }
 .nav-link:hover {
-  color: var(--color-text);
-  background: var(--color-primary-tint);
+  color: var(--fs-text-primary);
+  background: var(--fs-accent-soft);
 }
 .nav-link.router-link-active {
-  color: var(--color-primary-solid);
+  color: var(--fs-accent);
   font-weight: 500;
-  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 25%, transparent);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--fs-accent) 30%, transparent);
 }
 
 /* Status indicator */
@@ -229,7 +229,7 @@ router.afterEach(() => {
 .status-text {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 /* Status dots are indicator lights, not semantic-palette buttons —
    they want to read as vital (Moss/Warning/Error are too muted for
@@ -239,7 +239,7 @@ router.afterEach(() => {
 .status-yellow .status-dot { background: #facc15; animation: pulse-dot 2s infinite; }
 .status-orange .status-dot { background: #f97316; }
 .status-red .status-dot    { background: #ef4444; }
-.status-gray .status-dot   { background: var(--color-text-muted); animation: pulse-dot 2s infinite; }
+.status-gray .status-dot   { background: var(--fs-text-tertiary); animation: pulse-dot 2s infinite; }
 @keyframes pulse-dot {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
@@ -252,12 +252,12 @@ router.afterEach(() => {
 /* Icon buttons (?, theme, gear) */
 .btn-icon {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.45rem;
   cursor: pointer;
   font-size: 0.95rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: 1;
   display: flex;
   align-items: center;
@@ -265,9 +265,9 @@ router.afterEach(() => {
 }
 .btn-icon:hover,
 .btn-icon.active {
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  border-color: var(--color-primary);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-color: var(--fs-accent);
 }
 
 /* User info */
@@ -277,11 +277,11 @@ router.afterEach(() => {
   gap: 0.4rem;
   margin-left: 0.25rem;
   padding-left: 0.5rem;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--fs-border-color);
 }
 .username {
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-weight: 500;
   /* The widest thing on the right and the only one that can give: a long
      username shouldn't be what decides where the nav bar sits. */
@@ -295,24 +295,24 @@ router.afterEach(() => {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
   padding: 0.1rem 0.35rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
 .btn-logout {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.2rem 0.5rem;
   cursor: pointer;
   font-size: 0.8rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-family: inherit;
 }
 .btn-logout:hover {
-  color: var(--color-danger);
-  border-color: var(--color-danger);
+  color: var(--fs-error);
+  border-color: var(--fs-error);
 }
 
 /* Hamburger — mobile only */
@@ -330,7 +330,7 @@ router.afterEach(() => {
   display: block;
   width: 20px;
   height: 2px;
-  background: var(--color-text);
+  background: var(--fs-text-primary);
   border-radius: 1px;
 }
 
@@ -339,13 +339,13 @@ router.afterEach(() => {
   display: flex;
   flex-direction: column;
   padding: 0.5rem 1rem 0.75rem;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
   gap: 0.1rem;
 }
 .mobile-divider {
   height: 1px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   margin: 0.4rem 0;
 }
 .mobile-actions {
@@ -359,7 +359,7 @@ router.afterEach(() => {
   align-items: center;
   gap: 0.5rem;
   padding-top: 0.4rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   margin-top: 0.25rem;
 }
 
@@ -398,7 +398,7 @@ router.afterEach(() => {
     border-radius: 8px;
   }
   .mobile-menu .nav-link.router-link-active {
-    background: var(--color-primary-wash);
+    background: var(--fs-accent-wash);
     box-shadow: none;
   }
   .mobile-user .btn-logout {

frontend/src/components/AppLogo.vue

@@ -13,8 +13,8 @@ defineProps<{ size?: number }>();
   >
     <defs>
       <linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stop-color="var(--color-primary-solid)" />
-        <stop offset="100%" stop-color="var(--color-primary-deep)" />
+        <stop offset="0%" stop-color="var(--fs-accent)" />
+        <stop offset="100%" stop-color="var(--fs-accent-deep)" />
       </linearGradient>
     </defs>
     <!-- Book body -->
@@ -44,12 +44,12 @@ defineProps<{ size?: number }>();
 <style scoped>
 .logo-book {
   fill: url(#logo-gradient);
-  stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
+  stroke: color-mix(in srgb, var(--fs-accent) 70%, transparent);
 }
 .logo-spine {
-  stroke: var(--color-text-secondary);
+  stroke: var(--fs-text-secondary);
 }
 .logo-lines {
-  stroke: var(--color-text-muted);
+  stroke: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/DiffView.vue

@@ -90,9 +90,9 @@ function markerFor(type: DiffLine['type']): string {
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
   overflow: hidden;
 }
 
@@ -103,15 +103,15 @@ function markerFor(type: DiffLine['type']): string {
   display: flex;
   gap: 1rem;
   padding: 0.4rem 0.75rem;
-  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);
   font-size: 0.78rem;
   font-family: monospace;
   font-weight: 600;
 }
 
-.diff-summary-ins { color: var(--color-success); }
-.diff-summary-del { color: var(--color-danger); }
+.diff-summary-ins { color: var(--fs-success); }
+.diff-summary-del { color: var(--fs-error); }
 
 .diff-scroll {
   flex: 1;
@@ -123,7 +123,7 @@ function markerFor(type: DiffLine['type']): string {
 .diff-empty {
   padding: 0.75rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .diff-line {
@@ -136,24 +136,24 @@ function markerFor(type: DiffLine['type']): string {
 }
 
 .diff-delete {
-  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
-  color: var(--color-danger);
+  background: color-mix(in srgb, var(--fs-error) 12%, transparent);
+  color: var(--fs-error);
 }
 
 .diff-insert {
-  background: color-mix(in srgb, var(--color-success) 12%, transparent);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--fs-success) 12%, transparent);
+  color: var(--fs-success);
 }
 
 .diff-equal {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .diff-collapse {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   opacity: 0.6;
-  border-top: 1px dashed var(--color-border);
-  border-bottom: 1px dashed var(--color-border);
+  border-top: 1px dashed var(--fs-border-color);
+  border-bottom: 1px dashed var(--fs-border-color);
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
 }

frontend/src/components/HistoryPanel.vue

@@ -309,7 +309,7 @@ onMounted(loadVersions);
   align-items: center;
   justify-content: space-between;
   padding: 0.9rem 1.25rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .history-title {
@@ -322,11 +322,11 @@ onMounted(loadVersions);
   border: none;
   font-size: 1.25rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: 1;
   padding: 0.1rem 0.3rem;
 }
-.history-close:hover { color: var(--color-text); }
+.history-close:hover { color: var(--fs-text-primary); }
 
 .history-body {
   flex: 1;
@@ -338,7 +338,7 @@ onMounted(loadVersions);
 .history-list {
   width: 220px;
   flex-shrink: 0;
-  border-right: 1px solid var(--color-border);
+  border-right: 1px solid var(--fs-border-color);
   overflow-y: auto;
 }
 
@@ -346,18 +346,18 @@ onMounted(loadVersions);
   padding: 0.6rem 0.9rem;
   cursor: pointer;
   border-left: 3px solid transparent;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
-.history-item:hover { background: var(--color-bg-secondary); }
+.history-item:hover { background: var(--fs-surface-raised); }
 .history-item.selected {
-  border-left-color: var(--color-primary);
-  background: var(--color-bg-secondary);
+  border-left-color: var(--fs-accent);
+  background: var(--fs-surface-raised);
 }
 
 .history-item-title {
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -365,7 +365,7 @@ onMounted(loadVersions);
 
 .history-item-date {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-top: 0.15rem;
 }
 
@@ -381,7 +381,7 @@ onMounted(loadVersions);
 .history-empty {
   padding: 1rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .history-footer {
@@ -390,7 +390,7 @@ onMounted(loadVersions);
   gap: 0.5rem;
   justify-content: flex-end;
   padding: 0.75rem 1.25rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 
@@ -403,12 +403,12 @@ onMounted(loadVersions);
   font-size: 0.85em;
   line-height: 1;
 }
-.pin-badge-manual { color: var(--color-primary); }
-.pin-badge-auto { color: var(--color-text-muted); }
+.pin-badge-manual { color: var(--fs-accent); }
+.pin-badge-auto { color: var(--fs-text-tertiary); }
 
 .history-item-label {
   font-size: 0.72rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   font-style: italic;
   margin-top: 0.15rem;
   overflow: hidden;
@@ -419,7 +419,7 @@ onMounted(loadVersions);
 /* ── Pin controls above the diff ────────────────────────────────────────── */
 .version-pin-controls {
   padding: 0.4rem 0.5rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   font-size: 0.82rem;
 }
 .pin-actions {
@@ -430,7 +430,7 @@ onMounted(loadVersions);
 }
 .pin-state {
   font-style: italic;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -442,13 +442,13 @@ onMounted(loadVersions);
   font-size: 0.78rem;
   background: transparent;
   color: inherit;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   cursor: pointer;
 }
 .btn-pin:hover:not(:disabled), .btn-pin-edit:hover:not(:disabled) {
   background: rgba(99, 102, 241, 0.12);
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .btn-unpin:hover:not(:disabled) {
   background: rgba(239, 68, 68, 0.10);
@@ -463,27 +463,27 @@ onMounted(loadVersions);
   flex: 1;
   padding: 0.3rem 0.5rem;
   font-size: 0.85rem;
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   color: inherit;
 }
 .pin-label-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .btn-pin-save, .btn-pin-cancel {
   padding: 0.3rem 0.7rem;
   font-size: 0.78rem;
   background: transparent;
   color: inherit;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
 }
 .btn-pin-save:hover:not(:disabled) {
   background: rgba(99, 102, 241, 0.12);
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .btn-pin-save:disabled, .btn-pin-cancel:disabled,
 .btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled {

frontend/src/components/InlineAssistPanel.vue

@@ -74,11 +74,11 @@ const markers: Record<DiffLine["type"], string> = {
 
 <style scoped>
 .iap {
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   margin-bottom: 0.75rem;
   overflow: hidden;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-page);
 }
 
 /* ── Header ── */
@@ -88,16 +88,16 @@ const markers: Record<DiffLine["type"], string> = {
   gap: 0.5rem;
   padding: 0.45rem 0.75rem;
   font-size: 0.85rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
 }
 
 /* ── Streaming ── */
 .iap-streaming {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised));
 }
 
 .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary);
+  background: var(--fs-accent);
   flex-shrink: 0;
   animation: iap-pulse 1.2s ease-in-out infinite;
 }
@@ -117,7 +117,7 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-label {
   flex: 1;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -125,9 +125,9 @@ const markers: Record<DiffLine["type"], string> = {
 
 .iap-btn-cancel {
   background: none;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-secondary);
+  border-radius: var(--fs-radius-sm);
   padding: 0.15rem 0.5rem;
   cursor: pointer;
   font-size: 0.8rem;
@@ -135,8 +135,8 @@ const markers: Record<DiffLine["type"], string> = {
   flex-shrink: 0;
 }
 .iap-btn-cancel:hover {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
+  border-color: var(--fs-error);
+  color: var(--fs-error);
 }
 
 .iap-stream-preview {
@@ -150,29 +150,29 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-waiting {
   padding: 0.75rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* ── Review ── */
 .iap-review-title {
   flex: 1;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .iap-btn-toggle {
   background: none;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-secondary);
+  border-radius: var(--fs-radius-sm);
   padding: 0.15rem 0.5rem;
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
 .iap-btn-toggle:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 .iap-actions {
@@ -183,7 +183,7 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-btn-accept,
 .iap-btn-reject {
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.2rem 0.65rem;
   cursor: pointer;
   font-size: 0.8rem;
@@ -191,19 +191,19 @@ const markers: Record<DiffLine["type"], string> = {
   font-weight: var(--fs-weight-medium);
 }
 .iap-btn-accept {
-  background: var(--color-success);
+  background: var(--fs-success);
   color: var(--fs-text-on-action);
 }
 .iap-btn-accept:hover { opacity: 0.85; }
 
 .iap-btn-reject {
-  background: var(--color-bg-card);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-secondary);
+  border: 1px solid var(--fs-border-color);
 }
 .iap-btn-reject:hover {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
+  border-color: var(--fs-error);
+  color: var(--fs-error);
 }
 
 /* ── Diff ── */
@@ -224,14 +224,14 @@ const markers: Record<DiffLine["type"], string> = {
   word-break: break-word;
 }
 
-.iap-diff-equal  { color: var(--color-text-muted); }
+.iap-diff-equal  { color: var(--fs-text-tertiary); }
 .iap-diff-delete {
-  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-  color: var(--color-danger);
+  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
+  color: var(--fs-error);
 }
 .iap-diff-insert {
-  background: color-mix(in srgb, var(--color-success) 10%, transparent);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--fs-success) 10%, transparent);
+  color: var(--fs-success);
 }
 
 .iap-diff-marker {
@@ -243,7 +243,7 @@ const markers: Record<DiffLine["type"], string> = {
 
 .iap-diff-empty {
   padding: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.85rem;
   font-family: inherit;
 }

frontend/src/components/MarkdownToolbar.vue

@@ -111,9 +111,9 @@ const groups = [
   align-items: center;
   gap: 2px;
   flex-wrap: wrap;
-  background: var(--color-bg-secondary);
-  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: 3px 4px;
 }
 
@@ -127,7 +127,7 @@ const groups = [
   display: block;
   width: 1px;
   height: 18px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   flex-shrink: 0;
   margin: 0 3px;
 }
@@ -141,7 +141,7 @@ const groups = [
   border: none;
   border-radius: 5px;
   background: transparent;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   padding: 0;
   transition: background 0.12s, color 0.12s, box-shadow 0.12s;
@@ -149,19 +149,19 @@ const groups = [
 }
 
 .md-btn:hover {
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .md-btn.active {
-  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
-  color: var(--color-primary);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 14%, transparent);
+  color: var(--fs-accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fs-accent) 35%, transparent);
 }
 
 .md-btn.active:hover {
-  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
 }
 
 .btn-icon {

frontend/src/components/MilestoneSelector.vue

@@ -66,10 +66,10 @@ function onChange(e: Event) {
 <style scoped>
 .milestone-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;
@@ -77,7 +77,7 @@ function onChange(e: Event) {
 }
 .milestone-select:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .milestone-select:disabled {
   opacity: 0.5;

frontend/src/components/NoteCard.vue

@@ -60,15 +60,15 @@ function goEdit() {
 .note-card {
   display: block;
   padding: 1rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   text-decoration: none;
   color: inherit;
-  background: var(--color-bg-card);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
+  background: var(--fs-surface-raised);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 6%, transparent);
   transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .note-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14.0%, transparent);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 14.0%, transparent);
   transform: translateY(-2px);
 }
 
@@ -78,18 +78,18 @@ function goEdit() {
   align-items: center;
   gap: 0.6rem;
   padding: 0.45rem 0.75rem;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
   box-shadow: none;
   border-radius: 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   transform: none !important;
 }
 .note-card.compact:first-child {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 .note-card.compact:hover {
   box-shadow: none;
-  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 4%, transparent);
   transform: none;
 }
 .note-title-compact {
@@ -108,7 +108,7 @@ function goEdit() {
 }
 .timestamp-compact {
   font-size: 0.72rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -133,20 +133,20 @@ function goEdit() {
   flex-shrink: 0;
   padding: 0.25rem 0.6rem;
   font-size: 0.8rem;
-  background: var(--color-bg-card);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-secondary);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   transition: color 0.15s, border-color 0.15s;
 }
 .btn-edit:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+  color: var(--fs-accent);
+  border-color: var(--fs-accent);
 }
 .note-preview {
   margin: 0 0 0.5rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.9rem;
   max-height: 7.5em;
   overflow: hidden;
@@ -163,6 +163,6 @@ function goEdit() {
 .timestamp {
   margin-left: auto;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/NotificationBell.vue

@@ -60,11 +60,11 @@ onUnmounted(() => {
 
 .btn-bell {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.45rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -72,16 +72,16 @@ onUnmounted(() => {
 }
 .btn-bell:hover,
 .btn-bell.active {
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  border-color: var(--color-primary);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-color: var(--fs-accent);
 }
 
 .bell-badge {
   position: absolute;
   top: -5px;
   right: -5px;
-  background: var(--color-danger);
+  background: var(--fs-error);
   color: var(--fs-text-on-action);
   font-size: 0.6rem;
   font-weight: 700;

frontend/src/components/NotificationsPanel.vue

@@ -85,9 +85,9 @@ onMounted(() => store.fetchAll())
   width: 340px;
   max-height: 400px;
   overflow-y: auto;
-  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);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
   z-index: 500;
 }
@@ -97,10 +97,10 @@ onMounted(() => store.fetchAll())
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   position: sticky;
   top: 0;
-  background: var(--color-surface);
+  background: var(--fs-surface-hover);
 }
 
 .notif-panel-title {
@@ -114,12 +114,12 @@ onMounted(() => store.fetchAll())
   align-items: flex-start;
   gap: 0.6rem;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   cursor: pointer;
   transition: background 0.1s;
 }
 .notif-item:last-child { border-bottom: none; }
-.notif-item:hover { background: var(--color-hover); }
+.notif-item:hover { background: var(--fs-surface-hover); }
 
 .notif-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
 
@@ -127,10 +127,10 @@ onMounted(() => store.fetchAll())
 .notif-msg {
   margin: 0 0 0.2rem;
   font-size: 0.85rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   line-height: 1.4;
   word-break: break-word;
 }
-.notif-time { font-size: 0.75rem; color: var(--color-muted); }
+.notif-time { font-size: 0.75rem; color: var(--fs-text-tertiary); }
 
 </style>

frontend/src/components/PaginationBar.vue

@@ -74,27 +74,27 @@ function goToPage(page: number) {
 }
 .page-btn {
   padding: 0.35rem 0.7rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-size: 0.85rem;
 }
 .page-btn:hover:not(:disabled) {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .page-btn:disabled {
   opacity: 0.4;
   cursor: default;
 }
 .page-btn.active {
-  background: var(--color-primary);
+  background: var(--fs-accent);
   color: var(--fs-text-on-action);
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .ellipsis {
   padding: 0 0.25rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/PriorityBadge.vue

@@ -33,15 +33,15 @@ const labels: Record<TaskPriority, string> = {
   letter-spacing: 0.025em;
 }
 .priority-low {
-  background: var(--color-priority-low-bg);
-  color: var(--color-priority-low);
+  background: var(--fs-priority-low-bg);
+  color: var(--fs-priority-low);
 }
 .priority-medium {
-  background: var(--color-priority-medium-bg);
-  color: var(--color-priority-medium);
+  background: var(--fs-priority-medium-bg);
+  color: var(--fs-priority-medium);
 }
 .priority-high {
-  background: var(--color-priority-high-bg);
-  color: var(--color-priority-high);
+  background: var(--fs-priority-high-bg);
+  color: var(--fs-priority-high);
 }
 </style>

frontend/src/components/ProjectDesignTab.vue

@@ -128,16 +128,16 @@ watch(() => [props.projectId, props.designSystemId], run);
 }
 
 .pdt-note {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-left: 3px solid var(--color-warning);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
+  border-left: 3px solid var(--fs-warning);
   border-radius: var(--fs-radius-sm);
   padding: var(--fs-space-3) var(--fs-space-4);
 }
 
 .pdt-note p {
   margin: var(--fs-space-2) 0 0;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: var(--fs-size-body-sm);
   line-height: var(--fs-leading-body);
   max-width: 70ch;
@@ -146,18 +146,18 @@ watch(() => [props.projectId, props.designSystemId], run);
 .pdt-muted,
 .pdt-clean,
 .pdt-summary {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: var(--fs-size-body-sm);
   margin: 0 0 var(--fs-space-3);
   max-width: 70ch;
 }
 
 .pdt-clean {
-  color: var(--color-status-done);
+  color: var(--fs-status-done);
 }
 
 .pdt-summary {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .pdt-list {
@@ -170,7 +170,7 @@ watch(() => [props.projectId, props.designSystemId], run);
 }
 
 .pdt-finding {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: var(--fs-radius-md);
   padding: var(--fs-space-3);
   min-width: 0;
@@ -179,11 +179,11 @@ watch(() => [props.projectId, props.designSystemId], run);
 .pdt-title {
   display: block;
   font-weight: var(--fs-weight-medium);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   text-decoration: none;
   margin-bottom: var(--fs-space-2);
 }
-.pdt-title:hover { color: var(--color-primary-solid); }
+.pdt-title:hover { color: var(--fs-accent); }
 
 .pdt-row {
   display: flex;
@@ -205,18 +205,18 @@ watch(() => [props.projectId, props.designSystemId], run);
 }
 
 .pdt-tag.unknown {
-  background: var(--color-priority-high-bg);
-  color: var(--color-priority-high);
+  background: var(--fs-priority-high-bg);
+  color: var(--fs-priority-high);
 }
 
 .pdt-tag.local {
-  background: var(--color-priority-medium-bg);
-  color: var(--color-priority-medium);
+  background: var(--fs-priority-medium-bg);
+  color: var(--fs-priority-medium);
 }
 
 .pdt-tag.superseded {
-  background: var(--color-surface);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-tertiary);
 }
 
 .pdt-detail {
@@ -224,7 +224,7 @@ watch(() => [props.projectId, props.designSystemId], run);
   flex-wrap: wrap;
   gap: var(--fs-space-2);
   font-size: var(--fs-size-code);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   min-width: 0;
 }
 

frontend/src/components/ProjectSelector.vue

@@ -51,10 +51,10 @@ function onChange(e: Event) {
 <style scoped>
 .project-selector {
   padding: 0.4rem 0.5rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   font-family: inherit;
   width: 100%;
@@ -62,6 +62,6 @@ function onChange(e: Event) {
 }
 .project-selector:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 </style>

frontend/src/components/RecurrenceEditor.vue

@@ -153,19 +153,19 @@ const calendarDayMax = computed(() =>
 }
 .rec-label {
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   min-width: 2.5rem;
 }
 .rec-num-input {
   width: 4rem;
   padding: 0.25rem 0.4rem;
-  border: 1px solid var(--color-input-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.85rem;
   font-family: inherit;
 }
-.rec-num-input:focus { outline: none; border-color: var(--color-primary); }
+.rec-num-input:focus { outline: none; border-color: var(--fs-accent); }
 .rec-unit { min-width: 6rem; }
 </style>

frontend/src/components/SearchBar.vue

@@ -28,14 +28,14 @@ defineExpose({ focus: () => inputRef.value?.focus() });
 .search-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   font-size: 1rem;
   box-sizing: border-box;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
 }
 .search-input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/ShareDialog.vue

@@ -206,9 +206,9 @@ onMounted(async () => {
 }
 
 .share-dialog {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-xl);
   width: 480px;
   max-width: 95vw;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -220,7 +220,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .share-title {
@@ -228,7 +228,7 @@ onMounted(async () => {
   font-size: 1.1rem;
   font-weight: 700;
   margin: 0;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 
@@ -240,17 +240,17 @@ onMounted(async () => {
 
 .share-tab {
   background: none;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
   padding: 0.3rem 0.8rem;
   font-size: 0.82rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   transition: all 0.15s;
 }
 .share-tab.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
+  background: var(--fs-accent);
+  border-color: var(--fs-accent);
   color: var(--fs-text-on-action);
 }
 
@@ -269,23 +269,23 @@ onMounted(async () => {
 .share-input {
   width: 100%;
   padding: 0.45rem 0.7rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   outline: none;
   transition: border-color 0.15s;
 }
-.share-input:focus { border-color: var(--color-primary); }
+.share-input:focus { border-color: var(--fs-accent); }
 
 .user-results {
   position: absolute;
   top: 100%;
   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: 6px;
   margin-top: 2px;
   list-style: none;
@@ -304,24 +304,24 @@ onMounted(async () => {
   cursor: pointer;
   transition: background 0.1s;
 }
-.user-result-item:hover { background: var(--color-bg-secondary); }
+.user-result-item:hover { background: var(--fs-surface-raised); }
 
 .user-result-name { font-weight: 600; font-size: 0.88rem; }
-.user-result-email { color: var(--color-text-muted); font-size: 0.8rem; }
+.user-result-email { color: var(--fs-text-tertiary); font-size: 0.8rem; }
 
 .perm-select {
   padding: 0.45rem 0.5rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   cursor: pointer;
 }
 
 .btn-add-share {
   padding: 0.45rem 1rem;
-  background: var(--gradient-cta);
+  background: var(--fs-gradient-cta);
   color: var(--fs-text-on-action);
   border: none;
   border-radius: 6px;
@@ -342,7 +342,7 @@ onMounted(async () => {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.5rem;
 }
 
@@ -361,7 +361,7 @@ onMounted(async () => {
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 .share-target-icon { font-size: 1rem; flex-shrink: 0; }
@@ -369,10 +369,10 @@ onMounted(async () => {
 
 .perm-select-inline {
   padding: 0.25rem 0.4rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.8rem;
   cursor: pointer;
 }

frontend/src/components/StarterRolePicker.vue

@@ -127,7 +127,7 @@ const totalTokens = () =>
 .srp-legend {
   font-size: var(--fs-size-label);
   font-weight: var(--fs-weight-medium);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   padding: 0 var(--fs-space-2);
 }
 
@@ -135,7 +135,7 @@ const totalTokens = () =>
 .srp-note {
   margin: 0 0 var(--fs-space-3);
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: var(--fs-leading-body);
   max-width: 62ch;
 }
@@ -160,16 +160,16 @@ const totalTokens = () =>
   cursor: pointer;
   min-width: 0;
 }
-.srp-item:hover { background: var(--color-hover); }
+.srp-item:hover { background: var(--fs-surface-hover); }
 
 .srp-name {
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .srp-count {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -178,7 +178,7 @@ const totalTokens = () =>
 .srp-desc {
   grid-column: 1 / -1;
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: var(--fs-leading-body);
 }
 
@@ -196,7 +196,7 @@ const totalTokens = () =>
   align-items: center;
   gap: var(--fs-space-2);
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .srp-prefix-input {
@@ -207,6 +207,6 @@ const totalTokens = () =>
 
 .srp-total {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/StatusBadge.vue

@@ -38,20 +38,20 @@ const labels: Record<TaskStatus, string> = {
   letter-spacing: 0.025em;
 }
 .status-todo {
-  background: color-mix(in srgb, var(--color-status-todo-bg) 78%, var(--color-status-todo) 22%);
-  color: color-mix(in srgb, var(--color-status-todo) 85%, #000 15%);
+  background: color-mix(in srgb, var(--fs-status-todo-bg) 78%, var(--fs-status-todo) 22%);
+  color: color-mix(in srgb, var(--fs-status-todo) 85%, #000 15%);
 }
 .status-in_progress {
-  background: color-mix(in srgb, var(--color-status-in-progress-bg) 78%, var(--color-status-in-progress) 22%);
-  color: color-mix(in srgb, var(--color-status-in-progress) 85%, #000 15%);
+  background: color-mix(in srgb, var(--fs-status-in-progress-bg) 78%, var(--fs-status-in-progress) 22%);
+  color: color-mix(in srgb, var(--fs-status-in-progress) 85%, #000 15%);
 }
 .status-done {
-  background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
-  color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
+  background: color-mix(in srgb, var(--fs-status-done-bg) 78%, var(--fs-status-done) 22%);
+  color: color-mix(in srgb, var(--fs-status-done) 85%, #000 15%);
 }
 .status-cancelled {
-  background: color-mix(in srgb, var(--color-bg-secondary) 78%, var(--color-text-muted) 22%);
-  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--fs-surface-raised) 78%, var(--fs-text-tertiary) 22%);
+  color: var(--fs-text-tertiary);
 }
 .clickable {
   cursor: pointer;

frontend/src/components/SuggestionDropdown.vue

@@ -70,9 +70,9 @@ defineExpose({ onKeyDown });
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
   box-shadow: 0 4px 12px var(--color-shadow);
   max-height: 200px;
   overflow-y: auto;
@@ -85,6 +85,6 @@ defineExpose({ onKeyDown });
 }
 .ac-item:hover,
 .ac-item.active {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 </style>

frontend/src/components/SystemsSection.vue

@@ -253,7 +253,7 @@ async function confirmDelete() {
         <template v-else>
           <span
             class="system-swatch"
-            :style="{ background: system.color || 'var(--color-text-muted)' }"
+            :style="{ background: system.color || 'var(--fs-text-tertiary)' }"
             aria-hidden="true"
           ></span>
           <div class="system-body">
@@ -325,41 +325,41 @@ async function confirmDelete() {
 
 /* ── Open issues ──────────────────────────────────────────────── */
 .open-issues { display: flex; flex-direction: column; gap: 0.35rem; }
-.open-issues-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
+.open-issues-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-text-tertiary); }
 .issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
-.issue-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
-.issue-link:hover { background: var(--color-bg-secondary); }
-.issue-mark { color: var(--color-text-muted); flex-shrink: 0; }
-.issue-mark.imk-in_progress { color: var(--color-primary); }
+.issue-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--fs-radius-sm); text-decoration: none; color: var(--fs-text-primary); font-size: 0.85rem; }
+.issue-link:hover { background: var(--fs-surface-raised); }
+.issue-mark { color: var(--fs-text-tertiary); flex-shrink: 0; }
+.issue-mark.imk-in_progress { color: var(--fs-accent); }
 .issue-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .issue-systems { display: flex; gap: 0.25rem; flex-shrink: 0; flex-wrap: wrap; }
-.issue-sys-chip { font-size: 0.66rem; color: var(--color-text-secondary); background: var(--color-bg-secondary); border-radius: 999px; padding: 0.05rem 0.4rem; }
+.issue-sys-chip { font-size: 0.66rem; color: var(--fs-text-secondary); background: var(--fs-surface-raised); border-radius: 999px; padding: 0.05rem 0.4rem; }
 
 /* ── Toolbar ──────────────────────────────────────────────────── */
 .systems-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
 .btn-add-system {
   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-system:hover { border-color: var(--color-primary); color: var(--color-primary); }
-.btn-add-system:focus-visible { outline: none; border-color: var(--color-primary); color: var(--color-primary); }
+.btn-add-system:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
+.btn-add-system:focus-visible { outline: none; border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .archived-toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   user-select: none;
 }
-.archived-checkbox { accent-color: var(--color-primary); cursor: pointer; }
+.archived-checkbox { accent-color: var(--fs-accent); cursor: pointer; }
 
 /* ── Create / edit form ───────────────────────────────────────── */
 .system-form {
@@ -367,23 +367,23 @@ async function confirmDelete() {
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.75rem;
-  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);
 }
 .system-form--inline { padding: 0; background: none; border: none; flex: 1; }
 .system-input, .system-textarea {
   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%;
 }
-.system-input:focus, .system-textarea:focus { outline: none; border-color: var(--color-primary); }
+.system-input:focus, .system-textarea:focus { outline: none; border-color: var(--fs-accent); }
 .system-textarea { resize: vertical; }
 
 .system-form-actions { display: flex; gap: 0.4rem; }
@@ -417,9 +417,9 @@ async function confirmDelete() {
   align-items: flex-start;
   gap: 0.6rem;
   padding: 0.6rem 0.75rem;
-  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);
 }
 
 .system-card--archived { opacity: 0.6; }
@@ -433,13 +433,13 @@ async function confirmDelete() {
 }
 .system-body { flex: 1; min-width: 0; }
 .system-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
-.system-name { font-weight: 500; color: var(--color-text); word-break: break-word; }
+.system-name { font-weight: 500; color: var(--fs-text-primary); word-break: break-word; }
 .issue-badge {
   font-size: 0.7rem;
   font-weight: 500;
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent);
+  color: var(--fs-accent);
   border-radius: 999px;
   padding: 0.05rem 0.45rem;
   flex-shrink: 0;
@@ -449,15 +449,15 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-muted);
-  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  color: var(--fs-text-tertiary);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
   border-radius: 999px;
   padding: 0.05rem 0.45rem;
 }
 .system-description {
   margin: 0.25rem 0 0;
   font-size: 0.82rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: 1.4;
   word-break: break-word;
 }
@@ -472,15 +472,15 @@ async function confirmDelete() {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   width: 26px;
   height: 26px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   transition: background 0.12s, color 0.12s;
 }
-.action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
-.action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; opacity: 1; }
-.action-delete:hover { color: var(--color-danger); }
+.action-btn:hover { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
+.action-btn:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 1px; opacity: 1; }
+.action-delete:hover { color: var(--fs-error); }
 
 /* ── Empty ────────────────────────────────────────────────────── */
 .systems-empty {
@@ -490,25 +490,25 @@ async function confirmDelete() {
   gap: 0.4rem;
   padding: 2rem 1rem;
   text-align: center;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-md);
+  border: 1px dashed var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
 }
-.empty-title { margin: 0; font-weight: 500; color: var(--color-text); }
-.empty-sub { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); max-width: 32ch; }
+.empty-title { margin: 0; font-weight: 500; color: var(--fs-text-primary); }
+.empty-sub { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--fs-text-tertiary); max-width: 32ch; }
 
-.error-msg { color: var(--color-danger); font-size: 0.9rem; }
+.error-msg { color: var(--fs-error); font-size: 0.9rem; }
 
 /* ── Skeleton ─────────────────────────────────────────────────── */
 @keyframes skel-shine { to { background-position: 200% center; } }
 .systems-skeleton { display: flex; flex-direction: column; gap: 0.4rem; }
 .skel-row {
   height: 3rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   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;
@@ -518,33 +518,33 @@ async function confirmDelete() {
 /* ── 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); }
 </style>

frontend/src/components/TableOfContents.vue

@@ -60,7 +60,7 @@ function scrollTo(id: string) {
 .toc-title {
   font-size: 0.8rem;
   text-transform: uppercase;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.5rem;
   letter-spacing: 0.05em;
 }
@@ -73,11 +73,11 @@ function scrollTo(id: string) {
   margin-bottom: 0.25rem;
 }
 .toc-link {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-decoration: none;
   cursor: pointer;
 }
 .toc-link:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 </style>

frontend/src/components/TagInput.vue

@@ -154,9 +154,9 @@ function focusInput() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.35rem 0.6rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
   cursor: text;
   min-height: 2.25rem;
 }
@@ -166,9 +166,9 @@ function focusInput() {
   gap: 0.2rem;
   padding: 0.15rem 0.5rem;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  border: 1px solid var(--color-primary);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  border: 1px solid var(--fs-accent);
+  color: var(--fs-accent);
   font-size: 0.8rem;
   white-space: nowrap;
 }
@@ -195,7 +195,7 @@ function focusInput() {
   border: none;
   outline: none;
   background: transparent;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   padding: 0;
 }
@@ -205,9 +205,9 @@ function focusInput() {
   left: 0;
   min-width: 160px;
   max-width: 280px;
-  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);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   list-style: none;
   margin: 0;
@@ -218,11 +218,11 @@ function focusInput() {
   padding: 0.35rem 0.75rem;
   font-size: 0.85rem;
   cursor: pointer;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .tag-autocomplete-item:hover,
 .tag-autocomplete-item.selected {
-  background: var(--color-bg-hover);
-  color: var(--color-primary);
+  background: var(--fs-surface-hover);
+  color: var(--fs-accent);
 }
 </style>

frontend/src/components/TagPill.vue

@@ -29,8 +29,8 @@ defineEmits<{
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  background: var(--color-tag-bg);
-  color: var(--color-tag-text);
+  background: var(--fs-accent-soft);
+  color: var(--fs-accent);
   padding: 0.15rem 0.5rem;
   border-radius: 12px;
   font-size: 0.8rem;
@@ -39,13 +39,13 @@ defineEmits<{
   transition: color 0.15s, background 0.15s;
 }
 .tag-pill:hover {
-  color: var(--color-primary);
-  background: var(--color-primary-tint);
+  color: var(--fs-accent);
+  background: var(--fs-accent-soft);
 }
 .dismiss {
   background: none;
   border: none;
-  color: var(--color-tag-text);
+  color: var(--fs-accent);
   cursor: pointer;
   font-size: 0.9rem;
   line-height: 1;

frontend/src/components/TaskCard.vue

@@ -108,15 +108,15 @@ function isOverdue(): boolean {
 .task-card {
   display: block;
   padding: 1rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   text-decoration: none;
   color: inherit;
-  background: var(--color-bg-card);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
+  background: var(--fs-surface-raised);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 6%, transparent);
   transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .task-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14.0%, transparent);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 14.0%, transparent);
   transform: translateY(-2px);
 }
 
@@ -144,19 +144,19 @@ function isOverdue(): boolean {
   opacity: 0.8;
 }
 .dot-todo {
-  background: var(--color-status-todo);
-  border: 2px solid var(--color-status-todo);
+  background: var(--fs-status-todo);
+  border: 2px solid var(--fs-status-todo);
   background: transparent;
-  border: 2px solid var(--color-text-muted);
+  border: 2px solid var(--fs-text-tertiary);
 }
 .dot-in-progress {
-  background: var(--color-status-in-progress);
+  background: var(--fs-status-in-progress);
 }
 .dot-done {
-  background: var(--color-status-done);
+  background: var(--fs-status-done);
 }
 .dot-cancelled {
-  background: var(--color-status-cancelled);
+  background: var(--fs-status-cancelled);
 }
 
 .task-title-compact {
@@ -170,10 +170,10 @@ function isOverdue(): boolean {
 }
 .project-crumb {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  color: var(--fs-text-tertiary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.1rem 0.4rem;
   white-space: nowrap;
   flex-shrink: 0;
@@ -185,12 +185,12 @@ function isOverdue(): boolean {
 }
 .due-compact {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .due-compact.overdue {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-weight: 600;
 }
 /* Full layout */
@@ -211,7 +211,7 @@ function isOverdue(): boolean {
 }
 .task-preview {
   margin: 0 0 0.5rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.9rem;
   max-height: 7.5em;
   overflow: hidden;
@@ -224,15 +224,15 @@ function isOverdue(): boolean {
 }
 .due-date {
   font-size: 0.8rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .due-date.overdue {
-  color: var(--color-overdue);
+  color: var(--fs-overdue);
   font-weight: 600;
 }
 .timestamp {
   margin-left: auto;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/TaskLogSection.vue

@@ -175,9 +175,9 @@ onMounted(loadLogs);
 
 <style scoped>
 .log-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
   padding: 0.6rem 0.75rem;
   display: flex;
   flex-direction: column;
@@ -187,7 +187,7 @@ onMounted(loadLogs);
 .log-header {
   font-size: 0.8rem;
   font-weight: 600;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 0.15rem;
@@ -195,11 +195,11 @@ onMounted(loadLogs);
 
 .log-empty {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .log-entry {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 0.5rem;
 }
 
@@ -212,11 +212,11 @@ onMounted(loadLogs);
 }
 
 .log-date {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .log-duration-badge {
-  background: var(--color-primary);
+  background: var(--fs-accent);
   color: var(--fs-text-on-action);
   border-radius: 99px;
   padding: 0.1rem 0.5rem;
@@ -235,10 +235,10 @@ onMounted(loadLogs);
 .log-textarea {
   width: 100%;
   padding: 0.4rem 0.5rem;
-  border: 1px solid var(--color-input-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;
   resize: vertical;
@@ -247,7 +247,7 @@ onMounted(loadLogs);
 
 .log-textarea:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 
 .log-add-controls,
@@ -259,7 +259,7 @@ onMounted(loadLogs);
 
 .log-duration-label {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -268,16 +268,16 @@ onMounted(loadLogs);
 .log-duration-input {
   width: 5rem;
   padding: 0.3rem 0.4rem;
-  border: 1px solid var(--color-input-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;
 }
 
 .log-duration-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 
 

frontend/src/components/TiptapEditor.vue

@@ -156,7 +156,7 @@ defineExpose({ editor });
 <style scoped>
 .editor-error {
   padding: 1rem;
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-size: 0.9rem;
 }
 </style>

frontend/src/components/ToastNotification.vue

@@ -57,13 +57,13 @@ const toastStore = useToastStore();
   color: var(--fs-text-on-action);
 }
 .toast--success {
-  background: var(--color-toast-success);
+  background: var(--fs-success);
 }
 .toast--error {
-  background: var(--color-toast-error);
+  background: var(--fs-error);
 }
 .toast--warning {
-  background: var(--color-warning);
+  background: var(--fs-warning);
   color: #1a1a1a;
 }
 .toast--warning .toast-close {

frontend/src/components/TokenPreview.vue

@@ -183,22 +183,22 @@ function ruleWidth(value: string): string {
   padding: 0.2rem 0.6rem;
   font: inherit;
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   background: transparent;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: var(--fs-radius-sm);
   cursor: pointer;
 }
-.tp-mode:hover { color: var(--color-text); }
+.tp-mode:hover { color: var(--fs-text-primary); }
 .tp-mode.active {
-  color: var(--color-primary-solid);
-  border-color: var(--color-primary);
-  background: var(--color-primary-faint);
+  color: var(--fs-accent);
+  border-color: var(--fs-accent);
+  background: var(--fs-accent-faint);
 }
 
 .tp-modes-note {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .tp-group { margin-bottom: var(--fs-space-6); }
@@ -207,7 +207,7 @@ function ruleWidth(value: string): string {
   text-transform: uppercase;
   letter-spacing: var(--fs-tracking-tiny);
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 var(--fs-space-3);
   padding-bottom: var(--fs-space-2);
   border-bottom: var(--fs-border);
@@ -243,7 +243,7 @@ function ruleWidth(value: string): string {
   border-radius: var(--fs-radius-sm);
   padding: var(--fs-space-1);
   overflow: hidden;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 /* Text-bearing specimens get no box at all — a border around a value is a
@@ -272,8 +272,8 @@ function ruleWidth(value: string): string {
   background-image:
     linear-gradient(var(--tp-fill), var(--tp-fill)),
     repeating-conic-gradient(
-      var(--color-border) 0% 25%,
-      var(--color-bg-secondary) 0% 50%
+      var(--fs-border-color) 0% 25%,
+      var(--fs-surface-raised) 0% 50%
     );
   background-size: auto, 10px 10px;
 }
@@ -282,7 +282,7 @@ function ruleWidth(value: string): string {
   width: 100%;
   height: 100%;
   border-radius: calc(var(--fs-radius-sm) - 2px);
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
 }
 
 .tp-rule-wrap {
@@ -297,27 +297,27 @@ function ruleWidth(value: string): string {
   height: 0.4rem;
   min-width: 1px;
   flex: none;
-  background: var(--color-primary-solid);
+  background: var(--fs-accent);
   border-radius: 999px;
 }
 
 .tp-rule-label {
   font-family: var(--fs-font-mono);
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
 }
 
 .tp-font {
   font-size: 1.4rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   line-height: 1;
 }
 
 .tp-plain {
   font-family: var(--fs-font-mono);
   font-size: var(--fs-size-code);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -325,7 +325,7 @@ function ruleWidth(value: string): string {
 
 .tp-undecided {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-style: italic;
 }
 
@@ -346,17 +346,17 @@ function ruleWidth(value: string): string {
 
 .tp-name {
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .tp-value {
   font-family: var(--fs-font-mono);
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .tp-purpose {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/VersionHistorySection.vue

@@ -164,7 +164,7 @@ function restore() {
 
 <style scoped>
 .vh-section {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 .vh-header {
@@ -179,19 +179,19 @@ function restore() {
   font-family: inherit;
   text-align: left;
 }
-.vh-header:hover { background: var(--color-bg-secondary); }
+.vh-header:hover { background: var(--fs-surface-raised); }
 
 .vh-title {
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .vh-chevron {
   font-size: 0.7rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .vh-body {
@@ -201,20 +201,20 @@ function restore() {
 .vh-empty {
   padding: 0.5rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .vh-item {
   padding: 0.35rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-family: monospace;
   border-left: 2px solid transparent;
 }
 .vh-item:hover {
-  background: var(--color-bg-secondary);
-  border-left-color: var(--color-primary);
+  background: var(--fs-surface-raised);
+  border-left-color: var(--fs-accent);
 }
 
 .vh-diff-actions {
@@ -225,20 +225,20 @@ function restore() {
 
 .vh-btn-back {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.6rem;
   font-size: 0.78rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   font-family: inherit;
 }
-.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.vh-btn-back:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .vh-btn-restore {
-  background: var(--color-action-primary);
+  background: var(--fs-action-primary);
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.6rem;
   font-size: 0.78rem;
   color: var(--fs-text-on-action);

frontend/src/components/WordCount.vue

@@ -50,11 +50,11 @@ const label = computed(() => {
   background: none;
   border: none;
   font-size: 0.72rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   padding: 0;
   white-space: nowrap;
   flex-shrink: 0;
 }
-.word-count:hover { color: var(--color-text); }
+.word-count:hover { color: var(--fs-text-primary); }
 </style>

frontend/src/components/WorkspaceNoteEditor.vue

@@ -452,8 +452,8 @@ defineExpose({ reload: loadProjectNotes });
   flex-direction: row;
   height: 100%;
   overflow: hidden;
-  background: var(--color-surface);
-  border-left: 1px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border-left: 1px solid var(--fs-border-color);
 }
 
 /* ── Left rail ── */
@@ -463,7 +463,7 @@ defineExpose({ reload: loadProjectNotes });
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
 }
 
 .rail-header {
@@ -471,12 +471,12 @@ defineExpose({ reload: loadProjectNotes });
   align-items: center;
   gap: 0.3rem;
   padding: 0.5rem 0.6rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
 .rail-title {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.72rem;
@@ -490,7 +490,7 @@ defineExpose({ reload: loadProjectNotes });
   background: transparent;
   border: none;
   font-size: 0.78rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   min-width: 0;
   padding: 0;
 }
@@ -503,7 +503,7 @@ defineExpose({ reload: loadProjectNotes });
 .rail-state {
   padding: 1rem 0.65rem;
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* Note list */
@@ -519,16 +519,16 @@ defineExpose({ reload: loadProjectNotes });
   display: flex;
   flex-direction: column;
   padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 60%, transparent);
   cursor: pointer;
   gap: 0.15rem;
   border-right: 2px solid transparent;
   transition: background 0.12s;
 }
-.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
+.note-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
 .note-row.active {
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
-  border-right-color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover));
+  border-right-color: var(--fs-accent);
 }
 
 .note-row-main {
@@ -544,12 +544,12 @@ defineExpose({ reload: loadProjectNotes });
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .note-row-age {
   font-size: 0.62rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -562,8 +562,8 @@ defineExpose({ reload: loadProjectNotes });
 
 .note-tag-pill {
   font-size: 0.58rem;
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 10%, transparent);
   border-radius: 999px;
   padding: 0 0.3rem;
   white-space: nowrap;
@@ -572,13 +572,13 @@ defineExpose({ reload: loadProjectNotes });
   max-width: 5rem;
 }
 .note-tag-pill.tag-match {
-  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
-  outline: 1px solid var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
+  outline: 1px solid var(--fs-accent);
 }
 
 .note-tag-more {
   font-size: 0.58rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
 }
 
@@ -606,8 +606,8 @@ defineExpose({ reload: loadProjectNotes });
   margin-left: auto;
 }
 
-.unsaved { font-size: 0.72rem; color: var(--color-text-muted); }
-.saving-txt { font-size: 0.72rem; color: var(--color-primary); }
+.unsaved { font-size: 0.72rem; color: var(--fs-text-tertiary); }
+.saving-txt { font-size: 0.72rem; color: var(--fs-accent); }
 
 /* Moss action-primary per Hybrid */
 
@@ -618,14 +618,14 @@ defineExpose({ reload: loadProjectNotes });
   font-size: 1.4rem;
   font-weight: 500;
   line-height: 1.25;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   padding: 0;
   font-family: 'Fraunces', serif;
   letter-spacing: -0.01em;
 }
 .note-title-input:focus { outline: none; }
 .note-title-input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .tag-row {
@@ -645,25 +645,25 @@ defineExpose({ reload: loadProjectNotes });
   align-items: center;
   gap: 0.3rem;
   padding: 0.35rem 0.6rem;
-  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
+  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
   flex-shrink: 0;
 }
-.tag-suggestions-label { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; }
+.tag-suggestions-label { font-size: 0.72rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
 
 .btn-tag-suggestion {
   background: none;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0.15rem 0.55rem;
   font-size: 0.75rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
 }
-.btn-tag-suggestion:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-tag-suggestion:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 .btn-tag-suggestion.applied {
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 
@@ -673,12 +673,12 @@ defineExpose({ reload: loadProjectNotes });
   flex-wrap: wrap;
   gap: 0.25rem;
   padding: 0.3rem 0.6rem;
-  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
+  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
   flex-shrink: 0;
 }
 .link-suggest-label {
   font-size: 0.7rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
   font-weight: 500;
   text-transform: uppercase;
@@ -688,15 +688,15 @@ defineExpose({ reload: loadProjectNotes });
 
 .btn-chip-link {
   background: none;
-  border: 1px solid var(--color-primary);
+  border: 1px solid var(--fs-accent);
   border-radius: 999px;
   padding: 0.1rem 0.45rem;
   font-size: 0.7rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   cursor: pointer;
   font-family: monospace;
   white-space: nowrap;
 }
-.btn-chip-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+.btn-chip-link:hover { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }
 
 </style>

frontend/src/components/WorkspaceTaskPanel.vue

@@ -344,8 +344,8 @@ defineExpose({ reload: loadAll });
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border-right: 1px solid var(--fs-border-color);
 }
 
 /* ── List view ── */
@@ -360,17 +360,17 @@ defineExpose({ reload: loadAll });
   flex: 0 0 44%;
 }
 .task-active {
-  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) !important;
+  background: color-mix(in srgb, var(--fs-accent) 6%, var(--fs-surface-hover)) !important;
 }
 
 .panel-header {
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
 .panel-title {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.75rem;
@@ -381,20 +381,20 @@ defineExpose({ reload: loadAll });
   display: flex;
   gap: 0.4rem;
   padding: 0.45rem 0.6rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
 .task-add-input {
   flex: 1;
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
   border-radius: 5px;
   padding: 0.28rem 0.5rem;
   font-size: 0.83rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
-.task-add-input:focus { outline: none; border-color: var(--color-primary); }
+.task-add-input:focus { outline: none; border-color: var(--fs-accent); }
 
 .btn-add { font-size: 1rem; }   /* a '+' glyph, not a label */
 
@@ -404,7 +404,7 @@ defineExpose({ reload: loadAll });
 }
 
 .ms-group {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .ms-group-header {
@@ -413,18 +413,18 @@ defineExpose({ reload: loadAll });
   gap: 0.4rem;
   width: 100%;
   padding: 0.4rem 0.65rem;
-  background: var(--color-surface-raised);
+  background: var(--fs-surface-raised);
   border: none;
   cursor: pointer;
   text-align: left;
   font-size: 0.8rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
-.ms-group-header:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
+.ms-group-header:hover { background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover)); }
 
-.ms-chevron { font-size: 0.6rem; color: var(--color-text-muted); width: 0.8rem; }
+.ms-chevron { font-size: 0.6rem; color: var(--fs-text-tertiary); width: 0.8rem; }
 .ms-name { flex: 1; font-weight: 500; font-size: 0.8rem; }
-.ms-count { font-size: 0.72rem; color: var(--color-text-muted); background: var(--color-bg); border-radius: 10px; padding: 0 0.4rem; }
+.ms-count { font-size: 0.72rem; color: var(--fs-text-tertiary); background: var(--fs-surface-page); border-radius: 10px; padding: 0 0.4rem; }
 
 .ms-status {
   font-size: 0.68rem;
@@ -432,8 +432,8 @@ defineExpose({ reload: loadAll });
   border-radius: 10px;
   text-transform: capitalize;
 }
-.ms-status-active { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
-.ms-status-completed { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
+.ms-status-active { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: var(--fs-accent); }
+.ms-status-completed { background: color-mix(in srgb, var(--fs-success) 15%, transparent); color: var(--fs-success); }
 
 .task-items {
   list-style: none;
@@ -447,9 +447,9 @@ defineExpose({ reload: loadAll });
   gap: 0.4rem;
   padding: 0.35rem 0.65rem 0.35rem 1.4rem;
   cursor: pointer;
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 50%, transparent);
 }
-.task-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
+.task-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
 .task-row:last-child { border-bottom: none; }
 
 .status-dot {
@@ -457,7 +457,7 @@ defineExpose({ reload: loadAll });
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 50%;
-  border: 1.5px solid var(--color-border);
+  border: 1.5px solid var(--fs-border-color);
   background: none;
   cursor: pointer;
   font-size: 0.62rem;
@@ -465,8 +465,8 @@ defineExpose({ reload: loadAll });
   align-items: center;
   justify-content: center;
 }
-.status-dot.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); }
-.status-dot.status-done { border-color: var(--color-success); color: var(--color-success); }
+.status-dot.status-in_progress { border-color: var(--fs-accent); color: var(--fs-accent); }
+.status-dot.status-done { border-color: var(--fs-success); color: var(--fs-success); }
 
 .task-title {
   flex: 1;
@@ -474,20 +474,20 @@ defineExpose({ reload: loadAll });
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
-.task-title.done { text-decoration: line-through; color: var(--color-text-muted); }
+.task-title.done { text-decoration: line-through; color: var(--fs-text-tertiary); }
 
 .task-age {
   font-size: 0.68rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
-.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--color-text-muted); }
+.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--fs-text-tertiary); }
 
-.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
+.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--fs-text-tertiary); }
 
 /* ── Detail pane (bottom split) ── */
 .task-detail {
@@ -496,8 +496,8 @@ defineExpose({ reload: loadAll });
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--color-surface);
-  border-top: 2px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border-top: 2px solid var(--fs-border-color);
 }
 
 .detail-header {
@@ -505,7 +505,7 @@ defineExpose({ reload: loadAll });
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
@@ -515,21 +515,21 @@ defineExpose({ reload: loadAll });
   font-size: 0.75rem;
   font-weight: 500;
   cursor: pointer;
-  border: 1.5px solid var(--color-border);
+  border: 1.5px solid var(--fs-border-color);
   background: none;
   text-transform: capitalize;
   user-select: none;
   margin-left: auto;
 }
-.status-badge.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
-.status-badge.status-done { border-color: var(--color-success); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
+.status-badge.status-in_progress { border-color: var(--fs-accent); color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 10%, transparent); }
+.status-badge.status-done { border-color: var(--fs-success); color: var(--fs-success); background: color-mix(in srgb, var(--fs-success) 10%, transparent); }
 
 .btn-edit-task { margin-left: 0.25rem; }
 .btn-edit-task:hover { text-decoration: underline; }
 
 .detail-body {
   padding: 0.5rem 0.75rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
   max-height: 40%;
   overflow-y: auto;
@@ -537,17 +537,17 @@ defineExpose({ reload: loadAll });
 
 .body-loading {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .detail-body .prose {
   font-size: 0.83rem;
   line-height: 1.5;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .btn-delete-task { margin-left: 0.25rem; }
-.btn-delete-task:hover { color: var(--color-action-destructive); }
+.btn-delete-task:hover { color: var(--fs-action-destructive); }
 
 .btn-delete-confirm { margin-left: 0.25rem; }
 
@@ -563,9 +563,9 @@ defineExpose({ reload: loadAll });
   font-size: 0.72rem;
   padding: 0.15rem 0.5rem;
   border-radius: 10px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-tertiary);
   text-transform: capitalize;
 }
 
@@ -573,20 +573,20 @@ defineExpose({ reload: loadAll });
   font-size: 0.72rem;
   padding: 0.15rem 0.4rem;
   border-radius: 10px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   max-width: 140px;
 }
 .milestone-select:disabled { opacity: 0.5; cursor: default; }
-.milestone-select:focus { outline: none; border-color: var(--color-primary); }
+.milestone-select:focus { outline: none; border-color: var(--fs-accent); }
 
 .detail-log {
   flex: 1;
   overflow-y: auto;
   padding: 0 0.6rem 0.6rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 /* Detail fade transition */
@@ -609,12 +609,12 @@ defineExpose({ reload: loadAll });
 /* Due date on task rows */
 .task-due {
   font-size: 0.65rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .task-due.overdue {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-weight: 500;
 }
 

frontend/src/components/rules/PlanRulesPanel.vue

@@ -46,7 +46,7 @@ watch(() => props.projectId, load);
 <style scoped>
 .plan-rules {
   margin-top: 1.5rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1rem;
 }
 .plan-rules h3 {
@@ -66,7 +66,7 @@ watch(() => props.projectId, load);
 }
 .plan-rules ul {
   list-style: none; padding-left: 0.75rem; margin: 0.25rem 0;
-  border-left: 2px solid var(--color-primary);
+  border-left: 2px solid var(--fs-accent);
 }
 .plan-rules li { margin: 0.35rem 0; font-size: 0.92em; }
 .truncated { opacity: 0.7; font-style: italic; font-size: 0.85em; }

frontend/src/components/rules/ProjectRulesTab.vue

@@ -329,7 +329,7 @@ h3 {
 .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
 .chip {
   display: inline-flex; align-items: center; gap: 0.25rem;
-  background: var(--color-primary-bg);
+  background: var(--fs-accent-soft);
   padding: 0.25rem 0.5rem; border-radius: 999px;
 }
 .chip a { cursor: pointer; }
@@ -337,13 +337,13 @@ h3 {
 .chip-remove:hover { opacity: 1; }
 .add {
   background: none;
-  border: 1px dashed var(--color-border);
+  border: 1px dashed var(--fs-border-color);
   padding: 0.25rem 0.75rem; border-radius: 999px; cursor: pointer;
   color: inherit;
 }
 select {
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.25rem 0.5rem;
 }
 .applicable { margin-top: 2rem; }
@@ -359,7 +359,7 @@ select {
 }
 ul { list-style: none; padding: 0; margin: 0; }
 .rule {
-  border-left: 2px solid var(--color-primary);
+  border-left: 2px solid var(--fs-accent);
   padding-left: 0.75rem; margin: 0.5rem 0;
 }
 .rule-head { cursor: pointer; }
@@ -367,12 +367,12 @@ ul { list-style: none; padding: 0; margin: 0; }
 .rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; }
 .rule-detail {
   margin-top: 0.5rem; padding: 0.5rem;
-  background: var(--color-bg); border-radius: 6px;
+  background: var(--fs-surface-page); border-radius: 6px;
 }
 .rule-detail > div { margin-bottom: 0.5rem; }
 .edit-link {
   background: none; border: none; cursor: pointer;
-  color: var(--color-primary); padding: 0.5rem 0 0 0;
+  color: var(--fs-accent); padding: 0.5rem 0 0 0;
 }
 .empty, .truncated { opacity: 0.7; font-style: italic; }
 .empty a { cursor: pointer; text-decoration: underline; }
@@ -381,18 +381,18 @@ ul { list-style: none; padding: 0; margin: 0; }
 .new-rule-form {
   display: flex; flex-direction: column; gap: 0.5rem;
   padding: 0.75rem; margin: 0.5rem 0;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
 }
 .new-rule-form input, .new-rule-form textarea {
-  background: var(--color-surface); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-hover); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem; font: inherit; resize: vertical;
 }
 .rule-list { margin-top: 0.5rem; }
 .delete-link {
   background: none; border: none; cursor: pointer;
-  color: var(--color-destructive); padding: 0.5rem 0 0 0;
+  color: var(--fs-destructive); padding: 0.5rem 0 0 0;
 }
 /* Per-rule / per-topic suppress affordance — quiet by default, reveal on hover */
 .topic-group h5 {
@@ -404,14 +404,14 @@ ul { list-style: none; padding: 0; margin: 0; }
 .rule-head-text { flex: 1; cursor: pointer; }
 .skip-btn {
   background: none; border: none; cursor: pointer;
-  color: var(--color-muted); font-size: 0.75rem;
+  color: var(--fs-text-tertiary); font-size: 0.75rem;
   padding: 0.1rem 0.4rem; opacity: 0; transition: opacity 0.15s;
   white-space: nowrap;
 }
 .topic-group h5:hover .skip-btn,
 .rule:hover .skip-btn,
 .skip-btn:focus { opacity: 1; }
-.skip-btn:hover { color: var(--color-destructive); }
+.skip-btn:hover { color: var(--fs-destructive); }
 /* Suppressed section */
 .suppressed { margin-top: 1.5rem; }
 .suppressed-toggle {
@@ -430,13 +430,13 @@ ul { list-style: none; padding: 0; margin: 0; }
 .suppressed-kind {
   font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em;
   padding: 0.1rem 0.4rem; border-radius: 3px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
 }
 .suppressed-path { flex: 1; }
 .reenable-btn {
   background: none; border: none; cursor: pointer;
-  color: var(--color-primary); font-size: 0.85em;
+  color: var(--fs-accent); font-size: 0.85em;
 }
 .reenable-btn:hover { text-decoration: underline; }
 </style>

frontend/src/components/rules/RuleEditorSlideOver.vue

@@ -98,8 +98,8 @@ watch(() => props.ruleId, load);
 .slide-over {
   position: fixed; top: 0; right: 0; bottom: 0;
   width: min(520px, 90vw);
-  background: var(--color-surface);
-  border-left: 2px solid var(--color-primary);
+  background: var(--fs-surface-hover);
+  border-left: 2px solid var(--fs-accent);
   padding: 1.5rem;
   overflow-y: auto;
   box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
@@ -110,11 +110,11 @@ header h2 {
   font-family: Fraunces, serif; font-style: italic;
 }
 label { display: block; margin-bottom: 1rem; }
-.required { color: var(--color-primary); }
+.required { color: var(--fs-accent); }
 input, textarea {
   width: 100%; margin-top: 0.25rem;
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem; font: inherit;
   font-family: inherit;
 }

frontend/src/components/rules/RuleListPane.vue

@@ -22,18 +22,18 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
+.pane { background: var(--fs-surface-hover); padding: 1rem; overflow-y: auto; }
 header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
 ul { list-style: none; padding: 0; margin: 1rem 0; }
 li {
   padding: 0.75rem;
   cursor: pointer;
   border-radius: 6px;
-  border-left: 2px solid var(--color-primary);
+  border-left: 2px solid var(--fs-accent);
   margin-bottom: 0.5rem;
   background: rgba(255, 255, 255, 0.02);
 }
-li:hover { background: var(--color-hover); }
+li:hover { background: var(--fs-surface-hover); }
 .title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; }
 .statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; }
 .new-rule { cursor: pointer; }

frontend/src/components/rules/RulebookDetailPane.vue

@@ -122,7 +122,7 @@ watch(() => props.rulebookId, () => {/* re-render of isSubscribed from existing
 </template>
 
 <style scoped>
-.pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
+.pane { background: var(--fs-surface-hover); padding: 1rem; overflow-y: auto; }
 header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
 header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
 .always-on-toggle {
@@ -133,8 +133,8 @@ header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem
 .always-on-toggle input { cursor: pointer; }
 ul { list-style: none; padding: 0; margin: 1rem 0; }
 li { padding: 0.5rem; cursor: pointer; border-radius: 6px; }
-li.active { background: var(--color-primary-bg); }
-li:hover { background: var(--color-hover); }
+li.active { background: var(--fs-accent-soft); }
+li:hover { background: var(--fs-surface-hover); }
 /* `.new-topic` and `.sub-list` are deliberately bare (#2444). The first wraps a
    button-or-form whose children style themselves; the second is a `<ul>`, and
    the bare `ul` rule above already gives it list-style, padding and margin —
@@ -142,14 +142,14 @@ li:hover { background: var(--color-hover); }
    selector. Both namespace descendant rules and assume nothing about layout. */
 .new-topic input {
   width: 100%; margin-bottom: 0.5rem;
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem;
 }
 .form-buttons { display: flex; gap: 0.5rem; }
 .subscriptions {
   margin-top: 2rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1rem;
 }
 .subscriptions h3 { font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }

frontend/src/components/rules/RulebookListPane.vue

@@ -48,27 +48,27 @@ async function submitNew() {
 </template>
 
 <style scoped>
-.pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
+.pane { background: var(--fs-surface-hover); padding: 1rem; overflow-y: auto; }
 header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
 ul { list-style: none; padding: 0; margin: 1rem 0; }
 li { padding: 0.5rem; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 0.5rem; }
-li.active { background: var(--color-primary-bg); }
-li:hover { background: var(--color-hover); }
+li.active { background: var(--fs-accent-soft); }
+li:hover { background: var(--fs-surface-hover); }
 .always-on-badge {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.1rem 0.4rem;
   border-radius: 3px;
-  background: var(--color-accent);
-  color: var(--color-accent-fg);
+  background: var(--fs-accent);
+  color: var(--fs-text-on-action);
   margin-left: auto;
 }
 .new-rulebook { margin-top: 1rem; }
 .new-rulebook input {
   width: 100%; margin-bottom: 0.5rem;
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem;
 }
 .form-buttons { display: flex; gap: 0.5rem; }