@cosxai/ui 0.24.0 → 1.0.0-alpha.0

package/package.json

@@ -1,18 +1,23 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.24.0",
-  "description": "COSX design system \u2014 React 19 component primitives shared across product-meta and other consumers",
+  "version": "1.0.0-alpha.0",
+  "description": "COSX Design System 3.0 — tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./src/styles/index.css"
+    "./styles.css": "./src/styles.css",
+    "./theme.css": "./src/theme.css",
+    "./tokens/*": "./src/tokens/*"
   },
   "files": [
     "src",
-    "README.md"
+    "!src/**/*.test.ts",
+    "README.md",
+    "CHANGELOG.md",
+    "NOTICE"
   ],
   "repository": {
     "type": "git",
@@ -24,15 +29,36 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "check:css": "tailwindcss -i test/fixture.css -o test/out.css"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4",
+    "@types/node": "^26.6.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "typescript": "^5.6.0"
+    "tailwindcss": "^4",
+    "typescript": "^5.6.0",
+    "vitest": "^3.2.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/noto-sans-sc": "^5.3.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   }
 }

package/src/fonts.css

@@ -0,0 +1,20 @@
+/* @cosxai/ui — self-hosted fonts.
+ *
+ * The 3.0 tokens load Geist and Noto Sans SC from Google Fonts
+ * (tokens/fonts.css in the design system, not shipped here). The kit
+ * serves them from the consumer's own bundle instead: Fontsource
+ * variable builds, OFL-1.1, split by unicode range so a page downloads
+ * only the glyphs it shows.
+ *
+ * Fontsource names the families "… Variable"; the stacks below put those
+ * first and keep the design system's own names after them. Loaded after
+ * the tokens (styles.css), so these stacks are the ones in effect.
+ */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/noto-sans-sc";
+
+:root {
+  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-cjk: "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+}

package/src/index.ts

@@ -1,25 +1,8 @@
-// Entry point — re-exports everything consumers need.
-// Components, hooks, theme, and helpers are organised under
-// /primitives, /layout, /actionbar, /command, /dialogs, /hooks,
-// /theme, /pwa, /lib. As the kit grows, each phase adds exports
-// here. Consumers pull individual modules (`import { Button }
-// from "@cosxai/ui"`) or copy source files directly per the
-// shadcn-style distribution model.
-
-export * from "./primitives";
-export * from "./lib/cn";
-export * from "./lib/time-utils";
-export * from "./theme";
-export * from "./hooks";
-export * from "./layout";
-export * from "./dialogs";
-export * from "./actionbar";
-export * from "./command";
-export * from "./pwa";
-export * from "./editorial";
-export * from "./neobrutalism";
-export * from "./ambient";
-export * from "./terminal";
-export * from "./bento";
-export * from "./riso";
-export * from "./sketch";
+/**
+ * @cosxai/ui 1.x — the COSX Design System 3.0 in React.
+ *
+ * Foundations: import "@cosxai/ui/styles.css" (tokens + fonts) and, in a
+ * Tailwind v4 app, "@cosxai/ui/theme.css". Components arrive in the 1.0
+ * alphas (docs/workdocs/2026-09-29_feature-ui-1.0).
+ */
+export { cn } from './lib/cn';

package/src/lib/cn.ts

@@ -1,7 +1,24 @@
-// Lightweight className merge. Filters falsy values and joins with a
-// single space. Sufficient for component composition; if a consumer
-// needs tailwind-merge / clsx semantics they can swap implementations
-// without touching call sites.
-export function cn(...inputs: Array<string | false | null | undefined>): string {
-  return inputs.filter(Boolean).join(" ");
+import { clsx, type ClassValue } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * cn — join class names and let the later Tailwind class win on conflict
+ * (`cn('p-2', cond && 'p-4')` → `p-4`).
+ *
+ * tailwind-merge only knows Tailwind's default scales; the kit's theme
+ * (theme.css) replaces font sizes with its own names, taught here so
+ * `text-ui` and `text-fg` are not mistaken for each other (one is a
+ * size, one a colour).
+ */
+const merge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ['meta', 'small', 'ui', 'body', 'h3', 'lede', 'title', 'figure', 'h2', 'h1', 'display'],
+      radius: ['xs', 'sm', 'md', 'lg', 'xl', 'pill'],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]): string {
+  return merge(clsx(inputs));
 }

