@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/transitions.css

@@ -1,263 +1 @@
-/* Reusable Vue <Transition> class sets.
- *
- * Q.W4 Lane C (Q-sty-4): these class rules are wrapped in
- * `@layer components` so they share the cascade layer of every other
- * recipe sheet. Unlayered rules land in the implicit unlayered origin,
- * which outranks every `@layer` block at equal specificity — an
- * asymmetry that let a Vue <Transition> class silently outrank a
- * `@layer components` recipe. `animations.css` stays unlayered (pure
- * `@keyframes`, layer-agnostic by spec). */
-
-@layer components {
-    /* ── Fade (symmetric, fast) ── */
-    .fade-enter-active,
-    .fade-leave-active {
-        transition: opacity var(--duration-fast) var(--ease-standard);
-    }
-    .fade-enter-from,
-    .fade-leave-to {
-        opacity: 0;
-    }
-
-    /* ── Fade-slide (spring in, accelerate out) ── */
-    .fade-slide-enter-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-out),
-            transform var(--spring-smooth-duration) var(--spring-smooth);
-    }
-    .fade-slide-leave-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-in),
-            transform var(--duration-fast) var(--ease-in);
-    }
-    .fade-slide-enter-from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    .fade-slide-leave-to {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-
-    /* ── Dialog scale (bouncy spring in, ease out) ── */
-    .dialog-scale-enter-active {
-        transition:
-            opacity var(--duration-slow) var(--ease-out),
-            transform var(--spring-bouncy-duration) var(--spring-bouncy);
-    }
-    .dialog-scale-leave-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-standard),
-            transform var(--duration-normal) var(--ease-standard);
-    }
-    .dialog-scale-enter-from {
-        opacity: 0;
-        transform: scale(0.95) translateY(8px);
-    }
-    .dialog-scale-leave-to {
-        opacity: 0;
-        transform: scale(0.95) translateY(8px);
-    }
-
-    /* ── Spring pop (bouncy in, fast out) ── */
-    .pop-enter-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-out),
-            transform var(--spring-bouncy-duration) var(--spring-bouncy);
-    }
-    .pop-leave-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-out),
-            transform var(--duration-fast) var(--ease-out);
-    }
-    .pop-enter-from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    .pop-leave-to {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    /* ── Dropdown (fast opacity + snappy spring transform) ── */
-    .dropdown-enter-active {
-        transition:
-            opacity var(--duration-instant) var(--ease-out),
-            transform var(--spring-snappy-duration) var(--spring-snappy);
-    }
-    .dropdown-leave-active {
-        transition:
-            opacity var(--duration-instant) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
-    }
-    .dropdown-enter-from,
-    .dropdown-leave-to {
-        opacity: 0;
-        transform: scale(0.96) translateY(4px);
-    }
-
-    /* ── Tab fade ── */
-    .tab-fade-enter-active,
-    .tab-fade-leave-active {
-        transition: opacity var(--duration-fast) var(--ease-standard);
-    }
-    .tab-fade-enter-from,
-    .tab-fade-leave-to {
-        opacity: 0;
-    }
-
-    /* ── Pane swap (horizontal content replacement, mode="out-in") ── */
-    .pane-swap-enter-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-out),
-            transform var(--spring-smooth-duration) var(--spring-smooth);
-    }
-    .pane-swap-leave-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--ease-out);
-    }
-    .pane-swap-enter-from {
-        opacity: 0;
-        transform: translateX(0.75rem);
-    }
-    .pane-swap-leave-to {
-        opacity: 0;
-        transform: translateX(-0.75rem);
-    }
-
-    /* ── Metric swap (compact number/value crossfade) ── */
-    .metric-swap-enter-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-out),
-            transform var(--spring-smooth-duration) var(--spring-smooth);
-    }
-    .metric-swap-leave-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
-    }
-    .metric-swap-enter-from,
-    .metric-swap-leave-to {
-        opacity: 0;
-        transform: translateY(0.375rem) scale(0.95);
-    }
-
-    /* ── Dock entrance utility ── */
-    .dock-in {
-        animation: dock-in var(--spring-snappy-duration) var(--spring-snappy) both;
-        transform-origin: center bottom;
-    }
-
-    /* ── Toast contract (AI.W4-M.3 doc; no source motion change) ──
-     *
-     * `<Toast>` (reka-ui-backed `ToastRoot`, see
-     * `components/ui/toast/Toast.vue`) consumes reka's
-     * `tw-animate-css` choreography directly through the
-     * `data-[state=open]:animate-in` / `data-[state=closed]:animate-out`
-     * + `data-[state=open]:slide-in-from-{top,bottom}-full` +
-     * `data-[state=closed]:fade-out-80 / slide-out-to-right-full`
-     * class chain. The contract that emerges from those defaults is
-     * the canonical entrance / dwell / exit grammar:
-     *
-     *   • ENTRANCE — slide-in from the viewport edge (top on mobile,
-     *     bottom on desktop ≥ sm), opacity 0 → 1, ~200ms with the
-     *     `tw-animate-css` ease-out curve. The slide direction is the
-     *     viewport origin so the toast reads as "arriving from
-     *     somewhere", not as "popping in from nowhere".
-     *
-     *   • DWELL — no motion. The toast sits at its rest position for
-     *     the consumer-specified `duration` (default 5000ms via
-     *     `use-toast.ts` `TOAST_REMOVE_DELAY`). The dwell is the
-     *     READING window; any motion here competes with the user's
-     *     read.
-     *
-     *   • EXIT — fade-out (opacity 1 → 0.2) combined with a
-     *     slide-out-to-right (the canonical "swipe-end-mimicking"
-     *     direction), ~150ms. The right-out direction lets a
-     *     timeout-driven exit feel like a swipe even when the user
-     *     didn't swipe; consistency with the swipe-end gesture
-     *     (`data-[swipe=end]`).
-     *
-     * Per the FD2 §4 rule (HANDOFF-AS-DRAIN-THEN-FILL): the toast
-     * itself does NOT drain-then-fill (single notification, single
-     * surface). The grammar is single-event entrance + dwell + exit;
-     * the next toast (if any) enters on its own contract.
-     *
-     * §6 EASING-DOCTRINE EXEMPTION (AY.W-MOTION — DELIBERATE KEEP).
-     * Every glass-ui-OWNED entrance surface (`dialog-scale`, `pop`,
-     * `dropdown`, `fade-slide`, `dock-in`) rides the house `--spring-*`
-     * enter / `--ease-out`/`--ease-standard` exit vocabulary (the §6
-     * doctrine, tokens.css:162-190). The Toast does NOT — and that is
-     * BY DESIGN, not an unexamined default. The reka-ui `ToastRoot`
-     * primitive OWNS its data-state choreography: the entrance slide
-     * direction tracks the viewport origin AND the swipe-end gesture
-     * (`data-[swipe=end]:slide-out-to-right-full`), so the entrance/exit
-     * are coupled to reka's `tw-animate-css` data-state machinery. The §6
-     * spring vocabulary governs glass-ui-OWNED surfaces; the reka-Toast
-     * entrance is not one — re-authoring it onto a `<Transition>` would
-     * fork the primitive's swipe-coupled contract (and `tw-animate-css`
-     * is the shipped optionalPeer this contract depends on). The gate
-     * (proof:animation-coherence) carries the Toast surface in its
-     * REGISTER_ASSIGNMENT_ALLOW set so this keep reads as a gated,
-     * deliberate exemption.
-     *
-     * PRM is honoured at the `@media (prefers-reduced-motion: reduce)`
-     * block below — the slide motion retires; the fade-in/out
-     * remains. No source motion change; this comment block IS the
-     * documentation closure for the toast contract row.
-     */
-
-    /* ── Reduced motion: preserve fades, remove transform/scale motion ── */
-    @media (prefers-reduced-motion: reduce) {
-        .fade-enter-active,
-        .fade-leave-active,
-        .tab-fade-enter-active,
-        .tab-fade-leave-active,
-        .pane-swap-enter-active,
-        .pane-swap-leave-active,
-        .metric-swap-enter-active,
-        .metric-swap-leave-active {
-            /* Fades are safe — keep them but shorten */
-            transition-duration: 0.1s !important;
-        }
-
-        .fade-slide-enter-active,
-        .fade-slide-leave-active,
-        .dialog-scale-enter-active,
-        .dialog-scale-leave-active,
-        .pop-enter-active,
-        .pop-leave-active,
-        .dropdown-enter-active,
-        .dropdown-leave-active,
-        .pane-swap-enter-active,
-        .pane-swap-leave-active,
-        .metric-swap-enter-active,
-        .metric-swap-leave-active {
-            /* Keep opacity transition, eliminate transform motion */
-            transition-property: opacity !important;
-            transition-duration: 0.15s !important;
-            animation-duration: 0.01ms !important;
-        }
-
-        .fade-slide-enter-from,
-        .fade-slide-leave-to,
-        .dialog-scale-enter-from,
-        .dialog-scale-leave-to,
-        .pop-enter-from,
-        .pop-leave-to,
-        .dropdown-enter-from,
-        .dropdown-leave-to,
-        .pane-swap-enter-from,
-        .pane-swap-leave-to,
-        .metric-swap-enter-from,
-        .metric-swap-leave-to {
-            transform: none !important;
-        }
-
-        .dock-in {
-            animation-duration: 0.01ms !important;
-            transform: none !important;
-        }
-    }
-}
+@layer components { .fade-enter-active, .fade-leave-active { transition: opacity var(--duration-fast) var(--ease-standard); } .fade-enter-from, .fade-leave-to { opacity: 0; } .route-enter { animation: gl-route-enter var(--spring-snappy-duration) var(--spring-snappy) backwards; } .tab-fade-enter-active, .tab-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-standard); } .tab-fade-enter-from, .tab-fade-leave-to { opacity: 0; } .pane-swap-enter-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--spring-smooth-duration) var(--spring-smooth); } .pane-swap-leave-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .pane-swap-enter-from { opacity: 0; transform: translateX(0.75rem); } .pane-swap-leave-to { opacity: 0; transform: translateX(-0.75rem); } .metric-swap-enter-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--spring-smooth-duration) var(--spring-smooth); } .metric-swap-leave-active { transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .metric-swap-enter-from, .metric-swap-leave-to { opacity: 0; transform: translateY(0.375rem) scale(0.95); } .dock-in { animation: dock-in var(--spring-snappy-duration) var(--spring-snappy) both; transform-origin: center bottom; } @media (prefers-reduced-motion: reduce) { .fade-enter-active, .fade-leave-active, .tab-fade-enter-active, .tab-fade-leave-active, .pane-swap-enter-active, .pane-swap-leave-active, .metric-swap-enter-active, .metric-swap-leave-active { transition-duration: 0.1s !important; } .pane-swap-enter-active, .pane-swap-leave-active, .metric-swap-enter-active, .metric-swap-leave-active { transition-property: opacity !important; transition-duration: 0.15s !important; animation-duration: 0.01ms !important; } .pane-swap-enter-from, .pane-swap-leave-to, .metric-swap-enter-from, .metric-swap-leave-to { transform: none !important; } .dock-in { animation-duration: 0.01ms !important; transform: none !important; } .route-enter { animation: gl-route-fade var(--duration-fast) var(--ease-out) backwards; } } } @keyframes gl-route-enter { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } @keyframes gl-route-fade { from { opacity: 0; } to { opacity: 1; } }

