@consciousclouds/tokens 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,60 @@
 
 Versioned on the independent frontend-SDK lifecycle (NOT `contract_version`).
 
+## [0.1.1] — local release candidate, 2026-11-01
+
+- Publish the existing motion/shadow/status exports in a new immutable candidate; explicitly declare the existing React DOM peer requirement.
+- Pack lifecycle builds fresh distributable output. Historical 0.1.0 is unchanged.
+- Candidate only: no registry publication or published-digest claim.
+
+## [Unreleased]
+
+### Added
+
+- **Status color roles**: `success`, `warning` and `info`, each with a
+  `-foreground` for solid fills, exposed as `bg-success` / `text-warning` /
+  `border-info` and so on through `@theme inline`. `COLOR_TOKEN_ROLES` grows from
+  27 to 33. Every text-bearing role clears WCAG AA (4.5:1) as text on the page
+  background and on its own 5% tint, in both modes.
+- **`text-2xs` type step** (0.6875rem / 1rem): one step below `text-xs`, for
+  eyebrows, section labels and dense metadata — the home for off-scale
+  `text-[11px]`.
+- **`overlay` shadow role** (`shadow-overlay`): the floating elevation of a
+  surface above the content, such as a drawer over a scrim. Light uses Tailwind's
+  `shadow-2xl` value, so the surfaces that inlined it look the same; dark deepens
+  the alpha, the same treatment as `panel`. `SHADOW_TOKEN_ROLES` grows from 1 to 2.
+
+### Changed
+
+- **Light `warning` `32 95% 32%` → `29%` and `success` `142 72% 29%` → `25%`.**
+  The registry Alert paints its description at `/90`, where they read 4.48:1
+  and 4.22:1 on the card. They now read 5.12:1 and 5.14:1 on the card, and
+  4.93:1 and 4.95:1 on the framed workspace. Found by F4's axe sweep on the
+  not-connected notice.
+- **`muted-foreground` (light) `46.1%` → `43%` and `sidebar-foreground` (light)
+  `26.1%` → `20%`**: muted text on the muted surface read 4.39:1, and the
+  registry sidebar's `/70` group labels read 4.26:1. Both now clear AA (4.91:1 and
+  4.94:1). Dark values already passed and are unchanged.
+- **`destructive` re-valued for legibility** (light `0 84.2% 60.2%` → `0 74% 45%`;
+  dark `0 62.8% 45%` → `0 90% 67%`). As text on its own 5% tint the light value
+  read 3.53:1 and the dark value 3.25:1 on the page; both now clear 4.5:1,
+  including the registry Alert's `/90` description in dark (4.88:1).
+- **Dark `destructive-foreground` is `240 10% 5%`** (was `0 0% 98%`), so text on a
+  solid dark destructive fill reads 6.30:1 rather than 2.98:1. Nothing painted that
+  pair yet; the registry Button and Badge use `text-white` over `/60`.
+- **Dark `primary` is a light indigo with a dark foreground** (`243 75% 64%` on
+  white → `243 80% 72%` on `240 10% 5%`; `ring`, `sidebar-primary` and
+  `sidebar-ring` follow). `text-primary` is text in about 20 places; it read
+  3.71:1 on the framed workspace and now reads 5.36:1. The foreground on a primary
+  fill is 5.84:1. Light mode is unchanged.
+
+- **Shadow (elevation) tokens** (`src/shadow.ts`): the `panel` role — the resting
+  shadow a content container/panel sits at — exposed as the `shadow-panel`
+  Tailwind utility (raw var `--shadow-panel-raw` in `:root`/`.dark`, mapped
+  through `@theme inline`). Mode-aware (strengthened alpha on dark). Harvested
+  from the Omni SPA's container surface (Tailwind's subtle default `shadow`).
+  New public symbols: `SHADOW_TOKEN_ROLES`, `ShadowTokenRole`, `shadowCssVariable`.
+
 ## [0.1.0] — 2026-07-04
 
 ### Added

package/README.md

@@ -50,3 +50,19 @@ reads that same instance through `useTheme`.
 Governed by `docs/design/frontend-platform-doctrine.md` and
 `docs/design/operator-platform-contracts.md` (§6 package graph). Platform overview + the
 full adoption path: [`platform/frontend/README.md`](../README.md).
+
+## Unit 1 compatibility candidate (0.1.1, unpublished)
+
+Publish the existing motion/shadow/status exports in a new immutable candidate; explicitly declare the existing React DOM peer requirement.
+
+Use public package exports. No product checkout, application runtime or Universal source alias is required.
+React 19, React Router 7/Vite 6 and Next.js 16/Tailwind 4 are the Unit 1 verification targets.
+The existing React >=18 peer range is preserved; this unit does not certify every version in that range.
+For CSS consumers, import Tailwind first, then `@consciousclouds/tokens/styles/house.css`,
+`@consciousclouds/ui/styles/source.css`, and `@consciousclouds/shell-primitive/styles/source.css`
+when using the frame. The CSS source registrations scan installed `dist` files.
+Theme colors remain HSL channel triples (for example `145 65% 28%`), not full `hsl(...)` or `oklch(...)` values.
+Product fonts, logos, navigation, flavors and authority remain consumer-owned.
+Brand overrides target the document root; multiple independently themed embedded roots need a separately approved scoping contract.
+See `scripts/frontend-foundation-unit1/README.md` in the source repository for reproducible candidate verification,
+publication ordering and release limitations.

