@mkbabb/glass-ui 0.3.0 → 2.0.0

package/src/styles/tokens.css

@@ -1,11 +1,49 @@
 /*
  * tokens.css — Unified design tokens for @mkbabb/glass-ui
  *
- * Shared structural tokens used by all consumer projects.
- * Project-specific colors/fonts are overridden in each consumer's local CSS.
+ * Library default identity: warm-cream + muted-black, 13-stop per-section jewel
+ * palette, viz-basis colors (Fourier red / Chebyshev blue / Legendre purple),
+ * cartoon offset shadows, 0.625rem base radius, paper-and-glass forward.
+ *
+ * Structural tokens (durations, easings, springs, z-index, focus ring,
+ * interactive scales) are stable across consumers. Visual tokens (colors,
+ * shadows, radii, grain opacities) are consumer-overridable.
  */
 
 :root {
+    /* ═══════════════════════════════════════════════
+       §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: "Computer Modern Serif", "Latin Modern Roman", "CMU Serif", Georgia, 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. */
+    --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace;
+
+    --type-leading-micro: 1.2;
+    --type-leading-caption: 1.3;
+    --type-leading-small: 1.4;
+    --type-leading-body: 1.5;
+    --type-leading-prose: 1.618;
+    --type-leading-heading: 1.2;
+    --type-leading-display: 1.1;
+
+    --type-tracking-tight: -0.025em;
+    --type-tracking-snug: -0.01em;
+    --type-tracking-normal: 0;
+    --type-tracking-wide: 0.025em;
+    --type-tracking-wider: 0.05em;
+    --type-tracking-caps: 0.1em;
+
     /* ═══════════════════════════════════════════════
        §1  DURATION
        ═══════════════════════════════════════════════ */
@@ -16,55 +54,287 @@
     --duration-panel: 0.55s;
     --duration-xl: 1s;
     --duration-xxl: 1.5s;
-    --duration-linger: 2.5s;
+    --duration-shimmer-fast: 3s;
+    --duration-shimmer: 5s;
+    /* Sparkle micro-event — primary-CTA disco-grain sparkle sweep, success
+       affirmations. R5 vocab.γ gap row 3 (single-site at dock.css:735 today,
+       reserved for J.W2.7 §17 audacious-CTA buildout). */
+    --duration-sparkle: 600ms;
+
+    /* AH.W5-e (FA-8 §4d) — motion-duration + staged-reveal canon.
+
+       Six duration tokens + three delay tokens promoted from raw literals
+       at speedtest's celebratory-reveal SFCs (SpeedtestResults, ThankYou,
+       ResultStack, CompleteBadge). Unified under the `--motion-*`
+       namespace (parallel to `--motion-ease-*`) so all motion tokens
+       cluster at one canon — duration + easing arm together. */
+
+    /* Staged-entrance pairing — opacity + transform Vue <Transition> arms
+       in the celebratory headline + result-row reveals. Partners with
+       `--motion-ease-staged-entrance` / `--motion-ease-overshoot`. */
+    --motion-duration-staged: 320ms;
+
+    /* One-shot celebratory shimmer — gold-headline shimmer animation
+       duration + staging delay. Shared canon so the speedtest results
+       headline and the thank-you headline stay in lockstep. */
+    --motion-duration-complete-shimmer: 2.4s;
+    --motion-delay-complete-shimmer: 220ms;
+    /* AJ.W2-ζ canon checkpoint — the gold-headline shimmer at
+       CompleteHeadline + ThankYou reads these two tokens under a
+       one-shot CSS animation. The gradient (background-size: 240% 100%
+       with --color-gold-light at 46%), the @keyframes
+       (gold-headline-shimmer: background-position 120% 0 → -120% 0),
+       and the animation declaration are mutually consistent: at 2.4s
+       duration + 220ms delay the bright band traverses the headline
+       glyphs cleanly. A regression that drops either token to 0ms /
+       unset / 0 would silently collapse the celebratory shimmer to an
+       imperceptible blow-through (live regression P1-12 surfaced this
+       risk; investigation closed at the publisher as a verify — both
+       values resolve correctly today). These two values are LOAD-
+       BEARING. Do not retire / zero / un-publish without an explicit
+       decision + companion consumer-side migration at speedtest's
+       CompleteHeadline.vue + ThankYou.vue. */
+
+    /* CompleteBadge staged-reveal cluster — the disc / ring / check curve
+       fires at three asymmetric durations + delays per the A4-AF staged-
+       variety design intent. Promoting the magic numbers makes the
+       staged-variety visible at the canon. */
+    --motion-duration-badge-disc: 420ms;
+    --motion-duration-badge-ring: 560ms;
+    --motion-duration-badge-check: 380ms;
+    --motion-delay-badge-disc: 80ms;
+    --motion-delay-badge-ring: 220ms;
+    --motion-delay-badge-check: 460ms;
+
+    /* AJ-W4-κ — staggered-reveal increment canon (per A5 §8.9). Promotes
+       the scattered per-consumer constants
+       (`STATS_CARD_STAGGER_MS = 40` in MetricGaugeCards,
+        `BAR_STAGGER_MS = 80` in DistributionChart,
+        `SERIES_STAGGER_MS = 120` in TimeSeriesChart,
+        `useStagger` default 80ms) to one shared canon so a per-row /
+       per-cell / per-bar cascade across consumer surfaces reads at one
+       of three named tiers.
+
+       The three tiers are perceptually distinct registers:
+         • tight (40ms) — dense row cascades where the gap between
+           consecutive reveals should be sub-perceptual (StatsCards row
+           strip, results-table rows under their `:nth-child(N+1)` delays)
+         • default (80ms) — the canonical row-stagger rhythm (the
+           speedtest ResultStack row-tint sweep, the DistributionChart
+           bar entrance — both already at 80ms). Aliased as `default`
+           to match `useStagger`'s built-in fallback so consumers
+           omitting `delayMs` resolve to the same token.
+         • relaxed (120ms) — wider cascades where each reveal carries
+           its own attention budget (TimeSeriesChart series entrance)
+
+       The FD2 §6 rule-1 "shared period multiple" canon for ambient
+       cycles extends here to staggers: at 40/80/120ms, the default
+       (80ms) is the LCM of tight (40) AND a 2/3 of relaxed (120)
+       — a tight cascade beating against a default cascade syncs on
+       every-other-reveal, and a default cascade against a relaxed
+       cascade syncs on every-three-reveals. Consumers that nest
+       multiple cascades on adjacent surfaces should pick adjacent
+       tiers so the cross-beats stay quiet.
+
+       Consumers can read these tokens directly from inline-style
+       calc() expressions (`animation-delay: calc(var(--motion-stagger-default) * var(--row-index))`)
+       or via JS by resolving the CSS custom property at runtime
+       (`getComputedStyle(document.documentElement).getPropertyValue('--motion-stagger-default')`).
+       The latter shape collapses the speedtest TS-side constants
+       (SERIES_STAGGER_MS, BAR_STAGGER_MS, STATS_CARD_STAGGER_MS) into
+       single-source token reads. */
+    --motion-stagger-tight: 40ms;
+    --motion-stagger-default: 80ms;
+    --motion-stagger-relaxed: 120ms;
 
     /* ═══════════════════════════════════════════════
        §2  EASING — Spring curves via linear()
-       ═══════════════════════════════════════════════
 
-       Generated from damped spring physics:
-         x(t) = 1 - e^(-ζωt)(cos(ωd·t) + (ζ/√(1-ζ²))sin(ωd·t))
+       Generated from `scripts/regen-spring-tokens.mjs` — DO NOT hand-edit.
+       To tune a spring: edit the PRESETS table in the script and re-run
+       `node scripts/regen-spring-tokens.mjs`. The script invokes
+       `springLinearStops()` from `@mkbabb/keyframes.js` which solves the
+       analytic second-order damped harmonic oscillator and emits CSS
+       `linear()` stops; this is the single source of truth tying each
+       (response, ζ) pair to its serialized curve.
+
+       iOS-canonical (response, dampingFraction) per AL-X4 §3:
+         smooth: (0.50s, ζ=0.86)  — gentle settle, sub-perceptual overshoot ~0.5%
+         snappy: (0.35s, ζ=0.85)  — quick crisp, micro-overshoot
+         bouncy: (0.50s, ζ=0.65)  — emphatic overshoot ~7%
+         gentle: (0.70s, ζ=1.00)  — patient critically-damped
+
+       Note on `smooth`: at ζ=0.86 the analytic solver produces a peak
+       of 1.00498 (+0.5%) at the 24% slot — mathematically present but
+       sub-perceptual. I keep ζ=0.86 rather than promoting to ζ=1.0
+       because true critical damping is `gentle`'s register, and
+       `smooth` wants a slightly faster visual settle than `gentle`'s
+       patient curve. The 0.5% peak does not read as overshoot to the
+       eye but does narrowly distinguish `smooth` from `gentle`.
+       ═══════════════════════════════════════════════ */
+    --spring-smooth: linear(0, 0.09804 2.041%, 0.29288 4.082%, 0.49447 6.122%, 0.66436 8.163%, 0.79208 10.204%, 0.88050 12.245%, 0.93754 14.286%, 0.97182 16.327%, 0.99083 18.367%, 1.00027 20.408%, 1.00413 22.449%, 1.00502 24.490%, 1.00453 26.531%, 1.00355 28.571%, 1.00254 30.612%, 1.00169 32.653%, 1.00105 34.694%, 1.00060 36.735%, 1.00031 38.776%, 1.00014 40.816%, 1.00005 42.857%, 1.00000 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-snappy: linear(0, 0.10438 2.041%, 0.32622 4.082%, 0.56668 6.122%, 0.77153 8.163%, 0.91961 10.204%, 1.01073 12.245%, 1.05549 14.286%, 1.06804 16.327%, 1.06171 18.367%, 1.04686 20.408%, 1.03044 22.449%, 1.01629 24.490%, 1.00596 26.531%, 0.99954 28.571%, 0.99633 30.612%, 0.99537 32.653%, 0.99575 34.694%, 0.99674 36.735%, 0.99786 38.776%, 0.99884 40.816%, 0.99956 42.857%, 1.00001 44.898%, 1.00024 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-bouncy: linear(0, 0.11105 2.041%, 0.36430 4.082%, 0.65496 6.122%, 0.90929 8.163%, 1.08828 10.204%, 1.18289 12.245%, 1.20482 14.286%, 1.17641 16.327%, 1.12214 18.367%, 1.06276 20.408%, 1.01239 22.449%, 0.97809 24.490%, 0.96099 26.531%, 0.95826 28.571%, 0.96514 30.612%, 0.97666 32.653%, 0.98873 34.694%, 0.99867 36.735%, 1.00520 38.776%, 1.00825 40.816%, 1.00847 42.857%, 1.00686 44.898%, 1.00443 46.939%, 1.00199 48.980%, 1.00004 51.020%, 0.99880 53.061%, 0.99827 55.102%, 0.99829 57.143%, 0.99866 59.184%, 0.99916 61.224%, 0.99966 63.265%, 1.00004 65.306%, 1.00027 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-gentle: linear(0, 0.09415 2.041%, 0.27374 4.082%, 0.45506 6.122%, 0.60779 8.163%, 0.72570 10.204%, 0.81213 12.245%, 0.87336 14.286%, 0.91570 16.327%, 0.94445 18.367%, 0.96371 20.408%, 0.97645 22.449%, 0.98481 24.490%, 0.99025 26.531%, 0.99377 28.571%, 0.99604 30.612%, 0.99749 32.653%, 0.99841 34.694%, 0.99900 36.735%, 0.99937 38.776%, 0.99961 40.816%, 0.99975 42.857%, 0.99985 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+
+    /* Core cubic-bezier (exits, fallbacks, non-spring uses) */
+    --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 
-       smooth:  ζ=1.0  — critically damped, no overshoot
-       snappy:  ζ=0.65 — 7% overshoot, quick settle
-       bouncy:  ζ=0.45 — 20% overshoot, visible bounce-settle
-       gentle:  ζ=0.85 — barely perceptible overshoot, slow ease
-    */
+    --ease-standard: var(--motion-ease-standard);
+    --ease-out: var(--motion-ease-out);
+    --ease-in: var(--motion-ease-in);
+    --ease-out-expo: var(--motion-ease-out-expo);
 
-    /* Spring curves (primary — use for entrances) */
-    --spring-smooth: linear(0, 0.0974, 0.2816, 0.4656, 0.6189, 0.7361, 0.821, 0.8806, 0.9213, 0.9487, 0.9668, 0.9787, 0.9864, 0.9914, 0.9945, 0.9966, 0.9978, 0.9987, 0.9992, 0.9995, 0.9997, 0.9998, 0.9999, 0.9999, 1);
-    --spring-snappy: linear(0, 0.0727, 0.2386, 0.4363, 0.6262, 0.7861, 0.9075, 0.9902, 1.0395, 1.0628, 1.068, 1.0619, 1.0501, 1.0366, 1.0239, 1.0133, 1.0054, 1.0001, 0.997, 0.9956, 0.9954, 0.9959, 0.9967, 0.9976, 0.9985, 0.9992, 0.9997, 1, 1.0002, 1.0003, 1.0003);
-    --spring-bouncy: linear(0, 0.0492, 0.1748, 0.3455, 0.5335, 0.7169, 0.8796, 1.0117, 1.1087, 1.1706, 1.2005, 1.2039, 1.1874, 1.1575, 1.1206, 1.0818, 1.0454, 1.0141, 0.9895, 0.9723, 0.962, 0.958, 0.959, 0.9635, 0.9703, 0.9781, 0.986, 0.9931, 0.9991, 1.0036, 1.0066, 1.0082, 1.0087, 1.0082, 1.007, 1.0055, 1.0039, 1.0023, 1.0009);
-    --spring-gentle: linear(0, 0.1018, 0.3031, 0.5094, 0.6812, 0.8083, 0.8945, 0.9486, 0.98, 0.9964, 1.0038, 1.0061, 1.006, 1.0049, 1.0036, 1.0024, 1.0015, 1.0008, 1.0004, 1.0002, 1.0001, 1, 1, 1, 1);
+    /* 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);
 
-    /* Core cubic-bezier (for exits, fallback, non-spring uses) */
-    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-out: cubic-bezier(0, 0, 0.2, 1);
-    --ease-in: cubic-bezier(0.4, 0, 1, 1);
-    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+    --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);
+
+    /* ═══════════════════════════════════════════════
+       §2.A AMBIENT MOTION — Pulse aura tokens (AB.W3.T1)
+
+       Parameterise the breathing rhythm for `<Pulse variant="aura">`
+       so consumers don't re-author the cycle per site. The 6s
+       duration is the canon ambient-pulse rate (matches the dial's
+       idle breathing). Scale 1.0 ↔ 1.15 reads as a quiet halo at
+       intensity="normal"; the Pulse component remaps min/max from
+       its `intensity` prop ('subtle' = 1.06; 'vivid' = 1.22).
+
+       Opacity min/max scope is `--pulse-aura-opacity-{min,max}` —
+       the aura ALWAYS keeps a visible halo (min 0.55) so the colour
+       stays read at the trough; the peak goes to 0.95 so the breath
+       reads as a soft swell, not a fade-in-fade-out.
+
+       Reduced motion: Pulse.vue's scoped @media bracket forces
+       `animation: none` and parks at the min stop. Depth + colour
+       remain visible; the breath cycle disables.
+       ═══════════════════════════════════════════════ */
+    --animate-ambient-pulse-duration: 6s;
+    --animate-ambient-pulse-scale-min: 1.0;
+    --animate-ambient-pulse-scale-max: 1.15;
+    --animate-ambient-pulse-easing: var(--ease-apple);
+
+    /* Aura opacity range — keep the trough visible (the colour reads
+       at every phase of the cycle). Consumers may override per site
+       (e.g. the completion one-shot uses min=0 to fade out). */
+    --pulse-aura-opacity-min: 0.55;
+    --pulse-aura-opacity-max: 0.95;
+
+    /* ═══════════════════════════════════════════════
+       §2.B SECTIONED PROGRESS — phase-bus rail (AB.W3.T2)
+
+       The sectioned `<Progress variant="sectioned">` exposes one
+       height knob + one track tint knob. Defaults size the rail at
+       0.875rem (14px) — the W3 spec minimum (≥ 14px mobile, ≥ 18px
+       desktop). Consumers override the height per breakpoint via the
+       same token name on the consumer-side surface.
+
+       The bar reads as a recessed glass channel: inner top
+       catch-light + lower inner shadow + small outer drop. The
+       depth lives entirely in the Progress.vue scoped block; this
+       token only parameterises the rail BACKGROUND and HEIGHT —
+       depth shadows compose from the existing --shadow-color rung.
+       ═══════════════════════════════════════════════ */
+    --progress-sectioned-height: 0.875rem;
+    --progress-sectioned-track: var(--secondary);
+
+    /* ═══════════════════════════════════════════════
+       §2.C ANIMATION EXPRESSIVENESS — AI.W4 grammar
+       (publisher-side; consumer-side companions live in speedtest)
+
+       Three idiom families compose the W4 wave:
+
+       • Progress lifecycle (M.1) — the under-meter / survey progress bar
+         rides an intake pulse on rising-edge, a crescendo brightening at
+         ≥85%, and a one-shot discharge flash at 100%. The crescendo is a
+         typed CSS variable (`@property --progress-crescendo`) so the
+         indicator's leading-edge gradient stop interpolates smoothly.
+
+       • Chassis phase-tint companion (M.1) — the `--phase-color` cross-
+         fade established by the chassis cascade gains an amount companion
+         (`@property --phase-tint-amount`) so the chassis backdrop "warms
+         toward" the active phase. Both typed vars interpolate together
+         across the speedtest-owned `--motion-duration-phase-handoff`
+         window; the chassis reads the consumer-tuned clock with a safe
+         600ms default so a non-speedtest consumer still gets the cross-
+         fade shape.
+
+       • Audacious button press-ripple (M.2 Q5 — ratified G-AI-D27) — the
+         `btn-audacious` utility gains an in-place `@property --ripple-
+         radius` ripple emanating from the pressed surface. Single typed
+         length, ramps 0 → max over the ripple duration, retires on
+         release. Q3 (needle micro-jitter) + Q4 (DockLayerGroup sympath-
+         etic motion) were pruned at G-AI-D27 — no tokens reserved.
+
+       All three families coexist with the existing `--motion-*` /
+       `--phase-*` cluster. Speedtest re-uses these tokens at the existing
+       --motion-duration-phase-handoff (consumer-side, 600ms). PRM brackets
+       live alongside each consumer rule. */
+
+    /* Progress lifecycle — typed crescendo + segment-local durations */
+    --motion-duration-progress-intake: 220ms;       /* rising-edge pulse */
+    --motion-duration-progress-crescendo: 240ms;    /* leading-edge brighten */
+    --motion-duration-progress-indeterminate: 4s;   /* indeterminate sweep period */
+
+    /* Chassis depth-of-tint peak — the amount `--phase-tint-amount`
+       interpolates toward when a phase is active. Subtle by intent;
+       a 6% color-mix reads as "warmth toward the phase" without
+       overwhelming the chassis chrome's resting register. */
+    --phase-tint-peak: 6%;
+
+    /* Audacious button press-ripple — geometry + duration. The ripple
+       radius caps at 12rem so an oversized button doesn't paint a
+       transparent halo beyond its bounds (the parent's `overflow:
+       hidden` clips the visible region; the cap keeps the gradient
+       falloff well-defined). */
+    --ripple-radius-max: 12rem;
+    --motion-duration-ripple: 340ms;
+
+    /* Skeleton breath variant — the M.3 "known-imminent" loading
+       register. 6s cycle (the canon ambient rate) so a known-imminent
+       skeleton breathes in lockstep with the dial and the Pulse aura.
+       Coexists with the 1.5s shimmer (sliding gradient) and the
+       Tailwind animate-pulse (2s, short-wait) variants — distinct
+       temporal registers per use-case. */
+    --skeleton-breath-duration: 6s;
 
     /* ═══════════════════════════════════════════════
        §3  Z-INDEX SCALE
        ═══════════════════════════════════════════════ */
+    /* V.W2 T12 — Aurora background tier (sits behind --z-background).
+       Consumed by `<Aurora>` in speedtest's App.vue (`-z-10` literal today). */
+    --z-behind: -10;
     --z-background: 0;
     --z-content: 10;
     --z-controls: 20;
     --z-bar: 30;
+    --z-header: 35;
     --z-dock: 40;
+    --z-panel: 45;
     --z-overlay: 50;
-    --z-hovercard: 60;
-    --z-popover: 70;
-    --z-modal: 80;
-    --z-fullscreen: 90;
-    --z-toast: 100;
+    --z-hovercard: 120;
+    --z-tooltip: 120;
+    --z-popover: 130;
+    --z-modal: 140;
+    --z-fullscreen: 150;
+    --z-toast: 160;
     --z-toggle: 999;
     --z-max: 9999;
     --z-debug: 99999;
 
     /* ═══════════════════════════════════════════════
-       §4  BORDER RADIUS
+       §4  BORDER RADIUS — 0.625rem base (warm-cream identity)
        ═══════════════════════════════════════════════ */
-    --radius: 0.5rem;
+    --radius: 0.625rem;
+    --radius-xs: 4px;
     --radius-sm: 4px;
     --radius-md: 6px;
     --radius-lg: var(--radius);
@@ -73,19 +343,172 @@
     --radius-pill: 9999px;
 
     /* Semantic aliases */
-    --radius-card:   var(--radius-2xl);
-    --radius-panel:  var(--radius-xl);
+    --radius-card: var(--radius-2xl);
+    --radius-panel: var(--radius-xl);
     --radius-dialog: var(--radius-2xl);
-    --radius-input:  var(--radius);
+    --radius-input: var(--radius);
     --radius-button: var(--radius);
-    --radius-badge:  var(--radius-pill);
-    --radius-dock:   var(--radius-pill);
+    --radius-badge: var(--radius-pill);
+    --radius-dock: var(--radius-pill);
+    /* Tooltip alias — semantic handle for the lg rung; consumed by W2 ui/tooltip
+       migration (currently inline `rounded-lg`). R5 vocab.γ gap row 5. */
+    --radius-tooltip: var(--radius-lg);
 
     /* ═══════════════════════════════════════════════
-       §5  BOX SHADOWS
-       Projects define --shadow-color in their preset.
+       §5  COLOR PALETTE — Warm cream / muted black
+
+       Neutral scale: perceptually-uniform L* steps at hue 48 (warm paper).
+       Each pair visibly distinct at 20px viewing distance.
+           0 → 1  : 3 L   (page → soft field)
+           1 → 2  : 5 L   (soft field → chip / tab-inactive)
+           2 → 3  : 8 L   (chip → hover / highlight)
+           3 → 4  : 12 L  (highlight → subtle border)
+           4 → 5  : 25 L  (border → muted text, contrast jump)
+           5 → 6  : 10 L  (muted text → strong-muted text, secondary register)
+
+       Semantic aliases re-point into the scale — no back-compat shims.
        ═══════════════════════════════════════════════ */
-    --shadow-color: hsl(0 0% 0%);
+    --neutral-0: hsl(48 12% 98%);   /* L 98 — page surface */
+    --neutral-1: hsl(48 10% 95%);   /* L 95 — soft field bg */
+    --neutral-2: hsl(48  9% 90%);   /* L 90 — chip / tab-inactive bg */
+    --neutral-3: hsl(48  8% 82%);   /* L 82 — hover / highlight bg */
+    --neutral-4: hsl(48  7% 70%);   /* L 70 — subtle border */
+    --neutral-5: hsl(48  6% 40%);   /* L 40 — muted text (WCAG AA: 5.23:1 vs L98 page / 4.91:1 vs L95 muted) */
+    /* W7-α' (AK-FD1) — strong-muted text rung. One principled ladder step
+       (10 L darker, the 5→6 cadence above) past muted text toward
+       --foreground (L10). Sits at the 1/3 point of the L40→L10 muted→primary
+       gap: legible secondary text that reads less-faint than muted but not as
+       assertive as primary. By-COLOUR per the canon (a neutral step, not an
+       alpha mute); hue held at 48, sat nudged 6→7 toward --foreground's 10.
+       WCAG AA: 7.79:1 vs L98 page / 7.31:1 vs L95 muted (cf. neutral-5's
+       5.23:1) — comfortably above the 4.5:1 body floor. */
+    --neutral-6: hsl(48  7% 30%);   /* L 30 — strong-muted text (secondary register) */
+
+    --background: var(--neutral-0);
+    --foreground: hsl(24 10% 10%);
+    --card: var(--neutral-0);
+    --card-foreground: var(--foreground);
+    --popover: var(--neutral-0);
+    --popover-foreground: var(--foreground);
+
+    --muted: var(--neutral-1);
+    --muted-foreground: var(--neutral-5);
+    /* W7-α' (AK-FD1) — one rung less-faint than --muted-foreground for
+       secondary text that reads too-faint at the muted rung over resting
+       glass (CardDescription). By-colour neutral step, not alpha. */
+    --muted-foreground-strong: var(--neutral-6);
+    --secondary: var(--neutral-2);
+    --secondary-foreground: var(--foreground);
+    --accent: var(--neutral-3);
+    --accent-foreground: var(--foreground);
+
+    --border: var(--neutral-4);
+    --input: var(--neutral-4);
+
+    --primary: hsl(24 10% 10%);
+    --primary-foreground: var(--neutral-0);
+    --destructive: hsl(0 72% 50%);
+    --destructive-foreground: var(--neutral-0);
+    --ring: hsl(24 10% 10%);
+    --shadow: hsl(24 10% 10%);
+    --shadow-color: var(--foreground);
+
+    /* Foreground-tint rungs — canonical handles for the 36+ raw
+       `color-mix(in srgb, var(--foreground) N%, transparent)` sites surveyed
+       in R5 axis-1. Each rung's α is named in its key (4 → 4%, 22 → 22%).
+       Auto-dark via --foreground; no explicit dark mirrors needed. R5
+       vocab.γ gap row 1. Consumers land in W2.B + W3.C. */
+    --surface-tint-4:  color-mix(in srgb, var(--foreground)  4%, transparent);
+    --surface-tint-6:  color-mix(in srgb, var(--foreground)  6%, transparent);
+    --surface-tint-8:  color-mix(in srgb, var(--foreground)  8%, transparent);
+    --surface-tint-10: color-mix(in srgb, var(--foreground) 10%, transparent);
+    --surface-tint-12: color-mix(in srgb, var(--foreground) 12%, transparent);
+    --surface-tint-15: color-mix(in srgb, var(--foreground) 15%, transparent);
+    --surface-tint-18: color-mix(in srgb, var(--foreground) 18%, transparent);
+    --surface-tint-22: color-mix(in srgb, var(--foreground) 22%, transparent);
+    --surface-tint-25: color-mix(in srgb, var(--foreground) 25%, transparent);
+    /* Higher-α rungs added at L.W5 (absorbs K R4 — 4 P1 sites whose
+       literal `color-mix(in srgb, var(--foreground) {35,40,70}%, transparent)`
+       expressions bypassed the canonical token family). See `docs/tranches/L/
+       audit/W5-A-doc-cohort-proof.md`. */
+    --surface-tint-35: color-mix(in srgb, var(--foreground) 35%, transparent);
+    --surface-tint-40: color-mix(in srgb, var(--foreground) 40%, transparent);
+    --surface-tint-70: color-mix(in srgb, var(--foreground) 70%, transparent);
+
+    /* Muted-tinted surface rungs — canonical handles for the 9 raw
+       `color-mix(in srgb, var(--muted) N%, transparent)` sites in
+       FuzzySearch / BouncyToggle / Slider scoped CSS. (AI.W5-δ — the
+       ProgressiveSidebar consumer retired at the wave; the canonical token
+       rung lives on for the remaining consumers.) Auto-dark via --muted.
+       R5 vocab.γ axis-1 row. */
+    --muted-soft:   color-mix(in srgb, var(--muted) 30%, transparent);
+    --muted-medium: color-mix(in srgb, var(--muted) 50%, transparent);
+
+    /* ═══════════════════════════════════════════════
+       §6  SECTION PALETTE — 13-stop jewel tones (light)
+       ═══════════════════════════════════════════════ */
+    --section-color-0:  hsl(334 63% 47%);   /* rose       */
+    --section-color-1:  hsl(272 44% 47%);   /* purple     */
+    --section-color-2:  hsl(224 58% 46%);   /* indigo     */
+    --section-color-3:  hsl(194 62% 36%);   /* teal-cyan  */
+    --section-color-4:  hsl(163 46% 35%);   /* forest     */
+    --section-color-5:  hsl(35 70% 42%);    /* amber      */
+    --section-color-6:  hsl(6 72% 49%);     /* tomato-red */
+    --section-color-7:  hsl(286 46% 47%);   /* violet     */
+    --section-color-8:  hsl(342 62% 44%);   /* ruby       */
+    --section-color-9:  hsl(205 20% 38%);   /* slate-blue */
+    --section-color-10: hsl(86 38% 36%);    /* olive      */
+    --section-color-11: hsl(187 58% 39%);   /* ocean      */
+    --section-color-12: hsl(256 44% 52%);   /* periwinkle */
+
+    /* Accent colors */
+    --accent-pink: hsl(330 65% 55%);
+    --section-heading: hsl(328 60% 46%);
+    --accent-red: hsl(0 72% 50%);
+
+    /* ═══════════════════════════════════════════════
+       §6b VIZ BASIS — core brand hues
+       ═══════════════════════════════════════════════ */
+    --viz-fourier:   hsl(6 72% 49%);
+    --viz-chebyshev: hsl(224 58% 46%);
+    --viz-legendre:  hsl(286 46% 47%);
+    --viz-amber:     var(--section-color-5);
+    --viz-green:     var(--section-color-4);
+
+    /* Semantic UI accents */
+    --tier-featured: hsl(45 100% 50%);
+    --tier-saved:    hsl(210 100% 60%);
+    --like:          hsl(0 80% 60%);
+    --success:       hsl(142 71% 45%);
+    --warning:       hsl(38 92% 50%);
+    --info:          hsl(217 91% 60%);
+    --delete:        hsl(0 70% 55%);
+
+    /* Semantic foregrounds — text/glyph atop --success/--warning/--info plates.
+       Notification.vue currently hardcodes `text-white`/`text-foreground`
+       inline; W2 migrates consumers to read these tokens. Warning carries a
+       dark glyph because the amber plate is too luminous for white. R5
+       vocab.γ gap row 4. */
+    --success-foreground: var(--neutral-0);
+    --warning-foreground: hsl(24 10% 10%);
+    --info-foreground:    var(--neutral-0);
+
+    /* ═══════════════════════════════════════════════
+       §7  SHADOWS — cartoon offset is the signature
+       ═══════════════════════════════════════════════ */
+    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
+    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 10%, transparent);
+    --shadow-soft:          0 4px 12px rgba(0, 0, 0, 0.1);
+    --shadow-elevated:      0 8px 24px rgba(0, 0, 0, 0.12);
+    --shadow-modal:
+        4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent),
+        0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent);
+
+    --cartoon-shadow:       var(--shadow-cartoon);
+    --cartoon-shadow-hover: var(--shadow-cartoon-hover);
+    --soft-shadow:          var(--shadow-soft);
+    --elevated-shadow:      var(--shadow-elevated);
+    --modal-shadow:         var(--shadow-modal);
 
     /* Elevation scale */
     --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent),
