@riverbankcms/sdk 0.109.0 → 0.118.0

package/dist/server/page-converter.mjs

@@ -2715,151 +2715,6 @@ z$1.discriminatedUnion("kind", [
 	})
 ]);
 //#endregion
-//#region ../theme-core/src/surfaces/foregroundContract.ts
-const SURFACE_FOREGROUND_CSS_VARS = {
-	text: "--rb-surface-text-color",
-	heading: "--rb-surface-heading-color",
-	link: "--rb-surface-link-color",
-	supporting: "--rb-surface-supporting-color"
-};
-const DEFAULT_SURFACE_TEXT_COLOR = "rgb(var(--tb-text, 17 24 39))";
-const DEFAULT_ROLE_FALLBACKS = {
-	text: DEFAULT_SURFACE_TEXT_COLOR,
-	heading: DEFAULT_SURFACE_TEXT_COLOR,
-	link: "rgb(var(--tb-primary, var(--tb-text, 17 24 39)))",
-	supporting: "rgb(var(--tb-mutedText, 100 116 139))"
-};
-function requireSurfaceColorValue(role, value) {
-	const normalized = value.trim();
-	if (normalized.length === 0) throw new RangeError(`Surface foreground ${role} must be a non-empty CSS color.`);
-	return normalized;
-}
-function completeSurfaceForegrounds(input) {
-	const text = requireSurfaceColorValue("text", input.text);
-	return {
-		text,
-		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
-		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
-		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
-	};
-}
-function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
-	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
-	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
-	if (role === "text") return `var(${roleVariable}, ${fallback})`;
-	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
-}
-function surfaceForegroundValueWithOpacity(role, opacityPercent) {
-	if (!Number.isFinite(opacityPercent) || opacityPercent < 0 || opacityPercent > 100) throw new RangeError("Surface foreground opacity must be between 0 and 100.");
-	return `color-mix(in srgb, ${surfaceForegroundValue(role)} ${opacityPercent}%, transparent)`;
-}
-function surfaceForegroundStyle(input) {
-	const foregrounds = completeSurfaceForegrounds(input);
-	return {
-		color: foregrounds.text,
-		[SURFACE_FOREGROUND_CSS_VARS.text]: foregrounds.text,
-		[SURFACE_FOREGROUND_CSS_VARS.heading]: foregrounds.heading,
-		[SURFACE_FOREGROUND_CSS_VARS.link]: foregrounds.link,
-		[SURFACE_FOREGROUND_CSS_VARS.supporting]: foregrounds.supporting
-	};
-}
-//#endregion
-//#region ../theme-core/src/utils/colorStyles.ts
-const COLOR_VAR_PREFIX = "--tb-";
-function parseToken(source) {
-	const parts = parseColorTokenParts(source);
-	if (parts.kind === "raw") return {
-		token: source,
-		raw: parts.value
-	};
-	if (parts.kind === "invalid") return { token: source };
-	return {
-		token: parts.token,
-		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
-	};
-}
-const SURFACE_TEXT_ROLE_BY_TOKEN = {
-	text: "text",
-	heading: "heading",
-	mutedText: "supporting"
-};
-function surfaceRoleForTextToken(token) {
-	return Object.prototype.hasOwnProperty.call(SURFACE_TEXT_ROLE_BY_TOKEN, token) ? SURFACE_TEXT_ROLE_BY_TOKEN[token] : null;
-}
-/**
-* Converts a theme color token to a CSS rgb value.
-* This is the primary function for applying theme colors to CSS properties.
-*
-* @param token - Theme color token (semantic, with opacity, or raw)
-* @returns CSS color value (rgb with optional alpha, or raw CSS value)
-*
-* @example
-* rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
-* rgbColorValue('surface/95') // => 'rgb(var(--tb-surface) / 0.95)'
-* rgbColorValue('raw:transparent') // => 'transparent'
-*/
-function rgbColorValue(token) {
-	const { token: baseToken, opacityPercent, raw } = parseToken(token);
-	if (raw) return raw;
-	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
-	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
-	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
-}
-/**
-* Creates a backgroundColor style object from a theme token.
-*
-* @param token - Theme color token
-* @returns CSSProperties with backgroundColor
-*/
-function backgroundColorStyle(token) {
-	return { backgroundColor: rgbColorValue(token) };
-}
-/**
-* Creates a text color style object from a theme token.
-*
-* @param token - Theme color token
-* @returns CSSProperties with color
-*/
-function textColorStyle(token) {
-	const parsed = parseToken(token);
-	const surfaceRole = parsed.raw ? null : surfaceRoleForTextToken(parsed.token);
-	if (surfaceRole) return { color: parsed.opacityPercent === void 0 ? surfaceForegroundValue(surfaceRole) : surfaceForegroundValueWithOpacity(surfaceRole, parsed.opacityPercent) };
-	return { color: rgbColorValue(token) };
-}
-/**
-* Creates a border color style object from a theme token.
-*
-* @param token - Theme color token
-* @returns CSSProperties with borderColor
-*/
-function borderColorStyle(token) {
-	return { borderColor: rgbColorValue(token) };
-}
-/**
-* Merges multiple CSSProperties objects into a single object.
-* Later styles override earlier ones. Undefined values are filtered out.
-* Returns undefined if the merged result is empty.
-*
-* @param styles - Variable number of CSSProperties objects (can be undefined)
-* @returns Merged CSSProperties object, or undefined if empty
-*
-* @example
-* mergeStyles(
-*   backgroundColorStyle('surface'),
-*   textColorStyle('text'),
-*   borderColorStyle('border')
-* )
-* // => { backgroundColor: '...', color: '...', borderColor: '...' }
-*/
-function mergeStyles(...styles) {
-	const merged = {};
-	for (const style of styles) {
-		if (!style) continue;
-		Object.assign(merged, style);
-	}
-	return Object.keys(merged).length ? merged : void 0;
-}
-//#endregion
 //#region ../theme-core/src/lib/media.ts
 const hotspotSchema$1 = z.object({
 	x: z.number().min(0).max(1),
@@ -2917,111 +2772,6 @@ const mediaSchema$1 = z.object({
 	transform: transformSchema$1.optional()
 });
 //#endregion
-//#region ../theme-core/src/buttons/effectClassification.ts
-/**
-* Exhaustive live policy for every registered effect id.
-*
-* The resolver consumes the transition payload directly, so adding an effect
-* cannot update classification without also defining its runtime behavior.
-*/
-const BUTTON_EFFECT_POLICIES = {
-	"darken-background": {
-		classification: "colour-transition",
-		transition: {
-			kind: "adjust-shade",
-			direction: "darker"
-		}
-	},
-	"lighten-background": {
-		classification: "colour-transition",
-		transition: {
-			kind: "adjust-shade",
-			direction: "lighter"
-		}
-	},
-	"background-on-hover": {
-		classification: "colour-transition",
-		transition: { kind: "replace-background" }
-	},
-	"background-on-hover-alpha": {
-		classification: "unsupported-colour",
-		reason: "alpha_requires_surface"
-	},
-	"fade-background": {
-		classification: "unsupported-colour",
-		reason: "changes_element_opacity"
-	},
-	"opacity-reduce": {
-		classification: "unsupported-colour",
-		reason: "changes_element_opacity"
-	},
-	"gradient-text": {
-		classification: "unsupported-colour",
-		reason: "changes_foreground"
-	},
-	"text-color-change": {
-		classification: "unsupported-colour",
-		reason: "changes_foreground"
-	},
-	"border-color-change": {
-		classification: "unsupported-colour",
-		reason: "changes_border"
-	},
-	"aurora-glow": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"cosmic-stardust": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"gradient-border-fill": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"animated-gradient-border-fill": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"nav-underline": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-base": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-hover": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-active": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"animated-gradient": { classification: "non-colour" },
-	"border-glow": { classification: "non-colour" },
-	"drop-shadow": { classification: "non-colour" },
-	"inner-shadow": { classification: "non-colour" },
-	"neumorphic-shadow": { classification: "non-colour" },
-	"outer-glow": { classification: "non-colour" },
-	"retro-3d-shadow": { classification: "non-colour" },
-	"scale-up": { classification: "non-colour" },
-	"scale-down": { classification: "non-colour" },
-	lift: { classification: "non-colour" },
-	"press-down": { classification: "non-colour" },
-	pop: { classification: "non-colour" },
-	"border-bottom-grow": { classification: "non-colour" },
-	"sketchy-border": { classification: "non-colour" },
-	"pulse-animation": { classification: "non-colour" }
-};
-function getButtonEffectPolicy(effectId) {
-	return Object.prototype.hasOwnProperty.call(BUTTON_EFFECT_POLICIES, effectId) ? BUTTON_EFFECT_POLICIES[effectId] : null;
-}
-function classifyButtonEffectId(effectId) {
-	return getButtonEffectPolicy(effectId)?.classification ?? "unknown";
-}
-//#endregion
 //#region ../theme-core/src/buttons/types.ts
 /**
 * Standard semantic variant roles a theme exposes.
@@ -3038,6 +2788,13 @@ const VARIANT_ROLES = [
 	"tertiary",
 	"accent"
 ];
+/**
+* Canonical persisted/CSS-safe button variant identifier.
+*
+* IDs become class selectors, so keep the contract deliberately narrower than
+* an arbitrary string and shared with every authoring/runtime boundary.
+*/
+const buttonVariantIdSchema = z$1.string().min(1).max(50).regex(/^[a-z0-9-]+$/, "Button variant IDs may contain lowercase letters, numbers, and hyphens only");
 function parseOpaqueButtonColourToken(value) {
 	const token = parseThemeColorToken(value);
 	if (token === null) return null;
@@ -3052,6 +2809,109 @@ const opaqueButtonColourTokenSchema = themeColorTokenSchema.refine((value) => pa
 	if (token === null) throw new Error("Invariant: opaque button token passed its schema");
 	return token;
 });
+const buttonShadeAmountSchema = z$1.number().finite().min(0).max(900).multipleOf(100);
+const buttonShadowIntensitySchema = z$1.enum([
+	"subtle",
+	"medium",
+	"strong"
+]);
+/**
+* The complete persisted button-effect contract.
+*
+* Navigation has its own generic interactive-effect model. Button variants use
+* this closed union so unsupported effect IDs, unknown option keys, and unsafe
+* CSS values cannot become representable after the schema boundary.
+*/
+const buttonEffectApplicationSchema = z$1.discriminatedUnion("effectId", [
+	z$1.strictObject({
+		effectId: z$1.literal("darken-background"),
+		options: z$1.strictObject({ amount: buttonShadeAmountSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("lighten-background"),
+		options: z$1.strictObject({ amount: buttonShadeAmountSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("background-on-hover"),
+		options: z$1.strictObject({ colorToken: opaqueButtonColourTokenSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("animated-gradient"),
+		options: z$1.strictObject({ direction: z$1.enum(["horizontal", "vertical"]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("drop-shadow"),
+		options: z$1.strictObject({ intensity: buttonShadowIntensitySchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("inner-shadow"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("neumorphic-shadow"),
+		options: z$1.strictObject({
+			mode: z$1.enum(["raised", "pressed"]).optional(),
+			intensity: buttonShadowIntensitySchema.optional()
+		}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("retro-3d-shadow"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("scale-up"),
+		options: z$1.strictObject({ scale: z$1.enum([
+			"1.02",
+			"1.03",
+			"1.05",
+			"1.10"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("scale-down"),
+		options: z$1.strictObject({ scale: z$1.enum([
+			"0.90",
+			"0.95",
+			"0.97",
+			"0.98"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("lift"),
+		options: z$1.strictObject({ amount: z$1.enum([
+			"0.25",
+			"0.5",
+			"1"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("press-down"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("pop"),
+		options: z$1.strictObject({ intensity: z$1.enum([
+			"subtle",
+			"medium",
+			"dramatic"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("border-bottom-grow"),
+		options: z$1.strictObject({
+			height: z$1.union([z$1.literal(1), z$1.literal(2)]).optional(),
+			origin: z$1.enum([
+				"left",
+				"center",
+				"right"
+			]).optional()
+		}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("sketchy-border"),
+		options: z$1.strictObject({ intensity: buttonShadowIntensitySchema.optional() }).optional()
+	})
+]);
 const cornerStyleSchema = z$1.enum([
 	"square",
 	"rounded",
@@ -3086,13 +2946,7 @@ const hoverTransformSchema = z$1.enum([
 	"scale",
 	"press"
 ]);
-const hoverColorSchema = z$1.enum([
-	"none",
-	"brighten",
-	"darken",
-	"saturate",
-	"token"
-]);
+z$1.enum(["none", "token"]);
 const buttonPaddingPresetSchema = z$1.enum([
 	"compact",
 	"default",
@@ -3153,7 +3007,7 @@ const buttonSizesSchema = z$1.object({
 	lg,
 	xl: xl ?? lg
 }));
-const canonicalButtonGlobalSettingsSchema = z$1.object({
+const buttonGlobalSettingsBaseSchema = z$1.strictObject({
 	cornerStyle: cornerStyleSchema,
 	cornerRadius: z$1.number().min(0).max(24).optional(),
 	/**
@@ -3166,30 +3020,23 @@ const canonicalButtonGlobalSettingsSchema = z$1.object({
 	shadow: shadowSizeSchema.optional(),
 	textTransform: textTransformSchema,
 	fontWeight: fontWeightSchema,
-	/**
-	* @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: z$1.union([
-		z$1.literal(1),
-		z$1.literal(2),
-		z$1.literal(3)
-	]),
 	typography: buttonTypographySchema.optional(),
 	fontSize: z$1.string().optional(),
 	letterSpacing: letterSpacingSchema.optional(),
 	italic: z$1.boolean().optional(),
 	paddingPreset: buttonPaddingPresetSchema.optional(),
 	hoverTransform: hoverTransformSchema,
-	hoverColor: hoverColorSchema,
-	hoverColorToken: opaqueButtonColourTokenSchema.optional(),
 	gradientStyle: gradientStyleSchema.optional(),
 	gradientAngle: z$1.number().min(0).max(360).optional(),
 	gradientSharpness: gradientSharpnessSchema.optional()
 });
-const buttonGlobalSettingsSchema = z$1.preprocess(normalizeLegacyButtonGlobalInput, canonicalButtonGlobalSettingsSchema);
+const buttonGlobalSettingsSchema = z$1.discriminatedUnion("hoverColor", [buttonGlobalSettingsBaseSchema.extend({
+	hoverColor: z$1.literal("none"),
+	hoverColorToken: z$1.never().optional()
+}), buttonGlobalSettingsBaseSchema.extend({
+	hoverColor: z$1.literal("token"),
+	hoverColorToken: opaqueButtonColourTokenSchema
+})]);
 const gradientDirectionSchema$1 = z$1.enum([
 	"to-r",
 	"to-l",
@@ -3200,12 +3047,12 @@ const gradientDirectionSchema$1 = z$1.enum([
 	"to-br",
 	"to-bl"
 ]);
-const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
-	z$1.object({
+const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
+	z$1.strictObject({
 		type: z$1.literal("solid"),
 		colorToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("gradient"),
 		stops: z$1.array(opaqueButtonColourTokenSchema).min(2).transform((stops) => {
 			const [first, second, ...rest] = stops;
@@ -3219,18 +3066,15 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
 		direction: gradientDirectionSchema$1,
 		foregroundToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("surface"),
 		role: z$1.literal("link")
 	})
 ]);
-const effectApplicationSchema$1 = z$1.object({
-	effectId: z$1.string(),
-	options: z$1.record(z$1.string(), z$1.json()).optional()
-});
-const buttonBorderSchema = z$1.object({ widthClass: z$1.string() });
-const buttonVariantAffordanceSchema = z$1.object({ iconId: z$1.string().min(1) });
-const variantShadowSchema = z$1.object({
+const buttonBackgroundSchema = buttonColourTreatmentSchema;
+const buttonBorderSchema = z$1.strictObject({ widthClass: z$1.string() });
+const buttonVariantAffordanceSchema = z$1.strictObject({ iconId: z$1.string().min(1) });
+const variantShadowSchema = z$1.strictObject({
 	elevation: z$1.enum([
 		"none",
 		"low",
@@ -3243,13 +3087,13 @@ const variantShadowSchema = z$1.object({
 		"hard"
 	]).nullable(),
 	position: z$1.enum(["bottom", "bottom-right"]).default("bottom"),
-	colorToken: themeColorTokenSchema.optional()
+	colorToken: opaqueButtonColourTokenSchema.optional()
 });
-const variantEffectsSchema = z$1.object({
-	base: z$1.array(effectApplicationSchema$1).optional(),
-	hover: z$1.array(effectApplicationSchema$1).optional(),
-	active: z$1.array(effectApplicationSchema$1).optional(),
-	focus: z$1.array(effectApplicationSchema$1).optional()
+const variantEffectsSchema = z$1.strictObject({
+	base: z$1.array(buttonEffectApplicationSchema).optional(),
+	hover: z$1.array(buttonEffectApplicationSchema).optional(),
+	active: z$1.array(buttonEffectApplicationSchema).optional(),
+	focus: z$1.array(buttonEffectApplicationSchema).optional()
 });
 /**
 * Per-variant size overrides schema — every entry is optional.
@@ -3270,8 +3114,8 @@ const variantSizeOverridesSchema = z$1.object({
 * default (e.g. link-style variants declaring zero horizontal padding at
 * every size).
 */
-const canonicalButtonVariantSchema = z$1.object({
-	id: z$1.string(),
+const buttonVariantSchema = z$1.strictObject({
+	id: buttonVariantIdSchema,
 	name: z$1.string().min(1).max(20),
 	enabled: z$1.boolean(),
 	priority: prioritySchema,
@@ -3285,422 +3129,499 @@ const canonicalButtonVariantSchema = z$1.object({
 	sizes: variantSizeOverridesSchema.optional(),
 	affordance: buttonVariantAffordanceSchema.optional()
 });
-/**
-* Temporary persisted-theme admission boundary for issue #1206.
-*
-* Production inventory on 2026-07-22 found 22 rows using the old independent
-* `textColorToken`/border colour shape. New source and all downstream code use
-* only the canonical relationship. Delete this preprocessor after the reviewed
-* production rewrite reports zero legacy rows.
-*/
-const buttonVariantSchema = z$1.preprocess(normalizeLegacyButtonVariantInput, canonicalButtonVariantSchema);
-const buttonSystemSchema = z$1.object({
+const buttonSystemSchema = z$1.strictObject({
 	global: buttonGlobalSettingsSchema,
 	variants: z$1.array(buttonVariantSchema).min(1).max(6),
 	sizes: buttonSizesSchema.optional()
+}).superRefine((system, ctx) => {
+	const seen = /* @__PURE__ */ new Set();
+	system.variants.forEach((variant, index) => {
+		if (seen.has(variant.id)) ctx.addIssue({
+			code: "custom",
+			path: [
+				"variants",
+				index,
+				"id"
+			],
+			message: `Duplicate button variant ID: ${variant.id}`
+		});
+		seen.add(variant.id);
+	});
 });
-function normalizeLegacyButtonVariantInput(input) {
-	if (!isUnknownRecord(input)) return input;
-	const background = input.background;
-	if (!isUnknownRecord(background)) return input;
-	if (!(background.type === "transparent" || Object.prototype.hasOwnProperty.call(input, "textColorToken") || isUnknownRecord(input.border) && Object.prototype.hasOwnProperty.call(input.border, "colorToken") || hasLegacyButtonEffects(input.effects) || hasLegacyAlphaToken(input, background))) return input;
-	const { textColorToken, ...withoutLegacyText } = input;
-	const normalizedBorder = isUnknownRecord(input.border) && typeof input.border.widthClass === "string" ? { widthClass: input.border.widthClass } : input.border;
-	const normalizedAffordance = isUnknownRecord(input.affordance) && typeof input.affordance.iconId === "string" ? { iconId: input.affordance.iconId } : input.affordance;
-	const normalizedEffects = normalizeLegacyButtonEffects(input.effects, background.type);
-	const hoverBackgroundToken = stripLegacyTokenAlpha(input.hoverBackgroundToken);
-	if (background.type === "transparent") return {
-		...withoutLegacyText,
-		background: {
-			type: "surface",
-			role: "link"
-		},
-		border: normalizedBorder,
-		affordance: normalizedAffordance,
-		effects: normalizedEffects,
-		hoverBackgroundToken
-	};
-	if (background.type === "gradient") {
-		const stops = Array.isArray(background.stops) ? background.stops.map(stripLegacyTokenAlpha) : background.stops;
-		return {
-			...withoutLegacyText,
-			background: {
-				...background,
-				stops,
-				foregroundToken: stripLegacyTokenAlpha(background.foregroundToken ?? textColorToken)
-			},
-			border: normalizedBorder,
-			affordance: normalizedAffordance,
-			effects: normalizedEffects,
-			hoverBackgroundToken
-		};
-	}
+//#endregion
+//#region ../theme-core/src/surfaces/foregroundContract.ts
+const SURFACE_FOREGROUND_CSS_VARS = {
+	text: "--rb-surface-text-color",
+	heading: "--rb-surface-heading-color",
+	link: "--rb-surface-link-color",
+	supporting: "--rb-surface-supporting-color"
+};
+const DEFAULT_SURFACE_TEXT_COLOR = "rgb(var(--tb-text, 17 24 39))";
+const DEFAULT_ROLE_FALLBACKS = {
+	text: DEFAULT_SURFACE_TEXT_COLOR,
+	heading: DEFAULT_SURFACE_TEXT_COLOR,
+	link: "rgb(var(--tb-primary, var(--tb-text, 17 24 39)))",
+	supporting: "rgb(var(--tb-mutedText, 100 116 139))"
+};
+function requireSurfaceColorValue(role, value) {
+	const normalized = value.trim();
+	if (normalized.length === 0) throw new RangeError(`Surface foreground ${role} must be a non-empty CSS color.`);
+	return normalized;
+}
+function completeSurfaceForegrounds(input) {
+	const text = requireSurfaceColorValue("text", input.text);
 	return {
-		...withoutLegacyText,
-		background: background.type === "solid" ? {
-			...background,
-			colorToken: stripLegacyTokenAlpha(background.colorToken)
-		} : background,
-		border: normalizedBorder,
-		affordance: normalizedAffordance,
-		effects: normalizedEffects,
-		hoverBackgroundToken
+		text,
+		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
+		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
+		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
 	};
 }
-function normalizeLegacyButtonGlobalInput(input) {
-	if (!isUnknownRecord(input)) return input;
-	const hoverColorToken = stripLegacyTokenAlpha(input.hoverColorToken);
-	return hoverColorToken === input.hoverColorToken ? input : {
-		...input,
-		hoverColorToken
-	};
+function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
+	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
+	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
+	if (role === "text") return `var(${roleVariable}, ${fallback})`;
+	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
 }
-function hasLegacyAlphaToken(input, background) {
-	const stops = isUnknownArray(background.stops) ? background.stops : [];
-	return [
-		input.hoverBackgroundToken,
-		background.colorToken,
-		background.foregroundToken,
-		...stops
-	].some((token) => stripLegacyTokenAlpha(token) !== token);
-}
-function stripLegacyTokenAlpha(value) {
-	if (typeof value !== "string") return value;
-	const slashIndex = value.indexOf("/");
-	return slashIndex < 0 ? value : value.slice(0, slashIndex);
-}
-function hasLegacyButtonEffects(input) {
-	if (!isUnknownRecord(input)) return false;
-	return [
-		"base",
-		"hover",
-		"active",
-		"focus"
-	].some((state) => {
-		const effects = input[state];
-		return Array.isArray(effects) && effects.some((effect) => {
-			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return true;
-			const classification = classifyButtonEffectId(effect.effectId);
-			if (classification !== "colour-transition" && classification !== "non-colour") return true;
-			return effect.effectId === "background-on-hover" && isUnknownRecord(effect.options) && stripLegacyTokenAlpha(effect.options.colorToken) !== effect.options.colorToken;
-		});
-	});
+function surfaceForegroundValueWithOpacity(role, opacityPercent) {
+	if (!Number.isFinite(opacityPercent) || opacityPercent < 0 || opacityPercent > 100) throw new RangeError("Surface foreground opacity must be between 0 and 100.");
+	return `color-mix(in srgb, ${surfaceForegroundValue(role)} ${opacityPercent}%, transparent)`;
 }
-function normalizeLegacyButtonEffects(input, backgroundType) {
-	if (!isUnknownRecord(input)) return input;
-	const normalized = {};
-	for (const state of [
-		"base",
-		"hover",
-		"active",
-		"focus"
-	]) {
-		const effects = input[state];
-		if (!Array.isArray(effects)) continue;
-		const safeEffects = effects.flatMap((effect) => {
-			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return [];
-			const classification = classifyButtonEffectId(effect.effectId);
-			if (classification === "non-colour") return [effect];
-			if (classification !== "colour-transition") return [];
-			if (effect.effectId === "background-on-hover") {
-				const options = isUnknownRecord(effect.options) ? effect.options : null;
-				const colorToken = options === null ? null : parseOpaqueButtonColourToken(stripLegacyTokenAlpha(options.colorToken));
-				return colorToken === null ? [] : [{
-					...effect,
-					options: {
-						...options,
-						colorToken
-					}
-				}];
-			}
-			if (backgroundType !== "solid") return [];
-			const rawAmount = isUnknownRecord(effect.options) ? effect.options.amount : void 0;
-			const amount = typeof rawAmount === "number" && rawAmount > 0 ? Math.max(100, Math.round(rawAmount / 100) * 100) : 100;
-			return [{
-				...effect,
-				options: {
-					...isUnknownRecord(effect.options) ? effect.options : {},
-					amount
-				}
-			}];
-		});
-		if (safeEffects.length > 0) normalized[state] = safeEffects;
-	}
-	return Object.keys(normalized).length === 0 ? void 0 : normalized;
-}
-function isUnknownRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isUnknownArray(value) {
-	return Array.isArray(value);
+function surfaceForegroundStyle(input) {
+	const foregrounds = completeSurfaceForegrounds(input);
+	return {
+		color: foregrounds.text,
+		[SURFACE_FOREGROUND_CSS_VARS.text]: foregrounds.text,
+		[SURFACE_FOREGROUND_CSS_VARS.heading]: foregrounds.heading,
+		[SURFACE_FOREGROUND_CSS_VARS.link]: foregrounds.link,
+		[SURFACE_FOREGROUND_CSS_VARS.supporting]: foregrounds.supporting
+	};
 }
 buttonSizeNameSchema.options;
 //#endregion
-//#region ../theme-core/src/buttons/personalities/types.ts
-function asButtonPersonalityId(value) {
-	if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
-	return value;
+//#region ../theme-core/src/buttons/styles/domain.ts
+const PUBLIC_BUTTON_ROLES = [
+	"primary",
+	"secondary",
+	"outline",
+	"ghost",
+	"accent"
+];
+function defineButtonStyleRecipe(recipe) {
+	return recipe;
+}
+function materializeButtonRoles(definitions) {
+	const primary = materializeCompleteRole("primary", definitions.primary.appearance);
+	const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
+	const completeRoles = {
+		primary,
+		secondary
+	};
+	return {
+		primary,
+		secondary,
+		outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
+		ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
+		accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
+	};
 }
-const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
-z$1.object({
-	id: buttonPersonalityIdSchema,
-	name: z$1.string().min(1),
-	description: z$1.string().min(1),
-	tags: styleTagsSchema,
-	buttonSystem: buttonSystemSchema
-});
-/**
-* Helper for personality file modules to keep the call site short and
-* type-safe. `as const satisfies ...` would also work but produces wider
-* types at use sites.
-*/
-function defineButtonPersonality(input) {
+function resolveButtonStyleRecipe(recipe, parameters) {
+	const parsedParameters = recipe.parameterSchema.safeParse(parameters);
+	if (!parsedParameters.success) return {
+		kind: "error",
+		error: {
+			kind: "invalid-parameters",
+			styleId: recipe.id,
+			issues: parsedParameters.error.issues.map((issue) => issue.message)
+		}
+	};
+	const definition = recipe.defineSystem(parsedParameters.data);
+	const roles = materializeButtonRoles(definition.roles);
+	const buttonSystem = {
+		global: definition.global,
+		variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
+		...definition.sizes ? { sizes: definition.sizes } : {}
+	};
+	const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
+	if (!parsedButtonSystem.success) return {
+		kind: "error",
+		error: {
+			kind: "invalid-button-system",
+			styleId: recipe.id,
+			issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
+		}
+	};
 	return {
-		id: asButtonPersonalityId(input.id),
-		name: input.name,
-		description: input.description,
-		tags: input.tags,
-		buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
+		kind: "resolved",
+		buttonSystem: parsedButtonSystem.data
+	};
+}
+function materializeSupportingRole(role, definition, completeRoles) {
+	if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
+	return {
+		...completeRoles[definition.from],
+		...definition.overrides,
+		id: role,
+		name: roleName(role),
+		enabled: true,
+		priority: 3
+	};
+}
+function materializeCompleteRole(role, appearance) {
+	return {
+		...appearance,
+		id: role,
+		name: roleName(role),
+		enabled: true,
+		priority: rolePriority(role)
 	};
 }
+function roleName(role) {
+	return role.charAt(0).toUpperCase() + role.slice(1);
+}
+function rolePriority(role) {
+	if (role === "primary") return 1;
+	if (role === "secondary") return 2;
+	return 3;
+}
 //#endregion
-//#region ../theme-core/src/buttons/personalities/brushed-wash.ts
-/**
-* Brushed Wash — gradient backgrounds that read as watercolour washes.
-* Generous padding, soft shadows; pairs with vibrant organic brands.
-*/
-const brushedWash = defineButtonPersonality({
-	id: "brushed-wash",
-	name: "Brushed Wash",
-	description: "Watercolour-gradient buttons with soft shadows and generous padding.",
+//#region ../theme-core/src/buttons/styles/selection.ts
+const BUTTON_STYLE_IDS = [
+	"soft-pill",
+	"earth-pill",
+	"confident-chip",
+	"editorial-link",
+	"pebble",
+	"ink-stamp",
+	"flat-ink",
+	"brushed-wash",
+	"showtime-pill",
+	"joy-stamp",
+	"ornate-ritual",
+	"quiet-arrow"
+];
+const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
+const emptyParametersSchema$1 = z$1.object({}).strict();
+function selectionBranch(styleId, parameters) {
+	return z$1.object({
+		styleId: z$1.literal(styleId),
+		parameters
+	}).strict();
+}
+const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
+	selectionBranch("soft-pill", emptyParametersSchema$1),
+	selectionBranch("earth-pill", emptyParametersSchema$1),
+	selectionBranch("confident-chip", emptyParametersSchema$1),
+	selectionBranch("editorial-link", emptyParametersSchema$1),
+	selectionBranch("pebble", emptyParametersSchema$1),
+	selectionBranch("ink-stamp", emptyParametersSchema$1),
+	selectionBranch("flat-ink", emptyParametersSchema$1),
+	selectionBranch("brushed-wash", emptyParametersSchema$1),
+	selectionBranch("showtime-pill", emptyParametersSchema$1),
+	selectionBranch("joy-stamp", emptyParametersSchema$1),
+	selectionBranch("ornate-ritual", emptyParametersSchema$1),
+	selectionBranch("quiet-arrow", quietArrowParametersSchema)
+]);
+//#endregion
+//#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
+const quietArrowRecipe = defineButtonStyleRecipe({
+	id: "quiet-arrow",
+	accessibilityLabel: "Wide uppercase buttons with trailing arrows",
 	tags: {
 		tone: "classic",
-		energy: "vibrant",
-		motion: "standard",
-		era: "organic"
+		energy: "calm",
+		motion: "subtle",
+		era: "editorial"
 	},
-	buttonSystem: {
+	parameterSchema: quietArrowParametersSchema,
+	defaultParameters: { secondaryTreatment: "outlined" },
+	controls: [{
+		kind: "choice",
+		parameter: "secondaryTreatment",
+		label: "Secondary button treatment",
+		options: [{
+			value: "outlined",
+			label: "Outlined"
+		}, {
+			value: "solid-accent",
+			label: "Solid accent"
+		}]
+	}],
+	defineSystem: (parameters) => ({
 		global: {
 			cornerStyle: "rounded",
-			shadow: "low",
-			textTransform: "none",
+			textTransform: "uppercase",
 			fontWeight: 500,
-			borderWidth: 1,
+			typography: "body",
+			fontSize: "text-sm",
+			letterSpacing: "loose",
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.75rem 2rem",
+				padding: "0.625rem 1.25rem",
+				fontSize: "text-xs"
+			},
+			md: {
+				padding: "0.8125rem 1.75rem",
 				fontSize: "text-sm"
 			},
-			md: { padding: "1rem 2.5rem" },
 			lg: {
-				padding: "1.25rem 3rem",
-				fontSize: "text-lg"
+				padding: "0.9375rem 2.125rem",
+				fontSize: "text-sm"
 			},
 			xl: {
-				padding: "1.625rem 3.75rem",
-				fontSize: "text-xl"
+				padding: "1.0625rem 2.5rem",
+				fontSize: "text-base"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "gradient",
-					stops: ["primary", "accent"],
-					direction: "to-r",
-					foregroundToken: "primaryForeground"
-				},
-				borderRadius: "rounded-lg",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: unsafeAsOpaqueButtonColourToken("primary")
+					},
+					borderRadius: "rounded-xl",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "darken-background",
+						options: { amount: 100 }
+					}] }
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "gradient",
-					stops: ["secondary", "accent"],
-					direction: "to-br",
-					foregroundToken: "primaryForeground"
-				},
-				borderRadius: "rounded-lg",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
+			secondary: {
+				kind: "complete",
+				appearance: parameters.secondaryTreatment === "solid-accent" ? {
+					background: {
+						type: "solid",
+						colorToken: unsafeAsOpaqueButtonColourToken("accent")
+					},
+					borderRadius: "rounded-xl",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "darken-background",
+						options: { amount: 100 }
+					}] }
+				} : {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-xl",
+					border: { widthClass: "border" },
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
+					}] }
 				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-lg",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-xl",
+					border: { widthClass: "border" }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-lg",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-xl"
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: unsafeAsOpaqueButtonColourToken("accent")
+				} }
 			}
-		]
-	}
+		}
+	})
 });
 //#endregion
-//#region ../theme-core/src/buttons/personalities/confident-chip.ts
-/**
-* Confident Chip — moderate-radius solid buttons that read as competent and
-* direct. Default for Clear Professional; works for any modern brand voice.
-*/
-const confidentChip = defineButtonPersonality({
-	id: "confident-chip",
-	name: "Confident Chip",
-	description: "Mid-radius solid buttons with a crisp hover.",
+//#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
+const emptyParametersSchema = z$1.object({}).strict();
+function defineStaticButtonStyleRecipe(input) {
+	const system = normalizeSystem(input.system);
+	return defineButtonStyleRecipe({
+		id: input.id,
+		accessibilityLabel: input.accessibilityLabel,
+		tags: input.tags,
+		parameterSchema: emptyParametersSchema,
+		defaultParameters: {},
+		controls: [],
+		defineSystem: () => system
+	});
+}
+function normalizeSystem(input) {
+	return {
+		global: buttonGlobalSettingsSchema.parse(input.global),
+		...input.sizes ? { sizes: input.sizes } : {},
+		roles: {
+			primary: normalizeCompleteRole(input.roles.primary),
+			secondary: normalizeCompleteRole(input.roles.secondary),
+			outline: normalizeSupportingRole(input.roles.outline),
+			ghost: normalizeSupportingRole(input.roles.ghost),
+			accent: normalizeSupportingRole(input.roles.accent)
+		}
+	};
+}
+function normalizeCompleteRole(role) {
+	return {
+		kind: "complete",
+		appearance: normalizeAppearance(role.appearance)
+	};
+}
+function normalizeSupportingRole(role) {
+	if (role.kind === "complete") return normalizeCompleteRole(role);
+	return {
+		kind: "derive",
+		from: role.from,
+		...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
+	};
+}
+function normalizeAppearance(appearance) {
+	const { background, hoverBackgroundToken, ...rest } = appearance;
+	return {
+		...rest,
+		background: buttonColourTreatmentSchema.parse(background),
+		...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
+	};
+}
+function normalizeAppearanceOverrides(overrides) {
+	const { background, hoverBackgroundToken, ...rest } = overrides;
+	return {
+		...rest,
+		...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
+		...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
+	};
+}
+//#endregion
+//#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
+const softPillRecipe = defineStaticButtonStyleRecipe({
+	id: "soft-pill",
+	accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
 	tags: {
 		tone: "classic",
 		energy: "calm",
-		motion: "standard",
-		era: "modern"
+		motion: "subtle",
+		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "rounded",
-			shadow: "medium",
+			cornerStyle: "pill",
+			shadow: "low",
 			textTransform: "none",
-			fontWeight: 600,
-			borderWidth: 1,
-			hoverTransform: "none",
+			fontWeight: 500,
+			hoverTransform: "lift",
 			hoverColor: "none"
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-md",
-				shadow: {
-					elevation: "medium",
-					softness: "soft",
-					position: "bottom"
-				},
-				effects: {
-					hover: [{
-						effectId: "darken-background",
-						options: { amount: 100 }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.97" }
-					}]
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					},
+					effects: {
+						hover: [{ effectId: "lift" }],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "solid",
-					colorToken: "surface"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "background" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/earth-pill.ts
-/**
-* Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
-* Built for grounded editorial wellness styles such as Soft Earth.
-*/
-const earthPill = defineButtonPersonality({
+const earthPillRecipe = defineStaticButtonStyleRecipe({
 	id: "earth-pill",
-	name: "Earth Pill",
-	description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
+	accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
 	tags: {
 		tone: "classic",
 		energy: "calm",
 		motion: "subtle",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "pill",
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "lift",
 			hoverColor: "none",
 			typography: "body",
@@ -3721,948 +3642,786 @@ const earthPill = defineButtonPersonality({
 				fontSize: "text-xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-full",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
-				},
-				effects: {
-					hover: [{
-						effectId: "lift",
-						options: { translateY: "-1px" }
-					}, {
-						effectId: "background-on-hover",
-						options: { colorToken: "accent" }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.98" }
-					}]
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					},
+					effects: {
+						hover: [{ effectId: "lift" }, {
+							effectId: "background-on-hover",
+							options: { colorToken: unsafeAsOpaqueButtonColourToken("accent") }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "muted" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("muted") }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surfaceAlt" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				shadow: {
-					elevation: "none",
-					softness: null,
-					position: "bottom"
-				},
-				sizes: {
-					sm: {
-						padding: "0.25rem 0",
-						fontSize: "text-sm"
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					md: { padding: "0.375rem 0" },
-					lg: {
-						padding: "0.5rem 0",
-						fontSize: "text-lg"
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "none",
+						softness: null,
+						position: "bottom"
 					},
-					xl: {
-						padding: "0.625rem 0",
-						fontSize: "text-xl"
+					sizes: {
+						sm: {
+							padding: "0.25rem 0",
+							fontSize: "text-sm"
+						},
+						md: { padding: "0.375rem 0" },
+						lg: {
+							padding: "0.5rem 0",
+							fontSize: "text-lg"
+						},
+						xl: {
+							padding: "0.625rem 0",
+							fontSize: "text-xl"
+						}
 					}
 				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/editorial-link.ts
-/**
-* Editorial Link — all variants are link-style with a growing underline.
-* Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
-*/
-const editorialLink = defineButtonPersonality({
-	id: "editorial-link",
-	name: "Editorial Link",
-	description: "Link-style with a growing underline. Refined, typographic.",
+const confidentChipRecipe = defineStaticButtonStyleRecipe({
+	id: "confident-chip",
+	accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
 	tags: {
-		tone: "minimal",
+		tone: "classic",
 		energy: "calm",
-		motion: "subtle",
-		era: "editorial"
+		motion: "standard",
+		era: "modern"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "square",
+			cornerStyle: "rounded",
+			shadow: "medium",
 			textTransform: "none",
-			fontWeight: 500,
-			borderWidth: 1,
+			fontWeight: 600,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				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"
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-md",
+					shadow: {
+						elevation: "medium",
+						softness: "soft",
+						position: "bottom"
+					},
+					effects: {
+						hover: [{
+							effectId: "darken-background",
+							options: { amount: 100 }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.97" }
+						}]
 					}
-				}] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				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"
-					}
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "surface"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("background") }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				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"
-					}
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: { padding: "0.25rem 0" },
-					md: { padding: "0.5rem 0" },
-					lg: { padding: "0.625rem 0" },
-					xl: { padding: "0.75rem 0" }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
 				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/flat-ink.ts
-/**
-* Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
-* amber accent climax, all completely flat (no drop shadow) with a modest
-* radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
-* physiotherapy voice. The primary shifts to the secondary (moss) on hover and
-* every variant lifts 2px; the amber accent is meant to be used sparingly as
-* the page's one conversion climax.
-*/
-const flatInk = defineButtonPersonality({
-	id: "flat-ink",
-	name: "Flat Ink",
-	description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
+const editorialSizes = {
+	sm: { padding: "0.25rem 0" },
+	md: { padding: "0.5rem 0" },
+	lg: { padding: "0.625rem 0" },
+	xl: { padding: "0.75rem 0" }
+};
+const editorialLinkRecipe = defineStaticButtonStyleRecipe({
+	id: "editorial-link",
+	accessibilityLabel: "Flat typographic buttons with an underline treatment",
 	tags: {
-		tone: "classic",
+		tone: "minimal",
 		energy: "calm",
 		motion: "subtle",
 		era: "editorial"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "rounded",
+			cornerStyle: "square",
 			textTransform: "none",
-			fontWeight: 600,
-			borderWidth: 1,
-			typography: "body",
-			letterSpacing: "tight",
-			paddingPreset: "default",
-			hoverTransform: "lift",
+			fontWeight: 500,
+			hoverTransform: "none",
 			hoverColor: "none"
 		},
-		sizes: {
-			sm: {
-				padding: "0.625rem 1.125rem",
-				fontSize: "text-sm"
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes,
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 2,
+							origin: "left"
+						}
+					}] }
+				}
 			},
-			md: { padding: "0.8125rem 1.375rem" },
-			lg: {
-				padding: "0.9375rem 1.625rem",
-				fontSize: "text-lg"
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes,
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							origin: "left"
+						}
+					}] }
+				}
 			},
-			xl: {
-				padding: "1.0625rem 2rem",
-				fontSize: "text-xl"
-			}
-		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-lg",
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "lift",
-					options: { translateY: "-2px" }
-				}, {
-					effectId: "background-on-hover",
-					options: { colorToken: "secondary" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes,
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							origin: "left"
+						}
+					}] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-lg",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "lift",
-					options: { translateY: "-2px" }
-				}, {
-					effectId: "background-on-hover",
-					options: { colorToken: "surfaceAlt" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes
+				}
 			},
-			{
-				id: "accent",
-				name: "Accent",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "solid",
-					colorToken: "accent"
-				},
-				borderRadius: "rounded-lg",
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "lift",
-					options: { translateY: "-2px" }
-				}] }
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { effects: { base: [{
+					effectId: "border-bottom-grow",
+					options: {
+						height: 2,
+						origin: "left"
+					}
+				}] } }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/ink-stamp.ts
-/**
-* Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
-* feel. Reads as bold and handmade; suits expressive craft brands.
-*/
-const inkStamp = defineButtonPersonality({
-	id: "ink-stamp",
-	name: "Ink Stamp",
-	description: "Hand-stamped block-print buttons with a slight lift on hover.",
+const pebbleRecipe = defineStaticButtonStyleRecipe({
+	id: "pebble",
+	accessibilityLabel: "Generously padded pill buttons",
 	tags: {
-		tone: "bold",
-		energy: "vibrant",
+		tone: "classic",
+		energy: "calm",
 		motion: "standard",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "rounded",
-			textTransform: "uppercase",
-			fontWeight: 600,
-			borderWidth: 1,
+			cornerStyle: "pill",
+			textTransform: "none",
+			fontWeight: 500,
 			hoverTransform: "none",
-			hoverColor: "none",
-			letterSpacing: "loose"
+			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.5rem 1.25rem",
-				fontSize: "text-xs"
-			},
-			md: {
-				padding: "0.75rem 1.75rem",
+				padding: "0.625rem 1.75rem",
 				fontSize: "text-sm"
 			},
+			md: { padding: "0.875rem 2.25rem" },
 			lg: {
-				padding: "0.875rem 2.25rem",
-				fontSize: "text-base"
-			},
-			xl: {
 				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"
-				},
-				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" }
-					}]
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{
+						effectId: "darken-background",
+						options: { amount: 100 }
+					}] }
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
-			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
-			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: {
-						padding: "0.375rem 0",
-						fontSize: "text-xs"
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					md: {
-						padding: "0.5rem 0",
-						fontSize: "text-sm"
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("accent") }
+					}] }
+				}
+			},
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					lg: {
-						padding: "0.625rem 0",
-						fontSize: "text-base"
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
+			},
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					xl: {
-						padding: "0.75rem 0",
-						fontSize: "text-lg"
-					}
-				},
-				effects: { base: [{
-					effectId: "border-bottom-grow",
-					options: {
-						height: 1,
-						colorToken: "accent",
-						origin: "left"
+					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"
+						}
 					}
-				}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/joy-stamp.ts
-/**
-* Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
-* that collapses as the button presses into it on hover. Authored for the
-* Original Joy site style: a cream "stamp" shadow under the solid primary, and
-* a brown shadow under the cream outline. Reads as bold, warm, and handmade.
-*
-* The coloured offset shadow relies on the per-variant `shadow.colorToken`
-* extension; the press is the shared `press-down` effect, which matches its
-* translate to each variant's own shadow offset.
-*/
-const joyStamp = defineButtonPersonality({
-	id: "joy-stamp",
-	name: "Joy Stamp",
-	description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
+const brushedWashRecipe = defineStaticButtonStyleRecipe({
+	id: "brushed-wash",
+	accessibilityLabel: "Generously padded gradient buttons with soft shadows",
 	tags: {
-		tone: "bold",
+		tone: "classic",
 		energy: "vibrant",
-		motion: "expressive",
+		motion: "standard",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "pill",
-			shadow: "high",
+			cornerStyle: "rounded",
+			shadow: "low",
 			textTransform: "none",
-			typography: "heading",
-			fontWeight: 700,
-			fontSize: "text-lg",
-			borderWidth: 2,
+			fontWeight: 500,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.625rem 1.25rem",
-				fontSize: "text-base"
-			},
-			md: {
-				padding: "0.875rem 1.75rem",
-				fontSize: "text-lg"
+				padding: "0.75rem 2rem",
+				fontSize: "text-sm"
 			},
+			md: { padding: "1rem 2.5rem" },
 			lg: {
-				padding: "1.125rem 2.25rem",
-				fontSize: "text-xl"
+				padding: "1.25rem 3rem",
+				fontSize: "text-lg"
 			},
 			xl: {
-				padding: "1.25rem 2.75rem",
-				fontSize: "text-2xl"
+				padding: "1.625rem 3.75rem",
+				fontSize: "text-xl"
 			}
 		},
-		variants: [{
-			id: "primary",
-			name: "Primary",
-			enabled: true,
-			priority: 1,
-			background: {
-				type: "solid",
-				colorToken: "primary"
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "gradient",
+						stops: ["primary", "accent"],
+						direction: "to-r",
+						foregroundToken: "primaryForeground"
+					},
+					borderRadius: "rounded-lg",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					}
+				}
 			},
-			borderRadius: "rounded-full",
-			shadow: {
-				elevation: "high",
-				softness: "hard",
-				position: "bottom-right",
-				colorToken: "text"
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "gradient",
+						stops: ["secondary", "accent"],
+						direction: "to-br",
+						foregroundToken: "primaryForeground"
+					},
+					borderRadius: "rounded-lg",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					}
+				}
 			},
-			effects: { hover: [{ effectId: "press-down" }] }
-		}, {
-			id: "secondary",
-			name: "Secondary",
-			enabled: true,
-			priority: 2,
-			background: {
-				type: "surface",
-				role: "link"
-			},
-			borderRadius: "rounded-full",
-			border: { widthClass: "border-2" },
-			shadow: {
-				elevation: "high",
-				softness: "hard",
-				position: "bottom-right",
-				colorToken: "secondary"
-			},
-			effects: { hover: [{ effectId: "press-down" }] }
-		}]
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
+			},
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
+			}
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
-/**
-* Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
-* deliberate spacing. Designed for music, ceremony, and soulful event sites.
-*/
-const ornateRitual = defineButtonPersonality({
-	id: "ornate-ritual",
-	name: "Ornate Ritual",
-	description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
+const inkStampRecipe = defineStaticButtonStyleRecipe({
+	id: "ink-stamp",
+	accessibilityLabel: "Uppercase block-print buttons with a playful hover",
 	tags: {
-		tone: "classic",
+		tone: "bold",
 		energy: "vibrant",
-		motion: "subtle",
+		motion: "standard",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none",
 			letterSpacing: "loose"
 		},
 		sizes: {
 			sm: {
-				padding: "0.5625rem 1.25rem",
+				padding: "0.5rem 1.25rem",
 				fontSize: "text-xs"
 			},
 			md: {
 				padding: "0.75rem 1.75rem",
-				fontSize: "text-xs"
+				fontSize: "text-sm"
 			},
 			lg: {
 				padding: "0.875rem 2.25rem",
-				fontSize: "text-sm"
-			},
-			xl: {
-				padding: "1rem 2.75rem",
 				fontSize: "text-base"
-			}
-		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: {
-					hover: [{
-						effectId: "background-on-hover",
-						options: { colorToken: "primary-100" }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.98" }
-					}]
-				}
-			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "solid",
-					colorToken: "secondary"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
-			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "muted" }
-				}] }
-			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				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"
-					}
-				}] }
-			}
-		]
-	}
-});
-//#endregion
-//#region ../theme-core/src/buttons/personalities/pebble.ts
-/**
-* Pebble — large pill primaries with generous padding. Reads as spa-luxurious
-* and natural; pairs well with wellness/yoga/dance brands.
-*/
-const pebble = defineButtonPersonality({
-	id: "pebble",
-	name: "Pebble",
-	description: "Generous pill buttons with a quiet colour-softening hover.",
-	tags: {
-		tone: "classic",
-		energy: "calm",
-		motion: "standard",
-		era: "organic"
-	},
-	buttonSystem: {
-		global: {
-			cornerStyle: "pill",
-			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: {
+			xl: {
 				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"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{
-					effectId: "darken-background",
-					options: { amount: 100 }
-				}] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					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: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "accent" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				sizes: {
-					sm: {
-						padding: "0.375rem 0.875rem",
-						fontSize: "text-sm"
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					md: { padding: "0.5rem 1rem" },
-					lg: {
-						padding: "0.625rem 1.25rem",
-						fontSize: "text-lg"
+					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"
+						}
 					},
-					xl: {
-						padding: "0.75rem 1.5rem",
-						fontSize: "text-xl"
-					}
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							origin: "left"
+						}
+					}] }
 				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
-/**
-* Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
-* Primary and secondary keep stable semantic colours; surrounding surfaces are
-* responsible for contrast rather than reversing the button roles.
-*/
-const quietArrow = defineButtonPersonality({
-	id: "quiet-arrow",
-	name: "Quiet Arrow",
-	description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
+const flatInkRecipe = defineStaticButtonStyleRecipe({
+	id: "flat-ink",
+	accessibilityLabel: "Flat rounded buttons with arrow affordances",
 	tags: {
 		tone: "classic",
 		energy: "calm",
 		motion: "subtle",
 		era: "editorial"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "rounded",
-			textTransform: "uppercase",
-			fontWeight: 500,
-			borderWidth: 1,
+			textTransform: "none",
+			fontWeight: 600,
 			typography: "body",
-			fontSize: "text-sm",
-			letterSpacing: "loose",
-			hoverTransform: "none",
+			letterSpacing: "tight",
+			paddingPreset: "default",
+			hoverTransform: "lift",
 			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.625rem 1.25rem",
-				fontSize: "text-xs"
-			},
-			md: {
-				padding: "0.8125rem 1.75rem",
+				padding: "0.625rem 1.125rem",
 				fontSize: "text-sm"
 			},
+			md: { padding: "0.8125rem 1.375rem" },
 			lg: {
-				padding: "0.9375rem 2.125rem",
-				fontSize: "text-sm"
+				padding: "0.9375rem 1.625rem",
+				fontSize: "text-lg"
 			},
 			xl: {
-				padding: "1.0625rem 2.5rem",
-				fontSize: "text-base"
+				padding: "1.0625rem 2rem",
+				fontSize: "text-xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-xl",
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "darken-background",
-					options: { amount: 100 }
-				}] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-lg",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{ effectId: "lift" }, {
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("secondary") }
+					}] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-xl",
-				border: { widthClass: "border" },
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surfaceAlt" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					border: { widthClass: "border" },
+					effects: { hover: [{ effectId: "lift" }, {
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-xl",
-				border: { widthClass: "border" }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					border: { widthClass: "border" },
+					effects: { hover: [{ effectId: "lift" }, {
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-xl"
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					effects: { hover: [{ effectId: "lift" }] }
+				}
+			},
+			accent: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "accent"
+					},
+					borderRadius: "rounded-lg",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{ effectId: "lift" }] }
+				}
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/showtime-pill.ts
-/**
-* Showtime Pill — bold, spacious, fully rounded buttons with playful pop
-* motion. Suits energetic schools, performers, festivals, and community brands
-* that need calls to action to feel loud without becoming visually chaotic.
-*/
-const showtimePill = defineButtonPersonality({
+const showtimePillRecipe = defineStaticButtonStyleRecipe({
 	id: "showtime-pill",
-	name: "Showtime Pill",
-	description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
+	accessibilityLabel: "Bold uppercase pill buttons with playful movement",
 	tags: {
 		tone: "bold",
 		energy: "vibrant",
 		motion: "expressive",
 		era: "modern"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "pill",
 			shadow: "low",
 			textTransform: "uppercase",
 			fontWeight: 700,
-			borderWidth: 2,
 			hoverTransform: "lift",
-			hoverColor: "darken",
+			hoverColor: "none",
 			typography: "body",
 			paddingPreset: "spacious",
 			italic: false
@@ -4685,272 +4444,373 @@ const showtimePill = defineButtonPersonality({
 				fontSize: "1.125rem"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{ effectId: "pop" }] }
-			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{ effectId: "pop" }] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{ effectId: "pop" }] }
+				}
 			},
-			{
-				id: "hero",
-				name: "Hero",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "secondary"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{ effectId: "pop" }] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{ effectId: "pop" }] }
+				}
 			},
-			{
-				id: "header",
-				name: "Header",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "solid",
-					colorToken: "background"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("background") }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "background" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			accent: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "secondary"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{ effectId: "pop" }] }
+				}
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/soft-pill.ts
-/**
-* Soft Pill — rounded-full pill buttons with a hover lift. The default for
-* Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
-*/
-const softPill = defineButtonPersonality({
-	id: "soft-pill",
-	name: "Soft Pill",
-	description: "Rounded pills with a gentle lift on hover. Quietly modern.",
+const joyStampRecipe = defineStaticButtonStyleRecipe({
+	id: "joy-stamp",
+	accessibilityLabel: "Bold pill buttons with a hard offset shadow",
 	tags: {
-		tone: "classic",
-		energy: "calm",
-		motion: "subtle",
+		tone: "bold",
+		energy: "vibrant",
+		motion: "expressive",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "pill",
-			shadow: "low",
+			shadow: "high",
 			textTransform: "none",
-			fontWeight: 500,
-			borderWidth: 2,
-			hoverTransform: "lift",
+			typography: "heading",
+			fontWeight: 700,
+			fontSize: "text-lg",
+			hoverTransform: "none",
 			hoverColor: "none"
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				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" }
-					}]
+		sizes: {
+			sm: {
+				padding: "0.625rem 1.25rem",
+				fontSize: "text-base"
+			},
+			md: {
+				padding: "0.875rem 1.75rem",
+				fontSize: "text-lg"
+			},
+			lg: {
+				padding: "1.125rem 2.25rem",
+				fontSize: "text-xl"
+			},
+			xl: {
+				padding: "1.25rem 2.75rem",
+				fontSize: "text-2xl"
+			}
+		},
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "high",
+						softness: "hard",
+						position: "bottom-right",
+						colorToken: unsafeAsOpaqueButtonColourToken("text")
+					},
+					effects: { hover: [{ effectId: "press-down" }] }
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					shadow: {
+						elevation: "high",
+						softness: "hard",
+						position: "bottom-right",
+						colorToken: unsafeAsOpaqueButtonColourToken("secondary")
+					},
+					effects: { hover: [{ effectId: "press-down" }] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "derive",
+				from: "secondary"
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{ effectId: "press-down" }] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
-const solidSecondary = {
-	id: "secondary",
-	name: "Secondary",
-	enabled: true,
-	priority: 2,
-	background: {
-		type: "solid",
-		colorToken: unsafeAsOpaqueButtonColourToken("secondary")
-	},
-	borderRadius: "rounded-full",
-	shadow: {
-		elevation: "none",
-		softness: null,
-		position: "bottom"
+const ornateRitualRecipe = defineStaticButtonStyleRecipe({
+	id: "ornate-ritual",
+	accessibilityLabel: "Uppercase framed buttons with restrained movement",
+	tags: {
+		tone: "classic",
+		energy: "vibrant",
+		motion: "subtle",
+		era: "organic"
 	},
-	effects: {
-		hover: [{
-			effectId: "background-on-hover-alpha",
-			options: {
-				colorToken: "secondary",
-				opacity: 88
+	system: {
+		global: {
+			cornerStyle: "rounded",
+			textTransform: "uppercase",
+			fontWeight: 600,
+			hoverTransform: "none",
+			hoverColor: "none",
+			letterSpacing: "loose"
+		},
+		sizes: {
+			sm: {
+				padding: "0.5625rem 1.25rem",
+				fontSize: "text-xs"
+			},
+			md: {
+				padding: "0.75rem 1.75rem",
+				fontSize: "text-xs"
+			},
+			lg: {
+				padding: "0.875rem 2.25rem",
+				fontSize: "text-sm"
+			},
+			xl: {
+				padding: "1rem 2.75rem",
+				fontSize: "text-base"
 			}
-		}],
-		active: [{
-			effectId: "scale-down",
-			options: { scale: "0.98" }
-		}]
+		},
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: {
+						hover: [{
+							effectId: "background-on-hover",
+							options: { colorToken: unsafeAsOpaqueButtonColourToken("primary-100") }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
+				}
+			},
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "secondary"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
+					}] }
+				}
+			},
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("muted") }
+					}] }
+				}
+			},
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					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,
+							origin: "left"
+						}
+					}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
+			}
+		}
 	}
-};
+});
 //#endregion
-//#region ../theme-core/src/buttons/personalities/index.ts
-const buttonPersonalities = [
-	softPill,
-	defineButtonPersonality({
-		id: "two-tone-pill",
-		name: "Two-tone Pill",
-		description: "Rounded pills with distinct solid primary and secondary brand colours.",
-		tags: softPill.tags,
-		buttonSystem: {
-			...softPill.buttonSystem,
-			variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
-		}
-	}),
-	earthPill,
-	confidentChip,
-	editorialLink,
-	pebble,
-	inkStamp,
-	flatInk,
-	brushedWash,
-	showtimePill,
-	joyStamp,
-	ornateRitual,
-	quietArrow
+//#region ../theme-core/src/buttons/styles/registry.ts
+const buttonStyleRecipes = [
+	softPillRecipe,
+	earthPillRecipe,
+	confidentChipRecipe,
+	editorialLinkRecipe,
+	pebbleRecipe,
+	inkStampRecipe,
+	flatInkRecipe,
+	brushedWashRecipe,
+	showtimePillRecipe,
+	joyStampRecipe,
+	ornateRitualRecipe,
+	quietArrowRecipe
 ];
-new Map(buttonPersonalities.map((p) => [p.id, p]));
-buttonPersonalities.map((personality) => ({
-	id: personality.id,
-	name: personality.name,
-	description: personality.description,
-	category: presetCategory(personality),
-	buttonSystem: personality.buttonSystem,
-	compatibility: {
-		...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
-		...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
-	}
-}));
-function presetCategory(personality) {
-	switch (personality.tags.era) {
+const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
+function findButtonStyleRecipe(id) {
+	const recipe = recipesById.get(id);
+	if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
+	return recipe;
+}
+function resolveButtonStyleSelection(selection) {
+	switch (selection.styleId) {
+		case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
+		case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
+		case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
+		case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
+		case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
+		case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
+		case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
+		case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
+		case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
+		case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
+		case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
+		case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
+	}
+}
+function defaultButtonStyleSelectionFor(styleId) {
+	return {
+		styleId,
+		parameters: findButtonStyleRecipe(styleId).defaultParameters
+	};
+}
+if (buttonStyleRecipes.map((recipe) => recipe.id).length !== BUTTON_STYLE_IDS.length || BUTTON_STYLE_IDS.some((id) => !recipesById.has(id))) throw new Error("Button style registry and ButtonStyleId catalog are out of sync");
+buttonStyleRecipes.map((recipe) => {
+	const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
+	if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
+	return {
+		id: recipe.id,
+		name: recipe.accessibilityLabel,
+		description: recipe.accessibilityLabel,
+		category: presetCategory(recipe),
+		buttonSystem: resolved.buttonSystem,
+		compatibility: {
+			...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
+			...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
+		}
+	};
+});
+function presetCategory(recipe) {
+	switch (recipe.tags.era) {
 		case "retro": return "retro";
 		case "editorial": return "minimal";
 		case "organic": return "artistic";
-		case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
+		case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
 		case "technical": return "technical";
 		case void 0: return "modern";
 	}
@@ -5973,6 +5833,102 @@ new Set(themeV2NormalEditorRawStyleFieldNames);
 const pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
 const siteChromeBackgroundOverrideOwner = "site-chrome-editor";
 //#endregion
+//#region ../theme-core/src/utils/colorStyles.ts
+const COLOR_VAR_PREFIX = "--tb-";
+function parseToken(source) {
+	const parts = parseColorTokenParts(source);
+	if (parts.kind === "raw") return {
+		token: source,
+		raw: parts.value
+	};
+	if (parts.kind === "invalid") return { token: source };
+	return {
+		token: parts.token,
+		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
+	};
+}
+const SURFACE_TEXT_ROLE_BY_TOKEN = {
+	text: "text",
+	heading: "heading",
+	mutedText: "supporting"
+};
+function surfaceRoleForTextToken(token) {
+	return Object.prototype.hasOwnProperty.call(SURFACE_TEXT_ROLE_BY_TOKEN, token) ? SURFACE_TEXT_ROLE_BY_TOKEN[token] : null;
+}
+/**
+* Converts a theme color token to a CSS rgb value.
+* This is the primary function for applying theme colors to CSS properties.
+*
+* @param token - Theme color token (semantic, with opacity, or raw)
+* @returns CSS color value (rgb with optional alpha, or raw CSS value)
+*
+* @example
+* rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
+* rgbColorValue('surface/95') // => 'rgb(var(--tb-surface) / 0.95)'
+* rgbColorValue('raw:transparent') // => 'transparent'
+*/
+function rgbColorValue(token) {
+	const { token: baseToken, opacityPercent, raw } = parseToken(token);
+	if (raw) return raw;
+	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
+	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
+	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
+}
+/**
+* Creates a backgroundColor style object from a theme token.
+*
+* @param token - Theme color token
+* @returns CSSProperties with backgroundColor
+*/
+function backgroundColorStyle(token) {
+	return { backgroundColor: rgbColorValue(token) };
+}
+/**
+* Creates a text color style object from a theme token.
+*
+* @param token - Theme color token
+* @returns CSSProperties with color
+*/
+function textColorStyle(token) {
+	const parsed = parseToken(token);
+	const surfaceRole = parsed.raw ? null : surfaceRoleForTextToken(parsed.token);
+	if (surfaceRole) return { color: parsed.opacityPercent === void 0 ? surfaceForegroundValue(surfaceRole) : surfaceForegroundValueWithOpacity(surfaceRole, parsed.opacityPercent) };
+	return { color: rgbColorValue(token) };
+}
+/**
+* Creates a border color style object from a theme token.
+*
+* @param token - Theme color token
+* @returns CSSProperties with borderColor
+*/
+function borderColorStyle(token) {
+	return { borderColor: rgbColorValue(token) };
+}
+/**
+* Merges multiple CSSProperties objects into a single object.
+* Later styles override earlier ones. Undefined values are filtered out.
+* Returns undefined if the merged result is empty.
+*
+* @param styles - Variable number of CSSProperties objects (can be undefined)
+* @returns Merged CSSProperties object, or undefined if empty
+*
+* @example
+* mergeStyles(
+*   backgroundColorStyle('surface'),
+*   textColorStyle('text'),
+*   borderColorStyle('border')
+* )
+* // => { backgroundColor: '...', color: '...', borderColor: '...' }
+*/
+function mergeStyles(...styles) {
+	const merged = {};
+	for (const style of styles) {
+		if (!style) continue;
+		Object.assign(merged, style);
+	}
+	return Object.keys(merged).length ? merged : void 0;
+}
+//#endregion
 //#region ../theme-core/src/utils/tokenOrColor.ts
 /**
 * Runtime color-reference fields intentionally accept any string, including
@@ -9409,309 +9365,77 @@ const headerLookCatalog = defineExactCatalog()([
 	},
 	{
 		id: asHeaderLookId("practical-utility"),
-		label: "Practical utility",
-		visualTreatment: "solid-neutral",
-		layoutBehavior: "sticky-shrink",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "solid-neutral",
-			behavior: "sticky-shrink"
-		},
-		openingRequirement: "none",
-		requiresProminentCta: true,
-		logoAccommodations: inlineClassicLogoAccommodations,
-		compile: practicalUtilityHeader
-	},
-	{
-		id: asHeaderLookId("minimal-transparent"),
-		label: "Minimal transparent",
-		visualTreatment: "minimal-transparent",
-		layoutBehavior: "normal-flow",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "minimal-transparent",
-			behavior: "normal-flow"
-		},
-		openingRequirement: "reserved-space-ok",
-		logoAccommodations: inlineClassicLogoAccommodations,
-		compile: minimalTransparentHeader
-	},
-	{
-		id: asHeaderLookId("transparent-overlay"),
-		label: "Transparent overlay",
-		visualTreatment: "transparent-overlay",
-		layoutBehavior: "fixed-overlay",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "transparent-overlay",
-			behavior: "fixed-overlay"
-		},
-		openingRequirement: "requires-image-hero-with-contrast-overlay",
-		maxRecommendedNavItems: 5,
-		logoAccommodations: overlayLogoAccommodations,
-		compile: transparentOverlayHeader
-	},
-	{
-		id: asHeaderLookId("floating-glass"),
-		label: "Floating glass",
-		visualTreatment: "floating-glass",
-		layoutBehavior: "fixed-floating",
-		configuration: {
-			structure: "floating-shell",
-			treatment: "floating-glass",
-			behavior: "fixed-floating"
-		},
-		openingRequirement: "requires-image-hero-with-contrast-overlay",
-		maxRecommendedNavItems: 5,
-		logoAccommodations: overlayLogoAccommodations,
-		compile: floatingGlassHeader
-	}
-]);
-new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
-new Map(headerLookCatalog.map((look) => [look.id, look]));
-function headerConfigurationKey(configuration) {
-	return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
-}
-//#endregion
-//#region ../theme-core/src/site-styles/footerLooks.ts
-function asFooterLookId(value) {
-	return value;
-}
-function asFooterLayoutId(value) {
-	return value;
-}
-function asFooterStyleId(value) {
-	return value;
-}
-const footerLayoutCatalog = defineExactCatalog()([
-	{
-		id: asFooterLayoutId("identity"),
-		label: "Identity",
-		description: "Logo, site text, address, and legal copy without relying on footer navigation."
-	},
-	{
-		id: asFooterLayoutId("centered"),
-		label: "Centered",
-		description: "A calm centered stack for identity, short copy, and optional compact navigation.",
-		maxRecommendedNavDensity: "sparse"
-	},
-	{
-		id: asFooterLayoutId("split"),
-		label: "Split",
-		description: "Navigation and brand signoff separated into a wider split footer.",
-		requiresFooterNav: true,
-		maxRecommendedNavDensity: "balanced"
-	},
-	{
-		id: asFooterLayoutId("columns"),
-		label: "Columns",
-		description: "Grouped footer navigation columns with a supporting bottom line.",
-		requiresFooterNav: true,
-		requiresFooterNavGroups: true
-	}
-]);
-const footerStyleCatalog = defineExactCatalog()([
-	{
-		id: asFooterStyleId("quiet"),
-		label: "Quiet",
-		description: "Lightweight, practical footer treatment."
-	},
-	{
-		id: asFooterStyleId("calm"),
-		label: "Calm",
-		description: "Soft centered treatment with restrained dividers."
-	},
-	{
-		id: asFooterStyleId("editorial"),
-		label: "Editorial",
-		description: "Text-forward treatment with fine-line structure."
-	},
-	{
-		id: asFooterStyleId("brand-band"),
-		label: "Brand band",
-		description: "High-contrast brand treatment with a stronger bottom bar."
-	}
-]);
-new Map(footerLayoutCatalog.map((layout) => [layout.id, layout]));
-new Map(footerStyleCatalog.map((style) => [style.id, style]));
-/**
-* No-nav-safe identity footer: brand and legal/supporting copy carry the
-* footer without implying missing navigation.
-*/
-function identityQuietFooter(theme) {
-	return {
-		...theme.footer,
-		variant: "simple",
-		maxWidth: "container",
-		background: {
-			type: "color",
-			color: "surface"
-		},
-		navStyle: "minimal",
-		navWeight: "regular",
-		navColor: "text",
-		navLinkStyle: {
-			typography: "body",
-			fontWeight: "regular",
-			textTransform: "none",
-			italic: false,
-			colorToken: "text",
-			hoverColorToken: "primary",
-			padding: "none",
-			borderRadius: "none"
-		},
-		navLayout: {
-			layout: "inline-wrap",
-			align: "start",
-			gapX: "default",
-			gapY: "tight"
-		},
-		logo: {
-			showLogo: true,
-			showLogoText: true,
-			placement: "left",
-			size: "sm",
-			align: "start"
-		},
-		bottomBar: {
-			enabled: false,
-			fullBleed: false,
-			textAlign: "left",
-			paddingX: "default",
-			paddingY: "compact",
-			borderTop: { width: "none" }
-		}
-	};
-}
-/**
-* Back-compat alias for the previous default footer Look. It keeps existing
-* persisted selections valid while staying hidden from the new layout/style UI.
-*/
-function mutedGroundingFooter(theme) {
-	return {
-		...identityQuietFooter(theme),
-		background: theme.footer.background,
-		navStyle: theme.footer.navStyle,
-		navColor: theme.footer.navColor,
-		navWeight: theme.footer.navWeight,
-		navLinkStyle: theme.footer.navLinkStyle,
-		bottomTextLinkStyle: theme.footer.bottomTextLinkStyle
-	};
-}
-/** Applies a high-contrast brand band with a darker full-bleed bottom bar. */
-function brandTwoBandFooter(theme) {
-	return {
-		...theme.footer,
-		variant: "split",
-		maxWidth: "container",
-		background: {
-			type: "color",
-			color: "primary-800"
-		},
-		navStyle: "minimal",
-		navWeight: "medium",
-		navColor: "primaryForeground",
-		navLinkStyle: {
-			typography: "body",
-			fontWeight: "medium",
-			textTransform: "none",
-			italic: false,
-			colorToken: "primaryForeground",
-			hoverColorToken: "secondary",
-			padding: "none",
-			borderRadius: "none"
-		},
-		bottomTextLinkStyle: {
-			colorToken: "secondary",
-			decorationColorToken: "secondary"
-		},
-		navLayout: {
-			layout: "inline-wrap",
-			align: "start",
-			gapX: "default",
-			gapY: "tight"
-		},
-		logo: {
-			showLogo: true,
-			showLogoText: false,
-			placement: "left",
-			size: "sm",
-			align: "start"
-		},
-		bottomBar: {
-			enabled: true,
-			fullBleed: true,
-			background: {
-				type: "color",
-				color: "primary-900"
-			},
-			textColor: "primaryForeground",
-			textAlign: "center",
-			paddingX: "default",
-			paddingY: "compact",
-			borderTop: { width: "none" }
-		}
-	};
-}
-/**
-* Centered stack on a softly tinted band: logo, inline nav, address, and a
-* hairline-topped copyright line, all centered.
-*/
-function centeredCalmFooter(theme) {
-	return {
-		...theme.footer,
-		variant: "simple",
-		maxWidth: "container",
-		background: {
-			type: "color",
-			color: "surfaceAlt"
+		label: "Practical utility",
+		visualTreatment: "solid-neutral",
+		layoutBehavior: "sticky-shrink",
+		configuration: {
+			structure: "inline-classic",
+			treatment: "solid-neutral",
+			behavior: "sticky-shrink"
 		},
-		navStyle: "minimal",
-		navWeight: "regular",
-		navColor: "text",
-		navLinkStyle: {
-			typography: "body",
-			fontWeight: "regular",
-			textTransform: "none",
-			italic: false,
-			colorToken: "text",
-			hoverColorToken: "primary",
-			padding: "none",
-			borderRadius: "none"
+		openingRequirement: "none",
+		requiresProminentCta: true,
+		logoAccommodations: inlineClassicLogoAccommodations,
+		compile: practicalUtilityHeader
+	},
+	{
+		id: asHeaderLookId("minimal-transparent"),
+		label: "Minimal transparent",
+		visualTreatment: "minimal-transparent",
+		layoutBehavior: "normal-flow",
+		configuration: {
+			structure: "inline-classic",
+			treatment: "minimal-transparent",
+			behavior: "normal-flow"
 		},
-		navLayout: {
-			layout: "inline-wrap",
-			align: "center",
-			gapX: "relaxed",
-			gapY: "tight"
+		openingRequirement: "reserved-space-ok",
+		logoAccommodations: inlineClassicLogoAccommodations,
+		compile: minimalTransparentHeader
+	},
+	{
+		id: asHeaderLookId("transparent-overlay"),
+		label: "Transparent overlay",
+		visualTreatment: "transparent-overlay",
+		layoutBehavior: "fixed-overlay",
+		configuration: {
+			structure: "inline-classic",
+			treatment: "transparent-overlay",
+			behavior: "fixed-overlay"
 		},
-		logo: {
-			showLogo: true,
-			showLogoText: false,
-			placement: "above",
-			size: "sm",
-			align: "center"
+		openingRequirement: "requires-image-hero-with-contrast-overlay",
+		maxRecommendedNavItems: 5,
+		logoAccommodations: overlayLogoAccommodations,
+		compile: transparentOverlayHeader
+	},
+	{
+		id: asHeaderLookId("floating-glass"),
+		label: "Floating glass",
+		visualTreatment: "floating-glass",
+		layoutBehavior: "fixed-floating",
+		configuration: {
+			structure: "floating-shell",
+			treatment: "floating-glass",
+			behavior: "fixed-floating"
 		},
-		bottomBar: {
-			enabled: true,
-			fullBleed: false,
-			textAlign: "center",
-			paddingX: "default",
-			paddingY: "compact",
-			borderTop: { width: "thin" }
-		}
-	};
+		openingRequirement: "requires-image-hero-with-contrast-overlay",
+		maxRecommendedNavItems: 5,
+		logoAccommodations: overlayLogoAccommodations,
+		compile: floatingGlassHeader
+	}
+]);
+new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
+new Map(headerLookCatalog.map((look) => [look.id, look]));
+function headerConfigurationKey(configuration) {
+	return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
+}
+//#endregion
+//#region ../theme-core/src/site-styles/footerLooks.ts
+function asFooterLookId(value) {
+	return value;
 }
-/** Editorial split footer: compact nav on one side, brand signoff on the other. */
-function splitEditorialFooter(theme) {
+function quietFooterLinks(theme) {
 	return {
 		...theme.footer,
-		variant: "split",
-		maxWidth: "container",
-		background: {
-			type: "color",
-			color: "surface"
-		},
 		navStyle: "minimal",
 		navWeight: "regular",
 		navColor: "text",
@@ -9724,120 +9448,38 @@ function splitEditorialFooter(theme) {
 			hoverColorToken: "primary",
 			padding: "none",
 			borderRadius: "none"
-		},
-		navLayout: {
-			layout: "inline-wrap",
-			align: "start",
-			gapX: "relaxed",
-			gapY: "tight"
-		},
-		logo: {
-			showLogo: true,
-			showLogoText: true,
-			placement: "right",
-			size: "sm",
-			align: "end"
-		},
-		bottomBar: {
-			enabled: true,
-			fullBleed: false,
-			textAlign: "left",
-			paddingX: "default",
-			paddingY: "compact",
-			borderTop: { width: "thin" }
 		}
 	};
 }
-/**
-* Editorial columns: site name and supporting copy on the left, inline nav on
-* the right, with a hairline-topped bottom line. Uses the footer block's
-* columns layout.
-*/
-function editorialColumnsFooter(theme) {
+function emphasizedFooterLinks(theme) {
 	return {
 		...theme.footer,
-		variant: "columns",
-		maxWidth: "container",
-		background: {
-			type: "color",
-			color: "surface"
-		},
 		navStyle: "minimal",
-		navWeight: "regular",
+		navWeight: "medium",
 		navColor: "text",
 		navLinkStyle: {
 			typography: "body",
-			fontWeight: "regular",
+			fontWeight: "medium",
 			textTransform: "none",
 			italic: false,
 			colorToken: "text",
 			hoverColorToken: "primary",
 			padding: "none",
 			borderRadius: "none"
-		},
-		logo: {
-			showLogo: true,
-			showLogoText: true,
-			placement: "left",
-			size: "sm",
-			align: "start"
-		},
-		bottomBar: {
-			enabled: true,
-			fullBleed: false,
-			textAlign: "center",
-			paddingX: "default",
-			paddingY: "compact",
-			borderTop: { width: "thin" }
 		}
 	};
 }
-const footerLookCatalog = defineExactCatalog()([
-	{
-		id: asFooterLookId("footer-identity-quiet"),
-		label: "Identity footer",
-		layoutId: asFooterLayoutId("identity"),
-		styleId: asFooterStyleId("quiet"),
-		compile: identityQuietFooter
-	},
-	{
-		id: asFooterLookId("footer-muted-grounding"),
-		label: "Muted grounding footer",
-		layoutId: asFooterLayoutId("identity"),
-		styleId: asFooterStyleId("quiet"),
-		hiddenFromLayoutStyleControls: true,
-		compile: mutedGroundingFooter
-	},
-	{
-		id: asFooterLookId("footer-centered-calm"),
-		label: "Centered calm footer",
-		layoutId: asFooterLayoutId("centered"),
-		styleId: asFooterStyleId("calm"),
-		compile: centeredCalmFooter
-	},
-	{
-		id: asFooterLookId("footer-split-editorial"),
-		label: "Split editorial footer",
-		layoutId: asFooterLayoutId("split"),
-		styleId: asFooterStyleId("editorial"),
-		compile: splitEditorialFooter
-	},
-	{
-		id: asFooterLookId("footer-editorial-columns"),
-		label: "Editorial columns footer",
-		layoutId: asFooterLayoutId("columns"),
-		styleId: asFooterStyleId("editorial"),
-		compile: editorialColumnsFooter
-	},
-	{
-		id: asFooterLookId("site-footer-brand-two-band"),
-		label: "Two-band brand footer",
-		layoutId: asFooterLayoutId("split"),
-		styleId: asFooterStyleId("brand-band"),
-		allowedContentPresence: ["default-footer", "default-and-blocks"],
-		compile: brandTwoBandFooter
-	}
-]);
+const footerLookCatalog = defineExactCatalog()([{
+	id: asFooterLookId("footer-links-quiet"),
+	label: "Quiet links",
+	description: "Regular-weight footer navigation with a restrained hover.",
+	compile: quietFooterLinks
+}, {
+	id: asFooterLookId("footer-links-emphasized"),
+	label: "Emphasized links",
+	description: "Medium-weight footer navigation with a clearer emphasis.",
+	compile: emphasizedFooterLinks
+}]);
 new Map(footerLookCatalog.map((look) => [look.id, look]));
 //#endregion
 //#region ../theme-core/src/site-styles/sourceCatalogs.ts
@@ -10966,17 +10608,21 @@ function defineCuratedSiteStyle(input) {
 		})),
 		recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
 		recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
-		buttonPersonalityChoices: input.buttonPersonalityChoices,
+		buttonStyleChoices: input.buttonStyleChoices,
 		paletteRecommendations: input.paletteRecommendations,
 		typography: input.typography ?? defaultTypographyForRecipe(input.tokenRecipes.typography),
 		...input.heroTypography ? { heroTypography: input.heroTypography } : {}
 	};
 }
-function buttonChoice(id, note) {
+function buttonChoice(styleId, note, parameters) {
+	const selection = parameters === void 0 ? defaultButtonStyleSelectionFor(styleId) : buttonStyleSelectionSchema.parse({
+		styleId,
+		parameters
+	});
 	return note ? {
-		id: asButtonPersonalityId(id),
+		...selection,
 		note
-	} : { id: asButtonPersonalityId(id) };
+	} : selection;
 }
 function paletteRecommendation(authoringKey, note) {
 	const valueKey = requireCuratedPaletteValueKey(asCuratedPaletteAuthoringKey(authoringKey));
@@ -11161,9 +10807,8 @@ const curatedSiteStyles = [
 			"minimal-transparent",
 			"clean-base"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("soft-pill"),
-			buttonChoice("two-tone-pill"),
 			buttonChoice("pebble"),
 			buttonChoice("editorial-link"),
 			buttonChoice("brushed-wash")
@@ -11199,7 +10844,7 @@ const curatedSiteStyles = [
 			"brand-solid",
 			"clean-base"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("confident-chip"),
 			buttonChoice("soft-pill"),
 			buttonChoice("editorial-link")
@@ -11238,7 +10883,7 @@ const curatedSiteStyles = [
 			"minimal-transparent",
 			"centered-calm"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("editorial-link"),
 			buttonChoice("soft-pill"),
 			buttonChoice("brushed-wash")
@@ -11278,7 +10923,7 @@ const curatedSiteStyles = [
 			"practical-utility",
 			"clean-base"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("pebble"),
 			buttonChoice("brushed-wash"),
 			buttonChoice("confident-chip")
@@ -11339,7 +10984,7 @@ const curatedSiteStyles = [
 			"serif-line",
 			"clean-base"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("editorial-link"),
 			buttonChoice("confident-chip"),
 			buttonChoice("soft-pill")
@@ -11401,7 +11046,7 @@ const curatedSiteStyles = [
 			"brand-solid",
 			"clean-base"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("confident-chip"),
 			buttonChoice("pebble"),
 			buttonChoice("ink-stamp")
@@ -11440,7 +11085,7 @@ const curatedSiteStyles = [
 			"minimal-transparent",
 			"clean-base"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("soft-pill"),
 			buttonChoice("pebble"),
 			buttonChoice("confident-chip")
@@ -11513,7 +11158,7 @@ const curatedSiteStyles = [
 			"clean-base",
 			"centered-calm"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("pebble"),
 			buttonChoice("soft-pill"),
 			buttonChoice("editorial-link")
@@ -11632,12 +11277,8 @@ const curatedSiteStyles = [
 			"serif-line",
 			"minimal-transparent"
 		],
-		recommendedFooterLookIds: [
-			"footer-centered-calm",
-			"footer-editorial-columns",
-			"footer-muted-grounding"
-		],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-quiet"],
+		buttonStyleChoices: [
 			buttonChoice("soft-pill"),
 			buttonChoice("pebble"),
 			buttonChoice("editorial-link")
@@ -11711,7 +11352,7 @@ const curatedSiteStyles = [
 			"centered-calm",
 			"minimal-transparent"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("editorial-link"),
 			buttonChoice("soft-pill"),
 			buttonChoice("brushed-wash")
@@ -11784,8 +11425,8 @@ const curatedSiteStyles = [
 			"practical-utility",
 			"clean-base"
 		],
-		recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
+		buttonStyleChoices: [
 			buttonChoice("pebble"),
 			buttonChoice("confident-chip"),
 			buttonChoice("ink-stamp"),
@@ -11906,8 +11547,8 @@ const curatedSiteStyles = [
 			"minimal-transparent",
 			"serif-line"
 		],
-		recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-quiet", "footer-links-emphasized"],
+		buttonStyleChoices: [
 			buttonChoice("earth-pill"),
 			buttonChoice("soft-pill"),
 			buttonChoice("pebble"),
@@ -11978,7 +11619,7 @@ const curatedSiteStyles = [
 			"floating-glass",
 			"brand-solid"
 		],
-		buttonPersonalityChoices: [
+		buttonStyleChoices: [
 			buttonChoice("ink-stamp"),
 			buttonChoice("confident-chip"),
 			buttonChoice("brushed-wash"),
@@ -12033,8 +11674,8 @@ const curatedSiteStyles = [
 			"transparent-overlay",
 			"practical-utility"
 		],
-		recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
+		buttonStyleChoices: [
 			buttonChoice("showtime-pill"),
 			buttonChoice("confident-chip"),
 			buttonChoice("ink-stamp"),
@@ -12115,8 +11756,8 @@ const curatedSiteStyles = [
 			headerStyleChoice("glass")
 		] },
 		recommendedHeaderLookIds: ["minimal-transparent"],
-		recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
+		buttonStyleChoices: [
 			buttonChoice("ornate-ritual"),
 			buttonChoice("joy-stamp"),
 			buttonChoice("ink-stamp")
@@ -12169,8 +11810,8 @@ const curatedSiteStyles = [
 			headerStyleChoice("glass")
 		] },
 		recommendedHeaderLookIds: ["minimal-transparent"],
-		recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
+		buttonStyleChoices: [
 			buttonChoice("joy-stamp"),
 			buttonChoice("ink-stamp"),
 			buttonChoice("showtime-pill")
@@ -12260,8 +11901,8 @@ const curatedSiteStyles = [
 			"centered-calm",
 			"clean-base"
 		],
-		recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
-		buttonPersonalityChoices: [
+		recommendedFooterLookIds: ["footer-links-quiet"],
+		buttonStyleChoices: [
 			buttonChoice("flat-ink"),
 			buttonChoice("confident-chip"),
 			buttonChoice("editorial-link")
@@ -12338,14 +11979,9 @@ const curatedSiteStyles = [
 			"serif-line",
 			"clean-base"
 		],
-		recommendedFooterLookIds: [
-			"footer-editorial-columns",
-			"footer-muted-grounding",
-			"footer-identity-quiet"
-		],
-		buttonPersonalityChoices: [
-			buttonChoice("quiet-arrow"),
-			buttonChoice("two-tone-pill"),
+		recommendedFooterLookIds: ["footer-links-quiet"],
+		buttonStyleChoices: [
+			buttonChoice("quiet-arrow", void 0, { secondaryTreatment: "solid-accent" }),
 			buttonChoice("flat-ink"),
 			buttonChoice("editorial-link")
 		],
@@ -13286,6 +12922,7 @@ const DISPLAY_MEDIA_KINDS = [
 	"video",
 	"audio"
 ];
+const DEFAULT_MEDIA_FIELD_KINDS = ["image"];
 const PUBLIC_FILE_FIELD_KINDS = [
 	"document",
 	"spreadsheet",
@@ -13486,18 +13123,28 @@ const inlineTextFieldSchema = baseFieldSchema.extend({
 	maxLength: z$1.number().int().positive().optional(),
 	plainTextField: z$1.string().min(1).optional()
 });
+function hasMediaDefaultIdentifier(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value) && typeof value.identifier === "string" && value.identifier.trim().length > 0;
+}
+function validateMediaFieldDefault(field, ctx) {
+	if (field.defaultValue !== void 0 && field.defaultValue !== null && !hasMediaDefaultIdentifier(field.defaultValue)) ctx.addIssue({
+		code: z$1.ZodIssueCode.custom,
+		path: ["defaultValue"],
+		message: `${field.type} defaultValue must be null or an object with a non-empty identifier`
+	});
+}
 const mediaFieldSchema = baseFieldSchema.extend({
 	type: z$1.literal("media"),
-	mediaKinds: z$1.array(z$1.enum(MEDIA_KINDS)).default(["image"]).transform((kinds) => {
+	mediaKinds: z$1.array(z$1.enum(MEDIA_KINDS)).default([...DEFAULT_MEDIA_FIELD_KINDS]).transform((kinds) => {
 		const displayKinds = kinds.filter(isDisplayMediaKind);
-		return displayKinds.length > 0 ? displayKinds : ["image"];
+		return displayKinds.length > 0 ? displayKinds : [...DEFAULT_MEDIA_FIELD_KINDS];
 	}),
 	aspectRatio: z$1.string().optional()
-});
+}).superRefine(validateMediaFieldDefault);
 const fileFieldSchema = baseFieldSchema.extend({
 	type: z$1.literal("file"),
 	fileKinds: z$1.array(z$1.enum(PUBLIC_FILE_FIELD_KINDS)).default([...PUBLIC_FILE_FIELD_KINDS])
-});
+}).superRefine(validateMediaFieldDefault);
 const booleanFieldSchema = baseFieldSchema.extend({ type: z$1.literal("boolean") });
 const dateFieldSchema = baseFieldSchema.extend({ type: z$1.literal("date") });
 const timeFieldSchema = baseFieldSchema.extend({ type: z$1.literal("time") });
@@ -16291,25 +15938,41 @@ const heroLayoutControlsFragment = defineFragment({
 	layout: []
 });
 //#endregion
+//#region ../blocks/src/system/constants/buttonRoles.ts
+/**
+* Semantic button roles available to block authors.
+*
+* These roles are deliberately independent of a site's visual button style:
+* the active theme owns how each role looks.
+*/
+const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
+const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
+/**
+* Temporary rollout boundary for persisted content written before issue #1220.
+* Authoring remains strict through `blockButtonRoleSchema`; this parser exists
+* only until the post-deploy role rewrite has been audited in production.
+*/
+function canonicalizePersistedBlockButtonRole(value) {
+	return value === "link" || value === "tertiary" ? "ghost" : value;
+}
+const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
+const BLOCK_BUTTON_ROLE_LABELS = {
+	primary: "Primary",
+	secondary: "Secondary",
+	outline: "Outline",
+	ghost: "Ghost",
+	accent: "Accent"
+};
+const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
+	value,
+	label: BLOCK_BUTTON_ROLE_LABELS[value]
+}));
+function isBlockButtonRole(value) {
+	return blockButtonRoleSchema.safeParse(value).success;
+}
+//#endregion
 //#region ../blocks/src/system/fields/button.ts
-const DEFAULT_THEME_BUTTON_VARIANTS = [
-	{
-		value: "primary",
-		label: "Primary"
-	},
-	{
-		value: "secondary",
-		label: "Secondary"
-	},
-	{
-		value: "outline",
-		label: "Outline"
-	},
-	{
-		value: "link",
-		label: "Link"
-	}
-];
+const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
 function createButtonVariantField(options = {}) {
 	return {
 		id: options.id ?? "buttonVariant",
@@ -16327,20 +15990,7 @@ function createButtonVariantField(options = {}) {
 	};
 }
 function createButtonGroup(options = {}) {
-	const { variants = [
-		{
-			value: "primary",
-			label: "Primary"
-		},
-		{
-			value: "secondary",
-			label: "Secondary"
-		},
-		{
-			value: "outline",
-			label: "Outline"
-		}
-	], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
+	const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
 	const mainFields = [
 		{
 			id: "label",
@@ -16476,29 +16126,7 @@ const ctaRowFragment = defineFragment({
 	fields: [createCtasRepeater({
 		label: "Calls to action",
 		itemLabel: "CTA",
-		maxItems: 3,
-		button: { variants: [
-			{
-				value: "primary",
-				label: "Primary"
-			},
-			{
-				value: "secondary",
-				label: "Secondary"
-			},
-			{
-				value: "outline",
-				label: "Outline"
-			},
-			{
-				value: "link",
-				label: "Link"
-			},
-			{
-				value: "accent",
-				label: "Accent"
-			}
-		] }
+		maxItems: 3
 	})],
 	layout: [ctaRow({
 		collectionPath: "content.ctas",
@@ -16517,10 +16145,6 @@ const heroCtaRowFragment = defineFragment({
 		defaultValue: [],
 		button: {
 			variants: [
-				{
-					value: "default",
-					label: "Default"
-				},
 				{
 					value: "primary",
 					label: "Primary"
@@ -16532,9 +16156,17 @@ const heroCtaRowFragment = defineFragment({
 				{
 					value: "outline",
 					label: "Outline"
+				},
+				{
+					value: "ghost",
+					label: "Ghost"
+				},
+				{
+					value: "accent",
+					label: "Accent"
 				}
 			],
-			defaultVariant: "default",
+			defaultVariant: "primary",
 			includeSize: true,
 			defaultSize: "lg"
 		}
@@ -17225,11 +16857,13 @@ const blogFeaturedPostFragment = defineFragment({
 			as: "p",
 			style: textColorStyle("text/80")
 		}, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
-		link({
-			className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
-			style: textColorStyle("primary"),
-			href: { $bind: { from: "post.path" } }
-		}, [text({ as: "strong" }, props({ value: "Read more →" }))])
+		button({
+			className: "rb-self-start",
+			href: { $bind: { from: "post.path" } },
+			variantId: "ghost",
+			size: "sm",
+			linkRequired: true
+		}, [text({ as: "span" }, props({ value: "Read more" }))])
 	])], when("post")), stack({
 		gap: "sm",
 		className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -17500,21 +17134,7 @@ const newsletterFormFragment = defineFragment({
 		createButtonVariantField({
 			id: "buttonVariant",
 			label: "Button style",
-			defaultValue: "primary",
-			variants: [
-				{
-					value: "primary",
-					label: "Primary"
-				},
-				{
-					value: "secondary",
-					label: "Secondary"
-				},
-				{
-					value: "outline",
-					label: "Outline"
-				}
-			]
+			defaultValue: "primary"
 		}),
 		{
 			id: "successMessage",
@@ -19063,7 +18683,8 @@ function postExcerpt(className) {
 function postReadMore() {
 	return button({
 		href: { $bind: { from: "post.path" } },
-		className: "rb-self-start"
+		className: "rb-self-start",
+		variantId: "ghost"
 	}, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
 		as: "span",
 		value: "Read more"
@@ -21338,31 +20959,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
 					label: "Calls to action",
 					itemLabel: "CTA",
 					maxItems: 1,
-					button: {
-						variants: [
-							{
-								value: "primary",
-								label: "Primary"
-							},
-							{
-								value: "secondary",
-								label: "Secondary"
-							},
-							{
-								value: "outline",
-								label: "Outline"
-							},
-							{
-								value: "ghost",
-								label: "Ghost"
-							},
-							{
-								value: "link",
-								label: "Link"
-							}
-						],
-						defaultVariant: "ghost"
-					}
+					button: { defaultVariant: "ghost" }
 				})
 			] }
 		},
@@ -22335,11 +21932,8 @@ const mediaSchema = z.discriminatedUnion("type", [
 * This module provides a single source of truth for TipTap rich text validation
 * across both the block-form editor and the block rendering system.
 *
-* Format compatibility:
-* - Unwrapped format (new): { type: 'doc', content: [...] }
-* - Wrapped format (legacy): { doc: { type: 'doc', content: [...] } }
-*
-* Both formats are supported for backward compatibility during migration.
+* Rich-text fields use one canonical root shape:
+* `{ type: 'doc', content: [...] }`.
 */
 /**
 * TipTap document node schema (recursive structure)
@@ -22352,17 +21946,40 @@ const mediaSchema = z.discriminatedUnion("type", [
 * - marks: Text formatting marks (e.g., bold, italic)
 */
 const TipTapMarkSchema = z$1.object({
-	type: z$1.string(),
+	type: z$1.string().min(1),
 	attrs: z$1.record(z$1.string(), z$1.unknown()).optional()
-});
+}).strict();
 const TipTapNodeSchema = z$1.lazy(() => z$1.object({
-	type: z$1.string(),
+	type: z$1.string().min(1),
 	content: z$1.array(TipTapNodeSchema).optional(),
 	text: z$1.string().optional(),
 	attrs: z$1.record(z$1.string(), z$1.unknown()).optional(),
 	marks: z$1.array(TipTapMarkSchema).optional()
+}).strict().superRefine((node, ctx) => {
+	if (node.type === "doc") ctx.addIssue({
+		code: "custom",
+		path: ["type"],
+		message: "Document nodes are only valid at the rich-text root"
+	});
+	if (node.type === "text") {
+		if (node.text === void 0 || node.text.length === 0) ctx.addIssue({
+			code: "custom",
+			path: ["text"],
+			message: "Text nodes require a non-empty text value"
+		});
+		if (node.content !== void 0) ctx.addIssue({
+			code: "custom",
+			path: ["content"],
+			message: "Text nodes cannot contain child nodes"
+		});
+		return;
+	}
+	if (node.text !== void 0) ctx.addIssue({
+		code: "custom",
+		path: ["text"],
+		message: "Only text nodes can contain a text value"
+	});
 }));
-z$1.union([TipTapNodeSchema, z$1.object({ doc: TipTapNodeSchema })]);
 /**
 * Canonical schema for a TipTap rich-text document root.
 *
@@ -22371,13 +21988,11 @@ z$1.union([TipTapNodeSchema, z$1.object({ doc: TipTapNodeSchema })]);
 * (dummy content, editor output, migrations) must emit, and the shape every
 * non-legacy consumer can rely on.
 *
-* Legacy envelopes are read-tolerated by {@link RichTextValueSchema} but
-* normalised before reaching anywhere typed as `RichTextDoc`.
 */
 const RichTextDocSchema = z$1.object({
 	type: z$1.literal("doc"),
 	content: z$1.array(TipTapNodeSchema)
-});
+}).strict();
 function createHardBreakNode() {
 	return { type: "hardBreak" };
 }
@@ -23525,17 +23140,8 @@ function readAmount(value) {
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
 const previewStageSchema = z$1.enum(["preview", "published"]);
-const registrationButtonVariantSchema = z$1.enum([
-	"primary",
-	"secondary",
-	"outline"
-]);
-const eventButtonVariantSchema = z$1.enum([
-	"primary",
-	"secondary",
-	"outline",
-	"link"
-]);
+const registrationButtonVariantSchema = blockButtonRoleSchema;
+const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
 const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
 const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
 const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -23900,23 +23506,7 @@ const eventRegistrationBlockDefinition = {
 				defaultValue: "Complete Registration",
 				maxLength: 40
 			},
-			createButtonVariantField({
-				description: "Choose a button style from your theme",
-				variants: [
-					{
-						value: "primary",
-						label: "Primary"
-					},
-					{
-						value: "secondary",
-						label: "Secondary"
-					},
-					{
-						value: "outline",
-						label: "Outline"
-					}
-				]
-			})
+			createButtonVariantField()
 		],
 		layout: [styledSection({
 			baseClass: "",
@@ -24223,23 +23813,7 @@ const courseRegistrationBlockDefinition = {
 				defaultValue: "Sign up",
 				maxLength: 40
 			},
-			createButtonVariantField({
-				description: "Choose a button style from your theme",
-				variants: [
-					{
-						value: "primary",
-						label: "Primary"
-					},
-					{
-						value: "secondary",
-						label: "Secondary"
-					},
-					{
-						value: "outline",
-						label: "Outline"
-					}
-				]
-			})
+			createButtonVariantField()
 		],
 		layout: [styledSection({
 			baseClass: "",
@@ -27104,36 +26678,7 @@ const offeringsPreviewFields = [
 		ui: { intent: "content" },
 		schema: { fields: groupOverrideFields }
 	},
-	{
-		id: "buttonVariant",
-		type: "select",
-		label: "Button style",
-		required: false,
-		multiple: false,
-		defaultValue: "primary",
-		options: [
-			{
-				value: "primary",
-				label: "Primary"
-			},
-			{
-				value: "secondary",
-				label: "Secondary"
-			},
-			{
-				value: "outline",
-				label: "Outline"
-			},
-			{
-				value: "link",
-				label: "Link"
-			}
-		],
-		ui: {
-			intent: "display",
-			widget: "buttonVariant"
-		}
-	},
+	createButtonVariantField(),
 	{
 		id: "buttonText",
 		type: "text",
@@ -27339,7 +26884,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
 	return [override];
 }
 function isButtonVariant(value) {
-	return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
+	return value === null || isBlockButtonRole(value);
 }
 function normalizeCardStylesContent(value) {
 	return isRecord$1(value) || value === null ? value : void 0;
@@ -29191,12 +28736,7 @@ const shopSourceSchema = z$1.object({
 	showPrices: z$1.boolean().optional(),
 	showValidityPeriod: z$1.boolean().optional(),
 	showPricePerCredit: z$1.boolean().nullable().optional(),
-	buttonVariant: z$1.enum([
-		"primary",
-		"secondary",
-		"outline",
-		"link"
-	]).optional(),
+	buttonVariant: blockButtonRoleSchema.optional(),
 	passesHeading: z$1.string().optional(),
 	membershipsHeading: z$1.string().optional(),
 	buyButtonText: z$1.string().optional(),
@@ -29341,12 +28881,7 @@ const passesMembershipsHydrationSchema = z$1.object({
 	passes: z$1.array(publicPassProductSchema),
 	memberships: z$1.array(publicMembershipProductSchema),
 	passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
-	buttonVariant: z$1.enum([
-		"primary",
-		"secondary",
-		"outline",
-		"link"
-	])
+	buttonVariant: blockButtonRoleSchema
 });
 const productListHydrationSchema = z$1.object({
 	products: z$1.array(publicProductSchema),
@@ -30670,11 +30205,7 @@ const newsletterPresetSchema = z$1.enum([
 	"emailNameCompany"
 ]);
 const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
-const newsletterButtonVariantSchema = z$1.enum([
-	"primary",
-	"secondary",
-	"outline"
-]);
+const newsletterButtonVariantSchema = blockButtonRoleSchema;
 const newsletterFieldSchema = z$1.object({
 	id: z$1.string(),
 	type: z$1.enum(["email", "text"]),
@@ -35209,17 +34740,12 @@ function stringToTipTapDoc(text) {
 * Handles:
 * - Plain strings → TipTap doc with paragraphs
 * - Already valid TipTap docs → pass through
-* - Legacy { doc: {...} } wrapper → unwrap
 */
 function coerceRichTextDefaultValue(value) {
 	if (value === null || value === void 0) return null;
-	if (value && typeof value === "object" && "doc" in value) {
-		const doc = value.doc;
-		if (doc && typeof doc === "object" && "type" in doc) return doc;
-	}
 	if (typeof value === "string") return stringToTipTapDoc(value);
-	if (value && typeof value === "object" && "type" in value) return value;
-	return null;
+	const parsed = RichTextDocSchema.safeParse(value);
+	return parsed.success ? parsed.data : null;
 }
 /**
 * Check if a Pass 1 field is a repeater field.
@@ -36294,7 +35820,7 @@ ${fieldList}
 
 1. **Text fields**: Extract plain text content, strip HTML tags
 2. **RichText fields**: Preserve structure as simplified JSON (type: "doc", content: [...])
-3. **Media fields**: Extract src URL, alt text → { src: "...", alt: "..." }
+3. **Media fields**: Use only an existing CMS media identifier → { type: "image", identifier: "...", alt: "..." }. Never emit a URL-only media object or invent an identifier; omit the field if no identifier is available.
 4. **Link fields**: Extract href, label → { href: "...", label: "..." }
 5. **Repeater fields**: Create array of objects with item field values
 6. **Select fields**: Match to one of the allowed options