package/dist/index.d.ts

@@ -1,15 +1,21 @@
 /**
  * @consciousclouds/tokens — Token System (Layer 1 of the Frontend Platform).
  *
- * The universal design-token vocabulary (the 27 color roles including the
- * sidebar set, plus radius), typed role/value shapes, the CSS-variable
- * naming rule (tokenCssVariable), and theme state (ThemeProvider/useTheme
- * over next-themes). The house theme VALUES ship as CSS
- * (./styles/house.css) — this module carries vocabulary and behavior only:
- * no components, no brand meaning, no product.
+ * The universal design-token vocabulary (the 33 color roles including the
+ * status and sidebar sets, radius, the motion roles — durations/easings/offsets — and the
+ * shadow/elevation roles), typed role/value shapes, the CSS-variable naming rule
+ * (tokenCssVariable / motion*CssVariable / shadowCssVariable), and theme state
+ * (ThemeProvider/useTheme over next-themes). The house theme VALUES ship as CSS
+ * (./styles/house.css); the motion values ship as both JS (./motion.ts) and CSS
+ * mirror — this module carries vocabulary and behavior only: no components, no
+ * brand meaning, no product.
  */
 export { COLOR_TOKEN_ROLES, RADIUS_TOKEN_ROLE, TOKEN_ROLES, tokenCssVariable, } from "./schema.js";
 export type { ColorTokenRole, RadiusTokenRole, TokenRole, TokenValues, TokenMode, TokenModeValues, } from "./schema.js";
 export { ThemeProvider, useTheme } from "./theme-provider.js";
 export type { ThemeProviderProps } from "./theme-provider.js";
+export { MOTION_DURATION_ROLES, MOTION_EASING_ROLES, MOTION_OFFSET_ROLES, MOTION_TOKEN_ROLES, motionTokens, motionDurationCssVariable, motionEasingCssVariable, } from "./motion.js";
+export type { CubicBezier, MotionDurationRole, MotionEasingRole, MotionOffsetRole, MotionTokens, } from "./motion.js";
+export { SHADOW_TOKEN_ROLES, shadowCssVariable } from "./shadow.js";
+export type { ShadowTokenRole } from "./shadow.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,cAAc,EACd,eAAe,EACf,SAAS,EACT,WAAW,EACX,SAAS,EACT,eAAe,GAChB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,cAAc,EACd,eAAe,EACf,SAAS,EACT,WAAW,EACX,SAAS,EACT,eAAe,GAChB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAM9D,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,GACb,MAAM,aAAa,CAAC;AAMrB,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACpE,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,13 +1,25 @@
 /**
  * @consciousclouds/tokens — Token System (Layer 1 of the Frontend Platform).
  *
- * The universal design-token vocabulary (the 27 color roles including the
- * sidebar set, plus radius), typed role/value shapes, the CSS-variable
- * naming rule (tokenCssVariable), and theme state (ThemeProvider/useTheme
- * over next-themes). The house theme VALUES ship as CSS
- * (./styles/house.css) — this module carries vocabulary and behavior only:
- * no components, no brand meaning, no product.
+ * The universal design-token vocabulary (the 33 color roles including the
+ * status and sidebar sets, radius, the motion roles — durations/easings/offsets — and the
+ * shadow/elevation roles), typed role/value shapes, the CSS-variable naming rule
+ * (tokenCssVariable / motion*CssVariable / shadowCssVariable), and theme state
+ * (ThemeProvider/useTheme over next-themes). The house theme VALUES ship as CSS
+ * (./styles/house.css); the motion values ship as both JS (./motion.ts) and CSS
+ * mirror — this module carries vocabulary and behavior only: no components, no
+ * brand meaning, no product.
  */
 export { COLOR_TOKEN_ROLES, RADIUS_TOKEN_ROLE, TOKEN_ROLES, tokenCssVariable, } from "./schema.js";
 export { ThemeProvider, useTheme } from "./theme-provider.js";