@@ -96,7 +519,59 @@
     --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
     --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent);
 
-    /* Cartoon / offset shadows */
+    /* Z.W2.T3a — uniform-cast shadow rung. Offset 0 / 0, no directional
+       Y bias. Use case: dock-hosted icons (e.g. the speedtest settings
+       gear) where the surrounding dock shadow's downward cast reads as
+       a per-icon right-edge halo on the rightmost child (A2 §B7). The
+       uniform variant carries the same color-mix recipe family as the
+       sized rungs (`--shadow-md`, `--shadow-lg`) so the perceived
+       elevation is a peer, not a sibling. Consumers compose via
+       `--shadow-dock-override: var(--shadow-uniform)` per-instance, or
+       attach to per-icon-button stacks where directional cast is wrong-
+       shape. Documented in DESIGN.md token table. */
+    --shadow-uniform: 0 0 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+
+    /* Card = soft drop plate by default. The cartoon offset is a brand-flavoured
+       decoration (a sticker look), not the canonical card shape. Consumers
+       wanting the cartoon look pass <Card surface="cartoon">, which composes the
+       `.cartoon-surface` utility (it reads --shadow-cartoon directly). R3-spec
+       §F.1, S.W4; Q.W3 Lane H. */
+    --shadow-card:       var(--shadow-md);
+    --card-shadow:       var(--shadow-card);
+
+    /* AI.W1-α — sticky CardHeader background. Parameterises the
+       `bg-card/60` literal value.js's PaneHeader.vue carried so the
+       glass-ui canon owns the recipe. The scroll-driven `<CardHeader
+       shrink>` choreography reads this token for its sticky-header
+       backdrop tint; consumers retune per-app by overriding the
+       variable at any ancestor. Auto-dark via `--card`. */
+    --card-header-bg:    color-mix(in srgb, var(--card) 60%, transparent);
+
+    /* Dock shadows */
+    /* User 2026-05-13 (third + fourth report). The dock previously layered:
+         1) directional `0 4px 20px` drop  → retired (third report; the Y-
+            offset concentrated on the pill's rounded right cap and read as
+            a right-edge halo on the rightmost child).
+         2) `0 0 0 1px` hairline outer ring → retired (fourth report; in
+            dark mode the 10% cream-white ring traced the right-cap arc and
+            still read as a shadow even after the directional drop was
+            gone).
+       The dock's own `border: 1.5px solid var(--glass-border-dock)` already
+       provides silhouette definition, so the outer ring was redundant. The
+       canonical dock shadow is now a single omnidirectional glow in the
+       `--shadow-md`/`--shadow-lg` family. Per-instance directional drop
+       can still be reinstated via `--shadow-dock-override` (consumed by
+       every `.glass-dock` state selector — see dock.css). */
+    --shadow-dock:           0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent);
+    --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    --dock-shadow:           var(--shadow-dock);
+    --dock-shadow-collapsed: var(--shadow-dock-collapsed);
+
+    /* 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);
+
+    /* Tiered cartoon shadows */
     --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
         0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
         -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
