@mkbabb/glass-ui 3.6.0 → 3.8.0

package/dist/styles/tokens.css

@@ -33,21 +33,24 @@
     accent-color: var(--accent-color);
 
     /* ═══════════════════════════════════════════════
-       §0  THEME BRIDGE FALLBACKS
-
-       theme.css uses these non-Tailwind names to register v4 utility
-       namespaces without self-referential @theme variables. The public
-       runtime tokens remain --font-*, --leading-*, and --tracking-* in
-       typography.css.
-       ═══════════════════════════════════════════════ */
-    --font-stack-display: "Fraunces", Georgia, serif;
-    --font-stack-serif: "Fraunces", Georgia, "Times New Roman", serif;
-    --font-stack-sans: "Helvetica Neue", "Arial Nova", Arial, system-ui, sans-serif;
-    /* AC.W6b (v1.5.0) — self-hosted Fira Code engages by default for
-       every glass-ui consumer. The calibrated "Fira Code Fallback"
-       face (declared in typography.css) wraps the system mono stack
-       with metric overrides so the `font-display: swap` window is
-       geometry-neutral. */
+       §0  FONT TOKEN SOURCE-OF-TRUTH
+
+       The single authoritative declaration of the library's font register.
+       theme.css bridges each --font-stack-* to its Tailwind --font-* namespace
+       var; typography.css consumes the bridged --font-* names. The public
+       runtime knobs remain --font-*, --leading-*, --tracking-*.
+
+       ONE brand register: Plus Jakarta Sans (text + display) + Fira Code (mono).
+       --font-stack-text drives the body/heading/prose/display register — the
+       library DEFAULT is the register every live surface paints (the demo +
+       speedtest render Plus Jakarta everywhere). The calibrated "Plus Jakarta
+       Sans Fallback" / "Fira Code Fallback" faces (declared in typography.css)
+       wrap the system stacks with Capsize metric overrides so the swap window
+       is geometry-neutral (zero CLS). --font-stack-display aliases the text
+       register: there is no separate display-serif voice. */
+    --font-stack-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
+    --font-stack-display: var(--font-stack-text);
+    --font-stack-sans: var(--font-stack-text);
     --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace;
 
     --type-leading-micro: 1.2;
@@ -175,10 +178,8 @@
 
     /* Apple-inspired — micro-interactions, switches, dock hover */
     --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
-    --motion-ease-apple-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
     --ease-apple: var(--motion-ease-apple);
-    --ease-apple-spring: var(--motion-ease-apple-spring);
     --ease-spring: var(--spring-snappy);
     --ease-decelerate: var(--ease-out);
     --ease-accelerate: var(--ease-in);
@@ -418,6 +419,46 @@
     --muted-soft:   color-mix(in srgb, var(--muted) 30%, transparent);
     --muted-medium: color-mix(in srgb, var(--muted) 50%, transparent);
 
+    /* ═══════════════════════════════════════════════
+       §5c CONSTELLATION — Canvas2D proximity-graph lattice (AX.W17)
+
+       The H.W4 legibility intelligence promoted from the slides deck to
+       LIBRARY identity: the node tones, the edge hairline color, the per-mode
+       edge-alpha multipliers, and the field-yields-to-type translucency knob.
+       Only `--constellation-accent` (the anomaly tint) stays a CONSUMER preset
+       (slides aliases it to `--ncsu-red`); the library ships a neutral default.
+
+       PLAIN-hsl LITERALS, per arm — NEVER `light-dark()` and NEVER a
+       `var(--neutral-*)`/`var(--foreground)`/`var(--border)`/`var(--card)`
+       alias. Canvas2D silently REJECTS a `light-dark()` value into
+       `strokeStyle`/`fillStyle` (the W30 86.3%-red-splatter cardinal defect),
+       and the rejection is identical whether the value is a literal
+       `light-dark(…)` OR a `var()` that RESOLVES to one — so the constellation
+       tokens are plain-hsl LEAVES, the `:root` vs `.dark` cascade carrying two
+       literals. `proof:constellation-tokens` clause (c) machine-locks this
+       (the no-`light-dark(`-substring NOR transitive-`var()` static assertion).
+       ═══════════════════════════════════════════════ */
+    /* Node tones — readable on the warm-cream ground. The two-tone split (the
+       `dim` half rides `-node-dim`). Warm-grey ink, NOT a neutral-ladder alias. */
+    --constellation-node:      hsl(36 8% 46%);
+    --constellation-node-dim:  hsl(36 8% 60%);
+    /* Edge hairline stroke — warm near-black on cream (the plain-hsl complement
+       the slides deck reads to fix the `--foreground` light-dark() leak). */
+    --constellation-line:      hsl(24 14% 14%);
+    /* Anomaly tint — NEUTRAL library default (a desaturated warm accent). The
+       consumer overrides this (slides → `--ncsu-red`); the library does NOT
+       bake a brand hue. This is the single consumer-preset boundary. */
+    --constellation-accent:    hsl(18 58% 46%);
+    /* Edge-alpha multipliers — replace the magic `0.17` hairline / pointer-web
+       literals. The cream ground lifts the node tones, so the field can recede;
+       the focus-proximity edge reads a touch stronger. */
+    --constellation-edge-alpha:          0.22;
+    --constellation-edge-focus-alpha:  0.34;
+    /* §7 field-yields-to-type translucency knob — the legible-but-RECESSIVE
+       MIDPOINT, NOT max-legibility. On cream the node tones already read, so the
+       field recedes further: BELOW the slides 0.92 max-legibility reference. */
+    --constellation-alpha:               0.80;
+
     /* ═══════════════════════════════════════════════
        §6  SECTION PALETTE — 13-stop jewel tones (light)
        ═══════════════════════════════════════════════ */