package/src/styles.css

@@ -0,0 +1,17 @@
+/* @cosxai/ui — the COSX Design System 3.0 foundations.
+ *
+ * tokens/ are the design system's own files, copied unchanged from the
+ * "COSX Design System 3.0" project. Edit them there and copy again; the
+ * kit's additions live in fonts.css and theme.css.
+ *
+ * Ink (dark) mode: set data-mode="ink" on <html>, or put .ink-mode on a
+ * subtree (colors.css).
+ */
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/typography-cjk.css";
+@import "./tokens/spacing.css";
+@import "./tokens/elevation.css";
+@import "./tokens/motion.css";
+@import "./tokens/compat.css";
+@import "./fonts.css";

package/src/theme.css

@@ -0,0 +1,132 @@
+/* @cosxai/ui — Tailwind v4 theme for the COSX Design System 3.0.
+ *
+ *   @import "tailwindcss";
+ *   @import "@cosxai/ui/theme.css";
+ *   @import "@cosxai/ui/styles.css";
+ *   @source "../node_modules/@cosxai/ui/src";   (so the kit's classes are generated)
+ *
+ * Utilities point at the 3.0 variables ("inline"), so ink mode —
+ * data-mode="ink" / .ink-mode — switches them with no dark: variants.
+ *
+ * Tailwind's own palette, radii, shadows, fonts and easings are cleared:
+ * only what the design system defines exists (no bg-blue-500, no
+ * shadow-lg — 3.0 has no shadows).
+ *
+ * Names never collide with a 3.0 variable unless the value is the same
+ * (theme.test.ts). In particular font sizes avoid --text-primary /
+ * --text-secondary / --text-label, which are colours in 3.0.
+ */
+@theme inline {
+  --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --font-*: initial;
+  --ease-*: initial;
+  --text-*: initial;
+  --font-weight-*: initial;
+  --tracking-*: initial;
+
+  /* Materials — fixed, do not switch with ink mode */
+  --color-paper: var(--paper);
+  --color-linen: var(--linen);
+  --color-sunk-2: var(--sunk-2);
+  --color-sunk-3: var(--sunk-3);
+  --color-ink: var(--ink);
+  --color-ink-raised: var(--ink-raised);
+  --color-grey: var(--grey);
+  --color-grey-inverse: var(--grey-inverse);
+
+  /* The yellow — one hue, by area */
+  --color-yellow: var(--yellow);
+  --color-yellow-accent: var(--yellow-accent);
+  --color-yellow-accent-hover: var(--yellow-accent-hover);
+  --color-yellow-light: var(--yellow-light);
+  --color-yellow-hover: var(--yellow-hover);
+  --color-yellow-1: var(--yellow-1);
+  --color-yellow-2: var(--yellow-2);
+  --color-yellow-3: var(--yellow-3);
+  --color-yellow-4: var(--yellow-4);
+  --color-yellow-5: var(--yellow-5);
+  --color-yellow-wash-12: var(--yellow-12);
+  --color-yellow-wash-20: var(--yellow-20);
+  --color-yellow-wash-32: var(--yellow-32);
+  --color-yellow-wash-50: var(--yellow-50);
+  --color-marker: var(--marker);
+
+  /* Semantic — switch with ink mode. Product code uses these. */
+  --color-page: var(--bg-page);
+  --color-sunk: var(--bg-sunk);
+  --color-well: var(--bg-well);
+  --color-chrome: var(--bg-chrome);
+  --color-field: var(--bg-field);
+  --color-fg: var(--text-primary);
+  --color-fg-secondary: var(--text-secondary);
+  --color-fg-label: var(--text-label);
+  --color-fg-on-yellow-secondary: var(--text-on-yellow-secondary);
+  --color-rule: var(--rule);
+  --color-rule-soft: var(--rule-soft);
+  --color-hover: var(--hover);
+  --color-scrim: var(--scrim);
+
+  /* On an ink surface inside a paper page */
+  --color-inv: var(--inv-bg);
+  --color-inv-raised: var(--inv-bg-raised);
+  --color-inv-fg: var(--inv-text);
+  --color-inv-fg-secondary: var(--inv-text-secondary);
+  --color-inv-rule: var(--inv-rule);
+
+  /* Product status: yellow, ink and one red. Progress is an ink outline and
+     complete a grey dot — they take no colour of their own. */
+  --color-attention: var(--status-attention);
+  --color-attention-wash: var(--status-attention-wash);
+  --color-error: var(--status-error);
+  --color-error-text: var(--status-error-text);
+  --color-error-wash: var(--status-error-wash);
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-white: #fff;
+
+  /* Radius ladder — same names and values as 3.0 spacing.css */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+
+  /* One family. Same stacks as fonts.css (the ones in effect): font-sans
+     for Latin, font-sans-cjk for Chinese pages (Geist for Latin and
+     figures, Noto Sans SC for hanzi). */
+  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Type scale (typography.css). Product UI body is 14px, content 15px. */
+  --text-meta: 12px;
+  --text-small: 13.5px;
+  --text-ui: 14px;
+  --text-body: 15px;
+  --text-h3: 18px;
+  --text-lede: 20px;
+  --text-title: 22px;
+  --text-figure: 32px;
+  --text-h2: var(--size-h2);
+  --text-h1: var(--size-h1);
+  --text-display: var(--size-display);
+
+  --tracking-display: -0.025em;
+  --tracking-heading: -0.015em;
+  --tracking-figure: -0.03em;
+
+  /* Motion — flat for state, ease-out for entry; nothing bounces */
+  --ease-standard: cubic-bezier(.2,0,.2,1);
+  --ease-out: cubic-bezier(.16,1,.3,1);
+  --ease-in: cubic-bezier(.4,0,1,1);
+}