@@ -106,167 +581,483 @@
     --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
         0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
         -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    --cartoon-shadow-sm: var(--shadow-cartoon-sm);
+    --cartoon-shadow-md: var(--shadow-cartoon-md);
+    --cartoon-shadow-lg: var(--shadow-cartoon-lg);
 
-    /* Card offset shadow */
-    --shadow-card: 4px 4px 0px 0px color-mix(in srgb, var(--shadow-color) 50%, transparent);
-    --shadow-card-hover: 5px 5px 0px 0px color-mix(in srgb, var(--shadow-color) 60%, transparent);
-
-    /* Dock shadows */
-    --shadow-dock: 0 4px 20px color-mix(in srgb, var(--shadow-color) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--shadow-color) 15%, transparent);
-    --shadow-dock-collapsed: 0 2px 12px color-mix(in srgb, var(--shadow-color) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+    /* ═══════════════════════════════════════════════
+       §8  GLASSMORPHISM — Five-tier surface ladder (v0.8.0)
 
-    /* Cartoon shadow colors */
-    --shadow-cartoon-color: rgb(0 0 0 / 0.12);
-    --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06);
-    --shadow-cartoon-color-hover: rgb(0 0 0 / 0.16);
-    --shadow-cartoon-color-hover-soft: rgb(0 0 0 / 0.08);
+       Tier semantics, alpha-monotonic:
+         wash      ~0.30α  + light blur      (was `subtle`)
+         quiet     ~0.50α  + medium blur     (the formerly missing rung)
+         resting   ~0.65α  + canonical blur  (was `default`; the speedtest plate)
+         floating  ~0.80α  + heavier blur    (was `elevated`)
+         overlay   ~0.95α  + heaviest blur   (NEW; modal-over-modal)
 