+// Motion tokens — the doctrine's "motion curves" role, made concrete. JS-native
+// values (durations/easings/offsets) the motion runtime consumes directly, plus
+// the `--motion-*` CSS mirror in styles/house.css. Brand-neutral geometry;
+// overridable via @consciousclouds/brand's BrandMotion seam. See ./motion.ts.
+export { MOTION_DURATION_ROLES, MOTION_EASING_ROLES, MOTION_OFFSET_ROLES, MOTION_TOKEN_ROLES, motionTokens, motionDurationCssVariable, motionEasingCssVariable, } from "./motion.js";
+// Shadow (elevation) tokens — the resting shadow a content container/panel sits
+// at, harvested from the Omni container surface. A CSS-utility token like
+// color/radius (values in styles/house.css → the `shadow-<role>` utility);
+// mode-aware so it reads in both themes. See ./shadow.ts.
+export { SHADOW_TOKEN_ROLES, shadowCssVariable } from "./shadow.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAUrB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAUrB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG9D,gFAAgF;AAChF,gFAAgF;AAChF,2EAA2E;AAC3E,8EAA8E;AAC9E,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,aAAa,CAAC;AASrB,gFAAgF;AAChF,0EAA0E;AAC1E,2EAA2E;AAC3E,0DAA0D;AAC1D,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/dist/motion.d.ts

@@ -0,0 +1,77 @@
+/**
+ * The ConsciousClouds motion token vocabulary — the "motion curves" role the
+ * Frontend Platform doctrine reserves, made concrete. Motion is a shared
+ * mechanism every shell inherits.
+ *
+ * Unlike the color/radius roles (CSS strings resolved by Tailwind), motion
+ * tokens carry JS-native values — durations in seconds and easings as
+ * cubic-bézier tuples — because the motion runtime (`motion/react`) consumes
+ * them directly in a `transition` object. The same values ALSO surface as CSS
+ * custom properties (`--motion-*`, see styles/house.css) for CSS-driven
+ * animation. Motion is brand-neutral geometry: mode-independent (no `.dark`
+ * variant), and a Brand MAY override the defaults (see @consciousclouds/brand's
+ * BrandMotion seam) but never invents new roles.
+ *
+ * Ported from the Omni motion system's `ANIMATION` single source of truth
+ * (duration 0.18s · ease [0.25, 0.1, 0.25, 1] · enter y:8 · exit y:-4). The
+ * governance travels with the values: no component may inline a duration,
+ * curve, or offset — it reads them here.
+ */
+/** A cubic-bézier easing curve: the four control-point coordinates. */
+export type CubicBezier = [number, number, number, number];
+/** Duration token roles — a small, deliberate scale (values in seconds). */
+export declare const MOTION_DURATION_ROLES: readonly ["fast", "base", "slow"];
+/** A duration token role name. */
+export type MotionDurationRole = (typeof MOTION_DURATION_ROLES)[number];
+/**
+ * Easing token roles. `standard`/`ease-out` share the Omni curve (CSS `ease`);
+ * `linear` is uncurved.
+ */
+export declare const MOTION_EASING_ROLES: readonly ["standard", "ease-out", "linear"];
+/** An easing token role name. */
+export type MotionEasingRole = (typeof MOTION_EASING_ROLES)[number];
+/** Directional offset token roles — the enter/exit nudge distances (px, one axis). */
+export declare const MOTION_OFFSET_ROLES: readonly ["enter", "exit"];
+/** An offset token role name. */
+export type MotionOffsetRole = (typeof MOTION_OFFSET_ROLES)[number];
+/**
+ * The motion token roles, grouped by kind — the motion analogue of
+ * COLOR_TOKEN_ROLES / RADIUS_TOKEN_ROLE. A Brand override is typed against
+ * these role names; it never adds a role.
+ */
+export declare const MOTION_TOKEN_ROLES: {
+    readonly duration: readonly ["fast", "base", "slow"];
+    readonly easing: readonly ["standard", "ease-out", "linear"];
+    readonly offset: readonly ["enter", "exit"];
+};
+/** The shape of the motion token values (role → value, per kind). */
+export interface MotionTokens {
+    /** Durations in seconds, by role. */
+    duration: Record<MotionDurationRole, number>;
+    /** Easing curves as cubic-bézier tuples, by role. */
+    easing: Record<MotionEasingRole, CubicBezier>;
+    /** Enter/exit offsets — the y-nudge (px) applied on appear/disappear. */
+    offset: {
+        enter: {
+            y: number;
+        };
+        exit: {
+            y: number;
+        };
+    };
+}
+/**
+ * The house motion values — the single source of truth every motion component
+ * imports. Kept as JS values (not CSS strings) so `motion/react` can consume
+ * them directly; the CSS mirror lives in styles/house.css.
+ */
+export declare const motionTokens: MotionTokens;
+/**
+ * The CSS custom-property name for a motion duration role (mirrors
+ * tokenCssVariable for color/radius). Keeps the `--motion-*` names in
+ * styles/house.css in one typed vocabulary.
+ */
+export declare function motionDurationCssVariable(role: MotionDurationRole): `--motion-duration-${MotionDurationRole}`;
+/** The CSS custom-property name for a motion easing role. */
+export declare function motionEasingCssVariable(role: MotionEasingRole): `--motion-ease-${MotionEasingRole}`;
+//# sourceMappingURL=motion.d.ts.map

