@nebutra/theme 0.2.1 → 2.0.0

package/skins.css

@@ -7,31 +7,255 @@
  * Switch: document.documentElement.dataset.brand = "vanta" | "linear" | ...
  * Factory: delete dataset.brand (or clearLanguage() / applyLanguage("factory")).
  *
- * Languages: gsap, linear, notion, raycast, stripe, vanta, vercel
+ * Languages: cosmos, gsap, linear, notion, raycast, stripe, vanta, vercel
  */
 
 /**
- * Brand carrier skin: GSAP (gsap) v1.0.0
- * darkDefault=true dualMode=false button=gradient-stroke
- * fonts=2 zones=yes mode=global
+ * Brand carrier skin: Cosmos (cosmos) v2.0.0
+ * darkDefault=false dualMode=true button=solid
+ * fonts=0 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;
+html[data-brand="cosmos"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 30 20% 96%;
+  --role-canvas-fg: 0 0% 5%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 0 0% 5%;
+  --role-action: 0 0% 5%;
+  --role-action-fg: 30 20% 96%;
+  --role-quiet: 0 0% 100%;
+  --role-quiet-fg: 0 0% 5%;
+  --role-muted: 30 20% 96%;
+  --role-muted-fg: 12 2% 42%;
+  --role-border: 30 5% 85%;
+  --role-input: 30 5% 85%;
+  --role-ring: 0 0% 5%;
+  --role-brand: 0 0% 5%;
+  --role-brand-fg: 30 20% 96%;
+  --brand-mark: 0 0% 5%;
+  --brand-mark-foreground: 30 20% 96%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 30 20% 96%;
+  --foreground: 0 0% 5%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 5%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 5%;
+  --primary: 0 0% 5%;
+  --primary-foreground: 30 20% 96%;
+  --secondary: 0 0% 100%;
+  --secondary-foreground: 0 0% 5%;
+  --muted: 30 20% 96%;
+  --muted-foreground: 12 2% 42%;
+  --accent: 0 0% 5%;
+  --accent-foreground: 30 20% 96%;
+  --destructive: 4 76% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 30 5% 85%;
+  --input: 30 5% 85%;
+  --ring: 0 0% 5%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 12 2% 42%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 0 0% 5%;
+  --sidebar-primary: 0 0% 5%;
+  --sidebar-primary-foreground: 30 20% 96%;
+  --sidebar-accent: 0 0% 5%;
+  --sidebar-accent-foreground: 30 20% 96%;
+  --sidebar-border: 30 5% 85%;
+  --sidebar-ring: 0 0% 5%;
+  --brand-primary: hsl(0 0% 5%);
+  --brand-accent: hsl(0 0% 5%);
+  --brand-accent-foreground: hsl(30 20% 96%);
+  --brand-tertiary: hsl(0 0% 5%);
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(30 20% 96%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(30 5% 85%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(30 5% 85%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(30 5% 85%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(30 5% 85%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(30 5% 85%);
+  --neutral-8: color-mix(in oklab, hsl(12 2% 42%) 25%, hsl(30 5% 85%));
+  --neutral-9: color-mix(in oklab, hsl(12 2% 42%) 50%, hsl(30 5% 85%));
+  --neutral-10: color-mix(in oklab, hsl(12 2% 42%) 75%, hsl(30 5% 85%));
+  --neutral-11: hsl(12 2% 42%);
+  --neutral-12: hsl(0 0% 5%);
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 16px;
+  --radius-button: 16px;
+  --radius-buttons: 16px;
+  --radius-md: min(16px, 16px);
+  --radius-card: 16px;
+  --radius-lg: 16px;
+  --radius-badge: 16px;
+  --badge-default-radius: 16px;
+  --radius-inputs: 16px;
+  --input-radius: 16px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 0 0 #0000;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
+  --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: linear-gradient(transparent, transparent);
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--secondary));
+  --badge-default-fg: hsl(var(--secondary-foreground));
+  --badge-default-border: transparent;
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
+
+  /* Typography */
+  --font-sans:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-cn:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-heading:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-display:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, monospace;
+  --font-weight-heading: 350;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 80ms;
+  --motion-duration-micro: 80ms;
+  --duration-flow: 180ms;
+  --motion-duration-flow: 180ms;
+  --duration-reveal: 180ms;
+  --motion-duration-reveal: 180ms;
+  --duration-cinematic: 320ms;
+  --motion-duration-cinematic: 320ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 1rem;
+  --space-source-md: 1.25rem;
+  --space-source-lg: 1.5rem;
+  --space-source-xl: 2rem;
+  --space-source-2xl: 3rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-linen-canvas: #f7f5f3;
+  --brand-category-ink-black: #0d0d0d;
+  --brand-category-paper-white: #ffffff;
+  --brand-category-stone: #6e6a69;
+  --brand-category-pebble: #9a9796;
 }
 
