npm - @motir/design-system - Versions diffs - 0.1.0 → 0.1.1 - Mend

@motir/design-system 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/README.md +42 -10
package/dist/components/theme/StyleVignette.js +24 -4
package/dist/components/theme/StyleVignette.js.map +1 -1
package/dist/components/ui/Checkbox.d.ts +84 -0
package/dist/components/ui/Checkbox.js +70 -0
package/dist/components/ui/Checkbox.js.map +1 -0
package/dist/components/ui/Combobox.d.ts +7 -1
package/dist/components/ui/Combobox.js +21 -3
package/dist/components/ui/Combobox.js.map +1 -1
package/dist/components/ui/ErrorState.js +1 -1
package/dist/components/ui/ErrorState.js.map +1 -1
package/dist/components/ui/Input.d.ts +33 -0
package/dist/components/ui/Input.js +17 -6
package/dist/components/ui/Input.js.map +1 -1
package/dist/components/ui/MultiSelectPicker.js +1 -1
package/dist/components/ui/MultiSelectPicker.js.map +1 -1
package/dist/components/ui/Pill.d.ts +7 -4
package/dist/components/ui/Pill.js +21 -1
package/dist/components/ui/Pill.js.map +1 -1
package/dist/components/ui/Segmented.js +22 -3
package/dist/components/ui/Segmented.js.map +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -0
package/dist/specimen/TokensSpecimen.js +41 -10
package/dist/specimen/TokensSpecimen.js.map +1 -1
package/package.json +7 -2
package/theme.css +753 -48

package/theme.css CHANGED Viewed

@@ -290,7 +290,24 @@
    (<html>) is dark — the symmetric counterpart to [data-theme='dark'], mirroring
    how [data-palette]/[data-style]/[data-type] already re-skin a subtree. The
    onboarding design step (MOTIR-1040) uses it to preview the user's project in
-   light regardless of Motir's own theme. Values mirror the @theme light base. */
+   light regardless of Motir's own theme. Values mirror the @theme light base.
+   ⚠️ On a NESTED element this block is only HALF the mechanism (MOTIR-2077).
+   `--el-*` are declared `--el-x: var(--color-y)` and var() substitutes where the
+   property is DECLARED, so re-asserting Tier-0 here cannot retroactively change
+   the `--el-*` a component reads — those resolved at :root and merely inherit
+   down. Pair this with `data-appearance-scope` on the same element (below), which
+   re-emits the Tier-3 layer locally so its var()s see these overrides. That
+   attribute is axis-agnostic — a nested [data-palette]/[data-style] needs it too
+   — which is why light has no duplicated `--el-*` companion block the way dark
+   does; dark's exists only for its two concrete-hex tokens, not to scope a
+   subtree.
+   ⚠️ KEEP AT PARITY with [data-theme='dark'] above. A Tier-0 token dark declares
+   and this block omits keeps its DARK value in a forced-light subtree no matter
+   what scopes it: with nothing local to shadow it, the inherited value stands.
+   That was MOTIR-2077's defect (`--color-canvas`, added below).
+   tests/theme/forcedThemeSubtree.test.ts asserts the parity both ways. */
 [data-theme='light'] {
   color-scheme: light;
@@ -298,6 +315,7 @@
   --color-foreground: #1a1a1a;
   --color-surface: #f6f5f4;
   --color-surface-soft: #fafaf9;
+  --color-canvas: #ecebe7; /* recessed board behind raised cards (planning canvas) */
   --color-ink: #1a1a1a;
   --color-charcoal: #37352f;
@@ -1213,15 +1231,22 @@
     inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
     0 1px 3px rgba(15, 15, 15, 0.08),
     0 8px 18px -8px rgba(15, 15, 15, 0.22);
-  /* The column is `h-[calc(100dvh-12rem)]` — sized to fill the board area. In
-     the `overflow-x-auto` row that exactly-filling height means the column's
-     rounded BOTTOM corner + its drop shadow sit at the overflow-clip boundary
-     and get sheared flat (the reported "sharp bottom corner"). Trim the height
-     so the rounded corner + shadow clear the clip and the column reads as a
-     fully-rounded floating card. Also clip the column's OWN children to its
-     radius so a flush inner surface can't square a corner — the board cards pop
-     on hover but the DragOverlay clone is portaled, so nothing 3D is lost. */
-  height: calc(100dvh - 14.5rem);
+  /* The column is `h-[calc(100dvh - 10.5rem - var(--shell-bottom-clearance))]` —
+     sized to fill the board area. In the `overflow-x-auto` row that
+     exactly-filling height means the column's rounded BOTTOM corner + its drop
+     shadow sit at the overflow-clip boundary and get sheared flat (the reported
+     "sharp bottom corner"). Trim the height by a further 2.5rem so the rounded
+     corner + shadow clear the clip and the column reads as a fully-rounded
+     floating card. Also clip the column's OWN children to its radius so a flush
+     inner surface can't square a corner — the board cards pop on hover but the
+     DragOverlay clone is portaled, so nothing 3D is lost.
+     ⚠️ This tracks BoardColumn's height and must keep spending the same
+     `--shell-bottom-clearance` the shell sets (MOTIR-2763), not a flat number:
+     a stylesheet cannot read the `showPlanWithAi` prop, so the custom property
+     is the only way this stays conditional on the orb actually mounting. The
+     13rem below is 10.5rem of chrome + this style's own 2.5rem trim. */
+  height: calc(100dvh - 13rem - var(--shell-bottom-clearance, 1.5rem));
   overflow: hidden;
 }
 [data-style='3d-immersive'] [data-board-scroll] {
@@ -1230,26 +1255,84 @@
   padding-top: 0.25rem;
 }