-    /* ═══════════════════════════════════════════════
-       §6  GLASSMORPHISM — Four-tier surface system
-       subtle   → lightest (dock bg, input bg, hover overlays)
-       default  → standard (cards, content containers, select triggers)
-       medium   → heavier  (popovers, dropdowns, floating panels)
-       elevated → heaviest (dialogs, command palette, modal overlays)
+       v0.8.0 retires the four-tier `subtle | default | medium | elevated`
+       ladder outright. No legacy aliases. Consumers migrate at the same
+       breaking change. R3-spec §A.
        ═══════════════════════════════════════════════ */
 
     /* Opacity primitives */
-    --glass-opacity-subtle:   0.30;
-    --glass-opacity-default:  0.50;
-    --glass-opacity-medium:   0.65;
-    --glass-opacity-elevated: 0.80;
+    --glass-opacity-wash:     0.30;
+    --glass-opacity-quiet:    0.50;
+    --glass-opacity-resting:  0.65;
+    --glass-opacity-floating: 0.80;
+    --glass-opacity-overlay:  0.95;
+
+    /* Blur primitives. The radii here feather the dock + meter card to a
+       barely-perceptible diffusion that lets the substrate behind it bleed
+       through cleanly while keeping hero typography crisp at meter scale.
+       The resting blur sits at 12px so a glass plate reads as a diffusion
+       without consumer-side override. */
+    --glass-blur-wash-radius:     1px;
+    --glass-blur-quiet-radius:    10px;
+    --glass-blur-resting-radius:  12px;
+    --glass-blur-floating-radius: 16px;
+    --glass-blur-overlay-radius:  24px;
+    /* AJ.W2-β — dock blur lifted to 14px (was 0px at J.W3.C, was 1px
+       pre-J.W3.C). Per FD1 §4 §1.9 (AJ-time live regression P1-11):
+       "the dock should feel anchored to its surface; too much blur
+       dissociates" — but zero blur reads as "transparent-with-tint",
+       NOT as "feathered glass." The AJ-time perceptual register
+       overrides the J.W3.C compositor-cost concern: 14px is the lower
+       end of the FD1 §4 target range (14-16px); the dock composes
+       `blur()` only (no saturate — preserved from J.W3.C); the
+       `prefers-reduced-transparency` PRM bracket at glass.css:229
+       still maps the dock to its opacity-only register.
+       Quiet tier (above) lifted 3px → 10px on the same perceptual-
+       register reset (FD1 §4 target range 10-12px; 10px is the lower
+       end). The MetricBadge pills + InstrumentChassis-internal cells
+       now read as translucent gauge rather than flat tint.
 
-    /* Blur primitives */
-    --glass-blur-subtle:   blur(4px) saturate(1.05);
-    --glass-blur-default:  blur(8px) saturate(1.2);
-    --glass-blur-medium:   blur(12px) saturate(1.3);
-    --glass-blur-elevated: blur(16px) saturate(1.4);
+       AL-W3-α (T10 per A-synthesis §1.5): retune 14px → 11px with a
+       paired opacity lift 0.32 → 0.42 (below). The user mandate at
+       AL-time was "slight blur" + "refined glassyness" — at 11px /
+       0.42 the dock reads as a CRISPER GLASS PILL (the iOS Control
+       Center register), not a feathered watercolour wash. Holds the
+       register at the lower blur radius. */
+    --glass-blur-dock-radius:     11px;
+
+    --glass-blur-wash:     blur(var(--glass-blur-wash-radius)) saturate(1.05);
+    --glass-blur-quiet:    blur(var(--glass-blur-quiet-radius));
+    --glass-blur-resting:  blur(var(--glass-blur-resting-radius)) saturate(1.05);
+    --glass-blur-floating: blur(var(--glass-blur-floating-radius)) saturate(1.4);
+    --glass-blur-overlay:  blur(var(--glass-blur-overlay-radius)) saturate(1.5);
+    /* Dock blur composes blur() only — no saturate. The 14px radius
+       feathers the aurora bleed-through into a watercolour register
+       while `--glass-bg-dock` (32% card opacity) carries the
+       translucent register. The dock reads as "feathered glass" rather
+       than "transparent tint" (AJ.W2-β). */
+    --glass-blur-dock:     blur(var(--glass-blur-dock-radius));
+
+    /* Dock-specific opacity. Lighter than `resting` (0.65) so the dock reads
+       as a translucent overlay rather than a panel — backdrop bleed visible
+       through it. Consumed by `.glass-dock` via the `--glass-bg-dock` token.
+
+       AL-W3-α (T10 per A-synthesis §1.5): retune 0.32 → 0.42 paired with
+       the dock blur radius drop (14px → 11px above). The user mandate at
+       AL-time was "slight blur" + "refined glassyness" — the +0.10 opacity
+       lift HOLDS the surface register against the tightened blur, so the
+       dock still reads as a clearly painted chrome rather than dissociating
+       into a frosted ghost. */
+    --glass-opacity-dock: 0.42;
+
+    /* Chassis-specific opacity. Looser than `default` (0.50) so the
+       <InstrumentChassis> surface reads as glass-over-aurora at its
+       64rem-wide footprint; the default tier stays calibrated for cards.
+       Mirrors the dock-tier pattern (own opacity primitive + composed bg).
+       Light 0.28 sits in the gap between dock (0.32) and a hypothetical
+       wash tier; dark 0.36 mirrors the +0.08 step the dock takes from
+       `glass-bg-medium` (0.65) down to its own 0.32. */
+    --glass-opacity-chassis: 0.28;
 
     /* Composed backgrounds */
-    --glass-bg-subtle:   color-mix(in srgb, var(--card) calc(var(--glass-opacity-subtle) * 100%), transparent);
-    --glass-bg-default:  color-mix(in srgb, var(--card) calc(var(--glass-opacity-default) * 100%), transparent);
-    --glass-bg-medium:   color-mix(in srgb, var(--card) calc(var(--glass-opacity-medium) * 100%), transparent);
-    --glass-bg-elevated: color-mix(in srgb, var(--card) calc(var(--glass-opacity-elevated) * 100%), transparent);
-
-    /* Composed borders — foreground-tinted for Apple-like luminosity */
-    --glass-border-subtle:   color-mix(in srgb, var(--foreground) 8%, transparent);
-    --glass-border-default:  color-mix(in srgb, var(--foreground) 10%, transparent);
-    --glass-border-medium:   color-mix(in srgb, var(--foreground) 12%, transparent);
-    --glass-border-elevated: color-mix(in srgb, var(--foreground) 15%, transparent);
-
-    /* Shadow per tier */
-    --glass-shadow-subtle:   var(--shadow-sm);
-    --glass-shadow-default:  var(--shadow-md);
-    --glass-shadow-medium:   var(--shadow-lg);
-    --glass-shadow-elevated: var(--shadow-xl),
-        0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent);
-
-    /* Shared decorative */
-    --glass-grain-opacity: 0.035;
+    --glass-bg-wash:     color-mix(in srgb, var(--card) calc(var(--glass-opacity-wash) * 100%), transparent);
+    --glass-bg-quiet:    color-mix(in srgb, var(--card) calc(var(--glass-opacity-quiet) * 100%), transparent);
+    --glass-bg-resting:  color-mix(in srgb, var(--card) calc(var(--glass-opacity-resting) * 100%), transparent);
+    --glass-bg-floating: color-mix(in srgb, var(--card) calc(var(--glass-opacity-floating) * 100%), transparent);
+    --glass-bg-overlay:  color-mix(in srgb, var(--card) calc(var(--glass-opacity-overlay) * 100%), transparent);
+    --glass-bg-dock:     color-mix(in srgb, var(--card) calc(var(--glass-opacity-dock) * 100%), transparent);
+    --glass-bg-chassis:  color-mix(in srgb, var(--card) calc(var(--glass-opacity-chassis) * 100%), transparent);
+
+    /* Composed borders — foreground-tinted */
+    --glass-border-wash:     color-mix(in srgb, var(--foreground) 8%, transparent);
+    --glass-border-quiet:    color-mix(in srgb, var(--foreground) 10%, transparent);
+    --glass-border-resting:  color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-border-floating: color-mix(in srgb, var(--foreground) 15%, transparent);
+    --glass-border-overlay:  color-mix(in srgb, var(--foreground) 18%, transparent);
+    --glass-border-dock:     color-mix(in srgb, var(--foreground) 11%, transparent);
+    --glass-border:          var(--glass-border-quiet);
+    --glass-border-strong:   var(--glass-border-floating);
+
+    /* Shared decorative. Light grain dropped 0.035 → 0.025 in P.W1.B —
+       at the chassis scale the original alpha read as crawl over the new
+       lower-alpha chassis bg; the grain's role is texture, not reading,
+       so it sits at the perceptual floor. Dark companion drops 0.06 →
+       0.045 below to keep the soft-light blend alive without stippling. */
+    --glass-grain-opacity: 0.025;
+    --glass-grain-opacity-disco: 0.08;
     --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25);
 