-@font-face {
-  font-family: "Mori";
-  src: url("/brand-assets/mori-semibold.woff2") format("woff2");
-  font-weight: 600;
-  font-display: swap;
+.dark,
+html.dark[data-brand="cosmos"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 0 0% 5%;
+  --role-canvas-fg: 30 20% 96%;
+  --role-surface: 0 0% 11%;
+  --role-surface-fg: 30 20% 96%;
+  --role-action: 30 20% 96%;
+  --role-action-fg: 0 0% 5%;
+  --role-quiet: 0 0% 14%;
+  --role-quiet-fg: 30 20% 96%;
+  --role-muted: 0 0% 11%;
+  --role-muted-fg: 15 2% 60%;
+  --role-border: 0 1% 18%;
+  --role-input: 0 1% 18%;
+  --role-ring: 30 20% 96%;
+  --role-brand: 30 20% 96%;
+  --role-brand-fg: 0 0% 5%;
+  --brand-mark: 30 20% 96%;
+  --brand-mark-foreground: 0 0% 5%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 5%;
+  --foreground: 30 20% 96%;
+  --card: 0 0% 11%;
+  --card-foreground: 30 20% 96%;
+  --popover: 0 0% 11%;
+  --popover-foreground: 30 20% 96%;
+  --primary: 30 20% 96%;
+  --primary-foreground: 0 0% 5%;
+  --secondary: 0 0% 14%;
+  --secondary-foreground: 30 20% 96%;
+  --muted: 0 0% 11%;
+  --muted-foreground: 15 2% 60%;
+  --accent: 30 20% 96%;
+  --accent-foreground: 0 0% 5%;
+  --destructive: 4 76% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 1% 18%;
+  --input: 0 1% 18%;
+  --ring: 30 20% 96%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 12 2% 42%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 11%;
+  --sidebar-foreground: 30 20% 96%;
+  --sidebar-primary: 30 20% 96%;
+  --sidebar-primary-foreground: 0 0% 5%;
+  --sidebar-accent: 30 20% 96%;
+  --sidebar-accent-foreground: 0 0% 5%;
+  --sidebar-border: 0 1% 18%;
+  --sidebar-ring: 30 20% 96%;
+  --brand-primary: hsl(30 20% 96%);
+  --brand-accent: hsl(30 20% 96%);
+  --brand-accent-foreground: hsl(0 0% 5%);
+  --brand-tertiary: hsl(30 20% 96%);
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 5%);
+  --neutral-2: hsl(0 0% 11%);
+  --neutral-3: color-mix(in oklab, hsl(0 1% 18%) 20%, hsl(0 0% 11%));
+  --neutral-4: color-mix(in oklab, hsl(0 1% 18%) 40%, hsl(0 0% 11%));
+  --neutral-5: color-mix(in oklab, hsl(0 1% 18%) 60%, hsl(0 0% 11%));
+  --neutral-6: color-mix(in oklab, hsl(0 1% 18%) 80%, hsl(0 0% 11%));
+  --neutral-7: hsl(0 1% 18%);
+  --neutral-8: color-mix(in oklab, hsl(15 2% 60%) 25%, hsl(0 1% 18%));
+  --neutral-9: color-mix(in oklab, hsl(15 2% 60%) 50%, hsl(0 1% 18%));
+  --neutral-10: color-mix(in oklab, hsl(15 2% 60%) 75%, hsl(0 1% 18%));
+  --neutral-11: hsl(15 2% 60%);
+  --neutral-12: hsl(30 20% 96%);
 }
 
+/**
+ * Brand carrier skin: GSAP (gsap) v1.0.0
+ * darkDefault=true dualMode=false button=gradient-stroke
+ * fonts=0 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
 html[data-brand="gsap"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 150 7% 6%;
@@ -80,17 +304,35 @@ html[data-brand="gsap"] {
   --sidebar-accent-foreground: 54 100% 94%;
   --sidebar-border: 70 5% 25%;
   --sidebar-ring: 137 92% 47%;
+  --brand-primary: hsl(137 92% 47%);
+  --brand-accent: hsl(137 92% 47%);
+  --brand-accent-foreground: hsl(150 7% 6%);
+  --brand-tertiary: hsl(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));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(150 7% 6%);
+  --neutral-2: hsl(0 0% 10%);
+  --neutral-3: color-mix(in oklab, hsl(70 5% 25%) 20%, hsl(0 0% 10%));
+  --neutral-4: color-mix(in oklab, hsl(70 5% 25%) 40%, hsl(0 0% 10%));
+  --neutral-5: color-mix(in oklab, hsl(70 5% 25%) 60%, hsl(0 0% 10%));
+  --neutral-6: color-mix(in oklab, hsl(70 5% 25%) 80%, hsl(0 0% 10%));
+  --neutral-7: hsl(70 5% 25%);
+  --neutral-8: color-mix(in oklab, hsl(60 6% 46%) 25%, hsl(70 5% 25%));
+  --neutral-9: color-mix(in oklab, hsl(60 6% 46%) 50%, hsl(70 5% 25%));
+  --neutral-10: color-mix(in oklab, hsl(60 6% 46%) 75%, hsl(70 5% 25%));
+  --neutral-11: hsl(60 6% 46%);
+  --neutral-12: hsl(54 100% 94%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 100px;
   --radius-button: 100px;
   --radius-buttons: 100px;
-  --radius-md: 100px;
+  --radius-md: min(100px, 8px);
   --radius-card: 8px;
   --radius-lg: 8px;
   --radius-badge: 9999px;
@@ -103,10 +345,10 @@ html[data-brand="gsap"] {
   --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;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
   --btn-default-shadow: 0 0 #0000;
   --btn-default-bg: transparent;
   --btn-default-fg: hsl(var(--foreground));
@@ -124,52 +366,49 @@ html[data-brand="gsap"] {
   --control-height-sm: 1.75rem;
   --control-height-md: 2rem;
   --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
   --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-sans:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", 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;
+  /* Motion */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --motion-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --duration-micro: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 250ms;
+  --motion-duration-flow: 250ms;
+  --duration-reveal: 400ms;
+  --motion-duration-reveal: 400ms;
+  --duration-cinematic: 700ms;
+  --motion-duration-cinematic: 700ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.875rem;
+  --space-source-md: 1.25rem;
+  --space-source-lg: 1.75rem;
+  --space-source-xl: 2.5rem;
+  --space-source-2xl: 3.5rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-gsap: #0ae448;
@@ -180,98 +419,13 @@ html[data-brand="gsap"] {
   --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 */
-}
-
 /**
  * Brand carrier skin: Linear (linear) v1.0.0
  * darkDefault=true dualMode=true button=solid
- * fonts=1 zones=yes mode=global
+ * fonts=0 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;
-}
-
 html[data-brand="linear"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 0 0% 100%;
@@ -285,7 +439,7 @@ html[data-brand="linear"] {
   --role-muted: 220 14% 96%;
   --role-muted-fg: 218 5% 41%;
   --role-border: 220 13% 91%;
-  --role-input: 0 0% 100%;
+  --role-input: 220 13% 91%;
   --role-ring: 64 89% 54%;
 
   /* ── shadcn bridge (primary = action CTA) ── */
