@riverbankcms/sdk 0.60.0 → 0.60.3

package/dist/server/theme-bridge.mjs

@@ -46,172 +46,767 @@ function brandNonEmptyString(value, label) {
   return value;
 }
 
+// ../theme-core/src/site-styles/compatibility.ts
+import { z } from "zod";
+var STYLE_AXIS_VALUES = {
+  tone: ["minimal", "classic", "bold"],
+  energy: ["calm", "vibrant"],
+  motion: ["subtle", "standard", "expressive"],
+  era: ["editorial", "modern", "organic", "technical", "retro"]
+};
+var styleTagsSchema = z.object({
+  tone: z.enum(STYLE_AXIS_VALUES.tone).optional(),
+  energy: z.enum(STYLE_AXIS_VALUES.energy).optional(),
+  motion: z.enum(STYLE_AXIS_VALUES.motion).optional(),
+  era: z.enum(STYLE_AXIS_VALUES.era).optional()
+});
+
 // ../theme-core/src/schema.ts
-import { z as z12 } from "zod";
+import { z as z14 } from "zod";
 
 // ../theme-core/src/lib/media.ts
-import z from "zod";
-var hotspotSchema = z.object({
-  x: z.number().min(0).max(1),
-  y: z.number().min(0).max(1),
-  radius: z.number().optional()
+import z2 from "zod";
+var hotspotSchema = z2.object({
+  x: z2.number().min(0).max(1),
+  y: z2.number().min(0).max(1),
+  radius: z2.number().optional()
 });
-var rotationSchema = z.union([z.literal(0), z.literal(90), z.literal(180), z.literal(270)]);
-var rectSchema = z.tuple([z.number(), z.number(), z.number(), z.number()]);
-var aspectCropSchema = z.object({
-  aspect: z.preprocess((value) => value == null ? void 0 : value, z.string().optional()),
-  rect: z.preprocess((value) => value == null ? void 0 : value, rectSchema.optional()),
-  hotspot: z.preprocess((value) => value == null ? void 0 : value, hotspotSchema.optional()),
-  rotation: z.preprocess((value) => value == null ? void 0 : value, rotationSchema.optional())
+var rotationSchema = z2.union([z2.literal(0), z2.literal(90), z2.literal(180), z2.literal(270)]);
+var rectSchema = z2.tuple([z2.number(), z2.number(), z2.number(), z2.number()]);
+var aspectCropSchema = z2.object({
+  aspect: z2.preprocess((value) => value == null ? void 0 : value, z2.string().optional()),
+  rect: z2.preprocess((value) => value == null ? void 0 : value, rectSchema.optional()),
+  hotspot: z2.preprocess((value) => value == null ? void 0 : value, hotspotSchema.optional()),
+  rotation: z2.preprocess((value) => value == null ? void 0 : value, rotationSchema.optional())
 });
-var transformSchema = z.object({
-  aspectCrops: z.preprocess((value) => {
+var transformSchema = z2.object({
+  aspectCrops: z2.preprocess((value) => {
     if (!value || typeof value !== "object" || Array.isArray(value)) {
       return void 0;
     }
     return value;
-  }, z.record(z.string(), aspectCropSchema.catch({}))).optional(),
+  }, z2.record(z2.string(), aspectCropSchema.catch({}))).optional(),
   rect: rectSchema.optional(),
   hotspot: hotspotSchema.optional(),
   rotation: rotationSchema.optional()
 });
-var mediaSchema = z.object({
-  type: z.enum(["image", "video", "audio", "document", "spreadsheet", "archive"]),
-  purpose: z.string().optional(),
-  placeholder: z.boolean().default(true).optional(),
-  assetId: z.string().optional(),
-  identifier: z.string().optional(),
-  src: z.string().optional(),
-  alt: z.string().optional(),
-  filename: z.string().optional(),
-  mimeType: z.string().optional(),
-  width: z.number().optional(),
-  height: z.number().optional(),
-  storageBucket: z.string().optional(),
-  storagePath: z.string().optional(),
+var mediaSchema = z2.object({
+  type: z2.enum(["image", "video", "audio", "document", "spreadsheet", "archive"]),
+  purpose: z2.string().optional(),
+  placeholder: z2.boolean().default(true).optional(),
+  assetId: z2.string().optional(),
+  identifier: z2.string().optional(),
+  src: z2.string().optional(),
+  alt: z2.string().optional(),
+  filename: z2.string().optional(),
+  mimeType: z2.string().optional(),
+  width: z2.number().optional(),
+  height: z2.number().optional(),
+  storageBucket: z2.string().optional(),
+  storagePath: z2.string().optional(),
   transform: transformSchema.optional()
 });
 
 // ../theme-core/src/buttons/types.ts
-import { z as z2 } from "zod";
-var cornerStyleSchema = z2.enum(["square", "rounded", "pill"]);
-var shadowSizeSchema = z2.enum(["none", "low", "medium", "high"]);
-var textTransformSchema = z2.enum(["none", "uppercase", "lowercase", "capitalize"]);
-var fontWeightSchema = z2.union([z2.literal(500), z2.literal(600), z2.literal(700)]);
-var buttonTypographySchema = z2.enum(["body", "heading"]);
-var hoverTransformSchema = z2.enum(["none", "lift", "scale", "press"]);
-var hoverColorSchema = z2.enum(["none", "brighten", "darken", "saturate", "token"]);
-var buttonPaddingPresetSchema = z2.enum(["compact", "default", "spacious"]);
-var gradientStyleSchema = z2.enum(["linear", "radial", "conic"]);
-var gradientSharpnessSchema = z2.enum(["smooth", "medium", "hard"]);
-var buttonSizeNameSchema = z2.enum(["sm", "md", "lg", "xl"]);
-var buttonSizeConfigSchema = z2.object({
-  padding: z2.string(),
-  fontSize: z2.string().optional()
+import { z as z3 } from "zod";
+var VARIANT_ROLES = [
+  "primary",
+  "secondary",
+  "outline",
+  "ghost",
+  "link",
+  "tertiary",
+  "accent"
+];
+var cornerStyleSchema = z3.enum(["square", "rounded", "pill"]);
+var shadowSizeSchema = z3.enum(["none", "low", "medium", "high"]);
+var textTransformSchema = z3.enum(["none", "uppercase", "lowercase", "capitalize"]);
+var fontWeightSchema = z3.union([z3.literal(500), z3.literal(600), z3.literal(700)]);
+var buttonTypographySchema = z3.enum(["body", "heading"]);
+var letterSpacingSchema = z3.enum(["tight", "normal", "loose"]);
+var hoverTransformSchema = z3.enum(["none", "lift", "scale", "press"]);
+var hoverColorSchema = z3.enum(["none", "brighten", "darken", "saturate", "token"]);
+var buttonPaddingPresetSchema = z3.enum(["compact", "default", "spacious"]);
+var gradientStyleSchema = z3.enum(["linear", "radial", "conic"]);
+var gradientSharpnessSchema = z3.enum(["smooth", "medium", "hard"]);
+var prioritySchema = z3.union([z3.literal(1), z3.literal(2), z3.literal(3)]);
+var variantRoleSchema = z3.enum(VARIANT_ROLES);
+var buttonSizeNameSchema = z3.enum(["sm", "md", "lg", "xl"]);
+var PADDING_TOKEN_PATTERN = /^(?:0|\d+(?:\.\d+)?(?:rem|em|px|%))$/;
+var paddingShorthandSchema = z3.string().refine(
+  (value) => {
+    const parts = value.split(/\s+/).filter(Boolean);
+    return parts.length === 2 && parts.every((token) => PADDING_TOKEN_PATTERN.test(token));
+  },
+  {
+    message: 'Padding must be two space-separated CSS length tokens (e.g. "0.5rem 1rem"). Use `0` for zero.'
+  }
+);
+var buttonSizeConfigSchema = z3.object({
+  padding: paddingShorthandSchema,
+  fontSize: z3.string().optional()
 });
-var buttonSizesSchema = z2.object({
+var buttonSizesSchema = z3.object({
   sm: buttonSizeConfigSchema,
   md: buttonSizeConfigSchema,
   lg: buttonSizeConfigSchema,
   xl: buttonSizeConfigSchema.optional()
-});
-var backgroundTreatmentSchema = z2.enum(["solid", "gradient", "outline", "ghost"]);
-var outlineHoverEffectSchema = z2.enum([
-  "border-glow",
-  "border-shift",
-  "border-grow",
-  "fill-transition",
-  "border-trace"
-]);
-var buttonGlobalSettingsSchema = z2.object({
+}).transform(({ sm, md, lg, xl }) => ({
+  sm,
+  md,
+  lg,
+  xl: xl ?? lg
+}));
+var buttonGlobalSettingsSchema = z3.object({
   cornerStyle: cornerStyleSchema,
-  cornerRadius: z2.number().min(0).max(24).optional(),
+  cornerRadius: z3.number().min(0).max(24).optional(),
   shadow: shadowSizeSchema,
   textTransform: textTransformSchema,
   fontWeight: fontWeightSchema,
-  borderWidth: z2.union([z2.literal(1), z2.literal(2), z2.literal(3)]),
-  // Typography source (body or heading)
+  /**
+   * @deprecated Set per-variant via `variant.border.widthClass` instead.
+   * Schema field is preserved so existing presets parse; the value is unread
+   * by the current generator and will be removed once the legacy
+   * `primitives/content/components/Button.tsx` slot exports are deleted.
+   */
+  borderWidth: z3.union([z3.literal(1), z3.literal(2), z3.literal(3)]),
+  // === Family-level typography ===
+  // Typography source (body or heading) — selects which theme typography pool to inherit
   typography: buttonTypographySchema.optional(),
+  // Font size for all variants in the family (Tailwind token, e.g. "text-xs", "text-sm")
+  // Sized variants get this as default; fixed variants inherit unless they override.
+  // Size class CSS may still override at run time for sized variants.
+  fontSize: z3.string().optional(),
+  // Letter spacing applied to all variants
+  letterSpacing: letterSpacingSchema.optional(),
   // Italic style
-  italic: z2.boolean().optional(),
-  // Padding preset (applies to all variants unless overridden)
+  italic: z3.boolean().optional(),
+  // Padding preset (applies to sized variants without a sizes config)
   paddingPreset: buttonPaddingPresetSchema.optional(),
   hoverTransform: hoverTransformSchema,
   hoverColor: hoverColorSchema,
   // When hoverColor is 'token', this specifies which token to use
-  hoverColorToken: z2.string().optional(),
+  hoverColorToken: z3.string().optional(),
   // Gradient settings (if any variant uses gradients)
   gradientStyle: gradientStyleSchema.optional(),
-  gradientAngle: z2.number().min(0).max(360).optional(),
+  gradientAngle: z3.number().min(0).max(360).optional(),
   gradientSharpness: gradientSharpnessSchema.optional()
 });
-var gradientDirectionSchema = z2.enum(["to-r", "to-l", "to-t", "to-b", "to-tr", "to-tl", "to-br", "to-bl"]);
-var buttonBackgroundSchema = z2.discriminatedUnion("type", [
-  z2.object({ type: z2.literal("solid"), colorToken: z2.string() }),
-  z2.object({
-    type: z2.literal("gradient"),
-    stops: z2.array(z2.string()).min(2),
+var gradientDirectionSchema = z3.enum(["to-r", "to-l", "to-t", "to-b", "to-tr", "to-tl", "to-br", "to-bl"]);
+var buttonBackgroundSchema = z3.discriminatedUnion("type", [
+  z3.object({ type: z3.literal("solid"), colorToken: z3.string() }),
+  z3.object({
+    type: z3.literal("gradient"),
+    stops: z3.array(z3.string()).min(2),
     direction: gradientDirectionSchema
   }),
-  z2.object({ type: z2.literal("transparent") })
+  z3.object({ type: z3.literal("transparent") })
 ]);
-var effectApplicationSchema = z2.object({
-  effectId: z2.string(),
-  options: z2.record(z2.string(), z2.any()).optional()
+var effectApplicationSchema = z3.object({
+  effectId: z3.string(),
+  options: z3.record(z3.string(), z3.any()).optional()
 });
-var buttonBorderSchema = z2.object({
-  widthClass: z2.string(),
-  colorToken: z2.string()
+var buttonBorderSchema = z3.object({
+  widthClass: z3.string(),
+  colorToken: z3.string()
+});
+var variantShadowSchema = z3.object({
+  elevation: z3.enum(["none", "low", "medium", "high"]),
+  softness: z3.enum(["crisp", "soft", "hard"]).nullable(),
+  position: z3.enum(["bottom", "bottom-right"]).default("bottom")
 });
-var buttonVariantLegacySchema = z2.object({
-  id: z2.string(),
-  name: z2.string().min(1).max(20),
-  enabled: z2.boolean(),
-  priority: z2.union([z2.literal(1), z2.literal(2), z2.literal(3)]),
-  backgroundTreatment: backgroundTreatmentSchema,
-  color: z2.string().optional(),
-  gradientColors: z2.tuple([z2.string(), z2.string()]).optional(),
-  borderColor: z2.string().optional(),
-  outlineHoverEffect: outlineHoverEffectSchema.optional(),
-  effectPreset: z2.string().optional()
+var variantEffectsSchema = z3.object({
+  base: z3.array(effectApplicationSchema).optional(),
+  hover: z3.array(effectApplicationSchema).optional(),
+  active: z3.array(effectApplicationSchema).optional(),
+  focus: z3.array(effectApplicationSchema).optional()
+});
+var variantSizeOverridesSchema = z3.object({
+  sm: buttonSizeConfigSchema.optional(),
+  md: buttonSizeConfigSchema.optional(),
+  lg: buttonSizeConfigSchema.optional(),
+  xl: buttonSizeConfigSchema.optional()
 });
-var buttonVariantSchema = z2.object({
-  id: z2.string(),
-  name: z2.string().min(1).max(20),
-  enabled: z2.boolean(),
-  priority: z2.union([z2.literal(1), z2.literal(2), z2.literal(3)]),
+var buttonVariantSchema = z3.object({
+  id: z3.string(),
+  name: z3.string().min(1).max(20),
+  enabled: z3.boolean(),
+  priority: prioritySchema,
   // Base appearance (token-based)
   background: buttonBackgroundSchema,
-  textColorToken: z2.string(),
-  borderRadius: z2.string(),
+  textColorToken: z3.string(),
+  /** Tailwind radius token (e.g. `'rounded-md'`). Omit to inherit from `global.cornerStyle`. */
+  borderRadius: z3.string().optional(),
   // Optional shadow override (uses theme.shadow if not specified)
-  shadow: z2.object({
-    elevation: z2.enum(["none", "low", "medium", "high"]),
-    softness: z2.enum(["crisp", "soft", "hard"]).nullable(),
-    position: z2.enum(["bottom", "bottom-right"]).default("bottom")
-  }).optional(),
+  shadow: variantShadowSchema.optional(),
   // Border (optional)
   border: buttonBorderSchema.optional(),
-  // Padding (optional, defaults to "0.5rem 1rem")
-  padding: z2.string().optional(),
-  // Font size (optional, Tailwind text size class)
-  fontSize: z2.string().optional(),
   // Hover background token (per-variant override, takes precedence over global hoverColorToken)
-  hoverBackgroundToken: z2.string().optional(),
+  hoverBackgroundToken: z3.string().optional(),
   // Effect composition
-  effects: z2.object({
-    base: z2.array(effectApplicationSchema).optional(),
-    hover: z2.array(effectApplicationSchema).optional(),
-    active: z2.array(effectApplicationSchema).optional(),
-    focus: z2.array(effectApplicationSchema).optional()
-  }).optional()
+  effects: variantEffectsSchema.optional(),
+  // Per-variant size overrides — see VariantSizeOverrides
+  sizes: variantSizeOverridesSchema.optional()
 });
-var buttonSystemSchema = z2.object({
+var buttonSystemSchema = z3.object({
   global: buttonGlobalSettingsSchema,
-  variants: z2.array(buttonVariantSchema).min(1).max(6),
+  variants: z3.array(buttonVariantSchema).min(1).max(6),
   sizes: buttonSizesSchema.optional()
 });
 
+// ../theme-core/src/buttons/generateButtonCss.ts
+var BUTTON_SIZE_NAMES = buttonSizeNameSchema.options;
+
+// ../theme-core/src/buttons/personalities/types.ts
+import { z as z4 } from "zod";
+function asButtonPersonalityId(value) {
+  if (value.length === 0) {
+    throw new Error("ButtonPersonalityId must be a non-empty string");
+  }
+  return value;
+}
+var buttonPersonalityIdSchema = z4.string().min(1).transform((value) => asButtonPersonalityId(value));
+var buttonPersonalitySchema = z4.object({
+  id: buttonPersonalityIdSchema,
+  name: z4.string().min(1),
+  description: z4.string().min(1),
+  tags: styleTagsSchema,
+  buttonSystem: buttonSystemSchema
+});
+function defineButtonPersonality(input) {
+  return {
+    id: asButtonPersonalityId(input.id),
+    name: input.name,
+    description: input.description,
+    tags: input.tags,
+    buttonSystem: input.buttonSystem
+  };
+}
+
+// ../theme-core/src/buttons/personalities/brushed-wash.ts
+var brushedWash = defineButtonPersonality({
+  id: "brushed-wash",
+  name: "Brushed Wash",
+  description: "Watercolour-gradient buttons with soft shadows and generous padding.",
+  tags: { tone: "classic", energy: "vibrant", motion: "standard", era: "organic" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "rounded",
+      shadow: "low",
+      textTransform: "none",
+      fontWeight: 500,
+      borderWidth: 1,
+      hoverTransform: "none",
+      hoverColor: "none"
+    },
+    sizes: {
+      sm: { padding: "0.75rem 2rem", fontSize: "text-sm" },
+      md: { padding: "1rem 2.5rem" },
+      lg: { padding: "1.25rem 3rem", fontSize: "text-lg" },
+      xl: { padding: "1.625rem 3.75rem", fontSize: "text-xl" }
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: {
+          type: "gradient",
+          stops: ["primary", "accent"],
+          direction: "to-r"
+        },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-lg",
+        shadow: { elevation: "low", softness: "soft", position: "bottom" },
+        effects: {
+          hover: [{ effectId: "opacity-reduce", options: { reduction: -15 } }]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: {
+          type: "gradient",
+          stops: ["secondary", "accent"],
+          direction: "to-br"
+        },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-lg",
+        shadow: { elevation: "low", softness: "soft", position: "bottom" },
+        effects: {
+          hover: [{ effectId: "opacity-reduce", options: { reduction: -15 } }]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-lg",
+        border: { widthClass: "border", colorToken: "primary" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-lg",
+        effects: {
+          hover: [
+            { effectId: "background-on-hover", options: { colorToken: "surface" } }
+          ]
+        }
+      }
+    ]
+  }
+});
+
+// ../theme-core/src/buttons/personalities/confident-chip.ts
+var confidentChip = defineButtonPersonality({
+  id: "confident-chip",
+  name: "Confident Chip",
+  description: "Mid-radius solid buttons with a crisp hover.",
+  tags: { tone: "classic", energy: "calm", motion: "standard", era: "modern" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "rounded",
+      shadow: "medium",
+      textTransform: "none",
+      fontWeight: 600,
+      borderWidth: 1,
+      hoverTransform: "none",
+      hoverColor: "none"
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: { type: "solid", colorToken: "primary" },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-md",
+        shadow: { elevation: "medium", softness: "soft", position: "bottom" },
+        effects: {
+          hover: [{ effectId: "darken-background", options: { amount: 60 } }],
+          active: [{ effectId: "scale-down", options: { scale: "0.97" } }]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: { type: "solid", colorToken: "surface" },
+        textColorToken: "text",
+        borderRadius: "rounded-md",
+        border: { widthClass: "border", colorToken: "border" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "background" } }]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-md",
+        border: { widthClass: "border", colorToken: "primary" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-md",
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      }
+    ]
+  }
+});
+
+// ../theme-core/src/buttons/personalities/editorial-link.ts
+var editorialLink = defineButtonPersonality({
+  id: "editorial-link",
+  name: "Editorial Link",
+  description: "Link-style with a growing underline. Refined, typographic.",
+  tags: { tone: "minimal", energy: "calm", motion: "subtle", era: "editorial" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "square",
+      shadow: "none",
+      textTransform: "none",
+      fontWeight: 500,
+      borderWidth: 1,
+      hoverTransform: "none",
+      hoverColor: "none"
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-none",
+        shadow: { elevation: "none", softness: null, position: "bottom" },
+        sizes: {
+          sm: { padding: "0.25rem 0" },
+          md: { padding: "0.5rem 0" },
+          lg: { padding: "0.625rem 0" },
+          xl: { padding: "0.75rem 0" }
+        },
+        effects: {
+          base: [
+            { effectId: "border-bottom-grow", options: { height: 2, colorToken: "text", origin: "left" } }
+          ]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: { type: "transparent" },
+        textColorToken: "mutedText",
+        borderRadius: "rounded-none",
+        shadow: { elevation: "none", softness: null, position: "bottom" },
+        sizes: {
+          sm: { padding: "0.25rem 0" },
+          md: { padding: "0.5rem 0" },
+          lg: { padding: "0.625rem 0" },
+          xl: { padding: "0.75rem 0" }
+        },
+        effects: {
+          base: [
+            { effectId: "border-bottom-grow", options: { height: 1, colorToken: "mutedText", origin: "left" } }
+          ]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "accent",
+        borderRadius: "rounded-none",
+        shadow: { elevation: "none", softness: null, position: "bottom" },
+        sizes: {
+          sm: { padding: "0.25rem 0" },
+          md: { padding: "0.5rem 0" },
+          lg: { padding: "0.625rem 0" },
+          xl: { padding: "0.75rem 0" }
+        },
+        effects: {
+          base: [
+            { effectId: "border-bottom-grow", options: { height: 1, colorToken: "accent", origin: "left" } }
+          ]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "mutedText",
+        borderRadius: "rounded-none",
+        shadow: { elevation: "none", softness: null, position: "bottom" },
+        sizes: {
+          sm: { padding: "0.25rem 0" },
+          md: { padding: "0.5rem 0" },
+          lg: { padding: "0.625rem 0" },
+          xl: { padding: "0.75rem 0" }
+        },
+        effects: {
+          hover: [{ effectId: "opacity-reduce", options: { reduction: -20 } }]
+        }
+      }
+    ]
+  }
+});
+
+// ../theme-core/src/buttons/personalities/ink-stamp.ts
+var inkStamp = defineButtonPersonality({
+  id: "ink-stamp",
+  name: "Ink Stamp",
+  description: "Hand-stamped block-print buttons with a slight lift on hover.",
+  tags: { tone: "bold", energy: "vibrant", motion: "standard", era: "organic" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "rounded",
+      shadow: "none",
+      textTransform: "uppercase",
+      fontWeight: 600,
+      borderWidth: 1,
+      hoverTransform: "none",
+      hoverColor: "none",
+      letterSpacing: "loose"
+    },
+    sizes: {
+      sm: { padding: "0.5rem 1.25rem", fontSize: "text-xs" },
+      md: { padding: "0.75rem 1.75rem", fontSize: "text-sm" },
+      lg: { padding: "0.875rem 2.25rem", fontSize: "text-base" },
+      xl: { padding: "1.125rem 2.75rem", fontSize: "text-lg" }
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: { type: "solid", colorToken: "primary" },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-md",
+        effects: {
+          hover: [
+            { effectId: "drop-shadow", options: { intensity: "medium" } },
+            { effectId: "scale-up", options: { scale: "1.02" } }
+          ],
+          active: [{ effectId: "scale-down", options: { scale: "0.98" } }]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-md",
+        border: { widthClass: "border-2", colorToken: "primary" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-md",
+        border: { widthClass: "border-2", colorToken: "border" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "accent",
+        borderRadius: "rounded-none",
+        sizes: {
+          sm: { padding: "0.375rem 0", fontSize: "text-xs" },
+          md: { padding: "0.5rem 0", fontSize: "text-sm" },
+          lg: { padding: "0.625rem 0", fontSize: "text-base" },
+          xl: { padding: "0.75rem 0", fontSize: "text-lg" }
+        },
+        effects: {
+          base: [{ effectId: "border-bottom-grow", options: { height: 1, colorToken: "accent", origin: "left" } }]
+        }
+      }
+    ]
+  }
+});
+
+// ../theme-core/src/buttons/personalities/pebble.ts
+var pebble = defineButtonPersonality({
+  id: "pebble",
+  name: "Pebble",
+  description: "Generous pill buttons with a soft hover lift.",
+  tags: { tone: "classic", energy: "calm", motion: "standard", era: "organic" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "pill",
+      shadow: "none",
+      textTransform: "none",
+      fontWeight: 500,
+      borderWidth: 2,
+      hoverTransform: "none",
+      hoverColor: "none"
+    },
+    sizes: {
+      sm: { padding: "0.625rem 1.75rem", fontSize: "text-sm" },
+      md: { padding: "0.875rem 2.25rem" },
+      lg: { padding: "1.125rem 2.75rem", fontSize: "text-lg" },
+      xl: { padding: "1.5rem 3.5rem", fontSize: "text-xl" }
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: { type: "solid", colorToken: "primary" },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-full",
+        effects: {
+          hover: [
+            { effectId: "scale-up", options: { scale: "1.03" } },
+            { effectId: "drop-shadow", options: { intensity: "medium" } }
+          ]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-full",
+        border: { widthClass: "border-2", colorToken: "accent" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "accent" } }]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-full",
+        border: { widthClass: "border", colorToken: "border" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-full",
+        sizes: {
+          sm: { padding: "0.375rem 0.875rem", fontSize: "text-sm" },
+          md: { padding: "0.5rem 1rem" },
+          lg: { padding: "0.625rem 1.25rem", fontSize: "text-lg" },
+          xl: { padding: "0.75rem 1.5rem", fontSize: "text-xl" }
+        },
+        effects: {
+          hover: [{ effectId: "opacity-reduce", options: { reduction: 30 } }]
+        }
+      }
+    ]
+  }
+});
+
+// ../theme-core/src/buttons/personalities/soft-pill.ts
+var softPill = defineButtonPersonality({
+  id: "soft-pill",
+  name: "Soft Pill",
+  description: "Rounded pills with a gentle lift on hover. Quietly modern.",
+  tags: { tone: "classic", energy: "calm", motion: "subtle", era: "organic" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "pill",
+      shadow: "low",
+      textTransform: "none",
+      fontWeight: 500,
+      borderWidth: 2,
+      hoverTransform: "lift",
+      hoverColor: "none"
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: { type: "solid", colorToken: "primary" },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-full",
+        shadow: { elevation: "low", softness: "soft", position: "bottom" },
+        effects: {
+          hover: [{ effectId: "lift", options: { translateY: "-1px" } }],
+          active: [{ effectId: "scale-down", options: { scale: "0.98" } }]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-full",
+        border: { widthClass: "border-2", colorToken: "primary" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-full",
+        border: { widthClass: "border", colorToken: "border" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-full",
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surface" } }]
+        }
+      }
+    ]
+  }
+});
+
+// ../theme-core/src/buttons/personalities/index.ts
+var buttonPersonalities = [
+  softPill,
+  confidentChip,
+  editorialLink,
+  pebble,
+  inkStamp,
+  brushedWash
+];
+var personalitiesById = new Map(
+  buttonPersonalities.map((p) => [p.id, p])
+);
+
 // ../theme-core/src/buttons/core.ts
 var CORNER_RADIUS_MAP = {
   square: "0",
@@ -339,43 +934,43 @@ function getDefaultButtonVariants() {
 }
 
 // ../theme-core/src/cards/types.ts
-import { z as z3 } from "zod";
-var cardSpacingSchema = z3.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]);
-var gradientDirectionSchema2 = z3.enum(["to-r", "to-l", "to-t", "to-b", "to-tr", "to-tl", "to-br", "to-bl"]);
-var cardBackgroundSchema = z3.discriminatedUnion("type", [
-  z3.object({ type: z3.literal("solid"), colorToken: z3.string() }),
-  z3.object({
-    type: z3.literal("gradient"),
-    fromToken: z3.string(),
-    toToken: z3.string(),
+import { z as z5 } from "zod";
+var cardSpacingSchema = z5.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]);
+var gradientDirectionSchema2 = z5.enum(["to-r", "to-l", "to-t", "to-b", "to-tr", "to-tl", "to-br", "to-bl"]);
+var cardBackgroundSchema = z5.discriminatedUnion("type", [
+  z5.object({ type: z5.literal("solid"), colorToken: z5.string() }),
+  z5.object({
+    type: z5.literal("gradient"),
+    fromToken: z5.string(),
+    toToken: z5.string(),
     direction: gradientDirectionSchema2
   }),
-  z3.object({ type: z3.literal("transparent") })
+  z5.object({ type: z5.literal("transparent") })
 ]);
-var cardBorderSchema = z3.object({
-  widthClass: z3.string(),
-  colorToken: z3.string()
+var cardBorderSchema = z5.object({
+  widthClass: z5.string(),
+  colorToken: z5.string()
 });
-var cardVariantSchema = z3.object({
-  id: z3.string(),
-  name: z3.string().min(1).max(20),
-  enabled: z3.boolean(),
-  priority: z3.union([z3.literal(1), z3.literal(2), z3.literal(3)]),
+var cardVariantSchema = z5.object({
+  id: z5.string(),
+  name: z5.string().min(1).max(20),
+  enabled: z5.boolean(),
+  priority: z5.union([z5.literal(1), z5.literal(2), z5.literal(3)]),
   // Appearance (token-based)
   background: cardBackgroundSchema,
   spacing: cardSpacingSchema,
   // Optional overrides (uses theme defaults if not specified)
-  shadow: z3.object({
-    elevation: z3.enum(["none", "low", "medium", "high"]),
-    softness: z3.enum(["crisp", "soft", "hard"]).nullable(),
-    position: z3.enum(["bottom", "bottom-right"]).default("bottom")
+  shadow: z5.object({
+    elevation: z5.enum(["none", "low", "medium", "high"]),
+    softness: z5.enum(["crisp", "soft", "hard"]).nullable(),
+    position: z5.enum(["bottom", "bottom-right"]).default("bottom")
   }).optional(),
-  corners: z3.enum(["square", "soft", "rounded", "pill"]).optional(),
+  corners: z5.enum(["square", "soft", "rounded", "pill"]).optional(),
   // Border (optional)
   border: cardBorderSchema.optional()
 });
-var cardSystemSchema = z3.object({
-  variants: z3.array(cardVariantSchema).min(1).max(3)
+var cardSystemSchema = z5.object({
+  variants: z5.array(cardVariantSchema).min(1).max(3)
 });
 
 // ../theme-core/src/cards/core.ts
@@ -497,8 +1092,8 @@ function getDefaultCardVariants() {
 }
 
 // ../theme-core/src/accordions/types.ts
-import { z as z4 } from "zod";
-var accordionIconSchema = z4.enum([
+import { z as z6 } from "zod";
+var accordionIconSchema = z6.enum([
   "plus-minus",
   // + becomes - (swap or rotate 90°)
   "chevron",
@@ -510,180 +1105,180 @@ var accordionIconSchema = z4.enum([
   "circle-plus-minus"
   // ⊕ becomes ⊖ (swap with fade)
 ]);
-var accordionSystemSchema = z4.object({
+var accordionSystemSchema = z6.object({
   // Visual styling (solid color only - gradients can be added later if needed)
-  background: z4.object({
-    type: z4.literal("solid"),
-    colorToken: z4.string()
+  background: z6.object({
+    type: z6.literal("solid"),
+    colorToken: z6.string()
   }),
   // Spacing (padding inside items)
-  spacing: z4.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]),
+  spacing: z6.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]),
   // Border radius (null = inherit from theme.corners)
-  corners: z4.enum(["square", "soft", "rounded", "pill"]).nullable(),
+  corners: z6.enum(["square", "soft", "rounded", "pill"]).nullable(),
   // Border styling (null = inherit from theme.border)
-  border: z4.object({
-    widthClass: z4.string(),
+  border: z6.object({
+    widthClass: z6.string(),
     // e.g., 'border', 'border-2', 'border-0'
-    colorToken: z4.string()
+    colorToken: z6.string()
   }).nullable(),
   // Shadow (null = inherit from theme.shadow)
-  shadow: z4.object({
-    elevation: z4.enum(["none", "low", "medium", "high"]),
-    softness: z4.enum(["soft", "crisp", "hard"]).nullable(),
-    position: z4.enum(["bottom", "bottom-right"])
+  shadow: z6.object({
+    elevation: z6.enum(["none", "low", "medium", "high"]),
+    softness: z6.enum(["soft", "crisp", "hard"]).nullable(),
+    position: z6.enum(["bottom", "bottom-right"])
   }).nullable(),
   // Icon style and animation
-  icon: z4.object({
+  icon: z6.object({
     style: accordionIconSchema,
-    position: z4.enum(["left", "right"]),
-    size: z4.enum(["sm", "md", "lg"])
+    position: z6.enum(["left", "right"]),
+    size: z6.enum(["sm", "md", "lg"])
   }),
   // Trigger (question) styling
-  trigger: z4.object({
-    textColorToken: z4.string(),
-    fontWeight: z4.enum(["regular", "medium", "semibold", "bold"]).nullable()
+  trigger: z6.object({
+    textColorToken: z6.string(),
+    fontWeight: z6.enum(["regular", "medium", "semibold", "bold"]).nullable()
     // null = inherit from theme
   }),
   // Hover state styling
-  hover: z4.object({
-    backgroundColorToken: z4.string().optional(),
-    textColorToken: z4.string().optional(),
-    borderColorToken: z4.string().optional()
+  hover: z6.object({
+    backgroundColorToken: z6.string().optional(),
+    textColorToken: z6.string().optional(),
+    borderColorToken: z6.string().optional()
   }),
   // Content (answer) styling
-  content: z4.object({
-    textColorToken: z4.string()
+  content: z6.object({
+    textColorToken: z6.string()
   })
 });
 
 // ../theme-core/src/inputs/types.ts
-import { z as z5 } from "zod";
-var inputSystemSchema = z5.object({
+import { z as z7 } from "zod";
+var inputSystemSchema = z7.object({
   // Base styling (applied to all inputs)
-  base: z5.object({
-    background: z5.union([
-      z5.object({
-        type: z5.literal("solid"),
-        colorToken: z5.string()
+  base: z7.object({
+    background: z7.union([
+      z7.object({
+        type: z7.literal("solid"),
+        colorToken: z7.string()
       }),
-      z5.object({
-        type: z5.literal("transparent")
+      z7.object({
+        type: z7.literal("transparent")
       })
     ]),
-    textColorToken: z5.string(),
-    border: z5.object({
-      widthClass: z5.string(),
+    textColorToken: z7.string(),
+    border: z7.object({
+      widthClass: z7.string(),
       // e.g., 'border', 'border-2'
-      colorToken: z5.string(),
-      style: z5.enum(["all", "underline"]).optional()
+      colorToken: z7.string(),
+      style: z7.enum(["all", "underline"]).optional()
     }),
-    corners: z5.enum(["square", "soft", "rounded", "pill"]).nullable(),
+    corners: z7.enum(["square", "soft", "rounded", "pill"]).nullable(),
     // null = inherit from theme.corners
-    shadow: z5.object({
-      elevation: z5.enum(["none", "low", "medium"]),
-      softness: z5.enum(["soft", "crisp", "hard"]).nullable()
+    shadow: z7.object({
+      elevation: z7.enum(["none", "low", "medium"]),
+      softness: z7.enum(["soft", "crisp", "hard"]).nullable()
     }).nullable(),
-    spacing: z5.enum(["compact", "cozy", "medium", "comfortable"]),
+    spacing: z7.enum(["compact", "cozy", "medium", "comfortable"]),
     // padding inside inputs
-    fontSize: z5.enum(["sm", "base", "lg"])
+    fontSize: z7.enum(["sm", "base", "lg"])
   }),
   // Label styling
-  label: z5.object({
-    textColorToken: z5.string(),
-    fontWeight: z5.enum(["regular", "medium", "semibold", "bold", "black"]),
-    fontSize: z5.enum(["2xs", "xs", "sm", "base"]),
-    textTransform: z5.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
-    letterSpacing: z5.enum(["normal", "wide", "wider", "widest"]).optional(),
-    opacity: z5.number().min(0.2).max(1).optional()
+  label: z7.object({
+    textColorToken: z7.string(),
+    fontWeight: z7.enum(["regular", "medium", "semibold", "bold", "black"]),
+    fontSize: z7.enum(["2xs", "xs", "sm", "base"]),
+    textTransform: z7.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
+    letterSpacing: z7.enum(["normal", "wide", "wider", "widest"]).optional(),
+    opacity: z7.number().min(0.2).max(1).optional()
   }),
   // Focus state
-  focus: z5.object({
-    ringColorToken: z5.string(),
-    ringWidth: z5.enum(["0", "1", "2", "3"]),
-    borderColorToken: z5.string().optional()
+  focus: z7.object({
+    ringColorToken: z7.string(),
+    ringWidth: z7.enum(["0", "1", "2", "3"]),
+    borderColorToken: z7.string().optional()
     // Change border color on focus
   }),
   // Error state (for validation feedback)
-  error: z5.object({
-    borderColorToken: z5.string(),
-    textColorToken: z5.string()
+  error: z7.object({
+    borderColorToken: z7.string(),
+    textColorToken: z7.string()
   }),
   // Disabled state
-  disabled: z5.object({
-    backgroundColorToken: z5.string(),
-    textColorToken: z5.string(),
-    opacity: z5.number().min(0.3).max(0.7)
+  disabled: z7.object({
+    backgroundColorToken: z7.string(),
+    textColorToken: z7.string(),
+    opacity: z7.number().min(0.3).max(0.7)
   })
 });
 
 // ../theme-core/src/gradients/types.ts
-import { z as z6 } from "zod";
-var gradientStopSchema = z6.object({
-  color: z6.string(),
+import { z as z8 } from "zod";
+var gradientStopSchema = z8.object({
+  color: z8.string(),
   // Theme color token name (e.g., 'primary-500')
-  position: z6.number().min(0).max(100)
+  position: z8.number().min(0).max(100)
   // Percentage 0-100
 });
-var gradientConfigSchema = z6.object({
-  type: z6.enum(["linear", "radial"]),
-  angle: z6.number().min(0).max(360).optional(),
+var gradientConfigSchema = z8.object({
+  type: z8.enum(["linear", "radial"]),
+  angle: z8.number().min(0).max(360).optional(),
   // For linear gradients (degrees)
-  position: z6.string().optional(),
+  position: z8.string().optional(),
   // For radial gradients ('center', 'top left', etc.)
-  stops: z6.array(gradientStopSchema).min(2)
+  stops: z8.array(gradientStopSchema).min(2)
 });
 
 // ../theme-core/src/navigation/types.ts
-import { z as z8 } from "zod";
+import { z as z10 } from "zod";
 
 // ../theme-core/src/interactive/baseSchema.ts
-import { z as z7 } from "zod";
-var interactiveTypographySchema = z7.object({
+import { z as z9 } from "zod";
+var interactiveTypographySchema = z9.object({
   /** Font family source */
-  typography: z7.enum(["body", "heading"]).default("body"),
+  typography: z9.enum(["body", "heading"]).default("body"),
   /** Font weight */
-  fontWeight: z7.enum(["regular", "medium", "semibold", "bold"]).default("medium"),
+  fontWeight: z9.enum(["regular", "medium", "semibold", "bold"]).default("medium"),
   /** Text transform */
-  textTransform: z7.enum(["none", "uppercase", "capitalize"]).default("none"),
+  textTransform: z9.enum(["none", "uppercase", "capitalize"]).default("none"),
   /** Italic style */
-  italic: z7.boolean().default(false)
+  italic: z9.boolean().default(false)
 });
-var effectApplicationSchema2 = z7.object({
+var effectApplicationSchema2 = z9.object({
   /** Effect preset ID */
-  effectId: z7.string(),
+  effectId: z9.string(),
   /** User-provided customization options */
-  options: z7.record(z7.string(), z7.any()).optional()
+  options: z9.record(z9.string(), z9.any()).optional()
 });
-var effectCompositionSchema = z7.object({
+var effectCompositionSchema = z9.object({
   /** Effects always applied */
-  base: z7.array(effectApplicationSchema2).optional(),
+  base: z9.array(effectApplicationSchema2).optional(),
   /** Effects applied on hover */
-  hover: z7.array(effectApplicationSchema2).optional(),
+  hover: z9.array(effectApplicationSchema2).optional(),
   /** Effects applied on active/pressed */
-  active: z7.array(effectApplicationSchema2).optional(),
+  active: z9.array(effectApplicationSchema2).optional(),
   /** Effects applied on focus */
-  focus: z7.array(effectApplicationSchema2).optional()
+  focus: z9.array(effectApplicationSchema2).optional()
 });
 
 // ../theme-core/src/navigation/types.ts
-var navLinkPaddingSchema = z8.enum(["none", "compact", "default"]);
-var navLinkPaddingXSchema = z8.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
-var navLinkBorderRadiusSchema = z8.enum(["none", "sm", "md", "full"]);
-var navLinkTextSizeSchema = z8.enum(["xs", "sm", "base", "lg"]);
-var navLinkLetterSpacingSchema = z8.enum(["normal", "wide", "wider", "widest"]);
-var navLinkStyleSchema = z8.object({
+var navLinkPaddingSchema = z10.enum(["none", "compact", "default"]);
+var navLinkPaddingXSchema = z10.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
+var navLinkBorderRadiusSchema = z10.enum(["none", "sm", "md", "full"]);
+var navLinkTextSizeSchema = z10.enum(["xs", "sm", "base", "lg"]);
+var navLinkLetterSpacingSchema = z10.enum(["normal", "wide", "wider", "widest"]);
+var navLinkStyleSchema = z10.object({
   /** Display name for the style */
-  name: z8.string().min(1).max(30).optional(),
+  name: z10.string().min(1).max(30).optional(),
   /** Typography settings (inherited from interactive base) */
   ...interactiveTypographySchema.shape,
   /** Text color token */
-  colorToken: z8.string().default("text"),
+  colorToken: z10.string().default("text"),
   /** Optional text size override */
   textSize: navLinkTextSizeSchema.optional(),
   /** Optional letter spacing override */
   letterSpacing: navLinkLetterSpacingSchema.optional(),
   /** Hover/active color token (for color-change effects) */
-  hoverColorToken: z8.string().nullable().optional(),
+  hoverColorToken: z10.string().nullable().optional(),
   /** Padding preset */
   padding: navLinkPaddingSchema.default("compact"),
   /** Horizontal padding override (overrides horizontal component of padding preset) */
@@ -695,7 +1290,7 @@ var navLinkStyleSchema = z8.object({
 });
 
 // ../theme-core/src/customCss/validation.ts
-import { z as z9 } from "zod";
+import { z as z11 } from "zod";
 var FORBIDDEN_SELECTORS = [":root", "html", "body"];
 var UNIVERSAL_SELECTOR = "*";
 var REMOTE_URL_PATTERN = /url\s*\(\s*['"]?(https?:|\/\/)/i;
@@ -737,7 +1332,7 @@ function containsForbiddenSelector(selector) {
   }
   return false;
 }
-var selectorSchema = z9.string().min(1, "Selector cannot be empty").max(200, "Selector too long (max 200 characters)").refine(
+var selectorSchema = z11.string().min(1, "Selector cannot be empty").max(200, "Selector too long (max 200 characters)").refine(
   (s) => !containsForbiddenSelector(s),
   { message: "Global selectors (:root, html, body, *) are not allowed" }
 );
@@ -747,38 +1342,38 @@ function containsRemoteUrl(value) {
 function containsJavascriptUrl(value) {
   return JAVASCRIPT_URL_PATTERN.test(value);
 }
-var declarationValueSchema = z9.string().max(500, "Declaration value too long (max 500 characters)").refine(
+var declarationValueSchema = z11.string().max(500, "Declaration value too long (max 500 characters)").refine(
   (v) => !containsRemoteUrl(v),
   { message: "Remote url() references are not allowed. Use local paths, data URIs, or fragment IDs." }
 ).refine(
   (v) => !containsJavascriptUrl(v),
   { message: "javascript: URLs are not allowed" }
 );
-var declarationsSchema = z9.record(
-  z9.string().min(1).max(100),
+var declarationsSchema = z11.record(
+  z11.string().min(1).max(100),
   // property name
   declarationValueSchema
   // property value
 );
-var customCssRuleSchema = z9.object({
-  id: z9.string().min(1, "Rule ID is required").max(50, "Rule ID too long"),
+var customCssRuleSchema = z11.object({
+  id: z11.string().min(1, "Rule ID is required").max(50, "Rule ID too long"),
   selector: selectorSchema,
   declarations: declarationsSchema
 });
 var blockCustomCssRuleSchema = customCssRuleSchema.extend({
-  blockKind: z9.string().min(1, "Block kind is required").max(50, "Block kind too long")
+  blockKind: z11.string().min(1, "Block kind is required").max(50, "Block kind too long")
 });
-var customCssRulesSchema = z9.array(customCssRuleSchema).optional();
-var blockCustomCssRulesSchema = z9.array(blockCustomCssRuleSchema).optional();
+var customCssRulesSchema = z11.array(customCssRuleSchema).optional();
+var blockCustomCssRulesSchema = z11.array(blockCustomCssRuleSchema).optional();
 
 // ../theme-core/src/customCss/atRuleValidation.ts
-import { z as z10 } from "zod";
+import { z as z12 } from "zod";
 var KEYFRAME_OFFSET_PATTERN = /^(from|to|\d{1,3}%)$/i;
 var ANIMATION_NAME_PATTERN = /^[a-zA-Z_-][a-zA-Z0-9_-]*$/;
 var BLOCKED_AT_RULES = ["@import", "@charset"];
 var BLOCKED_AT_RULE_PATTERN = /@(?:import|charset)\b/i;
-var ruleIdSchema = z10.string().min(1, "Rule ID is required").max(50, "Rule ID too long");
-var nestedRuleSchema = z10.object({
+var ruleIdSchema = z12.string().min(1, "Rule ID is required").max(50, "Rule ID too long");
+var nestedRuleSchema = z12.object({
   selector: selectorSchema,
   declarations: declarationsSchema
 });
@@ -790,146 +1385,146 @@ function isValidKeyframeOffset(offset) {
   const value = parseInt(match[1], 10);
   return value >= 0 && value <= 100;
 }
-var keyframeOffsetSchema = z10.string().transform((offset) => offset.trim()).refine(
+var keyframeOffsetSchema = z12.string().transform((offset) => offset.trim()).refine(
   (offset) => KEYFRAME_OFFSET_PATTERN.test(offset),
   { message: 'Invalid keyframe offset. Use percentages (0%, 50%, 100%) or "from"/"to"' }
 ).refine(
   isValidKeyframeOffset,
   { message: "Keyframe offset must be between 0% and 100%" }
 );
-var animationNameSchema = z10.string().min(1, "Animation name is required").max(50, "Animation name too long").refine(
+var animationNameSchema = z12.string().min(1, "Animation name is required").max(50, "Animation name too long").refine(
   (name) => ANIMATION_NAME_PATTERN.test(name),
   { message: "Invalid animation name. Use letters, numbers, dashes, underscores (start with letter, dash, or underscore)" }
 );
-var keyframeSchema = z10.object({
+var keyframeSchema = z12.object({
   offset: keyframeOffsetSchema,
   declarations: declarationsSchema
 });
-var keyframesAtRuleSchema = z10.object({
+var keyframesAtRuleSchema = z12.object({
   id: ruleIdSchema,
-  type: z10.literal("keyframes"),
+  type: z12.literal("keyframes"),
   name: animationNameSchema,
-  frames: z10.array(keyframeSchema).min(1, "At least one keyframe is required")
+  frames: z12.array(keyframeSchema).min(1, "At least one keyframe is required")
 });
-var fontFaceDeclarationsSchema = z10.record(z10.string().min(1).max(100), declarationValueSchema).refine(
+var fontFaceDeclarationsSchema = z12.record(z12.string().min(1).max(100), declarationValueSchema).refine(
   (decls) => "fontFamily" in decls || "font-family" in decls,
   { message: "font-family is required in @font-face" }
 );
-var fontFaceAtRuleSchema = z10.object({
+var fontFaceAtRuleSchema = z12.object({
   id: ruleIdSchema,
-  type: z10.literal("font-face"),
+  type: z12.literal("font-face"),
   declarations: fontFaceDeclarationsSchema
 });
-var mediaQuerySchema = z10.string().min(1, "Media query is required").max(200, "Media query too long");
-var mediaAtRuleSchema = z10.object({
+var mediaQuerySchema = z12.string().min(1, "Media query is required").max(200, "Media query too long");
+var mediaAtRuleSchema = z12.object({
   id: ruleIdSchema,
-  type: z10.literal("media"),
+  type: z12.literal("media"),
   query: mediaQuerySchema,
-  rules: z10.array(nestedRuleSchema).min(1, "At least one rule is required")
+  rules: z12.array(nestedRuleSchema).min(1, "At least one rule is required")
 });
-var supportsConditionSchema = z10.string().min(1, "Supports condition is required").max(200, "Supports condition too long");
-var supportsAtRuleSchema = z10.object({
+var supportsConditionSchema = z12.string().min(1, "Supports condition is required").max(200, "Supports condition too long");
+var supportsAtRuleSchema = z12.object({
   id: ruleIdSchema,
-  type: z10.literal("supports"),
+  type: z12.literal("supports"),
   condition: supportsConditionSchema,
-  rules: z10.array(nestedRuleSchema).min(1, "At least one rule is required")
+  rules: z12.array(nestedRuleSchema).min(1, "At least one rule is required")
 });
 function containsBlockedAtRule(css) {
   return BLOCKED_AT_RULE_PATTERN.test(css);
 }
-var rawCssSchema = z10.string().min(1, "CSS is required").max(5e3, "Raw CSS too long (max 5000 characters)").refine(
+var rawCssSchema = z12.string().min(1, "CSS is required").max(5e3, "Raw CSS too long (max 5000 characters)").refine(
   (css) => css.trim().startsWith("@"),
   { message: "Raw at-rule must start with @" }
 ).refine(
   (css) => !containsBlockedAtRule(css),
   { message: `Blocked at-rules: ${BLOCKED_AT_RULES.join(", ")}. Use typed at-rules or local assets instead.` }
 );
-var rawAtRuleSchema = z10.object({
+var rawAtRuleSchema = z12.object({
   id: ruleIdSchema,
-  type: z10.literal("raw"),
+  type: z12.literal("raw"),
   css: rawCssSchema
 });
-var customCssAtRuleSchema = z10.discriminatedUnion("type", [
+var customCssAtRuleSchema = z12.discriminatedUnion("type", [
   keyframesAtRuleSchema,
   fontFaceAtRuleSchema,
   mediaAtRuleSchema,
   supportsAtRuleSchema,
   rawAtRuleSchema
 ]);
-var customCssAtRulesSchema = z10.array(customCssAtRuleSchema).optional();
+var customCssAtRulesSchema = z12.array(customCssAtRuleSchema).optional();
 
 // ../theme-core/src/shared/componentStyles.ts
-import { z as z11 } from "zod";
-var componentBorderSchema = z11.object({
-  width: z11.enum(["none", "hairline", "thin", "medium", "thick"]).default("none"),
-  style: z11.enum(["solid", "dashed"]).default("solid"),
-  colorToken: z11.string().optional()
+import { z as z13 } from "zod";
+var componentBorderSchema = z13.object({
+  width: z13.enum(["none", "hairline", "thin", "medium", "thick"]).default("none"),
+  style: z13.enum(["solid", "dashed"]).default("solid"),
+  colorToken: z13.string().optional()
   // defaults to "border" if not set
 });
-var componentShadowSchema = z11.object({
-  elevation: z11.enum(["none", "sm", "md", "lg", "xl", "2xl"]).default("sm")
+var componentShadowSchema = z13.object({
+  elevation: z13.enum(["none", "sm", "md", "lg", "xl", "2xl"]).default("sm")
 });
 
 // ../theme-core/src/schema.ts
-var axesSchema = z12.object({
-  tone: z12.enum(["minimal", "classic", "bold"]),
-  energy: z12.enum(["calm", "vibrant"]),
-  density: z12.enum(["airy", "regular", "compact"]),
-  mediaBias: z12.enum(["text", "media", "mixed"]),
-  conversionBias: z12.enum(["low", "med", "high"]),
-  motion: z12.enum(["subtle", "standard", "expressive"])
+var axesSchema = z14.object({
+  tone: z14.enum(["minimal", "classic", "bold"]),
+  energy: z14.enum(["calm", "vibrant"]),
+  density: z14.enum(["airy", "regular", "compact"]),
+  mediaBias: z14.enum(["text", "media", "mixed"]),
+  conversionBias: z14.enum(["low", "med", "high"]),
+  motion: z14.enum(["subtle", "standard", "expressive"])
 });
-var colourHexString = z12.string().regex(/^#([0-9A-Fa-f]{3}){1,2}$/);
-var paletteColorSchema = z12.object({
-  name: z12.string().min(1),
+var colourHexString = z14.string().regex(/^#([0-9A-Fa-f]{3}){1,2}$/);
+var paletteColorSchema = z14.object({
+  name: z14.string().min(1),
   hex: colourHexString
 });
-var paletteMetaSchema = z12.object({
-  mode: z12.enum(["light", "dark"])
+var paletteMetaSchema = z14.object({
+  mode: z14.enum(["light", "dark"])
 });
-var paletteSchema = z12.object({
-  colors: z12.array(paletteColorSchema),
+var paletteSchema = z14.object({
+  colors: z14.array(paletteColorSchema),
   meta: paletteMetaSchema
 });
-var typographyStyleSchema = z12.object({
-  family: z12.string().min(1),
-  weight: z12.enum(["light", "regular", "medium", "semibold", "bold"]),
-  letterSpacing: z12.enum(["tight", "normal", "loose"]),
-  lineHeight: z12.enum(["normal", "relaxed", "loose"])
+var typographyStyleSchema = z14.object({
+  family: z14.string().min(1),
+  weight: z14.enum(["light", "regular", "medium", "semibold", "bold"]),
+  letterSpacing: z14.enum(["tight", "normal", "loose"]),
+  lineHeight: z14.enum(["normal", "relaxed", "loose"])
 });
 var bodyTypographyStyleSchema = typographyStyleSchema.extend({
-  size: z12.enum(["md", "lg", "xl"])
+  size: z14.enum(["md", "lg", "xl"])
 });
-var headingSizeSchema = z12.enum(["xs", "sm", "md", "lg", "xl", "2xl"]);
-var headingTypographyOverridesSchema = z12.object({
-  weight: z12.enum(["light", "regular", "medium", "semibold", "bold"]).nullable().optional(),
-  letterSpacing: z12.enum(["tight", "normal", "loose"]).nullable().optional(),
+var headingSizeSchema = z14.enum(["xs", "sm", "md", "lg", "xl", "2xl"]);
+var headingTypographyOverridesSchema = z14.object({
+  weight: z14.enum(["light", "regular", "medium", "semibold", "bold"]).nullable().optional(),
+  letterSpacing: z14.enum(["tight", "normal", "loose"]).nullable().optional(),
   size: headingSizeSchema.nullable().optional(),
-  lineHeight: z12.enum(["normal", "relaxed", "loose"]).nullable().optional(),
-  italic: z12.boolean().nullable().optional(),
-  colorToken: z12.string().min(1).nullable().optional()
+  lineHeight: z14.enum(["normal", "relaxed", "loose"]).nullable().optional(),
+  italic: z14.boolean().nullable().optional(),
+  colorToken: z14.string().min(1).nullable().optional()
   // Palette token name for heading color
 });
 var headingTypographyStyleSchema = typographyStyleSchema.extend({
-  case: z12.enum(["uppercase", "normal", "smallCaps"]).nullable(),
-  italic: z12.boolean().nullable(),
-  colorToken: z12.string().min(1).nullable().optional()
+  case: z14.enum(["uppercase", "normal", "smallCaps"]).nullable(),
+  italic: z14.boolean().nullable(),
+  colorToken: z14.string().min(1).nullable().optional()
   // Palette token name for heading color
 });
-var proseLinkUnderlineStyleSchema = z12.enum(["solid", "dotted", "dashed"]);
-var proseLinkUnderlineThicknessSchema = z12.enum(["auto", "fromFont", "thin", "medium", "thick"]);
-var proseLinkUnderlineOffsetSchema = z12.enum(["auto", "tight", "normal", "loose"]);
-var proseLinkStyleSchema = z12.object({
-  colorToken: z12.string().min(1).optional(),
-  hoverColorToken: z12.string().min(1).optional(),
-  underline: z12.boolean().optional(),
-  decorationColorToken: z12.string().min(1).optional(),
-  hoverDecorationColorToken: z12.string().min(1).optional(),
+var proseLinkUnderlineStyleSchema = z14.enum(["solid", "dotted", "dashed"]);
+var proseLinkUnderlineThicknessSchema = z14.enum(["auto", "fromFont", "thin", "medium", "thick"]);
+var proseLinkUnderlineOffsetSchema = z14.enum(["auto", "tight", "normal", "loose"]);
+var proseLinkStyleSchema = z14.object({
+  colorToken: z14.string().min(1).optional(),
+  hoverColorToken: z14.string().min(1).optional(),
+  underline: z14.boolean().optional(),
+  decorationColorToken: z14.string().min(1).optional(),
+  hoverDecorationColorToken: z14.string().min(1).optional(),
   underlineStyle: proseLinkUnderlineStyleSchema.optional(),
   underlineThickness: proseLinkUnderlineThicknessSchema.optional(),
   underlineOffset: proseLinkUnderlineOffsetSchema.optional()
 });
-var semanticSpacingSchema = z12.enum([
+var semanticSpacingSchema = z14.enum([
   "none",
   "compact",
   "cozy",
@@ -937,62 +1532,62 @@ var semanticSpacingSchema = z12.enum([
   "comfortable",
   "spacious"
 ]);
-var boxRoundedSchema = z12.enum(["none", "sm", "md", "lg", "xl", "2xl", "full"]);
-var boxBackgroundOverlaySchema = z12.object({
-  type: z12.enum(["none", "color", "gradient"]).nullable().optional(),
-  color: z12.string().nullable().optional(),
-  gradient: z12.string().nullable().optional(),
-  opacity: z12.number().min(0).max(1).nullable().optional()
+var boxRoundedSchema = z14.enum(["none", "sm", "md", "lg", "xl", "2xl", "full"]);
+var boxBackgroundOverlaySchema = z14.object({
+  type: z14.enum(["none", "color", "gradient"]).nullable().optional(),
+  color: z14.string().nullable().optional(),
+  gradient: z14.string().nullable().optional(),
+  opacity: z14.number().min(0).max(1).nullable().optional()
 });
-var boxBackgroundSchema = z12.object({
-  type: z12.enum(["color", "gradient", "image"]).optional(),
-  color: z12.string().nullable().optional(),
-  gradient: z12.string().nullable().optional(),
+var boxBackgroundSchema = z14.object({
+  type: z14.enum(["color", "gradient", "image"]).optional(),
+  color: z14.string().nullable().optional(),
+  gradient: z14.string().nullable().optional(),
   image: mediaSchema.nullable().optional(),
-  objectFit: z12.enum(["fill", "fit", "original", "custom"]).nullable().optional(),
-  scale: z12.string().nullable().optional(),
-  position: z12.string().nullable().optional(),
-  opacity: z12.number().min(0).max(1).nullable().optional(),
+  objectFit: z14.enum(["fill", "fit", "original", "custom"]).nullable().optional(),
+  scale: z14.string().nullable().optional(),
+  position: z14.string().nullable().optional(),
+  opacity: z14.number().min(0).max(1).nullable().optional(),
   overlay: boxBackgroundOverlaySchema.nullable().optional(),
-  textColor: z12.string().nullable().optional(),
-  headingColor: z12.string().nullable().optional()
+  textColor: z14.string().nullable().optional(),
+  headingColor: z14.string().nullable().optional()
 });
-var sectionStylesOverrideSchema = z12.object({
+var sectionStylesOverrideSchema = z14.object({
   background: boxBackgroundSchema.nullable().optional(),
   spacing: semanticSpacingSchema.nullable().optional(),
-  minHeight: z12.enum(["none", "hero", "immersive"]).nullable().optional()
+  minHeight: z14.enum(["none", "hero", "immersive"]).nullable().optional()
 });
-var containerStylesOverrideSchema = z12.object({
+var containerStylesOverrideSchema = z14.object({
   background: boxBackgroundSchema.nullable().optional(),
   spacing: semanticSpacingSchema.nullable().optional(),
-  raised: z12.boolean().nullable().optional(),
+  raised: z14.boolean().nullable().optional(),
   rounded: boxRoundedSchema.nullable().optional(),
-  fullWidth: z12.boolean().nullable().optional()
+  fullWidth: z14.boolean().nullable().optional()
 });
-var cardBorderOverrideSchema = z12.object({
-  enabled: z12.boolean().nullable().optional(),
-  width: z12.enum(["none", "1", "2", "3"]).nullable().optional(),
-  colorToken: z12.string().nullable().optional()
+var cardBorderOverrideSchema = z14.object({
+  enabled: z14.boolean().nullable().optional(),
+  width: z14.enum(["none", "1", "2", "3"]).nullable().optional(),
+  colorToken: z14.string().nullable().optional()
 });
-var cardStylesOverrideSchema = z12.object({
+var cardStylesOverrideSchema = z14.object({
   background: boxBackgroundSchema.nullable().optional(),
   border: cardBorderOverrideSchema.nullable().optional(),
   spacing: semanticSpacingSchema.nullable().optional(),
-  raised: z12.boolean().nullable().optional(),
+  raised: z14.boolean().nullable().optional(),
   rounded: boxRoundedSchema.nullable().optional()
 });
-var blockStyleOverridesSchema = z12.object({
+var blockStyleOverridesSchema = z14.object({
   sectionStyles: sectionStylesOverrideSchema.nullable().optional(),
   containerStyles: containerStylesOverrideSchema.nullable().optional(),
   cardStyles: cardStylesOverrideSchema.nullable().optional()
 });
-var blockThemeOverrideSchema = z12.object({
-  typography: z12.object({
+var blockThemeOverrideSchema = z14.object({
+  typography: z14.object({
     proseLinkStyle: proseLinkStyleSchema.optional()
   }).optional(),
   styles: blockStyleOverridesSchema.optional()
 });
-var typographyScaleSchema = z12.enum([
+var typographyScaleSchema = z14.enum([
   // New intuitive names
   "compact",
   // ratio 1.2 (was minorThird)
@@ -1005,9 +1600,9 @@ var typographyScaleSchema = z12.enum([
   "majorThird",
   "perfectFourth"
 ]);
-var typographySchema = z12.object({
+var typographySchema = z14.object({
   body: bodyTypographyStyleSchema,
-  headings: z12.object({
+  headings: z14.object({
     default: headingTypographyStyleSchema,
     h1: headingTypographyOverridesSchema,
     h2: headingTypographyOverridesSchema,
@@ -1020,41 +1615,41 @@ var typographySchema = z12.object({
   scale: typographyScaleSchema,
   proseLinkStyle: proseLinkStyleSchema.optional()
 });
-var spaceSchema = z12.enum(["comfortable", "standard", "dense"]);
-var corners = z12.enum(["square", "soft", "rounded", "pill"]);
-var shadow = z12.object({
-  elevation: z12.enum(["none", "low", "medium", "high"]),
-  softness: z12.enum(["crisp", "soft", "hard"]).nullable(),
-  position: z12.enum(["bottom", "bottom-right"]).default("bottom")
+var spaceSchema = z14.enum(["comfortable", "standard", "dense"]);
+var corners = z14.enum(["square", "soft", "rounded", "pill"]);
+var shadow = z14.object({
+  elevation: z14.enum(["none", "low", "medium", "high"]),
+  softness: z14.enum(["crisp", "soft", "hard"]).nullable(),
+  position: z14.enum(["bottom", "bottom-right"]).default("bottom")
 });
-var border = z12.object({
-  width: z12.enum(["none", "hairline", "thin", "thick"]),
-  style: z12.enum(["solid", "dashed"])
+var border = z14.object({
+  width: z14.enum(["none", "hairline", "thin", "thick"]),
+  style: z14.enum(["solid", "dashed"])
 });
-var motion = z12.object({
-  level: z12.enum(["off", "low", "medium", "high"]),
-  easing: z12.enum(["standard", "snappy", "gentle"]).nullable()
+var motion = z14.object({
+  level: z14.enum(["off", "low", "medium", "high"]),
+  easing: z14.enum(["standard", "snappy", "gentle"]).nullable()
 });
-var buttonStyle = z12.object({
+var buttonStyle = z14.object({
   shape: corners
   // Used for --radius-control CSS variable
 });
-var cardStyle = z12.object({
-  elevation: z12.enum(["none", "low", "medium", "high"]),
-  border: z12.enum(["none", "subtle", "defined"]),
+var cardStyle = z14.object({
+  elevation: z14.enum(["none", "low", "medium", "high"]),
+  border: z14.enum(["none", "subtle", "defined"]),
   shape: corners,
-  headerStyle: z12.enum(["plain", "accentBar", "subtleBg"]).nullable(),
-  mediaTreatment: z12.enum(["square", "rounded", "bleed"]).nullable()
+  headerStyle: z14.enum(["plain", "accentBar", "subtleBg"]).nullable(),
+  mediaTreatment: z14.enum(["square", "rounded", "bleed"]).nullable()
 });
-var inputStyle = z12.object({
+var inputStyle = z14.object({
   shape: corners,
-  border: z12.enum(["subtle", "defined", "underline"]),
-  focus: z12.enum(["glow", "ring", "underline"]),
-  label: z12.enum(["inside", "above"])
+  border: z14.enum(["subtle", "defined", "underline"]),
+  focus: z14.enum(["glow", "ring", "underline"]),
+  label: z14.enum(["inside", "above"])
 });
-var headerVariant = z12.enum(["classic", "centered", "transparent", "floating", "editorial"]);
-var headerPositioning = z12.enum(["static", "sticky", "fixed"]);
-var headerNavStyle = z12.enum([
+var headerVariant = z14.enum(["classic", "centered", "transparent", "floating", "editorial"]);
+var headerPositioning = z14.enum(["static", "sticky", "fixed"]);
+var headerNavStyle = z14.enum([
   "minimal",
   "underline",
   "underline-grow",
@@ -1063,82 +1658,82 @@ var headerNavStyle = z12.enum([
   "frosted",
   "solid"
 ]);
-var navFontWeight = z12.enum(["regular", "medium", "semibold", "bold"]);
-var headerMaxWidth = z12.enum(["container", "full"]);
-var headerContainerSchema = z12.object({
-  rounded: z12.enum(["none", "sm", "md", "lg", "xl", "2xl"]).default("xl"),
-  border: z12.boolean().default(true),
-  shadow: z12.boolean().default(true),
-  padding: z12.enum(["sm", "md", "lg"]).default("md"),
-  tint: z12.string().nullable().optional(),
-  opacity: z12.number().min(0).max(1).default(0.12)
+var navFontWeight = z14.enum(["regular", "medium", "semibold", "bold"]);
+var headerMaxWidth = z14.enum(["container", "full"]);
+var headerContainerSchema = z14.object({
+  rounded: z14.enum(["none", "sm", "md", "lg", "xl", "2xl"]).default("xl"),
+  border: z14.boolean().default(true),
+  shadow: z14.boolean().default(true),
+  padding: z14.enum(["sm", "md", "lg"]).default("md"),
+  tint: z14.string().nullable().optional(),
+  opacity: z14.number().min(0).max(1).default(0.12)
 }).optional();
 var headerBorderSchema = componentBorderSchema.extend({
-  position: z12.enum(["bottom", "top", "both", "none"]).default("bottom")
+  position: z14.enum(["bottom", "top", "both", "none"]).default("bottom")
 }).optional();
-var logoStyleSchema = z12.object({
-  fontFamily: z12.enum(["heading", "body"]).default("heading"),
-  letterSpacing: z12.enum(["normal", "wide", "wider", "widest"]).default("normal"),
-  gradient: z12.boolean().default(false)
+var logoStyleSchema = z14.object({
+  fontFamily: z14.enum(["heading", "body"]).default("heading"),
+  letterSpacing: z14.enum(["normal", "wide", "wider", "widest"]).default("normal"),
+  gradient: z14.boolean().default(false)
 }).optional();
-var headerLogoTextSchema = z12.object({
-  mobileWrapLines: z12.union([z12.literal(1), z12.literal(2)]).optional(),
-  mobileMaxWidth: z12.enum(["xs", "sm", "md"]).optional(),
-  hideOnShrink: z12.boolean().optional()
+var headerLogoTextSchema = z14.object({
+  mobileWrapLines: z14.union([z14.literal(1), z14.literal(2)]).optional(),
+  mobileMaxWidth: z14.enum(["xs", "sm", "md"]).optional(),
+  hideOnShrink: z14.boolean().optional()
 }).optional();
-var navEffectsSchema = z12.object({
-  underlineGradient: z12.boolean().default(false),
-  glow: z12.boolean().default(false),
-  glowColor: z12.string().optional(),
-  neumorphic: z12.boolean().default(false)
+var navEffectsSchema = z14.object({
+  underlineGradient: z14.boolean().default(false),
+  glow: z14.boolean().default(false),
+  glowColor: z14.string().optional(),
+  neumorphic: z14.boolean().default(false)
 }).optional();
-var dropdownStyleSchema = z12.object({
+var dropdownStyleSchema = z14.object({
   // Container styling
-  background: z12.string().default("surface"),
+  background: z14.string().default("surface"),
   // color token
-  textColor: z12.string().default("text"),
+  textColor: z14.string().default("text"),
   // color token
-  borderColor: z12.string().nullable().default("border"),
+  borderColor: z14.string().nullable().default("border"),
   // null = no border
-  shadow: z12.enum(["none", "sm", "md", "lg"]).default("md"),
-  borderRadius: z12.enum(["none", "sm", "md", "lg"]).default("md"),
+  shadow: z14.enum(["none", "sm", "md", "lg"]).default("md"),
+  borderRadius: z14.enum(["none", "sm", "md", "lg"]).default("md"),
   // Link hover states (explicit control)
-  hoverBackground: z12.string().nullable().optional(),
+  hoverBackground: z14.string().nullable().optional(),
   // color token, null = transparent
-  hoverTextColor: z12.string().nullable().optional(),
+  hoverTextColor: z14.string().nullable().optional(),
   // color token, null = inherit
   // Typography
-  textTransform: z12.enum(["none", "uppercase", "capitalize"]).default("none"),
-  letterSpacing: z12.enum(["normal", "wide", "wider"]).default("normal"),
-  fontWeight: z12.enum(["regular", "medium", "semibold", "bold"]).optional(),
+  textTransform: z14.enum(["none", "uppercase", "capitalize"]).default("none"),
+  letterSpacing: z14.enum(["normal", "wide", "wider"]).default("normal"),
+  fontWeight: z14.enum(["regular", "medium", "semibold", "bold"]).optional(),
   // optional = inherit from navWeight
-  textSize: z12.enum(["xs", "sm", "base", "lg"]).optional()
+  textSize: z14.enum(["xs", "sm", "base", "lg"]).optional()
   // optional = no override (browser default)
 }).optional();
-var headerCtaGapSchema = z12.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
-var navContainerSchema = z12.object({
-  type: z12.enum(["none", "pill", "glass"]).default("none"),
-  tint: z12.string().nullable().optional(),
-  opacity: z12.number().min(0).max(1).default(0.15)
+var headerCtaGapSchema = z14.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
+var navContainerSchema = z14.object({
+  type: z14.enum(["none", "pill", "glass"]).default("none"),
+  tint: z14.string().nullable().optional(),
+  opacity: z14.number().min(0).max(1).default(0.15)
 }).default({ type: "none", tint: null, opacity: 0.15 });
-var headerBackgroundSchema = z12.object({
-  type: z12.enum(["color", "gradient", "image"]),
-  color: z12.string().nullable().optional(),
+var headerBackgroundSchema = z14.object({
+  type: z14.enum(["color", "gradient", "image"]),
+  color: z14.string().nullable().optional(),
   gradient: gradientConfigSchema.nullable().optional(),
   image: mediaSchema.nullable().optional(),
-  textColor: z12.string().nullable().optional()
+  textColor: z14.string().nullable().optional()
 });
-var headerSchema = z12.object({
+var headerSchema = z14.object({
   variant: headerVariant,
   positioning: headerPositioning,
-  shrinkOnScroll: z12.boolean(),
+  shrinkOnScroll: z14.boolean(),
   maxWidth: headerMaxWidth,
   logoOverride: mediaSchema.nullable().optional(),
   background: headerBackgroundSchema.default({ type: "color", color: "surface" }),
-  textColor: z12.string().nullable().optional(),
+  textColor: z14.string().nullable().optional(),
   // Site title and general header text
   navStyle: headerNavStyle,
-  navColor: z12.string().nullable().optional(),
+  navColor: z14.string().nullable().optional(),
   // Nav links (inherits textColor if not set)
   navWeight: navFontWeight.default("medium"),
   // New fields for header system enhancement
@@ -1157,50 +1752,50 @@ var headerSchema = z12.object({
   // Dropdown menu styling (nav dropdowns and mobile drawer)
   dropdownStyle: dropdownStyleSchema
 });
-var footerVariant = z12.enum(["simple", "columns", "split"]);
-var footerMaxWidth = z12.enum(["container", "full"]);
-var footerMode = z12.enum(["default", "blocks", "default+blocks", "none"]);
-var footerNavLayoutMode = z12.enum(["stack", "inline", "inline-wrap"]);
-var footerNavLayoutAlign = z12.enum(["start", "center", "end", "space-between"]);
-var footerSpacing = z12.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
-var footerLogoPlacement = z12.enum(["left", "right", "above", "below"]);
-var footerLogoSize = z12.enum(["sm", "md", "lg", "xl"]);
-var footerLogoMaxHeight = z12.enum(["sm", "md", "lg", "xl"]);
-var footerBottomTextLinkStyleSchema = z12.object({
-  colorToken: z12.string().optional(),
-  hoverColorToken: z12.string().nullable().optional(),
-  decorationColorToken: z12.string().nullable().optional(),
-  underline: z12.boolean().optional()
+var footerVariant = z14.enum(["simple", "columns", "split"]);
+var footerMaxWidth = z14.enum(["container", "full"]);
+var footerMode = z14.enum(["default", "blocks", "default+blocks", "none"]);
+var footerNavLayoutMode = z14.enum(["stack", "inline", "inline-wrap"]);
+var footerNavLayoutAlign = z14.enum(["start", "center", "end", "space-between"]);
+var footerSpacing = z14.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
+var footerLogoPlacement = z14.enum(["left", "right", "above", "below"]);
+var footerLogoSize = z14.enum(["sm", "md", "lg", "xl"]);
+var footerLogoMaxHeight = z14.enum(["sm", "md", "lg", "xl"]);
+var footerBottomTextLinkStyleSchema = z14.object({
+  colorToken: z14.string().optional(),
+  hoverColorToken: z14.string().nullable().optional(),
+  decorationColorToken: z14.string().nullable().optional(),
+  underline: z14.boolean().optional()
 });
-var footerBottomBarSchema = z12.object({
-  enabled: z12.boolean().optional(),
-  fullBleed: z12.boolean().optional(),
+var footerBottomBarSchema = z14.object({
+  enabled: z14.boolean().optional(),
+  fullBleed: z14.boolean().optional(),
   background: headerBackgroundSchema.optional(),
-  textColor: z12.string().nullable().optional(),
-  textAlign: z12.enum(["left", "center", "right"]).optional(),
+  textColor: z14.string().nullable().optional(),
+  textAlign: z14.enum(["left", "center", "right"]).optional(),
   paddingY: footerSpacing.optional(),
   paddingX: footerSpacing.optional(),
-  borderTop: z12.object({
-    colorToken: z12.string().nullable().optional(),
-    width: z12.enum(["none", "thin", "medium", "thick"]).optional()
+  borderTop: z14.object({
+    colorToken: z14.string().nullable().optional(),
+    width: z14.enum(["none", "thin", "medium", "thick"]).optional()
   }).optional()
 });
-var footerNavLayoutSchema = z12.object({
+var footerNavLayoutSchema = z14.object({
   layout: footerNavLayoutMode.optional(),
   align: footerNavLayoutAlign.optional(),
   gapX: footerSpacing.optional(),
   gapY: footerSpacing.optional(),
-  columns: z12.number().int().min(1).max(6).optional()
+  columns: z14.number().int().min(1).max(6).optional()
 });
-var footerLogoSchema = z12.object({
-  showLogo: z12.boolean().default(true),
-  showLogoText: z12.boolean().optional(),
+var footerLogoSchema = z14.object({
+  showLogo: z14.boolean().default(true),
+  showLogoText: z14.boolean().optional(),
   placement: footerLogoPlacement.optional(),
   size: footerLogoSize.optional(),
   maxHeight: footerLogoMaxHeight.optional(),
-  align: z12.enum(["start", "center", "end"]).optional()
+  align: z14.enum(["start", "center", "end"]).optional()
 });
-var footerSchema = z12.object({
+var footerSchema = z14.object({
   /**
    * SDK-only footer rendering mode.
    *
@@ -1209,11 +1804,11 @@ var footerSchema = z12.object({
   mode: footerMode.optional(),
   variant: footerVariant,
   maxWidth: footerMaxWidth,
-  showLogoText: z12.boolean().optional(),
+  showLogoText: z14.boolean().optional(),
   background: headerBackgroundSchema.default({ type: "color", color: "surface" }),
   // Footer nav styling (independent from header)
   navStyle: headerNavStyle.default("minimal"),
-  navColor: z12.string().nullable().optional(),
+  navColor: z14.string().nullable().optional(),
   navWeight: navFontWeight.default("medium"),
   // Full nav link customization (overrides navStyle if set)
   navLinkStyle: navLinkStyleSchema.optional(),
@@ -1224,15 +1819,15 @@ var footerSchema = z12.object({
   logo: footerLogoSchema.optional(),
   bottomBar: footerBottomBarSchema.optional()
 });
-var containerPaddingPresetSchema = z12.enum(["tight", "compact", "default", "relaxed"]);
-var layoutSchema = z12.object({
-  containerPadding: z12.object({
+var containerPaddingPresetSchema = z14.enum(["tight", "compact", "default", "relaxed"]);
+var layoutSchema = z14.object({
+  containerPadding: z14.object({
     mobile: containerPaddingPresetSchema.optional(),
     tablet: containerPaddingPresetSchema.optional(),
     desktop: containerPaddingPresetSchema.optional()
   }).optional()
 }).optional();
-var heroTypographySizeSchema = z12.enum([
+var heroTypographySizeSchema = z14.enum([
   "sm",
   "base",
   "lg",
@@ -1243,14 +1838,14 @@ var heroTypographySizeSchema = z12.enum([
   "5xl",
   "6xl"
 ]);
-var heroTypographyLineHeightSchema = z12.enum(["tight", "snug", "normal", "relaxed"]);
-var heroResponsiveTypographySchema = z12.object({
+var heroTypographyLineHeightSchema = z14.enum(["tight", "snug", "normal", "relaxed"]);
+var heroResponsiveTypographySchema = z14.object({
   headlineSize: heroTypographySizeSchema.optional(),
   headlineLineHeight: heroTypographyLineHeightSchema.optional(),
   subheadlineSize: heroTypographySizeSchema.optional(),
   subheadlineLineHeight: heroTypographyLineHeightSchema.optional()
 });
-var heroTypographySchema = z12.object({
+var heroTypographySchema = z14.object({
   headlineSize: heroTypographySizeSchema.optional(),
   headlineLineHeight: heroTypographyLineHeightSchema.optional(),
   subheadlineSize: heroTypographySizeSchema.optional(),
@@ -1259,24 +1854,24 @@ var heroTypographySchema = z12.object({
   microHeadlineLineHeight: heroTypographyLineHeightSchema.optional(),
   microSubheadlineSize: heroTypographySizeSchema.optional(),
   microSubheadlineLineHeight: heroTypographyLineHeightSchema.optional(),
-  responsive: z12.object({
+  responsive: z14.object({
     tablet: heroResponsiveTypographySchema.optional(),
     mobile: heroResponsiveTypographySchema.optional()
   }).optional()
 });
-var heroSchema = z12.object({
+var heroSchema = z14.object({
   typography: heroTypographySchema.optional()
 }).optional();
-var gradientsSchema = z12.object({
-  button: z12.string().min(1).nullable().optional(),
-  hero: z12.string().min(1).nullable().optional(),
-  background: z12.string().min(1).nullable().optional()
+var gradientsSchema = z14.object({
+  button: z14.string().min(1).nullable().optional(),
+  hero: z14.string().min(1).nullable().optional(),
+  background: z14.string().min(1).nullable().optional()
 });
-var themeSchema = z12.object({
-  name: z12.string().min(1).max(30),
-  description: z12.string().min(1).max(400),
-  rationale: z12.string().min(1).max(400),
-  siteStyleId: z12.string().min(1).transform((value) => asSiteStyleId(value)).optional(),
+var themeSchema = z14.object({
+  name: z14.string().min(1).max(30),
+  description: z14.string().min(1).max(400),
+  rationale: z14.string().min(1).max(400),
+  siteStyleId: z14.string().min(1).transform((value) => asSiteStyleId(value)).optional(),
   axes: axesSchema,
   palette: paletteSchema,
   typography: typographySchema,
@@ -1303,16 +1898,16 @@ var themeSchema = z12.object({
   // Block-specific customization (Tier 3)
   // blockCustomVars: Per-block CSS variable overrides as bare values
   // Example: { "event-registration": { "--step-color": "#6d28d9" } }
-  blockCustomVars: z12.record(
-    z12.string(),
+  blockCustomVars: z14.record(
+    z14.string(),
     // block kind (matches data-block attribute)
-    z12.record(z12.string(), z12.string())
+    z14.record(z14.string(), z14.string())
     // { '--var-name': 'value' }
   ).optional(),
   // Structured block-kind theme overrides (v1: typography prose-link style only)
   // Keyed by block kind (usually data-block value like "hero"; "block.hero" also accepted)
-  blockOverrides: z12.record(
-    z12.string(),
+  blockOverrides: z14.record(
+    z14.string(),
     blockThemeOverrideSchema
   ).optional(),
   // Structured custom CSS rules
@@ -1348,13 +1943,372 @@ var themeSchema = z12.object({
    * }
    * ```
    */
-  styleGroups: z12.record(z12.string(), z12.array(z12.string())).optional()
+  styleGroups: z14.record(z14.string(), z14.array(z14.string())).optional()
+});
+var themesTurnSchema = z14.object({
+  message: z14.string().min(1),
+  themes: z14.array(themeSchema).length(3)
+});
+
+// ../theme-core/src/palette/variants/types.ts
+import { z as z15 } from "zod";
+function asPaletteVariantId(value) {
+  if (value.length === 0) {
+    throw new Error("PaletteVariantId must be a non-empty string");
+  }
+  return value;
+}
+var paletteVariantIdSchema = z15.string().min(1).transform((value) => asPaletteVariantId(value));
+var PALETTE_TOKEN_NAMES = [
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "accent",
+  "success",
+  "warning",
+  "destructive",
+  "background",
+  "surface",
+  "surfaceAlt",
+  "muted",
+  "text",
+  "border"
+];
+var paletteTokenNameSchema = z15.enum(PALETTE_TOKEN_NAMES);
+var HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
+var hexColorSchema = z15.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
+var variantPaletteColorSchema = paletteColorSchema.extend({
+  name: paletteTokenNameSchema
+});
+var paletteVariantSchema = z15.object({
+  id: paletteVariantIdSchema,
+  name: z15.string().min(1),
+  description: z15.string().min(1),
+  tags: styleTagsSchema,
+  mode: z15.enum(["light", "dark"]),
+  colors: z15.array(variantPaletteColorSchema).min(1)
+});
+function definePaletteVariant(input) {
+  return {
+    id: asPaletteVariantId(input.id),
+    name: input.name,
+    description: input.description,
+    tags: input.tags,
+    mode: input.mode,
+    colors: input.colors
+  };
+}
+var paletteOverridesSchema = z15.object({
+  primary: hexColorSchema.optional(),
+  primaryForeground: hexColorSchema.optional(),
+  secondary: hexColorSchema.optional(),
+  accent: hexColorSchema.optional(),
+  success: hexColorSchema.optional(),
+  warning: hexColorSchema.optional(),
+  destructive: hexColorSchema.optional(),
+  background: hexColorSchema.optional(),
+  surface: hexColorSchema.optional(),
+  surfaceAlt: hexColorSchema.optional(),
+  muted: hexColorSchema.optional(),
+  text: hexColorSchema.optional(),
+  border: hexColorSchema.optional()
+}).strict().transform((value) => value);
+
+// ../theme-core/src/palette/variants/brand-led.ts
+var brandLedCool = definePaletteVariant({
+  id: "brand-led-cool",
+  name: "Brand-led \u2014 Cool",
+  description: "Confident blue primary with slate neutrals.",
+  tags: { tone: "classic", energy: "calm", era: "modern" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#2563eb" },
+    { name: "secondary", hex: "#64748b" },
+    { name: "accent", hex: "#0f766e" },
+    { name: "success", hex: "#16a34a" },
+    { name: "warning", hex: "#d97706" },
+    { name: "destructive", hex: "#dc2626" },
+    { name: "background", hex: "#ffffff" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f8fafc" },
+    { name: "muted", hex: "#f1f5f9" },
+    { name: "text", hex: "#0f172a" },
+    { name: "primaryForeground", hex: "#ffffff" },
+    { name: "border", hex: "#cbd5e1" }
+  ]
 });
-var themesTurnSchema = z12.object({
-  message: z12.string().min(1),
-  themes: z12.array(themeSchema).length(3)
+var brandLedWarm = definePaletteVariant({
+  id: "brand-led-warm",
+  name: "Brand-led \u2014 Warm",
+  description: "Sunset orange primary with warm grey neutrals.",
+  tags: { tone: "classic", energy: "vibrant", era: "modern" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#ea580c" },
+    { name: "secondary", hex: "#78716c" },
+    { name: "accent", hex: "#a16207" },
+    { name: "success", hex: "#16a34a" },
+    { name: "warning", hex: "#d97706" },
+    { name: "destructive", hex: "#b91c1c" },
+    { name: "background", hex: "#fffaf3" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#fbeee0" },
+    { name: "muted", hex: "#f4e2cd" },
+    { name: "text", hex: "#1c1917" },
+    { name: "primaryForeground", hex: "#fffaf3" },
+    { name: "border", hex: "#d6c4ad" }
+  ]
+});
+var brandLedJewel = definePaletteVariant({
+  id: "brand-led-jewel",
+  name: "Brand-led \u2014 Jewel",
+  description: "Deep emerald primary with rich neutrals.",
+  tags: { tone: "bold", energy: "vibrant", era: "modern" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#047857" },
+    { name: "secondary", hex: "#4b5563" },
+    { name: "accent", hex: "#7c3aed" },
+    { name: "success", hex: "#15803d" },
+    { name: "warning", hex: "#b45309" },
+    { name: "destructive", hex: "#b91c1c" },
+    { name: "background", hex: "#ffffff" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f5f5f4" },
+    { name: "muted", hex: "#e7e5e4" },
+    { name: "text", hex: "#0c0a09" },
+    { name: "primaryForeground", hex: "#ffffff" },
+    { name: "border", hex: "#a8a29e" }
+  ]
 });
 
+// ../theme-core/src/palette/variants/high-contrast.ts
+var highContrastInk = definePaletteVariant({
+  id: "high-contrast-ink",
+  name: "High Contrast \u2014 Ink",
+  description: "Near-black primary with cool greys.",
+  tags: { tone: "bold", energy: "calm", era: "editorial" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#111827" },
+    { name: "secondary", hex: "#374151" },
+    { name: "accent", hex: "#1d4ed8" },
+    { name: "success", hex: "#047857" },
+    { name: "warning", hex: "#b45309" },
+    { name: "destructive", hex: "#b91c1c" },
+    { name: "background", hex: "#ffffff" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f3f4f6" },
+    { name: "muted", hex: "#e5e7eb" },
+    { name: "text", hex: "#030712" },
+    { name: "primaryForeground", hex: "#ffffff" },
+    { name: "border", hex: "#6b7280" }
+  ]
+});
+var highContrastCharcoal = definePaletteVariant({
+  id: "high-contrast-charcoal",
+  name: "High Contrast \u2014 Charcoal",
+  description: "Warm charcoal primary on a soft cream ground.",
+  tags: { tone: "minimal", energy: "calm", era: "editorial" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#1f2937" },
+    { name: "secondary", hex: "#52525b" },
+    { name: "accent", hex: "#a16207" },
+    { name: "success", hex: "#15803d" },
+    { name: "warning", hex: "#b45309" },
+    { name: "destructive", hex: "#991b1b" },
+    { name: "background", hex: "#fafaf9" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f5f5f4" },
+    { name: "muted", hex: "#e7e5e4" },
+    { name: "text", hex: "#0c0a09" },
+    { name: "primaryForeground", hex: "#fafaf9" },
+    { name: "border", hex: "#a8a29e" }
+  ]
+});
+var highContrastMonochrome = definePaletteVariant({
+  id: "high-contrast-monochrome",
+  name: "High Contrast \u2014 Monochrome",
+  description: "Pure black-on-white with a single saturated accent.",
+  tags: { tone: "bold", energy: "vibrant", era: "editorial" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#000000" },
+    { name: "secondary", hex: "#404040" },
+    { name: "accent", hex: "#dc2626" },
+    { name: "success", hex: "#000000" },
+    { name: "warning", hex: "#000000" },
+    { name: "destructive", hex: "#dc2626" },
+    { name: "background", hex: "#ffffff" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f5f5f5" },
+    { name: "muted", hex: "#e5e5e5" },
+    { name: "text", hex: "#000000" },
+    { name: "primaryForeground", hex: "#ffffff" },
+    { name: "border", hex: "#525252" }
+  ]
+});
+
+// ../theme-core/src/palette/variants/soft-natural.ts
+var softNaturalSage = definePaletteVariant({
+  id: "soft-natural-sage",
+  name: "Soft Natural \u2014 Sage",
+  description: "Olive sage primary on an off-white ground.",
+  tags: { tone: "classic", energy: "calm", era: "organic" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#3f6212" },
+    { name: "secondary", hex: "#6b7280" },
+    { name: "accent", hex: "#0f766e" },
+    { name: "success", hex: "#15803d" },
+    { name: "warning", hex: "#a16207" },
+    { name: "destructive", hex: "#b91c1c" },
+    { name: "background", hex: "#fbfdf7" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#eef5e8" },
+    { name: "muted", hex: "#e7efdf" },
+    { name: "text", hex: "#1f2a1d" },
+    { name: "primaryForeground", hex: "#ffffff" },
+    { name: "border", hex: "#cbd8c0" }
+  ]
+});
+var softNaturalStone = definePaletteVariant({
+  id: "soft-natural-stone",
+  name: "Soft Natural \u2014 Stone",
+  description: "River-stone grey-green primary with cool neutrals.",
+  tags: { tone: "minimal", energy: "calm", era: "organic" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#5a7a5d" },
+    { name: "secondary", hex: "#8a9a8c" },
+    { name: "accent", hex: "#c9b88f" },
+    { name: "success", hex: "#5a7a5d" },
+    { name: "warning", hex: "#a89466" },
+    { name: "destructive", hex: "#a3503e" },
+    { name: "background", hex: "#faf6ec" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f0ecdf" },
+    { name: "muted", hex: "#e6e1d0" },
+    { name: "text", hex: "#2f3d31" },
+    { name: "primaryForeground", hex: "#faf6ec" },
+    { name: "border", hex: "#c9c1ad" }
+  ]
+});
+var softNaturalWatercolor = definePaletteVariant({
+  id: "soft-natural-watercolor",
+  name: "Soft Natural \u2014 Watercolor",
+  description: "Soft sand primary with watercolour sage accents.",
+  tags: { tone: "classic", energy: "vibrant", era: "organic" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#a8825f" },
+    { name: "secondary", hex: "#88a888" },
+    { name: "accent", hex: "#c8a78e" },
+    { name: "success", hex: "#7d8a5f" },
+    { name: "warning", hex: "#c89a4d" },
+    { name: "destructive", hex: "#a3503e" },
+    { name: "background", hex: "#fefdfa" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f6f1e6" },
+    { name: "muted", hex: "#eee7d1" },
+    { name: "text", hex: "#4a3d30" },
+    { name: "primaryForeground", hex: "#fefdfa" },
+    { name: "border", hex: "#d8c9a8" }
+  ]
+});
+
+// ../theme-core/src/palette/variants/warm-neutral.ts
+var warmNeutralClay = definePaletteVariant({
+  id: "warm-neutral-clay",
+  name: "Warm Neutral \u2014 Clay",
+  description: "Terracotta primary on a cream ground.",
+  tags: { tone: "classic", energy: "calm", era: "organic" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#8b5e34" },
+    { name: "secondary", hex: "#7c6f64" },
+    { name: "accent", hex: "#a15c38" },
+    { name: "success", hex: "#527853" },
+    { name: "warning", hex: "#b7791f" },
+    { name: "destructive", hex: "#b91c1c" },
+    { name: "background", hex: "#fffaf3" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f5eadc" },
+    { name: "muted", hex: "#efe2d0" },
+    { name: "text", hex: "#2f241c" },
+    { name: "primaryForeground", hex: "#fffaf3" },
+    { name: "border", hex: "#d8c6b3" }
+  ]
+});
+var warmNeutralCream = definePaletteVariant({
+  id: "warm-neutral-cream",
+  name: "Warm Neutral \u2014 Cream",
+  description: "Soft sand primary with pale cream surfaces.",
+  tags: { tone: "minimal", energy: "calm", era: "organic" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#b08864" },
+    { name: "secondary", hex: "#9a8c7e" },
+    { name: "accent", hex: "#c2956a" },
+    { name: "success", hex: "#7d8a5f" },
+    { name: "warning", hex: "#c89a4d" },
+    { name: "destructive", hex: "#a3503e" },
+    { name: "background", hex: "#fdf8ee" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f4ebd9" },
+    { name: "muted", hex: "#ede3cf" },
+    { name: "text", hex: "#3b2f24" },
+    { name: "primaryForeground", hex: "#fdf8ee" },
+    { name: "border", hex: "#e0d2b8" }
+  ]
+});
+var warmNeutralForest = definePaletteVariant({
+  id: "warm-neutral-forest",
+  name: "Warm Neutral \u2014 Forest",
+  description: "Deep forest green primary with earthy neutrals.",
+  tags: { tone: "classic", energy: "calm", era: "organic" },
+  mode: "light",
+  colors: [
+    { name: "primary", hex: "#3d5840" },
+    { name: "secondary", hex: "#7a6f5d" },
+    { name: "accent", hex: "#b06b50" },
+    { name: "success", hex: "#5a7a5d" },
+    { name: "warning", hex: "#b7791f" },
+    { name: "destructive", hex: "#b91c1c" },
+    { name: "background", hex: "#fbf8f0" },
+    { name: "surface", hex: "#ffffff" },
+    { name: "surfaceAlt", hex: "#f2ecdb" },
+    { name: "muted", hex: "#ebe3cc" },
+    { name: "text", hex: "#2a2a2a" },
+    { name: "primaryForeground", hex: "#fbf8f0" },
+    { name: "border", hex: "#cdc1a4" }
+  ]
+});
+
+// ../theme-core/src/palette/variants/index.ts
+var paletteVariants = [
+  // Brand-led family
+  brandLedCool,
+  brandLedWarm,
+  brandLedJewel,
+  // Warm-neutral family
+  warmNeutralClay,
+  warmNeutralCream,
+  warmNeutralForest,
+  // High-contrast family
+  highContrastInk,
+  highContrastCharcoal,
+  highContrastMonochrome,
+  // Soft-natural family
+  softNaturalSage,
+  softNaturalStone,
+  softNaturalWatercolor
+];
+var paletteVariantsById = new Map(
+  paletteVariants.map((v) => [v.id, v])
+);
+
 // ../theme-core/src/tokens/blockColorTokens.ts
 var blockColorTokenNames = [
   "text",
@@ -2052,6 +3006,44 @@ function escapeStyleContent(css) {
 // ../theme-core/src/responsiveMode.ts
 var DEFAULT_THEME_RESPONSIVE_MODE = "viewport";
 var THEME_RESPONSIVE_CONTAINER_NAME = "rb-site";
+var THEME_RESPONSIVE_MODE_ATTR = "data-rb-responsive-mode";
+function getResponsiveScopeSpec(mode = DEFAULT_THEME_RESPONSIVE_MODE) {
+  if (mode === "container") {
+    return {
+      kind: "container",
+      selector: `[${THEME_RESPONSIVE_MODE_ATTR}="container"]`,
+      containerName: THEME_RESPONSIVE_CONTAINER_NAME
+    };
+  }
+  return {
+    kind: "viewport",
+    selector: `[${THEME_RESPONSIVE_MODE_ATTR}="viewport"]`
+  };
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var RESPONSIVE_SCOPE_RULE_PATTERN = new RegExp(
+  buildResponsiveScopeRulePatternSource(),
+  "g"
+);
+var RESPONSIVE_SCOPE_RULE_AT_PATTERN = new RegExp(
+  buildResponsiveScopeRulePatternSource(),
+  "y"
+);
+function buildResponsiveScopeRulePatternSource() {
+  return [
+    "@scope",
+    "\\(\\[",
+    escapeRegExp(THEME_RESPONSIVE_MODE_ATTR),
+    '="(?:viewport|container)"\\]\\)',
+    "to",
+    "\\((?::scope )?\\[",
+    escapeRegExp(THEME_RESPONSIVE_MODE_ATTR),
+    "\\]\\)",
+    "\\{"
+  ].join("\\s*");
+}
 
 // ../theme-core/src/mock-themes/components/swatch.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -3738,45 +4730,53 @@ var containerResponsiveThemeCss = `/*
     flex-basis: 16.666667%;
   }
   @container rb-site (min-width: 768px) {
-    .rb-md-basis-full {
-      flex-basis: 100%;
-    }
-    .rb-md-basis-1-2 {
-      flex-basis: 50%;
-    }
-    .rb-md-basis-1-3 {
-      flex-basis: 33.333333%;
-    }
-    .rb-md-basis-1-4 {
-      flex-basis: 25%;
-    }
-    .rb-md-basis-1-5 {
-      flex-basis: 20%;
-    }
-    .rb-md-basis-1-6 {
-      flex-basis: 16.666667%;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-basis-full {
+        flex-basis: 100%;
+      }
+      .rb-md-basis-1-2 {
+        flex-basis: 50%;
+      }
+      .rb-md-basis-1-3 {
+        flex-basis: 33.333333%;
+      }
+      .rb-md-basis-1-4 {
+        flex-basis: 25%;
+      }
+      .rb-md-basis-1-5 {
+        flex-basis: 20%;
+      }
+      .rb-md-basis-1-6 {
+        flex-basis: 16.666667%;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1024px) {
-    .rb-lg-basis-full {
-      flex-basis: 100%;
-    }
-    .rb-lg-basis-1-2 {
-      flex-basis: 50%;
-    }
-    .rb-lg-basis-1-3 {
-      flex-basis: 33.333333%;
-    }
-    .rb-lg-basis-1-4 {
-      flex-basis: 25%;
-    }
-    .rb-lg-basis-1-5 {
-      flex-basis: 20%;
-    }
-    .rb-lg-basis-1-6 {
-      flex-basis: 16.666667%;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-lg-basis-full {
+        flex-basis: 100%;
+      }
+      .rb-lg-basis-1-2 {
+        flex-basis: 50%;
+      }
+      .rb-lg-basis-1-3 {
+        flex-basis: 33.333333%;
+      }
+      .rb-lg-basis-1-4 {
+        flex-basis: 25%;
+      }
+      .rb-lg-basis-1-5 {
+        flex-basis: 20%;
+      }
+      .rb-lg-basis-1-6 {
+        flex-basis: 16.666667%;
+      }
     }
-  }
+
+}
   .rb-shrink-0 {
     flex-shrink: 0;
   }
@@ -3798,64 +4798,80 @@ var containerResponsiveThemeCss = `/*
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   @container rb-site (min-width: 640px) {
-    .rb-sm-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-sm-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-sm-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-sm-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-sm-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-sm-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 768px) {
-    .rb-md-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-md-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-md-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-md-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-md-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1024px) {
-    .rb-lg-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-lg-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-lg-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .rb-lg-w-3\\/4 {
-      width: 75%;
-    }
-    .rb-lg-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-    .rb-lg-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-    .rb-lg-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-    .rb-lg-col-span-4 {
-      grid-column: span 4 / span 4;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-lg-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-lg-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-lg-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      .rb-lg-w-3\\/4 {
+        width: 75%;
+      }
+      .rb-lg-col-span-1 {
+        grid-column: span 1 / span 1;
+      }
+      .rb-lg-col-span-2 {
+        grid-column: span 2 / span 2;
+      }
+      .rb-lg-col-span-3 {
+        grid-column: span 3 / span 3;
+      }
+      .rb-lg-col-span-4 {
+        grid-column: span 4 / span 4;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1280px) {
-    .rb-xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-xl-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-xl-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-xl-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
-  }
+
+}
 
   /* Alignment */
   .rb-items-start {
@@ -3924,13 +4940,17 @@ var containerResponsiveThemeCss = `/*
     row-gap: 0.75rem;
   }
   @container rb-site (min-width: 768px) {
-    .rb-md-gap-0 {
-      gap: 0;
-    }
-    .rb-md-gap-10 {
-      gap: 2.5rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-gap-0 {
+        gap: 0;
+      }
+      .rb-md-gap-10 {
+        gap: 2.5rem;
+      }
     }
-  }
+
+}
 
   .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {
     margin-top: 0.25rem;
@@ -4032,137 +5052,149 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-sm-py-16 {
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-    }
-    .rb-sm-py-20 {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-    }
-    .rb-sm-p-6 {
-      padding: 1.5rem;
-    }
-    .rb-sm-flex {
-      display: flex;
-    }
-    .rb-sm-block {
-      display: block;
-    }
-    .rb-sm-inline {
-      display: inline;
-    }
-    .rb-sm-inline-block {
-      display: inline-block;
-    }
-    .rb-sm-inline-flex {
-      display: inline-flex;
-    }
-    .rb-sm-grid {
-      display: grid;
-    }
-    .rb-sm-hidden {
-      display: none;
-    }
-    .rb-sm-flex-row {
-      flex-direction: row;
-    }
-    .rb-sm-items-start {
-      align-items: flex-start;
-    }
-    .rb-sm-items-center {
-      align-items: center;
-    }
-    .rb-sm-justify-between {
-      justify-content: space-between;
-    }
-    .rb-sm-p-8 {
-      padding: 2rem;
-    }
-    .rb-sm-text-lg {
-      font-size: 1.125rem;
-      line-height: 1.75rem;
-    }
-    .rb-sm-text-xl {
-      font-size: 1.25rem;
-      line-height: 1.75rem;
-    }
-    .rb-sm-text-4xl {
-      font-size: 2.25rem;
-      line-height: 2.5rem;
-    }
 
-    .rb-sm-w-auto {
-      width: auto;
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-sm-py-16 {
+        padding-top: 4rem;
+        padding-bottom: 4rem;
+      }
+      .rb-sm-py-20 {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+      }
+      .rb-sm-p-6 {
+        padding: 1.5rem;
+      }
+      .rb-sm-flex {
+        display: flex;
+      }
+      .rb-sm-block {
+        display: block;
+      }
+      .rb-sm-inline {
+        display: inline;
+      }
+      .rb-sm-inline-block {
+        display: inline-block;
+      }
+      .rb-sm-inline-flex {
+        display: inline-flex;
+      }
+      .rb-sm-grid {
+        display: grid;
+      }
+      .rb-sm-hidden {
+        display: none;
+      }
+      .rb-sm-flex-row {
+        flex-direction: row;
+      }
+      .rb-sm-items-start {
+        align-items: flex-start;
+      }
+      .rb-sm-items-center {
+        align-items: center;
+      }
+      .rb-sm-justify-between {
+        justify-content: space-between;
+      }
+      .rb-sm-p-8 {
+        padding: 2rem;
+      }
+      .rb-sm-text-lg {
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+      }
+      .rb-sm-text-xl {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+      .rb-sm-text-4xl {
+        font-size: 2.25rem;
+        line-height: 2.5rem;
+      }
+
+      .rb-sm-w-auto {
+        width: auto;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 768px) {
-    .rb-md-py-20 {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-    }
-    .rb-md-py-24 {
-      padding-top: 6rem;
-      padding-bottom: 6rem;
-    }
-    .rb-md-w-1\\/3 {
-      width: 33.333333%;
-    }
 
-    .rb-md-flex {
-      display: flex;
-    }
-    .rb-md-block {
-      display: block;
-    }
-    .rb-md-inline {
-      display: inline;
-    }
-    .rb-md-inline-block {
-      display: inline-block;
-    }
-    .rb-md-inline-flex {
-      display: inline-flex;
-    }
-    .rb-md-grid {
-      display: grid;
-    }
-    .rb-md-hidden {
-      display: none;
-    }
-    .rb-md-flex-row {
-      flex-direction: row;
-    }
-    .rb-md-flex-row-reverse {
-      flex-direction: row-reverse;
-    }
-    .rb-md-items-start {
-      align-items: flex-start;
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-py-20 {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+      }
+      .rb-md-py-24 {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+      }
+      .rb-md-w-1\\/3 {
+        width: 33.333333%;
+      }
+
+      .rb-md-flex {
+        display: flex;
+      }
+      .rb-md-block {
+        display: block;
+      }
+      .rb-md-inline {
+        display: inline;
+      }
+      .rb-md-inline-block {
+        display: inline-block;
+      }
+      .rb-md-inline-flex {
+        display: inline-flex;
+      }
+      .rb-md-grid {
+        display: grid;
+      }
+      .rb-md-hidden {
+        display: none;
+      }
+      .rb-md-flex-row {
+        flex-direction: row;
+      }
+      .rb-md-flex-row-reverse {
+        flex-direction: row-reverse;
+      }
+      .rb-md-items-start {
+        align-items: flex-start;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1024px) {
-    .rb-lg-flex {
-      display: flex;
-    }
-    .rb-lg-block {
-      display: block;
-    }
-    .rb-lg-inline {
-      display: inline;
-    }
-    .rb-lg-inline-block {
-      display: inline-block;
-    }
-    .rb-lg-inline-flex {
-      display: inline-flex;
-    }
-    .rb-lg-grid {
-      display: grid;
-    }
-    .rb-lg-hidden {
-      display: none;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-lg-flex {
+        display: flex;
+      }
+      .rb-lg-block {
+        display: block;
+      }
+      .rb-lg-inline {
+        display: inline;
+      }
+      .rb-lg-inline-block {
+        display: inline-block;
+      }
+      .rb-lg-inline-flex {
+        display: inline-flex;
+      }
+      .rb-lg-grid {
+        display: grid;
+      }
+      .rb-lg-hidden {
+        display: none;
+      }
     }
-  }
+
+}
 
   /* Margin */
   .rb-m-0 {
@@ -4419,8 +5451,9 @@ var containerResponsiveThemeCss = `/*
     font-weight: 700;
   }
   .rb-font-mono {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
   }
   .rb-leading-relaxed {
     line-height: 1.625;
@@ -4638,39 +5671,44 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (max-width: 639px) {
-    .rb-image-gallery-marquee {
-      overflow-x: auto;
-      overflow-y: hidden;
-      -webkit-overflow-scrolling: touch;
-      touch-action: pan-x;
-      scrollbar-width: none;
-    }
 
-    .rb-image-gallery-marquee::-webkit-scrollbar {
-      display: none;
-    }
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-image-gallery-marquee {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        touch-action: pan-x;
+        scrollbar-width: none;
+      }
 
-    /* Let users swipe smoothly without fighting autoplay while interacting. */
-    .rb-image-gallery-marquee:active .rb-animate-marquee,
-    .rb-image-gallery-marquee:focus-within .rb-animate-marquee {
-      animation-play-state: paused;
-    }
+      .rb-image-gallery-marquee::-webkit-scrollbar {
+        display: none;
+      }
 
-    .rb-container-full.rb-image-gallery-marquee-container {
-      padding-left: 0;
-      padding-right: 0;
-    }
+      /* Let users swipe smoothly without fighting autoplay while interacting. */
+      .rb-image-gallery-marquee:active .rb-animate-marquee,
+      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {
+        animation-play-state: paused;
+      }
 
-    /* Marquee variant: keep images in color on mobile for legibility. */
-    .rb-image-gallery-marquee-container .rb-filter-grayscale,
-    .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {
-      filter: none;
-    }
+      .rb-container-full.rb-image-gallery-marquee-container {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      /* Marquee variant: keep images in color on mobile for legibility. */
+      .rb-image-gallery-marquee-container .rb-filter-grayscale,
+      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {
+        filter: none;
+      }
 
-    .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal:hover {
-      filter: none;
+      .rb-image-gallery-marquee-container
+        .rb-filter-grayscale-hover-reveal:hover {
+        filter: none;
+      }
     }
-  }
+
+}
 
   @media (prefers-reduced-motion: reduce) {
     .rb-animate-marquee {
@@ -4775,12 +5813,16 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-container,
-    .rb-container-full {
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-container,
+      .rb-container-full {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
     }
-  }
+
+}
 
   /* Flex alignment */
   .rb-self-start {
@@ -4814,27 +5856,31 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-section-pad-compact {
-      padding-top: 2rem;
-      padding-bottom: 2rem;
-    }
-    .rb-section-pad-cozy {
-      padding-top: 3.5rem;
-      padding-bottom: 3.5rem;
-    }
-    .rb-section-pad-medium {
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-    }
-    .rb-section-pad-comfortable {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-    }
-    .rb-section-pad-spacious {
-      padding-top: 7rem;
-      padding-bottom: 7rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-section-pad-compact {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+      .rb-section-pad-cozy {
+        padding-top: 3.5rem;
+        padding-bottom: 3.5rem;
+      }
+      .rb-section-pad-medium {
+        padding-top: 4rem;
+        padding-bottom: 4rem;
+      }
+      .rb-section-pad-comfortable {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+      }
+      .rb-section-pad-spacious {
+        padding-top: 7rem;
+        padding-bottom: 7rem;
+      }
     }
-  }
+
+}
 
   .rb-container-pad-none {
     padding: 0;
@@ -4856,22 +5902,26 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-container-pad-compact {
-      padding: 1.5rem;
-    }
-    .rb-container-pad-cozy {
-      padding: 2rem;
-    }
-    .rb-container-pad-medium {
-      padding: 2rem;
-    }
-    .rb-container-pad-comfortable {
-      padding: 2.5rem;
-    }
-    .rb-container-pad-spacious {
-      padding: 3.5rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-container-pad-compact {
+        padding: 1.5rem;
+      }
+      .rb-container-pad-cozy {
+        padding: 2rem;
+      }
+      .rb-container-pad-medium {
+        padding: 2rem;
+      }
+      .rb-container-pad-comfortable {
+        padding: 2.5rem;
+      }
+      .rb-container-pad-spacious {
+        padding: 3.5rem;
+      }
     }
-  }
+
+}
 
   /* Semantic gap tokens (theme-aware via --space-mult) */
   .rb-gap-semantic-none {
@@ -4900,27 +5950,31 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 768px) {
-    .rb-gap-semantic-compact {
-      --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));
-      gap: calc(1.25rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-cozy {
-      --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));
-      gap: calc(2.25rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-medium {
-      --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));
-      gap: calc(3.5rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-comfortable {
-      --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));
-      gap: calc(5.75rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-spacious {
-      --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));
-      gap: calc(8.75rem * var(--space-mult, 1));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-gap-semantic-compact {
+        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));
+        gap: calc(1.25rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-cozy {
+        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));
+        gap: calc(2.25rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-medium {
+        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));
+        gap: calc(3.5rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-comfortable {
+        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));
+        gap: calc(5.75rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-spacious {
+        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));
+        gap: calc(8.75rem * var(--space-mult, 1));
+      }
     }
-  }
+
+}
 
   /* Backdrop blur helpers */
   .rb-backdrop-blur {
@@ -5274,11 +6328,13 @@ var containerResponsiveThemeCss = `/*
   line-height: var(--rb-prose-lg-line-height);
 }
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) .rb-prose-xl-sm {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-prose-xl-sm {
     font-size: var(--rb-prose-xl-sm-font-size);
     line-height: var(--rb-prose-xl-sm-line-height);
   }
 }
+}
 
 /* Neutral prose uses theme text color by default */
 :where(.theme-scope) .rb-prose-neutral {
@@ -5362,22 +6418,28 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) .rb-columns-equal-height {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-columns-equal-height {
     --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
   }
 }
+}
 
 @container rb-site (min-width: 1024px) {
-  :where(.theme-scope) .rb-columns-equal-height {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-columns-equal-height {
     --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
   }
 }
+}
 
 @container rb-site (min-width: 1280px) {
-  :where(.theme-scope) .rb-columns-equal-height {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-columns-equal-height {
     --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
   }
 }
+}
 
 :where(.theme-scope) .rb-columns-equal-height > * {
   height: var(--rb-columns-tile-h);
@@ -5999,7 +7061,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Mobile: reduce site title size (~30%) to keep header compact */
 @container rb-site (max-width: 767px) {
-  :where(.theme-scope) .header-logo-text {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .header-logo-text {
     font-size: 0.8rem;
     line-height: 1.25rem;
   }
@@ -6010,6 +7073,7 @@ var containerResponsiveThemeCss = `/*
     line-height: 1.25rem;
   }
 }
+}
 
 /* Centered/editorial variants use larger title */
 :where(.theme-scope) .header-variant-centered .header-logo-text,
@@ -6033,10 +7097,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (max-width: 767px) {
-  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
     font-size: 0.75rem;
   }
 }
+}
 
 /* =================================================================
    Accessibility: Reduced Motion
@@ -6480,10 +7546,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-row {
   display: flex;
@@ -6716,12 +7784,14 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-layout {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-layout {
     /* Desktop: main + sidebar */
     grid-template-columns: 1fr 300px;
     grid-template-areas: "main summary";
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-layout-main {
   grid-area: main;
@@ -6803,10 +7873,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
     display: inline;
   }
 }
+}
 
 /* Sticky order summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
@@ -6823,11 +7895,13 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
     position: sticky;
     top: 1rem;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-event {
   font-weight: 600;
@@ -6897,12 +7971,14 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card {
     grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
     column-gap: 1rem;
     align-items: start;
   }
 }
+}
 
 /* Shake animation for validation errors */
 @keyframes er-shake {
@@ -7047,7 +8123,8 @@ var containerResponsiveThemeCss = `/*
  * ============================================================================= */
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope)
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
     .event-card[data-orientation="horizontal"] {
     display: flex;
@@ -7098,6 +8175,7 @@ var containerResponsiveThemeCss = `/*
     text-align: right;
   }
 }
+}
 
 /* Keep token list in sync with \`EVENT_CATEGORY_BADGE_TOKENS\` in \`packages/blocks/src/system/constants/events.ts\`. */
 :where(.theme-scope)
@@ -7177,7 +8255,8 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
     grid-template-columns: 1fr 260px;
     grid-template-areas:
       "main sidebar"
@@ -7192,6 +8271,7 @@ var containerResponsiveThemeCss = `/*
       "footer";
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-main {
   grid-area: main;
@@ -8471,7 +9551,8 @@ var containerResponsiveThemeCss = `/*
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-time,
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-title,
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-teacher,
-:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-meta {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-meta,
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity {
   display: block;
   min-width: 0;
   overflow: hidden;
@@ -8497,6 +9578,17 @@ var containerResponsiveThemeCss = `/*
   opacity: 0.72;
 }
 
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity--full {
+  color: rgb(var(--tb-danger, 220 38 38));
+  opacity: 1;
+}
+
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-empty {
   margin: 0;
   padding: 1rem 0.5rem;
@@ -8513,7 +9605,8 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (max-width: 767px) {
-  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-selector {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-selector {
     display: flex;
   }
 
@@ -8543,6 +9636,7 @@ var containerResponsiveThemeCss = `/*
     padding-inline: 0.75rem;
   }
 }
+}
 
 /* -----------------------------------------------------------------------------
  * Event Calendar Modals
@@ -8681,7 +9775,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Responsive adjustments */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-container {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-container {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
     border-left: none;
@@ -8742,6 +9837,7 @@ var containerResponsiveThemeCss = `/*
     margin: 0 0.5rem;
   }
 }
+}
 
 /*
  * Shared: Tab bar (underline style)
@@ -9104,10 +10200,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
     grid-template-columns: 1fr 1fr;
   }
 }
+}
 
 /* Field wrapper */
 :where(.theme-scope) :where([data-block="form"]) .fb-field {
@@ -9188,10 +10286,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
     font-size: 1.25rem;
   }
 }
+}
 
 /* =============================================================================
  * Shared: Heading Group (used by CTA, single-button, etc.)
@@ -9405,16 +10505,19 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) .carousel-root {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .carousel-root {
     --rb-carousel-slides-to-show: var(
       --rb-carousel-slides-to-show-tablet,
       var(--rb-carousel-slides-to-show-mobile, 1)
     );
   }
 }
+}
 
 @container rb-site (min-width: 1024px) {
-  :where(.theme-scope) .carousel-root {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .carousel-root {
     --rb-carousel-slides-to-show: var(
       --rb-carousel-slides-to-show-desktop,
       var(
@@ -9424,6 +10527,7 @@ var containerResponsiveThemeCss = `/*
     );
   }
 }
+}
 
 /* Slides take exact percentage width with internal padding for gaps.
  * Padding is more reliable than margin (no collapsing, consistent on all slides). */
@@ -9697,10 +10801,12 @@ var containerResponsiveThemeCss = `/*
 
 /* Responsive grid */
 @container rb-site (max-width: 768px) {
-  :where(.theme-scope) .shop__products--grid {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .shop__products--grid {
     grid-template-columns: 1fr;
   }
 }
+}
 
 :where(.theme-scope) .shop__modal-product {
   font-size: 0.9375rem;
@@ -9802,11 +10908,13 @@ var containerResponsiveThemeCss = `/*
 
 /* Mobile: full-width CTA buttons inside cards */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) .shop__cta {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .shop__cta {
     align-self: stretch;
     width: 100%;
   }
 }
+}
 
 /* =============================================================================
  * Block: Customer Portal
@@ -10512,7 +11620,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Responsive: show everything without horizontal scrolling */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-only-mobile {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="customer-portal"]) .cp-only-mobile {
     display: flex;
   }
 
@@ -10552,6 +11661,7 @@ var containerResponsiveThemeCss = `/*
     align-self: stretch;
   }
 }
+}
 
 /* Placeholder (SSR) */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-placeholder {
@@ -10641,7 +11751,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Position arrows outside the carousel content area */
 @container rb-site (max-width: 639px) {
-  :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
     /* Move arrows closer to viewport edge than container edge on mobile. */
     left: calc(0.5rem - 1.5rem);
   }
@@ -10651,10 +11762,12 @@ var containerResponsiveThemeCss = `/*
     right: calc(0.5rem - 1.5rem);
   }
 }
+}
 
 /* Position arrows further out on larger breakpoints */
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
     left: calc(-1 * (var(--rb-testimonial-carousel-arrow-size) / 2 + var(--rb-testimonial-carousel-arrow-gap)));
   }
 
@@ -10662,6 +11775,7 @@ var containerResponsiveThemeCss = `/*
     right: calc(-1 * (var(--rb-testimonial-carousel-arrow-size) / 2 + var(--rb-testimonial-carousel-arrow-gap)));
   }
 }
+}
 
 /*
  * Event Details (runtime node)
@@ -10713,10 +11827,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) .rb-tiles-grid {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-tiles-grid {
     grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));
   }
 }
+}
 
 :where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {
   cursor: pointer;
@@ -10821,10 +11937,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout--with-sidebar {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout--with-sidebar {
     grid-template-columns: 1fr 280px;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__main {
   min-width: 0;
@@ -10835,10 +11953,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__sidebar {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__sidebar {
     display: block;
   }
 }
+}
 
 /* =============================================================================
  * Step Indicator
@@ -10889,10 +12009,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label {
     display: block;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label--active {
   color: var(--cr-on-surface);
@@ -11775,7 +12897,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Mobile fallback for inline variant */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) .newsletter-inline .newsletter-form-fields {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .newsletter-inline .newsletter-form-fields {
     flex-direction: column;
   }
 
@@ -11783,6 +12906,7 @@ var containerResponsiveThemeCss = `/*
     min-width: 100%;
   }
 }
+}
 
 /* =============================================================================
  * Success State
@@ -11820,12 +12944,14 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 1024px) {
-  :where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-width="lg-3-4-left"]) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-width="lg-3-4-left"]) {
     width: 75%;
     margin-left: 0;
     margin-right: auto;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="team-members"]) .rb-team-member-photo {
   display: block;
@@ -11900,7 +13026,8 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  /* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+/* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */
   :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-member-photo-col) {
     flex: 0 0 var(--rb-team-image-basis);
   }
@@ -11924,6 +13051,7 @@ var containerResponsiveThemeCss = `/*
     flex-direction: row-reverse;
   }
 }
+}
 
 /* Thumbnail padding (space around image inside the item) */
 :where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-pad="sm"] .rb-team-member-photo-wrap {
@@ -12126,18 +13254,19 @@ function ThemeScopeCore({
   children,
   className
 }) {
-  const isContainerResponsive = responsiveMode === "container";
+  const responsiveScope = getResponsiveScopeSpec(responsiveMode);
+  const isContainerResponsive = responsiveScope.kind === "container";
   const wrapperStyle = isContainerResponsive ? {
     ...cssVars,
     containerType: "inline-size",
-    containerName: THEME_RESPONSIVE_CONTAINER_NAME
+    containerName: responsiveScope.containerName
   } : cssVars;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: className ? `theme-scope ${className}` : "theme-scope",
       style: wrapperStyle,
-      "data-rb-responsive-mode": responsiveMode,
+      "data-rb-responsive-mode": responsiveScope.kind,
       ...dataAttrs,
       suppressHydrationWarning,
       children: [
@@ -12145,25 +13274,131 @@ function ThemeScopeCore({
           "style",
           {
             "data-container-responsive-overrides": true,
-            dangerouslySetInnerHTML: { __html: escapeStyleContent(containerResponsiveThemeCss) }
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(containerResponsiveThemeCss)
+            }
+          }
+        ),
+        layoutCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-layout-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(layoutCss) }
+          }
+        ),
+        buttonCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-button-effects": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(buttonCss) }
+          }
+        ),
+        headerCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-header-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(headerCss) }
+          }
+        ),
+        footerCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-footer-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(footerCss) }
+          }
+        ),
+        cardCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-card-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(cardCss) }
+          }
+        ),
+        accordionCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-accordion-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(accordionCss) }
+          }
+        ),
+        inputCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-input-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(inputCss) }
+          }
+        ),
+        statusCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-status-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(statusCss) }
+          }
+        ),
+        progressCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-progress-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(progressCss) }
+          }
+        ),
+        typographyCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-typography-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(typographyCss)
+            }
+          }
+        ),
+        eventCalendarCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-event-calendar-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(eventCalendarCss)
+            }
+          }
+        ),
+        blockVarsCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-block-vars-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(blockVarsCss) }
+          }
+        ),
+        blockCustomVarsCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-block-custom-vars-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(blockCustomVarsCss)
+            }
+          }
+        ),
+        blockCustomCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-block-custom-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(blockCustomCss)
+            }
+          }
+        ),
+        atRulesCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-at-rules-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(atRulesCss) }
+          }
+        ),
+        customCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-custom-theme-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(customCss) }
           }
         ),
-        layoutCss && /* @__PURE__ */ jsx3("style", { "data-layout-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(layoutCss) } }),
-        buttonCss && /* @__PURE__ */ jsx3("style", { "data-button-effects": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(buttonCss) } }),
-        headerCss && /* @__PURE__ */ jsx3("style", { "data-header-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(headerCss) } }),
-        footerCss && /* @__PURE__ */ jsx3("style", { "data-footer-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(footerCss) } }),
-        cardCss && /* @__PURE__ */ jsx3("style", { "data-card-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(cardCss) } }),
-        accordionCss && /* @__PURE__ */ jsx3("style", { "data-accordion-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(accordionCss) } }),
-        inputCss && /* @__PURE__ */ jsx3("style", { "data-input-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(inputCss) } }),
-        statusCss && /* @__PURE__ */ jsx3("style", { "data-status-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(statusCss) } }),
-        progressCss && /* @__PURE__ */ jsx3("style", { "data-progress-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(progressCss) } }),
-        typographyCss && /* @__PURE__ */ jsx3("style", { "data-typography-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(typographyCss) } }),
-        eventCalendarCss && /* @__PURE__ */ jsx3("style", { "data-event-calendar-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(eventCalendarCss) } }),
-        blockVarsCss && /* @__PURE__ */ jsx3("style", { "data-block-vars-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(blockVarsCss) } }),
-        blockCustomVarsCss && /* @__PURE__ */ jsx3("style", { "data-block-custom-vars-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(blockCustomVarsCss) } }),
-        blockCustomCss && /* @__PURE__ */ jsx3("style", { "data-block-custom-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(blockCustomCss) } }),
-        atRulesCss && /* @__PURE__ */ jsx3("style", { "data-at-rules-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(atRulesCss) } }),
-        customCss && /* @__PURE__ */ jsx3("style", { "data-custom-theme-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(customCss) } }),
         children
       ]
     }