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/VoteWidget.astro

@@ -77,14 +77,12 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
     margin: 1px 0 25px;
     padding: 18px 22px;
     color: var(--ink);
-    /* token-gap: legacy review-desk vote bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
-    background: #e5eeeb;
+    background: var(--paper);
     border-left: 4px solid var(--gold);
   }
 
   .vote-widget > span {
-    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
-    color: #215675;
+    color: var(--blue);
     font: 700 10px monospace;
     letter-spacing: 0.1em;
   }
@@ -133,12 +131,10 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
   .vote-note {
     margin: 0;
     color: var(--muted);
-    /* token-gap: no --step-* covers 12px; owner design-system-keeper */
-    font-size: 12px;
+    font-size: var(--step-12);
   }
 
-  /* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
-  @media (max-width: 530px) {
+  @media (max-width: 560px) {
     .vote-buttons {
       flex-direction: column;
     }