@@ -306,7 +460,7 @@ html[data-brand="linear"] {
   --destructive: 0 79% 63%;
   --destructive-foreground: 0 0% 100%;
   --border: 220 13% 91%;
-  --input: 0 0% 100%;
+  --input: 220 13% 91%;
   --ring: 64 89% 54%;
   --success: 134 62% 40%;
   --success-foreground: 0 0% 100%;
@@ -320,17 +474,35 @@ html[data-brand="linear"] {
   --sidebar-accent-foreground: 210 11% 4%;
   --sidebar-border: 220 13% 91%;
   --sidebar-ring: 64 89% 54%;
+  --brand-primary: hsl(64 89% 54%);
+  --brand-accent: hsl(64 89% 54%);
+  --brand-accent-foreground: hsl(210 11% 4%);
+  --brand-tertiary: hsl(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));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 100%);
+  --neutral-2: hsl(0 0% 98%);
+  --neutral-3: color-mix(in oklab, hsl(220 13% 91%) 20%, hsl(0 0% 98%));
+  --neutral-4: color-mix(in oklab, hsl(220 13% 91%) 40%, hsl(0 0% 98%));
+  --neutral-5: color-mix(in oklab, hsl(220 13% 91%) 60%, hsl(0 0% 98%));
+  --neutral-6: color-mix(in oklab, hsl(220 13% 91%) 80%, hsl(0 0% 98%));
+  --neutral-7: hsl(220 13% 91%);
+  --neutral-8: color-mix(in oklab, hsl(218 5% 41%) 25%, hsl(220 13% 91%));
+  --neutral-9: color-mix(in oklab, hsl(218 5% 41%) 50%, hsl(220 13% 91%));
+  --neutral-10: color-mix(in oklab, hsl(218 5% 41%) 75%, hsl(220 13% 91%));
+  --neutral-11: hsl(218 5% 41%);
+  --neutral-12: hsl(210 11% 4%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 6px;
   --radius-button: 6px;
   --radius-buttons: 6px;
-  --radius-md: 6px;
+  --radius-md: min(6px, 12px);
   --radius-card: 12px;
   --radius-lg: 12px;
   --radius-badge: 9999px;
@@ -340,19 +512,19 @@ html[data-brand="linear"] {
   --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));