@@ -535,6 +576,22 @@
     --dock-shadow:           var(--shadow-dock);
     --dock-shadow-collapsed: var(--shadow-dock-collapsed);
 
+    /* AX.W04 F1 — the wrap/card-tier dock shadow. A wrapped multi-row dock (and
+       any finite-radius card silhouette) is a THICKER material than a flat thin
+       pill — WWDC25 §219 "material thickens as glass flexes larger". So when the
+       wrap dock expands it lifts its elevation onto the FLOATING-tier shadow
+       stack (the `--glass-shadow-floating` family — `--shadow-xl` + the
+       `--glass-material-rim` hairline + the `--glass-under-shadow-vivid` under-cast)
+       rather than carrying the flat `--shadow-dock` glow of a 40px pill. Composed
+       on `:root` as ONE consumer-overridable token (per the cartoon-shadow
+       override contract — override on the cascade, never a dead local). The dock
+       reads it via `calc()`-on-`--dock-expand-t` so the lift glides in lockstep
+       with the pill→card radius morph (ONE clock, ONE register). */
+    --glass-material-rim:    0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent);
+    --shadow-dock-wrap:      var(--shadow-xl),
+        var(--glass-material-rim),
+        var(--glass-under-shadow-vivid);
+
     /* Cartoon shadow color primitives (kept for tiered cartoon utilities) */
     --shadow-cartoon-color:             rgb(0 0 0 / 0.12);
     --shadow-cartoon-color-soft:        rgb(0 0 0 / 0.06);
@@ -866,18 +923,16 @@
        than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
        desktop widths; consumers override per-dock by setting either
        token directly on a `.glass-dock` instance. User findings 1 + 5a. */
+    /* AX.W04 — `--dock-max-inline-size` is the canonical inline cap EVERY overflow
+       strategy reads: `overflow="scroll"` scrolls past it, and `overflow="wrap"`
+       wraps to N rows on the over-cap crossing (the dock shrink-wraps to content,
+       `max-inline-size` caps that intrinsic width at this token). The prior
+       `--dock-overflow-bp: 640px` viewport-breakpoint token (the magic-640
+       snap-back) is DELETED — the wrap is content-driven, not viewport-coupled, so
+       there is no breakpoint threshold to name. */
     --dock-max-inline-size: min(80vw, 64rem);
     --dock-max-block-size: min(80vh, 48rem);
 
-    /* AT.W7-dock-a — the `overflow="wrap"` desktop snap-back breakpoint, named
-       once. Below this viewport width a wrap-mode dock reads as a multi-row pill
-       that narrows to the viewport gutter; at/above it the pill snaps back to a
-       single nowrap row. The single source-of-record for the threshold the
-       `@media` in dock.css realizes (a `var()` cannot drive a media-query
-       feature in Baseline CSS, so the MQ carries the literal value of THIS
-       token; consumers reading the breakpoint do so through this name). */
-    --dock-overflow-bp: 640px;
-
     /* AB.W1.T1 — chassis max-block-size guardrail.
        Maximum block size a centred consumer-app card may consume while
        preserving the inline dock footprint. The recipe subtracts the
@@ -1300,12 +1355,14 @@
     --top-layer-backdrop-dim: 0.5;
 
     --vt-duration: var(--duration-normal);
-    /* AV.W3 C2 — the spring-coverage sweep: every spring-flavored transition
-       reads a `--spring-*` token. `--ease-apple-spring`'s +27.5% overshoot maps
-       to `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the
-       VT default and the cards/top-layer transitions share one spring primitive
-       (CPU + GPU sample the same curve). The apple-spring cubic-bezier survives
-       as a token DEFINITION only (a `@supports not (linear())` fallback seed). */
+    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
+       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
+       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
+       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
+       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
+       default + the cards/top-layer transitions share one spring primitive
+       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
+       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
     --vt-ease: var(--spring-bouncy);
     --vt-rise: 8px;
 
