@flyos/design-system 1.7.0 → 2.0.0

package/scss/_nova-motion.scss

@@ -0,0 +1,324 @@
+// ─── Nova motion library (UX v2) ─────────────────────────────────────────────
+// Stage 1 task S1.3 of the UX-refresh program.
+// Canon: `skills/desktop-design-language.md` §5, which cites
+// `.workflow/plans/ux-refresh/analysis/D1-home-desktop.md` §5 and
+// `D2-appwindow-circles.md` §6 for the exact numbers below.
+// This partial is the EMISSION entry, `@use`d exactly once — from
+// `_fly-theme.scss` (and transitively by the standalone `_app-surface-tokens
+// .scss` bundle). It emits GLOBAL CSS: custom properties, `@keyframes`, and one
+// `prefers-reduced-motion` block. Never `@use` it from a component: `@keyframes`
+// and custom-property declarations are not scoped by Sass module boundaries, so
+// a second `@use` emits every rule again into that component's stylesheet.
+// **Need `nova-stagger` in a component? `@use 'nova-motion-mixins'.**
+// The mixin moved to that sibling partial at the S1 review (F4) precisely
+// because bundling a mixin with global emission made it unusable: the two
+// callers who honoured this header hand-copied the mixin's math instead, and the
+// one who ignored it re-emitted this whole file. The mixins-only partial emits
+// nothing, so it is safe to `@use` anywhere. It is `@forward`ed below, so an
+// existing `@use 'nova-motion'` caller still resolves `nova-stagger` — but pay
+// the global emission for nothing if you do.
+// Contract for the rest of Stage 1 (full detail in
+// `.workflow/plans/ux-refresh/notes/S1.3-motion-library.md`):
+//   - Easing tokens `--nova-ease-*` and duration tokens `--nova-duration-*` /
+//     `--nova-scale-press` / `--nova-filter-press` — a component transition or
+//     animation NEVER writes a raw `cubic-bezier(...)`, `scale(.985)` or
+//     `brightness(.96)` literal again.
+//   - The 16 ratified `@keyframes` by exact name — components reference them
+//     by name in their own `animation:` shorthand (duration/easing/iteration
+//     are the CALLER's concern; a keyframe only defines the shape).
+//   - The single `prefers-reduced-motion` block for the whole app. Components
+//     never write their own.
+
+// Compatibility re-export — emits nothing (the target is mixins-only).
+@forward 'nova-motion-mixins';
+
+:root {
+  // ── Easing families (§5 table — use these and nothing else) ───────────────
+  --nova-ease-structural: cubic-bezier(0.32, 0.72, 0, 1); // menus, drawers, panel/aside width, search morph, view entry, flex-basis, theme bg fade
+  --nova-ease-micro: cubic-bezier(0.2, 0.8, 0.2, 1); // hover/colour/scrim, fadeIn, tooltips
+  --nova-ease-soft: cubic-bezier(0.4, 0.6, 0.2, 1); // buttons/menuitems base transition (the interaction default)
+  --nova-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); // icon press bounce only — playful overshoot
+
+  // ── Interaction timing (§5) ────────────────────────────────────────────────
+  --nova-duration-settle: 0.34s; // default settle
+  --nova-duration-hover: 0.14s; // hover snaps in
+  --nova-duration-press: 0.06s; // press — pairs with --nova-scale-press / --nova-filter-press below
+
+  // Bundled with --nova-duration-press because the canon always cites them
+  // together ("press .06s + scale(.985) + filter:brightness(.96)") — without
+  // these two, every pressable component would still hand-roll the literal.
+  --nova-scale-press: 0.985;
+  --nova-filter-press: brightness(0.96);
+
+  // ── drawerIn direction ──────────────────────────────────────────────────────
+  // The design is LTR-authored (drawer travels in from +28px, i.e. the inline-
+  // end edge). A `@keyframes` block cannot itself be direction-aware — CSS
+  // keyframes carry no selector — so the keyframe below animates this custom
+  // property instead of a literal offset, and ONLY this property flips under
+  // RTL (see the `[dir='rtl']` override immediately after this block). Custom
+  // properties inherit through Angular's emulated-encapsulation boundary even
+  // though selectors don't (that boundary is what makes the `[dir=rtl] &`
+  // combinator dead per the program's RTL invariant) — so a consumer gets the
+  // correct edge for free. See the handoff note for the full rationale.
+  --nova-drawer-in-x: 28px;
+}
+
+// The ONLY direction-aware rule in this file. It lives here — global,
+// unencapsulated CSS — specifically so no consumer of `drawerIn` ever needs
+// its own `[dir=rtl]`/`:host-context([dir=rtl])` selector. `[dir='rtl']`
+// matches `<html dir="rtl">` (the shell/design-lab convention) and anything
+// beneath it inherits the flipped value.
+[dir="rtl"] {
+  --nova-drawer-in-x: -28px;
+}
+
+// ── Keyframe inventory (§5 table, 16 names) ──────────────────────────────────
+// Each keyframe defines ONLY the shape (from/to transform + opacity). Duration,
+// easing and iteration-count are the caller's `animation:` shorthand — reach
+// for the tokens above, never a raw cubic-bezier.
+
+// Dropdowns/dialogs. `.24-.28s` structural, `both`.
+@keyframes menuIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -5px, 0) scale(0.965);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+// Centered popovers — same motion as menuIn, composed with the static
+// `translateX(-50%)` centering offset so the animation doesn't fight it.
+@keyframes menuInCentered {
+  from {
+    opacity: 0;
+    transform: translate3d(-50%, -5px, 0) scale(0.965);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(-50%, 0, 0) scale(1);
+  }
+}
+
+// Right/end-edge drawers. `.34s` structural. See --nova-drawer-in-x above.
+@keyframes drawerIn {
+  from {
+    opacity: 0;
+    transform: translate3d(var(--nova-drawer-in-x), 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// Scrims. `.2s` micro.
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Staggered content reveal (cards) — 10px rise. `.3-.44s`, cards stagger
+// `i*55ms` via nova-stagger below.
+@keyframes riseIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// View-level entry (whole panes/routes) — 8px rise, `.4s`, no stagger (one
+// view enters at a time).
+@keyframes viewIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 8px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// List/row items — 6px rise, `.4s`, items stagger `i*40ms` via nova-stagger.
+@keyframes itemIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 6px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// Contextual toolbar actions. `.3s` structural, 40ms stagger per action.
+@keyframes toolbarPopIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8) translateX(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+
+// App-launcher tiles — 6px rise, `.3s` micro, `i*20ms` stagger.
+@keyframes appTileIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 6px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// Icon-button hover. `.5s ease` (not one of the four families — a wiggle, not
+// a settle).
+@keyframes iconWiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(-8deg);
+  }
+
+  75% {
+    transform: rotate(8deg);
+  }
+}
+
+// Icon-button press. `.38s` overshoot (--nova-ease-overshoot).
+@keyframes iconBounce {
+  0% {
+    transform: scale(1);
+  }
+
+  35% {
+    transform: scale(0.78);
+  }
+
+  70% {
+    transform: scale(1.16);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+// AI quick-command chips. 4s linear infinite. The design file hardcodes the
+// third stop as the dark-only literal `#BF5AF2` (skill §10 known bug) — this
+// substitutes the ratified `--sys-purple` token (S1.1's `_nova-tokens.scss`;
+// dark `#a48ce0` / light `#6A3FC0`) so the cycle stays correct in light theme
+// too. See the handoff note.
+@keyframes strokeCycle {
+  0%,
+  100% {
+    border-color: var(--accent);
+  }
+
+  33% {
+    border-color: var(--sys-teal);
+  }
+
+  66% {
+    border-color: var(--sys-purple);
+  }
+}
+
+// AI orb conic-gradient rotation. 6s (bar orb) / 14s (aside orb), both linear
+// — duration is the caller's, this is just one full turn.
+@keyframes novaSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// AI orb glow pulse. 7s ease-in-out. The design file hardcodes the two glow
+// stops as dark-only literals (`rgb(80 150 255 / 40%)` → `rgb(140 120 255 /
+// 75%)`) — skill §10 lists the orb literals as "tokenize at port time", the same
+// known bug `strokeCycle` above already resolves. Substituted here for the
+// nearest ratified tokens on the orb's own identity gradient (`--accent` →
+// `--sys-teal` → `--sys-purple`): the cool stop is `--sys-blue`, the warm stop
+// `--sys-purple`. `color-mix` carries the authored 40%/75% alphas forward
+// unchanged, so the pulse keeps its shape while both stops now flip with theme
+// instead of glowing dark-blue over light paper.
+@keyframes novaBreathe {
+  0%,
+  100% {
+    box-shadow: 0 0 16px color-mix(in oklab, var(--sys-blue) 40%, transparent);
+  }
+
+  50% {
+    box-shadow: 0 0 30px color-mix(in oklab, var(--sys-purple) 75%, transparent);
+  }
+}
+
+// Light-mode material sheen. 22s.
+@keyframes glassSheen {
+  0%,
+  100% {
+    background-position: 0% 0%;
+  }
+
+  50% {
+    background-position: 100% 0%;
+  }
+}
+
+// Gradient greeting/headline text. 11s.
+@keyframes greetShift {
+  0%,
+  100% {
+    background-position: 0% 0%;
+  }
+
+  50% {
+    background-position: 100% 0%;
+  }
+}
+
+// ── prefers-reduced-motion ───────────────────────────────────────────────────
+// THE single block for the whole design language — every animation/transition
+// in the app, Nova or otherwise, is covered here. Components never repeat
+// this. (The shell's `src/styles/_accessibility.scss` carries an identical
+// block for the shell's own bundle; this one makes the design-system package
+// self-sufficient for any consumer — federated remote, standalone Business
+// App, External App — that pulls in `_fly-theme.scss` without the shell's
+// stylesheet. Both are idempotent; there is no conflict in applying both.)
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    /* stylelint-disable declaration-no-important */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}

package/scss/_nova-tokens.scss

@@ -0,0 +1,356 @@
+// ─── Nova token layer (UX v2) ────────────────────────────────────────────────
+// The Nova design language's colour vocabulary, both themes. Landed by Stage-1
+// task S1.1 of the UX-refresh program.
+
+// Canon: `skills/desktop-design-language.md` §2 (ratified table) and §3 (the
+// ramp law), which in turn cite `.workflow/plans/ux-refresh/analysis/
+// D3-styleguide-tokens.md`. NEVER re-derive a value from the `UX/**/*.dc.html`
+// prototypes — the prototypes drift, the skill is the contract.
+
+// ── Additive only ────────────────────────────────────────────────────────────
+// Nothing here re-values a token the shipped DS already defines; every name
+// below is greenfield. `nova-tokens.spec.ts` proves it by parsing the other
+// theme partials, so this stays true as the DS evolves. Two consequences of the
+// D1 collision ruling that look like omissions and are not:
+//   · The design's `--glass-bg/-border/-inset/-blur` land as `--glass2-*`. The
+//     shipped `--glass-*` family has a different value SHAPE (simple fill vs a
+//     3-layer background-image), so loading design values into those names
+//     would silently restyle every current component.
+//   · The design's `--ink` gets NO token at all. It folds into the existing
+//     `--text-color` / `--label-primary` semantics at the 2.0 flip.
+//   · `--accent` is NOT declared here. It is the existing runtime knob
+//     (`#9333EA`, re-skinnable via `FlyThemeService.applyAccent`) and is
+//     re-valued only at the DS 2.0 flip. `--accent-hi` IS new vocabulary and
+//     ships now, pinned to its 2.0 partner — so in 1.x it is deliberately
+//     consumed by nothing. `/design-lab` → "Tokens & Ramp" previews the pair
+//     together by scoping both to the panel.
+
+// ── Notation ─────────────────────────────────────────────────────────────────
+// The ratified table is written in the design files' legacy `rgba(r,g,b,.a)`
+// form; this file carries the same NUMBERS in the repo's modern `rgb(r g b /
+// n%)` form, because stylelint (`color-function-notation` + `alpha-value-
+// notation`, via stylelint-config-standard-scss) rejects the legacy form.
+// `nova-tokens.spec.ts` compares notation-normalised, so a number that drifts
+// still fails even though the spelling differs.
+
+// ── Light ─────────────────────────────────────────────────────────────────────
+// Selector pair matches `_theme-light.scss`: FlyOS keys themes on
+// `html.light-theme` / `html.dark-theme`, NOT on the design files'
+// `[data-theme]`. Do not introduce `[data-theme]` here.
+:root,
+html.light-theme {
+  // ── Chrome + nav rail ──────────────────────────────────────────────────────
+  --chrome-ink: #353537;
+  --chrome-ink-hover: #000;
+  --rail-ink: #353537;
+  --rail-stroke: rgb(0 0 0 / 7%);
+  --rail-on-bg: rgb(133 88 224 / 16%);
+  --rail-on-ink: #6A3FC0;
+  --rail-on-stroke: rgb(133 88 224 / 26%);
+  --rail-on-shadow: 0 2px 6px rgb(106 63 192 / 12%);
+
+  // Hover/selection are a TINT, never an inversion (skill §9 rule 11).
+  --tint-hover: rgb(133 88 224 / 10%);
+  --tint-sel: rgb(133 88 224 / 15%);
+
+  // The 2.0 accent's hover/pressed partner. Its `--accent` sibling stays the
+  // shipped runtime knob until the flip — see the header.
+  --accent-hi: #5A32A8;
+
+  // ── System semantics ───────────────────────────────────────────────────────
+  // `--sys-red-txt` exists because `--sys-red` fails AA as dark-theme text
+  // (4.16:1). No `-txt` variant exists yet for blue/orange/teal; those fixes
+  // land centrally at S7.1, never improvised per component.
+  // ---
+  // S6.1w re-measured the family after making dark's chrome plate adaptive, to
+  // decide whether BLUE needed a `-txt` variant. It does not, for two separate
+  // reasons — the second is the load-bearing one.
+  // ---
+  // 1. Blue is never TEXT. Its only path to the DOM is `nova-priority-tone
+  //    ('normal')` -> `.status-dot--normal`, a filled circle painted with
+  //    `background: currentcolor` — a non-text graphical object (WCAG 1.4.11,
+  //    3:1), not body copy. The hues that ARE painted as text (red, green,
+  //    orange, and `--sys-red-txt`) live on the alpha-1 dark `--mat-menu-*`
+  //    (action-menu, magic-actions) and the opaque `--surface-overlay`, where
+  //    nothing varies with the wallpaper: red 4.80 / 4.82, green 8.96 / 8.99.
+  // 2. A `-txt` variant is not the mechanism anyway. Where these colours DO
+  //    measure badly is on TRANSLUCENT plates over a bright wallpaper —
+  //    `--glass-bg-elevated` at 82% gives red 2.83, blue 2.64, purple 3.40 over
+  //    the brightest backdrop — and that is a PLATE defect of exactly the kind
+  //    S6.1w fixed for the chrome, not a palette one. The proof: the EXISTING
+  //    `--sys-red-txt` measures 3.42 on that same plate and fails too. Clearing
+  //    4.5 there needs an ink of luminance >= 0.44 — near-pastel, no longer
+  //    reading as the system colour, and washed out over the 22-of-26 dark
+  //    wallpapers where the plain token already sits at 4.74–5.07.
+  // ---
+  // So the real fix is to bring `--glass-bg-elevated` (`_theme-dark.scss`, NOT
+  // this file) into the adaptive set. Minting `--sys-blue-txt` would spend a
+  // token to improve one number while every other hue on that plate still
+  // failed — the "improvised per component" move this comment already forbids.
+  --sys-red: #C2263A;
+  --sys-red-txt: #B32436;
+  --sys-orange: #9A5A0F;
+  --sys-blue: #1667B8;
+  --sys-teal: #1F6E7C;
+  --sys-green: #1B7355;
+  --sys-purple: #6A3FC0;
+
+  // Brushed-steel wash. Light-only in the design; the dark block declares it
+  // `none` so a consumer never needs `var(--steel-sheen, …)` — a hex fallback
+  // is banned outright (skill §9 rule 3).
+  --steel-sheen: linear-gradient(
+    112deg,
+    rgb(203 213 225 / 30%) 0%,
+    rgb(241 245 249 / 40%) 22%,
+    rgb(191 203 217 / 28%) 44%,
+    rgb(236 241 247 / 38%) 66%,
+    rgb(198 209 223 / 30%) 100%
+  );
+
+  // ── Ink ramp — TEXT tier ───────────────────────────────────────────────────
+  // The light ramp is a two-tier PERCEPTUAL REMAP, not an alpha mirror of dark.
+  // This tier is compressed upward into 65–95% black so every text step keeps
+  // AA on light paper. Never lerp it back toward the dark alphas.
+
+  // Naming hazard (skill §3.3): the digits after `w` are the decimal fraction —
+  // `--w1` is .10, `--w15` is .15, `--w015` is .015. Pick a step BY NAME; never
+  // mint a new rgba.
+  --w95: rgb(0 0 0 / 95%);
+  --w9: rgb(0 0 0 / 92%);
+  --w85: rgb(0 0 0 / 90%);
+  --w8: rgb(0 0 0 / 88%);
+  --w78: rgb(0 0 0 / 87%);
+  --w75: rgb(0 0 0 / 85%);
+  --w72: rgb(0 0 0 / 84%);
+  --w7: rgb(0 0 0 / 83%);
+  --w65: rgb(0 0 0 / 80%);
+  --w6: rgb(0 0 0 / 78%);
+  --w55: rgb(0 0 0 / 76%);
+  --w5: rgb(0 0 0 / 74%);
+  --w45: rgb(0 0 0 / 72%);
+
+  // `--w42` ≡ `--w4` here (both 70%) — an intentional closest-step collision on
+  // the light side, not a copy-paste bug. Same for `--w14` ≡ `--w15` below.
+  --w42: rgb(0 0 0 / 70%);
+  --w4: rgb(0 0 0 / 70%);
+  --w35: rgb(0 0 0 / 68%);
+  --w3: rgb(0 0 0 / 66%);
+  --w28: rgb(0 0 0 / 65%);
+
+  // ── Ink ramp — STRUCTURE tier ──────────────────────────────────────────────
+  // The hard discontinuity between `--w28` (65%) and `--w22` (15%) IS the
+  // accessibility mechanism: text stays legible, hairlines stay faint. Do not
+  // "smooth" it.
+  --w22: rgb(0 0 0 / 15%);
+  --w2: rgb(0 0 0 / 14%);
+  --w18: rgb(0 0 0 / 13%);
+  --w16: rgb(0 0 0 / 12%);
+  --w15: rgb(0 0 0 / 11%);
+  --w14: rgb(0 0 0 / 11%);
+  --w12: rgb(0 0 0 / 10%);
+  --w1: rgb(0 0 0 / 9%);
+  --w09: rgb(0 0 0 / 8%);
+  --w08: rgb(0 0 0 / 7.5%);
+  --w075: rgb(0 0 0 / 7%);
+  --w07: rgb(0 0 0 / 6.5%);
+  --w06: rgb(0 0 0 / 6%);
+  --w055: rgb(0 0 0 / 5.5%);
+  --w05: rgb(0 0 0 / 5%);
+  --w045: rgb(0 0 0 / 4.5%);
+  --w04: rgb(0 0 0 / 4%);
+  --w035: rgb(0 0 0 / 3.5%);
+  --w03: rgb(0 0 0 / 3%);
+  --w02: rgb(0 0 0 / 2.2%);
+  --w015: rgb(0 0 0 / 1.8%);
+
+  // ── Materials ──────────────────────────────────────────────────────────────
+  // Each material is a two-part token on purpose: a per-material alpha knob and
+  // a colour composed from it. `WallpaperGlassService` already samples the
+  // wallpaper's luminance and writes `--fly-glass-alpha` at the document root;
+  // S2.10 re-anchors these materials the same way by writing ONE number per
+  // material, with no colour string to rewrite. The composed values are
+  // numerically identical to the ratified literals.
+
+  // `--mat-header` is not consumed by the design's own header (header and rail
+  // both use `--mat-rail`; the values are identical today). Keep both — do not
+  // "clean up" the unused one.
+  --mat-header-alpha: 0.38;
+  --mat-header: rgb(226 232 240 / calc(var(--mat-header-alpha) * 100%));
+  --mat-rail-alpha: 0.38;
+  --mat-rail: rgb(226 232 240 / calc(var(--mat-rail-alpha) * 100%));
+  --mat-panel-alpha: 0.46;
+  --mat-panel: rgb(230 236 243 / calc(var(--mat-panel-alpha) * 100%));
+  --mat-menu-a-alpha: 0.58;
+  --mat-menu-a: rgb(238 242 247 / calc(var(--mat-menu-a-alpha) * 100%));
+  --mat-menu-b-alpha: 0.64;
+  --mat-menu-b: rgb(222 229 238 / calc(var(--mat-menu-b-alpha) * 100%));
+
+  // The agent aside — the PANEL hue on its own alpha ramp, top-to-bottom. It was a
+  // hardcoded literal inside `_nova-glass.scss`'s `agent` branch, and that literal
+  // was `rgb(56 54 60)` — byte-identical to the DARK `--mat-panel`, so the aside
+  // painted the dark panel colour in both themes and could never flip. Every sibling
+  // branch (`panel`, `menu`) already routed through a theme-aware token; this pair is
+  // that same shape, so the aside stops being the one surface outside the system.
+  // 0.52 -> 0.60 (S6.-1 fan-in ruling). The aside is painted straight against the
+  // WALLPAPER, exactly like `--window-bg`, and 22 of the 26 shipped wallpapers are
+  // dark: at 0.52 the top stop composited to 4.06:1 for body ink over the darkest
+  // one — sub-AA, and measured as such by `theme-contrast.spec`. The window plate
+  // solves this with the adaptive `--fly-glass-alpha` knob; this pair is not in that
+  // set, so it takes the static equivalent instead. 0.60 is not arbitrary: it leaves
+  // 40% transmission, the same as the window plate's ratified floor, so the aside
+  // and the window beside it now let the wallpaper through by the same amount.
+  --mat-agent-a-alpha: 0.6;
+  --mat-agent-a: rgb(230 236 243 / calc(var(--mat-agent-a-alpha) * 100%));
+  --mat-agent-b-alpha: 0.65;
+  --mat-agent-b: rgb(230 236 243 / calc(var(--mat-agent-b-alpha) * 100%));
+  --mat-tip-a-alpha: 0.8;
+  --mat-tip-a: rgb(238 241 245 / calc(var(--mat-tip-a-alpha) * 100%));
+  --mat-tip-b-alpha: 0.86;
+  --mat-tip-b: rgb(222 227 234 / calc(var(--mat-tip-b-alpha) * 100%));
+
+  // ── Accent ink ─────────────────────────────────────────────────────────────
+  --on-accent: #fff;
+  --check-ink: #fff;
+
+  // ── Glass quartet (design `--glass-*`, renamed per D1) ─────────────────────
+  // ⚠ The light `--glass2-bg` carries the DARK near-opaque fill
+  // (`rgb(56 54 60 / 95%)`) — reproduced verbatim from the canon. In the mock,
+  // header/rail-anchored popovers therefore render dark glass even in light
+  // mode, and the carefully-picked light `--mat-menu-*` values go unused.
+  // Intent-vs-bug is an OPEN question with UX (S0.2 memo; skill §2 ⚠ and §10).
+  // Do NOT silently "fix" it here — the ruling changes this one value, and the
+  // port replaces the mock's fragile `nth-child` fill override with an explicit
+  // surface-context class.
+  --glass2-bg:
+    radial-gradient(70% 60% at 50% 100%, var(--w07), transparent 70%),
+    linear-gradient(180deg, var(--w08), transparent 20%),
+    linear-gradient(rgb(56 54 60 / 95%), rgb(56 54 60 / 95%));
+  --glass2-border: var(--w18);
+  --glass2-inset: inset 0 0.5px 0 var(--w22);
+  --glass2-blur: blur(16px) saturate(180%) brightness(.95);
+}
+
+// ── Dark ──────────────────────────────────────────────────────────────────────
+// Selector matches `_theme-dark.scss`.
+html.dark-theme {
+  // ── Chrome + nav rail ──────────────────────────────────────────────────────
+  --chrome-ink: rgb(255 255 255 / 65%);
+  --chrome-ink-hover: #fff;
+  --rail-ink: rgb(255 255 255 / 65%);
+  --rail-stroke: rgb(255 255 255 / 12%);
+  --rail-on-bg: #836aca;
+  --rail-on-ink: #fff;
+  --rail-on-stroke: rgb(255 255 255 / 28%);
+  --rail-on-shadow: 0 8px 22px rgb(131 106 202 / 45%);
+  --tint-hover: rgb(131 106 202 / 26%);
+  --tint-sel: rgb(131 106 202 / 30%);
+  --accent-hi: #7259bd;
+
+  // ── System semantics ───────────────────────────────────────────────────────
+  --sys-red: #FF453A;
+  --sys-red-txt: #FF6961;
+  --sys-orange: #FF9F0A;
+  --sys-blue: #0A84FF;
+  --sys-teal: #64D2FF;
+  --sys-green: #4dd6a8;
+  --sys-purple: #a48ce0;
+
+  // Light-only in the design — declared as a no-op here so consumers can read
+  // it unconditionally in either theme.
+  --steel-sheen: none;
+
+  // ── Ink ramp — TEXT tier ───────────────────────────────────────────────────
+  // White-over-dark. This is the tier the light block remaps; the two are NOT
+  // mirrors of each other and must never be generated from one another.
+  --w95: rgb(255 255 255 / 95%);
+  --w9: rgb(255 255 255 / 90%);
+  --w85: rgb(255 255 255 / 85%);
+  --w8: rgb(255 255 255 / 80%);
+  --w78: rgb(255 255 255 / 78%);
+  --w75: rgb(255 255 255 / 75%);
+  --w72: rgb(255 255 255 / 72%);
+  --w7: rgb(255 255 255 / 70%);
+  --w65: rgb(255 255 255 / 65%);
+  --w6: rgb(255 255 255 / 60%);
+  --w55: rgb(255 255 255 / 55%);
+  --w5: rgb(255 255 255 / 50%);
+  --w45: rgb(255 255 255 / 45%);
+  --w42: rgb(255 255 255 / 42%);
+  --w4: rgb(255 255 255 / 40%);
+  --w35: rgb(255 255 255 / 35%);
+  --w3: rgb(255 255 255 / 30%);
+  --w28: rgb(255 255 255 / 28%);
+
+  // ── Ink ramp — STRUCTURE tier ──────────────────────────────────────────────
+  // Dark's own tiers are continuous (28% → 22%); only the light ramp breaks.
+  --w22: rgb(255 255 255 / 22%);
+  --w2: rgb(255 255 255 / 20%);
+  --w18: rgb(255 255 255 / 18%);
+  --w16: rgb(255 255 255 / 16%);
+  --w15: rgb(255 255 255 / 15%);
+  --w14: rgb(255 255 255 / 14%);
+  --w12: rgb(255 255 255 / 12%);
+  --w1: rgb(255 255 255 / 10%);
+  --w09: rgb(255 255 255 / 9%);
+  --w08: rgb(255 255 255 / 8%);
+  --w075: rgb(255 255 255 / 7.5%);
+  --w07: rgb(255 255 255 / 7%);
+  --w06: rgb(255 255 255 / 6%);
+  --w055: rgb(255 255 255 / 5.5%);
+  --w05: rgb(255 255 255 / 5%);
+  --w045: rgb(255 255 255 / 4.5%);
+  --w04: rgb(255 255 255 / 4%);
+  --w035: rgb(255 255 255 / 3.5%);
+  --w03: rgb(255 255 255 / 3%);
+  --w02: rgb(255 255 255 / 2%);
+  --w015: rgb(255 255 255 / 1.5%);
+
+  // ── Materials ──────────────────────────────────────────────────────────────
+  // Same two-part shape as the light block. The menu gradient stops are opaque
+  // in this theme (`#201f25` / `#1a191e`); they are expressed as alpha-1 rgb so
+  // S2.10 can re-anchor every material through one uniform knob.
+  --mat-header-alpha: 0.38;
+  --mat-header: rgb(48 46 52 / calc(var(--mat-header-alpha) * 100%));
+  --mat-rail-alpha: 0.38;
+  --mat-rail: rgb(48 46 52 / calc(var(--mat-rail-alpha) * 100%));
+  --mat-panel-alpha: 0.55;
+  --mat-panel: rgb(56 54 60 / calc(var(--mat-panel-alpha) * 100%));
+  --mat-menu-a-alpha: 1;
+  --mat-menu-a: rgb(32 31 37 / calc(var(--mat-menu-a-alpha) * 100%));
+  --mat-menu-b-alpha: 1;
+  --mat-menu-b: rgb(26 25 30 / calc(var(--mat-menu-b-alpha) * 100%));
+
+  // Re-valued by S6W (agent-panel sweep). The carried-over literal was
+  // rgb(56 54 60) at 0.52→0.65 — warm-hued AND translucent, so over a warm
+  // wallpaper the aside composited into muddy brown while the account-menu
+  // popover beside it stayed crisp on the alpha-1 `--mat-menu-*` pair. These
+  // are now that same menu pair's stops at alpha 1: crisp, wallpaper-immune,
+  // and cool-neutral like every other dark floating surface.
+  // Alternatives weighed (final call is perceptual, at fan-in):
+  //   · alpha→1 on the old hue rgb(56 54 60) — crisp but noticeably lighter
+  //     and warmer than the menu material next to it;
+  //   · ~0.85 alpha on either hue — still lets a warm wallpaper tint the
+  //     plate, i.e. a smaller dose of the same defect.
+  --mat-agent-a-alpha: 1;
+  --mat-agent-a: rgb(32 31 37 / calc(var(--mat-agent-a-alpha) * 100%));
+  --mat-agent-b-alpha: 1;
+  --mat-agent-b: rgb(26 25 30 / calc(var(--mat-agent-b-alpha) * 100%));
+  --mat-tip-a-alpha: 0.82;
+  --mat-tip-a: rgb(46 44 52 / calc(var(--mat-tip-a-alpha) * 100%));
+  --mat-tip-b-alpha: 0.86;
+  --mat-tip-b: rgb(40 38 46 / calc(var(--mat-tip-b-alpha) * 100%));
+
+  // ── Accent ink ─────────────────────────────────────────────────────────────
+  --on-accent: #fff;
+  --check-ink: #0f1013;
+
+  // ── Glass quartet ──────────────────────────────────────────────────────────
+  // Identical to the light block by design — see the ⚠ there.
+  --glass2-bg:
+    radial-gradient(70% 60% at 50% 100%, var(--w07), transparent 70%),
+    linear-gradient(180deg, var(--w08), transparent 20%),
+    linear-gradient(rgb(56 54 60 / 95%), rgb(56 54 60 / 95%));
+  --glass2-border: var(--w18);
+  --glass2-inset: inset 0 0.5px 0 var(--w22);
+  --glass2-blur: blur(16px) saturate(180%) brightness(.95);
+}