FN-6609: fix command center CSS token hygiene

Command Center styles now rely on canonical muted text and shadow tokens.

- Replace deprecated --text-secondary usages in command center styles with --text-muted.
- Remove the raw rgba fallback from the date range popover shadow token.
- Document the command-center styling token requirements with FNXC comments.

Files changed:
 .../app/components/command-center/CommandCenter.css   | 13 +++++++++----
 .../app/components/command-center/DateRangePicker.css |  8 ++++++--
 .../components/command-center/MissionControlPanel.css | 11 ++++++++---
 .../app/components/command-center/areas/areas.css     | 19 ++++++++++++-------
 .../app/components/command-center/charts/charts.css   | 11 ++++++++---
 5 files changed, 43 insertions(+), 19 deletions(-)

Fusion-Task-Id: FN-6609
Fusion-Task-Lineage: 8a02f4a3-a881-4db6-893e-363b74cbfba8

packages/dashboard/app/components/command-center/CommandCenter.css

@@ -1,3 +1,8 @@
+/*
+FNXC:CommandCenterStyling 2026-06-17-18:46:
+The FN-4286 dashboard text-token guard requires command-center secondary copy to use --text-muted, not the deprecated secondary text token or raw color fallbacks.
+*/
+
 /* Command Center shell.
  * Animation durations use --duration-* tokens only (never --transition-*).
  */
@@ -46,7 +51,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden .
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
   cursor: pointer;
   font-size: var(--font-size-sm, 0.85rem);
@@ -99,7 +104,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden .
 
 .cc-stat-label {
   font-size: var(--font-size-sm, 0.85rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 .cc-stat-value {
@@ -124,7 +129,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden .
 }
 
 .cc-live-strip-placeholder {
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 /* ---- States ---- */
@@ -137,7 +142,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden .
   justify-content: center;
   gap: var(--space-2, 0.5rem);
   padding: var(--space-6, 2rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   text-align: center;
 }
 

packages/dashboard/app/components/command-center/DateRangePicker.css

@@ -9,6 +9,10 @@
   gap: var(--space-1, 0.25rem);
 }
 
+/*
+FNXC:CommandCenterStyling 2026-06-17-18:44:
+The FN-4286 text-token and component-css hygiene guards require canonical dashboard tokens here: use --shadow-md without a raw rgba fallback and --text-muted instead of the deprecated secondary text token.
+*/
 .cc-date-range-popover {
   position: absolute;
   top: calc(100% + var(--space-1, 0.25rem));
@@ -19,7 +23,7 @@
   background: var(--surface-1, #1c1c1c);
   border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.25));
   border-radius: var(--radius-md, 8px);
-  box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, 0.35));
+  box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
   gap: var(--space-3, 0.75rem);
@@ -43,7 +47,7 @@
   justify-content: space-between;
   gap: var(--space-2, 0.5rem);
   font-size: var(--font-size-sm, 0.85rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 .cc-date-range-field input {

packages/dashboard/app/components/command-center/MissionControlPanel.css

@@ -1,3 +1,8 @@
+/*
+FNXC:CommandCenterStyling 2026-06-17-18:46:
+Mission-control muted labels and inactive badges use --text-muted so the live panel follows the canonical command-center text-token contract.
+*/
+
 /*
  * Mission-Control live panel (U6b). Component-local styles.
  * Animation durations use --duration-* tokens only (never --transition-*).
@@ -23,7 +28,7 @@
 }
 
 .cc-mc-muted {
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   font-size: 0.85rem;
   margin: 0;
 }
@@ -82,13 +87,13 @@
 
 .cc-mc-badge.inactive {
   background: var(--surface-2, rgba(255, 255, 255, 0.06));
-  color: var(--text-secondary, #999);
+  color: var(--text-muted);
 }
 
 .cc-mc-task,
 .cc-mc-node-count {
   font-size: 0.75rem;
-  color: var(--text-secondary, #999);
+  color: var(--text-muted);
 }
 
 @media (max-width: 768px), (max-height: 480px) {

packages/dashboard/app/components/command-center/areas/areas.css

@@ -1,3 +1,8 @@
+/*
+FNXC:CommandCenterStyling 2026-06-17-18:46:
+Area headings, table metadata, and empty states use --text-muted so the analytics surfaces satisfy the canonical text-token guard without raw color fallbacks.
+*/
+
 /* Command Center historical analytics areas (U5).
  * Animation durations use --duration-* tokens only (never --transition-*).
  */
@@ -18,7 +23,7 @@
   margin: 0;
   font-size: var(--font-size-sm, 0.85rem);
   font-weight: 600;
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -32,7 +37,7 @@
 
 .cc-stat-sub {
   font-size: var(--font-size-xs, 0.75rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 /* ---- Tables ---- */
@@ -61,7 +66,7 @@
 }
 
 .cc-table thead th {
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   font-weight: 600;
 }
 
@@ -94,7 +99,7 @@
 
 /* Unavailable sentinel ("—") with a help cursor for its tooltip. */
 .cc-unavailable {
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   cursor: help;
   border-bottom: 1px dotted var(--border-subtle, rgba(127, 127, 127, 0.4));
 }
@@ -104,7 +109,7 @@
   align-items: center;
   gap: var(--space-2, 0.5rem);
   padding: var(--space-4, 1rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 .cc-area-empty,
@@ -114,7 +119,7 @@
   align-items: center;
   gap: var(--space-2, 0.5rem);
   padding: var(--space-6, 2rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   text-align: center;
 }
 
@@ -124,5 +129,5 @@
 
 .cc-pricing-note {
   font-size: var(--font-size-xs, 0.75rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }

packages/dashboard/app/components/command-center/charts/charts.css

@@ -1,3 +1,8 @@
+/*
+FNXC:CommandCenterStyling 2026-06-17-18:46:
+Chart labels and legends must use --text-muted so command-center CSS stays aligned with the FN-4286 canonical text-token guard and avoids raw color fallbacks.
+*/
+
 /* Command Center hand-rolled CSS-bar chart primitives.
  *
  * Animation durations MUST use --duration-* tokens (bare durations).
@@ -24,7 +29,7 @@
 
 .cc-bar-label {
   font-size: var(--font-size-sm, 0.85rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -86,7 +91,7 @@
   align-items: center;
   gap: var(--space-1, 0.25rem);
   font-size: var(--font-size-sm, 0.85rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 .cc-stacked-swatch {
@@ -133,7 +138,7 @@
   display: flex;
   justify-content: space-between;
   font-size: var(--font-size-sm, 0.85rem);
-  color: var(--text-secondary, #888);
+  color: var(--text-muted);
 }
 
 .cc-funnel-conversion {