@mkbabb/glass-ui 3.10.0 → 3.10.1

package/src/styles/index.css

@@ -40,7 +40,20 @@
  * above it via CSS custom properties or selector cascade; reordering breaks
  * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
  *
- *   1. tokens.css            — CSS custom properties (color, easing, glass,
+ * WHERE each idiom LIVES (the localized design-idiom home, complementing the
+ * load-ORDER below): see docs/precepts/design-idioms.md — @theme aliases live
+ * in theme.css, @utility recipes in their cohesion-domain file, the
+ * cohesion-aware @import-partial carve rule, and the var-in-arbitrary syntax.
+ * tokens.css / glass.css / utilities.css are thin @import ROOTS over cohesive
+ * tokens/* · glass/* · utilities/* partials (each < 500 lines, in cascade order
+ * — the dock.css precedent, AX.W06; generalized AY.W-CSS1). The carve is
+ * cascade-isomorphic: the partials @import in the recorded cascade order so this
+ * load order is preserved bit-for-bit.
+ *
+ *   1. tokens.css            — thin @import root over tokens/{scheme-motion,
+ *                              color-radius,shadow,glass,offsets-sizing,
+ *                              scale-paper,light-dark,dark-arm,property-regs}.css.
+ *                              CSS custom properties (color, easing, glass,
  *                              paper, shadow, surface-tint rungs). Source-of-
  *                              record for every visual axis.
  *   2. typography.css        — golden-ratio scale (√φ); semantic type classes.
@@ -48,7 +61,9 @@
  *   3. theme.css             — @theme block (Tailwind aliases). Reads tokens
  *                              from (1) so MUST come after them; defines the
  *                              `dark` variant selector consumed by the cascade.
- *   4. glass.css             — .glass-{wash,quiet,resting,floating,overlay}
+ *   4. glass.css             — thin @import root over glass/{material,ladder,
+ *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
+ *                              .glass-{wash,quiet,resting,floating,overlay}
  *                              5-rung ladder + .glass-card / -pill / -btn.
  *                              Consumes tokens (1) + theme aliases (3).
  *  4a. glass-specular-track.css — the pointer-anchored MOVING specular rung
@@ -93,10 +108,12 @@
  *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
- *  11. utilities.css         — focus-ring, btn-audacious + btn-interactive
- *                              (press cluster; K W6 + Q.W3 Lane E),
- *                              rainbow-vivid + rainbow-pastel. Consumes earlier
- *                              animations + tokens.
+ *  11. utilities.css         — thin @import root over utilities/{animate,base,
+ *                              components,btn,a11y-overrides}.css. focus-ring,
+ *                              btn-audacious + btn-interactive (press cluster;
+ *                              K W6 + Q.W3 Lane E), rainbow-vivid +
+ *                              rainbow-pastel. Consumes earlier animations +
+ *                              tokens.
  *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
  *                              groove dividers). Loaded after utilities so
  *                              component-local recipes can override.
@@ -132,6 +149,7 @@
 @import "./instrument-rail.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
+@import "../components/custom/tabs/segmented-tabs.css";
 
 /* Ensure consumer's Tailwind scans glass-ui components for utility classes
    (e.g. CVA button variants like text-destructive-foreground) */

package/src/styles/paper.css

@@ -7,54 +7,8 @@
  *
  * Texture: feTurbulence baseFrequency 0.65, 4 octaves, desaturated via
  * feColorMatrix, blended multiply (light) / soft-light (dark). Tiles ~60px.
- *
- * ── THE GRAIN RUNGS (D6.c M5 — the printed-paper tooth, FELT not seen) ─────────
- * The warm-paper grain must be FELT at rest — a premium editorial stock has a
- * felt depth, and the measured finding (ds2-medium M5 / fd-usf-gallery §F) is
- * that the shipped `--glass-grain-opacity: 0.025` floor reads as NOTHING. This
- * file lifts the grain off that floor and mints a SECOND rung for chart plates:
- *
- *   --glass-grain-opacity        — the PAGE grain. Lifted here to a perceptible-
- *                                  but-deft 0.038 default (the local floor below).
- *                                  Numeric justification: the kitsch line is
- *                                  ~0.05 (above it the grain reads as screen-noise
- *                                  / a dirty monitor, ds2-medium M5); 0.025 is
- *                                  sub-perceptual ("felt as nothing"). 0.038 is
- *                                  the calibrated MIDPOINT — ~1.5× the dead floor,
- *                                  ~0.76× the kitsch ceiling — felt at rest, never
- *                                  seen AS grain. (The canonical token still lives
- *                                  in tokens.css; this utility reads it with the
- *                                  lifted fallback so a no-override mount is felt.)
- *   --glass-grain-opacity-plate  — the PLATE grain (NEW rung). A chart plate is
- *                                  the FIGURE's "paper", so it wants slightly more
- *                                  tooth than the page (M5): 0.045 — still below
- *                                  the 0.05 kitsch ceiling, distinctly felt so the
- *                                  plate reads as PRINTED on the same stock as the
- *                                  page, not pasted onto it.
- *
- * THE DATA-REGION MASK CONTRACT (M5, non-negotiable). Grain on the FRAME, never
- * under the FIGURE — a fleck over a choropleth reads as a data artifact; on the
- * plate margin it reads as paper. `paper-grain-overlay` exposes a custom-property
- * MASK SLOT (`--paper-grain-mask`) so a consumer can carve the data viewport out
- * of the grain ::after: set it to a gradient/`url()` that is transparent over the
- * data region and opaque over the frame, and the grain is masked off the figure.
- * Default `none` (the whole surface is grained — the page/card case, no data to
- * fence). The plate rung is opt-in via `[data-grain="plate"]`.
  */
 
-/* The grain rung DEFAULTS — lifted off the tokens.css floor (D6.c M5). These are
-   plain custom-property fallbacks the utilities read; a consumer/tokens.css value
-   still wins (`var(--glass-grain-opacity, <floor>)`), so this only sets the floor
-   a no-override mount inherits. The plate rung is minted here (no canonical
-   tokens.css home is touched in this lane — D6.b owns tokens.css). */
-@layer components {
-    :root {
-        /* The PLATE grain rung — distinct from the page rung; the figure's paper
-           wants more tooth. Minted in this lane; a consumer overrides at :root. */
-        --glass-grain-opacity-plate: 0.045;
-    }
-}
-
 @utility paper-underpaint {
     position: fixed;
     inset: 0;
@@ -63,8 +17,7 @@
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' 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%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
     background-repeat: repeat;
     background-size: 60px 60px;
-    /* Lifted floor — the page grain is FELT at rest (0.038), not the dead 0.025. */
-    opacity: var(--glass-grain-opacity, 0.038);
+    opacity: var(--glass-grain-opacity);
     mix-blend-mode: multiply;
 }
 
@@ -86,27 +39,8 @@
         background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' 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%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
         background-repeat: repeat;
         background-size: 60px 60px;
-        /* Lifted floor — felt on the frame at rest (0.038). */
-        opacity: var(--glass-grain-opacity, 0.038);
+        opacity: var(--glass-grain-opacity);
         mix-blend-mode: overlay;
-        /* THE DATA-REGION MASK SLOT (M5). Default `none` = the whole surface is
-           grained (page/card — no data to fence). A consumer that grains a chart
-           plate sets `--paper-grain-mask` to a gradient/url() transparent over the
-           data viewport + opaque over the frame, carving the figure out of the
-           grain so no fleck lands on a tier fill. `mask` is Baseline; a
-           non-supporting engine ignores it and keeps the full-surface grain (the
-           page case is unaffected — the mask only matters when a consumer fences
-           the data region). */
-        mask: var(--paper-grain-mask, none);
-        -webkit-mask: var(--paper-grain-mask, none);
-    }
-
-    /* The PLATE rung — a chart plate opts in via `[data-grain="plate"]` to the
-       higher-tooth `--glass-grain-opacity-plate` (the figure's paper reads as the
-       same stock as the page, with a touch more tooth). Pair with the mask slot to
-       fence the data viewport. */
-    &[data-grain="plate"]::after {
-        opacity: var(--glass-grain-opacity-plate, 0.045);
     }
 }
 