package/src/tokens/colors.css

@@ -0,0 +1,112 @@
+/* COSX 3.0 — colour. Warm white is the page, ink is every letter, yellow is the only
+   thing that is neither. Every value has one job. */
+:root {
+  /* Light end */
+  --paper:  #FEFDFB;  /* the page. Ink 18.57:1 */
+  --linen:  #F5F2EC;  /* sunk 1 — sidebars, table heads, inputs */
+  --sunk-2: #ECE9E3;  /* wells, disabled fields */
+  --sunk-3: #E3E0DA;  /* deepest chrome */
+
+  /* Dark end */
+  --ink:        #111111;  /* all type. The dark ground. */
+  --ink-raised: #1B1B1B;  /* raised surface on the ink ground */
+
+  /* Two greys, one per end — never interchangeable */
+  --grey:         #696969;  /* secondary text on paper. 5.40:1 */
+  --grey-inverse: #9E9E9E;  /* secondary text on ink.   7.05:1 */
+
+  /* Structure — ink at low alpha adopts whichever paper it sits on */
+  --rule:              rgba(17,17,17,.10);
+  --rule-soft:         rgba(17,17,17,.06);
+  --rule-inverse:      rgba(245,242,236,.18);
+  --rule-soft-inverse: rgba(245,242,236,.09);
+  --hover:             #F7F6F4;             /* ink 3% over paper. Hover goes darker. */
+  --scrim:             rgba(17,17,17,.40);
+
+  /* The yellow. One material: a warm paper, OKLCH L .92 C .09 h 85. Every variant changes
+     lightness only, never chroma, so all of them read as the same sheet at different depths.
+     Grounds, selected tabs, panels on ink. It never writes a letter on paper. Contrast is ink's job.
+     On INK the area rule flips: headline type, marker blocks and buttons are small against the dark
+     ground and take the accent; the field there reads as cream. */
+  --yellow:        #FFE3A0;  /* ink on it 15:1 — large areas */
+  --yellow-accent: #FFD166;  /* same hue, more chroma, for SMALL areas only: marker, chart blocks, dots,
+                                and everything yellow on ink (headline, marker block, button). Small areas need more chroma to read as the same
+                                colour as a large field; at field size it would shout. Ink on it 13:1 */
+  --yellow-accent-hover: #F5C455;
+  --yellow-light:  #FFF1D6;  /* row washes, the pale end of a ladder */
+  --yellow-hover:  #F7D98F;  /* hover on a yellow fill — same chroma, one step down */
+  --yellow-field:  var(--yellow);   /* alias */
+  --yellow-mark:   var(--yellow-accent);   /* alias */
+  --yellow-deep:   var(--yellow-hover);  /* retired */
+  --amber:         var(--yellow-accent);  /* retired */
+
+  /* Marker — the highlighter stroke behind a headline phrase. Small area: accent. */
+  --marker:        var(--yellow-accent);
+
+  /* Wash ladder over paper — rows and areas. Lightness steps toward the yellow. */
+  --yellow-12: #FFFAF0;
+  --yellow-20: #FFF6E3;
+  --yellow-32: #FFF1D6;
+  --yellow-50: #FFEBC2;
+
+  /* Intensity ladder — treemaps, single-hue series. Light = less; the accent = most.
+     Step 4 is the yellow itself. Monotonic in luminance. */
+  --yellow-1: #FFF8EA;
+  --yellow-2: #FFF3DC;
+  --yellow-3: #FFEECE;
+  --yellow-4: #FFE3A0;
+  --yellow-5: #FFD166;
+  --yellow-6: #F5C455;  /* hover only */
+  --yellow-7: #EAB84A;  /* pressed only */
+  --series-hairline: rgba(17,17,17,.12);  /* pale blocks take this so they hold on paper */
+
+  /* Product status — PRODUCT UI ONLY. Never on brand, marketing or deck surfaces. */
+  --status-error:          #E0362F;  /* white on it 4.6 · ink on wash */
+  --status-error-text:     #C4261F;  /* 5.9 on paper */
+  --status-error-wash:     #FDE4E2;
+  --status-attention:      var(--yellow-accent);  /* ink on it 13:1 · never as type on paper */
+  --status-attention-wash: var(--yellow-32);
+  --status-progress:       #2A7DE1;  /* white on it 4.5 */
+  --status-progress-text:  #1F63B8;  /* 5.8 on paper */
+  --status-progress-wash:  #DCEAFB;
+  --status-complete:       #17A96A;  /* ink on it 6.3 */
+  --status-complete-text:  #0E7A4A;  /* 5.5 on paper */
+  --status-complete-wash:  #D6F3E5;
+
+  /* Semantic aliases — product code consumes these */
+  --bg-page:        var(--paper);
+  --bg-sunk:        var(--linen);
+  --bg-well:        var(--sunk-2);
+  --bg-chrome:      var(--sunk-3);
+  --text-primary:   var(--ink);
+  --text-secondary: var(--grey);
+  --text-label:     var(--grey);
+  --highlight:      var(--yellow);
+  --bg-field:       var(--yellow-field);
+  --focus-ring:     0 0 0 3px var(--bg-page), 0 0 0 5px var(--ink);
+  --text-on-yellow-secondary: rgba(17,17,17,.7);  /* secondary text on the yellow; --grey fails there */
+  --disabled-opacity: 0.4; /* @kind other */
+
+  /* Inverted-surface aliases, for a component placed on ink inside a paper page */
+  --inv-bg:             var(--ink);
+  --inv-bg-raised:      var(--ink-raised);
+  --inv-text:           var(--linen);
+  --inv-text-secondary: var(--grey-inverse);
+  --inv-rule:           var(--rule-inverse);
+}
+
+/* Ink mode. The dark page. Yellow carries the headline here. */
+:root[data-mode="ink"],
+.ink-mode {
+  --bg-page:        var(--ink);
+  --bg-sunk:        var(--ink-raised);
+  --bg-well:        #232221;
+  --bg-chrome:      #2B2A28;
+  --text-primary:   var(--linen);
+  --text-secondary: var(--grey-inverse);
+  --text-label:     var(--grey-inverse);
+  --rule:           var(--rule-inverse);
+  --rule-soft:      var(--rule-soft-inverse);
+  --hover:          #1F1E1D;
+  --focus-ring:     0 0 0 3px var(--ink), 0 0 0 5px var(--yellow);
+}