package/dist/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,uEAAuE;AACvE,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3D,4EAA4E;AAC5E,eAAO,MAAM,qBAAqB,mCAAoC,CAAC;AAEvE,kCAAkC;AAClC,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6CAA8C,CAAC;AAE/E,iCAAiC;AACjC,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,sFAAsF;AACtF,eAAO,MAAM,mBAAmB,4BAA6B,CAAC;AAE9D,iCAAiC;AACjC,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,qEAAqE;AACrE,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,QAAQ,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC7C,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAC9C,yEAAyE;IACzE,MAAM,EAAE;QACN,KAAK,EAAE;YAAE,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACrB,IAAI,EAAE;YAAE,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KACrB,CAAC;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,YAqB1B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,kBAAkB,GACvB,qBAAqB,kBAAkB,EAAE,CAE3C;AAED,6DAA6D;AAC7D,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,gBAAgB,GACrB,iBAAiB,gBAAgB,EAAE,CAErC"}

package/dist/motion.js

@@ -0,0 +1,78 @@
+/**
+ * The ConsciousClouds motion token vocabulary — the "motion curves" role the
+ * Frontend Platform doctrine reserves, made concrete. Motion is a shared
+ * mechanism every shell inherits.
+ *
+ * Unlike the color/radius roles (CSS strings resolved by Tailwind), motion
+ * tokens carry JS-native values — durations in seconds and easings as
+ * cubic-bézier tuples — because the motion runtime (`motion/react`) consumes
+ * them directly in a `transition` object. The same values ALSO surface as CSS
+ * custom properties (`--motion-*`, see styles/house.css) for CSS-driven
+ * animation. Motion is brand-neutral geometry: mode-independent (no `.dark`
+ * variant), and a Brand MAY override the defaults (see @consciousclouds/brand's
+ * BrandMotion seam) but never invents new roles.
+ *
+ * Ported from the Omni motion system's `ANIMATION` single source of truth
+ * (duration 0.18s · ease [0.25, 0.1, 0.25, 1] · enter y:8 · exit y:-4). The
+ * governance travels with the values: no component may inline a duration,
+ * curve, or offset — it reads them here.
+ */
+/** Duration token roles — a small, deliberate scale (values in seconds). */
+export const MOTION_DURATION_ROLES = ["fast", "base", "slow"];
+/**
+ * Easing token roles. `standard`/`ease-out` share the Omni curve (CSS `ease`);
+ * `linear` is uncurved.
+ */
+export const MOTION_EASING_ROLES = ["standard", "ease-out", "linear"];
+/** Directional offset token roles — the enter/exit nudge distances (px, one axis). */
+export const MOTION_OFFSET_ROLES = ["enter", "exit"];
+/**
+ * The motion token roles, grouped by kind — the motion analogue of
+ * COLOR_TOKEN_ROLES / RADIUS_TOKEN_ROLE. A Brand override is typed against
+ * these role names; it never adds a role.
+ */
+export const MOTION_TOKEN_ROLES = {
+    duration: MOTION_DURATION_ROLES,
+    easing: MOTION_EASING_ROLES,
+    offset: MOTION_OFFSET_ROLES,
+};
+/**
+ * The house motion values — the single source of truth every motion component
+ * imports. Kept as JS values (not CSS strings) so `motion/react` can consume
+ * them directly; the CSS mirror lives in styles/house.css.
+ */
+export const motionTokens = {
+    duration: {
+        /** The Omni page/menu-transition value — snappy, sub-perceptual. */
+        fast: 0.18,
+        /** The default for most element-level transitions. */
+        base: 0.3,
+        /** Deliberate, for larger surfaces. */
+        slow: 0.5,
+    },
+    easing: {
+        /** The Omni curve — CSS `ease`; the platform default. */
+        standard: [0.25, 0.1, 0.25, 1],
+        /** Same curve, named for intent (accelerate-out). */
+        "ease-out": [0.25, 0.1, 0.25, 1],
+        /** Uncurved. */
+        linear: [0, 0, 1, 1],
+    },
+    offset: {
+        enter: { y: 8 },
+        exit: { y: -4 },
+    },
+};
+/**
+ * The CSS custom-property name for a motion duration role (mirrors
+ * tokenCssVariable for color/radius). Keeps the `--motion-*` names in
+ * styles/house.css in one typed vocabulary.
+ */
+export function motionDurationCssVariable(role) {
+    return `--motion-duration-${role}`;
+}
+/** The CSS custom-property name for a motion easing role. */
+export function motionEasingCssVariable(role) {
+    return `--motion-ease-${role}`;
+}
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAKH,4EAA4E;AAC5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAU,CAAC;AAKvE;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAU,CAAC;AAK/E,sFAAsF;AACtF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAK9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;CACnB,CAAC;AAeX;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAiB;IACxC,QAAQ,EAAE;QACR,oEAAoE;QACpE,IAAI,EAAE,IAAI;QACV,sDAAsD;QACtD,IAAI,EAAE,GAAG;QACT,uCAAuC;QACvC,IAAI,EAAE,GAAG;KACV;IACD,MAAM,EAAE;QACN,yDAAyD;QACzD,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9B,qDAAqD;QACrD,UAAU,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAChC,gBAAgB;QAChB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACrB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;QACf,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;KAChB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CACvC,IAAwB;IAExB,OAAO,qBAAqB,IAAI,EAAE,CAAC;AACrC,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,uBAAuB,CACrC,IAAsB;IAEtB,OAAO,iBAAiB,IAAI,EAAE,CAAC;AACjC,CAAC"}