package/src/styles/theme.css

@@ -82,25 +82,24 @@
     --corner-k-soft:     1.7; /* gentler, between round and squircle — n≈3.4       */
     --corner-k-sharp:    2.4; /* crisper square-bias for large surfaces — n≈4.8    */
 
-    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY.
-       Cards, pills/buttons, small docks, and panels stay ROUND (the superellipse is
-       imperceptible at a 16px card radius or a stadium pill — dropping it there is
-       visually free). The big-dock card shell (the large --radius-dock-card / 24px
-       surface) is the one site where the squircle READS — the iOS-26 idiom the dock
-       wants. A consumer opts an additional large-radius surface in by re-pointing its
-       `--corner-shape-<surface>` at `superellipse(var(--corner-k-squircle))`. */
+    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY (a
+       RADIUS-THRESHOLD policy: the superellipse only READS at a LARGE radius
+       ~--radius-xl/12px and up). ROUND set = card, pill (small controls + data
+       cards + stadium pills — the superellipse is imperceptible, dropping it is
+       free). SQUIRCLE set = bigdock, dialog, sheet, panel, hero (the large-radius
+       glass overlays where the iOS-26 silhouette reads — the blur halo + cartoon
+       under-shadow follow the shape). ALL ride the ONE --corner-k-squircle vocab.
+       W56b (USER-DECISION R1) extended the family off big-dock-only onto the large
+       glass overlays; @supports-gated in glass/squircle.css over the `border-radius`
+       round CONTRACT. A consumer dials any surface back to round (or opts one in) by
+       re-pointing its `--corner-shape-<surface>` alias. */
     --corner-shape-card:    round;
     --corner-shape-pill:    round;
