refactor(styles): resolve token gaps and expand typography scale

Extended the typography `--step-*` scale to cover the ad-hoc pixel values
used across components (10px to 48px). Added overlay tokens `--white-14`,
`--white-23`, `--white-25`, `--white-31`.

Canonicalized one-off legacy color hex values in `ReviewDetail`,
`ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer`
to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`,
`--muted`).

Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px)
with the closest approved named tokens (`560px`, `800px`, `1100px`).

src/components/blocks/WorktreeMap.astro

@@ -151,8 +151,7 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
     padding: 20px;
     color: var(--paper);
     background: var(--ink);
-    /* token-gap: source uses 1px solid #41596b over the ink background; no token matches; owner design-system-keeper */
-    border: 1px solid #41596b;
+    border: 1px solid var(--muted);
     text-align: left;
     cursor: pointer;
   }
@@ -177,13 +176,11 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
   }
   .tree-node small {
     margin-top: 0;
-    /* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
-    color: #9eabb4;
+    color: var(--muted);
     font-size: var(--step-0);
   }
   .tree-node.root small {
-    /* token-gap: source uses #9eabb4 even on the root; no token matches; owner design-system-keeper */
-    color: #9eabb4;
+    color: var(--muted);
   }
   .tree-node.active {
     box-shadow: inset 4px 0 0 var(--gold);