-/* ── 3D / Immersive — PHYSICAL BUTTONS ──────────────────────────────────────
+/* ── 3D / Immersive — CONTROL DEPTH: every control sits on a named plane ────
    In a 3D design a button is not flat: it has visible THICKNESS (a solid base
    edge) and presses DOWN onto it on click (translateY + the base compresses) —
-   the standard 3D/skeuomorphic button. This must cover EVERY button, not just
-   the <Button> primitive: the ~35 hand-rolled `rounded-(--radius-btn)` <button>s
-   (the /issues toolbar triggers — Filter / Advanced / Saved / the Tree-List
-   switcher — links-styled-as-buttons, etc.) were flat. So the GLOBAL rule on the
-   button-radius class is the baseline (a neutral `--el-border-strong` edge, which
-   suits the outline/toolbar buttons); FILLED variants override it with a
-   colour-matched edge (primary → `--el-accent-pressed`, danger → a darkened
-   `--el-danger` — palette-derived, so the axes stay disjoint); ghost stays flat
-   (the quiet button). box-shadow is not a colour-painting property, so the
-   material-rule test skips these. The press overrides the base `active:scale`
-   with a more physical translateY. */
-/* `button.rounded-(--radius-input)` catches DROPDOWN-TRIGGER buttons styled as an
-   input (the board switcher, combobox / picker triggers) so they're physical
-   keys too — scoped to `button` so a real <input>/<textarea> text field (same
-   radius) is NEVER raised. */
-[data-style='3d-immersive'] .rounded-\(--radius-btn\),
-[data-style='3d-immersive'] button.rounded-\(--radius-input\) {
+   the standard 3D/skeuomorphic button. §4's plane ladder in
+   docs/styles/3d-immersive.md is the spec; this block is its implementation.
+   ⚠️ THE ROLE DECIDES THE PLANE, AND A RADIUS UTILITY DOES NOT CARRY THE ROLE
+   (MOTIR-3522). This rule used to match `.rounded-(--radius-btn)` alone, on the
+   reasoning that the button radius identifies a button. It does not: the app
+   emits SEVEN radius utilities on interactive tags, and each of the other six
+   mixes families that want opposite treatments —
+     `--radius-badge` is worn by 3 hero action buttons (Plan with AI, Re-plan,
+        the build-in-public link) AND by 9 filter/tag chips and segmented tabs,
+        which §4 says stay flat pills;
+     `--radius-control` is worn by ~63 square icon buttons (real keys) AND by
+        ~51 menu / option / full-width list rows AND by inline text
+        affordances that only ever wanted a focus ring;
+     `rounded-full` is worn by the Plan-with-AI orb (a key) AND by two Switch
+        tracks, a colour swatch, an avatar and a tag remove-×.
+   So widening the old rule by radius would have raised switches, swatches,
+   avatars and chips. Depth is keyed on the ROLE instead, which reaches the
+   element two ways:
+     1. `data-depth` — the EXPLICIT hook, and the one to reach for. `key` puts a
+        control on the raised plane, `flat` takes it off. Emitted by the
+        primitives that know their own role and set by hand on the handful of
+        hand-rolled controls the default below gets wrong.
+     2. a RADIUS DEFAULT for the un-annotated majority, chosen so the default is
+        SAFE: the button radii and the square icon-button shape are keys;
+        everything else interactive is QUIET (flat at rest, but it still
+        presses). A control that should be raised and is not looks understated;
+        one raised that should not be looks broken.
+   `tests/theme/immersive-control-depth.test.ts` enumerates the radius utilities
+   the codebase actually emits on interactive tags and fails when one has no
+   classification here — the promise is bound to class names, so something has
+   to break when a new control class appears.
+   The GLOBAL baseline edge is a neutral `--el-border-strong` (it suits the
+   outline/toolbar buttons); FILLED variants override it with a colour-matched
+   edge (primary → `--el-accent-pressed`, danger → a darkened `--el-danger` —
+   palette-derived, so the axes stay disjoint); ghost stays flat (the quiet
+   button). box-shadow is not a colour-painting property, so the material-rule
+   test skips these. The press overrides the base `active:scale` with a more
+   physical translateY.
+   ⚠️ SPECIFICITY: the key set is wrapped in `:where()` so it contributes
+   NOTHING beyond the `[data-style]` attribute (0,1,0). That is deliberate — the
+   `[data-variant]` overrides below are (0,2,0) and the flat overrides after
+   them are (0,2,0), so both still win. Adding a plain `:is()` here silently
+   inverts that. */
+/* THE KEY SET — controls that carry real thickness.
+   `button.rounded-(--radius-input)` catches DROPDOWN-TRIGGER buttons styled as
+   an input (the board switcher, combobox / picker triggers) — scoped to
+   `button` so a real <input>/<textarea> text field (same radius) is NEVER
+   raised; it is RECESSED instead, below.
+   The `.justify-center` limb is the square icon-button shape: a centred control
+   on the control radius is a key (the 3-dots trigger, the fullscreen toggle,
+   every close ×). A row is never centred — it is `w-full` and `text-left`. */
+[data-style='3d-immersive']
+  :where(
+    .rounded-\(--radius-btn\),
+    button.rounded-\(--radius-input\),
+    :is(button, a).rounded-\(--radius-control\).justify-center,
+    [data-depth='key']
+  ):not(
+    :where(
+      [role='switch'],
+      [role='radio'],
+      [role='checkbox'],
+      [role='menuitem'],
+      [role='option'],
+      [data-depth='flat']
+    )
+  ) {
   box-shadow:
     0 3px 0 0 var(--el-border-strong),
     0 5px 10px -3px rgba(15, 15, 15, 0.18);
@@ -1272,10 +1355,37 @@
 [data-style='3d-immersive'] [data-variant='ghost'] {
   box-shadow: none;
 }
-/* Press DOWN onto the base — the button drops by its thickness and the base
-   edge compresses, like a real key. Overrides the base `active:scale`. */
-[data-style='3d-immersive'] .rounded-\(--radius-btn\):active:not(:disabled),
-[data-style='3d-immersive'] button.rounded-\(--radius-input\):active:not(:disabled) {
+/* THE FLAT SET — rows, chips and switches, which §4 keeps on their parent's
+   plane. These come AFTER the key set and carry (0,2,0), so they win over its
+   (0,1,0) wherever the two overlap (a centred control inside an open menu, a
+   `data-depth='flat'` icon button). A menu row raised inside an already-floating
+   popover reads as debris, not depth — the overlay is the thing that floats. */
+[data-style='3d-immersive']
+  :is(
+    [role='menuitem'],
+    [role='option'],
+    [role='menuitemcheckbox'],
+    [role='menuitemradio'],
+    [role='switch'],
+    [data-depth='flat']
+  ),
+[data-style='3d-immersive']
+  :is([data-surface='popover'], [data-menu-surface])
+  :is(button, a).rounded-\(--radius-control\),
+[data-style='3d-immersive'] :is(button, a).w-full.rounded-\(--radius-control\) {
+  box-shadow: none;
+}
+/* THE PRESS — the raised set drops by its thickness and the base edge
+   compresses, like a real key. Overrides the base `active:scale`. */
+[data-style='3d-immersive']
+  :where(
+    .rounded-\(--radius-btn\),
+    button.rounded-\(--radius-input\),
+    :is(button, a).rounded-\(--radius-control\).justify-center,
+    [data-depth='key']
+  ):active:not(:disabled) {
   transform: translateY(3px);
   box-shadow:
     0 1px 0 0 var(--el-border-strong),
@@ -1295,6 +1405,67 @@
   box-shadow: none;
 }
+/* THE QUIET PRESS — a control with no resting thickness still has to answer the
+   pointer, or the style reads as flat wherever it is not a key: menu rows, list
+   rows, nav links, inline affordances, the ghost button. One pixel of travel is
+   the whole treatment; it is what separates "quiet" from "inert". */
+[data-style='3d-immersive']
+  :where(:is(button, a).rounded-\(--radius-control\), [data-variant='ghost']):active:not(
+    :disabled
+  ) {
+  transform: translateY(1px);
+}
+/* THE RECESSED SET — text fields are pressed INTO the surface, not raised off
+   it. §4's "on the face" left them with a 1px border and no depth at all on a
+   page where every panel carries a four-layer float, which is the other half of
+   what MOTIR-3522 reported (the roadmap's search box). A raised text field is
+   wrong — you type into a well — so this is the inverse of the key treatment,
+   not a copy of it. `[data-surface='input']` is the Input primitive's shell;
+   the bare element selectors catch the hand-rolled fields. Checkbox and radio
+   are excluded: they are chips, not wells. */
+[data-style='3d-immersive']
+  :where(
+    [data-surface='input'],
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
+    textarea,
+    select
+  ) {
+  box-shadow:
+    inset 0 2px 6px -2px rgba(15, 15, 15, 0.26),
+    inset 0 1px 2px 0 rgba(15, 15, 15, 0.05);
+}
+/* Hero controls paint their own shadow in an INLINE style, which beats every
+   rule above — an inline declaration is not something a style layer can reach.
+   So the two of them read their shadow from a variable instead, with the base
+   look as the `var()` fallback, and this is where the key's base edge is added
+   to it. Palette-derived throughout; the colour axis stays disjoint.
+   Consumed by components/planning/PlanWithAILauncher.tsx (--plan-hero-shadow)
+   and components/planning/PlanWithAIFab.tsx (--plan-orb-shadow).
+   ⚠️ ON `body`, NOT ON THE BARE `[data-style]` TOKEN BLOCK. Both values READ
+   `--el-*`, and `tests/theme/styleRegistry.test.ts` holds a bare token block to
+   the colour/style axis split — a `[data-style='…'] { … }` block may set only
+   shape/feel tokens, never anything naming a palette token, and
+   `tests/theme/shapeSwapLint.test.ts` additionally requires such a block to
+   override every shape role. A descendant rule is neither, which is where the
+   immersive background (which reads `--el-*` for the same reason) already
+   lives. Custom properties inherit, so every control below `body` sees these. */
+[data-style='3d-immersive'] body {
+  --plan-hero-shadow:
+    0 4px 0 0 var(--el-accent-pressed),
+    inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) 38%, transparent),
+    inset 0 0 0 1px color-mix(in srgb, var(--el-accent-text) 18%, transparent),
+    0 9px 18px -5px color-mix(in srgb, var(--el-accent) 75%, transparent),
+    0 0 22px -3px color-mix(in srgb, var(--el-highlight) 50%, transparent);
+  --plan-orb-shadow:
+    0 5px 0 0 var(--el-accent-pressed),
+    inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) 40%, transparent),
+    0 12px 24px -6px color-mix(in srgb, var(--el-accent) 80%, transparent),
+    0 0 28px -2px color-mix(in srgb, var(--el-highlight) 55%, transparent);
+}
 /* ── 3D / Immersive — DROPDOWNS / POPOVERS / MENUS unfold in 3D ──────────────
    A flat fade-in is the "still not 3D" tell on overlays. The standard 3D
    dropdown UNFOLDS: it swings open from its top edge over a perspective
@@ -2226,17 +2397,31 @@
   /* ── Text scale (the warm-charcoal hierarchy, named by ROLE) ────── */
   --el-text: var(--color-foreground); /* primary ink */
   --el-text-strong: var(--color-charcoal); /* emphasis / AA-safe text on tints */
-  --el-text-secondary: var(--color-slate); /* secondary copy */
+  --el-text-secondary: var(--color-slate); /* secondary copy — AA on EVERY surface */
+  /* ⚠️ AA-SAFE ONLY ON THE WHITE PAGE/CARD, and by 0.04 (4.54:1). On
+     --el-surface it is 4.17, on --el-muted 4.12, on --el-surface-soft 4.34 —
+     all under AA. A muted caption belongs inside a card, never on a panel.
+     (MOTIR-2455; light theme is the binding one — every ink clears AA on dark.) */
   --el-text-muted: var(--color-muted-foreground); /* muted / captions */
   --el-text-tertiary: var(--color-steel); /* tertiary / footers */
-  --el-text-faint: var(--color-stone); /* faint labels */
+  /* ⚠️ NEVER CARRIES TEXT WCAG MEASURES — 2.37–2.82:1 on every surface in BOTH
+     themes, so there is no context in which it passes. It is for DECORATIVE
+     glyphs (aria-hidden, or a role="img" whose label carries the meaning) and
+     for DISABLED / inactive text, which WCAG 1.4.3 exempts. Active
+     informational text takes --el-text-secondary. (MOTIR-2455) */
+  --el-text-faint: var(--color-stone); /* faint labels — decoration + disabled ONLY */
   --el-text-inverted: var(--color-background); /* text on an ink / accent fill */
   /* ── Accent (active CTA identity) + brand highlight ─────────────── */
   /* --el-accent is the FILL behind --el-accent-text (white): filled buttons,
      badges, toggles. --el-accent-on-surface is the accent used AS text/icon on
      a page surface. They diverge in dark theme (fill darkens for white-text AA;
-     text stays brand-bright for AA on the near-black canvas) — MOTIR-757. */
+     text stays brand-bright for AA on the near-black canvas) — MOTIR-757.
+     ⚠️ --el-accent-on-surface is OVERRIDDEN in the [data-theme='dark'] block
+     further down: brand-bright-on-the-canvas is not the same claim as AA on the
+     tinted surfaces that sit above it, and the ink was 4.24-4.41:1 on all three
+     for as long as the dark theme has shipped (MOTIR-3745). The light
+     declaration below is unchanged and is what the Tier-0-alias guards read. */
   --el-accent: var(--color-primary-fill);
   --el-accent-text: var(--color-primary-foreground);
   --el-accent-on-surface: var(--color-primary);