-    /* ═══════════════════════════════════════════════
-       §7  ANIMATION OFFSETS
-       ═══════════════════════════════════════════════ */
-    --animation-slide-sm: 3px;
-    --animation-slide-md: 6px;
-    --animation-slide-lg: 8px;
-    --popover-offset: 0.375rem;
+    /* Hairline-accent — 0.5px catch-light + under-shadow pair.
+       Single token composes the canonical 2-stop hairline used by dock,
+       instrument-chassis. The `.hairline-accent` utility
+       (utilities.css §hairline) adopts these via `box-shadow:`. */
+    --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06);
+    --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04);
+    --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow);
+
+    /* Specular catch-light — 1.5px-tall top-edge highlight that swaps in for
+       --glass-highlight on interactive moments (e.g. primary-action hover).
+       Reads as a real catch-light on a curved surface. The `-dark` companion
+       is overridden inside `.dark`; the named token here is the explicit
+       handle consumers can reference to compose dark-aware layers. */
+    --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45);
+    --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30);
+
+    /* Chassis curvature illusion — a subtle radial gradient at the chassis
+       top centre that lifts the surface without committing to literal 3D.
+       Composed into <InstrumentChassis>'s background stack. */
+    --glass-curvature-overlay: radial-gradient(
+        ellipse at 50% -20%,
+        hsl(0 0% 100% / 0.06),
+        transparent 60%
+    );
+    --glass-curvature-overlay-dark: radial-gradient(
+        ellipse at 50% -20%,
+        hsl(0 0% 100% / 0.06),
+        transparent 60%
+    );
+
+    /* Chart palette aliases — speedtest et al. read these for phase tinting.
+       Defaults map to viz-basis hues; consumers can override per app. */
+    --chart-ping:     var(--viz-chebyshev);
+    --chart-download: var(--viz-fourier);
+    --chart-upload:   var(--viz-amber);
+    --chart-jitter:   var(--viz-legendre);
+
+    /* O.W6 Lane D — WCAG companion `--chart-{phase}-label` tokens
+       (speedtest AC.W6c.T2 — F1.V-04 closure).
+
+       The canvas-side hues above preserve their saturated brand register
+       (correct against the meter dial); the COMPANION tokens darken to
+       L≈0.40 so phase-label text on `--background` clears the WCAG 2.1
+       AA-body 4.5:1 contrast floor. Mirrors the two-token discipline
+       already established by `--meter-{background-color,track-stroke}`:
+       one token feeds the canvas/visual, the second feeds the label
+       text.
+
+       Light-mode L≈0.40 in OKLCH preserves the hue rotation while
+       dropping luminance enough for body contrast; dark-mode flips to
+       L≈0.85 against the dark canvas. Consumers reach these via
+       `color: var(--chart-ping-label)` (etc.) on label elements ONLY —
+       chart strokes/fills continue to read `--chart-ping`. */
+    --chart-ping-label:     oklch(0.40 0.18 230);
+    --chart-download-label: oklch(0.40 0.20 22);
+    --chart-upload-label:   oklch(0.40 0.16 55);
+    --chart-jitter-label:   oklch(0.40 0.20 305);
+
+    /* O.W6 Lane D — Meter track stroke (speedtest AC.W6c.T3 — F1.V-02
+       closure). Promoted from speedtest's consumer-side declaration so
+       glass-ui owns the canonical light + dark values. The light-mode
+       value reads opaque foreground (composes through canvas
+       `globalAlpha` in consumer renderers; e.g., speedtest's `rings.ts`
+       `globalAlpha = 0.22` lands the phantom-track at the perceptual
+       sweet-spot). The dark-mode companion lives under `.dark` below
+       and ALSO reads `var(--foreground)` — the prior speedtest value
+       `var(--background)` rendered bg-on-bg invisible at dark mode. */
+    --meter-track-stroke: var(--foreground);
+
+    /* Shadow per tier — complete box-shadow lists for glass surface classes */
+    --glass-shadow-wash:     var(--shadow-sm), var(--glass-highlight);
+    --glass-shadow-quiet:    var(--shadow-md), var(--glass-highlight);
+    --glass-shadow-resting:  var(--shadow-lg), var(--glass-highlight);
+    --glass-shadow-floating: var(--shadow-xl),
+        0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent),
+        var(--glass-highlight);
+    --glass-shadow-overlay:  var(--shadow-2xl),
+        0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent),
+        var(--glass-highlight);
+    --glass-shadow:    var(--glass-shadow-quiet);
+    --glass-shadow-lg: var(--glass-shadow-floating);
+
+    /* ─────────────────────────────────────────────────────────────
+       AL-W1-α augmented — SPINE 8th tier (HOUSING register)
+
+       Closes the AK W2 chassis-spine architectural underclaim per
+       AL-X5 §4.1. The spine register is a polished SLEEVE, not glass:
+       NO backdrop-filter, NO plate opacity, hairline outer stroke,
+       interior radial vignette that subtly carries the phase-color
+       cascade. Consumed exclusively by `<InstrumentChassis variant="spine">`
+       at App-level mount paths (quiet-content routes).
+
+       The 4 tokens here cover the minimum viable substrate the SLIM
+       Y4/Y6/Y7 retention set ratified. The 35 rejected axes (saturate
+       band, edge-light per tier, depth-shadow per tier, tier-up macro)
+       stay rejected per the conservative-creation mandate.
+       ───────────────────────────────────────────────────────────── */
+    --glass-spine-opacity: 0;
+    --glass-spine-blur: 0px;
+    --glass-spine-border: var(--surface-tint-8);
+    --glass-spine-vignette: radial-gradient(
+        ellipse at 50% 0%,
+        color-mix(in oklab, var(--phase-color, var(--surface-tint-8)) 8%, transparent),
+        transparent 60%
+    );
+
+    /* ─────────────────────────────────────────────────────────────
+       AL-W10 SLIM — UNDER-SHADOW recipe rungs
+
+       Per AL-X5 §4 + Y7 §3. iOS Liquid Glass surfaces carry a 0.5px
+       dark hairline along the bottom edge (reads as under-shadow /
+       glass thickness). The substrate `--hairline-under-shadow`
+       already publishes one quiet rung; the four-rung ladder here
+       names the SLIM retention set (Y4 §3.2 / Y6 §4.3) — `quiet`,
+       `default`, `vivid`, `spine` cover the consumer landings without
+       multiplying tokens per tier. The 3 hand-rolled literals at
+       `instrument-chassis.css:52`, `dock.css:279`, `dock.css:952`
+       retire to these.
+
+       Composes as a NON-INSET box-shadow layer alongside the existing
+       `--glass-shadow-*` recipe (the inset under-shadow stays at the
+       hand-rolled literal where it's load-bearing on chassis-internal
+       surfaces).
+       ───────────────────────────────────────────────────────────── */
+    --glass-under-shadow-quiet:   0 2px 8px -1px oklch(0 0 0 / 0.04);
+    --glass-under-shadow-default: 0 4px 16px -2px oklch(0 0 0 / 0.08);
+    --glass-under-shadow-vivid:   0 8px 32px -4px oklch(0 0 0 / 0.12);
+    --glass-under-shadow-spine:   0 1px 0 0 oklch(0 0 0 / 0.06);
+
+    /* Overlay scrim rungs — substrate-aware modal/dialog backdrop tints.
+       Three weights cover the deployed range: dialog-scroll (subtle),
+       canonical modal (default), drawer/full-cover (strong). Currently
+       5 raw `bg-black/{40,50,80}` sites across Dialog/Sheet/Drawer/
+       ConfirmDialog hardcode the value; W2.A migrates consumers.
+       R5 vocab.γ gap row 2. */
+    --overlay-scrim:         color-mix(in srgb, var(--shadow-color) 50%, transparent);
+    --overlay-scrim-strong:  color-mix(in srgb, var(--shadow-color) 80%, transparent);
+    --overlay-scrim-subtle:  color-mix(in srgb, var(--shadow-color) 40%, transparent);
 
     /* ═══════════════════════════════════════════════
-       §7b HOVER LIFT OFFSETS
+       §9  ANIMATION OFFSETS
        ═══════════════════════════════════════════════ */
+    /* Hover lift offsets */
     --lift-sm: -1px;
     --lift-md: -2px;
     --lift-lg: -4px;
 
-    /* ═══════════════════════════════════════════════
-       §7c LAYOUT TOKENS
-       ═══════════════════════════════════════════════ */
+    /* Layout tokens */
     --mask-fade-width: 1rem;
+    /* J.W3.C — dock content overflow caps. When dock content exceeds
+       these dimensions, the inner `.dock-layers` (horizontal) /
+       `.glass-dock.vertical` (rail) container scrolls with a
+       `.scroll-fade-{x,y}` mask-fade so the boundary feathers rather
+       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. */
+    --dock-max-inline-size: min(80vw, 64rem);
+    --dock-max-block-size: min(80vh, 48rem);
+
+    /* 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
+       consumer-owned `--dock-footer-space` (dock height + dock inset +
+       card-edge inset) and `--page-padding-top` from the dynamic viewport,
+       then takes one further rem of breathing room so the card never
+       butts the dock — the user mandate is `≥ 1rem visible gap above
+       dock`. Both consumer tokens carry safe fallbacks for callers that
+       have not declared them.
+
+       Consumers should shrink internal regions (meter, readout, timeline)
+       before falling back to scroll. This token is a guardrail against
+       chassis overflow, NOT a license to make the card scroll as the
+       default solution; clamp-first / no-scroll-first is the canon.
+       See DESIGN.md `## Chassis sizing — dock-adjusted viewport`. */
+    --chassis-max-block-size: calc(
+        100dvh
+        - var(--dock-footer-space, 5.75rem)
+        - var(--page-padding-top, 0rem)
+        - 1rem
+    );
     --max-width-input: 24rem;
+    --input-min-width-sm: 5rem;
+    --min-width-input-sm: var(--input-min-width-sm);
+    --chart-height-compact: 15rem;
+    --chart-height-default: 22.5rem;
+    --chart-height-large: 25rem;
+    --chart-margin: 1.25rem;
     --paper-texture-size: 200px 200px;
 