package/dist/schema.d.ts

@@ -8,8 +8,11 @@
  * `"243 75% 59%"`) so `hsl(var(--role))` composes; the radius role holds a
  * CSS length (e.g. `"0.625rem"`).
  */
-/** The 27 color token roles: the 19 core shadcn roles + the 8-role sidebar set. */
-export declare const COLOR_TOKEN_ROLES: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "sidebar-background", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
+/**
+ * The 33 color token roles: the 19 core shadcn roles, the 6-role status set,
+ * and the 8-role sidebar set.
+ */
+export declare const COLOR_TOKEN_ROLES: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "success", "success-foreground", "warning", "warning-foreground", "info", "info-foreground", "sidebar-background", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
 /** A color token role name (CSS variable name without the `--` prefix). */
 export type ColorTokenRole = (typeof COLOR_TOKEN_ROLES)[number];
 /** The radius token role — a CSS length; `sm`/`md`/`lg` derive from it. */
@@ -18,7 +21,7 @@ export type RadiusTokenRole = typeof RADIUS_TOKEN_ROLE;
 /** Every token role a theme (or a Brand override) may assign a value to. */
 export type TokenRole = ColorTokenRole | RadiusTokenRole;
 /** All token roles, in declaration order (colors first, then radius). */
-export declare const TOKEN_ROLES: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "sidebar-background", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring", "radius"];
+export declare const TOKEN_ROLES: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "success", "success-foreground", "warning", "warning-foreground", "info", "info-foreground", "sidebar-background", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring", "radius"];
 /**
  * A partial assignment of values to token roles — the shape of a Brand's
  * token overrides. Color values are HSL channel triples; radius is a length.

package/dist/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,mFAAmF;AACnF,eAAO,MAAM,iBAAiB,udA8BpB,CAAC;AAEX,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,EAAG,QAAiB,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,OAAO,iBAAiB,CAAC;AAEvD,4EAA4E;AAC5E,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,eAAe,CAAC;AAEzD,yEAAyE;AACzE,eAAO,MAAM,WAAW,ieAAqD,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAE7D,iFAAiF;AACjF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAEtE,+EAA+E;AAC/E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,KAAK,SAAS,EAAE,CAElE"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,ojBAqCpB,CAAC;AAEX,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,EAAG,QAAiB,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,OAAO,iBAAiB,CAAC;AAEvD,4EAA4E;AAC5E,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,eAAe,CAAC;AAEzD,yEAAyE;AACzE,eAAO,MAAM,WAAW,8jBAAqD,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAE7D,iFAAiF;AACjF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAEtE,+EAA+E;AAC/E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,KAAK,SAAS,EAAE,CAElE"}

package/dist/schema.js

@@ -8,7 +8,10 @@
  * `"243 75% 59%"`) so `hsl(var(--role))` composes; the radius role holds a
  * CSS length (e.g. `"0.625rem"`).
  */