@@ -2260,8 +2445,32 @@
   --el-link-pressed: var(--color-link-pressed);
   /* ── Semantic status ───────────────────────────────────────────── */
+  /* THREE danger tokens, and the middle one is the trap (MOTIR-3663).
+     --el-danger is the FILL. --el-danger-text is the ink FOR that fill, so it
+     is legal ONLY on an element that also carries bg-(--el-danger) — the
+     Button danger variant, and nothing else. Painted on a page instead it is
+     1.00:1 in the light theme of ALL TEN palettes (the ink and the page are
+     the same white) and 1.00:1 in six of the ten dark ones; in the other four
+     it renders near-white, indistinguishable from --el-text, so the DANGER
+     SIGNAL is lost rather than the text. Both halves are the same defect, and
+     `tests/theme/inkContrastLint.test.ts`'s danger arm now holds the rule at
+     zero over the same four roots.
+     --el-danger-on-surface is the ink for danger text ON a page: the palette's
+     own danger hue pulled 30% toward that theme's body ink, which is the
+     smallest move that clears AA everywhere. Raw --el-danger does NOT — it is
+     4.25:1 (base), 4.11:1 (cobalt) and 4.24:1 (graphite) on the DARK page, and
+     under 4.5 on most tints in both themes.
+     DERIVED rather than listed, deliberately: both inputs are tokens, so it
+     re-skins with data-palette and a new palette is covered on the day it is
+     added instead of the day somebody remembers to extend a table. Measured
+     across all 20 palette x theme combinations against page/card, --el-surface,
+     --el-surface-soft, --el-muted, --el-tint-rose and --el-danger-surface, the
+     worst pair is 4.77:1 and it stays perceptually red (deltaE 6.8-14.6 from
+     the base hue, 23.8-39.2 from the body ink). The table is asserted, not
+     asserted-once: inkContrastLint recomputes it from this file. */
   --el-danger: var(--color-destructive);
   --el-danger-text: var(--color-destructive-foreground);
+  --el-danger-on-surface: color-mix(in srgb, var(--el-danger) 70%, var(--el-text));
   --el-success: var(--color-success);
   --el-warning: var(--color-warning);
   --el-info: var(--color-info);
@@ -2288,6 +2497,27 @@
      lib/workflows/defaultWorkflow.ts. */
   --el-status-todo: var(--color-stone); /* neutral grey — not started */
   --el-status-in-progress: var(--color-info); /* blue — active */
+  --el-status-planning: var(--color-accent-teal); /* teal — being RE-PLANNED, not being worked */
+  /* BUILT, waiting on checks (MOTIR-3003) — a DESATURATED In Review, and the
+     mix is the meaning: this card is what In Review will be once CI says so, and
+     has not earned the brand hue yet. Both inputs are palette-tuned status
+     tokens, so it needs no per-palette block and it TRACKS a palette that moves
+     `in_review` — measured at ΔE2000 >= 10 against every other status in all ten
+     palettes x both themes (tests/theme/statusHueSeparation.test.ts).
+     ⚠️ It is NOT --color-accent, which `design/boards/implemented-column.mock.html`
+     originally specified: that reads clean in the base palette and collides in
+     five of the ten (amber/candy/citrine/graphite/sienna, ΔE as low as 0.0). The
+     asset carries the correction and the measurement. */
+  /* pink — BUILT, waiting on checks (MOTIR-3003). The one saturated Tier-0 hue
+     no other STATUS spends; sharing a hue across FAMILIES is this file's own
+     convention (--el-type-epic is also --color-accent). ΔE 33.2 / 26.2 from its
+     nearest neighbour in this palette.
+     ⚠️ FIVE palettes re-map --color-accent onto something a status already uses,
+     so each carries its own override below — the same per-palette follow-up
+     --el-status-planning needed in citrine and candy (MOTIR-2425). Measured by
+     tests/theme/statusHueSeparation.test.ts, which now folds a color-mix rather
+     than throwing on one. */
+  --el-status-implemented: var(--color-accent);
   --el-status-in-review: var(--color-primary); /* brand — differentiate from in-progress */
   --el-status-done: var(--color-success); /* green — resolved */
   --el-status-blocked: var(--color-warning); /* amber — can't proceed (gap fixed) */
@@ -2341,6 +2571,9 @@
   --el-role-admin: var(--color-tint-lavender);
   --el-role-member: var(--color-tint-sky);
   --el-role-viewer: var(--color-tint-mint);
+  /* A project's OWN role (MOTIR-2485) — peach, the next free slot: the members
+     surface had already spent lavender / sky / mint on the three built-ins. */
+  --el-role-custom: var(--color-tint-peach);
   --el-org-role-owner: var(--color-tint-lavender);
   --el-org-role-admin: var(--color-tint-sky);
   --el-org-role-member: var(--color-tint-mint);
@@ -2374,6 +2607,13 @@
   --el-notif-commented: var(--color-info); /* was --el-type-task */
   --el-notif-assigned: var(--color-accent-green); /* was --el-type-story */
   --el-notif-transitioned: var(--color-accent-teal); /* was --el-type-subtask */
+  /* The EXECUTOR badge on a Home row's assignee avatar (Story MOTIR-2649 ·
+     Subtask MOTIR-2653, per design/home/design-notes.md §"The agent state").
+     Same mapping form as --el-notif-mentioned above and for the same reason:
+     it resolves to the accent fill today, but owning its own slot means a
+     palette can move agent badges without dragging the CTA with them. The
+     third pillar becoming visible is worth a token of its own. */
+  --el-executor-agent: var(--color-primary-fill);
   /* AI model dots (promote to a named family; deepseek was borrowing --el-type-subtask).
      opus keeps the accent fill, same --color-primary-fill reasoning as mentioned. */
   --el-model-opus: var(--color-primary-fill); /* the accent fill (matches prior --el-accent) */
@@ -2427,6 +2667,33 @@
   --el-card: var(--color-background); /* untinted card surface — fixes the bg-card orphan */
   --el-input-border: var(--color-hairline-strong); /* input outline (was --el-border-strong) */
   --el-button-border: var(--color-hairline-strong); /* secondary-button outline */
+  /* ── Non-editable field states (MOTIR-2495) ──
+     A field that cannot be typed into used to be drawn with `opacity-50` on the
+     whole wrapper, which composites its CHILDREN — value, placeholder, and the
+     `addonStart`/`addonEnd` affixes — against the page and roughly halves
+     whatever contrast the palette guaranteed them. Contrast is a property of a
+     PAIR (theme.css's own colour rule); opacity quietly makes it a property of
+     a triple, so no ink choice can be checked and none can be fixed: the org
+     URL's affix was already `--el-text-secondary`, the darkest caption ink, and
+     still measured below AA. These four tokens express the two states as
+     COLOUR instead, so every ink over them is AA-checkable and palette-swappable.
+     Measured on the base palette, light (the binding theme; dark clears by more):
+       disabled  value/affix --color-slate on --color-muted   = 6.18:1 ✓
+       read-only value       --color-foreground on --color-surface = 15.98:1 ✓
+       read-only affix       --color-slate on --color-surface  = 6.24:1 ✓
+     The DISABLED border is deliberately softer than the enabled one — the state
+     reads through fill + ink + edge together, so it survives a surface-material
+     style (glassmorphism repaints [data-surface='input'], and its rule outranks
+     a utility class) that erases the fill alone. */
+  --el-input-disabled-bg: var(--color-muted); /* disabled field fill (replaces opacity-50) */
+  --el-input-disabled-border: var(--color-hairline); /* disabled field edge — softer than enabled */
+  --el-input-disabled-text: var(
+    --color-slate
+  ); /* disabled value/placeholder/affix ink — AA on the fill above */
+  --el-input-readonly-bg: var(
+    --color-surface
+  ); /* read-only field fill — not editable, but focusable + full ink */
   --el-count-bg: var(--color-muted); /* count-badge fill (shipped value; see note above) */
   --el-count-text: var(--color-slate); /* count-badge ink (was --el-text-secondary) */
@@ -2460,6 +2727,21 @@
   --el-type-manual: var(--color-stone); /* stone  — human provisioning */
   --el-type-chore: var(--color-slate); /* slate  — housekeeping */