+  --elevation-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-control: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --elevation-raised: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --elevation-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --elevation-lg: 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-stroke-gradient: linear-gradient(transparent, 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));
@@ -364,47 +536,49 @@ html[data-brand="linear"] {
   --control-height-sm: 1.75rem;
   --control-height-md: 2rem;
   --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
   --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-sans:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    var(--font-jetbrains-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;
+  /* Motion */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 80ms;
+  --motion-duration-micro: 80ms;
+  --duration-flow: 140ms;
+  --motion-duration-flow: 140ms;
+  --duration-reveal: 200ms;
+  --motion-duration-reveal: 200ms;
+  --duration-cinematic: 320ms;
+  --motion-duration-cinematic: 320ms;
+
+  /* Spacing */
+  --space-source-xs: 0.375rem;
+  --space-source-sm: 0.5rem;
+  --space-source-md: 0.75rem;
+  --space-source-lg: 1rem;
+  --space-source-xl: 1.5rem;
+  --space-source-2xl: 2rem;
 }
 
 .dark,
@@ -456,111 +630,37 @@ html.dark[data-brand="linear"] {
   --sidebar-accent-foreground: 218 21% 85%;
   --sidebar-border: 223 9% 15%;
   --sidebar-ring: 64 89% 54%;
+  --brand-primary: hsl(64 89% 54%);
+  --brand-accent: hsl(64 89% 54%);
+  --brand-accent-foreground: hsl(210 11% 4%);
+  --brand-tertiary: hsl(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 */
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(210 11% 4%);
+  --neutral-2: hsl(210 6% 6%);
+  --neutral-3: color-mix(in oklab, hsl(223 9% 15%) 20%, hsl(210 6% 6%));
+  --neutral-4: color-mix(in oklab, hsl(223 9% 15%) 40%, hsl(210 6% 6%));
+  --neutral-5: color-mix(in oklab, hsl(223 9% 15%) 60%, hsl(210 6% 6%));
+  --neutral-6: color-mix(in oklab, hsl(223 9% 15%) 80%, hsl(210 6% 6%));
+  --neutral-7: hsl(223 9% 15%);
+  --neutral-8: color-mix(in oklab, hsl(218 5% 41%) 25%, hsl(223 9% 15%));
+  --neutral-9: color-mix(in oklab, hsl(218 5% 41%) 50%, hsl(223 9% 15%));
+  --neutral-10: color-mix(in oklab, hsl(218 5% 41%) 75%, hsl(223 9% 15%));
+  --neutral-11: hsl(218 5% 41%);
+  --neutral-12: hsl(0 0% 100%);
 }
 
 /**
  * Brand carrier skin: Notion (notion) v1.0.0
  * darkDefault=false dualMode=false button=solid
- * fonts=2 zones=yes mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "NotionInter";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Lyon Text";
-  src: url("/brand-assets/lyon-text-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-display: swap;
-}
-
 html[data-brand="notion"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 30 10% 96%;
@@ -572,9 +672,9 @@ html[data-brand="notion"] {
   --role-quiet: 208 92% 95%;
   --role-quiet-fg: 208 100% 44%;
   --role-muted: 208 92% 95%;
-  --role-muted-fg: 0 0% 46%;
+  --role-muted-fg: 0 0% 43%;
   --role-border: 30 5% 88%;
-  --role-input: 0 0% 100%;
+  --role-input: 30 5% 88%;
   --role-ring: 208 100% 44%;
   --role-brand: 0 0% 0%;
   --role-brand-fg: 0 0% 100%;
@@ -593,13 +693,13 @@ html[data-brand="notion"] {
   --secondary: 208 92% 95%;
   --secondary-foreground: 208 100% 44%;
   --muted: 208 92% 95%;
-  --muted-foreground: 0 0% 46%;
+  --muted-foreground: 0 0% 43%;
   --accent: 0 0% 0%;
   --accent-foreground: 0 0% 100%;
   --destructive: 7 92% 58%;
   --destructive-foreground: 0 0% 100%;
   --border: 30 5% 88%;
-  --input: 0 0% 100%;
+  --input: 30 5% 88%;
   --ring: 208 100% 44%;
   --warning: 40 100% 53%;
   --warning-foreground: 0 0% 0%;
@@ -613,17 +713,35 @@ html[data-brand="notion"] {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 30 5% 88%;
   --sidebar-ring: 208 100% 44%;
+  --brand-primary: hsl(0 0% 0%);
+  --brand-accent: hsl(208 100% 44%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(208 100% 44%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(30 10% 96%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(30 5% 88%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(30 5% 88%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(30 5% 88%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(30 5% 88%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(30 5% 88%);
+  --neutral-8: color-mix(in oklab, hsl(0 0% 43%) 25%, hsl(30 5% 88%));
+  --neutral-9: color-mix(in oklab, hsl(0 0% 43%) 50%, hsl(30 5% 88%));
+  --neutral-10: color-mix(in oklab, hsl(0 0% 43%) 75%, hsl(30 5% 88%));
+  --neutral-11: hsl(0 0% 43%);
+  --neutral-12: hsl(0 0% 0%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 8px;
   --radius-button: 8px;
   --radius-buttons: 8px;
-  --radius-md: 8px;
+  --radius-md: min(8px, 12px);
   --radius-card: 12px;
   --radius-lg: 12px;
   --radius-badge: 9999px;
@@ -636,16 +754,16 @@ html[data-brand="notion"] {
   --elevation-card: 0 0 #0000;
   --elevation-control: 0 0 #0000;
   --elevation-raised: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
-  --shadow-xs: 0 0 #0000;
-  --shadow-sm: 0 0 #0000;
-  --shadow-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
-  --shadow-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
+  --elevation-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
   --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-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --badge-default-bg: hsl(var(--secondary));
   --badge-default-fg: hsl(var(--secondary-foreground));
@@ -653,46 +771,41 @@ html[data-brand="notion"] {
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
 
   /* Typography */
-  --font-sans: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
   --font-weight-heading: 700;
 
-  /* Zone type scales */
-  --zone-product-caption-size: 12px;
-  --zone-product-caption-leading: 1.33;
-  --zone-product-caption-tracking: 0.12px;
-  --zone-product-caption-weight: 500;
-  --zone-product-body-sm-size: 14px;
-  --zone-product-body-sm-leading: 1.43;
-  --zone-product-body-sm-weight: 500;
-  --zone-product-body-size: 16px;
-  --zone-product-body-leading: 1.5;
-  --zone-product-body-weight: 400;
-  --zone-product-subheading-size: 20px;
-  --zone-product-subheading-leading: 1;
-  --zone-product-subheading-weight: 500;
-  --zone-product-heading-sm-size: 22px;
-  --zone-product-heading-sm-leading: 1.27;
-  --zone-product-heading-sm-tracking: -0.242px;
-  --zone-product-heading-sm-weight: 600;
-  --zone-product-heading-size: 40px;
-  --zone-product-heading-leading: 1.5;
-  --zone-product-heading-weight: 600;
-  --zone-marketing-body-size: 16px;
-  --zone-marketing-body-leading: 1.5;
-  --zone-marketing-body-weight: 400;
-  --zone-marketing-heading-size: 48px;
-  --zone-marketing-heading-leading: 1.5;
-  --zone-marketing-heading-weight: 700;
-  --zone-marketing-heading-lg-size: 54px;
-  --zone-marketing-heading-lg-leading: 1.04;
-  --zone-marketing-heading-lg-tracking: -1.89px;
-  --zone-marketing-heading-lg-weight: 700;
-  --zone-marketing-display-size: 72px;
-  --zone-marketing-display-leading: 1.21;
-  --zone-marketing-display-tracking: -2.016px;
-  --zone-marketing-display-weight: 700;
+  /* Motion */
+  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 200ms;
+  --motion-duration-flow: 200ms;
+  --duration-reveal: 280ms;
+  --motion-duration-reveal: 280ms;
+  --duration-cinematic: 460ms;
+  --motion-duration-cinematic: 460ms;
+
+  /* Spacing */
+  --space-source-xs: 0.625rem;
+  --space-source-sm: 1rem;
+  --space-source-md: 1.5rem;
+  --space-source-lg: 2rem;
+  --space-source-xl: 2.75rem;
+  --space-source-2xl: 3.75rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-brand: #000000;
@@ -710,98 +823,13 @@ html[data-brand="notion"] {
   --brand-decorative-midnight: #02093a;
 }
 
-/* Zone: product — product never inherits marketing display */
-[data-zone="product"],
-.zone-product {
-  font-size: var(--zone-product-body-size, 16px);
-  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, 16px);
-  line-height: var(--zone-marketing-body-leading, 1.5);
-  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 */
-}
-
 /**
  * Brand carrier skin: Raycast (raycast) v1.0.0
  * darkDefault=true dualMode=false button=solid
- * fonts=1 zones=yes mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Inter";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
 html[data-brand="raycast"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 210 20% 2%;
@@ -813,9 +841,9 @@ html[data-brand="raycast"] {
   --role-quiet: 220 5% 11%;
   --role-quiet-fg: 0 0% 100%;
   --role-muted: 220 8% 7%;
-  --role-muted-fg: 210 1% 42%;
+  --role-muted-fg: 210 1% 48%;
   --role-border: 210 2% 19%;
-  --role-input: 220 8% 7%;
+  --role-input: 210 2% 19%;
   --role-ring: 240 1% 61%;
   --role-brand: 0 100% 69%;
   --role-brand-fg: 210 1% 27%;
@@ -834,13 +862,13 @@ html[data-brand="raycast"] {
   --secondary: 220 5% 11%;
   --secondary-foreground: 0 0% 100%;
   --muted: 220 8% 7%;
-  --muted-foreground: 210 1% 42%;
+  --muted-foreground: 210 1% 48%;
   --accent: 0 100% 69%;
   --accent-foreground: 210 1% 27%;
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 210 2% 19%;
-  --input: 220 8% 7%;
+  --input: 210 2% 19%;
   --ring: 240 1% 61%;
   --success: 151 59% 59%;
   --success-foreground: 210 20% 2%;
@@ -854,17 +882,35 @@ html[data-brand="raycast"] {
   --sidebar-accent-foreground: 210 1% 27%;
   --sidebar-border: 210 2% 19%;
   --sidebar-ring: 240 1% 61%;
+  --brand-primary: hsl(0 100% 69%);
+  --brand-accent: hsl(0 0% 90%);
+  --brand-accent-foreground: hsl(210 1% 27%);
+  --brand-tertiary: hsl(0 0% 90%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(210 20% 2%);
+  --neutral-2: hsl(220 18% 3%);
+  --neutral-3: color-mix(in oklab, hsl(210 2% 19%) 20%, hsl(220 18% 3%));
+  --neutral-4: color-mix(in oklab, hsl(210 2% 19%) 40%, hsl(220 18% 3%));
+  --neutral-5: color-mix(in oklab, hsl(210 2% 19%) 60%, hsl(220 18% 3%));
+  --neutral-6: color-mix(in oklab, hsl(210 2% 19%) 80%, hsl(220 18% 3%));
+  --neutral-7: hsl(210 2% 19%);
+  --neutral-8: color-mix(in oklab, hsl(210 1% 48%) 25%, hsl(210 2% 19%));
+  --neutral-9: color-mix(in oklab, hsl(210 1% 48%) 50%, hsl(210 2% 19%));
+  --neutral-10: color-mix(in oklab, hsl(210 1% 48%) 75%, hsl(210 2% 19%));
+  --neutral-11: hsl(210 1% 48%);
+  --neutral-12: hsl(0 0% 100%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 8px;
   --radius-button: 8px;
   --radius-buttons: 8px;
-  --radius-md: 8px;
+  --radius-md: min(8px, 16px);
   --radius-card: 16px;
   --radius-lg: 16px;
   --radius-badge: 6px;
@@ -889,22 +935,22 @@ html[data-brand="raycast"] {
       0,
       0.2
     ) 0px -1px 0px 0px inset;
-  --shadow-xs: 0 0 #0000;
-  --shadow-sm:
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm:
     rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
       0,
       0,
       0,
       0.2
     ) 0px -1px 0px 0px inset;
-  --shadow-md:
+  --elevation-md:
     rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
       0,
       0,
       0,
       0.2
     ) 0px -1px 0px 0px inset;
-  --shadow-lg:
+  --elevation-lg:
     rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
       0,
       0,
@@ -916,7 +962,7 @@ html[data-brand="raycast"] {
   --btn-default-fg: hsl(var(--primary-foreground));
   --btn-default-border-width: 0px;
   --btn-default-border: transparent;
-  --btn-default-stroke-gradient: transparent;
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --badge-default-bg: hsl(var(--secondary));
   --badge-default-fg: hsl(var(--secondary-foreground));
@@ -928,52 +974,50 @@ html[data-brand="raycast"] {
   --control-height-sm: 1.75rem;
   --control-height-md: 2rem;
   --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
-  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
+  --font-sans:
+    var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-cn:
+    var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-heading:
+    var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
   --font-weight-heading: 400;
 
-  /* Zone type scales */
-  --zone-product-caption-size: 11px;
-  --zone-product-caption-leading: 0.91;
-  --zone-product-caption-tracking: 0.8px;
-  --zone-product-caption-weight: 500;
-  --zone-product-body-sm-size: 13px;
-  --zone-product-body-sm-leading: 1.2;
-  --zone-product-body-sm-weight: 500;
-  --zone-product-body-size: 16px;
-  --zone-product-body-leading: 1.15;
-  --zone-product-body-weight: 400;
-  --zone-product-body-lg-size: 18px;
-  --zone-product-body-lg-leading: 1.15;
-  --zone-product-body-lg-weight: 400;
-  --zone-product-subheading-size: 20px;
-  --zone-product-subheading-leading: 1.2;
-  --zone-product-subheading-tracking: 0.2px;
-  --zone-product-subheading-weight: 400;
-  --zone-product-heading-sm-size: 24px;
-  --zone-product-heading-sm-leading: 1.15;
-  --zone-product-heading-sm-weight: 500;
-  --zone-product-heading-size: 32px;
-  --zone-product-heading-leading: 1.15;
-  --zone-product-heading-weight: 500;
-  --zone-marketing-body-size: 16px;
-  --zone-marketing-body-leading: 1.15;
-  --zone-marketing-body-weight: 400;
-  --zone-marketing-heading-size: 32px;
-  --zone-marketing-heading-leading: 1.15;
-  --zone-marketing-heading-weight: 500;
-  --zone-marketing-heading-lg-size: 56px;
-  --zone-marketing-heading-lg-leading: 1.17;
-  --zone-marketing-heading-lg-tracking: 0.22px;
-  --zone-marketing-heading-lg-weight: 400;
-  --zone-marketing-display-size: 64px;
-  --zone-marketing-display-leading: 1.1;
-  --zone-marketing-display-weight: 600;
+  /* Motion */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --duration-micro: 90ms;
+  --motion-duration-micro: 90ms;
+  --duration-flow: 160ms;
+  --motion-duration-flow: 160ms;
+  --duration-reveal: 220ms;
+  --motion-duration-reveal: 220ms;
+  --duration-cinematic: 340ms;
+  --motion-duration-cinematic: 340ms;
+
+  /* Spacing */
+  --space-source-xs: 0.375rem;
+  --space-source-sm: 0.5rem;
+  --space-source-md: 0.75rem;
+  --space-source-lg: 1rem;
+  --space-source-xl: 1.375rem;
+  --space-source-2xl: 2rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-brand: #ff6363;
@@ -981,97 +1025,13 @@ html[data-brand="raycast"] {
   --brand-category-sky: #63a1ff;
 }
 
-/* Zone: product — product never inherits marketing display */
-[data-zone="product"],
-.zone-product {
-  font-size: var(--zone-product-body-size, 16px);
-  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, 16px);
-  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 */
-}
-
 /**
  * Brand carrier skin: Stripe (stripe) v1.0.0
  * darkDefault=false dualMode=false button=solid
- * fonts=1 zones=yes mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "sohne-var";
-  src: url("/brand-assets/sohne-var.woff2") format("woff2");
-  font-weight: 300 400;
-  font-display: swap;
-}
-
 html[data-brand="stripe"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 0 0% 100%;
@@ -1085,7 +1045,7 @@ html[data-brand="stripe"] {
   --role-muted: 216 56% 98%;
   --role-muted-fg: 217 17% 47%;
   --role-border: 210 44% 93%;
-  --role-input: 0 0% 100%;
+  --role-input: 210 44% 93%;
   --role-ring: 248 98% 61%;
   --role-brand: 211 78% 11%;
   --role-brand-fg: 0 0% 100%;
@@ -1110,7 +1070,7 @@ html[data-brand="stripe"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 210 44% 93%;
-  --input: 0 0% 100%;
+  --input: 210 44% 93%;
   --ring: 248 98% 61%;
   --info: 231 100% 73%;
   --info-foreground: 211 78% 11%;
@@ -1122,17 +1082,35 @@ html[data-brand="stripe"] {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 210 44% 93%;
   --sidebar-ring: 248 98% 61%;
+  --brand-primary: hsl(211 78% 11%);
+  --brand-accent: hsl(248 98% 61%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(248 98% 61%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 100%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(210 44% 93%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(210 44% 93%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(210 44% 93%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(210 44% 93%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(210 44% 93%);
+  --neutral-8: color-mix(in oklab, hsl(217 17% 47%) 25%, hsl(210 44% 93%));
+  --neutral-9: color-mix(in oklab, hsl(217 17% 47%) 50%, hsl(210 44% 93%));
+  --neutral-10: color-mix(in oklab, hsl(217 17% 47%) 75%, hsl(210 44% 93%));
+  --neutral-11: hsl(217 17% 47%);
+  --neutral-12: hsl(211 78% 11%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 4px;
   --radius-button: 4px;
   --radius-buttons: 4px;
-  --radius-md: 4px;
+  --radius-md: min(4px, 4px);
   --radius-card: 4px;
   --radius-lg: 4px;
   --radius-badge: 9999px;
@@ -1145,16 +1123,16 @@ html[data-brand="stripe"] {
   --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;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
   --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-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --badge-default-bg: hsl(var(--secondary));
   --badge-default-fg: hsl(var(--secondary-foreground));
@@ -1162,56 +1140,41 @@ html[data-brand="stripe"] {
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
 
   /* Typography */
