@nebutra/tokens 0.1.1 → 0.1.2

package/skins/README.md

@@ -0,0 +1,151 @@
+# Design skins & Brand Packages
+
+**Goal:** Create Center users swap a **design language** by applying one **Brand Package**.
+This package is a *carrier* (roles + free elev/radii + zones), not a list of brand hacks.
+
+## Two layers
+
+| Layer | What | Path |
+|-------|------|------|
+| **Recipe defaults** | Button default reads `--btn-default-*` | `@nebutra/tokens/recipe.css` (auto via `preset.css`) |
+| **Brand JSON (SSOT)** | Machine contract for Create Center | `brands/<id>/brand.json` |
+| **Brand skin (generated)** | Semantic colors + recipe overrides | `@nebutra/tokens/skins/<id>.css` only |
+
+## Product chrome contract
+
+| Semantic | Tailwind / CSS | Role |
+|----------|----------------|------|
+| `--primary` + `--primary-foreground` | `bg-primary` | **Atomic pair** |
+| `--background` / `--foreground` | canvas | App shell |
+| `--card` / `--muted` / `--border` / `--input` / `--ring` | surfaces | Controls |
+| `--btn-default-bg/fg/border/radius` | `Button` default | **Recipe** (solid vs outline) |
+
+**Do not** paint product chrome with raw hex / `bg-blue-9` / VI `--brand-primary`.
+
+## Apply a brand (opt-in)
+
+```css
+@import "@nebutra/ui/styles/preset.css";
+/* or: tokens + recipe + sources */
+
+@import "@nebutra/tokens/skins/linear.css"; /* solid acid-lime CTA */
+/* @import "@nebutra/tokens/skins/gsap.css";  outline-first / gradient-stroke */
+```
+
+Optional: `html data-brand="gsap"` for runtime targeting (skins also bind `:root`).
+
+Default Nebutra shipping brand = **no skin import**.
+
+## Compile from Refero export (Create Center pipeline MVP)
+
+```bash
+# Folder with tokens.json + DESIGN.md (Desktop/GSAP style)
+pnpm --filter @nebutra/tokens exec node scripts/compile-brand.mjs ~/Desktop/GSAP --id gsap
+
+# Writes brand.json (SSOT) + skins/<id>.css
+# After hand-editing brand.json:
+pnpm --filter @nebutra/tokens emit-skins
+# Then refresh multi-language catalog:
+pnpm --filter @nebutra/theme sync:skins
+```
+
+Programmatic:
+
+```ts
+import { compileReferoTokens } from "@nebutra/tokens/brand-package";
+
+const { brand, css, warnings } = compileReferoTokens({
+  tokens: referoJson,
+  designMd,
+  id: "gsap",
+});
+```
+
+## Fixtures
+
+Cataloged as **design languages** on `@nebutra/theme` (`LANGUAGE_REGISTRY` / `skins.css`).
+
+| Brand | Recipe | Notes |
+|-------|--------|-------|
+| **linear** | `solid`, 6px radius | Acid-lime filled CTA |
+| **gsap** | `gradient-stroke` / outline, 100px pill | Green is **accent**, not solid fill |
+| **raycast** | `solid` Mist/Iron, 8px, elevation=`key` | Coral is brand-only; CTA is neutral gray |
+| **vercel** | `solid` Obsidian on paper, 6px, elevation=`hairline` | Light monochrome; no chromatic CTA |
+| **vanta** | `solid` Vivid Violet, 999px pill, elevation=`none` | Light parchment; **indigo-ink** brand-mark ≠ CTA; carbon 1px borders |
+| **stripe** | `solid` Indigo Ink, 4px, elevation=`none` | Light frost ledger; **midnight** brand-mark ≠ indigo CTA; tint-ladder depth |
+| **notion** | `solid` Notion Blue, 8px/12px, elevation=`none` | Warm paper canvas ≠ white cards; ink brand-mark; accent hues decorative only |
+
+```ts
+import { applyLanguage, LANGUAGE_REGISTRY } from "@nebutra/theme";
+applyLanguage("vanta"); // built-in package resolved automatically
+```
+
+Multi-language catalog (scoped `html[data-brand]` only):
+
+```css
+@import "@nebutra/theme/skins.css";
+/* then: document.documentElement.dataset.brand = "raycast" */
+```
+
+## Why recipe exists
+
+Linear and GSAP both dark — but **button language differs**. Color-only skins fail Create Center.  
+`Button` / `Badge` defaults + Card/Input elevation/heights consume recipe vars so packages flip solid ↔ outline ↔ no-shadow without call-site edits.
+
+Governed surface: `--btn-default-*`, `--badge-default-*`, `--control-height-*`, `--elevation-card|control|raised`, `--font-weight-medium`.  
+**Not governed (allowed):** VI logo hex, OAuth marks, decorative demos, trial/turbo special fills.
+
+## Runtime apply (Create Center preview)
+
+```ts
+import {
+  compileReferoTokens,
+  applyBrandPackage,
+  clearBrand,
+  restorePersistedBrand,
+  validateBrandPackage,
+  useBrand,
+  useBrandIframePreview,
+} from "@nebutra/tokens";
+
+const { brand, warnings } = compileReferoTokens({ tokens, designMd, id: "gsap" });
+const v = validateBrandPackage(brand);
+if (!v.ok) throw new Error(v.errors.join(", "));
+
+applyBrandPackage(brand, { persist: true });
+clearBrand({ persist: true });
+```
+
+### React hooks
+
+```tsx
+// Host app
+const { brand, apply, clear } = useBrand({ autoRestore: true });
+
+// Multi-tenant iframe preview
+const { iframeRef, apply: preview, writePreviewDocument } = useBrandIframePreview({
+  baseStylesheetHrefs: ["/tokens-preset.css"],
+});
+// <iframe ref={iframeRef} />
+// preview(brand)  or  writePreviewDocument(brand, "<button class='btn-brand-default'>CTA</button>")
+```
+
+### Fonts + zones
+
+- `typography.faces[]` → emitted as `@font-face` (swap URL for Create Center CDN/upload).
+- `zones.product` / `zones.marketing` → CSS vars + `[data-zone="…"]` / `.zone-…` consumers.
+- Marketing may use 224px display; product stays compact.
+
+### design-sync
+
+```ts
+import { getDesignSync, compileBrandFromTokenSets } from "@nebutra/design-sync";
+
+const sync = await getDesignSync();
+const { sets } = await sync.pull();
+const { brand, css, warnings } = compileBrandFromTokenSets(sets, { id: "tenant-a" });
+```
+
+```bash
+design-sync brand --json --id tenant-a
+```