+  /* The four members ADR Amendment 1 (MOTIR-2629) admitted, per MOTIR-2631's
+     design (design/work-items/design-notes.md, "Q2"). The block above spent
+     ALL SEVEN mutually distinct saturated hues and all three greys at ten
+     members, and there is no eighth — inventing one is forbidden. So each
+     newcomer POINTS AT the Tier-0 hue of the member the amendment named as its
+     NEAREST NEIGHBOUR, and the GLYPH carries the difference (the chip renders
+     its label too, so hue was never the sole carrier — finding #35).
+     Each keeps its OWN token so a future palette can split them without
+     touching a component, and so WORK_ITEM_TYPE_META's per-member `hueVar`
+     shape holds. Hue names the FAMILY; the glyph names the member. */
+  --el-type-copy: var(--color-accent-teal); /* teal   — with content (Author) */
+  --el-type-translate: var(--color-accent-teal); /* teal   — with content (Author) */
+  --el-type-verification: var(--color-accent-orange); /* orange — with review (Investigate) */
+  --el-type-legal: var(--color-charcoal); /* ink    — with decision (Govern) */
   /* ── Chart series (Story 4.6 · the reusable viz Story 6.3 reuses) ──
      Every chart colour routes through one of these, NEVER a raw --color-*
      in chart code (the per-component growth pattern). They map to Tier-0
@@ -2537,8 +2819,14 @@
   --el-diff-moved: var(--color-tint-sky);
   --el-chat-bubble-user: var(--color-primary-fill); /* text stays --el-accent-text */
   --el-chat-bubble-ai: var(--color-surface-soft); /* text stays --el-text */
-  --el-canvas-edge-pending: var(--color-border); /* dashed, not-yet-committed edge */
-  --el-canvas-edge-committed: var(--color-hairline-strong); /* solid, settled edge */
+  /* Canvas dependency edges ride the RECESSED --el-canvas, not a raised surface, so
+     they use INK tokens (--color-slate / -charcoal), NOT the hairline-on-a-card
+     --color-border / -hairline-strong which are near-invisible there (~1.0-1.9:1 vs
+     the canvas in every palette — MOTIR-1564). Ink clears WCAG 1.4.11 (≥3:1) on the
+     canvas across all palettes/themes while still re-tinting per palette; solid vs
+     dashed + the arrowhead marker carry the committed/pending distinction. */
+  --el-canvas-edge-pending: var(--color-slate); /* dashed, not-yet-committed edge (quiet ink) */
+  --el-canvas-edge-committed: var(--color-charcoal); /* solid, settled edge (emphasis ink) */
   --el-station-tier-discovery: var(--color-tint-sky);
   --el-station-tier-vision: var(--color-tint-lavender);
   --el-station-tier-feasibility: var(--color-tint-mint);
@@ -2602,6 +2890,53 @@
    one-shade-darker. */
 [data-theme='dark'] {
   --el-sidebar-item-bg-hover: #222222;
+  /* THE DARK ACCENT INK (MOTIR-3745). Light keeps the plain
+     var(--color-primary) alias declared in the Tier-3 block above, byte for
+     byte — this is a DARK-ONLY lift, and deliberately so: the light accent
+     already clears AA on every surface (6.29:1 on --el-surface-soft in the
+     base palette), so there is nothing there to buy and a re-tint would cost
+     the brand hue for no contrast.
+     What it fixes: the dark --color-primary was chosen for AA on the near-black
+     CANVAS (#0f0f0f, 4.67:1 — see the Tier-1 comment at --color-primary, and
+     MOTIR-757) and was never measured against anything else. Every tinted
+     surface in dark sits ABOVE the canvas, so the ink arrives there with less
+     contrast, not more: 4.24:1 on --el-surface / --el-muted (#1a1a1a) and
+     4.41:1 on --el-surface-soft (#161616), across all sixteen --el-* aliases of
+     those three fills. 13.5px semibold is not WCAG large text, so 1.4.3 asks
+     4.5:1 and ExploreTopBar's current-page nav item missed it by 0.09 on
+     /explore and /docs — both public, both reachable signed out.
+     Why the mix and not a hex: DERIVED from two tokens, exactly like
+     --el-danger-on-surface above, so it re-skins with data-palette and an
+     eleventh palette is covered the day it lands rather than the day somebody
+     remembers a table.
+     Why 82%: it is sized against a WIDER set than the guard measures. On the
+     surface vocabulary the accent arm asserts (the page white and the three
+     greys, every alias) the worst dark pair at 82% is 5.53:1. The binding
+     constraint is --el-tint-lavender — the accent family's own tint, which the
+     arm does not measure but which the tree paints accent text on in ten files:
+     84% is the largest primary share that clears it (4.57:1) and 82% is one
+     2% step further, for headroom (4.68:1). MOTIR-3774 carries the LIGHT half
+     of that pair, which no dark override can reach. Pulling further still would
+     eventually cost the accent its signal rather than buy contrast, so the
+     distance from --el-text is asserted too (22.6-54.5 deltaE, floor 10).
+     Why HERE and not on the Tier-3 alias: --el-accent-on-surface's light
+     declaration is a load-bearing Tier-0 ALIAS. tests/theme/
+     iconTextSurfaceTokens + interactionAgileTokens pin --el-icon-active and
+     --el-tabnav-active as zero-change aliases OF it, and brand-tile-contrast
+     resolves it to a --color-* by name. A dark-only override leaves all three
+     reading the base declaration they were written about, and leaves
+     --color-primary's eleven other Tier-3 consumers (plus --focus-ring-color)
+     where they are — including --el-vote-active-bg, which is a FILL and would
+     have LOST contrast against its white ink. Move the ink, not the fill
+     (MOTIR-3664).
+     The table is asserted, not asserted-once: inkContrastLint's accent arm
+     recomputes it from this file over every palette x theme. */
+  --el-accent-on-surface: color-mix(in srgb, var(--color-primary) 82%, var(--el-text));
   /* The modal scrim deepens in dark (MOTIR-1275 · 1266.4): on a near-black
      canvas a 40% scrim barely separates the dialog, so dark uses ~65% — the
      other concrete-hex --el-* alongside the sidebar hover. Light value (40%,
@@ -2609,6 +2944,83 @@
   --el-overlay-scrim: #000000a6;
 }
+/* ═══════════════════════════════════════════════════════════════════════
+   RECIPE KNOBS — the SCALARS a component's own colour recipe reads
+   (MOTIR-3207)
+   Not part of the Tier-3 layer above and deliberately not named `--el-*`:
+   that layer is a COLOUR contract (every member aliases a Tier-0 --color-*
+   and is asserted palette-dependent by tests/theme/paletteTokenCoverage).
+   A knob here is a NUMBER inside a color-mix() — one value for every
+   palette and both themes — so it fails both halves of that contract while
+   being exactly the thing that has to be expressed once.
+   Declared on a plain `:root` rule rather than in @theme so the property is
+   emitted unconditionally: its only consumer is a `var()` inside a JS style
+   object, which Tailwind's source scan has no reason to keep a theme
+   variable alive for.
+   ═══════════════════════════════════════════════════════════════════════ */
+:root {
+  /* THE ORB's lit-sphere highlight — how much --el-accent-text is mixed into
+     --el-accent at the first stop of `PlanWithAIFab`'s radial gradient, which
+     is the gradient's LIGHTEST point and therefore where the white glyph over
+     it is closest to disappearing (design/ai-chat/design-notes.md § B).
+     26%, not the 32% that shipped, and ONE number rather than a per-theme
+     pair. At 32% the glyph misses WCAG 1.4.11's 3:1 for a non-text graphic in
+     FOUR of the twenty palette x theme contexts — default dark 2.78:1, cobalt
+     dark 2.86:1, spectrum dark 3.00:1 (2.999, i.e. under the bar) and,
+     contrary to the finding that filed this, evergreen LIGHT at 2.94:1. So
+     "light has headroom" is a property of the DEFAULT PALETTE, not of light:
+     a `[data-theme='dark']` override of this stop would have left evergreen's
+     light orb failing. At 26% the worst context is 3.09:1 and all twenty
+     clear the bar.
+     Mixing the glyph's own colour INTO its backdrop is monotonic — a larger
+     number is always less contrast — so this is a CEILING, and lowering it
+     further is always safe for legibility and only ever costs the lit look.
+     tests/theme/orb-glyph-contrast.test.ts measures every context from these
+     tokens and fails if a future palette or a raised knob crosses 3:1. */
+  --orb-lit-mix: 26%;
+}
+/* ═══════════════════════════════════════════════════════════════════════
+   MOTION FLOOR — the reduced-motion guard the PACKAGE owns (MOTIR-3844)
+   Not an axis and not a tier: a floor every consumer of this stylesheet gets
+   whichever palette, style or type it applies. The style axis already gates
+   its OWN motion (the `aurora` canvas drift and the `3d-immersive` tilt /
+   menu unfold, all `prefers-reduced-motion`-gated in their Tier-2 blocks
+   above), because that motion is decorative and belongs to the style that
+   introduced it. `animate-spin` belongs to no style: `Spinner` paints it on
+   ordinary interactive surfaces, and `<Button loading>` substitutes a Spinner
+   for the left icon — so it renders under every axis combination, and nothing
+   guarded it. Tailwind v4 defines `--animate-spin: spin 1s linear infinite`
+   with no media query anywhere near it, and neither consumer's `globals.css`
+   carried an override.
+   STOP THE ROTATION, KEEP THE GLYPH. A spinner is not decoration a reader can
+   do without — it is the only signal that a control is working — so this sets
+   `animation` and nothing else: the ring keeps its size, its border and its
+   `role="status"`, and a reader who asked for less motion still sees that
+   something is in flight. (`motir-marketing`'s own `.motir-spin` reaches the
+   same shape by hand, and pairs it with a label change — with the animation
+   stilled, the word is the whole of the state. A consumer whose only motion
+   cue is the rotation should do the same.)
+   WHY IT WINS THE CASCADE. `.animate-spin` is emitted by Tailwind inside
+   `@layer utilities`; this rule is UNLAYERED, and an unlayered declaration
+   outranks a layered one whatever their specificity. That is the whole of the
+   mechanism — it does not depend on source order or on this file's position in
+   the `@import` list. Measured, not reasoned: tests/theme/reducedMotionSpinner
+   reads it back off the COMPILED stylesheet for both consumer shapes.
+   ═══════════════════════════════════════════════════════════════════════ */
+@media (prefers-reduced-motion: reduce) {
+  .animate-spin {
+    animation: none;
+  }
+}
 /* ═══════════════════════════════════════════════════════════════════════
    AXIS 1 (COLOUR) — data-palette overrides (Subtask 7.3.48)
    Registry: lib/theme/palettes.ts. A named palette re-skins the app by
@@ -2663,6 +3075,7 @@
   --color-foreground: #0f1b2e; /* cool navy ink */
   --color-surface: #eef2f8; /* cool slate section background */
   --color-surface-soft: #f7f9fc; /* quieter cool division */
+  --color-canvas: #e3e9f2; /* recessed planning board — a cool-slate step under --color-surface */
   /* text scale — cool slate hierarchy */
   --color-ink: #0f1b2e;
@@ -2708,6 +3121,26 @@
   /* sidebar hover is a concrete hex in Tier 3 (not a --color-* ref), so the
      palette overrides it directly — one shade darker than the cool surface. */
   --el-sidebar-item-bg-hover: #e4e9f1;
+  /* Status ramp — in_review vs in_progress (MOTIR-2075, the MOTIR-2073 class).
+     `--el-status-in-progress` rides --color-info (Radix Blue 11 #0d63b8) and
+     `--el-status-in-review` rides --color-primary (the Indigo accent #3a57cf);
+     Cobalt is an institutional-BLUE palette, so its two blues sit ΔE2000 8.4
+     apart — different hexes, one dot. The ramp takes its own deeper step of the
+     SAME indigo instead of a new hue: Radix Indigo 12. Separation from
+     in_progress ΔE 20.9; contrast 11.8:1 surface / 13.2:1 card. */
+  --el-status-in-review: #1f2d5c; /* Radix Indigo 12 — deep accent step */
+  /* Priority ramp — highest vs high (MOTIR-2085, the MOTIR-2075 class one
+     family over). `--el-priority-highest` rides --color-destructive (#d3322f)
+     and `--el-priority-high` rides --color-warning (#c2410c); Cobalt's warning
+     is a RED-leaning burnt orange, so the two land ΔE2000 9.9 apart — under the
+     ΔE 10 bar a coloured priority GLYPH needs. The semantic identity is kept
+     (danger stays danger, warning stays warning); the PRIORITY ramp takes its
+     own step of a hue Cobalt already owns — Radix Amber 11, one of the palette's
+     documented Radix sources. Separation from highest ΔE 24.3; contrast 4.6:1
+     card / 4.1:1 surface, past the 3:1 icon/UI bar. */
+  --el-priority-high: #ab6400; /* Radix Amber 11 — the ramp's own amber step */
 }
 /* Cobalt — dark companion. A cool navy canvas (not the base near-black);
@@ -2718,6 +3151,7 @@
   --color-foreground: #e7edf6;
   --color-surface: #131d2c;
   --color-surface-soft: #0f1825;
+  --color-canvas: #070c16; /* recessed planning board — a step under the navy page */
   --color-ink: #e7edf6;
   --color-charcoal: #d3deec;
