@mkbabb/glass-ui 3.10.1 → 3.11.0

package/dist/styles/glass/surfaces.css

@@ -1,306 +0,0 @@
-/* glass/surfaces.css
-   The convenience-shorthand surfaces — .glass-card / .glass-pill / .glass-btn + the glass pill-input + the chromatic edge-dispersion rim fringe.
-   Carved from the glass.css cascade root; @import-ed by glass.css in cascade
-   order, each in its own @layer components (isomorphic to the monolith).
-   See docs/precepts/design-idioms.md §cohesion-aware partials. */
-@layer components {
-    /* ── Convenience shorthands (tier + shape) ── */
-
-    /* Static surface utility — no hover lift, no transition.
-       Interactive cards live in <Card> (which owns its own hover composition)
-       or in components that explicitly opt into a hover variant. */
-    .glass-card {
-        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
-           `:has(:focus-visible)` rule redefines them (one source, shared with
-           the fallback). */
-        --card-focus-shadow: var(--shadow-card);
-        --card-focus-border: var(--glass-border-quiet);
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-quiet);
-        border: 1px solid var(--card-focus-border);
-        border-radius: var(--radius-card);
-        box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
-        /* AY.W-A11Y-PERF O-4 — upgrade `layout style` → include `paint` so the
-           maximal-glass nested backdrop-filter sample (a glass Button in this card)
-           does not escape the card box (the standard nested-backdrop-cost mitigation;
-           `contain: paint` clips DESCENDANTS only — the card's own rim/drop-shadow is
-           NOT clipped, device-verified). */
-        contain: layout style paint;
-        transition:
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
-       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
-       `@supports not selector(:has(*))` class fallback (below) ships anyway
-       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
-    .glass-card:has(:focus-visible) {
-        --card-focus-shadow: var(--shadow-md);
-        --card-focus-border: var(--glass-border-floating);
-    }
-
-    /* ── Glassmorphic circular icon button ── */
-
-    .glass-btn {
-        @apply flex items-center justify-center cursor-pointer;
-
-        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
-           mints the stacking context once so the hover/press scale below does
-           not flicker it into being (the z-index/anchor hazard). */
-        scale: 1;
-        width: var(--size-icon-btn);
-        height: var(--size-icon-btn);
-        border-radius: var(--radius-pill);
-        border: 1.5px solid var(--glass-border-wash);
-        background: var(--glass-bg-wash);
-        backdrop-filter: var(--glass-blur-wash);
-        /* AY.W-A11Y-PERF O-4 — paint containment so the glass button's own
-           backdrop-filter sample stays inside the box when it nests in a glass card /
-           dialog / dock (the nested-backdrop-cost mitigation; clips descendants only,
-           the button's own rim/shadow is unaffected — device-verified). */
-        contain: paint;
-        color: var(--muted-foreground);
-        /* AX.W52 §6 doctrine — the surface legs ride the bezier `--ease-standard`;
-           the `scale` leg is reconciled onto `--spring-smooth` (was `--spring-snappy`)
-           so the icon-button hover settles on the SAME ONE register as `.btn-pill` /
-           `.tap-squish` / `btn-interactive` (the gate asserts one scale register
-           across all four). The press still reads crisp — `--spring-smooth` ζ=0.86
-           settles fast without a visible bounce. */
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-normal) var(--spring-smooth);
-    }
-
-    .glass-btn:hover:not(:disabled) {
-        background: color-mix(in srgb, var(--background) 85%, transparent);
-        border-color: var(--surface-tint-22);
-        color: var(--foreground);
-        scale: var(--scale-hover);
-    }
-
-    .glass-btn:active:not(:disabled) {
-        scale: var(--scale-press);
-    }
-
-    .glass-btn:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-    }
-
-    .glass-btn:disabled {
-        opacity: 0.35;
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    .glass-btn.is-active,
-    .glass-btn[aria-pressed="true"] {
-        background: var(--surface-tint-10);
-        border-color: var(--surface-tint-25);
-        color: var(--foreground);
-    }
-
-    /* ── Pill button base ─────────────────────────── */
-    .btn-pill {
-        @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
-
-        /* AX.W52 §6 identity base — `scale: 1` at rest so the hover/press scale
-           below animates the `scale` longhand (not `transform`) coherently and
-           does not flicker the stacking context into being (AQ.W3 §W3.2). */
-        scale: 1;
-        /* AX.W51 D18 — the pill GEOMETRY rides the ONE `--ui-scale` comfort axis.
-           gap / padding scale by the master scalar; the font reads the
-           `--control-text` register (`calc(--type-small * --ui-scale)`, the same
-           `text-sm` register the Button CVA paints), so a bare `.btn-pill` consumer
-           and a `<Button>` agree on the control font, and ONE `--ui-scale` override
-           grows the pill's height (via padding) + gap + font in lockstep. Desktop
-           default is the identity (scale 1 → the prior proportion). */
-        gap: calc(0.375rem * var(--ui-scale));
-        border-radius: var(--radius-pill);
-        padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
-        font-size: var(--control-text);
-        /* AX.W52 — the ONE coherent button transition (RED witness 5/6). The
-           SURFACE legs (bg/border/box-shadow/color/opacity) ride the bezier
-           `--ease-standard` (a colour cross-fade reads as a wobble on a spring);
-           the TRANSFORM leg (`scale`) rides `--spring-smooth` (the sub-perceptual
-           settle), so the hover lift + the surface cross-fade read as ONE glide.
-           The DEAD `transform` leg is retired — the variants animate the `scale`
-           longhand. CRITICAL: `.tap-squish` (composed alongside on the button
-           base, utilities.css) ALSO lists this full coherent set, so neither
-           class's `transition` shorthand can clobber the other down to a
-           scale-only animation — the cascade bug that left every button
-           transitioning ONLY `scale` (the live-readback RED, RED witness 5). The
-           doctrine: surface-props→bezier, transform→spring (tokens.css §2). */
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            opacity var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth);
-    }
-
-    .btn-pill > * {
-        @apply flex-shrink-0;
-    }
-
-
-    .btn-pill:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    /* ── Glass-button backdrop ─────────────────────────────────────────────
-       AX.W52 — the `glass`/`glass-wash` Button variants compose `.glass-wash`,
-       which resolves `--glass-blur-wash` = `blur(1px)` — a sub-perceptual
-       diffusion authored for a small detail TILE, not a button the user reads
-       as "glass" (the live readback found the glass variants at a negligible
-       1px). A hero control wants a real glass blur. `.btn-glass` re-points the
-       backdrop at `--glass-blur-btn` (the `quiet`-tier 10px radius + the gentle
-       `saturate(1.05) brightness(1.02)` light-concentration), so the glass
-       button variants actually read as liquid glass while the wash TILE tier
-       keeps its 1px untouched. Declares the UNPREFIXED `backdrop-filter` ONLY —
-       Lightning CSS emits the `-webkit-` companion per the single-source
-       authorship discipline above (hand-authoring both forms makes Lightning
-       dedup-and-keep-prefixed, which modern Chromium then drops). */
-    .btn-glass {
-        backdrop-filter: var(--glass-blur-btn);
-    }
-
-    /* ── Pill input ───────────────────────────────── */
-    .input-pill {
-        @apply flex w-full;
-
-        /* AX.W51 D18 — the input pill rides the ONE `--ui-scale` comfort axis: the
-           height reads the `--control-h-md` cohort (`max(calc(2.5rem * --ui-scale),
-           --control-floor)`, the h-10 register with the WCAG-44px coarse clamp), the
-           font reads `--control-text`, the inline padding scales — so ONE override
-           grows the field's height + padding + font in lockstep. Desktop default is
-           the identity. */
-        height: var(--control-h-md);
-        border-radius: var(--radius-pill);
-        /* AW.W13 — the resting field edge reads as an enclosed control at rest
-           (~15%α — ~2× the prior 8% glass-wash floor that vanished on cream). The
-           `:focus-visible` accent ring + the `:user-invalid`/`[aria-invalid]`
-           destructive ring below still win by order + specificity.
-           AX.W54 — moved off the srgb `--surface-tint-15` fork onto the glass
-           border seam (`--glass-border-floating`, the matching 15%α rung) so the
-           pill is ONE glass model with the rest of the ladder, not a divergent
-           tint axis. */
-        border: 1.5px solid var(--glass-border-floating);
-        background: var(--glass-bg-quiet);
-        /* AX.W54 — the pill reads as REAL glass: the quiet-tier 10px blur (the
-           same `--glass-blur-quiet` its `--glass-bg-quiet` background pairs with),
-           not the sub-perceptual `blur(1px)` wash it carried — and the
-           `--glass-level` knob now clarifies it in lockstep with every surface. */
-        backdrop-filter: var(--glass-blur-quiet);
-        padding: 0 calc(1rem * var(--ui-scale));
-        font-size: var(--control-text);
-        color: var(--foreground);
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            opacity var(--duration-fast) var(--ease-standard);
-    }
-
-    .input-pill::placeholder {
-        color: var(--surface-tint-35);
-    }
-
-    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
-       accent ring on a mouse click); `:focus-visible` matches the
-       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
-       the `:user-invalid` rungs so an invalid focused field shows destructive,
-       not accent (the `:user-invalid:focus-visible` rule below wins by order +
-       specificity). `:focus-visible` Baseline Widely — no fallback. */
-    .input-pill:focus-visible {
-        outline: none;
-        border-color: var(--color-accent-opaque, var(--ring));
-        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
-    }
-
-    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
-       The forgiving `:where(:user-invalid, .user-invalid-fallback,
-       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
-       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
-       fallback class for engines without `:user-invalid` (css §3.2; NOT a
-       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
-       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
-       serves APP-DRIVEN validity — a custom key match, an async server check —
-       where there is no native constraint to trip `:user-invalid`, so the app
-       sets the ARIA attribute and the library's own ring paints with no
-       `:deep()` re-paint at the consumer. The destructive/success tints reuse
-       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
-       reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
-       asterisk — the border/bg shift is the supplementary cue, never the sole
-       one. `:user-valid` is intentionally subtle (border only, no bg fill) so
-       a long valid form is not a wall of green. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
-        border-color: var(--destructive);
-        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
-    }
-    .input-pill:where(:user-valid, .user-valid-fallback) {
-        border-color: var(--success);
-    }
-    /* Invalid + keyboard-focused → destructive ring (overrides the accent
-       `:focus-visible` ring above by order + the extra invalid compound). The
-       `[aria-invalid]` arm rides the same widened group so an app-driven
-       invalid field shows the destructive ring on focus too. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
-        border-color: var(--destructive);
-        box-shadow: 0 0 0 var(--focus-ring-width)
-            color-mix(in srgb, var(--destructive) 35%, transparent);
-    }
-
-    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
-       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
-       content between a 3-line floor and a token-driven ceiling, then scrolls.
-       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
-       engine the declaration is ignored and the element keeps the
-       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
-       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
-       the unchanged no-op fallback. */
-    .input-pill[data-autosize] {
-        field-sizing: content;
-        width: 100%;
-        min-block-size: 3lh;
-        max-block-size: var(--textarea-autosize-max, 12lh);
-        resize: vertical;
-    }
-
-    .input-pill:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
-    /* AW.W13 — the Select trigger mirrors the input pill's resting border lift.
-       The reka-ui SelectTrigger renders `role="combobox"` over the `.glass-wash`
-       surface; its 8%α `--glass-border-wash` field edge vanished on cream just
-       like the input pill, so the same `--surface-tint-15` lift makes the
-       trigger read as an enclosed control at rest. Scoped to the combobox role
-       so the lift reaches ONLY the Select trigger, not every `.glass-wash`
-       surface. */
-    .glass-wash[role="combobox"] {
-        border-color: var(--surface-tint-15);
-    }
-
-    /* ── AW.W23 — chromatic edge dispersion (the polished-glass rim fringe) ──
-       An opt-in `.glass-chromatic` composes the warm/cool oklab fringe OVER the
-       W22 uniform rim (it does NOT replace it — the rim still rides each rung's
-       box-shadow). The fringe is a transparency garnish, so it composes ONLY
-       under `prefers-reduced-transparency: no-preference` and drops under
-       `reduce` (handled by the bracket below). The fringe lands as a dedicated
-       inset box-shadow pair on the material surface so it adds onto the rim. */
-    @media (prefers-reduced-transparency: no-preference) {
-        .glass-chromatic {
-            box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim);
-        }
-    }
-}

package/dist/styles/tokens/color-radius.css

@@ -1,250 +0,0 @@
-/* tokens/color-radius.css
-   §4 radius reference · §5 warm-cream/muted-black palette · §5c constellation · §6 section palette · §6b viz basis.
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
-:root {
-    /* §4  BORDER RADIUS — authored ONCE in theme.css's leading plain @theme
-       block (AV.W16 TW1). A plain @theme mints each `--radius-*` as a global
-       :root var, so the `var(--radius-card)` recipe reads across this file
-       resolve from that source. The prior §4 twin here doubled the override
-       surface (the anti-pattern the @theme-inline migration kills) — excised;
-       retune the scale at theme.css. */
-
-    /* ═══════════════════════════════════════════════
-       §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.
-       ═══════════════════════════════════════════════ */
-    --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);
-
-    /* R0G-5 (AO.W4) — warm-neutral public-data panel surface. One warmth step
-       off --card (hue 44 vs 48, +4 sat, −2 L) so a consumer's aurora-OFF
-       /dashboard/* surfaces read with the admin canon's warm-neutral chrome
-       instead of the colder bare card. Opaque surface (the --card family), not
-       a --surface-tint-* overlay. Consumer applies on /dashboard/* only. */
-    --surface-public-data-panel: hsl(44 16% 96%);
-
-    --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);
-
-    /* AQ.W2 §4 — native-control accent. `accent-color` is an inherited
-       built-in <color>, so per the §2b resolve-late discipline it reads a
-       dedicated UNREGISTERED token set per-mode (NOT light-dark()) and is
-       re-specified inside `.dark` — otherwise the accent freezes to the
-       light shade at the cascade root. Light: muted-black checkmarks /
-       sliders on warm cream. Dark arm (`.dark`) reads `--ring` (mid-tone),
-       not the near-white dark `--primary`, so a checkbox's white checkmark
-       keeps contrast headroom (accent-color.md §5). */
-    --accent-color: var(--primary);
-
-    /* Border hairline at whisper alpha — the canonical rung for
-       section-spine / panel-edge hairlines a consumer wants to read as an
-       iOS-26 whisper rather than a hard rule. Consumers compose this named
-       rung instead of hand-mixing `color-mix(... var(--border) ...)`
-       per-site (token-first). 45% is the canonical whisper. Auto-dark via
-       `--border` (which is `var(--neutral-4)`, light-dark()-resolved). */
-    --border-soft: color-mix(in srgb, var(--border) 45%, transparent);
-
-    /* AQ.W3 §W3.4 — tokenized scrollbar thumb + track. Minted in the color
-       block so the `scrollbar-color` / `::-webkit-scrollbar-thumb` rungs read a
-       single source. Auto-dark via `--muted-foreground` (light-dark()-resolved,
-       AQ.W2) — the OS scrollbar chrome also honors `color-scheme: dark`, so the
-       custom thumb tracks the dark surface without an explicit dark mirror. The
-       thumb α (25%) matches the prior inline `.scrollbar-thin` value byte-for-
-       byte; `transparent` track keeps the scroll-pane glass reading through. */
-    --scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
-    --scrollbar-track: transparent;
-
-    /* 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 / SegmentedTabs / 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);
-
-    /* ═══════════════════════════════════════════════
-       §5c CONSTELLATION — Canvas2D proximity-graph lattice (AX.W17)
-
-       The H.W4 legibility intelligence promoted from the slides deck to
-       LIBRARY identity: the node tones, the edge hairline color, the per-mode
-       edge-alpha multipliers, and the field-yields-to-type translucency knob.
-       Only `--constellation-accent` (the anomaly tint) stays a CONSUMER preset
-       (slides aliases it to `--ncsu-red`); the library ships a neutral default.
-
-       PLAIN-hsl LITERALS, per arm — NEVER `light-dark()` and NEVER a
-       `var(--neutral-*)`/`var(--foreground)`/`var(--border)`/`var(--card)`
-       alias. Canvas2D silently REJECTS a `light-dark()` value into
-       `strokeStyle`/`fillStyle` (the W30 86.3%-red-splatter cardinal defect),
-       and the rejection is identical whether the value is a literal
-       `light-dark(…)` OR a `var()` that RESOLVES to one — so the constellation
-       tokens are plain-hsl LEAVES, the `:root` vs `.dark` cascade carrying two
-       literals. `proof:constellation-tokens` clause (c) machine-locks this
-       (the no-`light-dark(`-substring NOR transitive-`var()` static assertion).
-       ═══════════════════════════════════════════════ */
-    /* Node tones — readable on the warm-cream ground. The two-tone split (the
-       `dim` half rides `-node-dim`). Warm-grey ink, NOT a neutral-ladder alias. */
-    --constellation-node:      hsl(36 8% 46%);
-    --constellation-node-dim:  hsl(36 8% 60%);
-    /* Edge hairline stroke — warm near-black on cream (the plain-hsl complement
-       the slides deck reads to fix the `--foreground` light-dark() leak). */
-    --constellation-line:      hsl(24 14% 14%);
-    /* Anomaly tint — NEUTRAL library default (a desaturated warm accent). The
-       consumer overrides this (slides → `--ncsu-red`); the library does NOT
-       bake a brand hue. This is the single consumer-preset boundary. */
-    --constellation-accent:    hsl(18 58% 46%);
-    /* Edge-alpha multipliers — replace the magic `0.17` hairline / pointer-web
-       literals. The cream ground lifts the node tones, so the field can recede;
-       the focus-proximity edge reads a touch stronger. */
-    --constellation-edge-alpha:          0.22;
-    --constellation-edge-focus-alpha:  0.34;
-    /* §7 field-yields-to-type translucency knob — the legible-but-RECESSIVE
-       MIDPOINT, NOT max-legibility. On cream the node tones already read, so the
-       field recedes further: BELOW the slides 0.92 max-legibility reference. */
-    --constellation-alpha:               0.80;
-
-    /* §interaction — the warp spring + the gravity-well tunings (NUMERIC, NOT
-       colors — read ONCE on mount via parseFloat, never reach a Canvas2D
-       fillStyle, so immune to the W30 light-dark()/Canvas2D leak; AY.W-CON2).
-       Mode-INVARIANT, declared ONCE in :root (the .dark arm needs no numeric
-       re-declare — a per-mode value SPLIT is what proof:constellation-tokens
-       clause (c) flags, and these tunings are identical in both modes).
-       `--constellation-warp-response` is the keyframes.js ANGULAR PERIOD (the
-       SwiftUI .spring(response:) axis), NOT a settle-duration — at ζ=1 the 2%
-       settle lands at t₂ ≈ 5.83/ω₀ ≈ 0.93·response (the engine keeps the
-       keyframes.js ω₀ = 2π/response convention, mints no second ω). */
-    --constellation-warp-response:    0.55;   /* s — keyframes.js angular period (NOT a settle) */
-    --constellation-warp-zeta:        1.0;    /* critically damped — a focal mark must NOT ring */
-    --constellation-well-gain:        14000;  /* inverse-square force scale (the held-pull gain) */
-    --constellation-well-reach:       340;    /* base-width px — the well's reach (k-scaled at step) */
-    --constellation-well-ramp:        4.0;    /* 1/s — the ARM rate (≈0.25s bloom; release is the fixed brisk WELL_RELEASE_RAMP — the field-cools invariant, not consumer-tunable) */
-    --constellation-well-max-speed:   4.0;    /* base-width px/frame cap — the no-slingshot clamp */
-    --constellation-well-hold-ms:     140;    /* ms hold before the well arms */
-    --constellation-wander-idle:      8000;   /* ms — min idle between auto re-targets (the W-CON1 drift cadence) */
-    --constellation-wander-jitter:    8000;   /* ms — random extra idle per cadence (so the rhythm is not metronomic) */
-
-    /* ═══════════════════════════════════════════════
-       §6  SECTION PALETTE — 13-stop jewel tones (light)
-       ═══════════════════════════════════════════════ */
-    /* AV.W16 TW2 — oklch ramp (perceptually-even L; hue preserved from the
-       prior hsl() cadence). Categorical jewel tones — distinct hues, not a
-       monotone scale. Authored as oklch pairs with the .dark mirror. */
-    --section-color-0:  oklch(0.552 0.192 359.8);  /* rose       */
-    --section-color-1:  oklch(0.502 0.165 305.9);  /* purple     */
-    --section-color-2:  oklch(0.484 0.163 265.5);  /* indigo     */
-    --section-color-3:  oklch(0.542 0.089 222.8);  /* teal-cyan  */
-    --section-color-4:  oklch(0.551 0.088 171.1);  /* forest     */
-    --section-color-5:  oklch(0.623 0.124 69.6);   /* amber      */
-    --section-color-6:  oklch(0.579 0.201 30.4);   /* tomato-red */
-    --section-color-7:  oklch(0.532 0.180 317.5);  /* violet     */
-    --section-color-8:  oklch(0.520 0.176 8.4);    /* ruby       */
-    --section-color-9:  oklch(0.492 0.038 239.6);  /* slate-blue */
-    --section-color-10: oklch(0.556 0.103 128.8);  /* olive      */
-    --section-color-11: oklch(0.601 0.092 208.0);  /* ocean      */
-    --section-color-12: oklch(0.513 0.163 291.9);  /* periwinkle */
-
-    /* Accent colors */
-    --accent-pink: oklch(0.613 0.197 353.8);
-    --section-heading: oklch(0.545 0.189 352.8);
-    --accent-red: oklch(0.574 0.216 27.5);
-
-    /* ═══════════════════════════════════════════════
-       §6b VIZ BASIS — core brand hues
-       ═══════════════════════════════════════════════ */
-    --viz-fourier:   oklch(0.579 0.201 30.4);
-    --viz-chebyshev: oklch(0.484 0.163 265.5);
-    --viz-legendre:  oklch(0.532 0.180 317.5);
-    --viz-amber:     var(--section-color-5);
-    --viz-green:     var(--section-color-4);
-
-    /* Semantic UI accents */
-    --tier-featured: oklch(0.841 0.173 84.2);
-    --tier-saved:    oklch(0.676 0.176 252.3);
-    --like:          oklch(0.633 0.200 24.9);
-    --success:       oklch(0.720 0.192 149.5);
-    --warning:       oklch(0.770 0.165 70.6);
-    --info:          oklch(0.626 0.186 259.6);
-    --delete:        oklch(0.597 0.198 25.5);
-
-    /* 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);
-
-}