feat(FN-1033): replace hardcoded colors with CSS custom properties in mission UI

- Add CSS custom properties for mission, slice, feature, and autopilot color tokens in styles.css
- Replace inline icon colors with CSS variables in MissionInterviewModal
- Replace hardcoded colors with CSS variables in MissionManager
- Add changeset for theme color tokens patch

.changeset/fn-1033-theme-color-tokens.md

@@ -0,0 +1,5 @@
+---
+"@gsxdsm/fusion": patch
+---
+
+Replace hardcoded status colors with theme-aware CSS custom properties in MissionManager and MissionInterviewModal components.

packages/dashboard/app/components/MissionInterviewModal.tsx

@@ -854,7 +854,7 @@ function MissionPlanReview({
                     ) : (
                       <ChevronRight size={16} style={{ color: "var(--text-secondary)", flexShrink: 0 }} />
                     )}
-                    <Layers size={16} style={{ color: "#eab308", flexShrink: 0 }} />
+                    <Layers size={16} style={{ color: "var(--icon-milestone)", flexShrink: 0 }} />
                     <input
                       type="text"
                       className="form-input"
@@ -931,7 +931,7 @@ function MissionPlanReview({
                               ) : (
                                 <ChevronRight size={14} style={{ color: "var(--text-secondary)", flexShrink: 0 }} />
                               )}
-                              <Package size={14} style={{ color: "#22c55e", flexShrink: 0 }} />
+                              <Package size={14} style={{ color: "var(--icon-slice)", flexShrink: 0 }} />
                               <input
                                 type="text"
                                 className="form-input"
@@ -986,7 +986,7 @@ function MissionPlanReview({
                                           : "none",
                                     }}
                                   >
-                                    <Box size={12} style={{ color: "#3b82f6", marginTop: "4px", flexShrink: 0 }} />
+                                    <Box size={12} style={{ color: "var(--icon-feature)", marginTop: "4px", flexShrink: 0 }} />
                                     <div style={{ flex: 1, minWidth: 0 }}>
                                       <input
                                         type="text"

packages/dashboard/app/components/MissionManager.tsx