package/skins/gsap.css

@@ -0,0 +1,247 @@
+/**
+ * Brand carrier skin: GSAP (gsap) v1.0.0
+ * darkDefault=true dualMode=false button=gradient-stroke
+ * fonts=2 zones=yes mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+/* Brand font faces */
+@font-face {
+  font-family: "Mori";
+  src: url("/brand-assets/mori-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Mori";
+  src: url("/brand-assets/mori-semibold.woff2") format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+:root,
+.dark,
+html[data-brand="gsap"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 150 7% 6%;
+  --role-canvas-fg: 54 100% 94%;
+  --role-surface: 0 0% 10%;
+  --role-surface-fg: 54 100% 94%;
+  --role-action: 137 92% 47%;
+  --role-action-fg: 150 7% 6%;
+  --role-quiet: 70 5% 25%;
+  --role-quiet-fg: 54 100% 94%;
+  --role-muted: 0 0% 10%;
+  --role-muted-fg: 60 6% 46%;
+  --role-border: 70 5% 25%;
+  --role-input: 70 5% 25%;
+  --role-ring: 137 92% 47%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 150 7% 6%;
+  --foreground: 54 100% 94%;
+  --card: 0 0% 10%;
+  --card-foreground: 54 100% 94%;
+  --popover: 0 0% 10%;
+  --popover-foreground: 54 100% 94%;
+  --primary: 137 92% 47%;
+  --primary-foreground: 150 7% 6%;
+  --secondary: 70 5% 25%;
+  --secondary-foreground: 54 100% 94%;
+  --muted: 0 0% 10%;
+  --muted-foreground: 60 6% 46%;
+  --accent: 70 5% 25%;
+  --accent-foreground: 54 100% 94%;
+  --destructive: 309 100% 47%;
+  --destructive-foreground: 54 100% 94%;
+  --border: 70 5% 25%;
+  --input: 70 5% 25%;
+  --ring: 137 92% 47%;
+  --success: 137 92% 47%;
+  --success-foreground: 150 7% 6%;
+  --info: 191 100% 44%;
+  --info-foreground: 150 7% 6%;
+  --sidebar: 0 0% 10%;
+  --sidebar-foreground: 54 100% 94%;
+  --sidebar-primary: 137 92% 47%;
+  --sidebar-primary-foreground: 150 7% 6%;
+  --sidebar-accent: 70 5% 25%;
+  --sidebar-accent-foreground: 54 100% 94%;
+  --sidebar-border: 70 5% 25%;
+  --sidebar-ring: 137 92% 47%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 100px;
+  --radius-button: 100px;
+  --radius-buttons: 100px;
+  --radius-md: 100px;
+  --radius-card: 8px;
+  --radius-lg: 8px;
+  --radius-badge: 9999px;
+  --badge-default-radius: 9999px;
+  --radius-inputs: 100px;
+  --input-radius: 100px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 0 0 #0000;
+  --shadow-xs: 0 0 #0000;
+  --shadow-sm: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --btn-default-shadow: 0 0 #0000;
+  --btn-default-bg: transparent;
+  --btn-default-fg: hsl(var(--foreground));
+  --btn-default-border-width: 1.5px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
+  --btn-default-hover-bg: hsl(var(--primary) / 0.08);
+  --badge-default-bg: transparent;
+  --badge-default-fg: hsl(var(--foreground));
+  --badge-default-border: #fffce1;
+  --badge-default-hover-bg: hsl(var(--foreground) / 0.06);
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 0.875rem;
+  --control-height-tiny: 1.25rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.5rem;
+  --control-font-size-md: 0.8125rem;
+
+  /* Typography */
+  --font-sans: "Mori", "Inter Tight", "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-weight-heading: 600;
+
+  /* Zone type scales */
+  --zone-product-caption-size: 14px;
+  --zone-product-caption-leading: 1.4;
+  --zone-product-caption-tracking: -0.14px;
+  --zone-product-caption-weight: 400;
+  --zone-product-body-sm-size: 16px;
+  --zone-product-body-sm-leading: 1.15;
+  --zone-product-body-sm-weight: 400;
+  --zone-product-body-size: 19px;
+  --zone-product-body-leading: 1.15;
+  --zone-product-body-weight: 400;
+  --zone-product-body-lg-size: 23px;
+  --zone-product-body-lg-leading: 1.38;
+  --zone-product-body-lg-tracking: -0.23px;
+  --zone-product-body-lg-weight: 400;
+  --zone-product-subheading-size: 34px;
+  --zone-product-subheading-leading: 1.2;
+  --zone-product-subheading-tracking: -0.34px;
+  --zone-product-subheading-weight: 400;
+  --zone-product-heading-size: 44px;
+  --zone-product-heading-leading: 1.2;
+  --zone-product-heading-tracking: -0.44px;
+  --zone-product-heading-weight: 600;
+  --zone-marketing-body-size: 19px;
+  --zone-marketing-body-leading: 1.15;
+  --zone-marketing-body-weight: 400;
+  --zone-marketing-heading-size: 66px;
+  --zone-marketing-heading-leading: 1.2;
+  --zone-marketing-heading-tracking: -0.66px;
+  --zone-marketing-heading-weight: 600;
+  --zone-marketing-heading-lg-size: 101px;
+  --zone-marketing-heading-lg-leading: 1;
+  --zone-marketing-heading-lg-tracking: -1.11px;
+  --zone-marketing-heading-lg-weight: 600;
+  --zone-marketing-display-size: 224px;
+  --zone-marketing-display-leading: 0.9;
+  --zone-marketing-display-tracking: -4.48px;
+  --zone-marketing-display-weight: 600;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-gsap: #0ae448;
+  --brand-category-scroll: #fec5fb;
+  --brand-category-svg: #ff8709;
+  --brand-category-text: #9d95ff;
+  --brand-category-ui: #00bae2;
+  --brand-category-other: #abff84;
+}
+
+/* Zone: product — product never inherits marketing display */
+[data-zone="product"],
+.zone-product {
+  font-size: var(--zone-product-body-size, 19px);
+  line-height: var(--zone-product-body-leading, 1.15);
+  font-weight: var(--zone-product-body-weight, 400);
+  --text-caption: var(--zone-product-caption-size, inherit);
+  --leading-caption: var(--zone-product-caption-leading, inherit);
+  --tracking-caption: var(--zone-product-caption-tracking, inherit);
+  --text-body-sm: var(--zone-product-body-sm-size, inherit);
+  --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
+  --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
+  --text-body: var(--zone-product-body-size, inherit);
+  --leading-body: var(--zone-product-body-leading, inherit);
+  --tracking-body: var(--zone-product-body-tracking, inherit);
+  --text-body-lg: var(--zone-product-body-lg-size, inherit);
+  --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
+  --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
+  --text-subheading: var(--zone-product-subheading-size, inherit);
+  --leading-subheading: var(--zone-product-subheading-leading, inherit);
+  --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
+  --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
+  --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
+  --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
+  --text-heading: var(--zone-product-heading-size, inherit);
+  --leading-heading: var(--zone-product-heading-leading, inherit);
+  --tracking-heading: var(--zone-product-heading-tracking, inherit);
+  --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
+  --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
+  --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
+  --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
+  --leading-display: var(--zone-product-display-leading, inherit);
+  --tracking-display: var(--zone-product-display-tracking, inherit);
+}
+
+/* Zone: marketing — product never inherits marketing display */
+[data-zone="marketing"],
+.zone-marketing {
+  font-size: var(--zone-marketing-body-size, 19px);
+  line-height: var(--zone-marketing-body-leading, 1.15);
+  font-weight: var(--zone-marketing-body-weight, 400);
+  --text-caption: var(--zone-marketing-caption-size, inherit);
+  --leading-caption: var(--zone-marketing-caption-leading, inherit);
+  --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
+  --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
+  --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
+  --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
+  --text-body: var(--zone-marketing-body-size, inherit);
+  --leading-body: var(--zone-marketing-body-leading, inherit);
+  --tracking-body: var(--zone-marketing-body-tracking, inherit);
+  --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
+  --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
+  --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
+  --text-subheading: var(--zone-marketing-subheading-size, inherit);
+  --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
+  --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
+  --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
+  --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
+  --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
+  --text-heading: var(--zone-marketing-heading-size, inherit);
+  --leading-heading: var(--zone-marketing-heading-leading, inherit);
+  --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
+  --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
+  --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
+  --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
+  --text-display: var(--zone-marketing-display-size, inherit);
+  --leading-display: var(--zone-marketing-display-leading, inherit);
+  --tracking-display: var(--zone-marketing-display-tracking, inherit);
+}
+
+/* Product chrome must not use decorative gradients as action fills */
+[data-zone="product"] .btn-brand-default,
+.zone-product .btn-brand-default {
+  /* intentional no-op: documents contract; action uses --primary only */
+}

package/skins/linear.css

@@ -0,0 +1,282 @@
+/**
+ * Brand carrier skin: Linear (linear) v1.0.0
+ * darkDefault=true dualMode=true button=solid
+ * fonts=1 zones=yes mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+/* Brand font faces */
+@font-face {
+  font-family: "Inter Variable";
+  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
+    format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:root,
+html[data-brand="linear"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 0 0% 100%;
+  --role-canvas-fg: 210 11% 4%;
+  --role-surface: 0 0% 98%;
+  --role-surface-fg: 210 11% 4%;
+  --role-action: 64 89% 54%;
+  --role-action-fg: 210 11% 4%;
+  --role-quiet: 220 14% 96%;
+  --role-quiet-fg: 210 11% 4%;
+  --role-muted: 220 14% 96%;
+  --role-muted-fg: 218 5% 41%;
+  --role-border: 220 13% 91%;
+  --role-input: 0 0% 100%;
+  --role-ring: 64 89% 54%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 100%;
+  --foreground: 210 11% 4%;
+  --card: 0 0% 98%;
+  --card-foreground: 210 11% 4%;
+  --popover: 0 0% 98%;
+  --popover-foreground: 210 11% 4%;
+  --primary: 64 89% 54%;
+  --primary-foreground: 210 11% 4%;
+  --secondary: 220 14% 96%;
+  --secondary-foreground: 210 11% 4%;
+  --muted: 220 14% 96%;
+  --muted-foreground: 218 5% 41%;
+  --accent: 220 14% 96%;
+  --accent-foreground: 210 11% 4%;
+  --destructive: 0 79% 63%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 13% 91%;
+  --input: 0 0% 100%;
+  --ring: 64 89% 54%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 186 98% 40%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 210 11% 4%;
+  --sidebar-primary: 64 89% 54%;
+  --sidebar-primary-foreground: 210 11% 4%;
+  --sidebar-accent: 220 14% 96%;
+  --sidebar-accent-foreground: 210 11% 4%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 64 89% 54%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 6px;
+  --radius-button: 6px;
+  --radius-buttons: 6px;
+  --radius-md: 6px;
+  --radius-card: 12px;
+  --radius-lg: 12px;
+  --radius-badge: 9999px;
+  --badge-default-radius: 9999px;
+  --radius-inputs: 6px;
+  --input-radius: 6px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
+  --elevation-raised: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --shadow-xs: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
+  --shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --shadow-md: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --shadow-lg: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --btn-default-shadow: 0 0 #0000;
+  --btn-default-bg: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border-width: 0px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: transparent;
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--primary));
+  --badge-default-fg: hsl(var(--primary-foreground));
+  --badge-default-border: transparent;
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 0.875rem;
+  --control-height-tiny: 1.25rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.5rem;
+  --control-font-size-md: 0.8125rem;
+
+  /* Typography */
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
+  --font-weight-heading: 510;
+
+  /* Zone type scales */
+  --zone-product-caption-size: 13px;
+  --zone-product-caption-leading: 1.2;
+  --zone-product-caption-weight: 400;
+  --zone-product-body-sm-size: 14px;
+  --zone-product-body-sm-leading: 1.5;
+  --zone-product-body-sm-weight: 400;
+  --zone-product-body-size: 14px;
+  --zone-product-body-leading: 1.5;
+  --zone-product-body-weight: 400;
+  --zone-product-body-lg-size: 16px;
+  --zone-product-body-lg-leading: 1.5;
+  --zone-product-body-lg-weight: 400;
+  --zone-product-heading-size: 24px;
+  --zone-product-heading-leading: 1.25;
+  --zone-product-heading-tracking: -0.012em;
+  --zone-product-heading-weight: 510;
+  --zone-product-display-size: 32px;
+  --zone-product-display-leading: 1.15;
+  --zone-product-display-tracking: -0.022em;
+  --zone-product-display-weight: 510;
+  --zone-marketing-body-size: 15px;
+  --zone-marketing-body-leading: 1.6;
+  --zone-marketing-body-weight: 400;
+  --zone-marketing-heading-size: 48px;
+  --zone-marketing-heading-leading: 1;
+  --zone-marketing-heading-tracking: -0.022em;
+  --zone-marketing-heading-weight: 510;
+  --zone-marketing-display-size: 72px;
+  --zone-marketing-display-leading: 1;
+  --zone-marketing-display-tracking: -0.022em;
+  --zone-marketing-display-weight: 510;
+}
+
+.dark,
+html.dark[data-brand="linear"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 210 11% 4%;
+  --role-canvas-fg: 0 0% 100%;
+  --role-surface: 210 6% 6%;
+  --role-surface-fg: 0 0% 100%;
+  --role-action: 64 89% 54%;
+  --role-action-fg: 210 11% 4%;
+  --role-quiet: 223 9% 15%;
+  --role-quiet-fg: 218 21% 85%;
+  --role-muted: 210 4% 9%;
+  --role-muted-fg: 218 5% 41%;
+  --role-border: 223 9% 15%;
+  --role-input: 223 9% 15%;
+  --role-ring: 64 89% 54%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 210 11% 4%;
+  --foreground: 0 0% 100%;
+  --card: 210 6% 6%;
+  --card-foreground: 0 0% 100%;
+  --popover: 210 6% 6%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 64 89% 54%;
+  --primary-foreground: 210 11% 4%;
+  --secondary: 223 9% 15%;
+  --secondary-foreground: 218 21% 85%;
+  --muted: 210 4% 9%;
+  --muted-foreground: 218 5% 41%;
+  --accent: 223 9% 15%;
+  --accent-foreground: 218 21% 85%;
+  --destructive: 0 79% 63%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 223 9% 15%;
+  --input: 223 9% 15%;
+  --ring: 64 89% 54%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 186 98% 40%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 210 6% 6%;
+  --sidebar-foreground: 0 0% 100%;
+  --sidebar-primary: 64 89% 54%;
+  --sidebar-primary-foreground: 210 11% 4%;
+  --sidebar-accent: 223 9% 15%;
+  --sidebar-accent-foreground: 218 21% 85%;
+  --sidebar-border: 223 9% 15%;
+  --sidebar-ring: 64 89% 54%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+}
+
+/* Zone: product — product never inherits marketing display */
+[data-zone="product"],
+.zone-product {
+  font-size: var(--zone-product-body-size, 14px);
+  line-height: var(--zone-product-body-leading, 1.5);
+  font-weight: var(--zone-product-body-weight, 400);
+  --text-caption: var(--zone-product-caption-size, inherit);
+  --leading-caption: var(--zone-product-caption-leading, inherit);
+  --tracking-caption: var(--zone-product-caption-tracking, inherit);
+  --text-body-sm: var(--zone-product-body-sm-size, inherit);
+  --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
+  --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
+  --text-body: var(--zone-product-body-size, inherit);
+  --leading-body: var(--zone-product-body-leading, inherit);
+  --tracking-body: var(--zone-product-body-tracking, inherit);
+  --text-body-lg: var(--zone-product-body-lg-size, inherit);
+  --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
+  --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
+  --text-subheading: var(--zone-product-subheading-size, inherit);
+  --leading-subheading: var(--zone-product-subheading-leading, inherit);
+  --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
+  --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
+  --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
+  --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
+  --text-heading: var(--zone-product-heading-size, inherit);
+  --leading-heading: var(--zone-product-heading-leading, inherit);
+  --tracking-heading: var(--zone-product-heading-tracking, inherit);
+  --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
+  --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
+  --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
+  --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
+  --leading-display: var(--zone-product-display-leading, inherit);
+  --tracking-display: var(--zone-product-display-tracking, inherit);
+}
+
+/* Zone: marketing — product never inherits marketing display */
+[data-zone="marketing"],
+.zone-marketing {
+  font-size: var(--zone-marketing-body-size, 15px);
+  line-height: var(--zone-marketing-body-leading, 1.6);
+  font-weight: var(--zone-marketing-body-weight, 400);
+  --text-caption: var(--zone-marketing-caption-size, inherit);
+  --leading-caption: var(--zone-marketing-caption-leading, inherit);
+  --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
+  --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
+  --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
+  --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
+  --text-body: var(--zone-marketing-body-size, inherit);
+  --leading-body: var(--zone-marketing-body-leading, inherit);
+  --tracking-body: var(--zone-marketing-body-tracking, inherit);
+  --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
+  --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
+  --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
+  --text-subheading: var(--zone-marketing-subheading-size, inherit);
+  --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
+  --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
+  --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
+  --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
+  --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
+  --text-heading: var(--zone-marketing-heading-size, inherit);
+  --leading-heading: var(--zone-marketing-heading-leading, inherit);
+  --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
+  --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
+  --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
+  --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
+  --text-display: var(--zone-marketing-display-size, inherit);
+  --leading-display: var(--zone-marketing-display-leading, inherit);
+  --tracking-display: var(--zone-marketing-display-tracking, inherit);
+}
+
+/* Product chrome must not use decorative gradients as action fills */
+[data-zone="product"] .btn-brand-default,
+.zone-product .btn-brand-default {
+  /* intentional no-op: documents contract; action uses --primary only */
+}