-/** The 27 color token roles: the 19 core shadcn roles + the 8-role sidebar set. */
+/**
+ * The 33 color token roles: the 19 core shadcn roles, the 6-role status set,
+ * and the 8-role sidebar set.
+ */
 export const COLOR_TOKEN_ROLES = [
     // Core surface + semantic roles.
     "background",
@@ -30,6 +33,13 @@ export const COLOR_TOKEN_ROLES = [
     "border",
     "input",
     "ring",
+    // Status set — success / warning / info, each with a foreground for solid fills.
+    "success",
+    "success-foreground",
+    "warning",
+    "warning-foreground",
+    "info",
+    "info-foreground",
     // Sidebar set (the operator chrome).
     "sidebar-background",
     "sidebar-foreground",

package/dist/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,mFAAmF;AACnF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,iCAAiC;IACjC,YAAY;IACZ,YAAY;IACZ,MAAM;IACN,iBAAiB;IACjB,SAAS;IACT,oBAAoB;IACpB,SAAS;IACT,oBAAoB;IACpB,WAAW;IACX,sBAAsB;IACtB,OAAO;IACP,kBAAkB;IAClB,QAAQ;IACR,mBAAmB;IACnB,aAAa;IACb,wBAAwB;IACxB,QAAQ;IACR,OAAO;IACP,MAAM;IACN,qCAAqC;IACrC,oBAAoB;IACpB,oBAAoB;IACpB,iBAAiB;IACjB,4BAA4B;IAC5B,gBAAgB;IAChB,2BAA2B;IAC3B,gBAAgB;IAChB,cAAc;CACN,CAAC;AAKX,2EAA2E;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAiB,CAAC;AAOnD,yEAAyE;AACzE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAG,iBAAiB,EAAE,iBAAiB,CAAU,CAAC;AAc9E,+EAA+E;AAC/E,MAAM,UAAU,gBAAgB,CAAC,IAAe;IAC9C,OAAO,KAAK,IAAI,EAAE,CAAC;AACrB,CAAC"}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,iCAAiC;IACjC,YAAY;IACZ,YAAY;IACZ,MAAM;IACN,iBAAiB;IACjB,SAAS;IACT,oBAAoB;IACpB,SAAS;IACT,oBAAoB;IACpB,WAAW;IACX,sBAAsB;IACtB,OAAO;IACP,kBAAkB;IAClB,QAAQ;IACR,mBAAmB;IACnB,aAAa;IACb,wBAAwB;IACxB,QAAQ;IACR,OAAO;IACP,MAAM;IACN,iFAAiF;IACjF,SAAS;IACT,oBAAoB;IACpB,SAAS;IACT,oBAAoB;IACpB,MAAM;IACN,iBAAiB;IACjB,qCAAqC;IACrC,oBAAoB;IACpB,oBAAoB;IACpB,iBAAiB;IACjB,4BAA4B;IAC5B,gBAAgB;IAChB,2BAA2B;IAC3B,gBAAgB;IAChB,cAAc;CACN,CAAC;AAKX,2EAA2E;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAiB,CAAC;AAOnD,yEAAyE;AACzE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAG,iBAAiB,EAAE,iBAAiB,CAAU,CAAC;AAc9E,+EAA+E;AAC/E,MAAM,UAAU,gBAAgB,CAAC,IAAe;IAC9C,OAAO,KAAK,IAAI,EAAE,CAAC;AACrB,CAAC"}

package/dist/shadow.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The ConsciousClouds shadow (elevation) token vocabulary — the resting shadow
+ * a content container/panel sits at, made a universal role.
+ *
+ * Like the color/radius roles (and UNLIKE motion), a shadow token is a CSS
+ * string consumed as a Tailwind utility, so it follows the color pattern rather
+ * than motion's JS-value one: the house VALUES live in styles/house.css
+ * (`--shadow-<role>-raw` in `:root`/`.dark`, mapped to the `shadow-<role>`
+ * utility through the `@theme inline` block); this module carries only the role
+ * vocabulary and the CSS-variable naming rule — no values. A Brand may override
+ * the values (typed against these role names) but never invents new roles.
+ *
+ * The `panel` role is the HARVEST of the Omni SPA's container surface (Tailwind's
+ * subtle default `shadow` — two hairline layers, "a bit of a shadow"): the one
+ * resting elevation every content card/panel — including the AI conversation
+ * container — sits at. Mode-aware (the raw var flips on `.dark`, strengthened so
+ * it reads on dark surfaces) so the token is genuinely universal, not light-only.
+ */
+/**
+ * Shadow (elevation) token roles — a small, deliberate scale keyed by container
+ * ROLE (not size), the elevation analogue of COLOR_TOKEN_ROLES. `panel` is the
+ * resting content-container shadow; `overlay` is the floating elevation of a
+ * surface that sits ABOVE the content (a drawer over a scrim — the assistant's
+ * below-`lg` drawer). Further elevations are added here as roles before they
+ * are used, never inlined.
+ */
+export declare const SHADOW_TOKEN_ROLES: readonly ["panel", "overlay"];
+/** A shadow token role name. */
+export type ShadowTokenRole = (typeof SHADOW_TOKEN_ROLES)[number];
+/**
+ * The CSS custom-property name holding a shadow role's raw value (mirrors
+ * tokenCssVariable / motion*CssVariable). The `-raw` var is the source of truth
+ * in `:root`/`.dark`; the `@theme inline` block maps it to the `shadow-<role>`
+ * Tailwind utility (leaving Tailwind's own `--shadow-<role>` theme namespace
+ * uncollided). Consume the token as the `shadow-<role>` class in almost all
+ * cases; reach for this var only for hand-written CSS.
+ */
+export declare function shadowCssVariable(role: ShadowTokenRole): `--shadow-${ShadowTokenRole}-raw`;
+//# sourceMappingURL=shadow.d.ts.map

package/dist/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../src/shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAC;AAEhE,gCAAgC;AAChC,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,eAAe,GAAG,YAAY,eAAe,MAAM,CAE1F"}

package/dist/shadow.js

