@motir/design-system 0.1.0

package/theme.css

@@ -0,0 +1,3924 @@
+/*
+ * Motir design system — two-axis theme architecture.
+ *
+ * Axis 1 — COLOR (the palette axis — registry in lib/theme/palettes.ts)
+ *   data-theme="light|dark"     — light/dark base
+ *   data-palette="<palette-id>" — a named palette: a per-palette --el-* token
+ *                                 override (Tier 3 below). v1 ships `motir`
+ *                                 (the Tier-3 default — no override block, like
+ *                                 the warm-editorial base style). More palettes
+ *                                 each add a `[data-palette='<id>']` block.
+ *
+ * Axis 2 — STYLE (the named-aesthetic axis — registry in lib/theme/styles.ts)
+ *   data-style="<style-id>"
+ *     a named aesthetic that layers per-style SHAPE/FEEL tokens (radius /
+ *     shadow / spacing / sizing / motion / type) — and, for richer styles,
+ *     component-variant overrides — over the Tier-0 base scale. The two
+ *     existing styles are `warm-editorial` (the Tier-0 default) and
+ *     `soft-playful` (the Tier-2 block below). More styles (Swiss,
+ *     Neo-Brutalism, Glassmorphism, …) each add a `[data-style='<id>']` block.
+ *
+ *   The axes are INDEPENDENT: a `[data-style]` TOKEN block overrides ONLY
+ *   shape/feel tokens, NEVER a colour token (`--color-*` / `--el-*`) — colour
+ *   is the palette axis's job. Keeping them disjoint is what makes
+ *   "style × palette" a true product of two free choices.
+ *
+ *   SURFACE-MATERIAL styles (glassmorphism, 7.3.35; later cybercore, aurora,
+ *   neumorphism …) own a richer surface — translucency, a gradient canvas,
+ *   frosted backdrop-blur, light borders — that the token block cannot express.
+ *   They add a palette-DERIVED MATERIAL LAYER: STYLE-SCOPED component rules
+ *   (`[data-style='id'] [data-surface='…'] { … }`) whose colour comes ONLY from
+ *   `color-mix()`/`var(--color-*|--el-*)` over the ACTIVE palette — never a raw
+ *   hue. That keeps the two axes disjoint (a palette swap re-tints the glass; a
+ *   style swap leaves hues untouched) while letting a style own its material.
+ *   The token-block rule above is unchanged; the material layer is the addition.
+ *   Both are enforced by tests/theme/styleRegistry.test.ts.
+ *
+ * Tier structure (top to bottom):
+ *   Tier 0 — @theme base tokens (light mode defaults = the warm-editorial style)
+ *   Tier 1 — [data-theme="dark"] overrides color tokens
+ *   Tier 2 — [data-style="..."] overrides shape/feel tokens (NOT colour)
+ *   Tier 3 — :root --el-* element tokens reference Tier 0/1 vars;
+ *            components reference --el-*, never --color-* directly.
+ *            A `[data-palette='<id>']` block overrides this --el-* layer to
+ *            re-skin the whole app (the palette axis) — ONLY colour, never a
+ *            shape/feel token (that is the data-style axis).
+ *
+ * Inspiration:
+ *   - Notion's marketing palette (purple primary, pastel feature tints,
+ *     ink/charcoal/slate text scale, hairline borders). Sourced via
+ *     `npx getdesign@latest add notion` — full file in docs/inspiration/.
+ *   - Figma's shape language (pill buttons via --radius-pill, generous
+ *     letter-spacing, mono caption/eyebrow). Sourced via `add figma`.
+ *   - Motir's own typography: Inter (sans body) + Source Serif 4 (serif
+ *     headlines) + JetBrains Mono (mono) loaded via next/font in
+ *     app/layout.tsx.
+ *
+ * Architecture pattern mirrors dooooWeb (see /Users/yuezhu/projects/doooo/
+ * dooooWeb/src/styles/ for the canonical reference implementation).
+ */
+
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+/* ═══════════════════════════════════════════════════════════════════════
+   TIER 0 — Base @theme tokens (light mode defaults)
+   Tailwind v4 auto-exposes these as utility classes:
+     --color-* → bg-*, text-*, border-* utilities
+     --radius-* → rounded-* utilities
+     --shadow-* → shadow-* utilities
+     --spacing-* → m-*, p-* utilities
+     --font-* → font-* utilities, text-* utilities
+   ═══════════════════════════════════════════════════════════════════════ */
+
+@theme {
+  /* ── Color: brand & primary ─────────────────────────────────────── */
+  /* Notion's signature purple — reserved for the dominant CTA only. */
+  --color-primary: #5645d4;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #4534b3;
+  /* Accent FILL behind white text (filled buttons/badges). In light theme it
+     equals --color-primary; the dark theme darkens it so white label text
+     clears WCAG AA (the brighter --color-primary stays the accent used AS text
+     on the page). See [data-theme='dark']. (MOTIR-757) */
+  --color-primary-fill: #5645d4;
+
+  /* Surfaces */
+  --color-background: #ffffff; /* canvas */
+  --color-foreground: #1a1a1a; /* ink (primary text) */
+  --color-surface: #f6f5f4; /* subtle section backgrounds */
+  --color-surface-soft: #fafaf9; /* quieter section divisions */
+  --color-canvas: #ecebe7; /* recessed board behind raised cards (planning canvas) */
+
+  /* Text scale (Notion's warm-charcoal hierarchy) */
+  --color-ink: #1a1a1a;
+  --color-charcoal: #37352f; /* body emphasis */
+  --color-slate: #5d5b54; /* secondary text */
+  --color-steel: #787671; /* tertiary / footer */
+  --color-stone: #a4a097; /* muted labels */
+  --color-muted: #f3f4f6;
+  --color-muted-foreground: #787671;
+
+  /* Borders / hairlines */
+  --color-hairline: #e5e3df;
+  --color-hairline-soft: #ede9e4;
+  --color-hairline-strong: #c8c4be;
+  --color-border: #e5e3df;
+
+  /* Accent secondary (used sparingly — pastel tints for feature cards) */
+  --color-accent: #ff64c8; /* brand pink */
+  --color-accent-orange: #dd5b00;
+  --color-accent-teal: #2a9d99;
+  --color-accent-green: #1aae39;
+
+  /* Card tints (pale, for tinted surface variants) */
+  --color-tint-peach: #ffe8d4;
+  --color-tint-rose: #fde0ec;
+  --color-tint-mint: #d9f3e1;
+  --color-tint-lavender: #e6e0f5;
+  --color-tint-sky: #dcecfa;
+  --color-tint-yellow: #fef7d6;
+
+  /* Semantic */
+  --color-success: #1aae39;
+  --color-warning: #dd5b00;
+  --color-destructive: #e03131;
+  --color-destructive-foreground: #ffffff;
+  --color-info: #0075de;
+
+  /* Link blue (NOT primary purple — distinct role). Tuned to clear WCAG AA
+     (4.5:1) on BOTH the white page (#ffffff → 4.94:1) AND the slightly darker
+     --color-surface-soft (#fafaf9 → 4.73:1) that hovered rows paint behind it,
+     so a link on a hovered soft-surface row stays accessible
+     (bug-filters-directory-name-link-hover-aa-contrast — #0075de was 4.37:1
+     on the soft surface). */
+  --color-link: #0070d2;
+  --color-link-pressed: #005bab;
+
+  /* ── Typography ─────────────────────────────────────────────────── */
+  /* CSS variables set by next/font in app/layout.tsx. */
+  --font-sans:
+    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-serif: var(--font-serif-source, Georgia), serif;
+  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+
+  /* Type scale — Notion-ish hierarchy.
+     Headings (xl and up) default to serif; body defaults to sans. */
+  --font-size-xs: 0.75rem; /* 12px — micro labels */
+  --font-size-sm: 0.875rem; /* 14px — small body, buttons */
+  --font-size-base: 1rem; /* 16px — primary body */
+  --font-size-lg: 1.25rem; /* 20px — h4 / subtitle */
+  --font-size-xl: 1.5rem; /* 24px — h3 / card titles */
+  --font-size-2xl: 2rem; /* 32px — h2 */
+  --font-size-3xl: 3rem; /* 48px — h1 */
+  --font-size-display: 5rem; /* 80px — hero display */
+
+  /* ── Shape (the warm-editorial base style) ─────────────────────── */
+  /* Notion uses sober rectangles (8px buttons); Figma uses pills (50px).
+     The base scale IS the `warm-editorial` style (sober rectangles); the
+     `soft-playful` style adopts Figma's pills in its [data-style] block. */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 9999px;
+
+  /* Semantic shape tokens — components reference these, not --radius-md
+     directly. Lets a [data-style] block override these without renaming. */
+  --radius-btn: 8px; /* Notion-style sober button */
+  --radius-card: 12px;
+  --radius-input: 8px;
+  --radius-modal: 12px;
+  --radius-badge: 9999px;
+  --radius-control: 6px; /* small interactive affordances — menu/list rows, icon & close buttons, tooltips, code chips */
+  --radius-kbd: 4px; /* keyboard-hint chips */
+
+  /* ── Elevation ──────────────────────────────────────────────────── */
+  --shadow-flat: none;
+  --shadow-subtle: 0 1px 2px rgba(15, 15, 15, 0.04);
+  --shadow-card: 0 4px 12px rgba(15, 15, 15, 0.08);
+  --shadow-elevated: 0 8px 24px rgba(15, 15, 15, 0.12);
+  --shadow-modal: 0 16px 48px -8px rgba(15, 15, 15, 0.16);
+  --shadow-hero-mockup: 0 24px 48px -8px rgba(15, 15, 15, 0.2);
+
+  /* ── Spacing ────────────────────────────────────────────────────── */
+  --spacing-xxs: 4px;
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 20px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --spacing-3xl: 40px;
+  --spacing-section: 64px;
+  --spacing-section-lg: 96px;
+  --spacing-hero: 120px;
+
+  /* Component-specific spacing */
+  --spacing-btn-x: 18px;
+  --spacing-btn-y: 10px;
+  --spacing-btn-x-sm: 12px;
+  --spacing-btn-y-sm: 8px;
+  --spacing-input-x: 16px;
+  --spacing-input-y: 12px;
+  --spacing-card-padding: 24px;
+
+  /* Control-level spacing — small affordances. Flip with the active style so a
+     getdesign swap can redefine control DENSITY, not just radius. */
+  --spacing-control-x: 10px; /* menu/list rows, combobox trigger & search, sidebar rows */
+  --spacing-control-y: 6px;
+  --spacing-icon-btn: 4px; /* square icon / close buttons */
+  --spacing-chip-x: 10px; /* badge / pill chips */
+  --spacing-chip-y: 2px;
+  --spacing-kbd-x: 6px; /* <kbd> keyboard-hint chips */
+  --spacing-kbd-y: 2px;
+  --spacing-tooltip-x: 8px; /* tooltip & inline code blocks */
+  --spacing-tooltip-y: 4px;
+
+  /* Heights */
+  --height-btn-sm: 32px;
+  --height-btn-md: 40px;
+  --height-btn-lg: 48px;
+  --height-input: 44px;
+  --height-control: 36px; /* single-line / square small control */
+
+  /* ── Interaction ────────────────────────────────────────────────── */
+  --transition-duration: 150ms;
+  --transition-fast: 100ms;
+  --transition-slow: 250ms;
+  --hover-scale: 1;
+  --active-scale: 0.98;
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--color-primary);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   TIER 1 — Dark mode color overrides
+   Activated when [data-theme="dark"] is set on <html> (by the init
+   script + ThemeProvider).
+   ═══════════════════════════════════════════════════════════════════════ */
+
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --color-background: #0f0f0f;
+  --color-foreground: #f3f4f6;
+  --color-surface: #1a1a1a;
+  --color-surface-soft: #161616;
+  --color-canvas: #0e0e0e; /* recessed board behind raised cards (planning canvas) */
+
+  --color-ink: #f3f4f6;
+  --color-charcoal: #e5e5e5;
+  --color-slate: #a4a097;
+  --color-steel: #787671;
+  --color-stone: #5d5b54;
+  --color-muted: #1a1a1a;
+  --color-muted-foreground: #a4a097;
+
+  --color-hairline: #2a2a2a;
+  --color-hairline-soft: #1f1f1f;
+  --color-hairline-strong: #3a3a3a;
+  --color-border: #2a2a2a;
+
+  /* Primary stays close to brand; brightened from the light theme so the accent
+     reads as TEXT/icon on the near-black canvas (#7b6ce5 on #0f0f0f ≈ 4.67:1, AA
+     text). But white text ON this as a FILL is only 4.1:1 — so filled accent
+     buttons use the darker --color-primary-fill below instead (MOTIR-757). */
+  --color-primary: #7b6ce5;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #5645d4;
+  /* Darker accent fill for dark theme: white label text on #6c5cdd is 4.99:1
+     (AA), while #6c5cdd still clears 3:1 as a fill against the dark canvas. */
+  --color-primary-fill: #6c5cdd;
+
+  /* Pastel tints dimmed for dark backgrounds */
+  --color-tint-peach: #3a2a1a;
+  --color-tint-rose: #3a1f2a;
+  --color-tint-mint: #1a2f25;
+  --color-tint-lavender: #2a253a;
+  --color-tint-sky: #1a2a3a;
+  --color-tint-yellow: #3a341a;
+
+  --color-link: #58a6ff;
+  --color-link-pressed: #79b8ff;
+}
+
+/* Explicit LIGHT re-assertion. Light is the implicit base (the @theme defaults
+   above), so <html> needs no `data-theme='light'` — it omits the attribute. This
+   block exists so a NESTED subtree can force light back ON even when an ancestor
+   (<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. */
+[data-theme='light'] {
+  color-scheme: light;
+
+  --color-background: #ffffff;
+  --color-foreground: #1a1a1a;
+  --color-surface: #f6f5f4;
+  --color-surface-soft: #fafaf9;
+
+  --color-ink: #1a1a1a;
+  --color-charcoal: #37352f;
+  --color-slate: #5d5b54;
+  --color-steel: #787671;
+  --color-stone: #a4a097;
+  --color-muted: #f3f4f6;
+  --color-muted-foreground: #787671;
+
+  --color-hairline: #e5e3df;
+  --color-hairline-soft: #ede9e4;
+  --color-hairline-strong: #c8c4be;
+  --color-border: #e5e3df;
+
+  --color-primary: #5645d4;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #4534b3;
+  --color-primary-fill: #5645d4;
+
+  --color-tint-peach: #ffe8d4;
+  --color-tint-rose: #fde0ec;
+  --color-tint-mint: #d9f3e1;
+  --color-tint-lavender: #e6e0f5;
+  --color-tint-sky: #dcecfa;
+  --color-tint-yellow: #fef7d6;
+
+  --color-link: #0070d2;
+  --color-link-pressed: #005bab;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   TIER 2 — Named-style overrides ([data-style], Axis 2)
+   `warm-editorial` is the base (the Tier-0 defaults above — Notion-sober
+   rectangles), so it needs no override block.
+   `soft-playful` adopts Figma's pill buttons + larger radius + softer shadows
+   + roomier spacing + a gentler motion feel. Each later style (Swiss,
+   Neo-Brutalism, Glassmorphism, …) adds its own `[data-style='<id>']` block
+   here, overriding ONLY shape/feel tokens (radius / shadow / spacing / sizing /
+   motion / type) — NEVER a colour token (that is the data-palette axis).
+   ═══════════════════════════════════════════════════════════════════════ */
+
+[data-style='soft-playful'] {
+  /* Figma's pill geometry */
+  --radius-btn: 9999px; /* pill */
+  --radius-input: 24px;
+  --radius-card: 24px;
+  --radius-modal: 32px;
+  --radius-badge: 9999px;
+  --radius-control: 12px; /* small affordances round up with the rest */
+  --radius-kbd: 8px;
+
+  /* Softer, more diffused shadows */
+  --shadow-card: 0 2px 8px rgba(15, 15, 15, 0.06);
+  --shadow-elevated: 0 6px 20px rgba(15, 15, 15, 0.1);
+  --shadow-modal: 0 12px 40px rgba(15, 15, 15, 0.15);
+
+  /* Roomier spacing */
+  --spacing-btn-x: 20px;
+  --spacing-btn-y: 12px;
+  --spacing-input-x: 18px;
+  --spacing-input-y: 14px;
+  --spacing-card-padding: 28px;
+  --spacing-control-x: 14px;
+  --spacing-control-y: 8px;
+  --spacing-icon-btn: 8px;
+  --spacing-chip-x: 14px;
+  --spacing-chip-y: 4px;
+  --spacing-kbd-x: 8px;
+  --spacing-kbd-y: 3px;
+  --spacing-tooltip-x: 12px;
+  --spacing-tooltip-y: 6px;
+  --height-control: 40px;
+
+  /* Slightly slower transitions for softer feel */
+  --transition-duration: 200ms;
+  --active-scale: 0.97;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Swiss / Minimal-Flat — the International-Typographic style (7.3.33).
+   Structural, calm, gridded: hard right angles (sharp 2px corners), every
+   shadow removed (truly flat — depth is carried by hairline rules +
+   whitespace), a restrained neo-grotesque sans for headlines too (the serif
+   is swapped to the sans stack — a type token, not colour), tight/crisp
+   control density against generous card whitespace, and minimal motion (fast,
+   no press-scale). Overrides ONLY shape/feel tokens — never a colour token
+   (that is the data-palette axis; this style wears whatever palette is active).
+   The differentiator vs the planned Neo-Brutalism style: Swiss is REFINED and
+   calm (hairline borders, no shadow), not harsh (thick borders, hard offset
+   shadows). See docs/styles/swiss-minimal-flat.md. ───────────────────────── */
+[data-style='swiss-minimal-flat'] {
+  /* Silhouette — hard right angles. Sharp 2px on every surface; --radius-pill
+     is left untouched so genuinely-circular affordances (avatars, dots) stay
+     round. */
+  --radius-xs: 1px;
+  --radius-sm: 2px;
+  --radius-md: 2px;
+  --radius-lg: 2px;
+  --radius-xl: 3px;
+  --radius-btn: 2px;
+  --radius-input: 2px;
+  --radius-card: 2px;
+  --radius-modal: 2px;
+  --radius-badge: 2px; /* rectangular status chips — NOT pills (the Swiss silhouette) */
+  --radius-control: 2px;
+  --radius-kbd: 2px;
+
+  /* Elevation — flat. Every surface drops its shadow; structure is drawn with
+     hairline borders + whitespace, never lift. */
+  --shadow-subtle: none;
+  --shadow-card: none;
+  --shadow-elevated: none;
+  --shadow-modal: none;
+  --shadow-hero-mockup: none;
+
+  /* Typography is the data-type axis now — Swiss ships `defaultTypeId:
+     'motir-sans'` (sans headlines), applied via the [data-type='motir-sans']
+     block below. A [data-style] block sets NO --font-* token (disjointness). */
+
+  /* Density — tight, gridded controls; generous card whitespace. */
+  --spacing-btn-x: 16px;
+  --spacing-btn-y: 9px;
+  --spacing-input-x: 14px;
+  --spacing-input-y: 11px;
+  --spacing-card-padding: 28px;
+  --spacing-control-x: 10px;
+  --spacing-control-y: 6px;
+  --height-control: 34px;
+  --height-input: 42px;
+
+  /* Motion — minimal and calm. Fast transitions, NO press-scale bounce. */
+  --transition-duration: 100ms;
+  --transition-fast: 80ms;
+  --transition-slow: 160ms;
+  --hover-scale: 1;
+  --active-scale: 1;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Glassmorphism — translucent frosted glass over a vibrant gradient (7.3.35).
+   The FIRST surface-MATERIAL style: where Swiss / Soft-Playful only re-shape
+   the silhouette, glass re-shapes the SURFACE itself — frosted backdrop-blur
+   panels, a soft palette-derived gradient canvas, light 1px borders, layered
+   diffuse depth, a rounded silhouette, and gentle motion.
+
+   It ships in TWO parts (the style contract was extended for this — see
+   docs/styles/glassmorphism.md + DESIGN.md):
+     1. This [data-style] TOKEN BLOCK — shape/feel tokens ONLY (radius / shadow /
+        motion / density) PLUS palette-AGNOSTIC material SCALARS (blur radius,
+        surface/border ALPHAs, wash strength). No hue lives here, so it stays
+        disjoint from the palette axis — still enforced by styleRegistry.test.ts.
+     2. A palette-DERIVED MATERIAL LAYER (the [data-surface] rules just below)
+        that turns those scalars into frosted translucency + the gradient canvas
+        via color-mix()/alpha OVER the active palette tokens, introducing NO new
+        hue — so "style x palette" stays orthogonal (swap the palette and the
+        glass re-tints; swap the style and the hues are untouched). This is the
+        surface-MATERIAL axis Swiss / Soft-Playful never needed.
+   ───────────────────────────────────────────────────────────────────────── */
+[data-style='glassmorphism'] {
+  /* Silhouette — rounded, soft (not pill). Generous radii read as "glass tile". */
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 22px;
+  --radius-btn: 12px;
+  --radius-input: 12px;
+  --radius-card: 18px;
+  --radius-modal: 22px;
+  --radius-badge: 9999px; /* chips stay pills — soft is the glass register */
+  --radius-control: 10px;
+  --radius-kbd: 6px;
+
+  /* Elevation — layered, diffuse, soft. Glass FLOATS: bigger, softer, lower-
+     opacity shadows than the base, so panels read as hovering sheets. (rgba
+     literals are neutral shadow ink, not a palette hue.) */
+  --shadow-subtle: 0 1px 2px rgba(15, 15, 15, 0.05);
+  --shadow-card: 0 8px 32px -8px rgba(15, 15, 15, 0.18);
+  --shadow-elevated: 0 16px 48px -12px rgba(15, 15, 15, 0.24);
+  --shadow-modal: 0 28px 70px -16px rgba(15, 15, 15, 0.34);
+  --shadow-hero-mockup: 0 32px 80px -16px rgba(15, 15, 15, 0.38);
+
+  /* Density — comfortable, a touch roomy (glass wants air around its tiles). */
+  --spacing-btn-x: 20px;
+  --spacing-btn-y: 11px;
+  --spacing-card-padding: 26px;
+  --spacing-control-x: 12px;
+  --spacing-control-y: 7px;
+  --height-control: 38px;
+
+  /* Motion — gentle, smooth (glass slides; never snaps). */
+  --transition-duration: 220ms;
+  --transition-slow: 320ms;
+  --active-scale: 0.98;
+
+  /* ── Material SCALARS — palette-AGNOSTIC (no hue, so no colour token here).
+     Consumed only by the [data-surface] material layer below; they are the
+     "glass recipe": how far to blur, and how much of the palette surface to
+     keep opaque (the rest lets the blurred gradient show through). ── */
+  --glass-blur: 18px; /* frosted-panel backdrop blur */
+  --glass-blur-strong: 30px; /* modal / overlay blur — more separation */
+  /* Lower opacity than before: real glass is TRANSLUCENT, so the vibrant canvas
+     shows THROUGH the panel (the old 64% read as near-solid white = "flat with a
+     little blur"). */
+  --glass-surface-alpha: 50%; /* opacity of a frosted card / popover */
+  --glass-modal-alpha: 56%; /* the modal panel is GLASS too — translucent enough
+                               that the frosted page shows through it (only a
+                               touch more opaque than a card, for its body text) */
+  --glass-chrome-alpha: 52%; /* sidebar / chrome translucency */
+  --glass-input-alpha: 44%; /* form-control fill translucency */
+  --glass-border-alpha: 72%; /* the glass RIM — a more visible lit edge */
+  --glass-wash: 42%; /* MUCH stronger canvas tint — glass needs vibrant colour
+                        behind it to refract; a near-white canvas looks flat */
+  --glass-saturate: 180%; /* punchier refraction (was a fixed 150%) */
+  /* The specular SHEEN + RIM light — white, palette-agnostic (glass catches
+     light regardless of hue); used by the material layer, never as a fill. */
+  --glass-sheen: rgba(255, 255, 255, 0.22);
+  --glass-rim: rgba(255, 255, 255, 0.55);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Glassmorphism MATERIAL LAYER — palette-DERIVED surface treatment (7.3.35).
+   The style-contract EXTENSION: a style may own its surface MATERIAL in these
+   STYLE-SCOPED component rules as long as every colour is DERIVED from the
+   active palette via color-mix()/var() (never a raw hue) — so the style axis
+   stays disjoint from the palette axis. Surfaces are tagged with the
+   `data-surface` hook the shared primitives now emit (Card / Modal / Popover /
+   Sidebar / Input). Enforced by the "surface-material layer" test in
+   tests/theme/styleRegistry.test.ts. These are descendant-scoped selectors, so
+   they are NOT the bare [data-style] token block and never carry a hue token
+   there — the disjoint-axis token-block test still passes. ───────────────── */
+
+/* The canvas: the palette's page bg + three soft corner washes. The hue sources
+   are the `--el-*` accent roles (NOT Tier-0 `--color-*`), so the washes re-tint
+   with the active palette — the `data-palette` axis (7.3.48 / MOTIR-1065)
+   overrides `--el-*`, never `--color-*`, so reading `--el-*` here is what keeps
+   the glass orthogonal to the palette. The gradient is what the frosted panels
+   blur — without it, the blur is invisible. */
+[data-style='glassmorphism'] body {
+  background-image:
+    radial-gradient(
+      85% 80% at 6% -12%,
+      color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
+      transparent 62%
+    ),
+    radial-gradient(
+      80% 75% at 110% 4%,
+      color-mix(in srgb, var(--el-highlight) var(--glass-wash), transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      95% 90% at 50% 120%,
+      color-mix(in srgb, var(--el-link) var(--glass-wash), transparent),
+      transparent 62%
+    ),
+    radial-gradient(
+      60% 60% at 85% 95%,
+      color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
+      transparent 60%
+    );
+  background-attachment: fixed;
+}
+
+/* Frosted container surfaces — cards & popovers float as translucent sheets. */
+[data-style='glassmorphism'] [data-surface='card'],
+[data-style='glassmorphism'] [data-surface='popover'] {
+  /* The translucent fill lets the vibrant canvas through; the linear sheen is
+     the light raking across the glass (top-left → fading), the inset RIM is the
+     lit glass edge, and the soft drop makes the sheet FLOAT. White light is
+     palette-agnostic; the colour still comes only from the palette-derived
+     fill/border, so the axes stay disjoint. */
+  background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-surface-alpha), transparent);
+  background-image: linear-gradient(150deg, var(--glass-sheen), transparent 55%);
+  border-color: color-mix(in srgb, var(--el-border) var(--glass-border-alpha), transparent);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-rim),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 8px 32px -8px rgba(15, 15, 15, 0.18);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+}
+
+/* Modal panel — a touch more opaque + a stronger blur (body-text AA + lift). */
+[data-style='glassmorphism'] [data-surface='modal'] {
+  background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-modal-alpha), transparent);
+  background-image: linear-gradient(150deg, var(--glass-sheen), transparent 55%);
+  border-color: color-mix(in srgb, var(--el-border) var(--glass-border-alpha), transparent);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-rim),
+    0 28px 70px -16px rgba(15, 15, 15, 0.34);
+  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+}
+
+/* The sidebar rail — frosted chrome over the canvas. */
+[data-style='glassmorphism'] [data-surface='sidebar'] {
+  background-color: color-mix(in srgb, var(--el-sidebar-bg) var(--glass-chrome-alpha), transparent);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+}
+
+/* Form controls — a translucent fill so inputs read as glass too. */
+[data-style='glassmorphism'] [data-surface='input'] {
+  background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-input-alpha), transparent);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+}
+
+/* The MODAL / command-palette BACKDROP — the most important glass surface, since
+   a modal floats over real page content. Under glass it is NOT a dark scrim: a
+   light, palette-derived veil + a page BLUR, so the whole page behind frosts and
+   the (also-frosted) modal panel refracts it — the proper glass-modal look.
+   Overrides the primitives' `bg-black/40` utility. Palette-derived (no hue). */
+[data-style='glassmorphism'] [data-surface='overlay'] {
+  background-color: color-mix(in srgb, var(--el-page-bg) 24%, transparent);
+  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturate));
+  backdrop-filter: blur(8px) saturate(var(--glass-saturate));
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Neo-Brutalism — the raw, punchy, utilitarian style (7.3.34).
+   The LOUD end of the angular family — where Swiss is refined and calm, this is
+   harsh on purpose: hard 0px corners on every surface, heavy 2px solid borders
+   doing the structural work, and HARD-OFFSET drop shadows with ZERO blur (a
+   solid block of shadow, not a soft lift). Tight utilitarian density, raw
+   monospace headlines, and snappy mechanical motion (near-instant, no
+   press-scale). Overrides ONLY shape/feel tokens — never a colour token (that is
+   the data-palette axis; this style wears whatever palette is active, so the
+   active palette's AA contrast is preserved by construction). The heavy-border
+   axis has no Tier-0 token (components draw a 1px Tailwind `border`), so it is
+   carried by the style-scoped component-variant block that FOLLOWS this token
+   block. See docs/styles/neo-brutalism.md. ─────────────────────────────────── */
+[data-style='neo-brutalism'] {
+  /* Silhouette — zero radius. Hard 0px corners on every surface; --radius-pill
+     is left untouched so genuinely-circular affordances (avatars, status dots,
+     the spinner) stay round. */
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-btn: 0;
+  --radius-input: 0;
+  --radius-card: 0;
+  --radius-modal: 0;
+  --radius-badge: 0; /* rectangular (non-pill) status chips — the brutalist block */
+  --radius-control: 0;
+  --radius-kbd: 0;
+
+  /* Elevation — HARD-OFFSET shadows, zero blur. A solid offset block of shadow
+     (Xpx Ypx 0 0) instead of a soft diffuse lift; the chunky frame is the whole
+     point. The shadow colour is a literal near-ink (matching how the base
+     shadows already hard-code their rgba) — NOT a palette token, so the colour
+     axis stays untouched. */
+  --shadow-subtle: 2px 2px 0 0 rgba(15, 15, 15, 1);
+  --shadow-card: 4px 4px 0 0 rgba(15, 15, 15, 1);
+  --shadow-elevated: 6px 6px 0 0 rgba(15, 15, 15, 1);
+  --shadow-modal: 8px 8px 0 0 rgba(15, 15, 15, 1);
+  --shadow-hero-mockup: 12px 12px 0 0 rgba(15, 15, 15, 1);
+
+  /* Typography is the data-type axis now — Neo-Brutalism ships `defaultTypeId:
+     'motir-mono'` (mono headlines), applied via the [data-type='motir-mono']
+     block below. A [data-style] block sets NO --font-* token (disjointness). */
+
+  /* Density — tight, utilitarian. Chunky controls, compact card padding, no
+     wasted space. */
+  --spacing-btn-x: 16px;
+  --spacing-btn-y: 10px;
+  --spacing-input-x: 14px;
+  --spacing-input-y: 11px;
+  --spacing-card-padding: 20px;
+  --spacing-control-x: 10px;
+  --spacing-control-y: 6px;
+  --height-control: 36px;
+  --height-input: 44px;
+
+  /* Motion — snappy, mechanical. Near-instant transitions and NO press-scale;
+     the UI reacts, it does not ease. */
+  --transition-duration: 60ms;
+  --transition-fast: 40ms;
+  --transition-slow: 100ms;
+  --hover-scale: 1;
+  --active-scale: 1;
+}
+
+/* Neo-Brutalism — component-variant override: HEAVY borders (the deliverable's
+   "component-variant overrides" axis). There is no Tier-0 border-WIDTH token —
+   every primitive (Button outline, Card, Input, Modal, Pill, Popover, …) draws
+   a 1px Tailwind `.border`. This style-scoped rule thickens that full box border
+   to a loud 2px on every framed surface WITHOUT touching a colour token or any
+   component file, so the heaviness is real but stays entirely inside the
+   neo-brutalism scope (no other style is affected). It is intentionally a
+   descendant rule, not a bare token block, so the disjoint-axis test (which
+   inspects token blocks) does not treat it as one — and it sets no colour
+   anyway, so the two axes stay disjoint regardless. */
+[data-style='neo-brutalism'] .border {
+  border-width: 2px;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Cybercore / Y2K — the neon-on-dark retro-tech style (7.3.36). Dark-first.
+   The identity is GLOW + GRID + MONO: surfaces are lit by an outward halo
+   (neon glow elevation) instead of a drop shadow, a faint tech grid textures
+   the canvas (see the body rule below), headlines render in mono for a
+   terminal read, corners are hard HUD frames, and motion is fast/electric.
+   Overrides ONLY shape/feel tokens — never a colour token (that is the
+   data-palette axis; the neon hue comes from the active palette / dark theme,
+   and this style amplifies it into a halo). The glow + grid are built from
+   `currentColor`, so they pick up whatever hue the palette provides and never
+   pin one — keeping the style/palette axes disjoint AND preserving the
+   palette's AA by construction (no text/background pair is touched). The
+   differentiator vs Swiss / Minimal-Flat: Swiss is flat + calm, Cybercore is
+   LIT + electric (glow rings, grid texture, mono headlines, snappy press).
+   See docs/styles/cybercore-y2k.md. ────────────────────────────────────── */
+[data-style='cybercore-y2k'] {
+  /* Silhouette — hard HUD/terminal frames. Sharp small corners on every
+     surface; --radius-pill stays untouched so circular affordances (avatars,
+     status dots, the spinner) stay round. */
+  --radius-xs: 1px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 4px;
+  --radius-btn: 3px;
+  --radius-input: 3px;
+  --radius-card: 4px;
+  --radius-modal: 4px;
+  --radius-badge: 2px; /* rectangular HUD chips — not pills */
+  --radius-control: 2px;
+  --radius-kbd: 2px;
+
+  /* Elevation — NEON GLOW, not drop-shadow. Every surface emits an outward
+     halo built from currentColor (the active hue), so it reads as lit rather
+     than lifted; the 1px ring carries the "stroke" (lit edge) too. No colour
+     token is referenced — only currentColor, so the palette stays in charge of
+     the hue and AA is untouched. */
+  --shadow-subtle: 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
+  --shadow-card:
+    0 0 0 1px color-mix(in srgb, currentColor 12%, transparent),
+    0 0 14px -3px color-mix(in srgb, currentColor 24%, transparent);
+  --shadow-elevated:
+    0 0 0 1px color-mix(in srgb, currentColor 16%, transparent),
+    0 0 22px -4px color-mix(in srgb, currentColor 32%, transparent);
+  --shadow-modal:
+    0 0 0 1px color-mix(in srgb, currentColor 20%, transparent),
+    0 0 40px -6px color-mix(in srgb, currentColor 40%, transparent);
+  --shadow-hero-mockup:
+    0 0 0 1px color-mix(in srgb, currentColor 22%, transparent),
+    0 0 56px -8px color-mix(in srgb, currentColor 45%, transparent);
+
+  /* Typography is the data-type axis now — Cybercore ships `defaultTypeId:
+     'motir-mono'` (mono headlines), applied via the [data-type='motir-mono']
+     block below. A [data-style] block sets NO --font-* token (disjointness). */
+
+  /* Density — tight, technical HUD rhythm: compact controls, snug card pad. */
+  --spacing-btn-x: 18px;
+  --spacing-btn-y: 9px;
+  --spacing-input-x: 14px;
+  --spacing-input-y: 11px;
+  --spacing-card-padding: 20px;
+  --spacing-control-x: 10px;
+  --spacing-control-y: 6px;
+  --height-control: 34px;
+  --height-input: 42px;
+
+  /* Motion — snappy and electric. Very fast transitions, crisp press-scale. */
+  --transition-duration: 90ms;
+  --transition-fast: 60ms;
+  --transition-slow: 140ms;
+  --hover-scale: 1;
+  --active-scale: 0.97;
+}
+
+/* Cybercore surface texture — the tech grid (the "surface treatment" feel
+   axis). A component-variant override, NOT a [data-style] token block, so it
+   can carry the faint grid lines: built from currentColor at a very low alpha
+   so it adapts to the active palette and sits BEHIND content (text never
+   renders on it), keeping AA intact. Dark-first — on the dark theme this reads
+   as a Tron grid over the near-black canvas. */
+[data-style='cybercore-y2k'] body {
+  background-image:
+    linear-gradient(color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px);
+  background-size: 32px 32px;
+  background-position: center top;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Aurora — soft, DRIFTING aurora light behind fluid, gently-glowing surfaces
+   (7.3.38). The third surface-MATERIAL style (after glassmorphism + cybercore):
+   where glass re-shapes the surface into frosted TRANSLUCENCY and cybercore lits
+   it with a sharp neon ring, Aurora keeps surfaces OPAQUE and FLUID and moves the
+   identity onto (a) a slowly-animated, palette-derived aurora gradient canvas —
+   ribbons of light that drift like the northern lights — and (b) a gentle,
+   palette-derived COLOUR glow halo on each panel, so surfaces feel lit from
+   within rather than lifted by a hard shadow.
+
+   It ships in TWO parts, the same surface-material contract glassmorphism
+   established (see docs/styles/aurora.md + DESIGN.md):
+     1. This [data-style] TOKEN BLOCK — shape/feel tokens ONLY (fluid radii, soft
+        NEUTRAL shadows, smooth slow motion, roomy density) PLUS palette-AGNOSTIC
+        material SCALARS (wash strengths, surface sheen, the drift duration). No
+        hue lives here, so it stays disjoint from the palette axis — still
+        enforced by the token-block test in styleRegistry.test.ts.
+     2. A palette-DERIVED MATERIAL LAYER (the rules below) that paints the animated
+        aurora canvas + the per-surface colour glow via color-mix() OVER the
+        active palette tokens (--el-*), introducing NO new hue — so "style x
+        palette" stays orthogonal (swap the palette and the aurora re-tints; swap
+        the style and the hues are untouched). Surfaces opt in via the same
+        `data-surface` hook the shared primitives emit.
+   ───────────────────────────────────────────────────────────────────────── */
+[data-style='aurora'] {
+  /* Silhouette — fluid, soft. A touch larger/rounder than glass so panels read
+     as organic, flowing forms. --radius-pill stays untouched so circular
+     affordances (avatars, status dots, the spinner) stay round. */
+  --radius-xs: 7px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-btn: 14px;
+  --radius-input: 14px;
+  --radius-card: 20px;
+  --radius-modal: 26px;
+  --radius-badge: 9999px; /* chips stay pills — soft is the aurora register */
+  --radius-control: 12px;
+  --radius-kbd: 7px;
+
+  /* Elevation — a soft NEUTRAL lift only. The colour glow halo is palette-DERIVED
+     and so lives in the material layer below (not here, where no hue may appear);
+     these neutral rgba shadows are the diffuse base lift the glow sits on top of.
+     (rgba literals are neutral shadow ink — a cool near-black — not a palette
+     hue, so the token block stays colour-free.) */
+  --shadow-subtle: 0 1px 2px rgba(20, 20, 45, 0.05);
+  --shadow-card: 0 8px 30px -12px rgba(20, 20, 45, 0.16);
+  --shadow-elevated: 0 16px 44px -14px rgba(20, 20, 45, 0.22);
+  --shadow-modal: 0 26px 64px -18px rgba(20, 20, 45, 0.3);
+  --shadow-hero-mockup: 0 32px 78px -18px rgba(20, 20, 45, 0.34);
+
+  /* Density — comfortable, a touch roomy (the light wants room to breathe). */
+  --spacing-btn-x: 20px;
+  --spacing-btn-y: 11px;
+  --spacing-card-padding: 26px;
+  --spacing-control-x: 12px;
+  --spacing-control-y: 7px;
+  --height-control: 38px;
+
+  /* Motion — smooth and slow. Transitions glide; nothing snaps. */
+  --transition-duration: 260ms;
+  --transition-slow: 380ms;
+  --active-scale: 0.985;
+
+  /* ── Material SCALARS — palette-AGNOSTIC (no hue, so no colour token here).
+     Consumed only by the [data-style='aurora'] material rules below: how strong
+     each aurora ribbon tints the canvas, the faint top-sheen on a surface, the
+     glow-halo strengths, and how slowly the canvas drifts. ── */
+  --aurora-wash: 22%; /* primary ribbon tint over the page canvas */
+  --aurora-wash-soft: 15%; /* the cooler secondary ribbon (green/teal band) */
+  --aurora-sheen: 7%; /* faint lit-from-above sheen on an opaque surface */
+  --aurora-glow: 22%; /* colour-glow halo strength on a card / popover */
+  --aurora-glow-strong: 30%; /* the modal's slightly deeper halo */
+  --aurora-drift-duration: 28s; /* one slow breath of the drifting canvas */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Aurora MATERIAL LAYER — palette-DERIVED surface treatment (7.3.38).
+   The same style-contract extension glassmorphism uses: a style may own its
+   surface material in STYLE-SCOPED component rules as long as every colour is
+   DERIVED from the active palette via color-mix()/var() (never a raw hue) — so
+   the style axis stays disjoint from the palette axis. These descendant-scoped
+   selectors are NOT the bare token block, so they never trip the colour-free
+   token-block test; they ARE read as material rules and must be palette-derived
+   (enforced by the "surface-material layer" test in styleRegistry.test.ts).
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* The canvas: the palette's page bg + four soft aurora ribbons that slowly
+   DRIFT. Hues come from the `--el-*` accent roles (NOT Tier-0 `--color-*`), so
+   the ribbons re-tint with the active palette — the `data-palette` axis overrides
+   `--el-*`, never `--color-*`, which is what keeps the aurora orthogonal to the
+   palette. background-size > 100% gives the gradient room to drift; the whole
+   field eases back and forth over `--aurora-drift-duration`. */
+[data-style='aurora'] body {
+  background-image:
+    radial-gradient(
+      58% 75% at 12% 0%,
+      color-mix(in srgb, var(--el-accent) var(--aurora-wash), transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      54% 70% at 92% 8%,
+      color-mix(in srgb, var(--el-highlight) var(--aurora-wash), transparent),
+      transparent 58%
+    ),
+    radial-gradient(
+      68% 82% at 62% 104%,
+      color-mix(in srgb, var(--el-link) var(--aurora-wash), transparent),
+      transparent 62%
+    ),
+    radial-gradient(
+      48% 64% at 34% 58%,
+      color-mix(in srgb, var(--el-info) var(--aurora-wash-soft), transparent),
+      transparent 55%
+    );
+  background-size: 180% 180%;
+  background-attachment: fixed;
+  animation: aurora-drift var(--aurora-drift-duration) ease-in-out infinite alternate;
+}
+
+@keyframes aurora-drift {
+  from {
+    background-position:
+      0% 0%,
+      100% 0%,
+      50% 100%,
+      0% 60%;
+  }
+  to {
+    background-position:
+      100% 40%,
+      0% 60%,
+      40% 0%,
+      100% 100%;
+  }
+}
+
+/* Respect a reduced-motion preference — the aurora settles to a still gradient
+   (the identity holds; only the drift stops). */
+@media (prefers-reduced-motion: reduce) {
+  [data-style='aurora'] body {
+    animation: none;
+  }
+}
+
+/* Fluid container surfaces — OPAQUE (text AA is preserved against the base
+   surface the palette already tuned) with a faint lit-from-above aurora sheen and
+   a gentle palette-derived COLOUR glow halo, so panels feel lit from within
+   rather than lifted by a hard shadow. The sheen sits on background-image over
+   the opaque background-color, so it never pulls the surface far enough from its
+   base tone to threaten contrast. */
+[data-style='aurora'] [data-surface='card'],
+[data-style='aurora'] [data-surface='popover'] {
+  background-color: var(--el-surface);
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--el-highlight) var(--aurora-sheen), transparent),
+    transparent 42%
+  );
+  box-shadow:
+    var(--shadow-card),
+    0 0 26px -8px color-mix(in srgb, var(--el-accent) var(--aurora-glow), transparent),
+    0 0 40px -14px color-mix(in srgb, var(--el-link) var(--aurora-glow), transparent);
+}
+
+/* Modal panel — opaque, with a deeper glow so the dialog separates cleanly from
+   the drifting canvas behind it (and body text stays on the solid surface). */
+[data-style='aurora'] [data-surface='modal'] {
+  background-color: var(--el-surface);
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--el-highlight) var(--aurora-sheen), transparent),
+    transparent 38%
+  );
+  box-shadow:
+    var(--shadow-modal),
+    0 0 60px -16px color-mix(in srgb, var(--el-accent) var(--aurora-glow-strong), transparent);
+}
+
+/* The sidebar rail — opaque chrome carrying the faint aurora sheen so it reads as
+   part of the lit surface family, not a flat slab. */
+[data-style='aurora'] [data-surface='sidebar'] {
+  background-color: var(--el-sidebar-bg);
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--el-accent) var(--aurora-sheen), transparent),
+    transparent 30%
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   3D / Immersive — the depth + perspective style (7.3.39, DEFERRED follow-up).
+   EXPERIMENTAL. The identity is DEPTH + the standard "3D card" interaction:
+   deep, multi-layer shadows (specular highlight + contact + ambient + far key
+   light) float every surface dramatically off the canvas, and the ImmersiveTilt
+   shell engine tips `[data-tilt]` tiles TOWARD THE CURSOR (rotateX/rotateY over a
+   perspective — the vanilla-tilt effect; see the @media block below).
+   Overrides ONLY shape/feel tokens — never a colour token (that is the
+   data-palette axis; this style wears whatever palette is active, so the active
+   palette's AA contrast is preserved by construction). The shadow light/ink is
+   literal rgba (white specular highlight + near-ink shadow), NOT a palette token,
+   so the colour axis stays untouched. The differentiator vs Glassmorphism: glass
+   is a translucent MATERIAL over a gradient; 3D is OPAQUE depth — real layered
+   light + a cursor-tracking tilt, no blur, no tint. "Performance + accessibility
+   heavy" (the card's caveat), so the tilt is gated behind `prefers-reduced-motion`
+   (BOTH the engine and the @media block below) — reduced-motion users keep the
+   static deep-shadow depth. See docs/styles/3d-immersive.md. ────────────────── */
+[data-style='3d-immersive'] {
+  /* Silhouette — generously rounded dimensional tiles. --radius-pill is left
+     untouched so genuinely-circular affordances (avatars, status dots, the
+     spinner) stay round. */
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-btn: 14px;
+  --radius-input: 14px;
+  --radius-card: 20px;
+  --radius-modal: 28px;
+  --radius-badge: 9999px; /* soft, dimensional status pills */
+  --radius-control: 12px;
+  --radius-kbd: 8px;
+
+  /* Elevation — THE signature. Every shadow token becomes a DEEP, multi-layer
+     drop: a top specular highlight (inset, a lit edge where light catches the
+     raised tile) + a tight contact shadow + a mid ambient + a wide, soft key
+     light far below, so each tile floats dramatically off the canvas and reads
+     as a physical object — not the timid lift a single shadow gives. Scales from
+     --shadow-subtle up to --shadow-hero-mockup. Pure rgba light/ink (white
+     highlight + near-ink shadow), no palette token — the colour axis is
+     untouched (a white specular highlight reads as "lit" on any palette). */
+  --shadow-subtle:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(15, 15, 15, 0.06),
+    0 5px 12px -2px rgba(15, 15, 15, 0.13);
+  --shadow-card:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 2px 4px rgba(15, 15, 15, 0.05),
+    0 12px 24px -6px rgba(15, 15, 15, 0.16), 0 28px 56px -12px rgba(15, 15, 15, 0.3);
+  --shadow-elevated:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.65), 0 4px 8px rgba(15, 15, 15, 0.06),
+    0 20px 40px -8px rgba(15, 15, 15, 0.22), 0 44px 80px -16px rgba(15, 15, 15, 0.38);
+  --shadow-modal:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 8px 16px rgba(15, 15, 15, 0.08),
+    0 32px 64px -12px rgba(15, 15, 15, 0.28), 0 72px 120px -24px rgba(15, 15, 15, 0.46);
+  --shadow-hero-mockup:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 16px 32px rgba(15, 15, 15, 0.1),
+    0 96px 160px -32px rgba(15, 15, 15, 0.5);
+
+  /* Typography is the data-type axis now — 3D / Immersive ships
+     `defaultTypeId: 'motir'` (the base editorial pairing); the personality is
+     depth + light, not type. A [data-style] block sets NO --font-* token. */
+
+  /* Density — roomy and immersive; depth wants air around each tile. */
+  --spacing-btn-x: 22px;
+  --spacing-btn-y: 12px;
+  --spacing-input-x: 18px;
+  --spacing-input-y: 13px;
+  --spacing-card-padding: 28px;
+  --spacing-control-x: 14px;
+  --spacing-control-y: 8px;
+  --height-control: 40px;
+  --height-input: 46px;
+
+  /* Motion — smooth and floaty. A slower ease for the depth to feel weighty.
+     The signature INTERACTION is the pointer-parallax TILT below (the standard
+     "3D card" effect — cards tip toward the cursor), driven by the
+     ImmersiveTilt shell engine. */
+  --transition-duration: 260ms;
+  --transition-fast: 180ms;
+  --transition-slow: 360ms;
+  --active-scale: 0.98;
+}
+
+/* 3D / Immersive — the IMMERSIVE BACKGROUND (depth atmosphere on EVERY page,
+   not just card surfaces) + the resting FLOAT (every tile lifts off that
+   canvas). Both are STATIC depth, so they sit OUTSIDE the reduced-motion gate —
+   a reduced-motion user still gets the full immersive depth, only the tilt is
+   suppressed. The background is palette-DERIVED (color-mix over --el tokens,
+   never a raw hue), so the style/palette axes stay disjoint and the material-
+   rule test passes: a palette swap re-tints the atmosphere, a style swap leaves
+   hues alone. This is what makes the table/list/board pages (no card surfaces of
+   their own) read as immersive too. */
+[data-style='3d-immersive'] body {
+  background-image:
+    radial-gradient(
+      130% 85% at 50% -15%,
+      color-mix(in srgb, var(--el-accent) 9%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      95% 75% at 108% 112%,
+      color-mix(in srgb, var(--el-link) 8%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(
+      150% 130% at 50% 42%,
+      transparent 52%,
+      color-mix(in srgb, var(--el-text) 8%, transparent)
+    );
+  background-attachment: fixed;
+}
+
+/* EVERY PANEL FLOATS — systematic depth across the WHOLE app, not just the
+   handful of surfaces that use the <Card> primitive. A "panel" is any element
+   with the card radius (`rounded-(--radius-card)` → the compiled class
+   `.rounded-\(--radius-card\)`): cards, popovers, callouts, list/table panels,
+   widgets, the hand-rolled `<div className="rounded-(--radius-card) border …">`
+   surfaces every screen builds. They all get the deep resting float shadow so no
+   screen is left flat. This is the same global-utility-targeting approach
+   neo-brutalism uses for `.border`. Static depth (NOT motion-gated). box-shadow
+   is not a colour-painting property, so the material-rule test skips it.
+   Per-surface exceptions (the board column's clip-safe shadow, modals) override
+   below by source order. Modals carry their own deeper shadow via the modal
+   radius (next rule). */
+[data-style='3d-immersive'] .rounded-\(--radius-card\) {
+  box-shadow: var(--shadow-card);
+}
+[data-style='3d-immersive'] .rounded-\(--radius-modal\) {
+  box-shadow: var(--shadow-modal);
+}
+
+/* 3D / Immersive — the POINTER-PARALLAX TILT (the standard "3D card" effect,
+   the interactive half of the identity). The ImmersiveTilt shell engine
+   (components/theme/ImmersiveTilt.tsx) — active ONLY when data-style is this
+   style and the user has NOT requested reduced motion — reads the cursor
+   position over a `[data-tilt]` tile and writes per-tile `--tilt-rx` / `--tilt-ry`
+   rotation vars, so the tile tips toward the pointer (rotateX/rotateY over a
+   perspective) and lifts; on leave the engine zeroes the vars and the tile eases
+   back flat. The whole block is GATED behind `prefers-reduced-motion:
+   no-preference` (the card flags this style accessibility-heavy) — a
+   reduced-motion user gets NO transform at all and keeps the static deep-shadow
+   depth. It sets NO colour (transform + box-shadow only; box-shadow draws the
+   existing near-ink token), so the style/palette axes stay disjoint and
+   styleRegistry.test.ts's material-rule check (which inspects only
+   colour-painting rules) skips it. Tiles opt in with the `data-tilt` hook
+   (Card, BoardCard). */
+@media (prefers-reduced-motion: no-preference) {
+  /* The transition lives on the resting tile so BOTH the tilt-in and the
+     settle-back-flat animate. Crucially, NO `transform` is set at rest — only
+     the actively-hovered tile (data-tilt-active) gets one, so a resting card
+     never establishes a transform stacking context that could reposition a
+     non-portaled fixed/absolute descendant. On leave the engine drops the
+     attribute and the transform eases back to none over 400ms. */
+  [data-style='3d-immersive'] [data-tilt] {
+    transition:
+      transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
+      box-shadow 260ms ease-out;
+  }
+  /* While the pointer is over the tile the engine sets data-tilt-active='1':
+     tip it toward the cursor (the per-tile --tilt-rx/ry the engine writes),
+     drop the transform transition so it tracks the cursor in real time, deepen
+     the shadow so the lifted tile casts further, and — the proper-3D bit —
+     establish a 3D context (`preserve-3d`) so the card's slots can sit on
+     separate translateZ planes and PARALLAX (a flat-plane tilt without this is
+     the "halfway / flat-3D mix" tell). `position: relative` anchors the glare. */
+  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1'] {
+    transform: perspective(var(--tilt-perspective, 900px)) rotateX(var(--tilt-rx, 0deg))
+      rotateY(var(--tilt-ry, 0deg));
+    transform-style: preserve-3d;
+    transition:
+      transform 80ms linear,
+      box-shadow 260ms ease-out;
+    box-shadow: var(--shadow-elevated);
+  }
+
+  /* DEPTH PLANES — the card's slots lift onto different translateZ planes so
+     they parallax above the card face as it tilts (the title/header pops most,
+     the footer sits nearer the face; the body stays ON the face so arbitrary
+     content never renders skewed). Only while actively tilting, so a resting
+     card is perfectly flat. This is the standard layered-parallax technique
+     (vanilla-tilt / Atropos): perspective + preserve-3d + per-layer translateZ. */
+  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1'] [data-tilt-layer='front'] {
+    transform: translateZ(42px);
+    transition: transform 80ms linear;
+  }
+  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1'] [data-tilt-layer='back'] {
+    transform: translateZ(14px);
+    transition: transform 80ms linear;
+  }
+
+  /* GLARE — a cursor-tracked specular sweep across the face (the light catching
+     a tilted surface). Palette-DERIVED (color-mix over --el-page-bg, never a raw
+     hue → passes the material-rule test; a palette swap re-tints the sheen). It
+     rides a high translateZ so it reads as light on the front glass, fades in
+     only while active, and never eats pointer events. */
+  [data-style='3d-immersive'] [data-tilt]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: radial-gradient(
+      circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%),
+      color-mix(in srgb, var(--el-page-bg) 65%, transparent),
+      transparent 55%
+    );
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+    pointer-events: none;
+  }
+  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1']::after {
+    opacity: 0.45;
+    /* Just above the card FACE but BELOW the popped header/footer planes, so it
+       lights the surface without washing the floating title. */
+    transform: translateZ(2px);
+  }
+}
+
+/* `position: relative` anchors the glare ::after to each tile. Static (outside
+   the motion gate) so the anchor is stable; the glare itself only shows while
+   tilting (above). */
+[data-style='3d-immersive'] [data-tilt] {
+  position: relative;
+}
+
+/* ── 3D / Immersive — BOARD COLUMNS ─────────────────────────────────────────
+   A board column is a TALL panel inside an `overflow-x-auto` scroll row, which
+   forces overflow-y to clip — so the wide --shadow-card gets cut off at the
+   bottom and adjacent opaque columns occlude each other's side shadows, making
+   the board read as one backing slab. Instead each column gets a TIGHTER,
+   clip/occlusion-safe float shadow (small horizontal bleed, modest drop), and
+   the scroll row widens its gap + adds bottom room so the shadow shows. Result:
+   each column floats as its own distinct card. */
+[data-style='3d-immersive'] [data-board-col-panel] {
+  box-shadow:
+    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);
+  overflow: hidden;
+}
+[data-style='3d-immersive'] [data-board-scroll] {
+  gap: 1.5rem;
+  padding-bottom: 2.25rem;
+  padding-top: 0.25rem;
+}
+
+/* ── 3D / Immersive — PHYSICAL BUTTONS ──────────────────────────────────────
+   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\) {
+  box-shadow:
+    0 3px 0 0 var(--el-border-strong),
+    0 5px 10px -3px rgba(15, 15, 15, 0.18);
+  transition:
+    transform 90ms ease-out,
+    box-shadow 90ms ease-out,
+    background-color var(--transition-duration);
+}
+[data-style='3d-immersive'] [data-variant='primary'] {
+  box-shadow:
+    0 4px 0 0 var(--el-accent-pressed),
+    0 7px 12px -3px rgba(15, 15, 15, 0.32);
+}
+[data-style='3d-immersive'] [data-variant='danger'] {
+  box-shadow:
+    0 4px 0 0 color-mix(in srgb, var(--el-danger), black 32%),
+    0 7px 12px -3px rgba(15, 15, 15, 0.32);
+}
+/* Ghost — the deliberately-flat quiet button; no thickness. */
+[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) {
+  transform: translateY(3px);
+  box-shadow:
+    0 1px 0 0 var(--el-border-strong),
+    0 2px 4px rgba(15, 15, 15, 0.14);
+}
+[data-style='3d-immersive'] [data-variant='primary']:active:not(:disabled) {
+  box-shadow:
+    0 1px 0 0 var(--el-accent-pressed),
+    0 2px 5px rgba(15, 15, 15, 0.22);
+}
+[data-style='3d-immersive'] [data-variant='danger']:active:not(:disabled) {
+  box-shadow:
+    0 1px 0 0 color-mix(in srgb, var(--el-danger), black 32%),
+    0 2px 5px rgba(15, 15, 15, 0.22);
+}
+[data-style='3d-immersive'] [data-variant='ghost']:active:not(:disabled) {
+  box-shadow: none;
+}
+
+/* ── 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
+   (transform-origin top + rotateX, folded → flat). Every floating overlay in the
+   app shares `shadow-(--shadow-elevated)` (popovers, comboboxes, multi-selects,
+   menus, tooltips, toasts), so one global rule on the compiled
+   `.shadow-\(--shadow-elevated\)` class gives them all the 3D open — and restores
+   the deeper elevated shadow (the global card-float rule above would otherwise
+   flatten them to --shadow-card). gated by reduced-motion. */
+@keyframes immersive-menu-open {
+  from {
+    opacity: 0;
+    transform: perspective(900px) rotateX(-26deg) translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* Restore the deeper ELEVATED shadow on every overlay (the global card-float
+   rule above would otherwise flatten any `shadow-(--shadow-elevated)` surface to
+   --shadow-card). Global + static so menus, tooltips, drag-overlays all keep the
+   right depth. */
+[data-style='3d-immersive'] .shadow-\(--shadow-elevated\) {
+  box-shadow: var(--shadow-elevated);
+}
+@media (prefers-reduced-motion: no-preference) {
+  /* The 3D UNFOLD is scoped to actual MENU surfaces (the Popover primitive +
+     the `data-menu-surface` hook on Combobox / MultiSelect / BoardSwitcher
+     menus) — NOT every elevated surface, so a drag-overlay or toast doesn't
+     unexpectedly fold open. */
+  [data-style='3d-immersive'] [data-surface='popover'],
+  [data-style='3d-immersive'] [data-menu-surface] {
+    transform-origin: top center;
+    animation: immersive-menu-open 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  /* A Radix popover that flips ABOVE its trigger folds from the bottom edge. */
+  [data-style='3d-immersive'] [data-surface='popover'][data-side='top'] {
+    transform-origin: bottom center;
+  }
+}
+
+/* ── Hand-Drawn / Indie (data-style="hand-drawn-indie") — Subtask 7.3.41 ─────
+   DEFERRED follow-up. A sketchy, friendly, zine-like aesthetic. TWO moves make
+   it read as genuinely hand-drawn, not just "softly rounded":
+   (1) WONKY corners — every framed surface gets a strongly asymmetric
+       multi-value radius (one corner near-sharp, the opposite generously round,
+       no two alike) so a card/button/input reads as a DRAWN box; and
+   (2) ROUGH edges — a `feTurbulence`+`feDisplacementMap` filter (`#hd-rough`,
+       defined once by <HandDrawnFilter/> in the root layout) warps the OUTLINE
+       into an ink-like wobble. Asymmetric radius alone only bends the corners;
+       the displacement is what makes the LINES wavy (the Excalidraw / rough.js
+       look). It is applied to a CONTENT-SAFE `::after` pseudo-border so only the
+       outline is displaced — the text stays crisp.
+   Plus a soft hand-placed offset shadow, a roomy rhythm, and a springy
+   hover/press bounce. Colour stays the palette axis: the token block sets no
+   `--color-` / `--el-` colour token (AA preserved), and the rough-border rule
+   takes its ink from the palette (var(--el-border-strong)). Out-of-the-box type
+   is the characterful Editorial (Fraunces) pairing via `defaultTypeId`. See
+   docs/styles/hand-drawn-indie.md. */
+[data-style='hand-drawn-indie'] {
+  /* Silhouette — WONKY hand-drawn corners. The slash splits horizontal /
+     vertical corner radii, and the four values per side differ widely, so each
+     corner of a box is a different curve (the "drawn rectangle" tell). Generic
+     scale stays soft + single-valued; the SEMANTIC surfaces carry the wonk. */
+  --radius-xs: 6px;
+  --radius-sm: 9px;
+  --radius-md: 13px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-btn: 14px 40px 12px 36px / 36px 14px 38px 16px;
+  --radius-input: 16px 48px 14px 42px / 42px 16px 46px 18px;
+  --radius-card: 18px 58px 22px 48px / 48px 20px 54px 24px;
+  --radius-modal: 22px 66px 20px 56px / 56px 22px 60px 26px;
+  --radius-badge: 9px 26px 11px 22px / 22px 11px 24px 9px;
+  --radius-control: 10px 26px 12px 22px / 22px 12px 24px 10px;
+  --radius-kbd: 6px 18px 8px 15px / 15px 8px 16px 6px;
+
+  /* Elevation — soft, hand-placed offset shadows (a doodled drop, nudged
+     down-right); friendly + low, never a hard brutalist block. Warm ink. */
+  --shadow-subtle: 1px 2px 4px -1px rgba(38, 30, 22, 0.1);
+  --shadow-card: 2px 4px 9px -3px rgba(38, 30, 22, 0.14);
+  --shadow-elevated: 3px 6px 16px -4px rgba(38, 30, 22, 0.17);
+  --shadow-modal: 5px 9px 30px -8px rgba(38, 30, 22, 0.22);
+  --shadow-hero-mockup: 6px 12px 40px -10px rgba(38, 30, 22, 0.22);
+
+  /* Density — roomy + relaxed; the sketch wants margins around it. */
+  --spacing-btn-x: 20px;
+  --spacing-btn-y: 12px;
+  --spacing-input-x: 16px;
+  --spacing-input-y: 12px;
+  --spacing-card-padding: 26px;
+  --spacing-control-x: 12px;
+  --spacing-control-y: 8px;
+  --height-control: 38px;
+  --height-input: 44px;
+
+  /* Motion — springy + playful: a bouncy hover lift and a deeper press squish. */
+  --transition-duration: 200ms;
+  --transition-fast: 130ms;
+  --transition-slow: 320ms;
+  --hover-scale: 1.02;
+  --active-scale: 0.97;
+}
+
+/* The ROUGH, hand-inked edge. A wavy ink line is drawn on a `::after` overlay
+   warped by the `#hd-rough` turbulence filter — the move that makes lines look
+   DRAWN, not machine-straight. The overlay is `pointer-events: none` and only it
+   is filtered, so the surface's own text/content stays CRISP (filtering the
+   element itself would smear the text). The real border is KEPT (2px) as the
+   structural fallback. The ink is palette-DERIVED (var(--el-border-strong)), so
+   the colour axis stays disjoint and it adapts to dark mode.
+
+   The overlay needs a positioned host. We add `position: relative` ONLY to
+   STATIC elements: a `fixed`/`absolute` element (a centered modal / command
+   palette — both `.fixed .border`) or a `sticky` header is ALREADY a containing
+   block, so overriding its position would break it (overriding `.fixed` is what
+   knocked the modals off-centre). Those positioned elements still get the `::after`
+   overlay (they're already a containing block), just not the position override.
+
+   Two line kinds are roughened so the frame AND the inner grid match (no straight
+   dividers inside a wavy card): the full-box `.border`, and the single-side
+   dividers `.border-b` / `.border-t` (table rows, section rules) — the latter
+   scoped INSIDE `[data-surface]` panels to bound the count to real surfaces (and
+   their rows are virtualised, so only ~viewport-many overlays ever render). */
+[data-style='hand-drawn-indie'] .border {
+  border-width: 2px;
+}
+[data-style='hand-drawn-indie'] .border:not(.fixed):not(.absolute):not(.sticky) {
+  position: relative;
+}
+[data-style='hand-drawn-indie'] .border::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  pointer-events: none;
+  border: 2px solid var(--el-border-strong);
+  border-radius: inherit;
+  filter: url(#hd-rough);
+}
+
+/* Internal grid dividers — make the inner rules as rough as the frame. Scoped
+   inside framed surfaces; `:not(.border)` so a full-box element isn't handled
+   twice; `:not(:last-child)` mirrors the common `last:border-b-0` strip so the
+   final row gets no phantom line. */
+[data-style='hand-drawn-indie']
+  [data-surface]
+  :is(.border-b, .border-t):not(.border):not(.fixed):not(.absolute):not(.sticky) {
+  position: relative;
+}
+[data-style='hand-drawn-indie'] [data-surface] .border-b:not(.border)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 0;
+  pointer-events: none;
+  border-bottom: 2px solid var(--el-border-strong);
+  filter: url(#hd-rough);
+}
+[data-style='hand-drawn-indie'] [data-surface] .border-t:not(.border)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -1px;
+  height: 0;
+  pointer-events: none;
+  border-top: 2px solid var(--el-border-strong);
+  filter: url(#hd-rough);
+}
+/* Suppress the overlay only where the REAL divider is removed: the last row of a
+   fully-rendered list strips its border via `last:border-b-0`. (We can't use
+   `:not(:last-child)` on the draw rule — a STICKY table header sits alone in its
+   own `role="rowgroup"`, so it is itself a `:last-child` and would be wrongly
+   skipped, which left the work-item table header's divider straight.) Same
+   specificity as the draw rule, placed after, so it wins on the real last row. */
+[data-style='hand-drawn-indie'] [data-surface] .last\:border-b-0:last-child::after {
+  content: none;
+}
+
+/* The APP SHELL FRAME — the sidebar rail's right edge + the top bar's bottom edge
+   (MOTIR-1315). These use DIRECTIONAL borders (border-r / border-b) the full-box
+   `.border` rule doesn't match, and the rail/header sit OUTSIDE the [data-surface]
+   panels the divider rules scope to — so the shell frame stayed machine-straight
+   while every card looked hand-drawn. Draw the rough ink directly on the
+   data-surface host: the rail (data-surface="sidebar") gets a wavy RIGHT edge, the
+   header (data-surface="header") a wavy BOTTOM edge. Palette-DERIVED ink
+   (var(--el-border-strong)), so the colour axis stays disjoint. Add `position`
+   ONLY to a STATIC host (the rail) — never the STICKY header, which is already a
+   containing block (overriding it would break the sticky), mirroring the `.border`
+   rule's guard. */
+[data-style='hand-drawn-indie']
+  :is([data-surface='sidebar'], [data-surface='header']):not(.fixed):not(.absolute):not(.sticky) {
+  position: relative;
+}
+[data-style='hand-drawn-indie'] [data-surface='sidebar']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  width: 0;
+  pointer-events: none;
+  border-right: 2px solid var(--el-border-strong);
+  filter: url(#hd-rough);
+}
+[data-style='hand-drawn-indie'] [data-surface='header']::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 0;
+  pointer-events: none;
+  border-bottom: 2px solid var(--el-border-strong);
+  filter: url(#hd-rough);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Neumorphism — the soft-extruded "soft UI" style (7.3.42, DEFERRED follow-up).
+   EXPERIMENTAL. The identity is a SINGLE MONOCHROME FIELD out of which every
+   surface is moulded by a DUAL soft shadow — a light highlight (top-left) paired
+   with a palette-derived dark shadow (bottom-right) — so a card swells OUT of the
+   canvas (raised) and a form field sinks INTO it (an inset well). No translucency,
+   no gradient, no glow: just continuous opaque material + paired soft shadows.
+   Ships in two parts, like the other surface-material styles (glass / aurora):
+     1. This [data-style] TOKEN BLOCK — shape/feel tokens ONLY (soft radii, soft
+        NEUTRAL shadows, gentle motion, roomy density) PLUS palette-AGNOSTIC
+        material SCALARS (the extrusion distance + blur, the white highlight, and
+        the dark-shadow strength %). No hue lives here, so it stays disjoint from
+        the palette axis — enforced by the token-block test in styleRegistry.test.ts.
+     2. A palette-DERIVED MATERIAL LAYER (the rules below) that paints the
+        monochrome field + the dual raised/inset shadows. The dark shadow is
+        color-mix() over the active palette's `--el-text` ink (NO new hue); the
+        light highlight is palette-AGNOSTIC white (like glass's --glass-rim), so a
+        palette swap re-tones the moulded surface and a style swap leaves hues be.
+   ── Accessibility (the card's "accessibility-hard, gate carefully" caveat) ──
+   Soft-UI's classic failure is low contrast — borderless same-colour surfaces and
+   text that washes out. Gated by construction here: surfaces stay OPAQUE at the
+   palette's own AA-tuned `--el-surface` (text contrast preserved, like aurora), a
+   faint hairline border is KEPT (not removed) so structure never relies on shadow
+   alone, and a `prefers-contrast: more` / `forced-colors: active` fallback below
+   restores a solid border and flattens the shadow for users who need it.
+   See docs/styles/neumorphism.md. ──────────────────────────────────────────── */
+[data-style='neumorphism'] {
+  /* Silhouette — soft, generously rounded pebbles; the rounding lets the paired
+     shadow wrap each surface. --radius-pill / circular affordances untouched. */
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-btn: 12px;
+  --radius-input: 12px;
+  --radius-card: 18px;
+  --radius-modal: 22px;
+  --radius-badge: 9999px; /* chips stay pills — soft is the neumorphic register */
+  --radius-control: 10px;
+  --radius-kbd: 6px;
+
+  /* Elevation — soft, diffuse NEUTRAL base lift for any non-data-surface elevated
+     element (tooltips, bare dropdowns). The dual raised/inset MATERIAL shadow is
+     palette-derived and lives in the material layer below (not here, where no hue
+     may appear). rgba literals are neutral shadow ink, not a palette hue. */
+  --shadow-subtle: 0 1px 2px rgba(20, 20, 30, 0.05);
+  --shadow-card: 0 6px 18px -10px rgba(20, 20, 30, 0.14);
+  --shadow-elevated: 0 12px 30px -14px rgba(20, 20, 30, 0.18);
+  --shadow-modal: 0 22px 50px -18px rgba(20, 20, 30, 0.24);
+  --shadow-hero-mockup: 0 26px 60px -18px rgba(20, 20, 30, 0.28);
+
+  /* Density — comfortable, roomy; the soft shadows need air to read as extruded. */
+  --spacing-btn-x: 20px;
+  --spacing-btn-y: 11px;
+  --spacing-card-padding: 26px;
+  --spacing-control-x: 12px;
+  --spacing-control-y: 7px;
+  --height-control: 38px;
+
+  /* Motion — gentle; a soft press-scale, nothing snaps. */
+  --transition-duration: 200ms;
+  --transition-slow: 300ms;
+  --active-scale: 0.98;
+
+  /* ── Material SCALARS — palette-AGNOSTIC (no hue, so no colour token here).
+     Consumed only by the [data-style='neumorphism'] material rules below: how far
+     the paired shadow is offset, how soft it blurs, and the two shadow inks (the
+     top-left highlight + the bottom-right dark). Both inks are NEUTRAL rgba (white
+     light + near-black shade) — like glass's --glass-rim / aurora's --shadow-*:
+     they are shadow ink, not a palette hue, so the token block stays colour-free.
+     A neumorphic mould needs a CONSTANT light/dark pairing (highlight always
+     lighter, shadow always darker than the surface) — deriving the dark ink from
+     a palette text token would INVERT it in dark mode (the ink goes light), so the
+     ink stays neutral and the [data-theme='dark'] block below re-balances it. ── */
+  --neu-distance: 6px; /* offset of the paired shadow on a card / panel */
+  --neu-blur: 16px; /* how soft the paired shadow blurs (the "swell") */
+  --neu-distance-sm: 3px; /* tighter offset for an inset input well */
+  --neu-blur-sm: 8px; /* tighter blur for the inset well */
+  --neu-light: rgba(255, 255, 255, 0.6); /* top-left raised HIGHLIGHT (light ink) */
+  --neu-shadow: rgba(20, 20, 30, 0.16); /* bottom-right dark shadow (shade ink) */
+}
+
+/* Dark theme re-balances the two inks: on a dark surface a 0.6 white halo is far
+   too loud and a 0.16 near-black shade barely shows, so the highlight drops to a
+   faint lighten and the shade deepens to a real black — keeping the constant
+   light-above / dark-below mould readable in both themes. Scoped to BOTH axis
+   attributes on <html> (NOT a bare [data-style] token block, so the disjoint-axis
+   test does not read it); sets only neutral rgba scalars, no hue. */
+[data-style='neumorphism'][data-theme='dark'] {
+  --neu-light: rgba(255, 255, 255, 0.05);
+  --neu-shadow: rgba(0, 0, 0, 0.44);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Neumorphism MATERIAL LAYER — palette-DERIVED surface treatment (7.3.42).
+   The same style-contract extension glass / aurora use: a style may own its
+   surface material in STYLE-SCOPED component rules as long as every colour is
+   DERIVED from the active palette via color-mix()/var() (the dark shadow + the
+   monochrome field) — never a raw hue (the white highlight is palette-agnostic
+   light, not a hue). These descendant-scoped selectors are NOT the bare token
+   block, so they never trip the colour-free token-block test; they ARE read as
+   material rules and are palette-derived (enforced by the "surface-material
+   layer" test in styleRegistry.test.ts). ──────────────────────────────────── */
+
+/* The monochrome field: the page canvas adopts the palette's opaque surface so
+   panels look MOULDED OUT OF the same material rather than placed on top. Both
+   the canvas and the surfaces below share `var(--el-surface)`, which is the whole
+   neumorphic illusion. Palette-derived (no hue of its own). */
+[data-style='neumorphism'] body {
+  background-color: var(--el-surface);
+}
+
+/* Raised container surfaces — cards & popovers swell OUT of the field on a paired
+   soft shadow: a light highlight top-left + a dark shadow bottom-right. Both inks
+   are neutral (palette-agnostic) shadow ink; the SURFACE + border are
+   palette-derived, so the mould re-tones per palette and the style stays disjoint
+   from hue. The faint hairline is kept as the accessibility fallback so structure
+   doesn't depend on the shadow alone. Opaque `--el-surface` keeps text on the
+   palette's AA-tuned surface. */
+[data-style='neumorphism'] [data-surface='card'],
+[data-style='neumorphism'] [data-surface='popover'] {
+  background-color: var(--el-surface);
+  border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
+  box-shadow:
+    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow),
+    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-light);
+}
+
+/* Modal panel — the same raised mould, a touch deeper so the dialog separates
+   from the field behind it (body text stays on the opaque surface). */
+[data-style='neumorphism'] [data-surface='modal'] {
+  background-color: var(--el-surface);
+  border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
+  box-shadow:
+    calc(var(--neu-distance) + 2px) calc(var(--neu-distance) + 2px) calc(var(--neu-blur) + 8px)
+      var(--neu-shadow),
+    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) calc(var(--neu-blur) + 4px)
+      var(--neu-light);
+}
+
+/* The sidebar rail — moulded from the same field as the chrome, gently raised so
+   it reads as part of the one continuous surface. */
+[data-style='neumorphism'] [data-surface='sidebar'] {
+  background-color: var(--el-surface);
+  box-shadow:
+    var(--neu-distance) 0 var(--neu-blur) var(--neu-shadow),
+    calc(-1 * var(--neu-distance)) 0 var(--neu-blur) var(--neu-light);
+}
+
+/* Form controls — the inverse mould: a CONCAVE INSET well pressed INTO the field
+   (the soft-UI input look), the paired shadow flipped to `inset`. */
+[data-style='neumorphism'] [data-surface='input'] {
+  background-color: var(--el-surface);
+  border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
+  box-shadow:
+    inset var(--neu-distance-sm) var(--neu-distance-sm) var(--neu-blur-sm) var(--neu-shadow),
+    inset calc(-1 * var(--neu-distance-sm)) calc(-1 * var(--neu-distance-sm)) var(--neu-blur-sm)
+      var(--neu-light);
+}
+
+/* Accessibility fallback — when a user asks for more contrast (or forced colours),
+   structure must NOT rest on the soft shadow. Restore a solid hairline on every
+   moulded surface and flatten the paired shadow to a single readable lift.
+   Palette-derived (var(--el-border)); no hue. */
+@media (prefers-contrast: more) {
+  [data-style='neumorphism'] [data-surface='card'],
+  [data-style='neumorphism'] [data-surface='popover'],
+  [data-style='neumorphism'] [data-surface='modal'],
+  [data-style='neumorphism'] [data-surface='input'],
+  [data-style='neumorphism'] [data-surface='sidebar'] {
+    border-color: var(--el-border-strong);
+    box-shadow: var(--shadow-card);
+  }
+}
+@media (forced-colors: active) {
+  [data-style='neumorphism'] [data-surface='card'],
+  [data-style='neumorphism'] [data-surface='popover'],
+  [data-style='neumorphism'] [data-surface='modal'],
+  [data-style='neumorphism'] [data-surface='input'],
+  [data-style='neumorphism'] [data-surface='sidebar'] {
+    border-color: var(--el-border-strong);
+    box-shadow: none;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Retrofuturism — chrome + gradient sweeps + retro display (7.3.40, DEFERRED
+   follow-up). The 70s/80s sci-fi / Outrun look: a synthwave HORIZON gradient
+   sweeps the canvas, and every surface wears a CHROME BEVEL (a bright top
+   highlight fading to a dark base) plus a diagonal reflective sheen, so panels
+   read as machined chrome rather than flat cards. The retro display read is the
+   `grotesk` type pairing (the style's defaultTypeId — wide geometric headlines),
+   NOT a `--font-*` override here (type is the independent data-type axis, 7.3.53).
+   Overrides ONLY shape/feel tokens — never a colour token (the data-palette
+   axis; the style wears whatever palette is active, so AA contrast is preserved
+   by construction). The metallic bevel/sheen lives in the MATERIAL LAYER below,
+   palette-DERIVED: every colour comes from color-mix()/var(--el-*) over the
+   active palette, or from the achromatic white/black KEYWORDS that make the
+   chrome read as lightness — never a raw hex hue (so the style stays disjoint
+   from the palette; enforced by tests/theme/styleRegistry.test.ts). The
+   differentiator vs Cybercore/Y2K: cybercore GLOWS neon on dark behind a tech
+   grid; retrofuturism is REFLECTIVE chrome over a sunset horizon. See
+   docs/styles/retrofuturism.md. ──────────────────────────────────────────── */
+[data-style='retrofuturism'] {
+  /* Silhouette — streamlined chrome capsules. --radius-pill stays untouched so
+     genuinely-circular affordances (avatars, status dots, the spinner) stay
+     round. Buttons + chips go FULL pill (chrome lozenges); panels stay softly
+     rounded. */
+  --radius-xs: 6px;
+  --radius-sm: 9px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 22px;
+  --radius-btn: 9999px; /* chrome-capsule buttons */
+  --radius-input: 12px;
+  --radius-card: 16px;
+  --radius-modal: 22px;
+  --radius-badge: 9999px; /* status chips stay pills — the streamlined register */
+  --radius-control: 10px;
+  --radius-kbd: 6px;
+
+  /* Elevation — a soft NEUTRAL lift only. The chrome bevel highlight + the
+     palette-derived colour glow are painted in the material layer below (no hue
+     may appear here); these neutral rgba shadows are the diffuse base the chrome
+     sits on. (rgba literals are neutral shadow ink — a cool near-black — not a
+     palette hue, so the token block stays colour-free.) */
+  --shadow-subtle: 0 1px 2px rgba(10, 12, 30, 0.06);
+  --shadow-card: 0 10px 26px -12px rgba(10, 12, 30, 0.22);
+  --shadow-elevated: 0 18px 40px -14px rgba(10, 12, 30, 0.28);
+  --shadow-modal: 0 28px 60px -18px rgba(10, 12, 30, 0.34);
+  --shadow-hero-mockup: 0 34px 74px -18px rgba(10, 12, 30, 0.4);
+
+  /* Density — confident and roomy; the chrome wants room to catch the light. */
+  --spacing-btn-x: 22px;
+  --spacing-btn-y: 11px;
+  --spacing-card-padding: 24px;
+  --spacing-control-x: 12px;
+  --spacing-control-y: 7px;
+  --height-control: 38px;
+
+  /* Motion — smooth and gliding; transitions ease, with a confident press. */
+  --transition-duration: 200ms;
+  --transition-slow: 320ms;
+  --active-scale: 0.97;
+
+  /* ── Material SCALARS — palette-AGNOSTIC (no hue, so no colour token here).
+     Consumed only by the [data-style='retrofuturism'] material rules below: the
+     synthwave SKY / HORIZON / GROUND band strengths + the neon GRID line alpha
+     and cell size (the Outrun floor), the chrome SPECULAR streak + bevel
+     highlight/shade (mixed from the achromatic white/black keywords), and the
+     palette-derived glow. Bold by design — this style is dark-FIRST (the neon
+     horizon + grid read strongest on a dark palette), so the strengths run high.
+     ── */
+  --retro-sky: 24%; /* the upper-sky wash (cool, from --el-link) */
+  --retro-horizon: 72%; /* the bright sun/horizon GLOW band — the signature */
+  --retro-ground: 26%; /* the warm ground wash rising from the bottom */
+  --retro-grid: 52%; /* the neon perspective-grid line alpha */
+  --retro-grid-size: 60px; /* the grid cell size before the perspective tilt */
+  --retro-spec: 44%; /* the bright diagonal SPECULAR streak across chrome */
+  --retro-bevel-light: 44%; /* the bright top metallic bevel highlight (white mix) */
+  --retro-bevel-shade: 28%; /* the dark base of the bevel (black mix) */
+  --retro-sheen: 18%; /* the quieter chrome edge tint (rail / input) */
+  --retro-glow: 32%; /* palette-derived colour glow on a card / popover */
+  --retro-glow-strong: 44%; /* the modal's / primary button's deeper glow */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Retrofuturism MATERIAL LAYER — palette-DERIVED chrome + horizon (7.3.40).
+   The same style-contract extension glassmorphism / aurora use: a style may own
+   its surface material in STYLE-SCOPED component rules as long as every colour
+   is DERIVED from the active palette via color-mix()/var() (or the achromatic
+   white/black keywords for pure metallic lightness) — never a raw hex hue — so
+   the style axis stays disjoint from the palette axis. These descendant-scoped
+   selectors are NOT the bare token block, so they never trip the colour-free
+   token-block test; they ARE read as material rules and must be palette-derived
+   (enforced by the "surface-material layer" test in styleRegistry.test.ts).
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* The canvas: the palette's page bg + a SYNTHWAVE SKY — a cool upper-sky wash, a
+   bright sun/HORIZON GLOW band ~62% down, and a warm ground wash rising from the
+   bottom. Every hue comes from the `--el-*` accent roles (NOT Tier-0
+   `--color-*`), so the sky re-tints with the active palette — the `data-palette`
+   axis overrides `--el-*`, never `--color-*`, which keeps the horizon orthogonal
+   to the palette. Painted as the body's own background (always behind content),
+   the proven 3D/Immersive atmosphere approach. */
+[data-style='retrofuturism'] body {
+  background-image:
+    linear-gradient(
+      180deg,
+      transparent 54%,
+      color-mix(in srgb, var(--el-highlight) var(--retro-horizon), transparent) 60.5%,
+      color-mix(in srgb, var(--el-accent) var(--retro-horizon), transparent) 62.5%,
+      transparent 69%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--el-link) var(--retro-sky), transparent),
+      transparent 46%
+    ),
+    linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--el-accent) var(--retro-ground), transparent),
+      transparent 42%
+    );
+  background-size: 100% 100%;
+  background-attachment: fixed;
+}
+
+/* The Outrun GRID FLOOR — a receding neon grid below the horizon. A separate
+   fixed layer (`body::after`) so it can be perspective-tilted and masked to fade
+   into the horizon; `z-index: -1` keeps it BEHIND all app content (above only the
+   body's own sky background), so it textures the floor without ever covering the
+   UI. Lines are `color-mix()` over `--el-*` accents (palette-derived, no hue of
+   their own); the mask uses the achromatic `black` keyword (no hex). The grid is
+   STATIC depth — like 3D/Immersive's atmosphere it carries the identity, so it is
+   not motion-gated (there is no animation to suppress). */
+[data-style='retrofuturism'] body::after {
+  content: '';
+  position: fixed;
+  left: -30%;
+  right: -30%;
+  bottom: 0;
+  height: 42vh;
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--el-highlight) var(--retro-grid), transparent) 0 2px,
+      transparent 2px var(--retro-grid-size)
+    ),
+    repeating-linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--el-accent) var(--retro-grid), transparent) 0 2px,
+      transparent 2px var(--retro-grid-size)
+    );
+  background-size: var(--retro-grid-size) var(--retro-grid-size);
+  transform: perspective(300px) rotateX(75deg);
+  transform-origin: bottom center;
+  -webkit-mask-image: linear-gradient(to top, black 2%, transparent 80%);
+  mask-image: linear-gradient(to top, black 2%, transparent 80%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Chrome container surfaces — OPAQUE (text AA is preserved against the base
+   surface the palette already tuned) carrying a diagonal SPECULAR streak (a
+   bright `white` light-bar swept across the panel, the reflective-metal read) AND
+   a vertical CHROME BEVEL (bright `white` top → dark `black` base — both
+   achromatic lightness, no hue), over a soft lift + a palette-derived colour
+   glow. The streak/bevel ride background-image over the opaque background-color,
+   so they never pull a surface far from its base tone; the inset top/bottom lines
+   are the lit chrome rim. Applied to EVERY panel via the global card-radius
+   utility (the 3D/Immersive coverage approach), not just the <Card> primitive. */
+[data-style='retrofuturism'] [data-surface='card'],
+[data-style='retrofuturism'] [data-surface='popover'],
+[data-style='retrofuturism'] .rounded-\(--radius-card\) {
+  background-color: var(--el-surface);
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 36%,
+      color-mix(in srgb, white var(--retro-spec), transparent) 49%,
+      transparent 62%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+      transparent 16%,
+      transparent 78%,
+      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+    );
+  box-shadow:
+    var(--shadow-card),
+    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, black 24%, transparent),
+    0 0 28px -8px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+}
+
+/* Modal panel — the same chrome, with a deeper palette glow so the dialog
+   separates cleanly from the grid behind it (and body text stays on the solid
+   surface). Overrides the card-radius rule above for the modal radius. */
+[data-style='retrofuturism'] [data-surface='modal'] {
+  background-color: var(--el-surface);
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 34%,
+      color-mix(in srgb, white var(--retro-spec), transparent) 49%,
+      transparent 64%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+      transparent 14%,
+      transparent 80%,
+      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+    );
+  box-shadow:
+    var(--shadow-modal),
+    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+    0 0 56px -14px color-mix(in srgb, var(--el-highlight) var(--retro-glow-strong), transparent);
+}
+
+/* The sidebar rail — opaque chrome with a quieter specular + bevel so it reads as
+   part of the polished-metal family, not a flat slab. */
+[data-style='retrofuturism'] [data-surface='sidebar'] {
+  background-color: var(--el-sidebar-bg);
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 40%,
+      color-mix(in srgb, white var(--retro-sheen), transparent) 50%,
+      transparent 60%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-sheen), transparent),
+      transparent 24%,
+      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+    );
+}
+
+/* Text inputs (a TYPING field) — a RECESSED chrome well: the bevel inverts (a
+   dark lip at the top) + an inset shadow, so the field reads as stamped INTO the
+   metal. Clickable controls (dropdown / select / picker triggers + buttons) get
+   the RAISED chrome below instead — matching the CTA — so a typing field stays
+   recessed while everything you click reads as a raised chrome control. */
+[data-style='retrofuturism'] [data-surface='input'] {
+  background-color: var(--el-page-bg);
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, black var(--retro-sheen), transparent) 0%,
+    transparent 34%
+  );
+  box-shadow: inset 0 1px 3px color-mix(in srgb, black var(--retro-glow), transparent);
+}
+
+/* ── EVERY clickable control reads as RETRO CHROME (7.3.40) ──────────────────
+   The whole point of the style: not just the `Button` primitive, but every
+   button-SHAPED control gets a machined-chrome treatment, so nothing sits flat.
+   Buttons render in THREE shapes across the app, so keying on `data-variant`
+   alone (only the `Button` primitive sets it) misses most of them — these rules
+   instead key on the UTILITY CLASSES the design system emits
+   (`.rounded-(--radius-btn)` + the fill / `.border` class), which are
+   tag-agnostic and catch all of:
+     • the `Button` primitive (`<button>` with `data-variant`),
+     • `<a>` / `<Link>` styled via `buttonVariants()` (NO `data-variant` — e.g.
+       the "View all issues" / empty-state links),
+     • hand-rolled `<button>` / `<a>` with `rounded-(--radius-btn) border` (the
+       /issues filter bar: Filter / Advanced / Saved / the Tree·List switcher),
+     • input-styled dropdown / select / picker triggers
+       (`button.rounded-(--radius-input)`),
+     • the SEGMENTED control (`components/ui/Segmented.tsx` — the board "Group by"
+       switch & friends: a `[role='group']` track + `aria-pressed` segments).
+   Two families: a FILLED CTA (accent / danger) keeps its hue under a metallic
+   sweep; everything else is NEUTRAL GUNMETAL steel. All palette-derived
+   (color-mix / var(--el-*)); the light/shade are the achromatic white/black
+   keywords (no hex). The gunmetal base is `--el-surface` DARKENED — on a light
+   palette the bare surface ≈ the page, so a white-highlight bevel over it is
+   invisible (flat white); a mid-grey gives the highlight AND the shade contrast,
+   so the metal reads on light AND dark. ───────────────────────────────────── */
+
+/* FILLED CTAs — accent (primary) keeps its hue under a diagonal specular glint +
+   a vertical metallic sweep + a palette glow. Keyed on the fill class so it
+   covers the `Button` primitive AND `buttonVariants()` anchors alike. */
+[data-style='retrofuturism'] .rounded-\(--radius-btn\).bg-\(--el-accent\) {
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 38%,
+      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+      transparent 62%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-spec), var(--el-accent)) 0%,
+      var(--el-accent) 46%,
+      color-mix(in srgb, black var(--retro-bevel-shade), var(--el-accent)) 100%
+    );
+  box-shadow:
+    var(--shadow-subtle),
+    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+    0 0 22px -6px color-mix(in srgb, var(--el-accent) var(--retro-glow-strong), transparent);
+}
+
+/* Danger CTAs — the same machined sweep, in the danger hue (so a destructive
+   button reads as red chrome, not a flat red, matching the accent CTA). */
+[data-style='retrofuturism'] .rounded-\(--radius-btn\).bg-\(--el-danger\) {
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 38%,
+      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+      transparent 62%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-spec), var(--el-danger)) 0%,
+      var(--el-danger) 46%,
+      color-mix(in srgb, black var(--retro-bevel-shade), var(--el-danger)) 100%
+    );
+  box-shadow:
+    var(--shadow-subtle),
+    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+    0 0 22px -6px color-mix(in srgb, var(--el-danger) var(--retro-glow-strong), transparent);
+}
+
+/* NEUTRAL STEEL chrome — every OTHER clickable control: bordered buttons + links
+   (secondary `Button`, secondary anchors, the hand-rolled filter-bar buttons, the
+   "View all" links) and the dropdown / select / picker triggers.
+   `:not([role='group'])` excludes the segmented TRACK (its own rule below); the
+   FILLED CTAs are excluded automatically (they carry a fill class, not `.border`).
+   The gunmetal base is set here because secondary controls ship `bg-transparent`. */
+[data-style='retrofuturism'] .rounded-\(--radius-btn\).border:not([role='group']),
+[data-style='retrofuturism'] button.rounded-\(--radius-input\) {
+  background-color: color-mix(in srgb, black 24%, var(--el-surface));
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 36%,
+      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+      transparent 64%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+      transparent 42%,
+      transparent 60%,
+      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+    );
+  box-shadow:
+    var(--shadow-subtle),
+    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, black 24%, transparent),
+    0 0 18px -8px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+}
+
+/* SEGMENTED control (the board "Group by" switch + every other `Segmented` use):
+   the classic metal segmented control — a RECESSED gunmetal TRACK (the
+   `[role='group']` wrapper) with the ACTIVE segment (`aria-pressed='true'`) raised
+   out of it as a chrome chip. Inactive segments stay transparent on the track. */
+[data-style='retrofuturism'] [role='group'].rounded-\(--radius-btn\) {
+  background-color: color-mix(in srgb, black 15%, var(--el-surface));
+  box-shadow: inset 0 1px 3px color-mix(in srgb, black var(--retro-glow), transparent);
+}
+[data-style='retrofuturism'] [role='group'] [aria-pressed='true'] {
+  background-color: color-mix(in srgb, black 24%, var(--el-surface));
+  background-image:
+    linear-gradient(
+      158deg,
+      transparent 36%,
+      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+      transparent 64%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+      transparent 42%,
+      transparent 60%,
+      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+    );
+  box-shadow:
+    var(--shadow-subtle),
+    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, black 24%, transparent);
+}
+
+/* Hover — brighten the steel a touch (the controls' own `hover:bg-*` utilities
+   are out-specified by the rules above, so restore a clear hover signal). */
+[data-style='retrofuturism']
+  .rounded-\(--radius-btn\).border:not([role='group']):hover:not(:disabled),
+[data-style='retrofuturism'] button.rounded-\(--radius-input\):hover:not(:disabled),
+[data-style='retrofuturism'] [role='group'] [aria-pressed='false']:hover:not(:disabled) {
+  background-color: color-mix(in srgb, black 14%, var(--el-surface));
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Style-preview vignette material canvas (7.3.37 / MOTIR-1050).
+   The StyleVignette preview specimen carries its OWN axis attribute on a
+   nested wrapper (`.style-vignette[data-style='…']`), so it cannot lean on the
+   `body`-scoped material canvas above — a glassmorphism / cybercore vignette
+   would otherwise float its frosted/glow surfaces over a flat fill. These rules
+   paint the same canvas onto the vignette's `.sv-canvas` layer, scoped to a
+   DIRECT child of the marked wrapper so an ancestor `<html data-style>` can't
+   bleed the wrong canvas into a differently-scoped vignette. Palette-DERIVED
+   (color-mix / currentColor over the active palette, never a raw hue) and
+   descendant-scoped — so styleRegistry.test.ts reads them as material rules,
+   not bare token blocks. */
+.style-vignette[data-style='glassmorphism'] > .sv-canvas {
+  background-image:
+    radial-gradient(
+      62% 70% at 12% -5%,
+      color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      58% 65% at 105% 6%,
+      color-mix(in srgb, var(--el-highlight) var(--glass-wash), transparent),
+      transparent 68%
+    ),
+    radial-gradient(
+      72% 78% at 50% 112%,
+      color-mix(in srgb, var(--el-link) var(--glass-wash), transparent),
+      transparent 72%
+    );
+}
+.style-vignette[data-style='cybercore-y2k'] > .sv-canvas {
+  background-color: var(--el-page-bg);
+  background-image:
+    linear-gradient(color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px);
+  background-size: 26px 26px;
+}
+/* Aurora's drifting ribbons, painted statically onto the preview swatch (the
+   gallery shows many vignettes at once, so the swatch holds a still frame of the
+   canvas — the live drift is reserved for the full `body`). Palette-derived. */
+.style-vignette[data-style='aurora'] > .sv-canvas {
+  background-color: var(--el-page-bg);
+  background-image:
+    radial-gradient(
+      58% 75% at 12% 0%,
+      color-mix(in srgb, var(--el-accent) var(--aurora-wash), transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      54% 70% at 92% 8%,
+      color-mix(in srgb, var(--el-highlight) var(--aurora-wash), transparent),
+      transparent 58%
+    ),
+    radial-gradient(
+      68% 82% at 62% 104%,
+      color-mix(in srgb, var(--el-link) var(--aurora-wash), transparent),
+      transparent 62%
+    ),
+    radial-gradient(
+      48% 64% at 34% 58%,
+      color-mix(in srgb, var(--el-info) var(--aurora-wash-soft), transparent),
+      transparent 55%
+    );
+}
+
+/* Retrofuturism's synthwave sky + horizon glow + a hint of the neon grid,
+   painted statically onto the preview swatch (the gallery shows many vignettes
+   at once, so the swatch holds a still frame — the live grid floor is reserved
+   for the full `body`). Palette-derived. */
+.style-vignette[data-style='retrofuturism'] > .sv-canvas {
+  background-color: var(--el-page-bg);
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--el-accent) var(--retro-grid), transparent) 0 1px,
+      transparent 1px 18px
+    ),
+    linear-gradient(
+      180deg,
+      transparent 56%,
+      color-mix(in srgb, var(--el-highlight) var(--retro-horizon), transparent) 64%,
+      transparent 72%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--el-link) var(--retro-sky), transparent),
+      transparent 50%
+    ),
+    linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--el-accent) var(--retro-ground), transparent),
+      transparent 46%
+    );
+  background-size:
+    18px 100%,
+    100% 100%,
+    100% 100%,
+    100% 100%;
+  background-position: center bottom;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   TIER 3 — Element tokens (--el-*)
+   Components reference these, NEVER --color-* directly. This is the
+   layer future palettes (data-palette="...") will override to swap the
+   look without touching component code.
+
+   The COMPLETE semantic element-token layer (finding #54). Every colour a
+   component renders flows through one of these — never a Tier-0 --color-*
+   nor an auto-generated --color-* utility (text-foreground / bg-surface /
+   text-muted-foreground), which bypass this swap layer. When a surface needs
+   a colour not exposed here, ADD the --el-* token (→ --color-*) and consume
+   that (the per-component growth pattern, notes.html mistake #20). All tokens
+   reference Tier-0 vars, so the Tier-1 dark block re-skins them automatically;
+   only concrete hexes (the sidebar hover lift) carry their own dark value.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* `[data-appearance-scope]` re-emits this whole Tier-3 layer onto a NESTED
+   element too — not just :root. `--el-*` reference `--color-*` and var() resolves
+   at the DECLARING element, so a subtree that overrides `--color-*` (via a nested
+   data-theme/-palette/-style) needs the `--el-*` re-declared locally to pick those
+   overrides up. Put `data-appearance-scope` on an element alongside its data-*
+   axes to theme that subtree independently of <html> (the onboarding design step,
+   MOTIR-1040, uses it to preview the user's PROJECT design without touching Motir).
+   Keep this selector list in sync if a new `--el-*` token is added below. */
+:root,
+[data-appearance-scope] {
+  /* ── Page ──────────────────────────────────────────────────────── */
+  --el-page-bg: var(--color-background);
+  --el-page-text: var(--color-foreground);
+  --el-page-text-muted: var(--color-muted-foreground);
+
+  /* ── 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-muted: var(--color-muted-foreground); /* muted / captions */
+  --el-text-tertiary: var(--color-steel); /* tertiary / footers */
+  --el-text-faint: var(--color-stone); /* faint labels */
+  --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. */
+  --el-accent: var(--color-primary-fill);
+  --el-accent-text: var(--color-primary-foreground);
+  --el-accent-on-surface: var(--color-primary);
+  --el-accent-pressed: var(--color-primary-pressed);
+  --el-highlight: var(--color-accent); /* brand pink — decorative accents */
+
+  /* ── Surfaces ──────────────────────────────────────────────────── */
+  --el-surface: var(--color-surface);
+  --el-surface-soft: var(--color-surface-soft);
+  --el-canvas: var(--color-canvas); /* recessed board behind raised cards (planning canvas) */
+  --el-surface-text: var(--color-foreground);
+  --el-muted: var(--color-muted); /* faint fill — chips, code, inverted text */
+
+  /* ── Borders ───────────────────────────────────────────────────── */
+  --el-border: var(--color-border); /* default hairline */
+  --el-border-soft: var(--color-hairline-soft);
+  --el-border-strong: var(--color-hairline-strong);
+
+  /* ── Links ─────────────────────────────────────────────────────── */
+  --el-link: var(--color-link);
+  --el-link-pressed: var(--color-link-pressed);
+
+  /* ── Semantic status ───────────────────────────────────────────── */
+  --el-danger: var(--color-destructive);
+  --el-danger-text: var(--color-destructive-foreground);
+  --el-success: var(--color-success);
+  --el-warning: var(--color-warning);
+  --el-info: var(--color-info);
+
+  /* ── Pastel tints (Pill tones, feature surfaces) ───────────────── */
+  --el-tint-peach: var(--color-tint-peach);
+  --el-tint-rose: var(--color-tint-rose);
+  --el-tint-mint: var(--color-tint-mint);
+  --el-tint-lavender: var(--color-tint-lavender);
+  --el-tint-sky: var(--color-tint-sky);
+  --el-tint-yellow: var(--color-tint-yellow);
+
+  /* ── Status hues (MOTIR-1273 · 1266.2 — un-collapse the workflow statuses) ──
+     Each workflow status renders its dot/icon in its OWN hue, so in_review /
+     blocked / cancelled differentiate from the three lifecycle CATEGORIES the
+     filter dots used to collapse them onto. Maps to a Tier-0 --color-* (the
+     gold-standard --el-chart-* / --el-type-* pattern), so every palette re-skins
+     them automatically through its --color-* overrides — no per-palette block
+     needed (the card's "+ 10 palette blocks" is satisfied by that indirection;
+     verified slate ≠ stone and info/warning/destructive/success/primary are all
+     palette-defined across all 10). The status DOT uses the hue at full strength;
+     a status CHIP bg = color-mix(var(--el-status-X) 14%, var(--el-surface)) with
+     --el-text-strong (design/design-system/design-notes.md §A). Keys grounded in
+     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-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) */
+  --el-status-cancelled: var(--color-steel); /* terminal grey — not red (cancel ≠ error) */
+
+  /* ── Priority hues (MOTIR-1273 · 1266.2 — a 5-step diverging ramp) ──
+     Un-collapses lib/issues/priorityMeta.ts, where `medium` AND `lowest` were
+     both neutral grey (the exact "can't differentiate" complaint). red → orange
+     → mid-slate → blue → faint-stone: two DISTINCT greys for medium / lowest,
+     kept legible by the redundant ArrowUp / Minus / ArrowDown icon (AA, finding
+     #35). The Pill `priority` tone tints these over --el-surface
+     (design/design-system/design-notes.md §B). */
+  --el-priority-highest: var(--color-destructive); /* red */
+  --el-priority-high: var(--color-warning); /* orange */
+  --el-priority-medium: var(--color-slate); /* mid slate (un-collapsed) */
+  --el-priority-low: var(--color-info); /* blue */
+  --el-priority-lowest: var(--color-stone); /* faint stone (un-collapsed) */
+
+  /* ── Semantic SURFACES (MOTIR-1273 · 1266.2 — banner / callout fills) ──
+     Names the banner/callout fills components reached for as raw --el-tint-*
+     (the FormField error box, the public danger / warning banners). Each = a
+     tint base + a strong-ink text token, AA-safe (charcoal-on-tint clears
+     ~10:1 both themes, finding #35). notice-info / callout / success are
+     defined AHEAD of their dedicated surfaces (the spec's "NEW (no impl)"
+     pattern; design/design-system/design-notes.md §C). */
+  --el-danger-surface: var(--color-tint-rose);
+  --el-danger-surface-text: var(--color-charcoal);
+  --el-warning-surface: var(--color-tint-peach);
+  --el-warning-text: var(--color-charcoal); /* ink on the warning surface */
+  --el-success-surface: var(--color-tint-mint);
+  --el-notice-info-bg: var(--color-tint-sky);
+  --el-notice-info-border: var(--color-info);
+  --el-callout-bg: var(--color-tint-lavender);
+  --el-callout-text: var(--color-charcoal);
+
+  /* ── Identity hues (MOTIR-1274 · 1266.3 — un-collapse the shared --el-tint-* pool) ──
+     Roles / org-roles / privacy / labels / avatars each got a DEDICATED token so a
+     palette can tune them apart (today they all pulled from the same six --el-tint-*,
+     so a label, a role and an avatar could not diverge). Every token DEFAULTS to
+     today's exact tint → zero visual change in the motir base; each maps to a Tier-0
+     --color-* so palettes + the dark block re-skin them for free (no per-palette
+     block — the gold-standard --el-chart-* / --el-type-* indirection). This block
+     also DECOUPLES the --el-type-* MISUSE: NotificationRow event badges, the
+     ProjectAvatar mono tile and the OrgUsageClient model dots were borrowing
+     work-item-KIND hues for non-type meaning; they get their own --el-notif-* /
+     --el-avatar-fallback / --el-model-* tokens at the SAME hues (still zero change).
+     design/design-system/design-notes.md §D. */
+  /* Roles / org-roles / privacy — Pill memberRole/orgRole/tone (today hardcoded in
+     Pill.tsx CVA). admin→lavender, member→sky, viewer→mint; owner→lavender; private→
+     lavender, public→sky (public defined AHEAD — no rendered "public" badge yet). */
+  --el-role-admin: var(--color-tint-lavender);
+  --el-role-member: var(--color-tint-sky);
+  --el-role-viewer: var(--color-tint-mint);
+  --el-org-role-owner: var(--color-tint-lavender);
+  --el-org-role-admin: var(--color-tint-sky);
+  --el-org-role-member: var(--color-tint-mint);
+  --el-privacy-private: var(--color-tint-lavender);
+  --el-privacy-public: var(--color-tint-sky);
+  /* Label ramp — lib/labels/labelTint.ts hashes the name → 1..6 in the fixed order
+     peach,rose,mint,lavender,sky,yellow (the seed-loader family; matches shipped). */
+  --el-label-1: var(--color-tint-peach);
+  --el-label-2: var(--color-tint-rose);
+  --el-label-3: var(--color-tint-mint);
+  --el-label-4: var(--color-tint-lavender);
+  --el-label-5: var(--color-tint-sky);
+  --el-label-6: var(--color-tint-yellow);
+  /* Avatar ramp — KEEP the named keys (peach…yellow): lib/projects/avatar.ts persists
+     project.avatarColor ∈ these strings, so numbering them would break stored rows
+     (spec §7.1, rung-2 migration safety). The fallback fixes --el-type-* misuse #2 —
+     the mono initials tile keeps its blue but stops borrowing --el-type-task. */
+  --el-avatar-peach: var(--color-tint-peach);
+  --el-avatar-rose: var(--color-tint-rose);
+  --el-avatar-mint: var(--color-tint-mint);
+  --el-avatar-lavender: var(--color-tint-lavender);
+  --el-avatar-sky: var(--color-tint-sky);
+  --el-avatar-yellow: var(--color-tint-yellow);
+  --el-avatar-fallback: var(--color-info); /* mono tile — was --el-type-task (= --color-info) */
+  /* Notification event badges (decouple --el-type-* misuse #2; same hues → zero change).
+     mentioned keeps the accent fill it already used — --el-accent resolves to
+     --color-primary-fill (purple), NOT --color-accent (pink); the spec's base column
+     read --color-accent but its note said "alias for consistency", so per §2
+     zero-visual-change this maps to the SHIPPED value. */
+  --el-notif-mentioned: var(--color-primary-fill); /* the accent fill (matches prior --el-accent) */
+  --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 */
+  /* 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) */
+  --el-model-sonnet: var(--color-info);
+  --el-model-haiku: var(--color-success);
+  --el-model-deepseek: var(--color-accent-teal); /* was --el-type-subtask */
+
+  /* ── Icon + text roles (MOTIR-1275 · 1266.4 — split the --el-text-muted /
+     --el-text triple-duty) ──
+     Icons and overlines/subtitles were borrowing the body-copy text tokens
+     (--el-text-muted for every icon + caption, --el-text for the tooltip fill),
+     so a palette could not tune an icon apart from prose. These give each role
+     its own token mapped to the SAME Tier-0 neutral it resolves to today, so
+     every palette + the dark block re-skin them for free (the gold-standard
+     --el-chart-* / --el-type-* indirection — no per-palette block). icon-btn /
+     icon-heading are defined AHEAD of an explicit consumer (the spec's
+     "NEW (no impl)" pattern; buttons inherit currentColor today).
+     design/design-system/design-notes.md §E. */
+  --el-icon-muted: var(--color-muted-foreground); /* inactive nav / chevron / close */
+  --el-icon-active: var(--color-primary); /* active nav icon (was --el-accent-on-surface) */
+  --el-icon-btn: var(--color-foreground); /* explicit button-icon ink (usually currentColor) */
+  --el-icon-heading: var(--color-charcoal); /* an icon beside a heading */
+  --el-icon-field: var(--color-muted-foreground); /* search / chevron / calendar in inputs */
+  --el-text-eyebrow: var(--color-muted-foreground); /* uppercase-mono overline */
+  --el-text-subtitle: var(--color-slate); /* lead paragraph (Modal / EmptyState desc) */
+  --el-text-helper: var(--color-muted-foreground); /* form hint (was --el-text-muted) */
+  --el-text-identifier: var(--color-slate); /* monospace MOTIR-123 keys (was --el-text-secondary) */
+
+  /* ── Component-surface primitives (MOTIR-1275 · 1266.4) ──
+     Names the control surfaces that were overloading --el-surface (option
+     highlight / chip fill / switch knob), --el-border(-strong) (control vs
+     panel edge) and --el-text (tooltip fill). Each defaults to the exact
+     Tier-0 --color-* the component renders today → zero visual change in the
+     motir base; a palette can now tune each apart. Two deliberate
+     spec-vs-shipped reconciliations (rung-2), documented in §F of the notes:
+     (1) --el-count-bg maps to --color-muted, NOT the spec's tentative
+     --color-surface — board count badges render ON an --el-surface column, so
+     surface would erase them; muted is the shipped fill (and identical to
+     surface in dark). (2) --el-overlay-scrim is the lone concrete-value token
+     (no --color-* base), so it carries an explicit dark companion below; light
+     == today's bg-black/40, dark DEEPENS to ~65% for a legible scrim.
+     design/design-system/design-notes.md §F. */
+  --el-tooltip-bg: var(--color-foreground); /* inverted tooltip fill (was --el-text) */
+  --el-tooltip-text: var(--color-background); /* text on the tooltip (was --el-text-inverted) */
+  --el-switch-on: var(--color-primary-fill); /* checked track (was --el-accent) */
+  --el-switch-knob: var(--color-surface); /* the thumb (was --el-surface) */
+  --el-option-active-bg: var(--color-muted); /* highlighted listbox option (was --el-surface) */
+  --el-overlay-scrim: #00000066; /* modal/dialog scrim — concrete (light); dark companion below */
+  --el-chip-bg: var(--color-surface); /* neutral chip fill (tinted chips keep their tint) */
+  --el-chip-border: var(--color-border); /* neutral chip edge */
+  --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 */
+  --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) */
+
+  /* ── Issue-type hues (work-item kind identity — finding #54) ────── */
+  /* The colour the UI was missing: each issue type renders its icon in its
+     own hue, matching ISSUE_TYPE_META.colorToken. */
+  --el-type-epic: var(--color-accent); /* pink */
+  --el-type-story: var(--color-accent-green);
+  --el-type-task: var(--color-info);
+  --el-type-bug: var(--color-destructive);
+  --el-type-subtask: var(--color-accent-teal);
+
+  /* ── Work-item TYPE hues (the work-NATURE palette, Story 2.7 · 2.7.4) ────
+     Parallel to the per-KIND hues above: the ten fixed `WorkItemType` members
+     each render their icon/chip in their own hue (matches
+     lib/issues/workItemTypeMeta.ts). NO new Tier-0 colour needed — the seven
+     "produces an artifact" types take the seven saturated hues; the three
+     "meta / admin" types (decision, manual, chore) take the three greys
+     (desaturation is semantically apt). Each maps to a Tier-0 var, so the
+     [data-theme="dark"] block re-skins them automatically. The chip puts the
+     hue in a color-mix tint BACKGROUND with --el-text-strong text (AA,
+     finding #35); never a page-level tint. */
+  --el-type-code: var(--color-info); /* blue   — implementation */
+  --el-type-design: var(--color-accent); /* pink   — UI/UX design */
+  --el-type-test: var(--color-success); /* green  — automated tests */
+  --el-type-content: var(--color-accent-teal); /* teal   — copy / docs / translate */
+  --el-type-research: var(--color-primary); /* purple — spike / investigation */
+  --el-type-review: var(--color-accent-orange); /* orange — QA / review */
+  --el-type-deploy: var(--color-destructive); /* red    — infra / ops / release */
+  --el-type-decision: var(--color-charcoal); /* ink    — decision record */
+  --el-type-manual: var(--color-stone); /* stone  — human provisioning */
+  --el-type-chore: var(--color-slate); /* slate  — housekeeping */
+
+  /* ── 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
+     vars, so the Tier-1 dark block re-skins them automatically. The pair
+     committed/completed is distinguished by TEXT label too, never colour
+     alone (finding #35). */
+  --el-chart-guideline: var(--color-stone); /* burndown ideal line (dashed) */
+  --el-chart-actual: var(--color-primary); /* burndown actual remaining */
+  --el-chart-scope: var(--color-warning); /* scope-change marker */
+  --el-chart-committed: var(--color-info); /* velocity committed bar */
+  --el-chart-completed: var(--color-success); /* velocity completed bar */
+  --el-chart-average: var(--color-charcoal); /* velocity average (dashed ref) */
+  --el-chart-plot: var(--color-surface-soft); /* plot background fill */
+  --el-chart-grid: var(--color-border); /* gridlines */
+  --el-chart-axis: var(--color-steel); /* axis line + tick labels */
+  /* Story 6.3 dashboards (6.3.4) — the categorical donut ramp + the
+     created/resolved series + the deficit/surplus difference fills. Same
+     growth pattern: map to existing Tier-0 vars, so the dark block re-skins
+     them automatically. The donut cycles cat-1..7; "None"/unset is always
+     cat-none (neutral grey); created/resolved read by line + legend label,
+     never colour alone (finding #35). */
+  --el-chart-cat-1: var(--color-primary); /* distribution donut segment 1 */
+  --el-chart-cat-2: var(--color-info); /* segment 2 */
+  --el-chart-cat-3: var(--color-success); /* segment 3 */
+  --el-chart-cat-4: var(--color-warning); /* segment 4 */
+  --el-chart-cat-5: var(--color-accent-teal); /* segment 5 */
+  --el-chart-cat-6: var(--color-accent); /* segment 6 */
+  --el-chart-cat-7: var(--color-charcoal); /* segment 7 (ramp length) */
+  --el-chart-cat-none: var(--color-stone); /* the "None" / unset group */
+  --el-chart-created: var(--color-info); /* created-vs-resolved: created line */
+  --el-chart-resolved: var(--color-success); /* created-vs-resolved: resolved line */
+  --el-chart-deficit: var(--color-destructive); /* fill where created > resolved */
+  --el-chart-surplus: var(--color-success); /* fill where resolved > created */
+  --el-chart-age: var(--color-warning); /* average-age bar (8.8.13 — aging backlog) */
+  --el-chart-resolution: var(--color-info); /* resolution-time bar (8.8.13 — throughput) */
+  /* Sprint CYCLE GRAPH series (Story 8.14 — Linear scope-vs-completed). A
+     collision-free --el-chart-cycle-* family: the bare --el-chart-completed /
+     -started / -target names are taken (velocity / old burndown), so reusing
+     them would silently re-skin those charts. The --el-chart-plot/grid/axis
+     scaffold is reused unchanged. */
+  --el-chart-cycle-scope: var(--color-stone); /* live total scope (gray) */
+  --el-chart-cycle-started: var(--color-warning); /* started / in progress (amber) */
+  --el-chart-cycle-completed: var(--color-info); /* completed (solid blue) */
+  --el-chart-cycle-target: var(--color-info); /* ideal remaining (blue, dotted) */
+
+  /* ── Public projects (Story 6.12 · public read-only view) ──────────
+     New --el-* roles 6.12.4/6.12.6/6.12.7 add here, each mapped to an
+     existing Tier-0 value (the per-component token-growth pattern). The
+     [data-theme="dark"] block re-skins them automatically because every
+     mapping is a --color-* var the Tier-1 block already flips (no concrete
+     hex). Per design/public-projects/design-notes.md "Colour roles". */
+  --el-public-banner-bg: var(--color-tint-sky); /* "you're viewing a public project" framing */
+  --el-public-banner-text: var(--color-charcoal); /* AA ~10:1 on the sky tint */
+  --el-vote-bg: var(--color-tint-lavender); /* upvote control resting fill (6.12.7) */
+  --el-vote-active-bg: var(--color-primary); /* voted: accent fill */
+  --el-vote-active-text: var(--color-primary-foreground);
+  --el-roadmap-submitted: var(--color-tint-peach);
+  --el-roadmap-planned: var(--color-tint-lavender);
+  --el-roadmap-progress: var(--color-tint-sky);
+  --el-roadmap-done: var(--color-tint-mint);
+  /* ── Onboarding / canvas (Story 1266.6 · MOTIR-1277) ───────────────
+     Per-element hues for the onboarding canvas: revision-diff kind chips
+     (RevisionDiff), the discovery chat bubbles (DiscoveryChatRail), the
+     planning-canvas edges (PlanningCanvas), and the station tier tile
+     (StationNode). Each maps to the exact Tier-0 --color-* it renders
+     today (zero visual change vs the borrowed --el-tint-* / --el-accent /
+     --el-border), so a palette re-skins them via its --color-* override
+     and [data-theme="dark"] flips them — no per-palette / dark entry.
+     Per design/design-system/design-notes.md §H. NB: the card's "wire
+     --el-roadmap-* into StationNode" is corrected there — roadmap stays
+     scoped to the PUBLIC roadmap; the canvas gets its own
+     --el-station-tier-* family (a different semantic concept). */
+  --el-diff-added: var(--color-tint-mint);
+  --el-diff-removed: var(--color-tint-rose);
+  --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 */
+  --el-station-tier-discovery: var(--color-tint-sky);
+  --el-station-tier-vision: var(--color-tint-lavender);
+  --el-station-tier-feasibility: var(--color-tint-mint);
+  --el-station-tier-validation: var(--color-tint-peach);
+  /* the Overview hero's soft corner washes (decorative tints only; all text
+     sits on --el-page-bg, never on the wash, so AA holds — finding #35) */
+  --el-hero-wash-a: var(--color-tint-lavender);
+  --el-hero-wash-b: var(--color-tint-sky);
+  /* "Building in public" (Story 6.17.2/6.17.4) — the reframed `public` access
+     option glyph + the "Live"/status badge. Tier-0 flips (--color-tint-lavender
+     and --color-charcoal both re-skin under [data-theme="dark"]) re-skin these
+     automatically, so they live in Tier 3 once with no dark-block entry. */
+  --el-build-bg: var(--color-tint-lavender); /* badge / reframed-option tint */
+  --el-build-text: var(--color-charcoal); /* AA ~10:1 on the lavender tint, both themes */
+  --el-build-glyph: var(--color-primary); /* the megaphone accent glyph */
+
+  /* ── Interaction / agile surfaces (MOTIR-1276 · 1266.5) ──────────────
+     Un-collapses the dnd / selection / overdue / accent meanings that all
+     rode --el-tint-lavender / --el-accent / --el-text, so a palette can tune a
+     drop target apart from a selected row apart from an overdue date. Each
+     maps to a --color-* → zero base-palette change AND every palette + dark
+     re-skins for free (§1; the chart/type ramp pattern). The previously
+     undifferentiated meanings (selection vs drop; overdue vs a future date)
+     now read distinctly; the rest default to today's exact value.
+     design/design-system/design-notes.md §G. */
+  --el-selection-bg: var(--color-tint-sky); /* selected row/card — sky, NOT the drop lavender */
+  --el-droptarget-bg: var(--color-tint-lavender); /* dnd drop-zone fill (shipped) */
+  --el-board-column-accent: var(--color-primary); /* drop ring / column border */
+  --el-overdue: var(--color-destructive); /* past-due date */
+  --el-due-soon: var(--color-warning); /* due today / within 3 days */
+  --el-sprint-accent: var(--color-tint-lavender); /* sprint-header emphasis (shipped) */
+  --el-epic-accent: var(--color-accent); /* pink epic identity (aliases --el-type-epic) */
+  --el-archived-pill-bg: var(--color-muted); /* inactive "Archived" badge fill */
+  --el-archived-pill-text: var(--color-slate); /* AA-safe ink on the muted fill */
+  --el-auth-wash: var(--color-tint-sky); /* sign-in background wash (text on the card) */
+  --el-tabnav-track: var(--color-surface); /* tab-bar track (Segmented / PublicTabNav) */
+  --el-tabnav-active: var(--color-primary); /* active-tab glyph (== --el-accent-on-surface) */
+  --el-card-icon-bg: var(--color-muted); /* hub/settings card icon tile */
+  --el-card-icon-fg: var(--color-primary); /* the icon inside that tile */
+
+  /* ── Code/mono (used by /tokens reference route) ───────────────── */
+  --el-code-bg: var(--color-muted);
+  --el-code-text: var(--color-charcoal);
+
+  /* ── App shell — sidebar (Subtask 1.5.2). The shell mockup paints the
+     sidebar rail on $--surface and the content area on $--background; the
+     active nav row inverts that (a $--background row against the $--surface
+     rail) so the current page reads as inset into the page canvas. ──── */
+  --el-sidebar-bg: var(--color-surface); /* the rail — surface, distinct from the page canvas */
+  --el-sidebar-border: var(--color-hairline); /* the 1px seam between rail and content */
+  --el-sidebar-item-bg-hover: #eeede9; /* subtle hover lift — one shade darker than surface (light) */
+  --el-sidebar-item-bg-active: var(
+    --color-background
+  ); /* active row = canvas inset into the rail */
+}
+
+/* Dark-mode lift for the sidebar hover token. The other three --el-sidebar-*
+   tokens resolve through --color-* vars the Tier-1 dark block already flips;
+   only the hover shade is a concrete hex, so it carries its own dark value —
+   one shade *lighter* than the dark surface, mirroring the light recipe's
+   one-shade-darker. */
+[data-theme='dark'] {
+  --el-sidebar-item-bg-hover: #222222;
+  /* 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%,
+     == the prior bg-black/40) lives in the :root block above. */
+  --el-overlay-scrim: #000000a6;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   AXIS 1 (COLOUR) — data-palette overrides (Subtask 7.3.48)
+   Registry: lib/theme/palettes.ts. A named palette re-skins the app by
+   OVERRIDING the Tier-3 --el-* layer above — and ONLY colour (--el-* /
+   --color-*), NEVER a shape/feel token (radius / spacing / shadow / sizing /
+   motion / type). That is the data-style axis's job; keeping the two disjoint
+   is what makes "style × palette" a product of two independent choices.
+
+   v1 ships exactly one palette — `motir` (Yue, 2026-06-17: "use Motir's colour
+   palette for the v1"). It IS the Tier-3 base, so — exactly like the
+   `warm-editorial` base style — it needs NO override block: setting
+   data-palette="motir" simply leaves the base --el-* tokens in force. Each
+   later "Palette: …" subtask ADDS its `[data-palette='<id>']` block here,
+   overriding --el-* (light + dark via [data-palette='<id>'][data-theme='dark']
+   where the palette diverges from the base flip), and authors its
+   docs/palettes/<id>.md — mirroring how the per-style subtasks add a
+   [data-style] block on the other axis.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* `motir` needs no block — it is the Tier-3 base above. Each later palette
+   ADDS its [data-palette='<id>'] override here (light + dark companion). */
+
+/* ── Palette: Cobalt (data-palette="cobalt") — Subtask 7.3.49 ───────────────
+   A cool, calm, trustworthy INSTITUTIONAL-BLUE re-skin: slate-cool surfaces, a
+   confident cobalt primary/accent, a cool cyan highlight, cooled pastel tints.
+   Mood anchored in getdesign.md's Coinbase (clean institutional blue) / IBM
+   (structured blue) analysis; the actual light/dark ramps + UI-state steps are
+   built from Radix Colors (Blue / Indigo / Slate / Red / Jade / Amber) — the
+   accessibility-first 12-step scales designed for UI states.
+
+   This block re-skins by overriding the Tier-0 --color-* SOURCE the Tier-3
+   --el-* layer references (exactly how the [data-theme='dark'] block works), so
+   every --el-* token — surfaces, ink, accent, links, semantic, tints, and
+   work-item type hues — re-skins coherently with no per-token churn. It sets
+   ONLY colour tokens (--color-* / --el-*), NEVER a shape/feel token (radius /
+   spacing / shadow / sizing / motion / type) — that is the independent
+   data-style axis (paletteRegistry.test.ts enforces the disjointness).
+
+   Accessibility: every text-on-surface, white-on-fill, link, and chip-tint
+   pairing clears WCAG AA (≥4.5; ≥3.0 for icon/UI hues) in BOTH light and dark —
+   verified numerically + by rendered specimen, never eyeballed. See
+   docs/palettes/cobalt.md for the colour-role reference. */
+[data-palette='cobalt'] {
+  /* brand & primary — confident cobalt (Radix Indigo family) */
+  --color-primary: #3a57cf; /* cobalt AS text/icon on a surface (AA on white/surface) */
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #2b44ad;
+  --color-primary-fill: #3650c2; /* fill behind white labels (white-on AA) */
+
+  /* surfaces — white canvas over cool slate sections */
+  --color-background: #ffffff;
+  --color-foreground: #0f1b2e; /* cool navy ink */
+  --color-surface: #eef2f8; /* cool slate section background */
+  --color-surface-soft: #f7f9fc; /* quieter cool division */
+
+  /* text scale — cool slate hierarchy */
+  --color-ink: #0f1b2e;
+  --color-charcoal: #1e2c40; /* body emphasis / AA-safe text on tints */
+  --color-slate: #46556b; /* secondary text */
+  --color-steel: #586a82; /* tertiary / footer */
+  --color-stone: #8493a6; /* faint labels */
+  --color-muted: #eef2f8;
+  --color-muted-foreground: #5b6a7e; /* captions — AA on white + surfaces */
+
+  /* borders — cool slate hairlines */
+  --color-hairline: #d8e0ea;
+  --color-hairline-soft: #e6ebf2;
+  --color-hairline-strong: #bcc7d6;
+  --color-border: #d8e0ea;
+
+  /* accent secondary — a cool cyan highlight (replaces the warm brand pink) */
+  --color-accent: #0e93a8; /* cool cyan — decorative / epic & design type hue */
+  --color-accent-orange: #c2410c;
+  --color-accent-teal: #0e8f86;
+  --color-accent-green: #18874c; /* cooled green */
+
+  /* card tints — cooled pastel washes (6 distinct feature hues) */
+  --color-tint-peach: #fde7d4;
+  --color-tint-rose: #fbe0ea;
+  --color-tint-mint: #d6f0e2;
+  --color-tint-lavender: #e4e8fb; /* cool indigo tint */
+  --color-tint-sky: #dbeafb; /* cool blue tint — the most-used wash */
+  --color-tint-yellow: #fbf2d2;
+
+  /* semantic */
+  --color-success: #18874c;
+  --color-warning: #c2410c;
+  --color-destructive: #d3322f; /* white-on AA */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #0d63b8;
+
+  /* links — a cleaner sky-blue, distinct from the cobalt primary (AA on the
+     soft surface a hovered row paints, too) */
+  --color-link: #0d63b8;
+  --color-link-pressed: #0a4f95;
+
+  /* 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;
+}
+
+/* Cobalt — dark companion. A cool navy canvas (not the base near-black);
+   brightened cobalt/link hues so they read AS text on the dark surface, and a
+   darker accent fill so white labels still clear AA. */
+[data-palette='cobalt'][data-theme='dark'] {
+  --color-background: #0b111d; /* deep cool navy canvas */
+  --color-foreground: #e7edf6;
+  --color-surface: #131d2c;
+  --color-surface-soft: #0f1825;
+
+  --color-ink: #e7edf6;
+  --color-charcoal: #d3deec;
+  --color-slate: #a0b1c6;
+  --color-steel: #7e90a6;
+  --color-stone: #5f6f84;
+  --color-muted: #131d2c;
+  --color-muted-foreground: #94a4ba;
+
+  --color-hairline: #243245;
+  --color-hairline-soft: #1a2433;
+  --color-hairline-strong: #324258;
+  --color-border: #243245;
+
+  /* cobalt — brightened as text on navy; fill darkened for white-label AA */
+  --color-primary: #7e98f2;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #3a51b8;
+  --color-primary-fill: #4a63cf;
+
+  /* cooled tints, dimmed for the navy canvas */
+  --color-tint-peach: #2f2317;
+  --color-tint-rose: #301a25;
+  --color-tint-mint: #15281f;
+  --color-tint-lavender: #1c2238;
+  --color-tint-sky: #13243a;
+  --color-tint-yellow: #2b2814;
+
+  --color-accent: #2ec3d6; /* bright cool cyan highlight on dark */
+  --color-accent-orange: #f08a4b;
+  --color-accent-teal: #2db6a8;
+  --color-accent-green: #34c578;
+
+  --color-success: #34c578;
+  --color-warning: #f08a4b;
+  --color-destructive: #d83847; /* white-on AA on the navy canvas */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #6fb3ff;
+
+  --color-link: #6fb3ff;
+  --color-link-pressed: #93c5ff;
+
+  /* sidebar hover — one shade lighter than the dark cool surface */
+  --el-sidebar-item-bg-hover: #1c2840;
+}
+
+/* ── Palette: Graphite (data-palette="graphite") — Subtask 7.3.51 ───────────
+   A stark, editorial, COOL-NEUTRAL MONOCHROME re-skin — the cool foil to
+   Motir's warmth: true greyscale surfaces + ink on a clean Radix Slate scale,
+   a single restrained accent. The accent is expressed two ways, exactly as
+   Vercel / Linear do it: the primary CTA is a high-contrast INK fill (near-black
+   on light, near-white on dark — the monochrome statement), while the one
+   chromatic accent — a restrained cool blue — carries links, active/selected
+   states, focus, and the decorative highlight. Surfaces, ink, and borders are
+   pure cool greyscale; semantic (danger/success/warning/info) and work-item
+   type hues stay chromatic-but-cooled so status & kind remain legible (the
+   finding-#54 guard — never collapse the UI to grey + one colour).
+
+   Mood + accent hue anchored in getdesign.md's Vercel (black-and-white
+   precision) / Linear (ultra-minimal) analysis; the actual light/dark ramps +
+   UI-state steps are built from Radix Colors (Slate / Blue / Red / Grass /
+   Amber / Teal) — the accessibility-first 12-step scales designed for UI
+   states. Slate is the cool neutral closest to the brand anchor.
+
+   This block re-skins by overriding the Tier-0 --color-* SOURCE the Tier-3
+   --el-* layer references (exactly how the [data-theme='dark'] block works), so
+   every --el-* token — surfaces, ink, accent, links, semantic, tints, and
+   work-item type hues — re-skins coherently with no per-token churn. It sets
+   ONLY colour tokens (--color-* / --el-*), NEVER a shape/feel token (radius /
+   spacing / shadow / sizing / motion / type) — that is the independent
+   data-style axis (paletteRegistry.test.ts enforces the disjointness).
+
+   Accessibility: every text-on-surface, white-on-fill, link, and chip-tint
+   pairing clears WCAG AA (≥4.5; ≥3.0 for icon/UI hues) in BOTH light and dark —
+   verified numerically + by rendered specimen, never eyeballed. See
+   docs/palettes/graphite.md for the colour-role reference. */
+[data-palette='graphite'] {
+  /* brand & primary — the high-contrast INK CTA + the single cool-blue accent.
+     --color-primary is the accent AS text/icon/focus on a surface (the cool
+     blue, AA on white & the slate surface); --color-primary-fill is the CTA
+     FILL behind white labels — near-black ink, the monochrome statement. */
+  --color-primary: #155bc4; /* cool-blue accent — links / active / focus / icon */
+  --color-primary-foreground: #ffffff; /* white labels on the ink fill */
+  --color-primary-pressed: #2b2f35; /* pressed ink CTA (one step off the fill) */
+  --color-primary-fill: #1a1d21; /* near-black graphite CTA fill (white-on AA) */
+
+  /* surfaces — pure white canvas over cool slate sections (Radix Slate) */
+  --color-background: #ffffff; /* stark white canvas */
+  --color-foreground: #16191d; /* cool near-black ink */
+  --color-surface: #eef0f3; /* cool slate section background */
+  --color-surface-soft: #f8f9fa; /* quieter cool division */
+
+  /* text scale — cool slate hierarchy (Radix Slate 11→9 below body) */
+  --color-ink: #16191d;
+  --color-charcoal: #20242a; /* body emphasis / AA-safe text on tints */
+  --color-slate: #565c64; /* secondary text — AA on white + surfaces */
+  --color-steel: #6b7079; /* tertiary / footer */
+  --color-stone: #8a8f98; /* faint labels (decorative, sub-AA — as the base) */
+  --color-muted: #eef0f3;
+  --color-muted-foreground: #5d636b; /* captions — AA on white + surfaces */
+
+  /* borders — cool slate hairlines */
+  --color-hairline: #e2e4e9;
+  --color-hairline-soft: #ebedf0;
+  --color-hairline-strong: #c8ccd3;
+  --color-border: #e2e4e9;
+
+  /* accent secondary — the cool-blue highlight replaces the warm brand pink */
+  --color-accent: #2563c9; /* cool-blue decorative highlight / epic & design hue */
+  --color-accent-orange: #c2410c; /* review hue / warning — cooled */
+  --color-accent-teal: #0e8f86; /* subtask / content hue */
+  --color-accent-green: #18804a; /* story hue / success — cooled */
+
+  /* card tints — cooled pastel washes (6 distinct feature hues; charcoal text
+     on them clears AA in both themes) */
+  --color-tint-peach: #f7e6d6;
+  --color-tint-rose: #f6dfe8;
+  --color-tint-mint: #d9efe1;
+  --color-tint-lavender: #e4e6f3; /* cool indigo wash */
+  --color-tint-sky: #dde9f6; /* cool blue wash — the accent tint */
+  --color-tint-yellow: #f6f1d6;
+
+  /* semantic */
+  --color-success: #18804a;
+  --color-warning: #c2410c;
+  --color-destructive: #c92a2a; /* white-on AA */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #155bc4; /* shares the accent blue (coherent in mono) */
+
+  /* links — the accent blue (AA on white AND the soft surface a hovered row
+     paints behind it) */
+  --color-link: #155bc4;
+  --color-link-pressed: #114a9e;
+
+  /* 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;
+}
+
+/* Graphite — dark companion. A cool near-black slate canvas; the CTA fill
+   inverts to near-WHITE ink (Vercel's dark white-button), the accent blue
+   brightens so it reads AS text on the dark canvas, and semantic/type hues
+   brighten to clear AA on near-black. */
+[data-palette='graphite'][data-theme='dark'] {
+  --color-background: #0c0d0f; /* stark cool near-black canvas */
+  --color-foreground: #edeef0;
+  --color-surface: #18191c; /* cool slate section */
+  --color-surface-soft: #141517; /* quieter cool division */
+
+  --color-ink: #edeef0;
+  --color-charcoal: #d7d9dd; /* emphasis / AA-safe on tints */
+  --color-slate: #a9adb5; /* secondary — AA on the dark canvas */
+  --color-steel: #888d96; /* tertiary / footer */
+  --color-stone: #696e77; /* faint labels */
+  --color-muted: #18191c;
+  --color-muted-foreground: #a0a4ac; /* captions — AA on dark */
+
+  --color-hairline: #282a2e;
+  --color-hairline-soft: #1d1f22;
+  --color-hairline-strong: #3a3d42;
+  --color-border: #282a2e;
+
+  /* accent — blue brightened AS text on near-black; CTA fill inverts to
+     near-white ink with near-black labels (the dark monochrome statement) */
+  --color-primary: #7db1ff; /* bright cool-blue accent — links / active / focus */
+  --color-primary-foreground: #0c0d0f; /* near-black labels on the white fill */
+  --color-primary-pressed: #d3d5d9; /* pressed white-ink CTA */
+  --color-primary-fill: #edeef0; /* near-white ink CTA fill (black-on AA) */
+
+  /* cooled tints, dimmed for the near-black canvas */
+  --color-tint-peach: #2e2418;
+  --color-tint-rose: #2f1c26;
+  --color-tint-mint: #15271e;
+  --color-tint-lavender: #1f2236;
+  --color-tint-sky: #15233a;
+  --color-tint-yellow: #2a2716;
+
+  --color-accent: #5b9dff; /* bright cool-blue highlight on dark */
+  --color-accent-orange: #f08a4b;
+  --color-accent-teal: #2db6a8;
+  --color-accent-green: #34b86e;
+
+  --color-success: #34b86e;
+  --color-warning: #f08a4b;
+  --color-destructive: #d83847; /* white-on AA on the dark canvas */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #7db1ff;
+
+  --color-link: #7db1ff;
+  --color-link-pressed: #a3c8ff;
+
+  /* sidebar hover — one shade lighter than the dark cool surface */
+  --el-sidebar-item-bg-hover: #202226;
+}
+
+/* ── Palette: Evergreen (data-palette="evergreen") — Subtask 7.3.50 ──────────
+   A fresh, technical emerald scheme — Supabase (dark emerald) / Spotify
+   (vibrant green) / MongoDB (spring green), built on Radix green/jade ramps.
+   See docs/palettes/evergreen.md.
+
+   Like every palette block, this re-skins by overriding the Tier-0 --color-*
+   layer (COLOUR only — never a shape/feel token, which is the data-style axis):
+   because the Tier-3 --el-* element tokens reference --color-*, this cascades a
+   COORDINATED re-skin through every surface, ink step, accent/CTA, link,
+   semantic, tint, work-item-type hue, and chart colour at once — no per-`--el-*`
+   enumeration, no drift from the element layer. The work-item type / chart hues
+   stay a distinguishable rainbow (a `code` chip must still read distinct from a
+   `test` chip); only the palette's MOOD shifts emerald. Every text-on-surface,
+   CTA, link, and chip pairing passes WCAG AA in light AND dark (verified by
+   render specimen; see the doc).
+
+   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;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #095f40;
+  --color-primary-fill: #0c7a52;
+
+  /* Surfaces — lightly cooled (green-leaning) neutrals over a white canvas */
+  --color-background: #ffffff;
+  --color-foreground: #14201b;
+  --color-surface: #eef3f0;
+  --color-surface-soft: #f6faf8;
+
+  /* Text scale — cooled forest-charcoal ink hierarchy */
+  --color-ink: #14201b;
+  --color-charcoal: #1d2c25;
+  --color-slate: #42534a;
+  --color-steel: #5e6f66;
+  --color-stone: #8f9f96;
+  --color-muted: #eef2f0;
+  --color-muted-foreground: #5e6f66;
+
+  /* Borders / hairlines — cool green-grey */
+  --color-hairline: #d9e2dc;
+  --color-hairline-soft: #e6ece9;
+  --color-hairline-strong: #c2d0c8;
+  --color-border: #d9e2dc;
+
+  /* Secondary accents — a harmonized-but-distinct rainbow for type/chart hues.
+     Violet replaces the house pink as the complementary accent (epic/design),
+     so those chips stay distinct from the emerald greens. */
+  --color-accent: #8257e6; /* violet — epic / design / highlight */
+  --color-accent-orange: #c2410c; /* review */
+  --color-accent-teal: #0d8a86; /* subtask / content */
+  --color-accent-green: #157f3a; /* story — fresh grass green */
+
+  /* Card tints — cool/green-leaning washes (lavender shifts toward the violet
+     accent; carry charcoal text at AA) */
+  --color-tint-peach: #ffe9d6;
+  --color-tint-rose: #f6dced;
+  --color-tint-mint: #d5f1e1;
+  --color-tint-lavender: #e7e0fa;
+  --color-tint-sky: #d8ecf6;
+  --color-tint-yellow: #fbf3d2;
+
+  /* Semantic — green-leaning success; the rest kept distinct for legibility */
+  --color-success: #127c3e; /* grassier than the emerald primary, so they read apart */
+  --color-warning: #b45309;
+  --color-destructive: #d63d3d;
+  --color-destructive-foreground: #ffffff;
+  --color-info: #1366c4; /* a clear blue — keeps task/code apart from teal subtask/content */
+
+  /* Links — blue affordance (distinct from the emerald accent), AA on both the
+     page and the soft hovered-row surface */
+  --color-link: #0a6ebd;
+  --color-link-pressed: #08537f;
+
+  /* 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;
+}
+
+/* Evergreen — dark companion. Bright emerald on a deep-forest canvas
+   (Supabase-style: the bright accent FILL carries DARK label text). Mirrors the
+   Tier-1 dark flip for the cooled neutrals. */
+[data-palette='evergreen'][data-theme='dark'] {
+  --color-primary: #3ddc97;
+  --color-primary-foreground: #06140d; /* dark ink on the bright emerald fill */
+  --color-primary-pressed: #2bbd7f;
+  --color-primary-fill: #3ddc97;
+
+  --color-background: #0c130f;
+  --color-foreground: #e8efe9;
+  --color-surface: #141d18;
+  --color-surface-soft: #101713;
+
+  --color-ink: #e8efe9;
+  --color-charcoal: #d6e0d9;
+  --color-slate: #9aaaa1;
+  --color-steel: #6f8077;
+  --color-stone: #5a6b62;
+  --color-muted: #141d18;
+  --color-muted-foreground: #9aaaa1;
+
+  --color-hairline: #25322b;
+  --color-hairline-soft: #1b251f;
+  --color-hairline-strong: #35453c;
+  --color-border: #25322b;
+
+  --color-accent: #a78bfa; /* violet */
+  --color-accent-orange: #fb923c;
+  --color-accent-teal: #2dd4bf;
+  --color-accent-green: #34d27a;
+
+  /* Pastel tints dimmed for the dark canvas */
+  --color-tint-peach: #2f2114;
+  --color-tint-rose: #2e1822;
+  --color-tint-mint: #11271c;
+  --color-tint-lavender: #211b33;
+  --color-tint-sky: #122430;
+  --color-tint-yellow: #2b2712;
+
+  --color-success: #34d27a;
+  --color-warning: #fb923c;
+  --color-destructive: #f87171;
+  --color-destructive-foreground: #06140d; /* dark ink on the bright red */
+  --color-info: #5aa8f5;
+
+  --color-link: #56b6f5;
+  --color-link-pressed: #7cc7f8;
+
+  /* hover lift one shade *lighter* than the dark surface (mirrors base recipe) */
+  --el-sidebar-item-bg-hover: #1e2a23;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   AXIS 3 (TYPE) — data-type overrides (Subtask 7.3.53)
+   Registry: lib/theme/typography.ts. A named type pairing re-points the
+   `--font-*` ROLE tokens (sans / serif / mono) — and ONLY font tokens, NEVER a
+   colour (--el / --color) or shape (--radius / --spacing / --shadow) token. The
+   shared --font-size scale stays common (sizes are layout, not brand).
+
+   v1 ships three pairings built from the THREE already-loaded next/font faces
+   (Inter · Source Serif 4 · JetBrains Mono) — ZERO new payload:
+     - `motir`      — the BASE (editorial serif headlines); it IS the Tier-0
+                      --font-* defaults, so — like the `motir` palette — it needs
+                      NO override block.
+     - `motir-sans` — all-sans: the serif headline face re-points to the sans
+                      stack (reproduces the old Swiss `--font-serif` override).
+     - `motir-mono` — mono headlines: re-points to the mono stack (reproduces
+                      the old Neo-Brutalism / Cybercore override).
+   A STYLE declares a `defaultTypeId` (lib/theme/styles.ts) — the pairing applied
+   when the user hasn't pinned a `data-type` — so the out-of-the-box look is
+   UNCHANGED (swiss → motir-sans, neo/cybercore → motir-mono). Each later
+   "Type: …" subtask (7.3.54+) ADDS its `[data-type='<id>']` block + faces here:
+     - `grotesk` (7.3.54)        — Space Grotesk on the headline role over Inter.
+     - `mono-technical` (7.3.56) — IBM Plex Mono on the headline + meta/code
+                      roles over the Inter body; loads one new face (in layout.tsx).
+   ═══════════════════════════════════════════════════════════════════════ */
+
+[data-type='motir-sans'] {
+  /* Sans headlines — re-point the editorial serif role at the sans stack. */
+  --font-serif:
+    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+[data-type='motir-mono'] {
+  /* Mono throughout — re-point BOTH the headline (serif) role AND the body/UI
+     (sans) role at the mono stack, so the WHOLE app (nav, header, buttons,
+     content) re-types to a code-native monospace voice, not just headlines (Yue,
+     2026-06-19: the type axis must re-type the whole UI, chrome included). Meta
+     already is mono. ONLY --font-* tokens (the disjointness guard). */
+  --font-serif: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-sans: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+}
+
+/* ── Palette: Spectrum (data-palette="spectrum") — Subtask 7.3.52 ───────────
+   A vibrant, playful, energetic MULTI-ACCENT re-skin: crisp cool-white
+   surfaces, a bright violet primary, a candy-magenta highlight, and a
+   saturated, well-separated rainbow tint/accent set — friendly, never garish.
+   Visibly distinct from Motir (warm cream → crisp cool surfaces; muted pastels
+   → candy-bright tints), not just an accent-hue swap. Mood anchored in
+   getdesign.md's Figma (vibrant multi-colour) / Airtable (colourful, friendly)
+   analysis; the actual light/dark ramps + UI-state steps are built from Radix
+   Colors (Violet / Iris / Pink / Blue / Jade / Amber / Red) — the
+   accessibility-first 12-step scales designed for UI states.
+
+   This block re-skins by overriding the Tier-0 --color-* SOURCE the Tier-3
+   --el-* layer references (exactly how the [data-theme='dark'] block works), so
+   every --el-* token — surfaces, ink, accent, links, semantic, tints, and
+   work-item type hues — re-skins coherently with no per-token churn. It sets
+   ONLY colour tokens (--color-* / --el-*), NEVER a shape/feel token (radius /
+   spacing / shadow / sizing / motion / type) — that is the independent
+   data-style axis (paletteRegistry.test.ts enforces the disjointness).
+
+   Accessibility: every text-on-surface, white-on-fill, link, and chip-tint
+   pairing clears WCAG AA (≥4.5 text; ≥3.0 icon/UI hue) in BOTH light and dark —
+   verified numerically + by rendered specimen, never eyeballed. See
+   docs/palettes/spectrum.md for the colour-role reference. */
+[data-palette='spectrum'] {
+  /* brand & primary — bright violet (Radix Violet/Iris family) */
+  --color-primary: #6440d6; /* violet AS text/icon on a surface (AA ~6.5:1 on white) */
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #5331b8;
+  --color-primary-fill: #5a37c9; /* fill behind white labels (white-on AA ~7.4:1) */
+
+  /* surfaces — crisp cool white over faintly violet-tinted sections */
+  --color-background: #ffffff;
+  --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 */
+
+  /* text scale — cool violet-neutral hierarchy */
+  --color-ink: #1a1626;
+  --color-charcoal: #2a2440; /* body emphasis / AA-safe text on tints */
+  --color-slate: #524d66; /* secondary text */
+  --color-steel: #6b6680; /* tertiary / footer */
+  --color-stone: #938da6; /* faint labels */
+  --color-muted: #f4f2fb;
+  --color-muted-foreground: #5e5975; /* captions — AA ~6.6:1 on white + surfaces */
+
+  /* borders — cool violet hairlines */
+  --color-hairline: #e6e2f3;
+  --color-hairline-soft: #efecf8;
+  --color-hairline-strong: #cfc8e6;
+  --color-border: #e6e2f3;
+
+  /* accent secondary — a candy magenta-pink highlight (the playful brand spark;
+     also the epic & design type hue) + a vivid, well-separated accent trio */
+  --color-accent: #e23d97; /* vivid magenta-pink — decorative / epic & design hue */
+  --color-accent-orange: #ea580c;
+  --color-accent-teal: #0d9488;
+  --color-accent-green: #16a34a;
+
+  /* card tints — candy-bright washes (6 distinct, saturated feature hues; each
+     light enough that --el-text-strong charcoal clears AA ≥10:1 on it) */
+  --color-tint-peach: #ffe1c2;
+  --color-tint-rose: #ffd9e8;
+  --color-tint-mint: #c7f5d9;
+  --color-tint-lavender: #e6ddff;
+  --color-tint-sky: #d2e7ff;
+  --color-tint-yellow: #fff0b8;
+
+  /* semantic */
+  --color-success: #16a34a;
+  --color-warning: #ea580c;
+  --color-destructive: #d92e2b; /* white-on AA */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #2563eb;
+
+  /* links — a clean vivid blue, distinct from the violet primary (AA on the
+     soft surface a hovered row paints, too) */
+  --color-link: #2563eb;
+  --color-link-pressed: #1d4ed8;
+
+  /* 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;
+}
+
+/* Spectrum — dark companion. A deep cool-violet canvas (not the base
+   near-black); brightened violet/pink/link hues so they read AS text on the
+   dark surface, and a darker accent fill so white labels still clear AA. */
+[data-palette='spectrum'][data-theme='dark'] {
+  --color-background: #14111f; /* deep cool-violet canvas */
+  --color-foreground: #ece9f6;
+  --color-surface: #1d1830;
+  --color-surface-soft: #181426;
+
+  --color-ink: #ece9f6;
+  --color-charcoal: #ddd8ee;
+  --color-slate: #aaa3c2;
+  --color-steel: #8a82a3;
+  --color-stone: #6b6485;
+  --color-muted: #1d1830;
+  --color-muted-foreground: #a39bbd;
+
+  --color-hairline: #2b2440;
+  --color-hairline-soft: #211b33;
+  --color-hairline-strong: #3a3257;
+  --color-border: #2b2440;
+
+  /* violet — brightened as text on the violet canvas; fill darkened for
+     white-label AA */
+  --color-primary: #a78bfa;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #5331b8;
+  --color-primary-fill: #6d4fd6;
+
+  /* candy tints, dimmed for the dark canvas (light --el-text-strong on them) */
+  --color-tint-peach: #34261a;
+  --color-tint-rose: #351c28;
+  --color-tint-mint: #16301f;
+  --color-tint-lavender: #251f3c;
+  --color-tint-sky: #16263f;
+  --color-tint-yellow: #322c16;
+
+  --color-accent: #ff5fb0; /* bright candy magenta-pink on dark */
+  --color-accent-orange: #fb8b4c;
+  --color-accent-teal: #2dc4b8;
+  --color-accent-green: #36c977;
+
+  --color-success: #36c977;
+  --color-warning: #fb8b4c;
+  --color-destructive: #f0555f; /* reads AS text on the dark canvas (AA ~5.5:1) */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #6fa8ff;
+
+  --color-link: #8fb8ff;
+  --color-link-pressed: #b3d0ff;
+
+  /* sidebar hover — one shade lighter than the dark cool surface */
+  --el-sidebar-item-bg-hover: #261f3d;
+}
+
+/* ── Palette: Amber (data-palette="amber") — Subtask 8.8.34 (MOTIR-1252) ─────
+   BINANCE's whole palette: the bold trading-floor GOLD over the exchange's
+   cool graphite near-blacks. Transcribed from Binance's documented system —
+   the warm gold primary IS what makes this a "warm" palette; the neutrals are
+   Binance's own cool greys (the whole-palette directive: a warm primary + the
+   brand's real neutrals). Brand tokens: Binance Gold #F0B90B (primary) /
+   brighter #FCD535 (on-dark accent), trading-floor blacks #0B0E11 / #181A20 /
+   "Shark" #1E2329 / #2B3139, greys #EAECEF / #B7BDC6 / #848E9C / #5E6673 /
+   #474D57, buy-green #0ECB81, sell-red #F6465D. (Binance ships no documented
+   light theme, so the light surfaces/greys are derived from its cool grey
+   family + the gold; the dark theme is the authentic trading floor.)
+
+   ⚠️ THE YELLOW TRAP: the gold FILL cannot carry white text at AA, so the
+   accent-text (--color-primary-foreground) is Binance's near-black #181A20,
+   not #fff (dark-on-gold ≥9:1) — Binance's own black-on-yellow treatment.
+
+   Re-skins by overriding the Tier-0 --color-* SOURCE (as [data-theme='dark']
+   does), so every --el-* token re-skins coherently. ONLY colour tokens
+   (--color-* / --el-*), NEVER a shape/feel token (the independent data-style
+   axis; paletteRegistry.test.ts enforces the disjointness). Every --el-* role
+   clears WCAG AA (≥4.5 text; ≥3.0 icon/UI) in BOTH themes, verified
+   numerically. See docs/palettes/amber.md. */
+[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-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 */
+
+  /* surfaces — white canvas over cool graphite sections (derived light) */
+  --color-background: #ffffff;
+  --color-foreground: #181a20; /* Binance near-black ink */
+  --color-surface: #f4f5f7; /* cool graphite section background */
+  --color-surface-soft: #fafbfc; /* quieter cool division */
+
+  /* text scale — Binance cool-grey hierarchy */
+  --color-ink: #181a20;
+  --color-charcoal: #1e2329; /* Binance "Shark" — emphasis / AA-safe on tints */
+  --color-slate: #4a5159; /* secondary text */
+  --color-steel: #5e6673; /* tertiary / footer */
+  --color-stone: #848e9c; /* Binance signature grey — faint labels */
+  --color-muted: #f4f5f7;
+  --color-muted-foreground: #5e6673; /* captions — AA on white + surfaces */
+
+  /* borders — cool graphite hairlines */
+  --color-hairline: #e6e8eb;
+  --color-hairline-soft: #eef0f2;
+  --color-hairline-strong: #c9ced4;
+  --color-border: #e6e8eb;
+
+  /* accent secondary — a deep amber-gold highlight (epic & design hue),
+     distinct from the bright primary gold */
+  --color-accent: #97751a;
+  --color-accent-orange: #c2410c;
+  --color-accent-teal: #0e8f86;
+  --color-accent-green: #0a8f57; /* darkened Binance buy-green for light AA */
+
+  /* card tints — gold-leaning warm washes + cool feature hues */
+  --color-tint-peach: #fbe7c2;
+  --color-tint-rose: #f7dde2;
+  --color-tint-mint: #d6ecdf;
+  --color-tint-lavender: #e2e4ee;
+  --color-tint-sky: #dbe7f5;
+  --color-tint-yellow: #fbeec0; /* gold wash — the most-used here */
+
+  /* semantic — Binance buy-green / sell-red, darkened for white-on / light AA */
+  --color-success: #0a8f57;
+  --color-warning: #b45309;
+  --color-destructive: #d4283f; /* Binance sell-red, darkened (white-on AA) */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #1366c4;
+
+  /* links — a clear blue, distinct from the gold primary */
+  --color-link: #1366c4;
+  --color-link-pressed: #0f4f9c;
+
+  /* sidebar hover — one shade darker than the cool surface */
+  --el-sidebar-item-bg-hover: #eceef1;
+}
+
+/* Amber — dark companion: the AUTHENTIC Binance trading floor. Cool near-black
+   canvas (#0B0E11) + "Shark" cards (#1E2329); the gold brightens to #FCD535 and
+   the CTA fill carries dark labels; semantics are Binance's real buy-green
+   #0ECB81 / sell-red #F6465D. */
+[data-palette='amber'][data-theme='dark'] {
+  --color-background: #0b0e11; /* Binance deepest trading-floor black */
+  --color-foreground: #eaecef;
+  --color-surface: #1e2329; /* Binance "Shark" card surface */
+  --color-surface-soft: #181a20; /* Binance app background — quieter division */
+
+  --color-ink: #eaecef;
+  --color-charcoal: #d1d6dd;
+  --color-slate: #b7bdc6;
+  --color-steel: #848e9c;
+  --color-stone: #5e6673;
+  --color-muted: #1e2329;
+  --color-muted-foreground: #8a94a0;
+
+  --color-hairline: #2b3139;
+  --color-hairline-soft: #1e2329;
+  --color-hairline-strong: #474d57;
+  --color-border: #2b3139;
+
+  /* gold brightened to Binance #FCD535 on the dark floor; fill carries dark
+     labels (AA ~13.5:1) */
+  --color-primary: #fcd535;
+  --color-primary-foreground: #0b0e11;
+  --color-primary-pressed: #d4a30a;
+  --color-primary-fill: #fcd535;
+
+  /* tints dimmed for the trading-floor black */
+  --color-tint-peach: #2f2814;
+  --color-tint-rose: #2f1a22;
+  --color-tint-mint: #102a1e;
+  --color-tint-lavender: #1c2030;
+  --color-tint-sky: #122436;
+  --color-tint-yellow: #2e2810;
+
+  --color-accent: #f0b90b; /* Binance Gold highlight on dark */
+  --color-accent-orange: #fb923c;
+  --color-accent-teal: #2dd4bf;
+  --color-accent-green: #0ecb81; /* Binance buy-green */
+
+  --color-success: #0ecb81; /* Binance buy-green */
+  --color-warning: #fbab4c;
+  --color-destructive: #f6465d; /* Binance sell-red */
+  --color-destructive-foreground: #0b0e11; /* dark ink on the bright sell-red */
+  --color-info: #6fb3ff;
+
+  --color-link: #6fb3ff;
+  --color-link-pressed: #a3ccff;
+
+  /* sidebar hover — one shade lighter than the dark "Shark" surface */
+  --el-sidebar-item-bg-hover: #262d35;
+}
+
+/* ── Palette: Sienna (data-palette="sienna") — Subtask 8.8.34 (MOTIR-1252) ───
+   MISTRAL AI's whole palette: the flame-orange over Mistral's Mediterranean
+   warm-cream surfaces. Transcribed from Mistral's documented system
+   (getdesign.md/mistral.ai): Mistral Orange #fa520f (primary) / Flame #fb6424,
+   the Block gradient (yellow→amber→flame→orange), the Sunshine family
+   (#ff8a00/#ffa110/#ffb83e/#ffd06a), Block Gold #ffe295, Warm-Ivory cream
+   surfaces (#fffaeb → #fff0c2), Mistral-Black #1f1f1f ink. Mistral ships NO
+   semantic colours, so success/warning/danger/info are added warm-consistent.
+
+   ⚠️ THE YELLOW TRAP (as Amber): the bright flame FILL cannot carry white at
+   AA, so the accent-text is a DARK warm ink in BOTH themes — Mistral's own
+   dark-on-orange treatment (dark-on-flame ~5.3:1 light / ~6.8:1 dark).
+
+   Re-skins by overriding the Tier-0 --color-* SOURCE; ONLY colour tokens, never
+   a shape/feel token (paletteRegistry.test.ts enforces it). Every --el-* role
+   clears WCAG AA in BOTH themes, verified numerically. See
+   docs/palettes/sienna.md. */
+[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-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 */
+
+  /* surfaces — Mistral's Mediterranean warm creams (never pure white) */
+  --color-background: #fffaeb; /* Mistral "Warm Ivory" page background */
+  --color-foreground: #1f1f1f; /* Mistral Black ink */
+  --color-surface: #fbf1d3; /* warm cream section background (Mistral cream ramp) */
+  --color-surface-soft: #fdf6e0; /* quieter warm cream division */
+
+  /* text scale — Mistral warm-charcoal hierarchy */
+  --color-ink: #1f1f1f;
+  --color-charcoal: #2c2c2c; /* emphasis / AA-safe text on tints */
+  --color-slate: #4a4a4a; /* secondary text */
+  --color-steel: #6a6a6a; /* tertiary / footer */
+  --color-stone: #8a8a8a; /* faint labels */
+  --color-muted: #fbf1d3;
+  --color-muted-foreground: #5f5f5f; /* captions — AA on the cream + surfaces */
+
+  /* borders — warm beige hairlines (Mistral beige-deep family) */
+  --color-hairline: #ece0c4;
+  --color-hairline-soft: #f3ebd6;
+  --color-hairline-strong: #ddcca6;
+  --color-border: #ece0c4;
+
+  /* accent secondary — a darkened Mistral "Sunshine" amber (epic & design hue) */
+  --color-accent: #b5660a;
+  --color-accent-orange: #c2410c;
+  --color-accent-teal: #0e8f86;
+  --color-accent-green: #18874c;
+
+  /* card tints — Mistral's golden washes (yellow = Block Gold #ffe295) + warm
+     feature hues; charcoal text clears AA ≥11:1 on each */
+  --color-tint-peach: #ffe0c6;
+  --color-tint-rose: #fbdfd2;
+  --color-tint-mint: #e3ead0;
+  --color-tint-lavender: #ece6d6;
+  --color-tint-sky: #e6ebda;
+  --color-tint-yellow: #ffe295; /* Mistral Block Gold */
+
+  /* semantic — Mistral documents none; added warm-consistent + AA-safe */
+  --color-success: #18804a;
+  --color-warning: #b45309;
+  --color-destructive: #c92a2a;
+  --color-destructive-foreground: #ffffff;
+  --color-info: #1366c4;
+
+  /* links — Mistral uses the brand orange for links; a darkened flame (AA) */
+  --color-link: #c4400a;
+  --color-link-pressed: #a8350a;
+
+  /* sidebar hover — one shade deeper than the cream surface */
+  --el-sidebar-item-bg-hover: #f5e9c4;
+}
+
+/* Sienna — dark companion. Mistral is light-dominant (few dark tokens: Mistral
+   Black #1f1f1f); a warm near-black canvas built from it, the flame brightened
+   to read as text, the fill a bright flame with dark-ink labels. */
+[data-palette='sienna'][data-theme='dark'] {
+  --color-background: #15120d; /* warm near-black canvas (from Mistral Black) */
+  --color-foreground: #f5efe2;
+  --color-surface: #1f1d17;
+  --color-surface-soft: #1a1712;
+
+  --color-ink: #f5efe2;
+  --color-charcoal: #e6ddcb;
+  --color-slate: #b3a892;
+  --color-steel: #8a8069;
+  --color-stone: #6b6250;
+  --color-muted: #1f1d17;
+  --color-muted-foreground: #a89d86;
+
+  --color-hairline: #322c1d;
+  --color-hairline-soft: #241f15;
+  --color-hairline-strong: #4a4129;
+  --color-border: #322c1d;
+
+  /* flame brightened as text; fill a bright flame with DARK ink labels (~6.8:1) */
+  --color-primary: #ff8a4c;
+  --color-primary-foreground: #2a1205;
+  --color-primary-pressed: #d2530a;
+  --color-primary-fill: #ff7a38;
+
+  --color-tint-peach: #33240f;
+  --color-tint-rose: #321c16;
+  --color-tint-mint: #23271a;
+  --color-tint-lavender: #272318;
+  --color-tint-sky: #22251a;
+  --color-tint-yellow: #332b12;
+
+  --color-accent: #ffa110; /* Mistral Sunshine-700 amber on dark */
+  --color-accent-orange: #fb923c;
+  --color-accent-teal: #2dd4bf;
+  --color-accent-green: #34d27a;
+
+  --color-success: #34d27a;
+  --color-warning: #fbab4c;
+  --color-destructive: #e0586a;
+  --color-destructive-foreground: #15120d; /* dark ink on the bright danger fill */
+  --color-info: #6fb3ff;
+
+  --color-link: #ff9a5c; /* warm orange link on dark (Mistral) */
+  --color-link-pressed: #ffb37e;
+
+  /* sidebar hover — one shade lighter than the warm-dark surface */
+  --el-sidebar-item-bg-hover: #292619;
+}
+
+/* ── Palette: Garnet (data-palette="garnet") — Subtask 8.8.34 (MOTIR-1252) ───
+   PINTEREST's whole palette: the Pushpin RED over Pinterest's neutral greys.
+   Transcribed from Pinterest's documented brand + Gestalt design system: Pushpin
+   red #E60023 (primary, deepened to #c30021 for white-on AA) / darker #BD081C,
+   Cod-Gray #111111 ink, greys #767676 / #EFEFEF, Gestalt "Skycicle" blue for
+   links/info. The warm red primary makes this a "warm" palette; Pinterest's
+   neutrals are true-neutral greys (the whole-palette directive). The danger hue
+   is kept a distinct orange-red so it never blurs into the red brand.
+
+   Re-skins by overriding the Tier-0 --color-* SOURCE; ONLY colour tokens, never
+   a shape/feel token (paletteRegistry.test.ts enforces it). The deep-red FILL
+   carries WHITE labels at AA in both themes. Every --el-* role clears WCAG AA in
+   BOTH themes, verified numerically. See docs/palettes/garnet.md. */
+[data-palette='garnet'] {
+  /* brand & primary — Pinterest Pushpin red, deepened for white-on AA */
+  --color-primary: #c30021; /* Pushpin red as text/icon on a surface (AA ~6.3:1 on white) */
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #9e0419; /* darker (Pinterest #BD081C family) */
+  --color-primary-fill: #c30021; /* deep Pushpin red — white-on AA ~6.3:1 */
+
+  /* surfaces — white canvas over Pinterest neutral greys */
+  --color-background: #ffffff;
+  --color-foreground: #111111; /* Pinterest "Cod Gray" ink */
+  --color-surface: #efefef; /* Pinterest light-gray section background */
+  --color-surface-soft: #f7f7f7; /* quieter neutral division */
+
+  /* text scale — Pinterest neutral-grey hierarchy */
+  --color-ink: #111111;
+  --color-charcoal: #1a1a1a; /* emphasis / AA-safe text on tints */
+  --color-slate: #444444; /* secondary text */
+  --color-steel: #5f5f5f; /* tertiary / footer */
+  --color-stone: #767676; /* Pinterest grey — faint labels */
+  --color-muted: #efefef;
+  --color-muted-foreground: #5f5f5f; /* captions — AA on white + surfaces */
+
+  /* borders — neutral hairlines */
+  --color-hairline: #e0e0e0;
+  --color-hairline-soft: #ececec;
+  --color-hairline-strong: #cdcdcd;
+  --color-border: #e0e0e0;
+
+  /* accent secondary — a warm magenta-plum highlight (epic & design hue),
+     distinct from both the Pushpin red primary and the orange-red danger */
+  --color-accent: #9c2d7f;
+  --color-accent-orange: #c2410c;
+  --color-accent-teal: #0e8f86;
+  --color-accent-green: #0a7d4f;
+
+  /* card tints — a Pinterest-red rose wash + clean feature hues */
+  --color-tint-peach: #ffe2d4;
+  --color-tint-rose: #ffe0e4; /* Pushpin-red rose wash */
+  --color-tint-mint: #d9efe1;
+  --color-tint-lavender: #ece0f2;
+  --color-tint-sky: #d8e8fb;
+  --color-tint-yellow: #faedc8;
+
+  /* semantic — danger held distinct (orange-red) from the red brand */
+  --color-success: #0a7d4f;
+  --color-warning: #b45309;
+  --color-destructive: #e0300f;
+  --color-destructive-foreground: #ffffff;
+  --color-info: #0a66c2; /* Gestalt "Skycicle" blue family */
+
+  /* links — Gestalt Skycicle blue, distinct from the red primary */
+  --color-link: #0a66c2;
+  --color-link-pressed: #084e95;
+
+  /* sidebar hover — one shade darker than the neutral surface */
+  --el-sidebar-item-bg-hover: #e6e6e6;
+}
+
+/* Garnet — dark companion. Pinterest's Cod-Gray near-black canvas; the red
+   brightens to read as text, the CTA fill stays the deep Pushpin red carrying
+   WHITE labels, semantics brighten to clear AA. */
+[data-palette='garnet'][data-theme='dark'] {
+  --color-background: #0e0e0e; /* Cod-Gray near-black canvas */
+  --color-foreground: #efefef;
+  --color-surface: #1a1a1a;
+  --color-surface-soft: #161616;
+
+  --color-ink: #efefef;
+  --color-charcoal: #e0e0e0;
+  --color-slate: #b5b5b5;
+  --color-steel: #8c8c8c;
+  --color-stone: #6e6e6e;
+  --color-muted: #1a1a1a;
+  --color-muted-foreground: #9a9a9a;
+
+  --color-hairline: #2e2e2e;
+  --color-hairline-soft: #1f1f1f;
+  --color-hairline-strong: #444444;
+  --color-border: #2e2e2e;
+
+  /* red brightened as text on the dark canvas; fill stays deep Pushpin red with
+     WHITE labels (AA ~6.3:1) */
+  --color-primary: #ff5a76;
+  --color-primary-foreground: #ffffff;
+  --color-primary-pressed: #9e0419;
+  --color-primary-fill: #c30021;
+
+  --color-tint-peach: #33231a;
+  --color-tint-rose: #33161a;
+  --color-tint-mint: #15281e;
+  --color-tint-lavender: #271d33;
+  --color-tint-sky: #14233a;
+  --color-tint-yellow: #2e2613;
+
+  --color-accent: #e35bb8; /* bright magenta-plum highlight on dark */
+  --color-accent-orange: #fb923c;
+  --color-accent-teal: #2dd4bf;
+  --color-accent-green: #34d27a;
+
+  --color-success: #2ec27e;
+  --color-warning: #fbab4c;
+  --color-destructive: #ff6b6b;
+  --color-destructive-foreground: #0e0e0e; /* dark ink on the bright danger fill */
+  --color-info: #5aa0ff;
+
+  --color-link: #5aa0ff;
+  --color-link-pressed: #8cc0ff;
+
+  /* sidebar hover — one shade lighter than the dark surface */
+  --el-sidebar-item-bg-hover: #232323;
+}
+
+/* ── Palette: Citrine (data-palette="citrine") — Subtask 8.8.34 (MOTIR-1252) ──
+   MIRO's whole palette, transcribed verbatim from its Mirotone design system
+   (npm mirotone@5.3.2). EVERY value here is a documented Mirotone primitive
+   step or Miro brand token — nothing is invented or hand-darkened; where a role
+   needs a darker shade for AA, a documented deeper RAMP STEP is used (e.g.
+   yellow-700 #746019 for on-surface gold text). Miro is a 5-hue system
+   (yellow / blue / green / red / gray): the warm Sunglow YELLOW (#ffd02f =
+   yellow-500, the brand/logo colour) is the primary; the action-BLUE #3859ff
+   (blue-500) is the accent; ink is Stratos #050038; semantics are green-500
+   #1c8f00 / red-500 #d8182c. The warm yellow primary is what makes this a "warm"
+   palette; the neutrals are Mirotone's own cool gray ramp.
+
+   ⚠️ THE YELLOW TRAP: the Sunglow FILL cannot carry white at AA, so the
+   accent-text (--color-primary-foreground) is Miro's Stratos ink #050038, not
+   #fff (dark-on-Sunglow ~13.5:1) — Miro's own dark-on-yellow treatment.
+
+   Re-skins by overriding the Tier-0 --color-* SOURCE; ONLY colour tokens, never
+   a shape/feel token (paletteRegistry.test.ts enforces it). Every --el-* role
+   clears WCAG AA in BOTH themes, verified numerically. See
+   docs/palettes/citrine.md. */
+[data-palette='citrine'] {
+  /* brand & primary — Miro Sunglow yellow (yellow-500). FILL carries DARK
+     Stratos-ink labels (yellow trap); --color-primary is a documented dark
+     yellow step (yellow-700) used AS text/icon on a surface. */
+  --color-primary: #746019; /* Mirotone yellow-700 — gold text/icon (AA ~6.1:1 on white) */
+  --color-primary-foreground: #050038; /* Miro Stratos ink on the Sunglow fill (AA ~13.5:1) */
+  --color-primary-pressed: #d7b029; /* Mirotone yellow-550 */
+  --color-primary-fill: #ffd02f; /* Miro Sunglow — yellow-500, the brand/logo colour */
+
+  /* surfaces — white over Mirotone gray-50/100 (documented) */
+  --color-background: #ffffff;
+  --color-foreground: #050038; /* Miro Stratos navy ink */
+  --color-surface: #f3f4f6; /* Mirotone gray-100 section background */
+  --color-surface-soft: #f6f7f9; /* Mirotone gray-50 — quieter division */
+
+  /* text scale — Mirotone gray ramp */
+  --color-ink: #050038;
+  --color-charcoal: #1a1b1e; /* gray-900 — emphasis / AA-safe on tints */
+  --color-slate: #4a4e5e; /* gray-600 — secondary text */
+  --color-steel: #656b81; /* gray-500 — tertiary / footer */
+  --color-stone: #7f8497; /* gray-450 — faint labels */
+  --color-muted: #f3f4f6;
+  --color-muted-foreground: #575c6f; /* gray-550 — captions, AA on white + surfaces */
+
+  /* borders — Mirotone gray hairlines */
+  --color-hairline: #e0e1e6; /* gray-200 */
+  --color-hairline-soft: #ebecf0; /* gray-150 */
+  --color-hairline-strong: #c1c3cd; /* gray-300 */
+  --color-border: #e0e1e6;
+
+  /* accent secondary — Miro's action-BLUE (blue-500) as the epic/design hue;
+     the deep-blue + dark-gold below cover the other type hues with documented
+     Mirotone steps (Miro has no orange/teal primitive) */
+  --color-accent: #3859ff; /* Mirotone blue-500 — Miro action blue */
+  --color-accent-orange: #91771e; /* yellow-650 (Miro has no orange ramp) */
+  --color-accent-teal: #243797; /* blue-650 (Miro has no teal ramp) */
+  --color-accent-green: #1c8f00; /* green-500 */
+
+  /* card tints — Mirotone light ramp steps (charcoal text clears AA ≥13:1) */
+  --color-tint-peach: #ffefb9; /* yellow-250 */
+  --color-tint-rose: #fbe6e8; /* red-150 */
+  --color-tint-mint: #dff1da; /* green-150 */
+  --color-tint-lavender: #d9dffc; /* blue-200 */
+  --color-tint-sky: #f2f4fc; /* blue-100 */
+  --color-tint-yellow: #fff7d9; /* yellow-150 */
+
+  /* semantic — Mirotone green/red/blue ramps (Miro maps these by convention) */
+  --color-success: #1c8f00; /* green-500 */
+  --color-warning: #91771e; /* yellow-650 (AA-safe documented gold) */
+  --color-destructive: #d8182c; /* red-500 */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #3859ff; /* blue-500 */
+
+  /* links — Miro action blue (blue-500 → pressed blue-550) */
+  --color-link: #3859ff;
+  --color-link-pressed: #314cd9;
+
+  /* sidebar hover — Mirotone gray-150, one step off the surface */
+  --el-sidebar-item-bg-hover: #ebecf0;
+}
+
+/* Citrine — dark companion. A Mirotone gray-ramp near-black canvas (black
+   #090909 / gray-900 #1a1b1e); the Sunglow yellow brightens to read as text and
+   the fill keeps dark Stratos labels; blue/green/red brighten one ramp step to
+   clear AA on the dark canvas. All values are documented Mirotone steps. */
+[data-palette='citrine'][data-theme='dark'] {
+  --color-background: #090909; /* Miro black */
+  --color-foreground: #f6f7f9; /* gray-50 */
+  --color-surface: #1a1b1e; /* gray-900 */
+  --color-surface-soft: #18191c; /* gray-950 */
+
+  --color-ink: #f6f7f9;
+  --color-charcoal: #ebecf0; /* gray-150 */
+  --color-slate: #c1c3cd; /* gray-300 */
+  --color-steel: #979cab; /* gray-400 */
+  --color-stone: #656b81; /* gray-500 */
+  --color-muted: #1a1b1e;
+  --color-muted-foreground: #adb1bd; /* gray-350 */
+
+  --color-hairline: #2b2e35; /* gray-750 */
+  --color-hairline-soft: #24262c; /* gray-800 */
+  --color-hairline-strong: #3f424f; /* gray-650 */
+  --color-border: #2b2e35;
+
+  /* Sunglow reads as text on black; fill stays Sunglow with dark Stratos labels */
+  --color-primary: #ffd02f; /* yellow-500 */
+  --color-primary-foreground: #050038; /* Stratos ink on the Sunglow fill */
+  --color-primary-pressed: #d7b029; /* yellow-550 */
+  --color-primary-fill: #ffd02f;
+
+  /* tints — Mirotone deep ramp steps for the dark feature washes */
+  --color-tint-peach: #342c0f; /* yellow-850 */
+  --color-tint-rose: #2f1719; /* red-900 */
+  --color-tint-mint: #11260c; /* green-900 */
+  --color-tint-lavender: #12193e; /* blue-850 */
+  --color-tint-sky: #101633; /* blue-900 */
+  --color-tint-yellow: #28220d; /* yellow-900 */
+
+  --color-accent: #5b76fe; /* blue-450 — brighter Miro blue on dark */
+  --color-accent-orange: #b39223; /* yellow-600 */
+  --color-accent-teal: #7a90fe; /* blue-400 */
+  --color-accent-green: #65b452; /* green-400 */
+
+  --color-success: #65b452; /* green-400 */
+  --color-warning: #ffd850; /* yellow-450 */
+  --color-destructive: #e56673; /* red-400 */
+  --color-destructive-foreground: #090909; /* dark ink on the bright danger */
+  --color-info: #7a90fe; /* blue-400 */
+
+  --color-link: #7a90fe;
+  --color-link-pressed: #97a8fe; /* blue-350 */
+
+  /* sidebar hover — Mirotone gray-800, one step lighter than the surface */
+  --el-sidebar-item-bg-hover: #24262c;
+}
+
+/* ── Palette: Candy (data-palette="candy") — Subtask 8.8.34 (MOTIR-1252) ──────
+   A sweet, playful PASTEL-CANDY re-skin led by a LIGHT bubblegum PINK. There is
+   no single brand for a "candy" concept, so — to avoid inventing colours — EVERY value
+   is a documented **Radix Colors** step (@radix-ui/colors): Pink is the primary
+   ramp, Mauve the matched warm neutral, and Sky / Jade / Violet / Amber / Crimson
+   supply the candy rainbow of tints + type hues. Glossier Pink #F5DADF is the
+   pastel-pink MOOD reference; the actual values are Radix.
+
+   ⚠️ THE LIGHT-PINK TRAP: a light pink FILL cannot carry white text, so the CTA
+   is a light pink (Radix Pink-6 #efbfdd) with DARK berry-plum labels (Pink-12
+   #651249, ~7.6:1) — the same dark-on-light pattern Amber/Citrine use for gold.
+   --color-primary (pink AS text/icon on a surface) is the AA "text" step
+   Pink-11 #c2298a.
+
+   Re-skins by overriding the Tier-0 --color-* SOURCE; ONLY colour tokens, never a
+   shape/feel token (paletteRegistry.test.ts enforces it). Every --el-* role
+   clears WCAG AA in BOTH themes, verified numerically. See
+   docs/palettes/candy.md. */
+[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-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 */
+
+  /* surfaces — candy-paper pinks (Radix Pink-1/2/3) */
+  --color-background: #fffcfe; /* Radix Pink-1 — barely-pink candy white */
+  --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 */
+
+  /* text scale — Radix Mauve neutral + a Pink-12 berry emphasis */
+  --color-ink: #211f26;
+  --color-charcoal: #651249; /* Pink-12 berry — emphasis / AA-safe text on tints */
+  --color-slate: #65636d; /* Mauve-11 — secondary text */
+  --color-steel: #65636d; /* Mauve-11 — tertiary (Radix Mauve has one AA text grey) */
+  --color-stone: #8e8c99; /* Mauve-9 — faint labels (decorative) */
+  --color-muted: #fee9f5;
+  --color-muted-foreground: #65636d; /* Mauve-11 — captions, AA on white + surfaces */
+
+  /* borders — soft candy-pink hairlines (Radix Pink-5/4/6) */
+  --color-hairline: #f6cee7; /* Pink-5 */
+  --color-hairline-soft: #fbdcef; /* Pink-4 */
+  --color-hairline-strong: #efbfdd; /* Pink-6 */
+  --color-border: #f6cee7;
+
+  /* accent secondary — a candy berry-plum highlight (Radix Plum-9), distinct
+     from the light-pink primary; the candy rainbow covers the type hues */
+  --color-accent: #ab4aba; /* Radix Plum-9 — berry highlight / epic & design hue */
+  --color-accent-orange: #ab6400; /* Radix Amber-11 — candy honey */
+  --color-accent-teal: #208368; /* Radix Jade-11 — candy mint */
+  --color-accent-green: #2a7e3b; /* Radix Grass-11 — candy green */
+
+  /* card tints — Radix step-4 pastels: the candy rainbow (charcoal text AA ≥9:1) */
+  --color-tint-peach: #fbdcef; /* Pink-4 */
+  --color-tint-rose: #fedce7; /* Crimson-4 */
+  --color-tint-mint: #d6f1e3; /* Jade-4 */
+  --color-tint-lavender: #ebe4ff; /* Violet-4 */
+  --color-tint-sky: #d1f0fa; /* Sky-4 */
+  --color-tint-yellow: #ffee9c; /* Amber-4 */
+
+  /* semantic — Radix candy "text" steps (AA-safe) */
+  --color-success: #2a7e3b; /* Grass-11 */
+  --color-warning: #ab6400; /* Amber-11 */
+  --color-destructive: #cb1d63; /* Crimson-11 (white-on AA) */
+  --color-destructive-foreground: #ffffff;
+  --color-info: #00749e; /* Sky-11 */
+
+  /* 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;
+}
+
+/* Candy — dark companion. A pink-tinted near-black canvas (Radix Pink dark
+   1/2/3); the bubblegum pink brightens to read as text, the fill is a bright
+   candy pink with dark labels, and the rainbow tints become deep candy washes.
+   All values are documented Radix dark steps. */
+[data-palette='candy'][data-theme='dark'] {
+  --color-background: #191117; /* Radix Pink dark-1 — pink-tinted black */
+  --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-ink: #eeeef0;
+  --color-charcoal: #fdd1ea; /* Pink dark-12 — pink emphasis / AA on dark tints */
+  --color-slate: #b5b2bc; /* Mauve dark-11 — secondary */
+  --color-steel: #b5b2bc; /* Mauve dark-11 — tertiary */
+  --color-stone: #6f6d78; /* Mauve dark-9 — faint */
+  --color-muted: #37172f;
+  --color-muted-foreground: #b5b2bc;
+
+  --color-hairline: #692955; /* Pink dark-6 */
+  --color-hairline-soft: #591c47; /* Pink dark-5 */
+  --color-hairline-strong: #833869; /* Pink dark-7 */
+  --color-border: #692955;
+
+  /* bubblegum pink brightened as text; fill a bright candy pink with dark labels */
+  --color-primary: #ff8dcc; /* Pink dark-11 */
+  --color-primary-foreground: #21121d; /* Pink dark-2 ink on the bright pink fill */
+  --color-primary-pressed: #de51a8; /* Pink dark-10 */
+  --color-primary-fill: #ff8dcc;
+
+  /* deep candy washes (Radix dark step-4) */
+  --color-tint-peach: #4b143d; /* Pink dark-4 */
+  --color-tint-rose: #4d122f; /* Crimson dark-4 */
+  --color-tint-mint: #0b3b2c; /* Jade dark-4 */
+  --color-tint-lavender: #33255b; /* Violet dark-4 */
+  --color-tint-sky: #113555; /* Sky dark-4 */
+  --color-tint-yellow: #3f2700; /* Amber dark-4 */
+
+  --color-accent: #e796f3; /* Plum dark-11 — bright berry */
+  --color-accent-orange: #ffca16; /* Amber dark-11 */
+  --color-accent-teal: #1fd8a4; /* Jade dark-11 */
+  --color-accent-green: #71d083; /* Grass dark-11 */
+
+  --color-success: #71d083; /* Grass dark-11 */
+  --color-warning: #ffca16; /* Amber dark-11 */
+  --color-destructive: #ff92ad; /* Crimson dark-11 */
+  --color-destructive-foreground: #191114; /* dark ink on the bright danger */
+  --color-info: #75c7f0; /* Sky dark-11 */
+
+  --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;
+}
+
+[data-type='grotesk'] {
+  /* Grotesk (7.3.54) — geometric / neo-grotesque headlines AND body/UI. Re-point
+     BOTH the headline (serif) role AND the body/UI (sans) role at Space Grotesk
+     (loaded in app/layout.tsx as --font-grotesk-source), so the WHOLE app (nav,
+     header, buttons, content) re-types — Space Grotesk reads cleanly as a UI sans
+     (Yue, 2026-06-19: the type axis must re-type the whole UI, chrome included).
+     Meta stays JetBrains Mono (--font-mono). ONLY font tokens here (the
+     disjointness guard): no colour (--el / --color) or shape token. */
+  --font-serif: var(--font-grotesk-source), ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-grotesk-source), ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-type='editorial'] {
+  /* Editorial (7.3.55) — a characterful display serif over the humanist sans
+     body. Adds one new face: Fraunces, loaded in app/layout.tsx as
+     --font-editorial-source. Re-point the headline (serif) role at it; body
+     (Inter, --font-sans) and meta (JetBrains, --font-mono) keep the base roles,
+     so the change is a real, visible FACE swap — magazine, considered — not a
+     size tweak. ONLY --font-* role tokens here (the disjointness guard): no
+     colour (--el/--color) or shape (--radius/--spacing/--shadow) token. */
+  --font-serif: var(--font-editorial-source), 'Fraunces', Georgia, serif;
+}
+
+[data-type='mono-technical'] {
+  /* Mono-Technical (7.3.56) — a precise, developer-grade pairing. IBM Plex Mono
+     dresses the headline role (--font-serif), the meta/code role (--font-mono)
+     AND the body/UI role (--font-sans), so the WHOLE app (nav, header, buttons,
+     content) re-types to one technical mono voice (Yue, 2026-06-19: the type axis
+     must re-type the whole UI, chrome included). Sharing the technical mono
+     everywhere is what distinguishes this from motir-mono (which uses the
+     JetBrains mono stack). Only --font-* role tokens are touched — colour
+     (--el/--color) and shape (--radius/--spacing) are the other two, independent
+     axes (the disjointness guard). */
+  --font-serif: var(--font-mono-technical-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-mono: var(--font-mono-technical-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-sans: var(--font-mono-technical-source, ui-monospace), 'SF Mono', Menlo, monospace;
+}