-  --font-sans: "sohne-var", "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
   --font-weight-heading: 300;
 
-  /* Zone type scales */
-  --zone-product-caption-size: 12px;
-  --zone-product-caption-leading: 1.45;
-  --zone-product-caption-tracking: -0.12px;
-  --zone-product-caption-weight: 300;
-  --zone-product-body-sm-size: 14px;
-  --zone-product-body-sm-leading: 1.4;
-  --zone-product-body-sm-tracking: -0.14px;
-  --zone-product-body-sm-weight: 400;
-  --zone-product-body-size: 16px;
-  --zone-product-body-leading: 1.2;
-  --zone-product-body-tracking: -0.16px;
-  --zone-product-body-weight: 400;
-  --zone-product-body-lg-size: 20px;
-  --zone-product-body-lg-leading: 1.4;
-  --zone-product-body-lg-tracking: -0.2px;
-  --zone-product-body-lg-weight: 300;
-  --zone-product-subheading-size: 22px;
-  --zone-product-subheading-leading: 1.1;
-  --zone-product-subheading-tracking: -0.22px;
-  --zone-product-subheading-weight: 300;
-  --zone-product-heading-sm-size: 26px;
-  --zone-product-heading-sm-leading: 1.12;
-  --zone-product-heading-sm-tracking: -0.26px;
-  --zone-product-heading-sm-weight: 300;
-  --zone-product-heading-size: 32px;
-  --zone-product-heading-leading: 1.1;
-  --zone-product-heading-tracking: -0.64px;
-  --zone-product-heading-weight: 300;
-  --zone-marketing-body-size: 16px;
-  --zone-marketing-body-leading: 1.4;
-  --zone-marketing-body-tracking: -0.16px;
-  --zone-marketing-body-weight: 300;
-  --zone-marketing-heading-size: 32px;
-  --zone-marketing-heading-leading: 1.1;
-  --zone-marketing-heading-tracking: -0.64px;
-  --zone-marketing-heading-weight: 300;
-  --zone-marketing-heading-lg-size: 48px;
-  --zone-marketing-heading-lg-leading: 1.03;
-  --zone-marketing-heading-lg-tracking: -0.96px;
-  --zone-marketing-heading-lg-weight: 300;
-  --zone-marketing-display-size: 56px;
-  --zone-marketing-display-leading: 1.03;
-  --zone-marketing-display-tracking: -1.4px;
-  --zone-marketing-display-weight: 300;
+  /* Motion */
+  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --duration-micro: 100ms;
+  --motion-duration-micro: 100ms;
+  --duration-flow: 180ms;
+  --motion-duration-flow: 180ms;
+  --duration-reveal: 260ms;
+  --motion-duration-reveal: 260ms;
+  --duration-cinematic: 400ms;
+  --motion-duration-cinematic: 400ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.75rem;
+  --space-source-md: 1.125rem;
+  --space-source-lg: 1.75rem;
+  --space-source-xl: 2.25rem;
+  --space-source-2xl: 3.25rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-brand: #061b31;
@@ -1227,114 +1190,13 @@ html[data-brand="stripe"] {
   --brand-decorative-frost: #e5edf5;
 }
 