@@ -2762,6 +3196,18 @@
   /* sidebar hover — one shade lighter than the dark cool surface */
   --el-sidebar-item-bg-hover: #1c2840;
+  /* Dark keeps the indigo primary — the two blues are already ΔE 10.4 apart
+     here. Re-asserted (not omitted) because the light block above would
+     otherwise inherit onto this canvas: the palette block and
+     [data-theme='dark'] tie on specificity and the palette block wins by
+     source order. Pairing every status override is the rule, not the value. */
+  --el-status-in-review: var(--color-primary);
+  /* Dark keeps the brightened warning orange — highest/high are already ΔE 25.8
+     apart here. Re-asserted for the same pairing reason as the status override
+     above: an unpaired light override leaks onto this canvas (MOTIR-2085). */
+  --el-priority-high: var(--color-warning);
 }
 /* ── Palette: Graphite (data-palette="graphite") — Subtask 7.3.51 ───────────
@@ -2809,6 +3255,7 @@
   --color-foreground: #16191d; /* cool near-black ink */
   --color-surface: #eef0f3; /* cool slate section background */
   --color-surface-soft: #f8f9fa; /* quieter cool division */
+  --color-canvas: #e6e8ed; /* recessed planning board — a cool-slate step under --color-surface */
   /* text scale — cool slate hierarchy (Radix Slate 11→9 below body) */
   --color-ink: #16191d;
@@ -2855,6 +3302,42 @@
   /* sidebar hover is a concrete hex in Tier 3 (not a --color-* ref), so the
      palette overrides it directly — one shade darker than the cool surface. */
   --el-sidebar-item-bg-hover: #e6e8ec;
+  /* Status ramp — the one place the mono identity COLLIDES with the Tier-0
+     indirection (MOTIR-2073). `--el-status-in-progress` rides --color-info and
+     `--el-status-in-review` rides --color-primary; every other palette keeps
+     those two sources apart, but Graphite deliberately unifies them (info =
+     the accent, above), which re-collapsed in_review onto in_progress — the
+     exact differentiation MOTIR-1273 delivered. The fix keeps BOTH deliberate
+     choices by giving the status ramp its own SECOND STEP of the same accent
+     ramp rather than a second hue: Radix Blue 12, one step deeper than the
+     accent (Blue 11-ish #155bc4). Still one chromatic accent, two depths —
+     the same light/dark inversion the ink CTA already uses. Separation from
+     in-progress: ΔE2000 16.9, contrast 2.0:1 — well clear of this palette's
+     tightest deliberate status pair (todo/cancelled, ΔE 11.8). */
+  --el-status-in-review: #113264; /* Radix Blue 12 — deep accent step */
+  /* Priority ramp — highest vs high (MOTIR-2094, the MOTIR-2085 shape in a
+     second palette). `--el-priority-highest` rides --color-destructive
+     (#c92a2a) and `--el-priority-high` rides --color-warning (#c2410c);
+     Graphite's warning is a RED-leaning burnt orange sitting beside its danger
+     red, so the two land ΔE2000 10.02 apart. That PASSES the ΔE 10 bar a
+     coloured priority GLYPH needs — by 0.02, which is rounding, not margin: the
+     two marks are at the perceptual minimum, and any future nudge to either
+     semantic tips the pair under the floor. Nothing about this is the monochrome
+     identity (the chrome is greyscale; semantic hues stay chromatic on purpose),
+     so it is a collision to fix, not a choice to document.
+     The fix is Cobalt's: neither semantic moves — danger stays danger, warning
+     stays warning — and the PRIORITY ramp takes its own step of a hue Graphite
+     already owns, Radix Amber 11, one of this palette's documented Radix
+     sources. Separation from highest ΔE 24.7 (nearest other step, medium, ΔE
+     32.2); contrast 4.6:1 card / 4.0:1 surface, past the 3:1 icon/UI bar. */
+  --el-priority-high: #ab6400; /* Radix Amber 11 — the ramp's own amber step */
+  /* implemented (MOTIR-3003) — Graphite's --color-accent is its blue accent, a
+     step from the same family as --el-status-in-progress. The ink step is free
+     here and reads as "not yet coloured in", which is what the state is:
+     ΔE 15.9 light / 11.8 dark from the nearest status. */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* Graphite — dark companion. A cool near-black slate canvas; the CTA fill
@@ -2866,6 +3349,7 @@
   --color-foreground: #edeef0;
   --color-surface: #18191c; /* cool slate section */
   --color-surface-soft: #141517; /* quieter cool division */
+  --color-canvas: #08090b; /* recessed planning board — a step under the near-black page */
   --color-ink: #edeef0;
   --color-charcoal: #d7d9dd; /* emphasis / AA-safe on tints */
@@ -2911,6 +3395,26 @@
   /* sidebar hover — one shade lighter than the dark cool surface */
   --el-sidebar-item-bg-hover: #202226;
