FN-6703: tokenise mobile mailbox tab font size

Tokenise the mobile mailbox tab font size while defining the shared xs dashboard token.

- Replace both mobile mailbox modal and mailbox view tab font sizes with var(--font-size-xs, 0.8rem).
- Define --font-size-xs in the dashboard typography token set.
- Document the FN-6703 styling contract with FNXC comments.

Files changed:
 packages/dashboard/app/components/MailboxModal.css | 5 +++--
 packages/dashboard/app/styles.css                  | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-6703
Fusion-Task-Lineage: af2073bd-fdde-497e-896a-ce9906459c6a

packages/dashboard/app/components/MailboxModal.css

@@ -786,10 +786,11 @@
     display: none;
   }
 
+  /* FNXC:DashboardStyling 2026-06-19-05:50: FN-6703 requires both mobile mailbox tab presentations to use var(--font-size-xs, 0.8rem) so the regression test and token-validity guard share the same contract. */
   .mailbox-modal .mailbox-tab {
     flex-shrink: 0;
     padding: var(--space-sm) var(--space-md);
-    font-size: 0.8rem;
+    font-size: var(--font-size-xs, 0.8rem);
   }
 
   .mailbox-modal .mailbox-content {
@@ -881,7 +882,7 @@
   .mailbox-view .mailbox-tab {
     flex-shrink: 0;
     padding: var(--space-sm) var(--space-md);
-    font-size: 0.8rem;
+    font-size: var(--font-size-xs, 0.8rem);
   }
 
   .mailbox-view .mailbox-content {

packages/dashboard/app/styles.css

@@ -120,6 +120,7 @@ html {
   /* Typography */
   --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --font-mono: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* FNXC:DashboardStyling 2026-06-19-05:50: FN-6703 defines the xs font-size token so tokenized mobile mailbox tabs satisfy the dashboard CSS token-validity guard without relying on an undefined fallback. */
   --font-size-xs: 0.8rem;
 
   /* Spacing Scale */
@@ -668,7 +669,7 @@ html .column.drag-over * {
  * Runtime provider settings card — unified layout used by Hermes / OpenClaw /
  * Paperclip cards. Header (large logo + name + status), description, form,
  * footer action row.
- * FNXC:DashboardCssTokens 2026-06-19-05:07: Most font-size values remain intentionally raw; --font-size-xs exists for mobile tab-size reuse where token validity tests require a defined custom property.
+ * FNXC:DashboardStyling 2026-06-19-05:50: Runtime-card font-size values remain intentionally raw; --font-size-xs is now the defined dashboard token used by mobile mailbox tabs where token-validity tests require a real custom property.
  * ------------------------------------------------------------------------- */
 
 .runtime-card {