-/* Zone: product — product never inherits marketing display */
-[data-zone="product"],
-.zone-product {
-  font-size: var(--zone-product-body-size, 16px);
-  line-height: var(--zone-product-body-leading, 1.2);
-  font-weight: var(--zone-product-body-weight, 400);
-  letter-spacing: var(--zone-product-body-tracking, -0.16px);
-  --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, 16px);
-  line-height: var(--zone-marketing-body-leading, 1.4);
-  font-weight: var(--zone-marketing-body-weight, 300);
-  letter-spacing: var(--zone-marketing-body-tracking, -0.16px);
-  --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 */
-}
-
 /**
  * Brand carrier skin: Vanta (vanta) v1.0.0
  * darkDefault=false dualMode=false button=solid
- * fonts=3 zones=yes mode=global
+ * fonts=0 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;
-}
-
-@font-face {
-  font-family: "Reckless";
-  src: url("/brand-assets/reckless-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Reckless";
-  src: url("/brand-assets/reckless-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-display: swap;
-}
-
 html[data-brand="vanta"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 220 23% 97%;
@@ -1348,7 +1210,7 @@ html[data-brand="vanta"] {
   --role-muted: 240 20% 93%;
   --role-muted-fg: 238 11% 48%;
   --role-border: 240 17% 11%;
-  --role-input: 0 0% 100%;
+  --role-input: 240 17% 11%;
   --role-ring: 268 95% 39%;
   --role-brand: 272 100% 14%;
   --role-brand-fg: 0 0% 100%;
@@ -1373,7 +1235,7 @@ html[data-brand="vanta"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 240 17% 11%;
-  --input: 0 0% 100%;
+  --input: 240 17% 11%;
   --ring: 268 95% 39%;
   --warning: 44 100% 53%;
   --warning-foreground: 240 17% 11%;
@@ -1387,17 +1249,35 @@ html[data-brand="vanta"] {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 240 17% 11%;
   --sidebar-ring: 268 95% 39%;
+  --brand-primary: hsl(272 100% 14%);
+  --brand-accent: hsl(268 95% 39%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(268 95% 39%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(220 23% 97%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(240 17% 11%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(240 17% 11%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(240 17% 11%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(240 17% 11%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(240 17% 11%);
+  --neutral-8: color-mix(in oklab, hsl(238 11% 48%) 25%, hsl(240 17% 11%));
+  --neutral-9: color-mix(in oklab, hsl(238 11% 48%) 50%, hsl(240 17% 11%));
+  --neutral-10: color-mix(in oklab, hsl(238 11% 48%) 75%, hsl(240 17% 11%));
+  --neutral-11: hsl(238 11% 48%);
+  --neutral-12: hsl(240 17% 11%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 999px;
   --radius-button: 999px;
   --radius-buttons: 999px;
-  --radius-md: 999px;
+  --radius-md: min(999px, 16px);
   --radius-card: 16px;
   --radius-lg: 16px;
   --radius-badge: 999px;
@@ -1410,16 +1290,16 @@ html[data-brand="vanta"] {
   --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;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
   --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-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --badge-default-bg: hsl(var(--secondary));
   --badge-default-fg: hsl(var(--secondary-foreground));
@@ -1427,49 +1307,41 @@ html[data-brand="vanta"] {
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
 
   /* Typography */