-    /* ═══════════════════════════════════════════════
-       §7d BORDER OPACITY SCALE
-       ═══════════════════════════════════════════════ */
-    --border-opacity-light: 0.15;
+    /* Border opacity scale */
+    --border-opacity-light:  0.15;
     --border-opacity-medium: 0.25;
     --border-opacity-strong: 0.6;
 
     /* ═══════════════════════════════════════════════
-       §8  SIZING
+       §10 SIZING
        ═══════════════════════════════════════════════ */
     --size-icon-btn: 2.5rem;
+    --icon-xs: 0.75rem;
+    --icon-sm: 0.875rem;
+    --icon-md: 1rem;
+    --icon-lg: 1.25rem;
+    --icon-xl: 1.5rem;
+    /* V.W2 T9 — 32px rung; spinner glyphs (Loader2) + dense table-row buttons.
+       Naming follows the radius ladder + Tailwind convention (2xl > xl > xxl) —
+       see B6 §2.4 for the naming rationale. */
+    --icon-2xl: 2rem;
+    /* V.W2 T10 — 40px rung; empty-state hero glyph (DashboardMap MapIcon).
+       AI.W5-ζ — rebound from `2.5rem` literal to `var(--size-icon-btn)` so
+       the alignment is contractual single-source-of-truth rather than the
+       coincidental numerical match noted prior. */
+    --icon-3xl: var(--size-icon-btn);
+    /* V.W2 T11 — 56px rung; FlowSelector school/home survey-flow picker.
+       Largest rung in the icon ladder; reserved for hero-class glyphs. */
+    --icon-hero: 3.5rem;
+
+    /* Golden-ratio spacing rungs — φ² and φ³. Preemptive substrate; W4 hero
+       chassis + W5 StoryChassis migration land the consumers. R3 §A row 1.
+       The 0..4 rungs are not currently named (consumers reach via
+       Tailwind's spacing scale); 5/6 land here because their values fall
+       outside the default ladder and the audacious chassis pattern wants
+       a named handle. */
+    --space-phi-5: 2.618rem; /* φ² */
+    --space-phi-6: 4.236rem; /* φ³ */
 
     /* Dock geometry — consumers may override locally */
     --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px);
     --dock-margin: 0.5rem;
     --dock-menubar-reserve: 4rem;
 
-    /* ═══════════════════════════════════════════════
-       §8b  COMPONENT FONT OVERRIDES
-       Consumers override these locally.
-       ═══════════════════════════════════════════════ */
+    /* Dock active-state ladder (O.W6 Lane B)
+       Token-overridable active paint for `.dock-icon-button`. Promoted
+       from hardcoded `background: var(--muted); color: var(--foreground)`
+       per bbnf-buddy O11/c R1: 7 `:deep()` escapes at `ToolsLayer.vue`
+       redefine bg/color/scale/border/shadow on the active variant; the
+       ladder absorbs ~3 of 7 at a stroke. Defaults preserve the prior
+       visual contract (no transform, no border, no shadow) — overrides
+       take effect per-instance via `:root` or a parent scope, e.g.
+       `.tools-layer { --dock-active-scale: 1.2; --dock-active-bg: …; }`.
+       ≥ 2-consumer coverage: bbnf-buddy ToolsLayer (override consumer) +
+       speedtest dock (default consumer). */
+    --dock-active-bg: var(--muted);
+    --dock-active-color: var(--foreground);
+    --dock-active-scale: 1;
+    --dock-active-border: none;
+    --dock-active-shadow: none;
+
+    /* Q.W3 Lane G (Q-cos-13) — the O.W6 Lane D `--icon-tooltip-hit-area`
+       token retired here. IconTooltip no longer owns a wrap-span; the
+       slotted child carries its own WCAG 2.5.5 hit-area (interactive
+       children via their four-state contract, bare glyphs via a
+       `min-h-11 min-w-11` host). No orphaned token left behind. */
+
+    /* O.W6 Lane D — Dock touch-target floor. Mirrors the IconTooltip
+       hit-area but for the dock-control surface. The base value tracks
+       the desktop default (`--size-icon-btn`); the
+       `@media (pointer: coarse)` block at `dock.css` lifts it to the
+       WCAG 2.5.5 floor on touch devices. */
+    --dock-touch-target: 2.75rem; /* 44px */
+
+    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
+       (label / value+unit) wants a taller floor than the inline pill so the
+       label has breathing room above the baseline pair. T.W2.T2 +
+       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
+       min-height with 6px (0.375rem) block padding. The inline ladder
+       keeps its tight defaults via `--metric-badge-min-height` /
+       `--metric-badge-padding-block` (declared inline at the
+       `.metric-badge` selector). */
+    --metric-badge-min-height-stacked: 2.625rem;
+    --metric-badge-padding-block-stacked: 0.375rem;
+
+    /* Configurator — N.W2 Lane A density axis (4 rungs).
+       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
+       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
+       see no visual change. `mobile` halves the vertical breathing room
+       for narrow-viewport studios; `spacious` doubles it for settings-
+       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
+       selector binding. */
+    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
+    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
+    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
+    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
+
+    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
+    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
+    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
+    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
+
+    /* Component font override (consumers override locally) */
     --select-font: inherit;
 
     /* ═══════════════════════════════════════════════
-       §9  INTERACTIVE SCALE TRANSFORMS
+       §11 INTERACTIVE SCALES & FOCUS
        ═══════════════════════════════════════════════ */
     --scale-hover: 1.08;
     --scale-hover-dock: 1.1;
-    --scale-press: 0.95;
+    --scale-press: 0.96;
     --scale-press-dock: 0.92;
-    --scale-press-btn: 0.97;
 
-    /* ═══════════════════════════════════════════════
-       §10 FOCUS RING
-       ═══════════════════════════════════════════════ */
+    /* Press-scale — the canonical iOS Liquid Glass press value.
+       `--scale-press` (0.96) is the canonical rung every primitive
+       should reach for unless it has a documented reason — see
+       DESIGN.md §L3. `--scale-press-btn` (aliased to `--scale-press-sm`,
+       0.97) is the slightly-softer rung the legacy button + slider
+       recipes consume.
+
+       AL-W10 SLIM reconciliation (per audit G-W1-2 / G-W1-4 F-2):
+       the prior `--scale-press: 0.95` value drifted from the §L3
+       canonical 0.96 rung; the canon-amend lifts the token to match
+       the iOS `.regular` control rung the precept ratifies.
+
+       Q.W4 Lane D (Q-sty-5) retired the P.W4 `--scale-press-{xs,md,lg}`
+       rungs: the ladder was minted as preemptive consumer-facing
+       substrate for a words/frontend `active:scale-[X.XX]` absorption
+       that never landed — a fleet-wide grep (words/frontend, fourier,
+       bbnf-buddy, speedtest, keyframes.js + glass-ui src/) found zero
+       `var(--scale-press-{xs,md,lg})` consumers. Substrate-without-
+       consumer is binary (N invariant 23 / L invariant 8); the three
+       unused rungs are gone. `sm` is retained — `--scale-press-btn`
+       aliases it. */
+    --scale-press-sm: 0.97;
+    --scale-press-btn: var(--scale-press-sm);
+    --opacity-disabled: 0.5;
+    --opacity-icon-muted: 0.8;
+
     --focus-ring-width: 2px;
     --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 30%, transparent),
         0 0 8px color-mix(in srgb, var(--ring) 15%, transparent);
+    --focus-ring: var(--focus-ring-shadow);
 
     /* ═══════════════════════════════════════════════
-       §11 PAPER TEXTURES
+       §12 PAPER TEXTURES
        ═══════════════════════════════════════════════ */
-    --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
-    --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
+    /* Canonical subtle paper-texture opacity — restored from fourier-original
+       (`4df1a06:web/src/style.css:53-54`) after A.W3.5.ab confirmed the
+       heretofore `opacity='1'` URI rendered as an overt grain field in every
+       downstream consumer of `.paper-texture`. The SVG `opacity` attribute is
+       baked at parse-time and cannot read a CSS var, so the subtle value must
+       be inlined; if a consumer needs a heavier overlay, they should layer
+       a wrapper element with its own `opacity:`/`mix-blend-mode:` atop. */
+    --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+    --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
 
     /* ═══════════════════════════════════════════════
-       §9  DEFAULT COLOR PALETTE (consumers override locally)
+       §13 GOLD (accent family kept for consumers using it)
        ═══════════════════════════════════════════════ */