package/src/tokens/compat.css

@@ -0,0 +1,36 @@
+/* COSX 3.0 — older token names mapped onto current values. Do not use in new work. */
+:root {
+  --stone: var(--grey);
+  --brass: var(--grey);
+  --white: var(--paper);
+  --brass-30: var(--rule);
+  --brass-20: var(--rule);
+  --brass-12: var(--rule-soft);
+  --brass-07: var(--rule-soft);
+  --ink-08: rgba(17,17,17,.08);
+  --ink-04: rgba(17,17,17,.04);
+  --marigold: var(--yellow);
+  --marigold-hover: var(--yellow-deep);
+  --marigold-press: var(--yellow-7);
+  --marigold-tint: var(--yellow-12);
+  --ink-hover: #2A2825;
+  --ink-press: #000000;
+  --status-ok: var(--status-complete);
+  --status-warn: var(--status-attention);
+  --status-info: var(--status-progress);
+  --status-ok-tint: var(--status-complete-wash);
+  --status-error-tint: var(--status-error-wash);
+  --surface-card: var(--paper);
+  --hairline: var(--rule);
+  --hairline-soft: var(--rule-soft);
+  --grid-line: var(--rule-soft);
+  --grid-line-inv: var(--rule-soft-inverse);
+  --accent: var(--yellow);
+  --inv-text-strong: var(--paper);
+  --inv-structure: var(--grey-inverse);
+  --inv-hairline: var(--rule-inverse);
+  /* amber-era names from the 3.0 draft */
+  --amber-12: var(--yellow-12); --amber-20: var(--yellow-20); --amber-32: var(--yellow-32); --amber-50: var(--yellow-50);
+  --amber-critical: var(--yellow-7); --amber-high: var(--yellow-6); --amber-medium: var(--yellow-5); --amber-low: var(--yellow-3); --amber-clear: var(--yellow-1);
+  --series-1: var(--yellow-1); --series-2: var(--yellow-2); --series-3: var(--yellow-3); --series-4: var(--yellow-4); --series-5: var(--yellow-5); --series-6: var(--yellow-6);
+}