@@ -0,0 +1,39 @@
+/**
+ * The ConsciousClouds shadow (elevation) token vocabulary — the resting shadow
+ * a content container/panel sits at, made a universal role.
+ *
+ * Like the color/radius roles (and UNLIKE motion), a shadow token is a CSS
+ * string consumed as a Tailwind utility, so it follows the color pattern rather
+ * than motion's JS-value one: the house VALUES live in styles/house.css
+ * (`--shadow-<role>-raw` in `:root`/`.dark`, mapped to the `shadow-<role>`
+ * utility through the `@theme inline` block); this module carries only the role
+ * vocabulary and the CSS-variable naming rule — no values. A Brand may override
+ * the values (typed against these role names) but never invents new roles.
+ *
+ * The `panel` role is the HARVEST of the Omni SPA's container surface (Tailwind's
+ * subtle default `shadow` — two hairline layers, "a bit of a shadow"): the one
+ * resting elevation every content card/panel — including the AI conversation
+ * container — sits at. Mode-aware (the raw var flips on `.dark`, strengthened so
+ * it reads on dark surfaces) so the token is genuinely universal, not light-only.
+ */
+/**
+ * Shadow (elevation) token roles — a small, deliberate scale keyed by container
+ * ROLE (not size), the elevation analogue of COLOR_TOKEN_ROLES. `panel` is the
+ * resting content-container shadow; `overlay` is the floating elevation of a
+ * surface that sits ABOVE the content (a drawer over a scrim — the assistant's
+ * below-`lg` drawer). Further elevations are added here as roles before they
+ * are used, never inlined.
+ */
+export const SHADOW_TOKEN_ROLES = ["panel", "overlay"];
+/**
+ * The CSS custom-property name holding a shadow role's raw value (mirrors
+ * tokenCssVariable / motion*CssVariable). The `-raw` var is the source of truth
+ * in `:root`/`.dark`; the `@theme inline` block maps it to the `shadow-<role>`
+ * Tailwind utility (leaving Tailwind's own `--shadow-<role>` theme namespace
+ * uncollided). Consume the token as the `shadow-<role>` class in almost all
+ * cases; reach for this var only for hand-written CSS.
+ */
+export function shadowCssVariable(role) {
+    return `--shadow-${role}-raw`;
+}
+//# sourceMappingURL=shadow.js.map

package/dist/shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../src/shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAC;AAKhE;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB,CAAC,IAAqB;IACrD,OAAO,YAAY,IAAI,MAAM,CAAC;AAChC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consciousclouds/tokens",
-  "version": "0.1.0",
-  "description": "ConsciousClouds Token System — the universal design-token vocabulary (27 color roles incl. the sidebar set, plus radius), the house theme values, and theme state (ThemeProvider over next-themes). Layer 1 of the Frontend Platform; carries no components, no brand meaning, no product.",
+  "version": "0.1.1",
+  "description": "ConsciousClouds Token System \u2014 the universal design-token vocabulary (27 color roles incl. the sidebar set, plus radius), the house theme values, and theme state (ThemeProvider over next-themes). Layer 1 of the Frontend Platform; carries no components, no brand meaning, no product.",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,18 +13,26 @@
     },
     "./styles/house.css": "./styles/house.css"
   },