package/dist/styles/typography/scale.css

@@ -1,153 +1 @@
-/* typography/scale.css — the OFL face FILES + the :root --type-* SCALE tokens.
- *
- * Carved from typography.css (BA.W-CARVE2) — the FACE declarations (the
- * calibrated `local()` fallback faces for Plus Jakarta Sans + Fira Code) and
- * the √φ scale-number :root block. @import-ed FIRST by the typography.css thin
- * root (the faces + scale numbers must precede the semantic classes that read
- * them). The carve moves rules in the SAME cascade position → byte-isomorphic
- * dist (the no-god-module import-order gate is the witness). */
-
-/* ═══════════════════════════════════════════════
-   OFL FACE FILES — Plus Jakarta Sans (brand display)
-   ═══════════════════════════════════════════════ */
-
-/* The payload-bearing "Plus Jakarta Sans" faces live in `fonts.css`
-   (`@mkbabb/glass-ui/styles/fonts`), split off the critical entry path so
-   `./styles` does not carry the ~99 KB-gzipped font binary. The calibrated
-   `local()` fallback face below carries NO payload, stays on the critical
-   path, and paints during the `font-display: optional` window. Its metric
-   overrides (per system face) were derived via @capsizecss/core's
-   `createFontStack` against the bundled latin woff2 — the swap is metrically
-   neutral (no CLS). */
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src:
-        local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"),
-        local("-apple-system");
-    ascent-override: 92.3784%;
-    descent-override: 19.7572%;
-    size-adjust: 112.3639%;
-}
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src: local("Segoe UI"), local("SegoeUI");
-    ascent-override: 98.3348%;
-    descent-override: 21.0311%;
-    size-adjust: 105.5577%;
-}
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src: local("Roboto Regular"), local("Roboto-Regular");
-    ascent-override: 98.6597%;
-    descent-override: 21.1006%;
-    size-adjust: 105.2101%;
-}
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src: local("Arial"), local("ArialMT");
-    ascent-override: 98.8763%;
-    descent-override: 21.147%;
-    line-gap-override: 0%;
-    size-adjust: 104.9796%;
-}
-
-/* ═══════════════════════════════════════════════
-   OFL FACE FILES — Fira Code (canonical mono)
-   ═══════════════════════════════════════════════ */
-
-/* The payload-bearing "Fira Code" faces live in `fonts.css`
-   (`@mkbabb/glass-ui/styles/fonts`), split off the critical entry path. The
-   calibrated `local()` fallback face below carries NO payload, stays on the
-   critical path, and covers the `font-display: swap` window. Its metric
-   overrides reference Roboto Mono (the platform monos cluster within ~2%);
-   size-adjust ≈ 1.0 makes the swap geometrically transparent. */
-@font-face {
-    font-family: "Fira Code Fallback";
-    src:
-        local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"),
-        local("Courier New"), local("Roboto Mono Regular");
-    ascent-override: 99.0161%;
-    descent-override: 32.2052%;
-    size-adjust: 99.9837%;
-}
-
-:root {
-    /* 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 — fixed sub-control micro (NOT fluid) */
-    --type-micro: 0.6875rem; /* 11px — fixed sub-control micro (NOT fluid) */
-    /* BODY/CONTROL register (AY.W-SCALE1 — the desktop-fluid half of corpus #4):
-       a GENTLE clamp() viewport base so the control/body register grows ~1-2 steps
-       on a wide display (the 27" "font too small" the user flagged) WITHOUT a
-       media-query staircase. The <min> of every clamp is the rung's prior fixed rem
-       — byte-identical at narrow/mobile (no shipped-narrow reflow; the coarse 1.5×
-       --ui-scale still lifts the comfort axis ON TOP). The vw slope is the body
-       register's GENTLE slope (not the φ-display ladder's aggressive vw) — the
-       "non-contrived" bar. The vw fluid term lives HERE (the typographic base),
-       exactly ONCE; the --ui-scale comfort scalar multiplies it exactly ONCE LATER
-       (tokens.css --control-text/-sm) — NO double-vw under coarse. The φ-identity
-       rungs below (--type-subheading/-heading/-title + the --type-display-* ladder)
-       are EXCLUDED — a hero/title is a typographic identity, not a control. */
-    --type-caption: clamp(
-        0.75rem,
-        0.71rem + 0.21vw,
-        1rem
-    ); /* 12px floor — --control-text-sm source */
-    --type-small: clamp(
-        0.875rem,
-        0.8rem + 0.25vw,
-        1.25rem
-    ); /* 14px floor — --control-text source (the workhorse) */
-    --type-body: clamp(
-        1rem,
-        0.92rem + 0.27vw,
-        1.375rem
-    ); /* 16px floor — global body cascade */
-    --type-prose: clamp(
-        1.125rem,
-        1.04rem + 0.28vw,
-        1.5rem
-    ); /* 18px floor — long-form prose */
-    --type-subheading: 1.272rem; /* 20.4px — √φ */
-    --type-heading: 1.618rem; /* 25.9px — φ */
-    --type-title: 2.058rem; /* 32.9px — φ^(3/2) */
-    --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); /* φ^2 */
-    --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); /* φ^(5/2) */
-    --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); /* φ^3 */
-    --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); /* φ^(7/2) */
-    --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); /* φ^4 */
-    /* 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. */
-    --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) */
-
-    /* Line heights & letter spacing live at tokens.css §0 as the canonical
-       --type-leading-* / --type-tracking-* rungs. theme.css bridges them
-       to Tailwind's `leading-*` / `tracking-*` utilities. The duplicate
-       --leading-* / --tracking-* declarations that previously sat here
-       were retired in v0.8.6 (audit U.W0.C-c §1.1 / Union 2). */
-}
+@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"), local("-apple-system"); ascent-override: 92.3784%; descent-override: 19.7572%; size-adjust: 112.3639%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Segoe UI"), local("SegoeUI"); ascent-override: 98.3348%; descent-override: 21.0311%; size-adjust: 105.5577%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Roboto Regular"), local("Roboto-Regular"); ascent-override: 98.6597%; descent-override: 21.1006%; size-adjust: 105.2101%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; size-adjust: 104.9796%; } @font-face { font-family: "Fira Code Fallback"; src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"), local("Courier New"), local("Roboto Mono Regular"); ascent-override: 99.0161%; descent-override: 32.2052%; size-adjust: 99.9837%; } :root { --type-admin-label: 0.625rem; --type-micro: 0.6875rem; --type-caption: clamp( 0.75rem, 0.71rem + 0.21vw, 1rem ); --type-small: clamp( 0.875rem, 0.8rem + 0.25vw, 1.25rem ); --type-body: clamp( 1rem, 0.92rem + 0.27vw, 1.375rem ); --type-prose: clamp( 1.125rem, 1.04rem + 0.28vw, 1.5rem ); --type-subheading: 1.272rem; --type-heading: 1.618rem; --type-title: 2.058rem; --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); --type-display-mega: clamp( 5.382rem, 4rem + 9vw, 11.089rem ); --type-display-hero: clamp( 6.854rem, 4.5rem + 12vw, 17.942rem ); --type-display-audacious: clamp( 8.728rem, 5rem + 16vw, 22rem ); --type-weight-display: 600; --type-weight-heading: 700; --type-weight-title: 700; }

