@nebutra/tokens 0.1.2 → 2.0.0

package/skins/stripe.css

@@ -1,18 +1,10 @@
 /**
  * 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;
-}
-
 :root,
 html[data-brand="stripe"] {
   /* ── Color roles (carrier) ── */
@@ -27,7 +19,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%;
@@ -52,7 +44,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%;
@@ -64,17 +56,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;
@@ -87,16 +97,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));
@@ -104,56 +114,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;
@@ -168,81 +163,3 @@ html[data-brand="stripe"] {
   --brand-decorative-section-band: #f8fafd;
   --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 */
-}

package/skins/vanta.css

@@ -1,33 +1,10 @@
 /**
  * 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;
-}
-
 :root,
 html[data-brand="vanta"] {
   /* ── Color roles (carrier) ── */
@@ -42,7 +19,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%;
@@ -67,7 +44,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%;
@@ -81,17 +58,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;
@@ -104,16 +99,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));
@@ -121,49 +116,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;
@@ -175,81 +162,3 @@ html[data-brand="vanta"] {
   --brand-category-ash: #dfdfe9;
   --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 */
-}