fix: address 6 low-severity findings from typography token code review

- Replace mislabeled sidebar title 10px with var(--text-2xs) (F-001)
- Replace font-size: small with var(--text-sm) in app-shell (F-002)
- Annotate @media heading overrides as potentially redundant with clamp() (F-003)
- Correct type scale comment to "approximate major-third ratio" (F-004)
- Differentiate h5 (--text-sm) from h4 (--text-base) (F-005)
- Tighten contract test to flag bare normal/bold keywords (F-006)

Task run: UI-TYPOGRAPHY-SCALE-002

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

tests/Architecture/TypographyTokenContractTest.php

@@ -50,7 +50,7 @@ class TypographyTokenContractTest extends TestCase
     public function testFontSizeUsesTokens(): void
     {
         $violations = $this->scanForRawValues(
-            '/font-size\s*:\s*+(?!var\(--text-|var\(--app-|inherit|unset|initial|revert|small\b|0[;\s])/',
+            '/font-size\s*:\s*+(?!var\(--text-|var\(--app-|inherit|unset|initial|revert|0[;\s])/',
             self::EXCEPTION_MARKERS,
         );
 
@@ -86,7 +86,7 @@ class TypographyTokenContractTest extends TestCase
     public function testFontWeightUsesTokens(): void
     {
         $violations = $this->scanForRawValues(
-            '/font-weight\s*:\s*+(?!var\(--font-|var\(--app-font-weight\)|var\(--app-form-label-font-weight|inherit|unset|initial|revert|normal|bold\b|bolder|lighter)/',
+            '/font-weight\s*:\s*+(?!var\(--font-|var\(--app-font-weight\)|var\(--app-form-label-font-weight|inherit|unset|initial|revert|bolder|lighter)/',
             self::EXCEPTION_MARKERS,
         );
 

web/css/base/variables.base.css

@@ -75,7 +75,7 @@
   --app-empty-text: var(--app-color);
   --app-empty-hint: var(--app-muted-color);
 
-  /* ── Typography scale (major-third 1.25 ratio) ──────────────── */
+  /* ── Typography scale (approximate major-third ratio 1.25×, tighter steps below base) ── */
   --text-2xs: 0.625rem;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;

web/css/layout/app-shell.css

@@ -60,7 +60,7 @@
   }
 
   h5 {
-    --app-font-size: var(--text-base);
+    --app-font-size: var(--text-sm);
     --app-line-height: var(--leading-tight);
     --app-typography-spacing-top: 1.6875rem;
   }
@@ -187,7 +187,7 @@
     padding: 4px 10px;
     color: var(--app-muted-color);
     border: 1px solid var(--app-border);
-    font-size: small;
+    font-size: var(--text-sm);
     background: var(--app-form-element-background-color);
     box-shadow: var(--app-group-box-shadow);
   }
@@ -366,6 +366,9 @@
     padding-inline: calc(var(--app-spacing) * 1);
   }
 
+  /* NOTE: These responsive heading overrides may be redundant now that
+     --text-2xl … --text-5xl use clamp() for fluid scaling. Kept pending
+     browser verification — removal is tracked separately. */
   @media (min-width: 576px) {
     .container {
       max-width: 510px;
@@ -1391,7 +1394,7 @@
     margin-bottom: calc(var(--app-spacing) * 0.375);
     color: var(--app-color);
     font-weight: var(--app-form-label-font-weight, var(--app-font-weight));
-    font-size: small;
+    font-size: var(--text-sm);
   }
 
   label:has(input[required]) span:after {

web/css/layout/app-sidebar.css

@@ -3,7 +3,7 @@
     background: var(--app-sidebar-background-color);
     --app-sidebar-gap: 0.5rem;
     --app-sidebar-item-gap: 10px;
-    --app-sidebar-title-size: 10px; /* icon-font metric — intentional px */
+    --app-sidebar-title-size: var(--text-2xs);
     --app-sidebar-summary-size: var(--text-xs);
     --app-sidebar-tenant-size: var(--text-sm);
     --app-sidebar-titlebar-height: 30px;