-    --background: hsl(0 0% 100%);
-    --foreground: hsl(222.2 84% 4.9%);
-    --muted: hsl(210 40% 96.1%);
-    --muted-foreground: hsl(215.4 16.3% 46.9%);
-    --popover: hsl(0 0% 100%);
-    --popover-foreground: hsl(222.2 84% 4.9%);
-    --card: hsl(0 0% 100%);
-    --card-foreground: hsl(222.2 84% 4.9%);
-    --border: hsl(214.3 31.8% 91.4%);
-    --input: hsl(214.3 31.8% 91.4%);
-    --primary: hsl(222.2 47.4% 11.2%);
-    --primary-foreground: hsl(210 40% 98%);
-    --secondary: hsl(210 40% 96.1%);
-    --secondary-foreground: hsl(222.2 47.4% 11.2%);
-    --accent: hsl(210 40% 96.1%);
-    --accent-foreground: hsl(222.2 47.4% 11.2%);
-    --destructive: hsl(0 84.2% 60.2%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --ring: hsl(222.2 84% 4.9%);
-    --shadow: hsl(0 0% 65%);
+    --gold: hsl(43 74% 49%);
+    --gold-light: hsl(51 100% 50%);
+    --gold-dark: hsl(34 87% 38%);
 
-    /* ═══════════════════════════════════════════════
-       §12 GOLD PALETTE
-       ═══════════════════════════════════════════════ */
-    --color-gold: hsl(43 74% 49%);
-    --color-gold-light: hsl(51 100% 50%);
-    --color-gold-dark: hsl(34 87% 38%);
+    --color-gold: var(--gold);
+    --color-gold-light: var(--gold-light);
+    --color-gold-dark: var(--gold-dark);
 
     /* ═══════════════════════════════════════════════
-       §13 RAINBOW PALETTE
+       §14 RAINBOW PALETTE
        ═══════════════════════════════════════════════ */
-
-    /* Rainbow vivid */
     --rainbow-red: hsl(0 85% 60%);
     --rainbow-orange: hsl(30 90% 55%);
     --rainbow-yellow: hsl(55 90% 55%);
@@ -275,7 +1066,6 @@
     --rainbow-indigo: hsl(260 70% 60%);
     --rainbow-violet: hsl(300 75% 60%);
 
-    /* Rainbow pastel */
     --rainbow-pastel-red: hsl(0 50% 78%);
     --rainbow-pastel-orange: hsl(25 55% 76%);
     --rainbow-pastel-yellow: hsl(50 55% 78%);
@@ -283,51 +1073,423 @@
     --rainbow-pastel-blue: hsl(220 45% 76%);
     --rainbow-pastel-indigo: hsl(260 35% 76%);
     --rainbow-pastel-violet: hsl(280 40% 78%);
+
+    /* ═══════════════════════════════════════════════
+       §16 TIMELINE
+       Timeline primitive tokens. All three variants (scrubber +
+       segmented + continuous) compose these. Both segmented + continuous
+       arrays carry the same `TimelineSegment[]` data shape; only the
+       rendering geometry differs. See DESIGN.md `## Timeline Primitive`.
+       ═══════════════════════════════════════════════ */
+
+    /* Heights — per-variant rail thickness */
+    --timeline-scrubber-height: 0.5rem;       /*  8px — single-track scrubber */
+    --timeline-segmented-height: 0.625rem;    /* 10px — N adjacent bands */
+    --timeline-continuous-height: 0.75rem;    /* 12px — ONE pill, N regions */
+
+    /* Geometry — shared across all variants */
+    --timeline-dot-size: 0.875rem;            /* 14px — boundary dot diameter (pointer: fine) */
+    --timeline-dot-size-touch: 1.25rem;       /* 20px — boundary dot diameter (pointer: coarse) */
+    --timeline-touch-target: 44px;            /* AC.W6d F2.I-04 — WCAG 2.5.5 target-size floor.
+                                                 The `::before` halo around each dot extends to
+                                                 this dimension so finger-precision users meet
+                                                 the (target-size: 44×44 minimum) clause without
+                                                 the visible dot growing to that footprint at
+                                                 pointer: fine. */
+    --timeline-segment-flex: 1 1 0;           /* per-cell flex distribution (segmented) */
+
+    /* Boundary-dot glass knobs (Q.W4 Lane B — promoted from
+       ContinuousTimeline.vue SFC fallbacks; `3cb70db` minted these as a
+       private dialect). The continuous-variant dot is a GLASS primitive:
+       a translucent tinted fill over a backdrop blur with a hairline
+       ring. These knobs let consumers retune the resting glass + the
+       per-state tints without a `:deep()` reach.
+         fill            — resting translucent fill
+         blur            — backdrop blur tier behind the dot
+         ring            — hairline glass ring (border-color)
+         tint-current    — wash colour for the active-phase dot
+         tint-completed  — wash colour for the completed-phase dot
+         check-color     — completion-tick stroke (defaults to the
+                           completed tint) */
+    --timeline-dot-fill: var(--surface-tint-12);
+    --timeline-dot-blur: var(--glass-blur-quiet);
+    --timeline-dot-ring: var(--glass-border-floating);
+    --timeline-dot-tint-current: var(--accent, var(--foreground));
+    --timeline-dot-tint-completed: var(--success, var(--foreground));
+    --timeline-dot-check-color: var(--timeline-dot-tint-completed);
+
+    /* Continuous-variant specific — seam dividers between regions.
+       Set `--timeline-continuous-seam-opacity: 0` to suppress the
+       inter-region 1px dividers entirely. Default `0.25` reads as a
+       subtle hairline; the `--timeline-continuous-seam-color` knob lets
+       consumers override the seam tint independently of opacity. */
+    --timeline-continuous-seam-opacity: 0.25;
+    --timeline-continuous-seam-color: color-mix(
+        in srgb,
+        var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%),
+        transparent
+    );
+
+    /* Per-segment default gradient fallback — applied when a segment
+       omits its `gradient` field. Consumers can override per-phase via
+       the `--timeline-segment-gradient-{key}` knobs below. */
+    --timeline-segment-default-gradient: linear-gradient(
+        90deg,
+        var(--surface-tint-15),
+        var(--surface-tint-25)
+    );
+
+    /* Per-phase gradient defaults — paint the canonical chart palette
+       at the gradient leading edge, fading to a 60%-opacity tail. The
+       speedtest consumer wires these via `gradient: "var(--timeline-segment-gradient-ping)"`
+       per segment; the same names work for any consumer who follows the
+       ping/download/upload/jitter taxonomy. */
+    --timeline-segment-gradient-ping: linear-gradient(
+        90deg,
+        var(--chart-ping),
+        color-mix(in srgb, var(--chart-ping) 60%, transparent)
+    );
+    --timeline-segment-gradient-download: linear-gradient(
+        90deg,
+        var(--chart-download),
+        color-mix(in srgb, var(--chart-download) 60%, transparent)
+    );
+    --timeline-segment-gradient-upload: linear-gradient(
+        90deg,
+        var(--chart-upload),
+        color-mix(in srgb, var(--chart-upload) 60%, transparent)
+    );
+    --timeline-segment-gradient-jitter: linear-gradient(
+        90deg,
+        var(--chart-jitter),
+        color-mix(in srgb, var(--chart-jitter) 60%, transparent)
+    );
+
+    /* ═══════════════════════════════════════════════
+       §17 METRIC
+
+       MetricRow / MetricStack value-clamp dialect. The post-P
+       `9ba68ca` + `d244dd5` commits introduced this 8-token family
+       (plus the P.W5 Lane A.1 MetricRow clamp work) as a private SFC
+       dialect — the defaults lived as `var(…, fallback)` literals
+       scattered across MetricRow.vue / MetricStack.vue, never
+       discoverable or `:root`-overridable. Q.W4 Lane A promotes the
+       whole family here per the DESIGN.md feature-token-home rule;
+       the SFCs now consume them bare.
+
+       The declared values ARE the `audacious` poster register — the
+       hero-scale clamp for a single giant number the user watches
+       climb. MetricStack's `[data-register="result"]` scoped selector
+       legitimately overrides this register-locally for the compact
+       multi-row ledger; that override now retunes a globally declared
+       default rather than minting a fallback.
+
+       Three clamp arms each: `min` (floor), `cqi` (the binding
+       container-query middle term), `max` (ceiling). value + label
+       carry all three; unit carries min/max only (its cqi coefficient
+       is a fixed 6cqi, not consumer-tuned).
+       ═══════════════════════════════════════════════ */
+
+    /* Value register — audacious-poster hero clamp */
+    --metric-row-value-clamp-min: 4.5rem;
+    --metric-row-value-clamp-cqi: 34cqi;
+    --metric-row-value-clamp-max: var(--type-display-hero);
+
+    /* Unit register — one tier below the value it qualifies */
+    --metric-row-unit-clamp-min: 1.5rem;
+    --metric-row-unit-clamp-max: 3.25rem;
+
+    /* Label register — uppercase, the binding row-height term in the
+       compact `result` register */
+    --metric-row-label-clamp-min: 1.125rem;
+    --metric-row-label-clamp-cqi: 5cqi;
+    --metric-row-label-clamp-max: 2.75rem;
+
+    /* ═══════════════════════════════════════════════
+       §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM —
+       AK.W3 / FD1 TRANSPOSITION 5 absorb.
+
+       The under-meter progress bar nests INTO the dial's painted-disc
+       bound (FD2 §5.2) and any two stacked progress rails inside a
+       cluster share the same vertical rhythm token. Both tokens were
+       authored speedtest-local (`AJ.W3-α`, `AJ.W3-μ.3`) but the design
+       intent is library-canon: the instrument-chassis family owns the
+       under-meter / progress-cluster grammar, so the tokens absorb here
+       at AK.W3. Speedtest reads transitively through the canon.
+
+       AM-W7-δ — `--meter-progress-gap` RETIRED (dead-canon). It was
+       absorbed pre-emptively at AK.W3 for a post-nest "meter ↔ per-phase
+       progress-bar gap" composition that never materialised: speedtest's
+       bar uses the negative `--meter-progress-inset` instead, and a
+       fleet grep (glass-ui src/ + demo + speedtest) found ZERO `var()`
+       consumers (only doc references in pre-AL/pre-AK audits flagging it
+       as G-AL-D-METER-PROGRESS-GAP-DEAD-CANON, routed to retire). Per
+       NO-legacy-code it is removed rather than kept as speculative
+       forward-compat reservation; a future glass-ui Meter primitive that
+       needs the gap re-authors it at its real consumer.
+
+       • `--meter-progress-inset` — the negative-margin inset that pulls
+         the under-meter bar INTO the unpainted ring lane around the
+         dial canvas (~4% of meter-size, two-thirds of the way through
+         the lane). Consumed at `.phase-progress` with `margin-block-
+         start: calc(-1 * var(--meter-progress-inset))`.
+       • `--progress-stack-gap` — vertical rhythm between any two stacked
+         progress rails inside one cluster (the under-meter bar cluster
+         + the global PhaseTimeline siblinged at W3-β).
+
+       The `--meter-size` reference inside the inset clamp resolves
+       against the consumer's own `--meter-size` declaration; when no
+       consumer ships one (a non-speedtest demo of the chassis), the
+       inline fallback of 200px keeps the calc well-defined. */
+    --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04);
+    --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem);
+
+    /* ═══════════════════════════════════════════════
+       §2.E CELEBRATION-TIER REGISTER — AK.W3 / FD1
+       TRANSPOSITION 5 absorb.
+
+       The celebration cluster (speedtest "Complete!" headline,
+       ThankYou's "Thanks for taking the time" headline) is a SHARED
+       peak across multiple consumer surfaces. Before AK.W3 these
+       tokens were speedtest-local (`AJ.W3-μ.4`, W2-C headline-parity)
+       but the design intent is library-canon: any glass-ui consumer
+       composing a "completion" / "thank-you" surface should reach
+       for the same row-rhythm + headline-ceiling pair.
+
+       • `--celebration-row-rhythm` — gap between the celebration
+         cluster's rows (cqi-axis so the rhythm tracks the card's
+         intrinsic width).
+       • `--text-celebration-headline-size` — the SINGLE designed peak
+         both celebration surfaces clamp toward (the W2-C unification).
+         cqi-axis so the size tracks each card's intrinsic width.
+       • `--complete-headline-size` — the per-consumer FONT-SIZE HOOK
+         that `CompleteHeadline.vue` reads (`font-size:
+         var(--complete-headline-size, …)`). Each consumer assigns the
+         canon clamp (`--text-celebration-headline-size`) to this hook
+         at the container so the headline pegs at the shared peak.
+         The default falls back to a smaller hero-rung clamp for
+         consumers that haven't opted into the celebration ceiling. */
+    --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem);
+    --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem);
+    --complete-headline-size: clamp(2.25rem, 11cqi, 4rem);
+
+    /* ═══════════════════════════════════════════════
+       §19 TABLE DENSITY
+
+       A single unitless knob `--table-density` scales the cell
+       padding and header row height of the Table / DataTable
+       primitive. Default `1` is backward-compatible (resolves to
+       the same `1rem` cell padding and `3rem` header height as the
+       pre-knob hardcoded values). Consumers set this on a wrapping
+       element or on `:root` to tune density for their context:
+
+         • 0.75 — compact admin table (tighter rows, more data/screen)
+         • 1    — default (unchanged)
+         • 1.25 — comfortable / touch-friendly rows
+
+       The derived tokens are read by the `table-cell` and `table-head`
+       CSS utilities (utilities.css) which TableCell.vue and TableHead.vue
+       consume instead of the former Tailwind `p-4` / `h-12` literals.
+       Changing `--table-density` cascades instantly via CSS inheritance —
+       no JS prop is needed.
+       ═══════════════════════════════════════════════ */
+    --table-density: 1;
+    --table-cell-px: calc(1rem * var(--table-density));
+    --table-cell-py: calc(1rem * var(--table-density));
+    --table-head-h: calc(3rem * var(--table-density));
+    --table-head-px: calc(1rem * var(--table-density));
 }
 
 /* ═══════════════════════════════════════════════
-   §10  DEFAULT DARK MODE (consumers override locally)
+   DARK MODE — warm dark, section palette brightened ~20% L
    ═══════════════════════════════════════════════ */
 .dark {
-    /* Glass opacity boosted for dark backgrounds */
-    --glass-opacity-subtle:   0.42;
-    --glass-opacity-default:  0.58;
-    --glass-opacity-medium:   0.72;
-    --glass-opacity-elevated: 0.88;
+    /* Neutral scale mirrors light-mode pattern: step UP from the background's
+       low L toward foreground. Same perceptual deltas as light. */
+    --neutral-0: hsl(24 8% 6%);    /* L 6  — page surface (dark) */
+    --neutral-1: hsl(24 6% 11%);   /* L 11 — soft field */
+    --neutral-2: hsl(24 5% 16%);   /* L 16 — chip / tab-inactive */
+    --neutral-3: hsl(24 5% 22%);   /* L 22 — hover / highlight */
+    --neutral-4: hsl(24 5% 34%);   /* L 34 — subtle border */
+    --neutral-5: hsl(48 5% 62%);   /* L 62 — muted text (WCAG AA: 7.39:1 vs L6 page / 6.58:1 vs L11 muted) */
+    /* W7-α' (AK-FD1) — strong-muted text. Same principled ladder step as
+       light, mirrored: 10 L LIGHTER than muted (62→72) toward --foreground
+       (L90), the 1/3 point of the L62→L90 muted→primary gap. By-colour; hue
+       48, sat nudged 5→6. WCAG AA: 9.86:1 vs L6 page / 8.78:1 vs L11 muted
+       (cf. neutral-5's 7.39:1). */
+    --neutral-6: hsl(48 6% 72%);   /* L 72 — strong-muted text (secondary register) */
+
+    --background: var(--neutral-0);
+    --foreground: hsl(48 10% 90%);
+    --card: hsl(24 8% 10%);
+    --card-foreground: var(--foreground);
+    --popover: hsl(24 8% 10%);
+    --popover-foreground: var(--foreground);
+
+    --muted: var(--neutral-1);
+    --muted-foreground: var(--neutral-5);
+    /* W7-α' (AK-FD1) — strong-muted secondary text. Auto-tracks the dark
+       neutral-6 rung above; by-colour, not alpha. */
+    --muted-foreground-strong: var(--neutral-6);
+    --secondary: var(--neutral-2);
+    --secondary-foreground: var(--foreground);
+    --accent: var(--neutral-3);
+    --accent-foreground: var(--foreground);
+
+    --border: var(--neutral-4);
+    --input: var(--neutral-4);
+
+    --primary: hsl(48 10% 90%);
+    --primary-foreground: hsl(24 10% 10%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(48 10% 90%);
+    --ring: hsl(48 10% 70%);
+    --shadow: hsl(0 0% 5%);
+
+    /* Section palette — brightened for dark backgrounds */
+    --section-color-0:  hsl(334 72% 70%);
+    --section-color-1:  hsl(272 54% 73%);
+    --section-color-2:  hsl(224 67% 72%);
+    --section-color-3:  hsl(194 61% 64%);
+    --section-color-4:  hsl(163 50% 60%);
+    --section-color-5:  hsl(37 73% 67%);
+    --section-color-6:  hsl(6 77% 66%);
+    --section-color-7:  hsl(286 58% 72%);
+    --section-color-8:  hsl(342 71% 69%);
+    --section-color-9:  hsl(205 24% 70%);
+    --section-color-10: hsl(86 44% 63%);
+    --section-color-11: hsl(187 63% 65%);
+    --section-color-12: hsl(256 60% 74%);
+
+    --accent-pink: hsl(335 55% 65%);
+    --section-heading: hsl(330 55% 68%);
+    --accent-red: hsl(0 68% 62%);
+
+    --viz-fourier:   hsl(6 77% 66%);
+    --viz-chebyshev: hsl(224 67% 72%);
+    --viz-legendre:  hsl(286 58% 72%);
+    --viz-amber:     var(--section-color-5);
+    --viz-green:     var(--section-color-4);
 
-    --glass-grain-opacity: 0.06;
+    /* O.W6 Lane D — WCAG companion labels lift to L≈0.85 against the
+       deep dark canvas; same two-token discipline as light mode (canvas
+       hue preserved at `--chart-*`; only the label register shifts). */
+    --chart-ping-label:     oklch(0.85 0.12 230);
+    --chart-download-label: oklch(0.85 0.14 22);
+    --chart-upload-label:   oklch(0.85 0.12 55);
+    --chart-jitter-label:   oklch(0.85 0.14 305);
+
+    /* O.W6 Lane D — Meter track stroke dark companion. Mirrors `:root`
+       (was speedtest's consumer-side `var(--background)` — bg-on-bg
+       invisible at dark mode; F1.V-02 closure). */
+    --meter-track-stroke: var(--foreground);
+
+    --tier-featured: hsl(45 100% 60%);
+    --tier-saved:    hsl(210 100% 70%);
+    --like:          hsl(0 80% 68%);
+    --success:       hsl(142 71% 58%);
+    --warning:       hsl(38 92% 60%);
+    --info:          hsl(217 91% 70%);
+    --delete:        hsl(0 70% 62%);
+
+    /* Semantic foregrounds — off-white over dark plates. Mirrors the
+       `--destructive-foreground` dark pattern (hsl 48 10% 90%). The warning
+       glyph stays dark-on-amber; the dark amber rung is luminous enough that
+       a darker glyph still reads (matches light-mode behaviour). */
+    --success-foreground: hsl(48 10% 96%);
+    --warning-foreground: hsl(24 10% 10%);
+    --info-foreground:    hsl(48 10% 96%);
+
+    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 6%, transparent);
+    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
+    --shadow-soft:     0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
+    --shadow-modal:
+        4px 4px 0px 0px color-mix(in srgb, var(--foreground) 6%, transparent),
+        0 24px 64px color-mix(in srgb, var(--foreground) 18%, transparent);
+
+    --shadow-cartoon-color:            rgb(255 255 255 / 0.07);
+    --shadow-cartoon-color-soft:       rgb(255 255 255 / 0.03);
+
+    /* 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. */
+    --glass-opacity-wash:     0.38;
+    --glass-opacity-quiet:    0.58;
+    --glass-opacity-resting:  0.72;
+    --glass-opacity-floating: 0.88;
+    --glass-opacity-overlay:  0.96;
+    --glass-opacity-chassis:  0.36;
+    --glass-grain-opacity: 0.045;
     --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08);
 