-    --corner-shape-panel:   round;
     --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
-    /* AX.W56(R1) — the overlay-band glass surfaces W54 makes glass-default
-       (Dialog + Sheet content) ride the squircle alongside the big-dock. They
-       sit at the large `--radius-dialog` (16px) modal radius where the
-       superellipse READS — the same iOS-26 idiom. @supports-gated in glass.css
-       over the `border-radius` round CONTRACT; a consumer dials either back to
-       round by re-pointing the alias. */
     --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
     --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
+    --corner-shape-panel:   superellipse(var(--corner-k-squircle));
+    --corner-shape-hero:    superellipse(var(--corner-k-squircle));
     /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
        (the iOS color-picker idiom). It rides the same --corner-k-squircle
        vocabulary; @supports-gated in Slider.vue over a --radius-* round
@@ -309,12 +308,6 @@
     --color-gold-light: var(--gold-light);
     --color-gold-dark: var(--gold-dark);
     --color-gold-deep: var(--gold-deep);
-    /* D6.b — the gilt family: the rim (gilt edge) + the legible gold ink. The
-       `@theme` bridge surfaces `text-gold-ink` / `border-gold-rim` utilities
-       beside the existing gold quad. `--gold-ink` clears cream-law ② on `--card`
-       in both arms (proof:gold-ink-contrast). */
-    --color-gold-rim: var(--gold-rim);
-    --color-gold-ink: var(--gold-ink);
 
     --color-rainbow-red:    var(--rainbow-red);
     --color-rainbow-orange: var(--rainbow-orange);

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

