@riverbankcms/sdk 0.104.1 → 0.104.3

package/dist/server/theme-bridge.mjs

@@ -367,6 +367,10 @@ const buttonBorderSchema = z$1.object({
 	widthClass: z$1.string(),
 	colorToken: themeColorTokenSchema
 });
+const buttonVariantAffordanceSchema = z$1.object({
+	iconId: z$1.string().min(1),
+	colorToken: themeColorTokenSchema.optional()
+});
 const variantShadowSchema = z$1.object({
 	elevation: z$1.enum([
 		"none",
@@ -420,7 +424,8 @@ const buttonVariantSchema = z$1.object({
 	border: buttonBorderSchema.optional(),
 	hoverBackgroundToken: z$1.string().optional(),
 	effects: variantEffectsSchema.optional(),
-	sizes: variantSizeOverridesSchema.optional()
+	sizes: variantSizeOverridesSchema.optional(),
+	affordance: buttonVariantAffordanceSchema.optional()
 });
 const buttonSystemSchema = z$1.object({
 	global: buttonGlobalSettingsSchema,
@@ -998,6 +1003,136 @@ const editorialLink = defineButtonPersonality({
 	}
 });
 //#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.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		motion: "subtle",
+		era: "editorial"
+	},
+	buttonSystem: {
+		global: {
+			cornerStyle: "rounded",
+			shadow: "low",
+			textTransform: "none",
+			fontWeight: 600,
+			borderWidth: 1,
+			typography: "body",
+			letterSpacing: "tight",
+			paddingPreset: "default",
+			hoverTransform: "lift",
+			hoverColor: "none"
+		},
+		sizes: {
+			sm: {
+				padding: "0.625rem 1.125rem",
+				fontSize: "text-sm"
+			},
+			md: { padding: "0.8125rem 1.375rem" },
+			lg: {
+				padding: "0.9375rem 1.625rem",
+				fontSize: "text-lg"
+			},
+			xl: {
+				padding: "1.0625rem 2rem",
+				fontSize: "text-xl"
+			}
+		},
+		variants: [
+			{
+				id: "primary",
+				name: "Primary",
+				enabled: true,
+				priority: 1,
+				background: {
+					type: "solid",
+					colorToken: "primary"
+				},
+				textColorToken: "primaryForeground",
+				borderRadius: "rounded-lg",
+				affordance: {
+					iconId: "ArrowRight",
+					colorToken: "accent"
+				},
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}, {
+					effectId: "background-on-hover",
+					options: { colorToken: "secondary" }
+				}] }
+			},
+			{
+				id: "secondary",
+				name: "Secondary",
+				enabled: true,
+				priority: 2,
+				background: { type: "transparent" },
+				textColorToken: "primary",
+				borderRadius: "rounded-lg",
+				border: {
+					widthClass: "border",
+					colorToken: "border"
+				},
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}, {
+					effectId: "background-on-hover",
+					options: { colorToken: "surfaceAlt" }
+				}] }
+			},
+			{
+				id: "accent",
+				name: "Accent",
+				enabled: true,
+				priority: 3,
+				background: {
+					type: "solid",
+					colorToken: "accent"
+				},
+				textColorToken: "accentForeground",
+				borderRadius: "rounded-lg",
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				affordance: {
+					iconId: "ArrowRight",
+					colorToken: "accentForeground"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}] }
+			}
+		]
+	}
+});
+//#endregion
 //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
 /**
 * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
@@ -1768,6 +1903,7 @@ const buttonPersonalities = [
 	editorialLink,
 	pebble,
 	inkStamp,
+	flatInk,
 	brushedWash,
 	showtimePill,
 	joyStamp,
@@ -2019,17 +2155,60 @@ const cardVariantSchema = z$1.object({
 });
 const cardSystemSchema = z$1.object({ variants: z$1.array(cardVariantSchema).min(1).max(3) });
 //#endregion
-//#region ../theme-core/src/status/contextualColors.ts
-const STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
-const DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
-function statusMutedColorValue() {
-	return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
+//#region ../theme-core/src/surfaces/foregroundRoles.ts
+const SURFACE_FOREGROUND_ROLES = [
+	"text",
+	"heading",
+	"link",
+	"supporting"
+];
+//#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 statusMutedColorDeclaration() {
-	return `color: ${statusMutedColorValue()};`;
+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 surfaceForegroundDeclarations(input) {
+	const foregrounds = completeSurfaceForegrounds(input);
+	return [`color: ${foregrounds.text}`, ...SURFACE_FOREGROUND_ROLES.map((role) => `${SURFACE_FOREGROUND_CSS_VARS[role]}: ${foregrounds[role]}`)];
 }
 //#endregion
 //#region ../theme-core/src/cards/core.ts
+/**
+* Core Card CSS Generator
+*
+* Pure functions for generating card CSS without requiring the full Theme type.
+* Used by both the full CMS theme system and the SDK theme bridge.
+*/
 const CORNER_RADIUS_MAP$1 = {
 	square: "0",
 	soft: "0.5rem",
@@ -2123,14 +2302,21 @@ function generateVariantCss(scopeId, variant, settings) {
 	const mediaSelector = `${containerSelector} .card-media`;
 	const contentSelector = `${containerSelector} .card-content`;
 	const containerRules = [];
-	if (variant.background === "solid" && variant.backgroundToken) containerRules.push(`background: rgb(var(--tb-${variant.backgroundToken}))`);
-	else if (variant.background === "gradient" && variant.gradientFromToken && variant.gradientToToken) {
+	let ownsBackground = false;
+	if (variant.background === "solid" && variant.backgroundToken) {
+		containerRules.push(`background: rgb(var(--tb-${variant.backgroundToken}))`);
+		ownsBackground = true;
+	} else if (variant.background === "gradient" && variant.gradientFromToken && variant.gradientToToken) {
 		const fromColor = `rgb(var(--tb-${variant.gradientFromToken}))`;
 		const toColor = `rgb(var(--tb-${variant.gradientToToken}))`;
 		const direction = GRADIENT_DIRECTION_MAP[variant.gradientDirection ?? "to-r"];
 		containerRules.push(`background: linear-gradient(${direction}, ${fromColor}, ${toColor})`);
+		ownsBackground = true;
 	} else containerRules.push("background: transparent");
-	if (variant.foregroundToken) containerRules.push(`color: rgb(var(--tb-${variant.foregroundToken}))`);
+	if (ownsBackground) {
+		const foreground = `rgb(var(--tb-${variant.foregroundToken ?? "text"}))`;
+		containerRules.push(...surfaceForegroundDeclarations({ text: foreground }));
+	}
 	if (variant.accentEdge) {
 		const side = ACCENT_EDGE_SIDE_MAP[variant.accentEdge.edge];
 		const width = ACCENT_EDGE_WIDTH_MAP[variant.accentEdge.width];
@@ -2407,11 +2593,31 @@ const gradientStopSchema = z$1.object({
 	position: z$1.number().min(0).max(100)
 });
 /**
-* Gradient configuration
+* Radial gradient shape. Optional; defaults to `circle` (the historical shape)
+* so existing radial gradients are byte-identical.
+*
+* Named `RadialGradientShape` to avoid clashing with `styles/gradients.ts`'s
+* `GradientShape` (which names the gradient *kind*: linear/radial/conic).
+*/
+const radialGradientShapeSchema = z$1.enum(["circle", "ellipse"]);
+/**
+* Gradient configuration.
+*
+* `type` is optional and defaults to `'linear'` so gradients persisted without a
+* type (or with an explicit `'linear'`) render exactly as before. `'radial'` and
+* `'conic'` are additive kinds:
+*   - linear: `angle` (degrees)
+*   - radial: optional `shape` (circle/ellipse) + `position`
+*   - conic:  optional `angle` (from-angle, degrees) + `position`
 */
 const gradientConfigSchema = z$1.object({
-	type: z$1.enum(["linear", "radial"]),
+	type: z$1.enum([
+		"linear",
+		"radial",
+		"conic"
+	]).default("linear"),
 	angle: z$1.number().min(0).max(360).optional(),
+	shape: radialGradientShapeSchema.optional(),
 	position: z$1.string().optional(),
 	stops: z$1.array(gradientStopSchema).min(2)
 });
@@ -3038,7 +3244,7 @@ function parseToken(source) {
 	if (parts.kind === "invalid") return { token: source };
 	return {
 		token: parts.token,
-		alpha: parts.opacityPercent === null ? void 0 : parts.opacityPercent / 100
+		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
 	};
 }
 /**
@@ -3054,11 +3260,26 @@ function parseToken(source) {
 * rgbColorValue('raw:transparent') // => 'transparent'
 */
 function rgbColorValue(token) {
-	const { token: baseToken, alpha, raw } = parseToken(token);
+	const { token: baseToken, opacityPercent, raw } = parseToken(token);
 	if (raw) return raw;
 	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
-	if (alpha === void 0) return `rgb(var(${cssVar}))`;
-	return `rgb(var(${cssVar}) / ${alpha})`;
+	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
+	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
+}
+/**
+* Converts a theme color token to a CSS variable reference.
+* Note: This returns the base variable without rgb() wrapper, ignoring opacity.
+*
+* @param token - Theme color token
+* @returns CSS variable reference
+*
+* @example
+* cssVarValue('primary') // => 'var(--tb-primary)'
+* cssVarValue('surface/95') // => 'var(--tb-surface)' (opacity ignored)
+*/
+function cssVarValue(token) {
+	const { token: baseToken } = parseToken(token);
+	return `var(${COLOR_VAR_PREFIX}${baseToken})`;
 }
 //#endregion
 //#region ../theme-core/src/utils/tokenOrColor.ts
@@ -3333,6 +3554,7 @@ const typographyScaleSchema = z$1.enum([
 	"majorThird",
 	"perfectFourth"
 ]);
+const eyebrowTypographyStyleSchema = z$1.object({ family: z$1.string().min(1) });
 const typographySchema = z$1.object({
 	body: bodyTypographyStyleSchema,
 	headings: z$1.object({
@@ -3345,7 +3567,8 @@ const typographySchema = z$1.object({
 		h6: headingTypographyOverridesSchema.optional()
 	}),
 	scale: typographyScaleSchema,
-	proseLinkStyle: proseLinkStyleSchema.optional()
+	proseLinkStyle: proseLinkStyleSchema.optional(),
+	eyebrow: eyebrowTypographyStyleSchema.optional()
 });
 const spaceSchema = z$1.enum([
 	"comfortable",
@@ -3370,7 +3593,8 @@ const shadow = z$1.object({
 		"soft",
 		"hard"
 	]).nullable(),
-	position: z$1.enum(["bottom", "bottom-right"]).default("bottom")
+	position: z$1.enum(["bottom", "bottom-right"]).default("bottom"),
+	colorToken: themeColorTokenSchema.optional()
 });
 const border = z$1.object({
 	width: z$1.enum([
@@ -3615,6 +3839,7 @@ const headerSchema = z$1.object({
 	navWeight: navFontWeight.default("medium"),
 	navTypography: z$1.enum(["body", "heading"]).optional(),
 	navTextSize: navLinkStyleSchema.shape.textSize,
+	navPlacement: z$1.enum(["end", "center"]).optional(),
 	container: headerContainerSchema,
 	border: headerBorderSchema,
 	shadow: componentShadowSchema.optional(),
@@ -3909,6 +4134,8 @@ function hexToRgb(hex) {
 function generateShadowCssVars(theme) {
 	const level = theme.shadow.elevation;
 	const soft = theme.shadow.softness !== "crisp";
+	const tintVar = theme.shadow.colorToken ? cssVarValue(theme.shadow.colorToken) : null;
+	const shadowColor = (a) => tintVar ? `rgb(${tintVar} / ${a})` : `rgba(0, 0, 0, ${a})`;
 	const base = {
 		sm: [{
 			y: 1,
@@ -3968,7 +4195,7 @@ function generateShadowCssVars(theme) {
 	const blurMul = soft ? 1.2 : 1;
 	const alphaMul = soft ? .9 : 1.05;
 	const fmt = (layers) => layers.map((l) => {
-		return `0 ${Math.round(l.y * scale)}px ${Math.round(l.blur * scale * blurMul)}px ${Math.round(l.spread * scale)}px rgba(0, 0, 0, ${Math.max(0, Math.min(1, +(l.a * alphaMul).toFixed(3)))})`;
+		return `0 ${Math.round(l.y * scale)}px ${Math.round(l.blur * scale * blurMul)}px ${Math.round(l.spread * scale)}px ${shadowColor(Math.max(0, Math.min(1, +(l.a * alphaMul).toFixed(3))))}`;
 	}).join(", ");
 	return {
 		"--shadow-sm": fmt(base.sm),
@@ -4299,6 +4526,71 @@ const brandLedJewel = defineCuratedPalette({
 		}
 	]
 });
+const brandLedSpruce = defineCuratedPalette({
+	id: "brand-led-spruce",
+	name: "Brand-led — Spruce",
+	description: "Spruce-ink primary and moss secondary with an amber accent over a green-mist ground and hairline sage borders.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		era: "editorial"
+	},
+	mode: "light",
+	colors: [
+		{
+			name: "primary",
+			hex: "#14312b"
+		},
+		{
+			name: "secondary",
+			hex: "#356a59"
+		},
+		{
+			name: "accent",
+			hex: "#f08a4b"
+		},
+		{
+			name: "success",
+			hex: "#356a59"
+		},
+		{
+			name: "warning",
+			hex: "#f08a4b"
+		},
+		{
+			name: "destructive",
+			hex: "#b5561f"
+		},
+		{
+			name: "background",
+			hex: "#ecefe9"
+		},
+		{
+			name: "surface",
+			hex: "#ffffff"
+		},
+		{
+			name: "surfaceAlt",
+			hex: "#f4f6f1"
+		},
+		{
+			name: "muted",
+			hex: "#5c6a64"
+		},
+		{
+			name: "text",
+			hex: "#1c2a26"
+		},
+		{
+			name: "primaryForeground",
+			hex: "#f4f7f1"
+		},
+		{
+			name: "border",
+			hex: "#d7ddd2"
+		}
+	]
+});
 const brandLedBurgundyGold = defineCuratedPalette({
 	id: "brand-led-burgundy-gold",
 	name: "Brand-led — Burgundy Gold",
@@ -4838,6 +5130,7 @@ const curatedPalettes = [
 	brandLedWarm,
 	brandLedJewel,
 	brandLedBurgundyGold,
+	brandLedSpruce,
 	defineCuratedPalette({
 		id: "warm-neutral-clay",
 		name: "Warm Neutral — Clay",
@@ -6092,6 +6385,13 @@ const legacyHeaderLookAliases = defineExactCatalog()([
 			styleId: asHeaderStyleId("minimal")
 		}
 	},
+	{
+		lookId: asHeaderLookId("classic-centered-nav"),
+		selection: {
+			layoutId: asHeaderLayoutId("classic"),
+			styleId: asHeaderStyleId("fine-line")
+		}
+	},
 	{
 		lookId: asHeaderLookId("brand-solid"),
 		selection: {
@@ -6162,6 +6462,50 @@ function getCompatibleHeaderStyleIds(layoutId) {
 		return isHeaderStyleCompatibleWithLayout(getHeaderStyleOrThrow(styleId), layoutId);
 	});
 }
+function applyNavTypography(style, typography) {
+	switch (typography) {
+		case "plain": return style;
+		case "heading": return {
+			...style,
+			typography: "heading",
+			fontWeight: "medium",
+			letterSpacing: "wide"
+		};
+		case "quiet-caps": return {
+			...style,
+			textTransform: "uppercase",
+			textSize: "sm",
+			letterSpacing: "wide"
+		};
+		case "brand-caps": return {
+			...style,
+			textTransform: "uppercase",
+			textSize: "sm",
+			letterSpacing: "wider"
+		};
+		default: return assertNever(typography, "Unhandled header nav typography");
+	}
+}
+function underlineNavLinkStyle(colorToken, underlineColorToken, typography = "plain") {
+	return applyNavTypography({
+		name: "Underline grow",
+		typography: "body",
+		fontWeight: "medium",
+		textTransform: "none",
+		italic: false,
+		colorToken,
+		padding: "compact",
+		paddingX: "compact",
+		borderRadius: "none",
+		effects: { hover: [{
+			effectId: "nav-underline",
+			options: {
+				style: "grow",
+				...underlineColorToken ? { colorToken: underlineColorToken } : {}
+			}
+		}] }
+	}, typography);
+}
 function themedHeaderShadow(theme) {
 	switch (theme.shadow.elevation) {
 		case "none": return;
@@ -6261,6 +6605,38 @@ function cleanBaseHeader(theme) {
 		ctaGap: "default"
 	};
 }
+function classicCenteredNavHeader(theme) {
+	return {
+		...baseHeader(theme),
+		variant: "classic",
+		navPlacement: "center",
+		positioning: "sticky",
+		shrinkOnScroll: false,
+		background: {
+			type: "color",
+			color: "surface"
+		},
+		textColor: "text",
+		navColor: "text",
+		navStyle: "underline-grow",
+		navWeight: "medium",
+		navLinkStyle: underlineNavLinkStyle("text", "accent"),
+		border: {
+			style: "solid",
+			width: "thin",
+			position: "bottom",
+			colorToken: "border"
+		},
+		ctaTreatment: "primary",
+		ctaVariant: resolveHeaderCtaVariant(theme, "primary"),
+		ctaGap: "default",
+		logoText: {
+			mobileMaxWidth: "sm",
+			mobileWrapLines: 1,
+			hideOnShrink: false
+		}
+	};
+}
 function serifLineHeader(theme) {
 	return {
 		...baseHeader(theme),
@@ -6425,6 +6801,21 @@ const headerLookCatalog = defineExactCatalog()([
 		logoAccommodations: inlineClassicLogoAccommodations,
 		compile: cleanBaseHeader
 	},
+	{
+		id: asHeaderLookId("classic-centered-nav"),
+		label: "Centered nav",
+		visualTreatment: "solid-neutral",
+		layoutBehavior: "sticky",
+		configuration: {
+			structure: "inline-classic",
+			treatment: "solid-neutral",
+			behavior: "sticky"
+		},
+		openingRequirement: "none",
+		maxRecommendedNavItems: 6,
+		logoAccommodations: inlineClassicLogoAccommodations,
+		compile: classicCenteredNavHeader
+	},
 	{
 		id: asHeaderLookId("brand-solid"),
 		label: "Brand solid",
@@ -7591,28 +7982,96 @@ const typographyPresets = [
 				}
 			}
 		}
-	})
-];
-new Map(typographyPresets.map((preset) => [preset.id, preset]));
-const designResolutionPolicySchema = z$1.enum([
-	"generated",
-	"user",
-	"admin",
-	"sdk"
-]);
-const runtimeStyleFieldNameSchema = z$1.enum(themeV2RuntimeStyleFieldNames);
-const nonEmptyRuntimeStyleFieldNamesSchema = z$1.array(runtimeStyleFieldNameSchema).min(1).transform((fields) => [fields[0], ...fields.slice(1)]);
-const heroLegibilityStrategySchema = z$1.enum([
-	"none",
-	"scrim-gradient",
-	"solid-panel"
-]);
-const heroCompositionIntentSchema = z$1.enum(["center", "bottom-left"]);
-const heroTypographyScaleIntentSchema = z$1.enum([
-	"quiet",
-	"editorial",
-	"display",
-	"poster"
+	}),
+	defineTypographyPreset({
+		id: "typography-preset:fulcrum",
+		name: "Fulcrum",
+		description: "Newsreader serif headings over an IBM Plex Sans body, with an IBM Plex Mono eyebrow role for uppercase kickers and mono captions.",
+		defaultFonts: {
+			body: "IBM Plex Sans, system-ui, -apple-system, sans-serif",
+			heading: "Newsreader, Georgia, \"Times New Roman\", serif"
+		},
+		recommendedFonts: {
+			body: [
+				"IBM Plex Sans",
+				"Source Sans 3",
+				"Inter"
+			],
+			heading: [
+				"Newsreader",
+				"Source Serif 4",
+				"Lora"
+			]
+		},
+		slotPolicies: {
+			body: bodyReadablePolicy,
+			heading: displayHeadingPolicy
+		},
+		typography: {
+			body: {
+				family: "IBM Plex Sans, system-ui, -apple-system, sans-serif",
+				size: "lg",
+				weight: "regular",
+				lineHeight: "relaxed",
+				letterSpacing: "normal"
+			},
+			headings: {
+				default: {
+					family: "Newsreader, Georgia, \"Times New Roman\", serif",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					colorToken: "primary",
+					italic: null,
+					case: null
+				},
+				h1: {
+					size: "2xl",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					italic: null
+				},
+				h2: {
+					size: "xl",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					italic: null
+				},
+				h3: {
+					size: "md",
+					weight: "semibold",
+					lineHeight: "normal",
+					letterSpacing: "normal",
+					italic: null
+				}
+			},
+			scale: "spacious",
+			eyebrow: { family: "IBM Plex Mono, ui-monospace, \"SF Mono\", monospace" }
+		}
+	})
+];
+new Map(typographyPresets.map((preset) => [preset.id, preset]));
+const designResolutionPolicySchema = z$1.enum([
+	"generated",
+	"user",
+	"admin",
+	"sdk"
+]);
+const runtimeStyleFieldNameSchema = z$1.enum(themeV2RuntimeStyleFieldNames);
+const nonEmptyRuntimeStyleFieldNamesSchema = z$1.array(runtimeStyleFieldNameSchema).min(1).transform((fields) => [fields[0], ...fields.slice(1)]);
+const heroLegibilityStrategySchema = z$1.enum([
+	"none",
+	"scrim-gradient",
+	"solid-panel"
+]);
+const heroCompositionIntentSchema = z$1.enum(["center", "bottom-left"]);
+const heroTypographyScaleIntentSchema = z$1.enum([
+	"quiet",
+	"editorial",
+	"display",
+	"poster"
 ]);
 const sectionHeightIntentSchema = z$1.enum([
 	"default",
@@ -9267,6 +9726,104 @@ const curatedSiteStyles = [
 			buttonChoice("showtime-pill")
 		],
 		paletteRecommendations: [paletteRecommendation("warm-dark-ember")]
+	}),
+	defineCuratedSiteStyle({
+		id: "site-style:fulcrum",
+		name: "Fulcrum",
+		headingDecoration: {
+			family: "short-center-rule",
+			colorToken: "accent"
+		},
+		description: "Spruce-ink and moss with an amber climax, Newsreader serif over IBM Plex Sans, hairline sage borders and flat buttons — a grounded, editorial physiotherapy skin.",
+		generationBrief: "Use a calm, clinician-led voice: precise, reassuring and specific rather than clinical-cold. Lead with the assessment-treatment-rehab journey, mono uppercase eyebrows for practical labels (hours, registrations, appointment windows), Newsreader serif headings over IBM Plex Sans body, and a single amber call to action as the page climax. Keep proof concrete (registrations, same-week appointments, return-to-activity outcomes) and avoid spa or hard-sell wellness language or medical claims.",
+		siteCreatorSelection: {
+			kind: "site_creator_keyword_heuristic",
+			priority: 28
+		},
+		selectionKeywordRules: [
+			{
+				kind: "substring",
+				value: "physiotherap"
+			},
+			{
+				kind: "word",
+				value: "physio"
+			},
+			{
+				kind: "phrase",
+				value: "sports injury"
+			},
+			{
+				kind: "phrase",
+				value: "rehab clinic"
+			},
+			{
+				kind: "substring",
+				value: "musculoskeletal"
+			},
+			{
+				kind: "phrase",
+				value: "sports therapy"
+			}
+		],
+		tokenRecipes: {
+			palette: "brand-led",
+			contrast: "standard",
+			radius: "rounded",
+			shadow: "subtle",
+			typography: "serif-editorial",
+			spacing: "airy",
+			motion: "subtle"
+		},
+		compositionBudget: quietBudget,
+		typographyPresetChoices: [
+			typographyChoice("typography-preset:fulcrum"),
+			typographyChoice("typography-preset:editorial-serif"),
+			typographyChoice("typography-preset:modern-sans")
+		],
+		defaultTypographyPresetId: "typography-preset:fulcrum",
+		themeOverrides: {
+			shadow: { colorToken: "primary" },
+			accordions: {
+				background: null,
+				spacing: "comfortable",
+				corners: "square",
+				border: null,
+				shadow: null,
+				icon: {
+					style: "plus-minus",
+					position: "right",
+					size: "md",
+					colorToken: "accent"
+				},
+				trigger: {
+					textColorToken: "primary",
+					fontWeight: "medium",
+					fontFamily: "heading",
+					fontScale: "md"
+				},
+				hover: { textColorToken: "secondary" },
+				content: { textColorToken: "muted" }
+			},
+			testimonialQuote: serifDisplayQuote
+		},
+		recommendedHeaderLookIds: [
+			"classic-centered-nav",
+			"serif-line",
+			"centered-calm",
+			"clean-base"
+		],
+		recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
+		buttonPersonalityChoices: [
+			buttonChoice("flat-ink"),
+			buttonChoice("confident-chip"),
+			buttonChoice("editorial-link")
+		],
+		paletteRecommendations: [
+			paletteRecommendation("brand-led-spruce"),
+			paletteRecommendation("warm-neutral-forest"),
+			paletteRecommendation("soft-natural-sage")
+		]
 	})
 ];
 new Map(curatedSiteStyles.map((style) => [style.id, style]));
@@ -9331,7 +9888,7 @@ ${root} .status-error { color: rgb(var(--tb-destructive)); }
 ${root} .status-success { color: rgb(var(--tb-success)); }
 ${root} .status-warning { color: rgb(var(--tb-warning)); }
 ${root} .status-info { color: rgb(var(--tb-info)); }
-${root} .status-muted { ${statusMutedColorDeclaration()} }`);
+${root} .status-muted { color: ${surfaceForegroundValue("supporting")}; }`);
 	cssBlocks.push(`/* Alert containers */
 ${root} .alert {
   padding: 1rem;
@@ -9804,6 +10361,7 @@ const THEME_RADIUS_CSS_VARS = {
 	block: "--rb-block-radius",
 	button: "--rb-button-radius",
 	input: "--rb-input-radius",
+	panel: "--rb-panel-radius",
 	legacyCard: "--radius-card",
 	legacyControl: "--radius-control"
 };
@@ -9885,6 +10443,10 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="customer-portal"]
   /* Modal (shared rb-modal classes) */
   --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.35);
   --rb-modal-bg: var(--cp-card-bg);
+  --rb-modal-text: var(--cp-text);
+  --rb-modal-heading: var(--cp-text);
+  --rb-modal-link: var(--cp-primary);
+  --rb-modal-supporting: var(--cp-muted);
   --rb-modal-border: var(--cp-card-border);
   --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
   --rb-modal-radius: var(--cp-card-radius);
@@ -10300,8 +10862,12 @@ const containerResponsiveThemeCss = `/*
     text-transform: uppercase;
   }
 
-  /* Eyebrow text - small uppercase labels for section introductions */
+  /* Eyebrow text - small uppercase labels for section introductions.
+     font-family resolves to the optional eyebrow/mono font role, falling back
+     to the body font when the theme sets none (so existing themes are
+     unchanged). */
   .rb-eyebrow {
+    font-family: var(--font-eyebrow, var(--font-body));
     font-size: 0.875rem;
     font-weight: 600;
     letter-spacing: 0.025em;
@@ -10316,11 +10882,11 @@ const containerResponsiveThemeCss = `/*
     width: fit-content;
     align-items: center;
     justify-content: center;
-    border: 1px solid color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 46%, transparent);
+    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);
     border-radius: 9999px;
-    background: color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
+    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);
     padding: 0.5rem 1rem;
-    color: var(--section-text-color, rgb(var(--tb-text)));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     line-height: 1;
   }
   .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {
@@ -10822,6 +11388,58 @@ const containerResponsiveThemeCss = `/*
       }
     }
 
+}
+
+  /*
+   * Responsive fractional grid tracks (rb-grid-tracks).
+   *
+   * Asymmetric AND responsive grid-template-columns, driven by inline custom
+   * properties the Grid primitive sets per breakpoint from string track
+   * templates:
+   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl
+   * Each breakpoint falls back to the next smaller one, so only the breakpoints
+   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'
+   * collapses to a single column below lg). Authored here (not per node) so the
+   * @media -> @container conversion (container responsive mode) applies too.
+   */
+  .rb-grid-tracks {
+    grid-template-columns: var(--rb-gtc-base, 1fr);
+  }
+  @container rb-site (min-width: 640px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));
+      }
+    }
+
+}
+  @container rb-site (min-width: 768px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));
+      }
+    }
+
+}
+  @container rb-site (min-width: 1024px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));
+      }
+    }
+
+}
+  @container rb-site (min-width: 1280px) {
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));
+      }
+    }
+
 }
 
   /* Alignment */
@@ -12026,6 +12644,11 @@ const containerResponsiveThemeCss = `/*
   :where(.theme-scope) .rb-modal {
     width: min(var(--rb-modal-max-width, 560px), 100%);
     background: var(--rb-modal-bg, rgb(var(--tb-surface)));
+    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));
+    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));
+    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
+    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
+    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
     border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
     border-radius: var(--rb-modal-radius, var(--radius-card));
     box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
@@ -12045,7 +12668,7 @@ const containerResponsiveThemeCss = `/*
     font-family: var(--font-heading);
     font-size: 1.0625rem;
     font-weight: 600;
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));
   }
 
   :where(.theme-scope) .rb-modal__close {
@@ -12055,7 +12678,7 @@ const containerResponsiveThemeCss = `/*
     height: 2.25rem;
     padding: 0;
     line-height: 1;
-    color: rgb(var(--tb-mutedText));
+    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
     cursor: pointer;
     display: grid;
     place-items: center;
@@ -12063,7 +12686,7 @@ const containerResponsiveThemeCss = `/*
   }
 
   :where(.theme-scope) .rb-modal__close:hover {
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     background: rgba(var(--tb-border), 0.2);
   }
 
@@ -12074,7 +12697,7 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-modal__body {
     padding: 0.875rem 1rem 1rem;
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     font-size: 0.9375rem;
     line-height: 1.45;
   }
@@ -12234,7 +12857,7 @@ const containerResponsiveThemeCss = `/*
     & h6 {
       font-family: var(--font-heading);
       /* Color is set by generateTypographyCss.ts with full cascade:
-       --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */
+       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */
       font-weight: var(--font-weight-heading);
       text-transform: var(--tt-heading);
       font-variant-caps: var(--fv-heading);
@@ -12382,7 +13005,7 @@ const containerResponsiveThemeCss = `/*
 
   /* Neutral prose uses theme text color by default */
   :where(.theme-scope) .rb-prose-neutral {
-    color: var(--section-text-color, rgb(var(--tb-text)));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   }
 
   :where(.theme-scope) .rb-prose p,
@@ -12416,8 +13039,14 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-prose a {
     --rb-prose-effective-link-color: var(
-      --section-link-color,
-      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+      --rb-surface-link-color,
+      var(
+        --rb-surface-text-color,
+        var(
+          --rb-prose-link-color,
+          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))
+        )
+      )
     );
     color: var(--rb-prose-effective-link-color);
     text-decoration-line: var(--rb-prose-link-decoration-line, underline);
@@ -12428,14 +13057,11 @@ const containerResponsiveThemeCss = `/*
     );
     text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
     text-decoration-color: var(
-      --section-link-decoration-color,
-      var(
-        --rb-prose-link-decoration-color,
-        color-mix(
-          in srgb,
-          var(--rb-prose-effective-link-color) 35%,
-          transparent
-        )
+      --rb-prose-link-decoration-color,
+      color-mix(
+        in srgb,
+        var(--rb-prose-effective-link-color) 35%,
+        transparent
       )
     );
     transition:
@@ -12459,7 +13085,7 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-prose blockquote {
     /* Blockquotes use muted text color */
-    color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
     border-left-color: rgb(var(--tb-border));
   }
 
@@ -13493,6 +14119,10 @@ const containerResponsiveThemeCss = `/*
   :where(.theme-scope) .card-surface {
     background: rgb(var(--tb-surface));
     color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));
     border: 1px solid rgb(var(--tb-border));
     border-radius: var(--radius-card);
     box-shadow: var(--shadow-elev);
@@ -13636,6 +14266,10 @@ const containerResponsiveThemeCss = `/*
   padding: clamp(1rem, 2vw, 1.5rem);
   background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
   color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-text-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-heading-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-link-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-supporting-color: var(--rb-reg-on-surface-muted, var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)))));
   transition: border-color var(--rb-block-transition, 150ms) ease;
   width: 100%;
   max-width: 800px;
@@ -16723,6 +17357,350 @@ const containerResponsiveThemeCss = `/*
 }
 }
 
+/* -----------------------------------------------------------------------------
+ * Week Board View
+ * Compact "class day-board": day columns side by side, one card per class,
+ * three-state availability (available / filling / waitlist), and a footer CTA.
+ * ----------------------------------------------------------------------------- */
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board {
+  /* Status accent tokens — map the three availability states onto theme colours.
+   * available -> secondary, filling -> accent, waitlist -> muted text. */
+  --ec-status-available: rgb(var(--tb-secondary));
+  --ec-status-filling: rgb(var(--tb-accent));
+  --ec-status-waitlist: rgba(var(--tb-text), 0.4);
+  --event-week-board-cols: 7;
+
+  border: 1px solid var(--ec-border);
+  border-radius: var(--rb-block-radius);
+  background-color: var(--ec-surface);
+  color: var(--ec-text);
+  overflow: hidden;
+  box-shadow: 0 14px 34px -24px rgba(var(--tb-text), 0.35);
+}
+
+/* Top bar: title + legend */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1.1rem 1.5rem;
+  background-color: var(--ec-header-bg);
+  border-bottom: 1px solid var(--ec-border-subtle);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend {
+  display: flex;
+  align-items: center;
+  gap: 1.1rem;
+  flex-wrap: wrap;
+  font-size: 0.6875rem;
+  letter-spacing: 0.03em;
+  opacity: 0.75;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="available"] {
+  background-color: var(--ec-status-available);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="filling"] {
+  background-color: var(--ec-status-filling);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="waitlist"] {
+  background-color: var(--ec-status-waitlist);
+}
+
+/* Day columns grid */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day {
+  display: flex;
+  flex-direction: column;
+  min-height: 15rem;
+  /* Tabular column rule. Driven by the theme border tokens so borderless site
+   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,
+   * while hairline/thin/thick themes get a crisp full-strength divider. */
+  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day:last-child {
+  border-right: none;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.9rem 0.9rem 0.65rem;
+  /* Header-row underline — same border-token gating as the column rules. */
+  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--today .event-week-board-day-head {
+  background-color: var(--ec-today-bg);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-abbr {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--today .event-week-board-day-abbr {
+  opacity: 1;
+  color: var(--ec-today-text);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-num {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  opacity: 0.5;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  padding: 0.9rem;
+  flex: 1;
+}
+
+/* Class card */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 0.8rem 0.85rem;
+  border: 1px solid var(--ec-border-subtle);
+  border-left: 3px solid var(--ec-status-available);
+  border-radius: calc(var(--rb-block-radius) / 1.5);
+  background-color: var(--ec-surface);
+  color: inherit;
+  text-decoration: none;
+  transition:
+    transform var(--rb-block-transition) ease,
+    box-shadow var(--rb-block-transition) ease,
+    border-color var(--rb-block-transition) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card[data-status="filling"] {
+  border-left-color: var(--ec-status-filling);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card[data-status="waitlist"] {
+  border-left-color: var(--ec-status-waitlist);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px -8px rgba(var(--tb-text), 0.28);
+  border-color: rgba(var(--tb-primary), 0.4);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card:focus-visible {
+  outline: 2px solid rgb(var(--tb-primary));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-title {
+  font-family: var(--font-heading, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-time {
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+  opacity: 0.7;
+}
+
+/* Capacity pill */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  /* Available (default): a calm neutral/muted pill — not a coloured outline.
+   * Filling -> amber and waitlist -> muted outline are handled by the
+   * data-status overrides below. */
+  border: 1px solid var(--ec-border);
+  background-color: rgba(var(--tb-text), 0.06);
+  color: rgba(var(--tb-text), 0.62);
+  border-color: var(--ec-border);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill[data-status="filling"] {
+  background-color: rgba(var(--tb-accent), 0.14);
+  color: var(--ec-status-filling);
+  border-color: rgba(var(--tb-accent), 0.32);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill[data-status="waitlist"] {
+  background-color: transparent;
+  color: rgba(var(--tb-text), 0.6);
+  border-color: var(--ec-border);
+}
+
+/* Footer */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1.1rem 1.5rem;
+  background-color: var(--ec-header-bg);
+  border-top: 1px solid var(--ec-border-subtle);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-foot-note {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+/* Responsive: collapse day columns to a stacked list on narrow viewports */
+@container rb-site (max-width: 1023px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-grid {
+    grid-template-columns: 1fr;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day {
+    min-height: 0;
+    border-right: none;
+    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day:last-child {
+    border-bottom: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--empty {
+    display: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-head {
+    border-bottom: none;
+    padding-bottom: 0.25rem;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-body {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding-top: 0.35rem;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+    flex: 1 1 14rem;
+  }
+}
+}
+
+@container rb-site (max-width: 639px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend {
+    display: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+    flex: 1 1 100%;
+  }
+}
+}
+
+/* -----------------------------------------------------------------------------
+ * Week-board section band
+ * Give the whole week-board section (head + panel) a subtle surface band so it
+ * reads as a distinct zone from the page — the "testimonials band" pattern.
+ * Painted as a pseudo-element above the section's fallback background layer
+ * (z-index -10) but behind the content, so no block-content wiring is needed.
+ * Surface + hairline rules are token-referenced: on a borderless site style
+ * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.
+ * ----------------------------------------------------------------------------- */
+:where(.theme-scope) [data-slot="section"]:has(.event-calendar--week-board)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -9;
+  background-color: rgb(var(--tb-surfaceAlt));
+  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+  pointer-events: none;
+}
+
+/* -----------------------------------------------------------------------------
+ * Event section head — split (heading left, intro right)
+ * Rendered by the block frame (outside [data-block="event-calendar"]) via
+ * eventSectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its
+ * supporting intro out as a two-column head on wide viewports, stacking on
+ * narrow ones. The section band above provides the distinct background.
+ * ----------------------------------------------------------------------------- */
+:where(.theme-scope) .event-section-head--split {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: clamp(1.5rem, 4vw, 3.5rem);
+  flex-wrap: wrap;
+}
+
+:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {
+  margin: 0;
+}
+
+:where(.theme-scope) .event-section-head--split > .rb-prose {
+  flex: 1 1 22rem;
+  max-width: 34rem;
+  margin: 0;
+}
+
+@container rb-site (max-width: 767px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .event-section-head--split {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  :where(.theme-scope) .event-section-head--split > .rb-prose {
+    flex-basis: auto;
+  }
+}
+}
+
 /* -----------------------------------------------------------------------------
  * Event Calendar Modals
  * Modal overlays for event details and day events list
@@ -17150,7 +18128,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .rb-inline-text-accent-contrast {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 :where(.theme-scope) .rb-inline-text-highlight {
@@ -17161,7 +18139,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .rb-inline-text-highlight-soft {
-  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
+  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);
 }
 
 :where(.theme-scope) .rb-inline-text-highlight-accent {
@@ -17180,7 +18158,7 @@ const containerResponsiveThemeCss = `/*
 
 /* Eyebrow - color only (typography via .rb-eyebrow) */
 :where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 /* Subheadline - supporting text below headline */
@@ -17190,7 +18168,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
   font-size: 1.125rem;
-  color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
 }
 
 @container rb-site (min-width: 640px) {
@@ -17281,7 +18259,7 @@ const containerResponsiveThemeCss = `/*
 
 /* CTA content/body text */
 :where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
-  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
 }
 
 /* CTA button row container */
@@ -17381,7 +18359,7 @@ const containerResponsiveThemeCss = `/*
 /* Form intro text */
 :where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
   font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 /* =============================================================================
@@ -17740,6 +18718,10 @@ const containerResponsiveThemeCss = `/*
   --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
   --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
   --rb-modal-z-index: 20000;
+  --rb-modal-text: rgb(var(--tb-text, 17 24 39));
+  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));
+  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));
   --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));
   --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));
 }
@@ -17797,6 +18779,11 @@ const containerResponsiveThemeCss = `/*
 /* Product card */
 :where(.theme-scope) .shop__card {
   background: rgb(var(--tb-surface));
+  color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   padding: 1.5rem;
@@ -17951,6 +18938,11 @@ const containerResponsiveThemeCss = `/*
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   background: rgb(var(--tb-surface));
+  color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
 }
 
 :where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--success {
@@ -18023,6 +19015,11 @@ const containerResponsiveThemeCss = `/*
   margin: 0 auto;
   padding: 2rem;
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -18151,6 +19148,11 @@ const containerResponsiveThemeCss = `/*
   padding: 3rem 2rem;
   text-align: center;
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px dashed var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -18163,6 +19165,11 @@ const containerResponsiveThemeCss = `/*
 /* Card */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-card {
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
   padding: 1.25rem;
@@ -18327,6 +19334,11 @@ const containerResponsiveThemeCss = `/*
 /* Table */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table-wrap {
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -18888,6 +19900,143 @@ const containerResponsiveThemeCss = `/*
 }
 
 
+/* =============================================================================
+ * Variant: featured-editorial
+ *
+ * An asymmetric layout: a large featured (spruce-ink) quote card beside a
+ * column of stacked white cards. Renders NO avatars. Colours are palette
+ * tokens only. Node structure is built in testimonialsCarousel.ts.
+ * ============================================================================= */
+
+/* Section head: heading left, lead-in line to the right; stacks on mobile. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.875rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-leadin {
+  max-width: 30rem;
+}
+
+@container rb-site (min-width: 768px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-head {
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+}
+}
+
+/* Card grid: featured (wider) beside the stacked column. Single column on
+ * small screens. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.25rem;
+  align-items: stretch;
+}
+
+@container rb-site (min-width: 1024px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-grid {
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  }
+}
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-col {
+  display: grid;
+  gap: 1.25rem;
+  align-content: start;
+}
+
+/* Base card (white surface) */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: var(--rb-block-radius);
+  padding: 1.875rem 1.875rem 1.625rem;
+  background: rgb(var(--tb-surface));
+  border: 1px solid rgba(var(--tb-border), 0.9);
+  box-shadow: 0 1px 2px rgba(var(--tb-shadow, 0 0 0), 0.05);
+}
+
+/* Featured (spruce-ink) card */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature {
+  padding: 2.5rem;
+  background: rgb(var(--tb-primary));
+  border-color: transparent;
+  color: rgb(var(--tb-onPrimary));
+}
+
+/* Amber quote mark, oversized serif */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-qmark {
+  display: block;
+  height: 1.6rem;
+  font-family: var(--font-heading, Georgia, serif);
+  font-style: italic;
+  font-size: 3.375rem;
+  line-height: 0.6;
+  color: rgb(var(--tb-secondary));
+}
+
+/* Quote body. The inner <p> is targeted directly (not via :where) so the
+ * serif display font and sizing win over the theme's base paragraph rule. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-quote {
+  flex: 1 1 auto;
+  margin-top: 1.25rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-quote p {
+  margin: 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.15rem;
+  line-height: 1.5;
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {
+  color: rgb(var(--tb-onPrimary));
+  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);
+  line-height: 1.42;
+  letter-spacing: -0.01em;
+}
+
+/* Attribution: name (bold) + context line, no avatar */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 1.625rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-name {
+  font-weight: 600;
+  font-size: 0.97rem;
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-context {
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  color: rgb(var(--tb-mutedText));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-name {
+  color: rgb(var(--tb-onPrimary));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-context {
+  color: rgb(var(--tb-onPrimary));
+  opacity: 0.7;
+}
+
+
 /* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */
 :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {
   height: var(--rb-testimonial-carousel-arrow-size);
@@ -20034,7 +21183,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
   font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   opacity: 0.85;
 }
 
@@ -20083,7 +21232,7 @@ const containerResponsiveThemeCss = `/*
   margin-top: 0.75rem;
   font-size: 1rem;
   line-height: 1.6;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   text-align: center;
 }
 
@@ -20165,7 +21314,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .form-copy-intro,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .newsletter-copy-subtitle {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .contact-newsletter-info {
@@ -20563,7 +21712,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) .event-compact-row-title {
   margin: 0;
-  color: var(--section-heading-color, rgb(var(--tb-primary, 0 0 0)));
+  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));
   font-family: var(--font-heading, var(--font-body, inherit));
   font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
   font-weight: 400;
@@ -21225,27 +22374,41 @@ const containerResponsiveThemeCss = `/*
   background: rgb(var(--tb-surface));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {
+  background: rgb(var(--tb-surface));
   color: rgb(var(--tb-onSurface));
+  --rb-surface-text-color: rgb(var(--tb-onSurface));
+  --rb-surface-heading-color: rgb(var(--tb-onSurface));
+  --rb-surface-link-color: rgb(var(--tb-onSurface));
+  --rb-surface-supporting-color: rgb(var(--tb-onSurface));
 }
 
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {
   background: rgb(var(--tb-secondary));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {
+  background: rgb(var(--tb-secondary));
   color: rgb(var(--tb-onSecondary));
+  --rb-surface-text-color: rgb(var(--tb-onSecondary));
+  --rb-surface-heading-color: rgb(var(--tb-onSecondary));
+  --rb-surface-link-color: rgb(var(--tb-onSecondary));
+  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));
 }
 
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {
   background: rgb(var(--tb-primary));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {
+  background: rgb(var(--tb-primary));
   color: rgb(var(--tb-onPrimary));
+  --rb-surface-text-color: rgb(var(--tb-onPrimary));
+  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
+  --rb-surface-link-color: rgb(var(--tb-onPrimary));
+  --rb-surface-supporting-color: rgb(var(--tb-onPrimary));
 }
 
-/* Body copy carries an inline muted colour from the block; force it to the
- * card's on-colour so it reads on every block (inline style needs !important). */
+/* Keep the intended visual hierarchy; the body color itself now resolves via
+ * the nearest surface provider instead of requiring an inline override. */
 :where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {
-  color: inherit !important;
   opacity: 0.9;
 }