+  /* Status ramp — the dark companion of the light block's in_review step
+     (MOTIR-2073). Same idea, inverted like the CTA fill: on near-black the
+     "deeper" step is the PALER one, so in_review takes Radix Blue 12 dark —
+     one step lighter than the dark accent (Blue 11-ish #7db1ff). Separation
+     from in-progress: ΔE2000 15.3, contrast 1.67:1; on the dark canvas
+     14.9:1. Every palette block that sets a var must set it in BOTH themes —
+     a light-only override keeps its LIGHT value on the dark canvas (the
+     palette block outranks the base [data-theme='dark'] block). */
+  --el-status-in-review: #c2e6ff; /* Radix Blue 12 dark — pale accent step */
+  /* Dark keeps the brightened warning orange — highest/high are already ΔE 25.8
+     apart here, so only light needed the amber step. Re-asserted (not omitted)
+     for the same pairing reason as the status override above: an unpaired light
+     override leaks onto this canvas, where it was never measured (MOTIR-2094). */
+  --el-priority-high: var(--color-warning);
+  /* implemented — the dark half of the light override above; declared in BOTH
+     themes so the light value cannot cascade into dark (the cascade trap this
+     suite checks for). */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* ── Palette: Evergreen (data-palette="evergreen") — Subtask 7.3.50 ──────────
@@ -2932,17 +3436,23 @@
    Concrete-hex --el-* tokens that do NOT resolve through --color-*
    (--el-sidebar-item-bg-hover) are re-skinned explicitly below. */
 [data-palette='evergreen'] {
-  /* Brand / primary — emerald CTA (white label text clears AA on the fill) */
-  --color-primary: #0c7a52;
+  /* Brand / primary — emerald CTA (white label text clears AA on the fill).
+     --color-primary is the emerald used AS text/icon; --color-primary-fill is
+     the CTA fill. They were the same hex until MOTIR-3774 deepened the INK by
+     1.5% lightness (same hue 158.2, same 82.1% saturation) so it clears AA on
+     the palette's own pastel tints; the FILL is untouched, which is what the
+     picker swatch and every white-on-emerald label read. */
+  --color-primary: #0b714c; /* deepened emerald as text/icon (6.03:1 on white) */
   --color-primary-foreground: #ffffff;
   --color-primary-pressed: #095f40;
-  --color-primary-fill: #0c7a52;
+  --color-primary-fill: #0c7a52; /* emerald CTA fill — the signature; white-on AA */
   /* Surfaces — lightly cooled (green-leaning) neutrals over a white canvas */
   --color-background: #ffffff;
   --color-foreground: #14201b;
   --color-surface: #eef3f0;
   --color-surface-soft: #f6faf8;
+  --color-canvas: #e4ebe7; /* recessed planning board — a green-grey step under --color-surface */
   /* Text scale — cooled forest-charcoal ink hierarchy */
   --color-ink: #14201b;
@@ -2991,6 +3501,19 @@
   /* Concrete-hex --el token (does not resolve through --color-*) — cool hover
      lift one shade darker than the cooled light surface */
   --el-sidebar-item-bg-hover: #e4ebe7;
+  /* Status ramp — in_review vs done (MOTIR-2075). `--el-status-in-review` rides
+     --color-primary (emerald #0c7a52) and `--el-status-done` rides
+     --color-success (grass #127c3e): two greens ΔE2000 5.5 apart, and this
+     palette's own comment claimed they "read apart". They do not. The ramp takes
+     its own deeper step of the palette's JADE — Radix Jade 12 — so review reads
+     as a deep jade against the grass done. Separation ΔE 19.2; contrast 10.9:1
+     surface / 12.2:1 card. */
+  --el-status-in-review: #1d3b31; /* Radix Jade 12 — deep jade step */
+  /* cancelled is unchanged in light (ΔE 17.9 from todo); re-asserted to pair
+     the dark override below — see the cascade note in the dark block. */
+  --el-status-cancelled: var(--color-steel);
 }
 /* Evergreen — dark companion. Bright emerald on a deep-forest canvas
@@ -3006,6 +3529,7 @@
   --color-foreground: #e8efe9;
   --color-surface: #141d18;
   --color-surface-soft: #101713;
+  --color-canvas: #080d0a; /* recessed planning board — a step under the deep-forest page */
   --color-ink: #e8efe9;
   --color-charcoal: #d6e0d9;
@@ -3044,6 +3568,18 @@
   /* hover lift one shade *lighter* than the dark surface (mirrors base recipe) */
   --el-sidebar-item-bg-hover: #1e2a23;
+  /* Status ramp (MOTIR-2075) — two collisions in this theme.
+     in_review vs done: emerald #3ddc97 against grass #34d27a, ΔE2000 4.7. Same
+     fix as light, inverted: Radix Jade 12's DARK step, pale rather than deep —
+     the light/dark inversion Graphite's accent step already uses. ΔE 17.2;
+     contrast 13.3:1 surface / 14.5:1 card.
+     todo vs cancelled: --color-stone #5a6b62 against --color-steel #6f8077,
+     ΔE 8.3 — this palette's neutral ramp is compressed against the base's
+     (which keeps the pair ~12 apart). cancelled takes the palette's own next
+     step up, --color-slate. ΔE 22.4; contrast 7.1:1 / 7.7:1. */
+  --el-status-in-review: #adf0d4; /* Radix Jade 12 dark — pale jade step */
+  --el-status-cancelled: #9aaaa1; /* Evergreen's own slate — the next neutral step */
 }
 /* ═══════════════════════════════════════════════════════════════════════
@@ -3122,6 +3658,7 @@
   --color-foreground: #1a1626; /* cool near-black ink with a faint violet cast */
   --color-surface: #f4f2fb; /* cool violet-tinted section background */
   --color-surface-soft: #faf9fe; /* quieter cool division */
+  --color-canvas: #ece8f7; /* recessed planning board — a violet-tinted step under --color-surface */
   /* text scale — cool violet-neutral hierarchy */
   --color-ink: #1a1626;
@@ -3169,6 +3706,20 @@
   /* sidebar hover is a concrete hex in Tier 3 (not a --color-* ref), so the
      palette overrides it directly — one shade darker than the cool surface. */
   --el-sidebar-item-bg-hover: #ece8f8;
+  /* Priority ramp — highest vs high, the third instance of the Cobalt
+     (MOTIR-2085) / Graphite (MOTIR-2094) collision, found once the floor was
+     measured on the CHIP rather than the source (MOTIR-2107).
+     `--el-priority-highest` rides --color-destructive (#d92e2b) and
+     `--el-priority-high` rides --color-warning (#ea580c); Spectrum's warning is
+     a red-leaning orange, so the two source hues land ΔE2000 14.5 apart — over
+     the glyph bar, while the 14% chip `Pill` paints rendered only ΔE 4.2, under
+     cobalt's own pre-fix 3.8 in feel. Neither semantic moves; the PRIORITY ramp
+     takes its own step of a hue Spectrum already owns — Radix Amber 11, one of
+     the palette's documented Radix sources. Source separation from highest
+     ΔE 24.3, rendered chip ΔE 8.6; contrast 4.6:1 card / 4.2:1 surface, past
+     the 3:1 icon/UI bar. */
+  --el-priority-high: #ab6400; /* Radix Amber 11 — the ramp's own amber step */
 }
 /* Spectrum — dark companion. A deep cool-violet canvas (not the base
@@ -3179,6 +3730,7 @@
   --color-foreground: #ece9f6;
   --color-surface: #1d1830;
   --color-surface-soft: #181426;
+  --color-canvas: #0f0c18; /* recessed planning board — a step under the cool-violet page */
   --color-ink: #ece9f6;
   --color-charcoal: #ddd8ee;
@@ -3216,7 +3768,19 @@
   --color-success: #36c977;
   --color-warning: #fb8b4c;
   --color-destructive: #f0555f; /* reads AS text on the dark canvas (AA ~5.5:1) */
-  --color-destructive-foreground: #ffffff;
+  /* The FILL ink, not a page ink — this is what `Button`'s danger variant paints
+     ON `--color-destructive` above. Dark lightened the red to #f0555f so it would
+     read AS text on the violet canvas, and left the ink at #ffffff: two
+     individually reasonable decisions that are wrong together, at 3.40:1 — the
+     only one of ten palettes x two themes under AA (MOTIR-3664). A lighter red
+     needs darker ink, which is what amber / candy / citrine / evergreen / garnet
+     / sienna already do in their own dark blocks, each with the palette's own
+     near-black. Spectrum's is the deep cool-violet canvas above: white -> #14111f
+     takes the pairing 3.40 -> 5.46:1, mid-range among those six (5.14-8.81).
+     `--color-destructive` itself does NOT move — it is also the border/glyph hue
+     (5.03-5.68:1 on every dark surface here) and the source of
+     --el-priority-highest / --el-type-bug / --el-type-deploy / --el-overdue. */
+  --color-destructive-foreground: #14111f;
   --color-info: #6fa8ff;
   --color-link: #8fb8ff;
@@ -3224,6 +3788,15 @@
   /* sidebar hover — one shade lighter than the dark cool surface */
   --el-sidebar-item-bg-hover: #261f3d;
+  /* Priority ramp — the dark half of the light block's amber step (MOTIR-2107).
+     UNLIKE cobalt and graphite (whose dark hues were already far enough apart to
+     re-assert the source here), Spectrum's dark destructive #f0555f and warning
+     #fb8b4c render a chip only ΔE 4.8 apart, so dark carries its own amber too:
+     the brighter #fbab4c the other dark palettes already use, which reads as an
+     icon on the violet canvas. Source separation from highest ΔE 33.9, rendered
+     chip ΔE 8.1; contrast 9.8:1 card / 9.0:1 surface. */
+  --el-priority-high: #fbab4c; /* on-dark amber — the ramp's own step */
 }
 /* ── Palette: Amber (data-palette="amber") — Subtask 8.8.34 (MOTIR-1252) ─────
@@ -3251,7 +3824,7 @@
 [data-palette='amber'] {
   /* brand & primary — Binance Gold. The FILL carries DARK ink labels (yellow
      trap); --color-primary is a darkened gold used AS text/icon on a surface. */
-  --color-primary: #8a6a00; /* darkened gold as text/icon (AA ~5:1 on white) */
+  --color-primary: #7d6000; /* darkened gold as text/icon (5.92:1 on white — MOTIR-3774) */
   --color-primary-foreground: #181a20; /* Binance near-black on the gold fill (AA ~9.6:1) */
   --color-primary-pressed: #d4a30a;
   --color-primary-fill: #f0b90b; /* Binance Gold — the signature; dark-on AA */