-    --background: hsl(224 71% 4%);
-    --foreground: hsl(210 40% 98%);
-    --muted: hsl(217.2 32.6% 17.5%);
-    --muted-foreground: hsl(215 20.2% 65.1%);
-    --popover: hsl(224 71% 4%);
-    --popover-foreground: hsl(210 40% 98%);
-    --card: hsl(224 50% 10%);
-    --card-foreground: hsl(210 40% 98%);
-    --border: hsl(216 34% 17%);
-    --input: hsl(216 34% 17%);
-    --primary: hsl(210 40% 98%);
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
-    --secondary: hsl(217.2 32.6% 17.5%);
-    --secondary-foreground: hsl(210 40% 98%);
-    --accent: hsl(217.2 32.6% 17.5%);
-    --accent-foreground: hsl(210 40% 98%);
-    --destructive: hsl(0 72% 50%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --ring: hsl(212.7 26.8% 83.9%);
-    --shadow: hsl(0 0% 10%);
-    --shadow-card: 4px 4px 0px 0px color-mix(in srgb, var(--shadow-color) 85%, transparent);
-    --shadow-card-hover: 5px 5px 0px 0px color-mix(in srgb, var(--shadow-color) 95%, transparent);
-
-    --shadow-cartoon-color: rgb(255 255 255 / 0.07);
-    --shadow-cartoon-color-soft: rgb(255 255 255 / 0.03);
-    --shadow-cartoon-color-hover: rgb(255 255 255 / 0.10);
-    --shadow-cartoon-color-hover-soft: rgb(255 255 255 / 0.05);
-
-    /* Gold — boosted for dark backgrounds */
-    --color-gold: hsl(43 74% 55%);
-    --color-gold-light: hsl(51 100% 55%);
-    --color-gold-dark: hsl(34 87% 45%);
+    /* Hairline-accent dark mirror — see light counterpart at line ~404. */
+    --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.05);
+    --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06);
+
+    /* Specular + curvature — softened for dark backdrops. Disco-grain stays
+       at the same opacity ceiling; the dark grain blend already lifts it. */
+    --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30);
+    --glass-curvature-overlay: radial-gradient(
+        ellipse at 50% -20%,
+        hsl(0 0% 100% / 0.06),
+        transparent 60%
+    );
+
+    /* Gold — boosted for dark */
+    --gold: hsl(43 74% 55%);
+    --gold-light: hsl(51 100% 55%);
+    --gold-dark: hsl(34 87% 45%);
+}
+
+/* ═══════════════════════════════════════════════
+   §18 TYPED CSS PROPERTIES — Houdini @property registrations
+   (AI.W4 grammar — adjacent to §2.C tokens above)
+
+   Three typed custom properties register with the CSS Houdini @property
+   API so transitions interpolate VALUES (percentage / length) rather
+   than the textual representation. Unregistered fallback is safe — the
+   `initial-value` provides a sensible default for any consumer that
+   imports this stylesheet on a browser that doesn't yet support the
+   typed @property registration (the cross-fade collapses to the
+   initial value, then re-paints at the new state).
+
+   Browser support: Chromium 85+, Safari 16.4+, Firefox 128+. The
+   speedtest deployment target sits well within the floor.
+
+   • --progress-crescendo (percentage) — the leading-edge brightness
+     ramp on `<Progress variant="gradient">` past 85% modelValue.
+     `inherits: false` because the value is consumed at one
+     declaration only (the gradient stop calculation); inheriting
+     would let an unrelated ancestor accidentally drive a sibling
+     progress bar.
+
+   • --phase-tint-amount (percentage) — the chassis depth-of-tint
+     companion to `--phase-color`. `inherits: true` because the
+     value cascades from the chassis root through every region
+     wrapper that reads it for a sympathetic tint (matches the
+     `--phase-color` inheritance pattern).
+
+   • --ripple-radius (length) — the `btn-audacious` press ripple
+     radial. `inherits: false` because each button owns its own
+     ripple state (a hovered parent must not push a ripple-radius
+     onto a non-pressed child).
+   ═══════════════════════════════════════════════ */
+
+@property --progress-crescendo {
+    syntax: "<percentage>";
+    inherits: false;
+    initial-value: 0%;
+}
+
+@property --phase-tint-amount {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
+}
+
+@property --ripple-radius {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
 }