-  "files": ["dist", "styles", "README.md", "CHANGELOG.md", "LICENSE"],
+  "files": [
+    "dist",
+    "styles",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "clean": "rm -rf dist",
     "type-check": "tsc --noEmit",
-    "prepublishOnly": "bun run clean && bun run build && bun run type-check"
+    "prepublishOnly": "bun run clean && bun run build && bun run type-check",
+    "prepack": "bun run clean && bun run build && bun run type-check"
   },
   "dependencies": {
     "next-themes": "^0.4.6"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",

package/styles/house.css

@@ -33,6 +33,15 @@
   --color-accent-foreground: hsl(var(--accent-foreground));
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
+  /* Status roles — the states an operator surface reports that are neither
+   * brand (primary) nor failure (destructive). Each pairs with a foreground for
+   * text on a solid fill; the role itself is AA-legible as text on the page. */
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
@@ -50,6 +59,19 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
 
+  /* Type — one step below Tailwind's `text-xs`, for eyebrows, section labels and
+   * dense metadata (the `text-2xs` utility). The scale's only addition: every
+   * other size is Tailwind's own, so an off-scale `text-[11px]` has a home. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+
+  /* Elevation — the resting shadow a content container/panel sits at, exposed
+   * as the `shadow-panel` utility. References the raw var below so `.dark`
+   * flips it (same shape as `--color-*: hsl(var(--*))`). See src/shadow.ts. */
+  --shadow-panel: var(--shadow-panel-raw);
+  /* The floating elevation of a surface above the content (`shadow-overlay`). */
+  --shadow-overlay: var(--shadow-overlay-raw);
+
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
 
@@ -85,24 +107,60 @@
   --secondary: 240 4.8% 95.9%;
   --secondary-foreground: 240 5.9% 10%;
   --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
+  /* 43% (was 46.1%): AA on the muted surface itself (avatar fallbacks, muted
+   * chips), where 46.1% read 4.39:1. Now 4.91:1 on muted, 5.40:1 on white. */
+  --muted-foreground: 240 3.8% 43%;
   --accent: 243 30% 96%;
   --accent-foreground: 243 75% 45%;
-  --destructive: 0 84.2% 60.2%;
+  /* Every text-bearing role below clears WCAG AA (4.5:1) as text on the page
+   * background AND on its own 5% tint (the alert/banner surface), and at the /90
+   * the registry Alert gives its description, on the card and on the framed
+   * workspace. The former destructive (0 84.2% 60.2%) read 3.53:1 on that tint;
+   * warning at 32% and success at 29% read 4.48:1 and 4.22:1 at /90. */
+  --destructive: 0 74% 45%;
   --destructive-foreground: 0 0% 98%;
+  --success: 142 72% 25%;
+  --success-foreground: 0 0% 100%;
+  --warning: 32 95% 29%;
+  --warning-foreground: 0 0% 100%;
+  --info: 221 83% 45%;
+  --info-foreground: 0 0% 100%;
   --border: 240 5.9% 90%;
   --input: 240 5.9% 90%;
   --ring: 243 75% 59%;
   --radius: 0.625rem;
 
   --sidebar-background: 240 5% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
+  /* 20% (was 26.1%): the registry sidebar paints group labels at /70, which read
+   * 4.26:1; now 4.94:1. */
+  --sidebar-foreground: 240 5.3% 20%;
   --sidebar-primary: 243 75% 59%;
   --sidebar-primary-foreground: 0 0% 98%;
   --sidebar-accent: 243 30% 96%;
   --sidebar-accent-foreground: 243 75% 45%;
   --sidebar-border: 240 5.9% 90%;
   --sidebar-ring: 243 75% 59%;
+
+  /* Motion — the CSS mirror of the motion tokens (see src/motion.ts). Motion is
+   * brand-neutral geometry, so these live in :root only (no .dark variant). The
+   * JS-native values drive motion/react; these vars drive CSS-native animation. */
+  --motion-duration-fast: 0.18s;
+  --motion-duration-base: 0.3s;
+  --motion-duration-slow: 0.5s;
+  --motion-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --motion-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --motion-ease-linear: linear;
+  --motion-enter-y: 8px;
+  --motion-exit-y: -4px;
+
+  /* Elevation — the container/panel resting shadow (mapped to the `shadow-panel`
+   * utility in @theme above). The LITERAL harvested from the Omni SPA's content
+   * card (Tailwind's subtle default `shadow`): two hairline layers, "a bit of a
+   * shadow". The one resting elevation every content container sits at. */
+  --shadow-panel-raw: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* The floating overlay elevation: Tailwind's `shadow-2xl` value, which the
+   * assistant's drawer used inline before this role existed (no visual change in light). */
+  --shadow-overlay-raw: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }
 
 .dark {
@@ -112,28 +170,50 @@
   --card-foreground: 0 0% 98%;
   --popover: 240 10% 7%;
   --popover-foreground: 0 0% 98%;
-  --primary: 243 75% 64%;
-  --primary-foreground: 0 0% 100%;
+  /* Dark primary is a LIGHT indigo with a dark foreground (the registry's dark
+   * shape). The former 243 75% 64% under white read 4.05:1 as text on the page
+   * and 3.71:1 on the framed workspace, and text-primary is text in ~20 places
+   * (eyebrows, links, chips). Now 5.36:1 as text; 5.84:1 for its foreground. */
+  --primary: 243 80% 72%;
+  --primary-foreground: 240 10% 5%;
   --secondary: 240 6% 14%;
   --secondary-foreground: 0 0% 98%;
   --muted: 240 6% 14%;
   --muted-foreground: 240 5% 64.9%;
   --accent: 243 25% 16%;
   --accent-foreground: 243 80% 78%;
-  --destructive: 0 62.8% 45%;
-  --destructive-foreground: 0 0% 98%;
+  /* Dark: the roles are light enough to read as text on the dark surfaces (the
+   * former destructive, 0 62.8% 45%, read 3.25:1). Solid fills carry a dark
+   * foreground (destructive-foreground 6.30:1 on a solid fill). The registry's
+   * filled destructive controls paint text-white over /60 instead (ui
+   * Button/Badge, 6.78:1). Destructive
+   * is 67% so the registry Alert's /90 description still clears 4.5:1 on the
+   * framed workspace (4.88:1). */
+  --destructive: 0 90% 67%;
+  --destructive-foreground: 240 10% 5%;
+  --success: 142 69% 58%;
+  --success-foreground: 240 10% 5%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 240 10% 5%;
+  --info: 213 94% 68%;
+  --info-foreground: 240 10% 5%;
   --border: 240 6% 18%;
   --input: 240 6% 18%;
-  --ring: 243 75% 64%;
+  --ring: 243 80% 72%;
 
   --sidebar-background: 240 8% 9%;
   --sidebar-foreground: 240 4.8% 90%;
-  --sidebar-primary: 243 75% 64%;
-  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-primary: 243 80% 72%;
+  --sidebar-primary-foreground: 240 10% 5%;
   --sidebar-accent: 243 25% 16%;
   --sidebar-accent-foreground: 243 80% 78%;
   --sidebar-border: 240 6% 18%;
-  --sidebar-ring: 243 75% 64%;
+  --sidebar-ring: 243 80% 72%;
+
+  /* Same geometry as light, deeper alpha — a 10%-black shadow vanishes against a
+   * dark surface, so the elevation is strengthened to keep it readable. */
+  --shadow-panel-raw: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-overlay-raw: 0 25px 50px -12px rgb(0 0 0 / 0.6);
 }
 
 @layer base {