-  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
-  --font-display: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
+  --font-sans:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-reg-source-serif-4), "Reckless", "Source Serif 4", "Lora",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, Georgia, serif;
+  --font-display:
+    var(--font-reg-source-serif-4), "Reckless", "Source Serif 4", "Lora",
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, Georgia, serif;
   --font-weight-heading: 500;
 
-  /* Zone type scales */
-  --zone-product-caption-size: 12px;
-  --zone-product-caption-leading: 1.5;
-  --zone-product-caption-tracking: -0.02px;
-  --zone-product-caption-weight: 500;
-  --zone-product-body-sm-size: 14px;
-  --zone-product-body-sm-leading: 1.43;
-  --zone-product-body-sm-tracking: -0.02px;
-  --zone-product-body-sm-weight: 400;
-  --zone-product-body-size: 16px;
-  --zone-product-body-leading: 1.5;
-  --zone-product-body-tracking: -0.02px;
-  --zone-product-body-weight: 400;
-  --zone-product-subheading-size: 20px;
-  --zone-product-subheading-leading: 1.4;
-  --zone-product-subheading-weight: 500;
-  --zone-product-heading-sm-size: 24px;
-  --zone-product-heading-sm-leading: 1.35;
-  --zone-product-heading-sm-weight: 500;
-  --zone-product-heading-size: 32px;
-  --zone-product-heading-leading: 1.3;
-  --zone-product-heading-weight: 500;
-  --zone-marketing-body-size: 16px;
-  --zone-marketing-body-leading: 1.5;
-  --zone-marketing-body-tracking: -0.02px;
-  --zone-marketing-body-weight: 400;
-  --zone-marketing-heading-size: 42px;
-  --zone-marketing-heading-leading: 1.2;
-  --zone-marketing-heading-tracking: -0.84px;
-  --zone-marketing-heading-weight: 400;
-  --zone-marketing-heading-lg-size: 56px;
-  --zone-marketing-heading-lg-leading: 1.15;
-  --zone-marketing-heading-lg-tracking: -1.12px;
-  --zone-marketing-heading-lg-weight: 400;
-  --zone-marketing-display-size: 90px;
-  --zone-marketing-display-leading: 1.1;
-  --zone-marketing-display-tracking: -1.62px;
-  --zone-marketing-display-weight: 400;
+  /* Motion */
+  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
+  --motion-ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
+  --duration-micro: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 240ms;
+  --motion-duration-flow: 240ms;
+  --duration-reveal: 380ms;
+  --motion-duration-reveal: 380ms;
+  --duration-cinematic: 620ms;
+  --motion-duration-cinematic: 620ms;
+
+  /* Spacing */
+  --space-source-xs: 0.75rem;
+  --space-source-sm: 1.125rem;
+  --space-source-md: 1.75rem;
+  --space-source-lg: 2.5rem;
+  --space-source-xl: 3.5rem;
+  --space-source-2xl: 5rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-brand: #260048;
@@ -1482,100 +1354,13 @@ html[data-brand="vanta"] {
   --brand-decorative-hero-wash: #ddd6ff;
 }
 
-/* Zone: product — product never inherits marketing display */
-[data-zone="product"],
-.zone-product {
-  font-size: var(--zone-product-body-size, 16px);
-  line-height: var(--zone-product-body-leading, 1.5);
-  font-weight: var(--zone-product-body-weight, 400);
-  letter-spacing: var(--zone-product-body-tracking, -0.02px);
-  --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, 16px);
-  line-height: var(--zone-marketing-body-leading, 1.5);
-  font-weight: var(--zone-marketing-body-weight, 400);
-  letter-spacing: var(--zone-marketing-body-tracking, -0.02px);
-  --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 */
-}
-
 /**
  * Brand carrier skin: Vercel (vercel) v1.0.0
  * darkDefault=false dualMode=true button=solid
- * fonts=1 zones=yes mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Geist Sans";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
 html[data-brand="vercel"] {
   /* ── Color roles (carrier) ── */
   --role-canvas: 0 0% 98%;