package/dist/styles/typography/semantic.css

@@ -1,233 +1 @@
-/* typography/semantic.css — the BODY cascade + the DISPLAY / HEADING / BODY /
- * MICRO / ADMIN-LABEL semantic type classes.
- *
- * Carved from typography.css (BA.W-CARVE2) — the semantic register classes
- * that read the scale tokens declared in typography/scale.css. @import-ed
- * SECOND by the typography.css thin root (after the faces+scale, before the
- * aux/mono utilities). The carve moves rules in the SAME cascade position →
- * byte-isomorphic dist (the no-god-module import-order gate is the witness). */
-
-/* ═══════════════════════════════════════════════
-   BODY CASCADE — the brand text register inherits globally
-   ═══════════════════════════════════════════════ */
-body {
-    font-family: var(--font-text);
-    color: var(--foreground);
-    font-size: var(--type-body);
-    line-height: var(--type-leading-body);
-}
-
-/* ═══════════════════════════════════════════════
-   DISPLAY — Plus Jakarta Sans display, tracking-tight
-   ═══════════════════════════════════════════════ */
-@utility text-display-audacious {
-    font-family: var(--font-display);
-    font-size: var(--type-display-audacious);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    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;
-}
-
-/* `.text-hero` — the poster-type hero register. Ceiling pegs to
-   `--type-display-audacious` (φ^(11/2) — peak 352px). Three knobs tune without
-   forking: `--text-hero-size` (total clamp), `--text-hero-leading` (line-height,
-   default 0.84), `--text-hero-tracking` (letter-spacing, default -0.03em).
-   `font-weight: 300` + `font-feature-settings: ss01, tnum, lnum` lock the
-   numeric/stylistic baseline; consumer data-attribute registers compose on top. */
-@utility text-hero {
-    font-family: var(--font-display);
-    font-size: var(--text-hero-size, var(--type-display-audacious));
-    line-height: var(--text-hero-leading, 0.84);
-    letter-spacing: var(--text-hero-tracking, -0.03em);
-    font-weight: 300;
-    font-feature-settings: "ss01", "tnum", "lnum";
-    font-variant-numeric: tabular-nums lining-nums;
-    font-optical-sizing: auto;
-    display: inline-block;
-    max-inline-size: 100%;
-    /* AQ.W3 §W3.3 — `text-wrap: nowrap` (modern) sits AFTER `white-space:
-       nowrap` (legacy fallback) so supporting engines honor the modern form and
-       older ones fall through to `white-space`. Forgiving parse, no `@supports`. */
-    white-space: nowrap;
-    text-wrap: nowrap;
-}
-
-@utility text-display-hero {
-    font-family: var(--font-display);
-    font-size: var(--type-display-hero);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-mega {
-    font-family: var(--font-display);
-    font-size: var(--type-display-mega);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-5 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-5);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-4 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-4);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-3 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-3);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-2 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-2);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display {
-    font-family: var(--font-display);
-    font-size: var(--type-display-1);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-display);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-/* ═══════════════════════════════════════════════
-   HEADINGS / BODY — Plus Jakarta Sans text register
-   ═══════════════════════════════════════════════ */
-@utility text-title {
-    font-family: var(--font-text);
-    font-size: var(--type-title);
-    line-height: var(--type-leading-heading);
-    letter-spacing: var(--type-tracking-tight);
-    font-weight: 700;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-heading {
-    font-family: var(--font-text);
-    font-size: var(--type-heading);
-    line-height: var(--type-leading-heading);
-    font-weight: 700;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-subheading {
-    font-family: var(--font-text);
-    font-size: var(--type-subheading);
-    line-height: var(--type-leading-body);
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-/* Canonical dock control label register — text labels INSIDE
-   `.dock-tab-button` (Start, Next, Submit, …) that want an emphatic character
-   without `.text-heading`'s `font-weight: 700` (which reads as literal bold in
-   a dock pill). Weight 400 — Plus Jakarta reads heavier than its numeric weight
-   at pill size, so regular is the not-bold register.
-
-   BC.W-AX-DOCK-COCKPIT — the label TRACKS the control height by ratio (the
-   dock-oversize chronic close, speedtest A-9): the font is a PROPORTION of the
-   control (`calc(var(--dock-control-size) * var(--dock-label-ratio))`) so a
-   tighter control (the `[data-preset="cockpit"]` 2.75rem floor + compact chrome)
-   carries a proportionally tighter label — never the fixed `--type-subheading`
-   rung that read OVERSIZE on a tight pill. The explicit `--dock-label-size` knob
-   STILL wins when set (the dock.css audacious-mobile carve precedent, KEPT — the
-   ratio is the FALLBACK). The `--dock-label-ratio` default reproduces
-   `--type-subheading` at the comfortable `2.5rem` control (sizing.css), so the
-   bare default is byte-near-identical; the `--dock-control-size` fallback `2.5rem`
-   mirrors the comfortable rung for a label outside a density-painted scope. */
-@utility dock-label {
-    font-family: var(--font-text);
-    font-size: var(
-        --dock-label-size,
-        calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio))
-    );
-    line-height: var(--type-leading-body);
-    font-weight: 400;
-    letter-spacing: var(--type-tracking-normal);
-}
-
-@utility text-prose {
-    font-family: var(--font-text);
-    font-size: var(--type-prose);
-    line-height: var(--type-leading-prose);
-    font-weight: 400;
-    /* AQ.W3 §W3.3 — `pretty` fixes orphans/rivers in prose. Prose registers
-       only (not every text class); degrades to default wrapping, zero break. */
-    text-wrap: pretty;
-}
-
-@utility text-body {
-    font-family: var(--font-text);
-    font-size: var(--type-body);
-    line-height: var(--type-leading-body);
-    font-weight: 400;
-    text-wrap: pretty; /* AQ.W3 §W3.3 */
-}
-
-@utility text-small {
-    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-text);
-    font-size: var(--type-caption);
-    line-height: var(--type-leading-caption);
-    font-style: italic;
-    font-weight: 400;
-}
-
-/* ═══════════════════════════════════════════════
-   MICRO / ADMIN LABEL — Fira Code
-   ═══════════════════════════════════════════════ */
-@utility text-micro {
-    font-size: var(--type-micro);
-    line-height: 1.25;
-}
-
-@utility text-admin-label {
-    font-family: var(--font-mono);
-    font-size: var(--type-admin-label);
-    line-height: 1;
-    text-transform: uppercase;
-    letter-spacing: var(--type-tracking-caps);
-    font-weight: 500;
-}
+body { font-family: var(--font-text); color: var(--foreground); font-size: var(--type-body); line-height: var(--type-leading-body); } @utility text-display-audacious { font-family: var(--font-display); font-size: var(--type-display-audacious); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-hero { font-family: var(--font-display); font-size: var(--text-hero-size, var(--type-display-audacious)); line-height: var(--text-hero-leading, 0.84); letter-spacing: var(--text-hero-tracking, -0.03em); font-weight: 300; font-feature-settings: "ss01", "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-optical-sizing: auto; display: inline-block; max-inline-size: 100%; white-space: nowrap; text-wrap: nowrap; } @utility text-display-hero { font-family: var(--font-display); font-size: var(--type-display-hero); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-mega { font-family: var(--font-display); font-size: var(--type-display-mega); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-5 { font-family: var(--font-display); font-size: var(--type-display-5); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-4 { font-family: var(--font-display); font-size: var(--type-display-4); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: 600; text-wrap: balance; } @utility text-display-3 { font-family: var(--font-display); font-size: var(--type-display-3); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-2 { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display { font-family: var(--font-display); font-size: var(--type-display-1); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-title { font-family: var(--font-text); font-size: var(--type-title); line-height: var(--type-leading-heading); letter-spacing: var(--type-tracking-tight); font-weight: var(--type-weight-title); text-wrap: balance; } @utility text-heading { font-family: var(--font-text); font-size: var(--type-heading); line-height: var(--type-leading-heading); font-weight: var(--type-weight-heading); text-wrap: balance; } @utility text-subheading { font-family: var(--font-text); font-size: var(--type-subheading); line-height: var(--type-leading-body); font-weight: 600; text-wrap: balance; } @utility dock-label { font-family: var(--font-text); font-size: var( --dock-label-size, calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio)) ); line-height: var(--type-leading-body); font-weight: 400; letter-spacing: var(--type-tracking-normal); } @utility text-prose { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-weight: 400; text-wrap: pretty; } @utility text-body { font-family: var(--font-text); font-size: var(--type-body); line-height: var(--type-leading-body); font-weight: 400; text-wrap: pretty; } @utility text-small { 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-text); font-size: var(--type-caption); line-height: var(--type-leading-caption); font-style: italic; font-weight: 400; } @utility text-micro { font-size: var(--type-micro); line-height: 1.25; } @utility text-admin-label { font-family: var(--font-mono); font-size: var(--type-admin-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--type-tracking-caps); font-weight: 500; }