@robomous/ui-core 0.1.0

package/src/styles.css

@@ -0,0 +1,204 @@
+/*
+ * @robomous/ui-core — the design system's stylesheet.
+ *
+ * This is the shadcn preset `b2iH` (style `nova` on the Radix base, base colour
+ * `neutral`, chart palette `neutral`, icons `lucide`, Geist throughout with the
+ * heading face inheriting the body's, radius medium, menu inverted/subtle, and
+ * the pointer cursor on pressable controls) — the CLI's exact generated output,
+ * transcribed verbatim from a Docker scratch project built with `shadcn` 4.19.0. The preset is the source of truth for every
+ * name below except one: `brand` is Robomous's own, justified in
+ * `DESIGN.md` and following shadcn's own extension convention — a value
+ * in `:root`, a dark counterpart in `.dark`, exposure through `@theme
+ * inline`. Consumers add their extensions in their own stylesheet after
+ * importing this one. `src/tokens.ts` is the TypeScript mirror of this file
+ * and `tokens.test.ts` asserts the two agree, declaration for declaration.
+ *
+ * A consuming app imports exactly this:
+ *
+ *     import "@robomous/ui-core/styles.css";
+ *
+ * and adds an `@source` for its own sources. Tailwind v4 is CSS-first: there
+ * is no `tailwind.config.js` anywhere in this repository and there must not
+ * be one, or the tokens acquire a second home.
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+/*
+ * The package's own components, so a class string that only ever appears
+ * inside `ui-core` still produces CSS in the consumer's build. Relative to
+ * this file, which is what `@source` takes.
+ */
+@source ".";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /*
+   * Robomous coral. Identity only — the wordmark and its styleguide swatch,
+   * named in `DESIGN.md` — never a functional-UI colour. A third site
+   * is a design decision, not a styling one.
+   */
+  --brand: oklch(0.653 0.178 32.3);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  --brand: oklch(0.653 0.178 32.3);
+}
+
+@theme inline {
+  --font-sans: 'Geist Variable', sans-serif;
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Robomous's one identity token, exposed the same way as every preset colour. */
+  --color-brand: var(--brand);
+}
+
+@layer base {
+  /* The hairline and the outline *colour* — the two things every element
+     inherits. The focus treatment itself belongs to the primitives: each one
+     carries Nova's own `ring-3` ring in `ring/50` (DESIGN.md, Borders and
+     focus), so the base layer names the colour and stays out of the geometry.
+     Nothing here may declare focus geometry again: one blanket declaration in
+     this layer is how thirteen components' rings got overridden at once. */
+  * {
+    @apply border-border outline-ring/50;
+  }
+  /* Motion is opt-out for vestibular safety: under prefers-reduced-motion every
+     animation and transition collapses to a frame. Information is never
+     motion-only (DESIGN.md §Accessibility), so nothing is lost. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  /* The preset's pointer option. Scoped to what is actually pressable and away
+     from what is not: a disabled control keeps the arrow, because a hand over
+     something that will not respond is the cursor telling a lie. */
+  button:not(:disabled), [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+  html {
+    @apply font-sans;
+  }
+  /* One family now: the preset sets `--font-heading` to `--font-sans`, so this
+     rule keeps the semantic hook without changing the face. A later preset that
+     splits them again lands here without a diff at every heading. */
+  h1, h2, h3, h4 {
+    @apply font-heading;
+  }
+}

package/src/tokens.test.ts

@@ -0,0 +1,285 @@
+/**
+ * @vitest-environment node
+ *
+ * The foundation gate: `styles.css` is the shadcn preset's exact generated
+ * output (`:root`, `.dark`, `@theme inline`, the base layer) plus `brand`,
+ * the one Robomous extension. `tokens.ts` is the TypeScript mirror a
+ * `<canvas>`/`<svg>` or a test reads a colour off of; this suite parses the
+ * stylesheet structurally and asserts the two agree, declaration for
+ * declaration, and that none of the tokens this rewrite retired have crept
+ * back in.
+ *
+ * The CSS is parsed rather than imported — same reason as before: vitest's
+ * jsdom does not evaluate `@theme`, and `import.meta.url` under jsdom is an
+ * `http://localhost/` URL that `fileURLToPath` rejects. Hence `node` above.
+ */
+
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+import { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens";
+
+const STYLESHEET = readFileSync(fileURLToPath(new URL("./styles.css", import.meta.url)), "utf8");
+
+/** Whitespace is presentation; a value that wraps is the same value. */
+function normalize(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * The `{ … }` body belonging to the block whose header (e.g. `:root {` or
+ * `.dark {`) appears first in the file, matched by brace depth rather than by
+ * the next `\n}` so a nested `calc(...)` or `color-mix(...)` cannot fool it.
+ */
+function blockBody(css: string, header: string): string {
+  const headerAt = css.indexOf(header);
+  expect(headerAt, `styles.css has no ${JSON.stringify(header)} block`).toBeGreaterThan(-1);
+  const braceAt = css.indexOf("{", headerAt);
+  let depth = 1;
+  let i = braceAt + 1;
+  while (depth > 0 && i < css.length) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") depth--;
+    i++;
+  }
+  return css.slice(braceAt + 1, i - 1);
+}
+
+/** Every `--name: value;` declaration in a block, keyed WITH the leading `--`. */
+function rawDeclarations(block: string): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const match of block.matchAll(/(--[\w-]+):\s*([^;]+);/g)) {
+    map.set(match[1], normalize(match[2]));
+  }
+  return map;
+}
+
+/** The same, keyed WITHOUT the leading `--` — the shape `LIGHT_THEME` uses. */
+function declarations(block: string): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const [name, value] of rawDeclarations(block)) {
+    map.set(name.slice(2), value);
+  }
+  return map;
+}
+
+// The shadcn standard vocabulary, exactly as the CLI 4.18.0 scratch emitted
+// it — not derived from `tokens.ts`, so a mistake in the mirror cannot also
+// erase the thing it was supposed to mirror.
+const CHART_NAMES = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
+const SIDEBAR_NAMES = [
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+];
+const BASE_SEMANTIC_NAMES = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "border",
+  "input",
+  "ring",
+];
+const SEMANTIC_NAMES = [...BASE_SEMANTIC_NAMES, ...CHART_NAMES, ...SIDEBAR_NAMES];
+
+// The one extension this package keeps beyond shadcn's vocabulary.
+const EXTENSION_NAMES = ["brand"];
+
+const ORANGE_CHART = {
+  "chart-1": "oklch(0.87 0 0)",
+  "chart-2": "oklch(0.556 0 0)",
+  "chart-3": "oklch(0.439 0 0)",
+  "chart-4": "oklch(0.371 0 0)",
+  "chart-5": "oklch(0.269 0 0)",
+} as const;
+
+describe(":root", () => {
+  const root = declarations(blockBody(STYLESHEET, ":root {"));
+
+  it("declares every standard shadcn semantic variable, the five extensions, and --radius, and nothing else", () => {
+    expect([...root.keys()].sort()).toEqual(
+      [...SEMANTIC_NAMES, ...EXTENSION_NAMES, "radius"].sort(),
+    );
+  });
+
+  it("matches LIGHT_THEME's value for every name it declares", () => {
+    for (const [name, value] of root) {
+      if (name === "radius") continue;
+      expect(LIGHT_THEME[name], `LIGHT_THEME is missing ${name}`).toBe(value);
+    }
+  });
+
+  it("names no variable LIGHT_THEME does not also carry", () => {
+    const lightKeys = Object.keys(LIGHT_THEME).sort();
+    const rootKeys = [...root.keys()].filter((name) => name !== "radius").sort();
+    expect(lightKeys).toEqual(rootKeys);
+  });
+
+  it("pins --radius to the preset's medium step, in both the CSS and THEME", () => {
+    expect(root.get("radius")).toBe("0.625rem");
+    expect(THEME.radius).toBe("0.625rem");
+  });
+
+  it("pins the neutral chart palette exactly", () => {
+    for (const [name, value] of Object.entries(ORANGE_CHART)) {
+      expect(root.get(name)).toBe(value);
+    }
+  });
+});
+
+describe(".dark", () => {
+  const dark = declarations(blockBody(STYLESHEET, ".dark {"));
+
+  it("declares every standard shadcn semantic variable and the five extensions, and nothing else (no --radius)", () => {
+    expect([...dark.keys()].sort()).toEqual([...SEMANTIC_NAMES, ...EXTENSION_NAMES].sort());
+  });
+
+  it("matches DARK_THEME's value for every name it declares", () => {
+    for (const [name, value] of dark) {
+      expect(DARK_THEME[name], `DARK_THEME is missing ${name}`).toBe(value);
+    }
+  });
+
+  it("names no variable DARK_THEME does not also carry", () => {
+    expect(Object.keys(DARK_THEME).sort()).toEqual([...dark.keys()].sort());
+  });
+
+  it("pins the neutral chart palette exactly, unchanged from light", () => {
+    for (const [name, value] of Object.entries(ORANGE_CHART)) {
+      expect(dark.get(name)).toBe(value);
+    }
+  });
+});
+
+describe("@theme inline", () => {
+  const inline = rawDeclarations(blockBody(STYLESHEET, "@theme inline {"));
+
+  it("exposes --color-<name>: var(--<name>) for every semantic and extension name", () => {
+    for (const name of [...SEMANTIC_NAMES, ...EXTENSION_NAMES]) {
+      expect(inline.get(`--color-${name}`), `@theme inline is missing --color-${name}`).toBe(
+        `var(--${name})`,
+      );
+    }
+  });
+
+  it("declares the two font variables from THEME", () => {
+    expect(inline.get("--font-sans")).toBe(normalize(THEME.fontSans));
+    expect(inline.get("--font-heading")).toBe(normalize(THEME.fontHeading));
+  });
+
+  it("derives all seven radius steps from --radius, verbatim", () => {
+    expect(inline.get("--radius-sm")).toBe("calc(var(--radius) * 0.6)");
+    expect(inline.get("--radius-md")).toBe("calc(var(--radius) * 0.8)");
+    expect(inline.get("--radius-lg")).toBe("var(--radius)");
+    expect(inline.get("--radius-xl")).toBe("calc(var(--radius) * 1.4)");
+    expect(inline.get("--radius-2xl")).toBe("calc(var(--radius) * 1.8)");
+    expect(inline.get("--radius-3xl")).toBe("calc(var(--radius) * 2.2)");
+    expect(inline.get("--radius-4xl")).toBe("calc(var(--radius) * 2.6)");
+  });
+});
+
+/**
+ * The four `--text-*` custom properties this rewrite retired (Task 2 moved
+ * their consumers onto Tailwind's standard scale: xs/sm/base/2xl). Assembled
+ * from fragments — the same trick `tests/scripts/design_tokens.test.mjs`'s
+ * `HEX` uses — so this guard's own source never spells any retired name as a
+ * contiguous string and cannot trip the repo-wide sweep that proves the
+ * migration complete everywhere else.
+ */
+const RETIRED_TEXT_SCALE_SUFFIXES = ["meta", "body", "section", "page"];
+const RETIRED_TEXT_SCALE = RETIRED_TEXT_SCALE_SUFFIXES.map((name) => `--text-${name}`);
+
+describe("legacy tokens", () => {
+  it("removes every v1 name this rewrite retired from the whole stylesheet", () => {
+    const retired = [
+      "--color-primary-hover",
+      "--color-disabled",
+      "--color-disabled-foreground",
+      "--color-success-hover",
+      "--color-destructive-foreground",
+      "--color-sidebar-strong",
+      "--color-sidebar-muted",
+      ...RETIRED_TEXT_SCALE,
+      "--spacing-sidebar-mobile",
+    ];
+    const present = retired.filter((name) => STYLESHEET.includes(name));
+    expect(present, `styles.css still names: ${present.join(", ")}`).toEqual([]);
+  });
+});
+
+describe("structure", () => {
+  it("declares the dark variant and the four imports, in order", () => {
+    const anchors = [
+      '@import "tailwindcss";',
+      '@import "tw-animate-css";',
+      '@import "shadcn/tailwind.css";',
+      // One family, so one font import: `b2iH` sets the heading face to the body's
+      // rather than naming a second one.
+      '@import "@fontsource-variable/geist";',
+      "@custom-variant dark (&:is(.dark *));",
+    ];
+    let cursor = -1;
+    for (const anchor of anchors) {
+      const at = STYLESHEET.indexOf(anchor);
+      expect(at, `styles.css is missing ${JSON.stringify(anchor)}`).toBeGreaterThan(-1);
+      expect(at, `${JSON.stringify(anchor)} is out of order`).toBeGreaterThan(cursor);
+      cursor = at;
+    }
+  });
+
+  it("reaches its own package's classes: @source after the imports", () => {
+    const sourceAt = STYLESHEET.indexOf('@source ".";');
+    const lastImportAt = STYLESHEET.lastIndexOf("@import");
+    expect(sourceAt, "styles.css has no @source \".\";").toBeGreaterThan(-1);
+    expect(sourceAt).toBeGreaterThan(lastImportAt);
+  });
+
+  it("applies the base-layer ring/border rule shadcn ships", () => {
+    expect(/\*\s*\{\s*@apply border-border outline-ring\/50;\s*\}/.test(STYLESHEET)).toBe(true);
+  });
+
+  /**
+   * The `*` rule above names the outline *colour* and nothing else about focus.
+   * The geometry is the primitives': every focusable one carries Nova's
+   * `focus-visible:ring-3 focus-visible:ring-ring/50` (the tab bar adds a 1px
+   * `outline-ring` on top of it), so a stylesheet-level `:focus-visible`
+   * override would now fight the components instead of backing them up.
+   *
+   * Asserted as an absence, because the absence is what the migration bought:
+   * re-adding a blanket rule here is how a single global declaration would
+   * quietly start overriding thirteen components again.
+   */
+  it("leaves focus geometry to the primitives: no stylesheet-level :focus-visible rule", () => {
+    expect(STYLESHEET).not.toContain(":focus-visible");
+  });
+
+  it("applies the heading font at the semantic-HTML level", () => {
+    expect(/h1,\s*h2,\s*h3,\s*h4\s*\{\s*@apply font-heading;\s*\}/.test(STYLESHEET)).toBe(true);
+  });
+});
+
+describe("cssVar", () => {
+  it("wraps a bare token name as a CSS var() reference", () => {
+    expect(cssVar("popover")).toBe("var(--popover)");
+    expect(cssVar("brand")).toBe("var(--brand)");
+  });
+});