@@ -0,0 +1,250 @@
+/* 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);
+
+}

package/src/styles/tokens/dark-arm.css

@@ -0,0 +1,194 @@
+/* tokens/dark-arm.css
+   The .dark {} dark-mode re-resolution (foreground / shadow-color / section-palette / constellation dark arm). After light-dark.css (the non-light-dark() fallback floor).
+   Carved from the tokens.css cascade root; @import-ed by tokens.css in
+   cascade order. Same :root cascade context as its siblings. */
+
+/* ═══════════════════════════════════════════════
+   DARK MODE — warm dark, section palette brightened ~20% L
+
+   FALLBACK FLOOR (AQ.W2 §2c): this class block is the SOLE non-light-dark()
+   dark path. On a `light-dark()`-supporting engine with `.dark` present,
+   `.dark { color-scheme: dark }` (§1) makes every §-1b token resolve to its
+   dark arm and these explicit dark values agree with it (kept as the floor
+   for non-supporting engines). The pure `var()`-alias re-declarations
+   (`--muted`/`--secondary`/`--accent`/`--border`/`--input`/… and the
+   `--background`/`*-foreground` aliases) are DELETED — they auto-track the
+   `--neutral-*` ladder + `--foreground` resolved above; only EXPLICIT-color
+   dark values (and the non-color overrides §2d) stay.
+   ═══════════════════════════════════════════════ */
+.dark {
+    /* §1 — hard-pin native chrome to dark regardless of OS preference. §4 —
+       re-specify the inherited `accent-color` so it re-resolves to the dark
+       arm (§2b: an inherited built-in <color> set at `:root` would freeze to
+       the light shade without this re-specification). */
+    color-scheme: dark;
+    accent-color: var(--accent-color);
+
+    /* Neutral scale mirrors light-mode pattern: step UP from the background's
+       low L toward foreground. Same perceptual deltas as light. FALLBACK
+       FLOOR — kept verbatim for non-light-dark() engines (§2c); on a
+       supporting engine `color-scheme: dark` (above) drives the §-1b
+       light-dark() arms and these agree. */
+    --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 / --card-foreground / --popover-foreground / --muted /
+       --muted-foreground{,-strong} / --secondary{,-foreground} /
+       --accent{,-foreground} / --border / --input are pure var()-aliases —
+       DELETED here (AQ.W2 §2a): they auto-track the --neutral-* ladder +
+       --foreground above. Re-declaring them would be redundant. */
+    --foreground: hsl(48 10% 90%);
+    --card: hsl(24 8% 10%);
+    --popover: hsl(24 8% 10%);
+
+    /* R0G-5 (AO.W4) — dark mirror of the warm-neutral public-data panel.
+       --card's dark hsl(24 8% 10%) nudged one warmth step toward amber
+       (24→36) + +1 sat + +2 L so the dark dashboard panel lifts off the page. */
+    --surface-public-data-panel: hsl(36 9% 12%);
+
+    --primary: hsl(48 10% 90%);
+    --primary-foreground: hsl(24 10% 10%);
+    /* AX.W44 — the `.dark` class fallback floor, in LOCKSTEP with the light-dark()
+       enhancement arm above (§2c). Same lifted `hsl(0 80% 60%)` so a
+       @supports-split engine and a class-toggle engine paint the SAME dark red
+       (4.60:1 as ink over --card / 5.03:1 as a plate vs page). */
+    --destructive: hsl(0 80% 60%);
+    --destructive-foreground: hsl(48 10% 90%);
+    --ring: hsl(48 10% 70%);
+    --shadow: hsl(0 0% 5%);
+
+    /* Section palette — brightened for dark backgrounds (oklch; AV.W16 TW2 —
+       mirrors the light-dark() dark halves above; hue preserved) */
+    --section-color-0:  oklch(0.721 0.145 354.0);
+    --section-color-1:  oklch(0.733 0.113 308.2);
+    --section-color-2:  oklch(0.718 0.107 268.4);
+    --section-color-3:  oklch(0.767 0.091 219.9);
+    --section-color-4:  oklch(0.776 0.105 172.6);
+    --section-color-5:  oklch(0.813 0.109 78.2);
+    --section-color-6:  oklch(0.693 0.151 28.1);
+    --section-color-7:  oklch(0.739 0.134 318.1);
+    --section-color-8:  oklch(0.709 0.142 2.3);
+    --section-color-9:  oklch(0.763 0.032 239.0);
+    --section-color-10: oklch(0.794 0.116 127.9);
+    --section-color-11: oklch(0.805 0.095 206.7);
+    --section-color-12: oklch(0.719 0.115 295.6);
+
+    --accent-pink: oklch(0.683 0.131 354.7);
+    --section-heading: oklch(0.711 0.123 349.3);
+    --accent-red: oklch(0.644 0.165 22.9);
+
+    --viz-fourier:   oklch(0.693 0.151 28.1);
+    --viz-chebyshev: oklch(0.718 0.107 268.4);
+    --viz-legendre:  oklch(0.739 0.134 318.1);
+    /* --viz-amber / --viz-green / --meter-track-stroke are pure var()-aliases
+       (→ --section-color-5/-4 / --foreground) — DELETED (§2a); they auto-track
+       their sources, which convert via §-1b. */
+
+    /* 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);
+
+    --tier-featured: oklch(0.867 0.165 88.7);
+    --tier-saved:    oklch(0.748 0.135 250.1);
+    --like:          oklch(0.690 0.162 22.2);
+    --success:       oklch(0.805 0.186 151.6);
+    --warning:       oklch(0.809 0.150 76.6);
+    --info:          oklch(0.713 0.138 259.5);
+    --delete:        oklch(0.644 0.170 23.1);
+
+    /* 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);
+
+    /* §5c CONSTELLATION — dark arm (AX.W17). The H.W4 dark-mode lift: the node
+       tones step UP off the ink ground (the light arm's mid-grey would vanish on
+       L6 black), the hairline goes warm off-white, the field carries a touch more
+       presence to read at all. PLAIN-hsl literals, NEVER light-dark()/var(). */
+    --constellation-node:      hsl(42 9% 72%);
+    --constellation-node-dim:  hsl(42 8% 56%);
+    --constellation-line:      hsl(45 12% 86%);
+    /* Anomaly — brightened for the deep canvas (same neutral-default register;
+       the consumer still overrides to its brand). */
+    --constellation-accent:    hsl(20 70% 60%);
+    /* The dark hairlines lift harder over the ink ground, so the edge multipliers
+       run a touch lower than light to keep the field recessive. */
+    --constellation-edge-alpha:          0.20;
+    --constellation-edge-focus-alpha:  0.32;
+    /* §7 — the ink ground needs MORE field presence than cream to read at all, so
+       the dark alpha is modestly HIGHER than the light arm — but still BELOW the
+       slides 1.0 max-legibility reference (the recessive midpoint, not 1.0). */
+    --constellation-alpha:               0.88;
+
+    /* Glass opacity + grain for dark — five-tier ladder, alpha-monotonic.
+       Each rung lifts ~0.08 from its light counterpart so the dark surfaces
+       carry comparable read-weight against the deeper canvas. */
+    --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);
+
+    /* 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);
+    /* AV.W15 M3 — the full-perimeter rim remaps to its dark weight inside
+       `.dark` (mirroring the `--glass-specular` remap above). The lit token
+       resolves to the `-dark` alpha on the deeper canvas. */
+    --glass-edge-light: var(--glass-edge-light-dark);
+
+    /* AW.W23 — the chromatic-fringe + adaptive-tint dark arm. The fringe drops
+       to a lower-luminance warm/cool pair on the deep canvas; `--glass-tint-
+       source` auto-flips with `--card` (no override needed — the default already
+       resolves the dark card). */
+    --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18);
+    --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14);
+    /* AX.W52 D19 — the curvature sheen is genuinely SOFTER on the deep canvas (the
+       prior dark arm re-declared the overlay BYTE-IDENTICAL to light, so it read
+       HARDER over the dark substrate — an unsoftened-dark defect). The `:root`
+       `--glass-curvature-overlay` already reads `var(--glass-curvature-intensity)`,
+       so lowering just the intensity here re-resolves the SAME warm-cream recipe at
+       a softer alpha — no byte-identical re-declaration. */
+    --glass-curvature-intensity: 0.012;
+
+    /* Gold — boosted for dark (oklch; AV.W16 TW2) */
+    --gold: oklch(0.784 0.143 86.0);
+    --gold-light: oklch(0.898 0.182 97.4);
+    --gold-dark: oklch(0.678 0.150 63.8);
+}
+