@@ -1589,6 +1646,25 @@
     --shadow-cartoon-color:            rgb(255 255 255 / 0.07);
     --shadow-cartoon-color-soft:       rgb(255 255 255 / 0.03);
 
+    /* §5c CONSTELLATION — dark arm (AX.W17). The H.W4 dark-mode lift: the node
+       tones step UP off the ink ground (the light arm's mid-grey would vanish on
+       L6 black), the hairline goes warm off-white, the field carries a touch more
+       presence to read at all. PLAIN-hsl literals, NEVER light-dark()/var(). */
+    --constellation-node:      hsl(42 9% 72%);
+    --constellation-node-dim:  hsl(42 8% 56%);
+    --constellation-line:      hsl(45 12% 86%);
+    /* Anomaly — brightened for the deep canvas (same neutral-default register;
+       the consumer still overrides to its brand). */
+    --constellation-accent:    hsl(20 70% 60%);
+    /* The dark hairlines lift harder over the ink ground, so the edge multipliers
+       run a touch lower than light to keep the field recessive. */
+    --constellation-edge-alpha:          0.20;
+    --constellation-edge-focus-alpha:  0.32;
+    /* §7 — the ink ground needs MORE field presence than cream to read at all, so
+       the dark alpha is modestly HIGHER than the light arm — but still BELOW the
+       slides 1.0 max-legibility reference (the recessive midpoint, not 1.0). */
+    --constellation-alpha:               0.88;
+
     /* Glass opacity + grain for dark — five-tier ladder, alpha-monotonic.
        Each rung lifts ~0.08 from its light counterpart so the dark surfaces
        carry comparable read-weight against the deeper canvas. */
@@ -1726,3 +1802,34 @@
     inherits: false;
     initial-value: 0;
 }
+
+/* ── The specular-intensity magnitude cohort (AX.W09) ──────────────────────
+   The catch-light alpha multiplier at each interaction state, as a SINGLE
+   overridable token cohort (was three buried literals across glass.css —
+   `0.35` rest floor / `0.6` hover / `0.85` active — and the `.dark` arm's
+   `0.22`). `glass.css`'s `.glass-material::before` rest/hover/active rules READ
+   these, so the subtle-vs-extreme magnitude is a knob a consumer (or the dark
+   arm) retunes ON THE CASCADE — never a re-buried literal. Override on `:root`
+   to retune library-wide; the cartoon-shadow override contract is the precedent.
+
+   Re-baselined to a SUBTLE ladder (≈ half the retired `0.35/0.6/0.85`):
+     • rest   0    — static, unwired surfaces are CLEAN; the catch-light wakes
+                     only on hover/active or on a pointer-wired surface. This
+                     aligns the painted rest behaviour with the @property
+                     `--specular-intensity { initial-value: 0 }` dormancy the
+                     prior unconditional `0.35` floor defeated.
+     • hover  0.22 — a subtle warm-cream lens, not a flash.
+     • active 0.32 — the press whisper; ≈ 0.22α × the warm-cream core, a lens
+                     not the prior ≈ 0.47 pure-white-screen hotspot. */
+:root {
+    --glass-specular-intensity-rest: 0;
+    --glass-specular-intensity-hover: 0.22;
+    --glass-specular-intensity-active: 0.32;
+}
+
+/* Over the deep canvas the `screen` blend lifts harder, so the dark arm runs a
+   touch softer on the interaction rungs (rest already 0). */
+.dark {
+    --glass-specular-intensity-hover: 0.18;
+    --glass-specular-intensity-active: 0.26;
+}

package/dist/styles/typography.css