@@ -3261,6 +3834,7 @@
   --color-foreground: #181a20; /* Binance near-black ink */
   --color-surface: #f4f5f7; /* cool graphite section background */
   --color-surface-soft: #fafbfc; /* quieter cool division */
+  --color-canvas: #eaecf0; /* recessed planning board — a graphite step under --color-surface */
   /* text scale — Binance cool-grey hierarchy */
   --color-ink: #181a20;
@@ -3285,7 +3859,10 @@
   --color-accent-green: #0a8f57; /* darkened Binance buy-green for light AA */
   /* card tints — gold-leaning warm washes + cool feature hues */
-  --color-tint-peach: #fbe7c2;
+  /* peach leans ORANGE, not gold: gold-leaning every warm tint had collapsed
+     peach onto the Block-gold yellow at ΔE2000 4.3 light / 1.7 dark — the two
+     most-used washes reading as one chip (MOTIR-2085). */
+  --color-tint-peach: #fbdfc0;
   --color-tint-rose: #f7dde2;
   --color-tint-mint: #d6ecdf;
   --color-tint-lavender: #e2e4ee;
@@ -3305,6 +3882,11 @@
   /* sidebar hover — one shade darker than the cool surface */
   --el-sidebar-item-bg-hover: #eceef1;
+  /* implemented (MOTIR-3003) — Amber's --color-accent sits beside its brand
+     amber, i.e. next to --el-status-in-review. Its red is unspent by any status
+     in this palette (blocked rides the amber), so it takes it: ΔE 21.2 light /
+     33.7 dark from the nearest status. */
+  --el-status-implemented: var(--color-destructive);
 }
 /* Amber — dark companion: the AUTHENTIC Binance trading floor. Cool near-black
@@ -3316,6 +3898,7 @@
   --color-foreground: #eaecef;
   --color-surface: #1e2329; /* Binance "Shark" card surface */
   --color-surface-soft: #181a20; /* Binance app background — quieter division */
+  --color-canvas: #07090c; /* recessed planning board — a step under the trading-floor black */
   --color-ink: #eaecef;
   --color-charcoal: #d1d6dd;
@@ -3338,7 +3921,8 @@
   --color-primary-fill: #fcd535;
   /* tints dimmed for the trading-floor black */
-  --color-tint-peach: #2f2814;
+  /* the dark twin of the light orange wash — see the light block's note. */
+  --color-tint-peach: #331f10;
   --color-tint-rose: #2f1a22;
   --color-tint-mint: #102a1e;
   --color-tint-lavender: #1c2030;
@@ -3361,6 +3945,9 @@
   /* sidebar hover — one shade lighter than the dark "Shark" surface */
   --el-sidebar-item-bg-hover: #262d35;
+  /* implemented — the dark half of the light override above; declared in BOTH
+     themes so the light value cannot cascade into dark. */
+  --el-status-implemented: var(--color-destructive);
 }
 /* ── Palette: Sienna (data-palette="sienna") — Subtask 8.8.34 (MOTIR-1252) ───
@@ -3383,7 +3970,7 @@
 [data-palette='sienna'] {
   /* brand & primary — Mistral's flame. The FILL is Mistral Orange #fa520f with
      DARK ink labels; --color-primary is a darkened flame used AS text/icon. */
-  --color-primary: #c4400a; /* darkened Mistral flame as text/icon (AA ~4.9:1 on the cream) */
+  --color-primary: #b53b09; /* darkened Mistral flame as text/icon (5.60:1 on the cream — MOTIR-3774) */
   --color-primary-foreground: #2a1205; /* DARK warm ink on the flame fill (AA ~5.3:1) */
   --color-primary-pressed: #cc3a05; /* Mistral primary-deep */
   --color-primary-fill: #fa520f; /* Mistral Orange — the signature flame; dark-on AA */
@@ -3393,6 +3980,7 @@
   --color-foreground: #1f1f1f; /* Mistral Black ink */
   --color-surface: #fbf1d3; /* warm cream section background (Mistral cream ramp) */
   --color-surface-soft: #fdf6e0; /* quieter warm cream division */
+  --color-canvas: #f5e9cb; /* recessed planning board — a warm-cream step under --color-surface */
   /* text scale — Mistral warm-charcoal hierarchy */
   --color-ink: #1f1f1f;
@@ -3421,7 +4009,11 @@
   --color-tint-rose: #fbdfd2;
   --color-tint-mint: #e3ead0;
   --color-tint-lavender: #ece6d6;
-  --color-tint-sky: #e6ebda;
+  /* sky is a muted wash of the palette's OWN teal accent (#0e8f86), not another
+     olive: warming every cool tint had collapsed sky onto mint at ΔE2000 3.4
+     light / 1.3 dark — one colour doing two jobs in a six-chip ramp (MOTIR-2085).
+     Still Mediterranean, just the sea rather than the hillside. */
+  --color-tint-sky: #d9e8e4;
   --color-tint-yellow: #ffe295; /* Mistral Block Gold */
   /* semantic — Mistral documents none; added warm-consistent + AA-safe */
@@ -3437,6 +4029,20 @@
   /* sidebar hover — one shade deeper than the cream surface */
   --el-sidebar-item-bg-hover: #f5e9c4;
+  /* Status ramp — blocked vs in_review (MOTIR-2075). Mistral ships NO semantic
+     colours, so this palette's warning was added warm-consistent (#b45309) —
+     which lands it next to the darkened Mistral flame --color-primary #c4400a:
+     ΔE2000 7.1, amber against flame. Rather than move the brand flame, blocked
+     takes the palette's own amber accent step, which reads as a warning without
+     being the primary. ΔE 14.2; contrast 3.8:1 surface / 4.1:1 card. */
+  --el-status-blocked: var(--color-accent);
+  /* implemented (MOTIR-3003) — Sienna re-maps --el-status-blocked onto
+     --color-accent (directly above), so the base pink would collide with it
+     here. The ink step is free: ΔE 21.1 light / 22.6 dark from the nearest
+     status. */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* Sienna — dark companion. Mistral is light-dominant (few dark tokens: Mistral
@@ -3447,6 +4053,7 @@
   --color-foreground: #f5efe2;
   --color-surface: #1f1d17;
   --color-surface-soft: #1a1712;
+  --color-canvas: #100d08; /* recessed planning board — a step under the warm near-black page */
   --color-ink: #f5efe2;
   --color-charcoal: #e6ddcb;
@@ -3471,7 +4078,8 @@
   --color-tint-rose: #321c16;
   --color-tint-mint: #23271a;
   --color-tint-lavender: #272318;
-  --color-tint-sky: #22251a;
+  /* the dark twin of the light teal wash — see the light block's note. */
+  --color-tint-sky: #1b2622;
   --color-tint-yellow: #332b12;
   --color-accent: #ffa110; /* Mistral Sunshine-700 amber on dark */
@@ -3490,6 +4098,14 @@
   /* sidebar hover — one shade lighter than the warm-dark surface */
   --el-sidebar-item-bg-hover: #292619;
+  /* Dark's amber and flame are already ΔE 11.9 apart. Re-asserted to pair the
+     light override above — see the cascade note in cobalt/dark. */
+  --el-status-blocked: var(--color-warning);
+  /* implemented — the dark half of the light override above; declared in BOTH
+     themes so the light value cannot cascade into dark (this palette's
+     --el-status-blocked note above is the same pairing). */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* ── Palette: Garnet (data-palette="garnet") — Subtask 8.8.34 (MOTIR-1252) ───
@@ -3517,6 +4133,7 @@
   --color-foreground: #111111; /* Pinterest "Cod Gray" ink */
   --color-surface: #efefef; /* Pinterest light-gray section background */
   --color-surface-soft: #f7f7f7; /* quieter neutral division */
+  --color-canvas: #e7e7e7; /* recessed planning board — a neutral step under --color-surface */
   /* text scale — Pinterest neutral-grey hierarchy */
   --color-ink: #111111;
@@ -3561,6 +4178,14 @@
   /* sidebar hover — one shade darker than the neutral surface */
   --el-sidebar-item-bg-hover: #e6e6e6;
+  /* Status ramp — todo vs cancelled (MOTIR-2075). Pinterest's neutrals are
+     true-neutral greys and its documented ramp puts --color-stone #767676 and
+     --color-steel #5f5f5f close together: ΔE2000 8.8, where the base keeps the
+     pair ~12 apart. cancelled drops to Pinterest's next documented grey,
+     #444444 (the palette's own --color-slate). ΔE 18.1; contrast 8.5:1 surface
+     / 9.7:1 card. */
+  --el-status-cancelled: #444444; /* Pinterest grey — one documented step deeper */
 }
 /* Garnet — dark companion. Pinterest's Cod-Gray near-black canvas; the red
@@ -3571,6 +4196,7 @@
   --color-foreground: #efefef;
   --color-surface: #1a1a1a;
   --color-surface-soft: #161616;
+  --color-canvas: #090909; /* recessed planning board — a step under the Cod-Gray page */
   --color-ink: #efefef;
   --color-charcoal: #e0e0e0;
@@ -3615,6 +4241,10 @@
   /* sidebar hover — one shade lighter than the dark surface */
   --el-sidebar-item-bg-hover: #232323;