@@ -1589,7 +1374,7 @@ html[data-brand="vercel"] {
   --role-muted: 0 0% 92%;
   --role-muted-fg: 0 0% 40%;
   --role-border: 0 0% 92%;
-  --role-input: 0 0% 100%;
+  --role-input: 0 0% 92%;
   --role-ring: 0 0% 9%;
 
   /* ── shadcn bridge (primary = action CTA) ── */
@@ -1610,7 +1395,7 @@ html[data-brand="vercel"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 0 0% 92%;
-  --input: 0 0% 100%;
+  --input: 0 0% 92%;
   --ring: 0 0% 9%;
   --success: 133 50% 32%;
   --success-foreground: 0 0% 100%;
@@ -1624,17 +1409,35 @@ html[data-brand="vercel"] {
   --sidebar-accent-foreground: 0 0% 30%;
   --sidebar-border: 0 0% 92%;
   --sidebar-ring: 0 0% 9%;
+  --brand-primary: hsl(0 0% 9%);
+  --brand-accent: hsl(0 0% 9%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(0 0% 9%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 98%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(0 0% 92%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(0 0% 92%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(0 0% 92%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(0 0% 92%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(0 0% 92%);
+  --neutral-8: color-mix(in oklab, hsl(0 0% 40%) 25%, hsl(0 0% 92%));
+  --neutral-9: color-mix(in oklab, hsl(0 0% 40%) 50%, hsl(0 0% 92%));
+  --neutral-10: color-mix(in oklab, hsl(0 0% 40%) 75%, hsl(0 0% 92%));
+  --neutral-11: hsl(0 0% 40%);
+  --neutral-12: hsl(0 0% 9%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 6px;
   --radius-button: 6px;
   --radius-buttons: 6px;
-  --radius-md: 6px;
+  --radius-md: min(6px, 6px);
   --radius-card: 6px;
   --radius-lg: 6px;
   --radius-badge: 6px;
@@ -1647,16 +1450,16 @@ html[data-brand="vercel"] {
   --elevation-card: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
   --elevation-control: 0 0 #0000;
   --elevation-raised: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
-  --shadow-xs: 0 0 #0000;
-  --shadow-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
-  --shadow-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
-  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
   --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-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --badge-default-bg: hsl(var(--secondary));
   --badge-default-fg: hsl(var(--secondary-foreground));
@@ -1668,44 +1471,48 @@ html[data-brand="vercel"] {
   --control-height-sm: 1.75rem;
   --control-height-md: 2rem;
   --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
-  --font-sans: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
+  --font-sans:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, Menlo, monospace;
   --font-weight-heading: 450;
 
-  /* Zone type scales */
-  --zone-product-caption-size: 13px;
-  --zone-product-caption-leading: 1.54;
-  --zone-product-caption-weight: 400;
-  --zone-product-body-sm-size: 14px;
-  --zone-product-body-sm-leading: 1.43;
-  --zone-product-body-sm-weight: 400;
-  --zone-product-body-size: 16px;
-  --zone-product-body-leading: 1.5;
-  --zone-product-body-weight: 400;
-  --zone-product-heading-size: 30px;
-  --zone-product-heading-leading: 1.1;
-  --zone-product-heading-tracking: -1.5px;
-  --zone-product-heading-weight: 500;
-  --zone-marketing-body-size: 16px;
-  --zone-marketing-body-leading: 1.5;
-  --zone-marketing-body-weight: 400;
-  --zone-marketing-heading-size: 30px;
-  --zone-marketing-heading-leading: 1.1;
-  --zone-marketing-heading-tracking: -1.5px;
-  --zone-marketing-heading-weight: 450;
-  --zone-marketing-heading-lg-size: 56px;
-  --zone-marketing-heading-lg-leading: 1;
-  --zone-marketing-heading-lg-tracking: -3.36px;
-  --zone-marketing-heading-lg-weight: 450;
-  --zone-marketing-display-size: 64px;
-  --zone-marketing-display-leading: 1;
-  --zone-marketing-display-tracking: -3.84px;
-  --zone-marketing-display-weight: 450;
+  /* Motion */
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 100ms;
+  --motion-duration-micro: 100ms;
+  --duration-flow: 150ms;
+  --motion-duration-flow: 150ms;
+  --duration-reveal: 200ms;
+  --motion-duration-reveal: 200ms;
+  --duration-cinematic: 300ms;
+  --motion-duration-cinematic: 300ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.75rem;
+  --space-source-md: 1rem;
+  --space-source-lg: 1.5rem;
+  --space-source-xl: 2rem;
+  --space-source-2xl: 3rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-carbon: #000000;
@@ -1726,7 +1533,7 @@ html.dark[data-brand="vercel"] {
   --role-muted: 0 0% 12%;
   --role-muted-fg: 0 0% 63%;
   --role-border: 0 0% 16%;
-  --role-input: 0 0% 4%;
+  --role-input: 0 0% 16%;
   --role-ring: 0 0% 100%;
 
   /* ── shadcn bridge (primary = action CTA) ── */
@@ -1747,7 +1554,7 @@ html.dark[data-brand="vercel"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 0 0% 16%;
-  --input: 0 0% 4%;
+  --input: 0 0% 16%;
   --ring: 0 0% 100%;
   --success: 133 49% 40%;
   --success-foreground: 0 0% 100%;
@@ -1761,84 +1568,26 @@ html.dark[data-brand="vercel"] {
   --sidebar-accent-foreground: 0 0% 93%;
   --sidebar-border: 0 0% 16%;
   --sidebar-ring: 0 0% 100%;
+  --brand-primary: hsl(0 0% 100%);
+  --brand-accent: hsl(0 0% 100%);
+  --brand-accent-foreground: hsl(0 0% 0%);
+  --brand-tertiary: hsl(0 0% 100%);
   --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, 16px);
-  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, 16px);
-  line-height: var(--zone-marketing-body-leading, 1.5);
-  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 */
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 0%);
+  --neutral-2: hsl(0 0% 4%);
+  --neutral-3: color-mix(in oklab, hsl(0 0% 16%) 20%, hsl(0 0% 4%));
+  --neutral-4: color-mix(in oklab, hsl(0 0% 16%) 40%, hsl(0 0% 4%));
+  --neutral-5: color-mix(in oklab, hsl(0 0% 16%) 60%, hsl(0 0% 4%));
+  --neutral-6: color-mix(in oklab, hsl(0 0% 16%) 80%, hsl(0 0% 4%));
+  --neutral-7: hsl(0 0% 16%);
+  --neutral-8: color-mix(in oklab, hsl(0 0% 63%) 25%, hsl(0 0% 16%));
+  --neutral-9: color-mix(in oklab, hsl(0 0% 63%) 50%, hsl(0 0% 16%));
+  --neutral-10: color-mix(in oklab, hsl(0 0% 63%) 75%, hsl(0 0% 16%));
+  --neutral-11: hsl(0 0% 63%);
+  --neutral-12: hsl(0 0% 93%);
 }