@@ -83,38 +83,38 @@ interface MissionManagerProps {
 
 // Status badge colors — use CSS custom-property-compatible tokens
 const missionStatusColors: Record<MissionStatus, { bg: string; text: string }> = {
-  planning: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
+  planning: { bg: "var(--mission-planning-bg)", text: "var(--mission-planning-text)" },
-  active: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
+  active: { bg: "var(--mission-active-bg)", text: "var(--mission-active-text)" },
-  blocked: { bg: "rgba(239, 68, 68, 0.15)", text: "#ef4444" },
+  blocked: { bg: "var(--mission-blocked-bg)", text: "var(--mission-blocked-text)" },
-  complete: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
+  complete: { bg: "var(--mission-complete-bg)", text: "var(--mission-complete-text)" },
-  archived: { bg: "var(--bg-tertiary)", text: "var(--text-secondary)" },
+  archived: { bg: "var(--mission-archived-bg)", text: "var(--mission-archived-text)" },
 };
 
 const milestoneStatusColors: Record<MilestoneStatus, { bg: string; text: string }> = {
-  planning: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
+  planning: { bg: "var(--mission-planning-bg)", text: "var(--mission-planning-text)" },
-  active: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
+  active: { bg: "var(--mission-active-bg)", text: "var(--mission-active-text)" },
-  blocked: { bg: "rgba(239, 68, 68, 0.15)", text: "#ef4444" },
+  blocked: { bg: "var(--mission-blocked-bg)", text: "var(--mission-blocked-text)" },
-  complete: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
+  complete: { bg: "var(--mission-complete-bg)", text: "var(--mission-complete-text)" },
 };
 
 const sliceStatusColors: Record<SliceStatus, { bg: string; text: string }> = {
-  pending: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
+  pending: { bg: "var(--slice-pending-bg)", text: "var(--slice-pending-text)" },
-  active: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
+  active: { bg: "var(--slice-active-bg)", text: "var(--slice-active-text)" },
-  complete: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
+  complete: { bg: "var(--slice-complete-bg)", text: "var(--slice-complete-text)" },
 };
 
 const featureStatusColors: Record<FeatureStatus, { bg: string; text: string }> = {
-  defined: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
+  defined: { bg: "var(--feature-defined-bg)", text: "var(--feature-defined-text)" },
-  triaged: { bg: "rgba(168, 85, 247, 0.15)", text: "#a855f7" },
+  triaged: { bg: "var(--feature-triaged-bg)", text: "var(--feature-triaged-text)" },
-  "in-progress": { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
+  "in-progress": { bg: "var(--feature-in-progress-bg)", text: "var(--feature-in-progress-text)" },
-  done: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
+  done: { bg: "var(--feature-done-bg)", text: "var(--feature-done-text)" },
 };
 
 const autopilotStateColors: Record<AutopilotState, { bg: string; text: string }> = {
-  inactive: { bg: "rgba(148, 163, 184, 0.15)", text: "#94a3b8" },
+  inactive: { bg: "var(--autopilot-inactive-bg)", text: "var(--autopilot-inactive-text)" },
-  watching: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
+  watching: { bg: "var(--autopilot-watching-bg)", text: "var(--autopilot-watching-text)" },
-  activating: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
+  activating: { bg: "var(--autopilot-activating-bg)", text: "var(--autopilot-activating-text)" },
-  completing: { bg: "rgba(168, 85, 247, 0.15)", text: "#a855f7" },
+  completing: { bg: "var(--autopilot-completing-bg)", text: "var(--autopilot-completing-text)" },
 };
 
 // Form types

packages/dashboard/app/styles.css

@@ -153,6 +153,51 @@
   --state-error-bg: rgba(248, 81, 73, 0.15);
   --state-error-text: #f85149;
   --state-error-border: #f85149;
+
+  /* === Mission & Milestone Status Colors === */
+  --mission-planning-bg: color-mix(in srgb, var(--triage) 15%, transparent);
+  --mission-planning-text: var(--triage);
+  --mission-active-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
+  --mission-active-text: var(--in-review);
+  --mission-blocked-bg: color-mix(in srgb, var(--color-error) 15%, transparent);
+  --mission-blocked-text: var(--color-error);
+  --mission-complete-bg: color-mix(in srgb, #3b82f6 15%, transparent);
+  --mission-complete-text: #3b82f6;
+  --mission-archived-bg: var(--bg-tertiary);
+  --mission-archived-text: var(--text-secondary);
+
+  /* === Slice Status Colors === */
+  --slice-pending-bg: color-mix(in srgb, var(--triage) 15%, transparent);
+  --slice-pending-text: var(--triage);
+  --slice-active-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
+  --slice-active-text: var(--in-review);
+  --slice-complete-bg: color-mix(in srgb, #3b82f6 15%, transparent);
+  --slice-complete-text: #3b82f6;
+
+  /* === Feature (Task) Status Colors === */
+  --feature-defined-bg: color-mix(in srgb, var(--triage) 15%, transparent);
+  --feature-defined-text: var(--triage);
+  --feature-triaged-bg: color-mix(in srgb, #a855f7 15%, transparent);
+  --feature-triaged-text: #a855f7;
+  --feature-in-progress-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
+  --feature-in-progress-text: var(--in-review);
+  --feature-done-bg: color-mix(in srgb, #3b82f6 15%, transparent);
+  --feature-done-text: #3b82f6;
+
+  /* === Autopilot State Colors === */
+  --autopilot-inactive-bg: color-mix(in srgb, #94a3b8 15%, transparent);
+  --autopilot-inactive-text: #94a3b8;
+  --autopilot-watching-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
+  --autopilot-watching-text: var(--in-review);
+  --autopilot-activating-bg: color-mix(in srgb, #3b82f6 15%, transparent);
+  --autopilot-activating-text: #3b82f6;
+  --autopilot-completing-bg: color-mix(in srgb, #a855f7 15%, transparent);
+  --autopilot-completing-text: #a855f7;
+
+  /* === Interview Modal Icon Colors === */
+  --icon-milestone: var(--triage);
+  --icon-slice: var(--in-review);
+  --icon-feature: #3b82f6;
 }
 
 html,