@@ -1,22 +1,25 @@
 /*
- * typography.css — Fraunces serif/display + Plus Jakarta Sans + Fira Code mono
- *                (all three OFL faces self-hosted via fonts.css)
+ * typography.css — Plus Jakarta Sans (text + display) + Fira Code (mono)
+ *                (both OFL faces self-hosted via fonts.css)
  *
- * Golden-ratio scale (√φ ≈ 1.272). Fraunces carries the serif register —
- * body, headings, prose, and math — and the ornamental display register
- * with WONK=1 / SOFT=0. Plus Jakarta Sans is the brand sans; Fira Code is mono.
+ * Golden-ratio scale (√φ ≈ 1.272). ONE brand register: Plus Jakarta Sans
+ * carries the text register — body, headings, prose, display, and math — and
+ * Fira Code carries mono. The library DEFAULT is the register every live
+ * surface paints (the demo + speedtest render Plus Jakarta everywhere). There
+ * is no display-serif voice and no preset opt-out: the default IS the register.
  *
  * Semantic type classes expose both Tailwind-friendly utility names
  * (`.text-display-*`, `.text-body`, `.text-admin-label`) and feature
  * utilities (`.cm-serif`, `.fira-code`, `.fourier-f`).
  *
  * Self-host font subsystem — glass-ui ships two OFL-1.1 face families as
- * bundled woff2 assets: Plus Jakarta Sans (brand display sans, font-display:
+ * bundled woff2 assets: Plus Jakarta Sans (brand text + display, font-display:
  * optional) + Fira Code (canonical mono, font-display: swap). Both ship with
  * Capsize-calibrated size-adjust / ascent-override / descent-override on the
- * matching fallback faces so the swap is geometry-neutral (zero CLS). Consumers
- * map --font-brand-sans / --font-display / --font-mono to reference them, no
- * third-party CDN dependency on the LCP-critical path.
+ * matching fallback faces so the swap is geometry-neutral (zero CLS). The
+ * register lives in tokens.css §0 (--font-stack-text/-display/-mono), bridged
+ * to --font-text/-display/-mono in theme.css; consumers override --font-text
+ * once to rebrand, no third-party CDN dependency on the LCP-critical path.
  */
 
 /* ═══════════════════════════════════════════════
@@ -82,21 +85,15 @@
 }
 
 :root {
-    /* Font family tokens. `--font-serif` / `--font-display` / `--font-mono`
-       are NOT declared here — their source-of-truth lives in tokens.css
-       (`--font-stack-*`), bridged to Tailwind via theme.css's `@theme` block;
-       declaring `:root` literals here would shadow consumer `@theme` overrides
-       (un-layered `:root` wins over `@layer theme`). The self-hosted faces
-       above expose `"Plus Jakarta Sans"` + `"Fira Code"`, each pairing with a
-       calibrated `"... Fallback"`. `--font-brand-sans` ships a neutral default;
-       consumers opting into Plus Jakarta via the `brand-uniform-sans` preset
-       override it. `--font-mono` references `"Fira Code"` first (engages by
-       default) then the fallback chain. */
-    /* Independent brand/system sans stack; consumers override once for uniform sans. */
-    --font-brand-sans: "Helvetica Neue", "Arial Nova", Arial, system-ui, sans-serif;
-    --font-sans: var(--font-brand-sans);
-    --font-display-variation-settings: "WONK" 1, "SOFT" 0;
-    --font-display-weight: 400;
+    /* Font family tokens. `--font-text` / `--font-display` / `--font-serif` /
+       `--font-mono` are NOT declared here — their source-of-truth lives in
+       tokens.css §0 (`--font-stack-*`), bridged to Tailwind via theme.css's
+       `@theme` block; declaring `:root` literals here would shadow consumer
+       `@theme` overrides (un-layered `:root` wins over `@layer theme`). The
+       self-hosted faces above expose `"Plus Jakarta Sans"` + `"Fira Code"`,
+       each pairing with a calibrated `"... Fallback"`. The brand text register
+       (Plus Jakarta Sans) engages by default for every consumer; --font-mono
+       references `"Fira Code"` first then the fallback chain. */
 
     /* Scale tokens */
     --type-admin-label: 0.625rem;  /* 10px */
