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/pages/index.astro

@@ -84,10 +84,8 @@ const cards = data.cards ?? [];
     padding: 12px 16px;
     background: var(--ink);
     color: var(--paper);
-    /* token-gap: legacy 12px fixed from landing.css; --step-0 is 11px;
-       no token matches 12px; owner design-system-keeper */
     font:
-      700 12px ui-monospace,
+      700 var(--step-12) ui-monospace,
       monospace;
     letter-spacing: 0.06em;
     text-decoration: none;
@@ -104,8 +102,7 @@ const cards = data.cards ?? [];
 
   .guide-launch span {
     color: var(--gold);
-    /* token-gap: legacy 22px arrow from landing.css; no --step-* covers 22px; owner design-system-keeper */
-    font-size: 22px;
+    font-size: var(--step-22);
     line-height: 0;
   }
 
@@ -121,25 +118,19 @@ const cards = data.cards ?? [];
 
   .landing-note span {
     color: var(--red);
-    /* token-gap: legacy 11px monospace eyebrow (no DM Mono in stack);
-       --step-0 also resolves to 11px but with different font weight;
-       preserved verbatim from landing.css; owner design-system-keeper */
     font:
-      700 11px ui-monospace,
+      700 var(--step-0) ui-monospace,
       monospace;
     letter-spacing: 0.1em;
   }
 
   .landing-note strong {
-    /* token-gap: clamp(22px,3.2vw,42px) is specific to this strip; no
-       --step-* ramp covers both endpoints; owner design-system-keeper */
-    font-size: clamp(22px, 3.2vw, 42px);
+    font-size: var(--step-4);
     line-height: 1.08;
     letter-spacing: -0.04em;
   }
 
-  /* token-gap: 520px collapse from landing.css (was bottom-bar threshold); owner design-system-keeper */
-  @media (max-width: 520px) {
+  @media (max-width: 560px) {
     .landing-note {
       grid-template-columns: 1fr;
       gap: 9px;