package/src/tokens/elevation.css

@@ -0,0 +1,14 @@
+/* COSX 3.0 — elevation. There are no shadows. Depth is cut into the page, so this
+   scale runs downward only. An overlay is lifted by the scrim behind it. */
+:root {
+  --elev-page:   var(--bg-page);
+  --elev-sunk-1: var(--bg-sunk);
+  --elev-sunk-2: var(--bg-well);
+  --elev-sunk-3: var(--bg-chrome);
+  --shadow-none: none;
+  /* v2 shadow tokens resolve to nothing — kept so old surfaces do not break */
+  --shadow-card: none;
+  --shadow-raised: none;
+  --shadow-overlay: none;
+  --shadow-hairline: inset 0 0 0 1px var(--rule);
+}

package/src/tokens/motion.css

@@ -0,0 +1,42 @@
+/* COSX 3.0 — motion. "Paper settling." Two registers:
+   state   quick and flat — colour, border, opacity on hover/focus/toggle. 120–320ms.
+   entry   one choreographed settle when a surface appears — blocks rise a few px, the marker
+           draws, figures count, the pill glides. Each element ≤ 640ms; a whole sequence ≤ 1.4s
+           with a 70ms stagger. Ease-out only: things arrive and stop, they never bounce. */
+:root {
+  --motion-colour:  120ms; /* @kind other */
+  --motion-fade:    180ms; /* @kind other */
+  --motion-max:     320ms; /* @kind other */
+  --motion-reveal:  640ms; /* @kind other */  /* entry: rise, draw, glide */
+  --motion-count:  1400ms; /* @kind other */  /* figures counting up */
+  --motion-stagger:  70ms; /* @kind other */
+  --easing:         cubic-bezier(.2,0,.2,1); /* @kind other */
+  --easing-out:     cubic-bezier(.16,1,.3,1); /* @kind other */
+  --rise-distance:  10px;
+  /* v2 aliases */
+  --dur-fast: var(--motion-colour); /* @kind other */
+  --dur-base: var(--motion-fade); /* @kind other */
+  --dur-slow: var(--motion-max); /* @kind other */
+  --ease-standard: var(--easing); /* @kind other */
+  --ease-out: var(--easing-out); /* @kind other */
+  --ease-in: cubic-bezier(.4,0,1,1); /* @kind other */
+  --press-inset: none;
+}
+/* Entry vocabulary */
+@keyframes cosx-rise   { from { opacity: 0; transform: translateY(var(--rise-distance)); } to { opacity: 1; transform: none; } }
+@keyframes cosx-draw   { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
+@keyframes cosx-settle { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
+@keyframes cosx-grow   { from { transform: scaleY(0); } to { transform: none; } }
+@keyframes cosx-wipe   { from { clip-path: inset(0 100% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
+.rise        { animation: cosx-rise var(--motion-reveal) var(--easing-out) both; }
+.marker.draw { background-repeat: no-repeat; animation: cosx-draw var(--motion-reveal) var(--easing-out) .35s both; }
+.settle      { animation: cosx-settle var(--motion-reveal) var(--easing-out) both; }          /* chart blocks, tiles — staggered */
+.grow        { transform-origin: bottom; animation: cosx-grow var(--motion-reveal) var(--easing-out) both; } /* columns */
+.wipe        { animation: cosx-wipe var(--motion-reveal) var(--easing-out) both; }         /* yellow field or strip revealing left→right */
+/* Stagger helper: set --i on each child */
+.rise, .settle, .grow, .wipe { animation-delay: calc(var(--i, 0) * var(--motion-stagger) + var(--delay, 0ms)); }
+/* Glide: the selected pill / active indicator moves, it does not blink */
+.glide { transition: transform var(--motion-reveal) var(--easing-out), width var(--motion-reveal) var(--easing-out), left var(--motion-reveal) var(--easing-out); }
+@media (prefers-reduced-motion: reduce) {
+  :root { --motion-colour: 0ms; /* @kind other */ --motion-fade: 0ms; /* @kind other */ --motion-max: 0ms; /* @kind other */ --motion-reveal: 0ms; /* @kind other */ --motion-count: 0ms; /* @kind other */ --motion-stagger: 0ms; /* @kind other */ }
+}

package/src/tokens/spacing.css

@@ -0,0 +1,55 @@
+/* COSX 3.0 — spacing, shape, rules. Rounded, not square: 8px is the system radius. */
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 22px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 72px;
+
+  /* Shape */
+  --radius-0:    0;
+  --radius-xs:   4px;    /* checkboxes, tiny chips */
+  --radius-sm:   6px;    /* tags, badges */
+  --radius-md:   8px;    /* buttons, inputs, chart blocks */
+  --radius-lg:   16px;   /* panels, dialogs, cards, social blocks */
+  --radius-xl:   24px;   /* whole sections and page-level fields */
+  --radius-pill: 999px;  /* dots, switch tracks */
+
+  /* Rules come in three widths */
+  --rule-hair:   1px;
+  --rule-accent: 4px;  /* yellow underline under the wordmark or an eyebrow; status left-rule */
+  --rule-band:   8px;
+
+  --border-hairline: 1px solid var(--rule);
+  --border-soft:     1px solid var(--rule-soft);
+  --border-ink:      1px solid var(--ink);
+
+  /* Layout */
+  --grid-cols: 12; /* @kind other */
+  --grid-gutter: 24px;
+  --grid-max: 1180px;
+
+  /* Social artboard 1080x1350 */
+  --social-w: 1080px;
+  --social-h: 1350px;
+  --social-margin: 72px;
+
+  /* Deck grid, at the 1280x720 artboard */
+  --deck-w: 1280px;
+  --deck-h: 720px;
+  --deck-margin: 72px;
+  --deck-content: 1136px;
+  --deck-y-eyebrow: 44px;
+  --deck-y-heading: 96px;
+  --deck-y-body: 200px;
+  --deck-y-footrule: 648px;
+
+  /* v2 aliases */
+  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 96px; --s-10: 128px;
+  --pad-card: 32px;
+  --pad-compact: 16px 20px;
+  --r-none: 0px; --r-sm: 6px; --r-md: 8px; --r-pill: 999px;
+}

package/src/tokens/typography-cjk.css

@@ -0,0 +1,42 @@
+/* COSX 3.0 — Chinese typography (Noto Sans SC). Everything hangs off :lang(zh): mark a page or an element
+   lang="zh" (or zh-CN / zh-Hans) and the face, leading, tracking and marker switch over.
+   Latin, digits and ASCII punctuation stay in Geist; hanzi fall through to Noto Sans SC. */
+:root {
+  --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-sans-cjk: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --fw-cjk-body: 400; /* @kind font */
+  --fw-cjk-heading: 500; /* @kind font */
+  --size-body-cjk: 16px;          /* Latin body 15 + 1 */
+  --size-small-cjk: 14px;
+  --size-label-cjk: 12px;         /* same as Latin: sentence-style, untracked */
+  --leading-body-cjk: 1.8; /* @kind font */
+  --leading-heading-cjk: 1.3; /* @kind font */
+  --leading-display-cjk: 1.2; /* @kind font */
+  --track-cjk: 0; /* @kind font */  /* never the Latin's negative tracking */
+  --measure-cjk: 36em;            /* ≈ 30–38 hanzi per line */
+  --marker-start-cjk: 50%;        /* hanzi fill the em box; the band starts lower than Latin's 40% */
+  --bilingual-secondary: .72em;   /* English line under a Chinese lead */
+}
+:lang(zh) {
+  font-family: var(--font-sans-cjk);
+  letter-spacing: var(--track-cjk);
+  line-height: var(--leading-body-cjk);
+  text-autospace: normal;           /* quarter-space between hanzi and Latin/digits */
+  text-spacing-trim: normal;        /* trims doubled full-width punctuation */
+  font-synthesis: none;             /* no fake bold, no fake italic */
+  line-break: strict;
+  word-break: normal;
+}
+:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) .cjk-heading {
+  letter-spacing: var(--track-cjk);
+  line-height: var(--leading-heading-cjk);
+  font-weight: var(--fw-cjk-heading);
+}
+:lang(zh) em, :lang(zh) i { font-style: normal; font-weight: var(--fw-cjk-heading); }
+:lang(zh) b, :lang(zh) strong { font-weight: var(--fw-cjk-heading); }
+:lang(zh) .tabular, :lang(zh) .figure { letter-spacing: 0; font-variant-numeric: tabular-nums; }
+:lang(zh) .marker {
+  background: linear-gradient(transparent var(--marker-start-cjk), var(--marker) var(--marker-start-cjk), var(--marker) 96%, transparent 96%);
+}
+:lang(zh) .ink-mode .marker, .ink-mode :lang(zh) .marker, :lang(zh) .marker.on-ink { background: none; }
+.bilingual-en { display: block; font-family: var(--font-sans); font-size: var(--bilingual-secondary); line-height: 1.4; letter-spacing: 0; color: var(--text-secondary); margin-top: .35em; font-weight: 400; }