perf(web): read the font stack from one variable to halve the token cost

The 103-character app font stack was copied into every Material typography
token: 47 component tokens, the 30 new --mat-sys-* typescale tokens and the
typography hierarchy, 91 copies in all. Declare it once as
--app-font-family on html and pass var(--app-font-family) to the theme and
the hierarchy instead: -6,941 bytes of initial CSS (1,611,987 ->
1,605,046), so the system tokens now cost 5,671 bytes net instead of 12,526.
The rendered font is unchanged.

Lower the raised baseline to the new measurement. theme-tokens.e2e.ts
applies var(--mat-sys-label-small) and checks its family, size and weight,
because a dangling var() would void the whole font shorthand while body text
still inherited the same family.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/m3-theme.scss

@@ -6,8 +6,16 @@
 @include mat.app-background();
 
 // ─── Typography ─────────────────────────────────────────────────────────────
-$app-font-stack:
+// The stack is declared once on html; every Material typography token and the
+// typography hierarchy read it through the variable. Inlined, the 103-char
+// stack was copied into ~90 declarations (about 7 KB of the initial CSS).
+$app-font-stack-value:
     "'DM Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+$app-font-stack: var(--app-font-family);
+
+html {
+    --app-font-family: #{$app-font-stack-value};
+}
 
 $my-typography: mat.m2-define-typography-config(
     $font-family: $app-font-stack,