@cloudgrid-io/ui 0.0.1

package/dist/fonts.css

@@ -0,0 +1,21 @@
+/*
+  Self-hosted webfonts, not a font CDN: a third-party request in the critical
+  path is both a latency cost and a privacy one. Manrope carries body and
+  secondary headings; Saira Semi Condensed 800 is the loaded stand-in for the
+  licensed Futura Condensed Extra Bold display face (drop the licensed woff2
+  into a consumer and the --cg-font-display stack picks it up with no code
+  change); JetBrains Mono is used only inside prompt and terminal surfaces.
+  The family stacks live in tokens.css.
+
+  These are bare package specifiers: Vite (Astro) and Next's css-loader both
+  resolve them. A pipeline that cannot should import the three fontsource
+  packages directly.
+
+  The three packages are real dependencies of @cloudgrid-io/ui, so installing
+  this package is enough. v0 also shipped a '@cloudgrid/ui/fonts' JS entry for
+  pipelines that cannot resolve bare CSS specifiers; it was not ported. Add it
+  if a consumer turns out to need it rather than on speculation.
+*/
+@import '@fontsource-variable/manrope';
+@import '@fontsource/saira-semi-condensed/800.css';
+@import '@fontsource-variable/jetbrains-mono';

package/dist/prose.css