+  /* Dark's greys are already ΔE 11.6 apart. Re-asserted to pair the light
+     override above — see the cascade note in cobalt/dark. */
+  --el-status-cancelled: var(--color-steel);
 }
 /* ── Palette: Citrine (data-palette="citrine") — Subtask 8.8.34 (MOTIR-1252) ──
@@ -3651,6 +4281,7 @@
   --color-foreground: #050038; /* Miro Stratos navy ink */
   --color-surface: #f3f4f6; /* Mirotone gray-100 section background */
   --color-surface-soft: #f6f7f9; /* Mirotone gray-50 — quieter division */
+  --color-canvas: #ebecf0; /* recessed planning board — Mirotone gray-150, a step under gray-100 */
   /* text scale — Mirotone gray ramp */
   --color-ink: #050038;
@@ -3696,6 +4327,37 @@
   /* sidebar hover — Mirotone gray-150, one step off the surface */
   --el-sidebar-item-bg-hover: #ebecf0;
+  /* Status ramp (MOTIR-2075) — two collisions, both from Mirotone's ramps.
+     blocked vs in_review: --color-warning is yellow-650 #91771e and
+     --color-primary is yellow-700 #746019 — ADJACENT steps of one gold ramp,
+     ΔE2000 9.7. Miro is a 5-hue system with NO orange ramp (see the block
+     header), and the golds that clear AA on a light surface are exactly those
+     two, so the gold cannot separate itself. The status ramp therefore takes
+     Miro's OTHER brand hue at its own depth — the action blue, blue-650 — which
+     leaves blocked on the warning gold where its semantics belong. Note
+     in_progress rides blue-500 #3859ff: same family, two depths, ΔE 17.0 apart,
+     the Graphite idiom. Contrast 9.2:1 surface / 10.2:1 card.
+     todo vs cancelled: gray-450 #7f8497 vs gray-500 #656b81, ΔE 10.0 — one step
+     apart on Mirotone's gray ramp. cancelled drops to gray-600. ΔE 20.6;
+     contrast 7.5:1 / 8.3:1. */
+  --el-status-in-review: #243797; /* Mirotone blue-650 — deep action blue */
+  /* Status ramp — planning vs the two blues (MOTIR-2427, the MOTIR-2073 class).
+     Citrine is a deliberate 5-hue Miro palette and it re-skins
+     `--color-accent-teal` to Mirotone BLUE, so the base teal source lands on
+     top of in_progress here. Mirotone red-500 is the only remaining documented
+     family: `Planning` means the card was found WRONG and is being re-planned,
+     which is the one status where an attention hue is honest — and `cancelled`
+     stays deliberately grey, so red is not overloaded. */
+  --el-status-planning: #d8182c; /* Mirotone red-500 — the attention family */
+  --el-status-cancelled: #4a4e5e; /* Mirotone gray-600 — one step deeper */
+  /* implemented (MOTIR-3003) — Citrine spends --color-accent on a hue its
+     --el-status-in-progress is already in the family of, and its red is
+     --el-status-planning. The ink step is what is left: ΔE 17.8 light / 10.0
+     dark. ⚠️ The dark figure sits EXACTLY on the ΔE 10 floor, against
+     in_review — a palette change that moves either one needs re-measuring
+     rather than nudging. */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* Citrine — dark companion. A Mirotone gray-ramp near-black canvas (black
@@ -3707,6 +4369,7 @@
   --color-foreground: #f6f7f9; /* gray-50 */
   --color-surface: #1a1b1e; /* gray-900 */
   --color-surface-soft: #18191c; /* gray-950 */
+  --color-canvas: #040404; /* recessed planning board — a step under Miro black */
   --color-ink: #f6f7f9;
   --color-charcoal: #ebecf0; /* gray-150 */
@@ -3751,6 +4414,26 @@
   /* sidebar hover — Mirotone gray-800, one step lighter than the surface */
   --el-sidebar-item-bg-hover: #24262c;
+  /* Status ramp (MOTIR-2075) — the worst collision in the whole set:
+     blocked #ffd850 against in_review #ffd02f is ΔE2000 3.0. Two Sunglow golds
+     one hex apart; no one can tell them apart on a 10px dot. Same fix as light,
+     inverted — the action blue at its PALE step, Mirotone blue-200, rather than
+     the deep blue-650 (which sits at 1.7:1 on this near-black surface and would
+     fail the 3:1 icon bar). Separation from in_progress (blue-400 #7a90fe)
+     ΔE 18.4; contrast 13.1:1 surface / 15.1:1 card.
+     cancelled is unchanged here (ΔE 17.8 from todo) and re-asserted only to
+     pair the light block's override — see the cascade note in cobalt/dark. */
+  --el-status-in-review: #d9dffc; /* Mirotone blue-200 — pale action blue */
+  /* The dark twin of the planning override above — declared in BOTH themes even
+     though it is the same family, because an unpaired light override loses to
+     the later palette block (the cascade trap). Brightened one step, as this
+     palette does with every semantic on dark. */
+  --el-status-planning: #ff6b78; /* Mirotone red-400 — brightened for dark */
+  --el-status-cancelled: var(--color-steel);
+  /* implemented — the dark half of the light override above; declared in BOTH
+     themes so the light value cannot cascade into dark. */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* ── Palette: Candy (data-palette="candy") — Subtask 8.8.34 (MOTIR-1252) ──────
@@ -3774,7 +4457,7 @@
 [data-palette='candy'] {
   /* brand & primary — a LIGHT bubblegum pink (Radix Pink). FILL is a light pink
      with DARK berry labels; --color-primary is the Pink-11 text step. */
-  --color-primary: #c2298a; /* Radix Pink-11 — pink text/icon (AA ~5.2:1 on white) */
+  --color-primary: #b72682; /* Radix Pink-11 88% toward Pink-12 (5.81:1 on white — MOTIR-3774) */
   --color-primary-foreground: #651249; /* Radix Pink-12 berry ink on the light-pink fill (~7.6:1) */
   --color-primary-pressed: #e7acd0; /* Radix Pink-7 */
   --color-primary-fill: #efbfdd; /* Radix Pink-6 — the light bubblegum pink */
@@ -3784,6 +4467,7 @@
   --color-foreground: #211f26; /* Radix Mauve-12 ink */
   --color-surface: #fee9f5; /* Radix Pink-3 — candy-pink section */
   --color-surface-soft: #fef7fb; /* Radix Pink-2 — quieter candy wash */
+  --color-canvas: #fbdcef; /* recessed planning board — Radix Pink-4, a step under the Pink-3 surface */
   /* text scale — Radix Mauve neutral + a Pink-12 berry emphasis */
   --color-ink: #211f26;
@@ -3822,12 +4506,21 @@
   --color-destructive-foreground: #ffffff;
   --color-info: #00749e; /* Sky-11 */
+  /* Status ramp — planning, the LIGHT twin of the dark override below (the
+     cascade trap: an unpaired light override loses to the later palette block).
+     Same documented Plum family, at the light scale step. */
+  --el-status-planning: #ab4aba; /* Plum-9 — the documented berry accent */
   /* links — Radix Sky-11 candy blue, distinct from the pink primary */
   --color-link: #00749e;
   --color-link-pressed: #1d3e56; /* Sky-12 */
   /* sidebar hover — one shade deeper than the candy-pink surface (Pink-4) */
   --el-sidebar-item-bg-hover: #fbdcef;
+  /* implemented (MOTIR-3003) — Candy's --color-accent is the berry family its
+     --el-status-planning already occupies (ΔE 0.0 with the base value). The ink
+     step is free: ΔE 20.0 light / 16.2 dark from the nearest status. */
+  --el-status-implemented: var(--color-charcoal);
 }
 /* Candy — dark companion. A pink-tinted near-black canvas (Radix Pink dark
@@ -3839,6 +4532,7 @@
   --color-foreground: #eeeef0; /* Mauve dark-12 */
   --color-surface: #37172f; /* Pink dark-3 — candy-plum section */
   --color-surface-soft: #21121d; /* Pink dark-2 — quieter division */
+  --color-canvas: #120c11; /* recessed planning board — a step under the Pink dark-1 page */
   --color-ink: #eeeef0;
   --color-charcoal: #fdd1ea; /* Pink dark-12 — pink emphasis / AA on dark tints */
@@ -3878,11 +4572,22 @@
   --color-destructive-foreground: #191114; /* dark ink on the bright danger */
   --color-info: #75c7f0; /* Sky dark-11 */
+  /* Status ramp — planning vs done (MOTIR-2427, the MOTIR-2073 class). Candy's
+     `--color-accent-teal` is Jade dark-11 (#1fd8a4) and its `--color-success` is
+     Grass dark-11 (#71d083): two bright dark-mode greens ΔE2000 9.2 apart, which
+     is one dot at a glance. The ramp takes the palette's own documented BERRY
+     instead of a fourth green — Plum, which candy.md names as its accent family
+     and which nothing else in the status ramp uses. */
+  --el-status-planning: #ab4aba; /* Plum-9 — the documented berry accent */
   --color-link: #75c7f0;
   --color-link-pressed: #c2f3ff; /* Sky dark-12 */
   /* sidebar hover — one shade lighter than the candy-plum surface (Pink dark-4) */
   --el-sidebar-item-bg-hover: #4b143d;
+  /* implemented — the dark half of the light override above; declared in BOTH
+     themes so the light value cannot cascade into dark. */
+  --el-status-implemented: var(--color-charcoal);
 }
 [data-type='grotesk'] {