@@ -116,8 +113,7 @@
     /* Audacious display tier (v1.0.3). Extends the φ-ladder three rungs
        beyond display-5 for poster-type consumers (speedtest hero,
        dashboard pane titles when the consumer wants the number to win).
-       Same vw-axis as display-1..5 — consumer-agnostic. Brand-uniform-
-       sans preset still overrides via the existing :root override. */
+       Same vw-axis as display-1..5 — consumer-agnostic. */
     --type-display-mega:       clamp(5.382rem, 4rem + 9vw, 11.089rem);   /* φ^(9/2) — peak 177px */
     --type-display-hero:       clamp(6.854rem, 4.5rem + 12vw, 17.942rem); /* φ^5    — peak 287px */
     --type-display-audacious:  clamp(8.728rem, 5rem + 16vw, 22rem);      /* φ^(11/2) — peak 352px (fast.com peg) */
@@ -129,25 +125,18 @@
        were retired in v0.8.6 (audit U.W0.C-c §1.1 / Union 2). */
 }
 
-:root[data-typography-preset="brand-uniform-sans"] {
-    --font-serif: var(--font-brand-sans);
-    --font-display: var(--font-brand-sans);
-    --font-display-variation-settings: normal;
-    --font-display-weight: 600;
-}
-
 /* ═══════════════════════════════════════════════
-   BODY CASCADE — CM serif inherits globally
+   BODY CASCADE — the brand text register inherits globally
    ═══════════════════════════════════════════════ */
 body {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     color: var(--foreground);
     font-size: var(--type-body);
     line-height: var(--type-leading-body);
 }
 
 /* ═══════════════════════════════════════════════
-   DISPLAY — Fraunces, WONK=1 SOFT=0, tracking-tight
+   DISPLAY — Plus Jakarta Sans display, tracking-tight
    ═══════════════════════════════════════════════ */
 @utility text-display-audacious {
     font-family: var(--font-display);
@@ -155,8 +144,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     /* AQ.W3 §W3.3 — balance multi-line display headlines. Text-only (no box) so
        balance is safe; degrades to unbalanced wrapping with zero break. */
     text-wrap: balance;
@@ -177,7 +165,6 @@ body {
     font-feature-settings: "ss01", "tnum", "lnum";
     font-variant-numeric: tabular-nums lining-nums;
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
     display: inline-block;
     max-inline-size: 100%;
     /* AQ.W3 §W3.3 — `text-wrap: nowrap` (modern) sits AFTER `white-space:
@@ -193,8 +180,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -204,8 +190,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -215,8 +200,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -226,8 +210,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -237,8 +220,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -248,8 +230,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -259,16 +240,15 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
 /* ═══════════════════════════════════════════════
-   HEADINGS / BODY — Fraunces serif register
+   HEADINGS / BODY — Plus Jakarta Sans text register
    ═══════════════════════════════════════════════ */
 @utility text-title {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-title);
     line-height: var(--type-leading-heading);
     letter-spacing: var(--type-tracking-tight);
@@ -277,7 +257,7 @@ body {
 }
 
 @utility text-heading {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-heading);
     line-height: var(--type-leading-heading);
     font-weight: 700;
@@ -285,7 +265,7 @@ body {
 }
 
 @utility text-subheading {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-subheading);
     line-height: var(--type-leading-body);
     font-weight: 600;
@@ -300,7 +280,7 @@ body {
    reads heavier than its numeric weight at pill size, so regular is the
    not-bold register. */
 @utility dock-label {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--dock-label-size, var(--type-subheading));
     line-height: var(--type-leading-body);
     font-weight: 400;
@@ -308,7 +288,7 @@ body {
 }
 
 @utility text-prose {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-prose);
     line-height: var(--type-leading-prose);
     font-weight: 400;
@@ -318,7 +298,7 @@ body {
 }
 
 @utility text-body {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-body);
     line-height: var(--type-leading-body);
     font-weight: 400;
@@ -326,14 +306,14 @@ body {
 }
 
 @utility text-small {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-small);
     line-height: var(--type-leading-small);
     font-weight: 400;
 }
 
 @utility text-caption {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-caption);
     line-height: var(--type-leading-caption);
     font-style: italic;
@@ -358,15 +338,15 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   MATH — Fraunces serif italic
+   MATH — Plus Jakarta Sans italic
    ═══════════════════════════════════════════════ */
 @utility text-math {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-style: italic;
 }
 
 @utility text-math-body {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-prose);
     line-height: var(--type-leading-prose);
     font-style: italic;
@@ -406,8 +386,13 @@ body {
 /* ═══════════════════════════════════════════════
    FONT FAMILY UTILITIES
    ═══════════════════════════════════════════════ */
+/* .cm-serif — the Computer-Modern math/serif voice. A DISTINCT face from the
+   brand text register: it resolves to the consumer-supplied serif (system
+   serif by default; a math consumer maps Computer Modern / KaTeX over it). It
+   is NOT the Plus Jakarta text register — the one serif survivor of the
+   register reconciliation. */
 @utility cm-serif {
-    font-family: var(--font-serif);
+    font-family: var(--font-serif-math, serif);
 }
 
 @utility fira-code {
@@ -426,7 +411,6 @@ body {
     vertical-align: -0.05em;
     font-weight: 700;
     display: inline-block;
-    font-variation-settings: var(--font-display-variation-settings);
 }
 
 /* ═══════════════════════════════════════════════
@@ -439,9 +423,8 @@ body {
         font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem);
         line-height: var(--type-leading-display);
         letter-spacing: var(--type-tracking-tight);
-        font-weight: var(--font-display-weight);
+        font-weight: 600;
         font-optical-sizing: auto;
-        font-variation-settings: var(--font-display-variation-settings);
     }
 
     /* AV.W16 TW3 — the pane title scales off its PANE's box, not the viewport.
@@ -486,8 +469,8 @@ body {
        surface read as a fade, not as engraving. */
     .text-engraved {
         color: var(--muted-foreground);
-        text-shadow:
-            0 1px 0 color-mix(in srgb, var(--background) 30%, transparent),
-            0 -1px 0 var(--surface-tint-8);
+        /* AW.W26 — composes the `--text-shadow-engraved` @theme identity token
+           (the two-stop emboss) instead of a hand-rolled literal (gate 4). */
+        text-shadow: var(--text-shadow-engraved);
     }
 }

package/dist/styles/utilities.css

@@ -173,7 +173,12 @@
         box-shadow: var(--focus-ring-shadow);
     }
     .interactive-item:active {
-        scale: 0.98;
+        /* AW.W31.a — fold the residual literal press scale onto the canonical
+           `--scale-press*` cohort (the prior `0.98` was the sole per-atom press
+           literal surviving the W2/W3/W25 sweeps). `--scale-press-sm` (0.97) is
+           the soft press rung the button + slider recipes consume — ONE press
+           vocabulary, no per-atom literal. The 0.98→0.97 delta is sub-perceptual. */
+        scale: var(--scale-press-sm);
     }
     .interactive-item:disabled,
     .interactive-item[data-disabled] {
@@ -227,22 +232,16 @@
             background var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }
-    /* ── Depth text (layered shadow with customizable colors) ── */
+    /* ── Depth text (layered offset stamp) ──
+       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
+       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
+       literal. The token holds the stack inside the `@theme` defs (gate 4) and
+       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
     .depth-text {
         --depth-color-primary: var(--primary);
-        --depth-color-shadow: var(--shadow);
 
         color: var(--depth-color-primary);
-        text-shadow:
-            1px 1px 0 var(--depth-color-shadow),
-            2px 2px 0 var(--depth-color-shadow),
-            3px 3px 0 var(--depth-color-shadow),
-            4px 4px 0 var(--depth-color-shadow),
-            5px 5px 0 var(--depth-color-shadow),
-            5px 5px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-            2px 2px 2px color-mix(in srgb, var(--shadow-color) 20%, transparent),
-            4px 4px 5px color-mix(in srgb, var(--shadow-color) 25%, transparent),
-            6px 6px 10px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+        text-shadow: var(--text-shadow-depth);
     }
 
     /* ── 3D preserve ── */
@@ -397,6 +396,11 @@
 
     .metric-badge > span {
         line-height: 1;
+        /* AW.W26 — `wrap-anywhere` (overflow-wrap: anywhere) on the value slot:
+           a long metric value breaks WITHIN the badge rather than being clipped
+           by the host `overflow: hidden`. v4.1 `wrap-anywhere` / mwg css §7.
+           Scoped to the value span, NOT a universal selector (mwg perf caveat). */
+        overflow-wrap: anywhere;
     }
 
     .metric-badge:hover {
@@ -978,7 +982,8 @@
 
 /* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
    The default `::highlight()` paint for the `useTextHighlight` composable
-   (composables/dom). A named `Highlight` registered in `CSS.highlights`
+   (composables/motion; the `/motion-core` subpath, AX.W37). A named `Highlight`
+   registered in `CSS.highlights`
    under one of these keys paints its `Range` set without a `<mark>` wrapper.
    Token-bridged: the search mark reads the canonical pastel-yellow rainbow
    token at a soft alpha; the equation/variable mark reads `--primary`. Both