package/src/tokens.ts

@@ -0,0 +1,102 @@
+/**
+ * The design tokens, as TypeScript.
+ *
+ * `styles.css` is the one that *runs* — Tailwind reads its `:root`, `.dark`
+ * and `@theme inline` blocks and every utility in the package comes out of
+ * them. This module exists for the two kinds of caller that cannot read CSS:
+ * a `<canvas>`/`<svg>` that needs a colour as a string, and `tokens.test.ts`,
+ * which parses the stylesheet and asserts the two agree, declaration for
+ * declaration.
+ *
+ * `LIGHT_THEME`/`DARK_THEME` are the shadcn preset (`b2iH` — style
+ * `nova`, base colour `neutral`, chart palette `neutral`) exactly as the CLI
+ * 4.19.0 scratch generated it, plus `brand` (Robomous coral — identity only).
+ * Consumer extensions such as VisionSet's `stage` and `origin-*` live in the
+ * consumer's own token module. Everything else is shadcn's own vocabulary.
+ */
+
+export const LIGHT_THEME: Readonly<Record<string, string>> = Object.freeze({
+  background: "oklch(1 0 0)",
+  foreground: "oklch(0.145 0 0)",
+  card: "oklch(1 0 0)",
+  "card-foreground": "oklch(0.145 0 0)",
+  popover: "oklch(1 0 0)",
+  "popover-foreground": "oklch(0.145 0 0)",
+  primary: "oklch(0.205 0 0)",
+  "primary-foreground": "oklch(0.985 0 0)",
+  secondary: "oklch(0.97 0 0)",
+  "secondary-foreground": "oklch(0.205 0 0)",
+  muted: "oklch(0.97 0 0)",
+  "muted-foreground": "oklch(0.556 0 0)",
+  accent: "oklch(0.97 0 0)",
+  "accent-foreground": "oklch(0.205 0 0)",
+  destructive: "oklch(0.577 0.245 27.325)",
+  border: "oklch(0.922 0 0)",
+  input: "oklch(0.922 0 0)",
+  ring: "oklch(0.708 0 0)",
+  "chart-1": "oklch(0.87 0 0)",
+  "chart-2": "oklch(0.556 0 0)",
+  "chart-3": "oklch(0.439 0 0)",
+  "chart-4": "oklch(0.371 0 0)",
+  "chart-5": "oklch(0.269 0 0)",
+  sidebar: "oklch(0.985 0 0)",
+  "sidebar-foreground": "oklch(0.145 0 0)",
+  "sidebar-primary": "oklch(0.205 0 0)",
+  "sidebar-primary-foreground": "oklch(0.985 0 0)",
+  "sidebar-accent": "oklch(0.97 0 0)",
+  "sidebar-accent-foreground": "oklch(0.205 0 0)",
+  "sidebar-border": "oklch(0.922 0 0)",
+  "sidebar-ring": "oklch(0.708 0 0)",
+
+  // Robomous coral. Identity only — the wordmark and its styleguide swatch
+  // — never a functional-UI colour.
+  brand: "oklch(0.653 0.178 32.3)",
+});
+
+export const DARK_THEME: Readonly<Record<string, string>> = Object.freeze({
+  background: "oklch(0.145 0 0)",
+  foreground: "oklch(0.985 0 0)",
+  card: "oklch(0.205 0 0)",
+  "card-foreground": "oklch(0.985 0 0)",
+  popover: "oklch(0.205 0 0)",
+  "popover-foreground": "oklch(0.985 0 0)",
+  primary: "oklch(0.922 0 0)",
+  "primary-foreground": "oklch(0.205 0 0)",
+  secondary: "oklch(0.269 0 0)",
+  "secondary-foreground": "oklch(0.985 0 0)",
+  muted: "oklch(0.269 0 0)",
+  "muted-foreground": "oklch(0.708 0 0)",
+  accent: "oklch(0.269 0 0)",
+  "accent-foreground": "oklch(0.985 0 0)",
+  destructive: "oklch(0.704 0.191 22.216)",
+  border: "oklch(1 0 0 / 10%)",
+  input: "oklch(1 0 0 / 15%)",
+  ring: "oklch(0.556 0 0)",
+  "chart-1": "oklch(0.87 0 0)",
+  "chart-2": "oklch(0.556 0 0)",
+  "chart-3": "oklch(0.439 0 0)",
+  "chart-4": "oklch(0.371 0 0)",
+  "chart-5": "oklch(0.269 0 0)",
+  sidebar: "oklch(0.205 0 0)",
+  "sidebar-foreground": "oklch(0.985 0 0)",
+  "sidebar-primary": "oklch(0.488 0.243 264.376)",
+  "sidebar-primary-foreground": "oklch(0.985 0 0)",
+  "sidebar-accent": "oklch(0.269 0 0)",
+  "sidebar-accent-foreground": "oklch(0.985 0 0)",
+  "sidebar-border": "oklch(1 0 0 / 10%)",
+  "sidebar-ring": "oklch(0.556 0 0)",
+
+  brand: "oklch(0.653 0.178 32.3)",
+});
+
+/** The two provenance facts a colour string alone cannot carry. */
+export const THEME = {
+  radius: "0.625rem",
+  fontSans: "'Geist Variable', sans-serif",
+  fontHeading: "var(--font-sans)",
+} as const;
+
+/** `cssVar("popover")` → `"var(--popover)"` — for a runtime caller that needs a string. */
+export function cssVar(name: string): string {
+  return `var(--${name})`;
+}