@@ -0,0 +1,156 @@
+/*
+  Prose: typography for HTML you did not write.
+
+  Everything else in this package styles markup a component controls. This styles
+  the output of a markdown parser or a CMS, where the tags arrive as-is and there
+  is nowhere to put a class. Hence element selectors under one `.prose` scope
+  rather than utilities.
+
+  Ported from cloudgrid-landing's global.css. It lives here rather than in the
+  registry for two reasons. It is plain CSS with no React in it, so the Astro site
+  can import it directly, which is the whole point of this package being
+  framework-agnostic; and the site already has this recipe, so putting it here
+  makes this the owner instead of adding a fourth copy of shared styling to a repo
+  that is already tracking a three-copy problem in backlog.md.
+
+  Load order, same as every other sheet here: tokens.css first, or every var()
+  below resolves to nothing.
+
+      @import "@cloudgrid-io/ui/tokens.css";
+      @import "@cloudgrid-io/ui/prose.css";
+
+  Scoped to `.prose` deliberately. v0's copy also carried a bare
+  `:not(pre) > code` rule outside the scope, which restyles every inline code
+  element on the page including inside components that already style their own.
+  That is left out: a package that reaches outside the class you opted into is a
+  package that surprises you.
+
+  No literal colours, same rule as the rest of the package, and asserted.
+*/
+
+.prose {
+  color: var(--cg-text-secondary);
+}
+
+/* The one clamp in v0's recipe, between two ramp steps. Kept as a clamp rather
+   than converted to a responsive pair, because plain CSS has no breakpoints to
+   hang a pair on and the ramp steps are still the endpoints. */
+.prose h1 {
+  font-size: clamp(var(--cg-display-sm), 5vw, var(--cg-display-lg));
+  margin-bottom: var(--cg-space-4);
+  color: var(--cg-text-primary);
+}
+
+.prose h2 {
+  font-size: var(--cg-heading-lg);
+  margin-block: var(--cg-space-10) var(--cg-space-3);
+  color: var(--cg-text-primary);
+}
+
+.prose h3 {
+  font-size: var(--cg-heading-md);
+  margin-block: var(--cg-space-6) var(--cg-space-2);
+  color: var(--cg-text-primary);
+}
+
+/* The measure sits on the text, not the container, so a wide table or image can
+   still use the full width while paragraphs stay readable. */
+.prose p,
+.prose li {
+  color: var(--cg-text-secondary);
+  max-width: var(--cg-measure);
+  overflow-wrap: break-word;
+}
+
+.prose p {
+  margin-block: var(--cg-space-3);
+}
+
+.prose ul,
+.prose ol {
+  padding-left: var(--cg-space-5);
+  margin-block: var(--cg-space-3);
+}
+
+.prose li {
+  margin-block: var(--cg-space-1);
+}
+
+.prose strong {
+  color: var(--cg-text-primary);
+  font-weight: var(--cg-weight-bold);
+}
+
+.prose pre {
+  background: var(--cg-surface-code);
+  color: var(--cg-text-on-code);
+  border-radius: var(--cg-radius-md);
+  padding: var(--cg-space-5) var(--cg-space-6);
+  overflow-x: auto;
+  margin-block: var(--cg-space-4);
+  font-size: var(--cg-mono-size);
+  line-height: var(--cg-mono-line);
+}
+
+/* Inline code only. `:not(pre)` is what keeps this off code inside a block, which
+   would otherwise get a border and a background it already has. */
+.prose :not(pre) > code {
+  background: var(--cg-surface-page-alt);
+  border: var(--cg-border-width) solid var(--cg-border-hairline);
+  border-radius: var(--cg-radius-xs);
+  padding: 0.1em 0.35em;
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+}
+
+.prose blockquote {
+  margin-block: var(--cg-space-5);
+  padding-left: var(--cg-space-5);
+  border-left: var(--cg-border-width-strong) solid var(--cg-border-accent);
+  color: var(--cg-text-primary);
+}
+
+/* `display: block` with `overflow-x: auto` so a wide table scrolls inside itself
+   instead of pushing the page sideways. */
+.prose table {
+  border-collapse: collapse;
+  margin-block: var(--cg-space-4);
+  font-size: var(--cg-body-sm);
+  display: block;
+  width: 100%;
+  max-width: max-content;
+  overflow-x: auto;
+}
+
+.prose th,
+.prose td {
+  border: var(--cg-border-width) solid var(--cg-border-hairline);
+  padding: var(--cg-space-2) var(--cg-space-3);
+  text-align: left;
+}
+
+.prose th {
+  background: var(--cg-surface-page-alt);
+  font-weight: var(--cg-weight-bold);
+}
+
+.prose a {
+  color: var(--cg-text-primary);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.prose a:hover {
+  color: var(--cg-primary);
+}
+
+.prose img {
+  border-radius: var(--cg-radius-xl);
+  margin-block: var(--cg-space-6);
+}
+
+.prose hr {
+  border: 0;
+  border-top: var(--cg-border-width) solid var(--cg-border-hairline);
+  margin-block: var(--cg-space-10);
+}

package/dist/shadcn.css

@@ -0,0 +1,206 @@
+/*
+  The shadcn bridge: every shadcn semantic variable, resolved to a CloudGrid
+  token.
+
+  This ships from the package rather than living in the registry app, because a
+  consumer needs it just as much as we do. `npx shadcn add @cloudgrid/button`
+  copies our component source and installs @cloudgrid-io/ui, but the source
+  refers to --background, --primary and --border. Without this file those names
+  still point at whatever the consumer's own `shadcn init` wrote, which is the
+  stock oklch grey palette, and our components render grey in their app while
+  looking correct in ours. One file, imported by both, so the two cannot drift.
+
+  Import order:
+
+      @import "tailwindcss";
+      @import "@cloudgrid-io/ui/fonts.css";
+      @import "@cloudgrid-io/ui/tokens.css";
+      @import "@cloudgrid-io/ui/theme.css";
+      @import "@cloudgrid-io/ui/shadcn.css";   <- after the consumer's own :root
+
+  Two mappings are worth reading twice, because the obvious one is wrong.
+
+  --secondary is NOT --cg-secondary. In shadcn, "secondary" is the quiet button
+  variant. In this brand --cg-secondary is lime, an accent used sparingly. A lime
+  secondary button would put the loudest color in the system on the quietest
+  control, so secondary maps to the neutral control fill instead.
+
+  --accent is NOT an accent either. shadcn uses it for hover and highlight
+  backgrounds, so it maps to the subtle surface.
+
+  THE SELECTOR LIST IS LOAD-BEARING. Declaring these at :root alone is not
+  enough, and the failure is invisible until a real component sits on a flipped
+  surface.
+
+  A custom property that references another is substituted where it is DECLARED,
+  and descendants inherit the already-resolved value. With
+  `--border: var(--cg-border-hairline)` at :root only, --border computes to
+  #f1f1f1 at the root and every descendant inherits that literal. Redefining
+  --cg-border-hairline inside [data-cg-surface="panel"] then changes nothing:
+  measured, --cg-border-hairline was rgba(255,255,255,0.24) inside the panel
+  while --border was still #f1f1f1, so every shadcn component kept its
+  light-surface borders on purple and on ink.
+
+  Repeating the block on the flip selectors makes each scope re-resolve the whole
+  mapping against its own --cg-* values. Tokens the flips do not touch, like
+  --cg-primary, resolve identically in all three, so listing everything costs
+  nothing and guarantees nothing is missed.
+*/
+
+:root,
+[data-cg-surface="panel"],
+[data-cg-surface="ink"] {
+  /* surfaces */
+  --background: var(--cg-surface-page);
+  --card: var(--cg-surface-card);
+  --popover: var(--cg-surface-card);
+  --muted: var(--cg-surface-subtle);
+  --secondary: var(--cg-surface-control);
+  --accent: var(--cg-surface-subtle);
+
+  /* text on those surfaces */
+  --foreground: var(--cg-text-primary);
+  --card-foreground: var(--cg-text-primary);
+  --popover-foreground: var(--cg-text-primary);
+  --muted-foreground: var(--cg-text-muted);
+  --secondary-foreground: var(--cg-text-primary);
+  --accent-foreground: var(--cg-text-primary);
+
+  /* the brand action color */
+  --primary: var(--cg-primary);
+  --primary-foreground: var(--cg-text-on-primary);
+
+  --border: var(--cg-border-hairline);
+  --input: var(--cg-border-control);
+
+  /* The ring is --cg-text-accent, not --cg-focus-ring, and the difference is a
+     WCAG failure rather than a preference.
+
+     --cg-focus-ring is translucent (0.28 on the default surface). Components
+     then apply an opacity modifier on top of it, `ring-ring/50`, so the ring
+     composites at 0.14 and reaches 1.23:1 against the white page. SC 1.4.11
+     requires 3:1 for a non-text indicator. The purple panel was no better:
+     white at 0.5 alpha over purple measures 2.60:1. Two of the three surfaces
+     failed; only ink passed, and only just, at 3.22:1.
+
+     No translucent value fixes it while the /50 remains: even a fully opaque
+     colour halves to 2.25:1. So the modifier had to go from the components, and
+     the ring had to become solid.
+
+     --cg-text-accent is the token that already flips to the right solid colour
+     in every scope, so this needs no change to tokens.css and creates no drift
+     against the site and v0 copies of it:
+
+       default  var(--cg-primary)    purple    5.84:1 on white
+       panel    #ffffff              white     5.84:1 on purple
+       ink      var(--cg-secondary)  lime     10.33:1 on ink
+
+     --cg-focus-ring is untouched and still backs the brand's own
+     --cg-ring-focus shadow. Pinned by an assertion in
+     registry/e2e/token-wiring.spec.ts. */
+  --ring: var(--cg-text-accent);
+
+  /* charts: the brand trio first, then neutrals, so a three-series chart is
+     purple, lime, cyan and a five-series one degrades to grey rather than
+     inventing colors. */
+  --chart-1: var(--cg-primary);
+  --chart-2: var(--cg-secondary);
+  --chart-3: var(--cg-tertiary);
+  --chart-4: var(--cg-neutral-500);
+  --chart-5: var(--cg-neutral-700);
+
+  /* sidebar: a subtle wash, not its own palette */
+  --sidebar: var(--cg-surface-page-alt);
+  --sidebar-foreground: var(--cg-text-primary);
+  --sidebar-primary: var(--cg-primary);
+  --sidebar-primary-foreground: var(--cg-text-on-primary);
+  --sidebar-accent: var(--cg-surface-subtle);
+  --sidebar-accent-foreground: var(--cg-text-primary);
+  --sidebar-border: var(--cg-border-hairline);
+  --sidebar-ring: var(--cg-focus-ring);
+
+  /* shadcn derives its own radius scale from this one value. Pointing it at
+     --cg-radius-lg keeps anything not explicitly mapped in the right family. */
+  --radius: var(--cg-radius-lg);
+
+  /* Closed 2026-08-16 (#62). This was the package's one literal colour, a
+     #c0392b placeholder, because the brand had no red of any kind. It now points
+     at --cg-danger like every other mapping here.
+
+     This declaration sits inside the combined :root / panel / ink selector, which
+     is what makes it flip: per rule 2 a custom property referencing another is
+     substituted where it is DECLARED, so being declared once per scope is what
+     gives an invalid field the on-purple red inside a panel rather than the
+     white-surface one. Declared at :root alone it would freeze to #E53935
+     everywhere, which measures 1.38:1 on the panel. */
+  --destructive: var(--cg-danger);
+}
+/* The primary action on purple. Operator decision, 2026-08-12, issue #41.
+
+   --cg-primary IS the panel surface: --cg-surface-panel is var(--cg-primary).
+   So mapping --primary to it inside the panel scope gave a button the exact
+   colour of the ground behind it. Measured before the fix: button background
+   rgb(90,71,240), panel background rgb(90,71,240). Contrast against the surface
+   1:1. The label stayed white so the text was readable, but the control had no
+   shape at all.
+
+   Lime is the brand's other action colour and the natural "go" on purple, so
+   that is what a primary becomes here, with ink on top rather than white.
+
+   Both flipped surfaces, not just the panel. I first wrote this for the panel
+   only, on the assumption that purple keeps its shape against ink. The assertion
+   said otherwise: purple on #222 measures 2.72:1, also under the 3:1 floor. So
+   the reported bug was two of three surfaces and only one had been noticed.
+
+   The rule that falls out is simple enough to hold in your head: purple on white,
+   lime on either dark brand surface. Lime on ink measures about 10:1.
+
+   Guarded by an assertion that measures the button against the surface BEHIND it
+   in all three scopes. The suite already had two tests here and neither could see
+   this: one asserts the button renders the brand colour in every scope, which is
+   satisfied by exactly the behaviour that caused the bug, and the other compares
+   the label against the button rather than the button against its ground. */
+[data-cg-surface="panel"],
+[data-cg-surface="ink"] {
+  --primary: var(--cg-secondary);
+  --primary-foreground: var(--cg-text-on-accent);
+}
+
+
+/*
+  Backgrounds that do not flip on their own.
+
+  Every shadcn *foreground* maps to a token the surface blocks redefine, so text
+  turns white inside a panel automatically. Four backgrounds do not, because the
+  brand tokens behind them describe the page rather than a container:
+
+    --background -> --cg-surface-page      static
+    --muted      -> --cg-surface-subtle    static
+    --accent     -> --cg-surface-subtle    static
+    --secondary  -> --cg-surface-control   static
+
+  Half of each pair follows the surface and half does not, so they collide
+  exactly where the surface changes. An outline button on a panel rendered white
+  text on a white pill: 1:1 contrast, the label completely invisible, and
+  nothing errored. Same shape for bg-muted, bg-secondary and bg-accent.
+
+  So each scope gets the four named explicitly, using tokens that exist in that
+  scope. "Background" inside a container means that container, not the page.
+
+  The exact choices below are a design call as much as a fix, and worth a
+  reviewer's eye: on the panel these resolve to transparent, so the purple shows
+  through, which is what an outline control should do anyway.
+*/
+[data-cg-surface="panel"] {
+  --background: var(--cg-surface-panel);
+  --muted: var(--cg-surface-card);
+  --accent: var(--cg-surface-card);
+  --secondary: var(--cg-surface-card);
+}
+
+[data-cg-surface="ink"] {
+  --background: var(--cg-surface-code);
+  --muted: var(--cg-surface-page-alt);
+  --accent: var(--cg-surface-page-alt);
+  --secondary: var(--cg-surface-page-alt);
+}

package/dist/theme.css

@@ -0,0 +1,240 @@
+/*
+  Tailwind v4 theme for CloudGrid.
+
+  This maps Tailwind's utility namespaces onto the --cg-* custom properties in
+  tokens.css. It does not define any values of its own: every entry is a var()
+  reference, so a theme change stays a one-file edit in tokens.css and never has
+  to be mirrored here.
+
+  Load order matters. tokens.css must be imported before this file, or the
+  var() references resolve to nothing:
+
+      @import "tailwindcss";
+      @import "@cloudgrid-io/ui/tokens.css";
+      @import "@cloudgrid-io/ui/theme.css";
+
+  The setup guide's Step 2 example mapped --color-background, --color-accent and
+  friends. Those names do not exist in this brand system, so this file is
+  authored against the real tokens rather than copied from the guide.
+
+  Utilities are a convenience layer, not the contract. The canon in tokens.css
+  stands: components consume custom properties exclusively and must never
+  hardcode a hex. Where a component needs a token with no utility (durations,
+  transitions, the press scale), use var(--cg-*) directly.
+*/
+
+/*
+  `inline` is load-bearing, not stylistic. Do not remove it.
+
+  With a plain `@theme`, Tailwind evaluates each var() once, at :root, and emits
+  the resolved literal. Utilities then point at the theme variable, which is
+  frozen to whatever the default scope resolved to. The surface flips stop
+  working: inside data-cg-surface="panel", --cg-border-hairline correctly becomes
+  rgba(255,255,255,0.24), but border-hairline still paints #f1f1f1, because the
+  utility never sees the flipped variable.
+
+  With `inline`, Tailwind inlines the theme value into the utility, so
+  border-hairline compiles to `border-color: var(--cg-border-hairline)` and the
+  variable resolves at the element. The flip works.
+
+  Measured, not assumed: with plain @theme, --color-hairline computed to #f1f1f1
+  in all three scopes while --cg-border-hairline flipped correctly in each.
+
+  One consequence to know: text does not flip by inheritance. A container that
+  sets data-cg-surface must also apply a text color from a token (text-ink), or
+  its children inherit the already-resolved color from an ancestor and stay dark.
+*/
+@theme inline {
+  /* ---- names this file must not claim ----
+     shadcn's own theme layer owns background, foreground, card, popover,
+     primary, secondary, muted, accent, destructive, border, input, ring,
+     chart-* and sidebar-*, and its component source depends on them. Whichever
+     block loads last wins, so claiming one of those names here does not produce
+     an error: it silently changes what a shadcn component renders.
+
+     Found the hard way. An earlier version of this file mapped --color-muted to
+     the muted *text* color and --color-accent to the accent *text* color. In
+     shadcn both are background colors, so text-muted and text-accent rendered
+     near-white on white. The badge was invisible.
+
+     So: muted text is --color-faint, the brand purple is --color-brand, and the
+     brand trio is brand / lime / cyan. Nothing below overlaps shadcn. */
+
+  /* ---- surfaces ----
+     One name serves every color utility, so --color-page gives bg-page,
+     text-page and border-page alike. */
+  --color-page: var(--cg-surface-page);
+  --color-page-alt: var(--cg-surface-page-alt);
+  --color-subtle: var(--cg-surface-subtle);
+  --color-control: var(--cg-surface-control);
+  --color-panel: var(--cg-surface-panel);
+  --color-code: var(--cg-surface-code);
+
+  /* ---- text ----
+     Deliberately not called --color-primary: in this system "primary" is the
+     purple brand color, while the primary *text* color is ink. Collapsing both
+     onto text-primary would make the utility lie. */
+  --color-ink: var(--cg-text-primary);
+  --color-body: var(--cg-text-secondary);
+  --color-faint: var(--cg-text-muted);
+  --color-placeholder: var(--cg-text-placeholder);
+  --color-inverse: var(--cg-text-inverse);
+  --color-on-primary: var(--cg-text-on-primary);
+  --color-on-accent: var(--cg-text-on-accent);
+  --color-on-code: var(--cg-text-on-code);
+
+  /* ---- brand ---- */
+  --color-brand: var(--cg-primary);
+  --color-brand-press: var(--cg-primary-press);
+  --color-brand-tint: var(--cg-primary-tint);
+  --color-lime: var(--cg-secondary);
+  --color-lime-press: var(--cg-secondary-press);
+  --color-cyan: var(--cg-tertiary);
+  --color-cyan-press: var(--cg-tertiary-press);
+  /* `danger`, not `destructive`: rule 4 says never claim a name shadcn's theme
+     layer owns, and `destructive` is one of its own. This is the CloudGrid name
+     for the same value, alongside faint / brand / lime / cyan. shadcn.css bridges
+     --destructive to the same token, so both spellings resolve to one source. */
+  --color-danger: var(--cg-danger);
+
+  /* ---- lines ---- */
+  --color-hairline: var(--cg-border-hairline);
+  --color-line: var(--cg-border-control);
+  --color-line-strong: var(--cg-border-strong);
+  --color-line-accent: var(--cg-border-accent);
+
+  /* ---- type families ----
+     --font-sans points at the body face so the stock font-sans utility is
+     correct rather than something to remember not to use. */
+  --font-sans: var(--cg-font-body);
+  --font-body: var(--cg-font-body);
+  --font-display: var(--cg-font-display);
+  --font-mono: var(--cg-font-mono);
+
+  /* ---- type scale ----
+     Every --text-* carries a --text-*--line-height companion, because Tailwind
+     emits the pair together:
+
+       .text-body-sm { font-size: var(--cg-body-sm);
+                       line-height: var(--tw-leading, var(--text-body-sm--line-height)) }
+
+     Without the companion the utility sets a size and no leading, and the
+     leading falls back to whatever an ancestor happens to declare. That reads
+     fine here, where globals.css sets line-height on body, and wrong in a
+     consumer app that copied the component and not the stylesheet -- which is
+     the whole population this registry serves. A `leading-*` utility still wins
+     when a component wants to override, via --tw-leading.
+
+     Two other companions Tailwind supports, added only where the brand actually
+     pairs a value with a size rather than everywhere it is possible:
+     --letter-spacing on the display ramp, because the brand specifies
+     --cg-display-tracking for it, and --font-weight on the label, because
+     --cg-label-weight exists for exactly that. Body and heading have no specified
+     tracking or weight, so they get none: a companion that invents a value is
+     worse than an absent one, since it forces a weight where a component expected
+     to inherit. Closes the gap noted in notes.md after #30. */
+  --text-display-xl: var(--cg-display-xl);
+  --text-display-xl--line-height: var(--cg-display-line);
+  --text-display-xl--letter-spacing: var(--cg-display-tracking);
+  --text-display-lg: var(--cg-display-lg);
+  --text-display-lg--line-height: var(--cg-display-line);
+  --text-display-lg--letter-spacing: var(--cg-display-tracking);
+  --text-display-md: var(--cg-display-md);
+  --text-display-md--line-height: var(--cg-display-line);
+  --text-display-md--letter-spacing: var(--cg-display-tracking);
+  --text-display-sm: var(--cg-display-sm);
+  --text-display-sm--line-height: var(--cg-display-line);
+  --text-display-sm--letter-spacing: var(--cg-display-tracking);
+  --text-heading-lg: var(--cg-heading-lg);
+  --text-heading-lg--line-height: var(--cg-heading-line);
+  --text-heading-md: var(--cg-heading-md);
+  --text-heading-md--line-height: var(--cg-heading-line);
+  --text-heading-sm: var(--cg-heading-sm);
+  --text-heading-sm--line-height: var(--cg-heading-line);
+  --text-body-lg: var(--cg-body-lg);
+  --text-body-lg--line-height: var(--cg-body-line);
+  --text-body-md: var(--cg-body-md);
+  --text-body-md--line-height: var(--cg-body-line);
+  --text-body-sm: var(--cg-body-sm);
+  --text-body-sm--line-height: var(--cg-body-line);
+  --text-caption: var(--cg-caption);
+  --text-caption--line-height: var(--cg-body-line);
+  --text-mono: var(--cg-mono-size);
+  --text-mono--line-height: var(--cg-mono-line);
+  --text-label: var(--cg-label-size);
+  --text-label--line-height: var(--cg-body-line);
+  --text-label--font-weight: var(--cg-label-weight);
+
+  /* ---- weights ----
+     `--font-weight-display` is unreachable and kept only for completeness. Both
+     namespaces build the same utility name: the family `--font-display` and the
+     weight `--font-weight-display` each want `font-display`, and the family wins.
+     Measured, not assumed: the build emits
+     `.font-display,.font-heading{font-family:var(--cg-font-display)}` and no
+     rule anywhere sets font-weight 800.
+
+     That is rule 4 one layer in. Rule 4 is about not claiming a name shadcn
+     owns; this is two of our own entries claiming one name, with the same
+     silent outcome.
+
+     So the brand's display weight is exposed as `font-heavy`. Different word,
+     same token, and reachable. Needed by any display-face heading that is not an
+     h1, since globals.css only styles h1. */
+  --font-weight-regular: var(--cg-weight-regular);
+  --font-weight-medium: var(--cg-weight-medium);
+  --font-weight-bold: var(--cg-weight-bold);
+  --font-weight-display: var(--cg-weight-display);
+  --font-weight-heavy: var(--cg-weight-display);
+
+  /* ---- leading and tracking ---- */
+  --leading-display: var(--cg-display-line);
+  --leading-heading: var(--cg-heading-line);
+  --leading-body: var(--cg-body-line);
+  --leading-mono: var(--cg-mono-line);
+  --tracking-display: var(--cg-display-tracking);
+  --tracking-body: var(--cg-body-tracking);
+
+  /* ---- corners ---- */
+  --radius-xs: var(--cg-radius-xs);
+  --radius-sm: var(--cg-radius-sm);
+  --radius-md: var(--cg-radius-md);
+  --radius-lg: var(--cg-radius-lg);
+  --radius-xl: var(--cg-radius-xl);
+  --radius-2xl: var(--cg-radius-2xl);
+  --radius-pill: var(--cg-radius-pill);
+
+  /* ---- elevation ----
+     Hairlines first. Shadows appear on the wash or on hover, never as the
+     default way to contain something. */
+  --shadow-card: var(--cg-shadow-card);
+  --shadow-raised: var(--cg-shadow-raised);
+  --shadow-hover: var(--cg-shadow-hover);
+  --shadow-panel: var(--cg-shadow-panel);
+  --shadow-focus: var(--cg-ring-focus);
+
+  /* ---- spacing ----
+     --spacing sets the 4px base, so the numeric utilities (p-4, gap-6) line up
+     with the --cg-space-* ramp by construction. The named entries below are the
+     layout measurements, which have no numeric equivalent. */
+  --spacing: 4px;
+  --spacing-page-pad: var(--cg-page-pad);
+  --spacing-stack-tight: var(--cg-stack-tight);
+  --spacing-stack: var(--cg-stack);
+  --spacing-stack-loose: var(--cg-stack-loose);
+  --spacing-section-gap: var(--cg-section-gap);
+  --spacing-header: var(--cg-header-height);
+  --spacing-footer: var(--cg-footer-height);
+
+  /* ---- widths ---- */
+  --container-form: var(--cg-column-form);
+  --container-wide: var(--cg-column-wide);
+  --container-page: var(--cg-container);
+  --container-measure: var(--cg-measure);
+
+  /* ---- motion ----
+     Tailwind has an --ease-* namespace, so these become ease-out / ease-in-out.
+     Durations have no theme namespace in v4: use var(--cg-duration) directly, or
+     the duration-[…] arbitrary value. */
+  --ease-out: var(--cg-ease-out);
+  --ease-in-out: var(--cg-ease-in-out);
+}