Smooth the page's text in the foundation, not per surface

The showcase and the error pages set grayscale font smoothing on
themselves, but the foundation did not, so an application that dropped
Tailwind's antialiased class rendered heavier text on macOS than the
package's own pages, silently. base.css now sets it on the page; the
showcase's and error page's copies go, and the guard tells a leftover
antialiased class to go too. Decided with the user (plan step 46).

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

resources/boost/skills/livewire-material-development/SKILL.md

@@ -90,7 +90,7 @@ Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile'));
 
 ## Tokens
 
-2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry, followed by the stylesheets of the components the views render (see Setup; 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
+2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry, followed by the stylesheets of the components the views render (see Setup; 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, the page's `surface` and `on-surface` in the brand typeface smoothed in grayscale (drop Tailwind's `antialiased`), every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
 
 Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen.
 

resources/css/components/error-page.css

@@ -48,7 +48,6 @@
         min-height: 100dvh;
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
-        -webkit-font-smoothing: antialiased;
     }
 
     [data-md-error-page] {

resources/css/foundation/base.css

@@ -8,6 +8,11 @@
  * `--md-ref-typeface-brand` (tokens/type.css), Google Sans Flex from tokens/font.css, whose
  * `@font-face` this file imports into the same layer.
  *
+ * Text is smoothed in grayscale where a platform offers the choice (macOS browsers): Google Sans
+ * Flex is drawn for it, and subpixel smoothing thickens its strokes on light text over a dark
+ * surface. Every surface the package draws — the showcase, the error pages — is set this way,
+ * and so is an application, which drops Tailwind's `antialiased` class with nothing to replace.
+ *
  * In `material.base`, above the reset and below every component and text class.
  */
 
@@ -20,5 +25,7 @@
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
         font-family: var(--md-ref-typeface-brand);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
     }
 }

resources/css/showcase.css

@@ -28,11 +28,6 @@
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
 @layer material.components {
-    [data-md-showcase] {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-
     /* The rail's wordmark: `md-type-title-lg md-truncate md-focus-ring` cover the type, the
        ellipsis and the ring; `display: block` gives the truncated text a width to ellipsize
        within, and the corner rounds the ring to match the state layer every other rail control