@koehler8/cms 1.0.0-beta.10

package/src/styles/layout.css

@@ -0,0 +1,342 @@
+:root {
+  --layout-container-max-width: min(1180px, 92vw);
+  --layout-container-padding: clamp(16px, 4vw, 48px);
+  --layout-section-padding: clamp(48px, 12vw, 120px);
+  --layout-section-padding-tight: clamp(32px, 10vw, 80px);
+  --layout-grid-gutter: clamp(16px, 4vw, 32px);
+  --layout-stack-gap-tight: var(--ui-space-12, 12px);
+  --layout-stack-gap: var(--ui-space-16, 16px);
+  --layout-stack-gap-lg: var(--ui-space-24, 24px);
+  --layout-stack-gap-xl: var(--ui-space-40, 40px);
+  --layout-breakpoint-sm: 600px;
+  --layout-breakpoint-md: 768px;
+  --layout-breakpoint-lg: 1024px;
+  --layout-breakpoint-xl: 1280px;
+}
+
+/* Containers */
+.container {
+  width: min(var(--layout-container-max-width), 100%);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--layout-container-padding);
+  padding-right: var(--layout-container-padding);
+}
+
+.container-fluid {
+  width: 100%;
+  margin: 0;
+  padding-left: var(--layout-container-padding);
+  padding-right: var(--layout-container-padding);
+}
+
+.section-shell {
+  padding-block: var(--layout-section-padding);
+}
+
+.section-shell--tight {
+  padding-block: var(--layout-section-padding-tight);
+}
+
+/* Spacing helpers */
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--ui-space-8, 8px) !important;
+}
+
+.mb-2 {
+  margin-bottom: var(--ui-space-12, 12px) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--ui-space-16, 16px) !important;
+}
+
+.mb-4 {
+  margin-bottom: var(--ui-space-24, 24px) !important;
+}
+
+.mt-1 {
+  margin-top: var(--ui-space-8, 8px) !important;
+}
+
+.mt-2 {
+  margin-top: var(--ui-space-12, 12px) !important;
+}
+
+.mt-3 {
+  margin-top: var(--ui-space-16, 16px) !important;
+}
+
+.mt-4 {
+  margin-top: var(--ui-space-24, 24px) !important;
+}
+
+/* Grid */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--layout-grid-gutter) * -0.5);
+  margin-right: calc(var(--layout-grid-gutter) * -0.5);
+  row-gap: var(--layout-grid-gutter);
+}
+
+.row--tight {
+  column-gap: var(--ui-gap-md, 16px);
+  row-gap: var(--ui-gap-md, 16px);
+}
+
+.row > [class*='col-'] {
+  padding-left: calc(var(--layout-grid-gutter) * 0.5);
+  padding-right: calc(var(--layout-grid-gutter) * 0.5);
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+  --col-span: 12;
+}
+
+.row .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+}
+
+.row .col {
+  flex: 1 1 0;
+  width: auto;
+  max-width: none;
+}
+
+.row .col-1 { --col-span: 1; }
+.row .col-2 { --col-span: 2; }
+.row .col-3 { --col-span: 3; }
+.row .col-4 { --col-span: 4; }
+.row .col-5 { --col-span: 5; }
+.row .col-6 { --col-span: 6; }
+.row .col-7 { --col-span: 7; }
+.row .col-8 { --col-span: 8; }
+.row .col-9 { --col-span: 9; }
+.row .col-10 { --col-span: 10; }
+.row .col-11 { --col-span: 11; }
+.row .col-12 { --col-span: 12; }
+
+.row > [class*='col-']:not(.col-auto):not(.col) {
+  flex-basis: calc((var(--col-span) / 12) * 100%);
+  max-width: calc((var(--col-span) / 12) * 100%);
+}
+
+@media (min-width: 600px) {
+  .row .col-sm-1 { --col-span: 1; }
+  .row .col-sm-2 { --col-span: 2; }
+  .row .col-sm-3 { --col-span: 3; }
+  .row .col-sm-4 { --col-span: 4; }
+  .row .col-sm-5 { --col-span: 5; }
+  .row .col-sm-6 { --col-span: 6; }
+  .row .col-sm-7 { --col-span: 7; }
+  .row .col-sm-8 { --col-span: 8; }
+  .row .col-sm-9 { --col-span: 9; }
+  .row .col-sm-10 { --col-span: 10; }
+  .row .col-sm-11 { --col-span: 11; }
+  .row .col-sm-12 { --col-span: 12; }
+}
+
+@media (min-width: 768px) {
+  .row .col-md-1 { --col-span: 1; }
+  .row .col-md-2 { --col-span: 2; }
+  .row .col-md-3 { --col-span: 3; }
+  .row .col-md-4 { --col-span: 4; }
+  .row .col-md-5 { --col-span: 5; }
+  .row .col-md-6 { --col-span: 6; }
+  .row .col-md-7 { --col-span: 7; }
+  .row .col-md-8 { --col-span: 8; }
+  .row .col-md-9 { --col-span: 9; }
+  .row .col-md-10 { --col-span: 10; }
+  .row .col-md-11 { --col-span: 11; }
+  .row .col-md-12 { --col-span: 12; }
+}
+
+@media (min-width: 1024px) {
+  .row .col-lg-1 { --col-span: 1; }
+  .row .col-lg-2 { --col-span: 2; }
+  .row .col-lg-3 { --col-span: 3; }
+  .row .col-lg-4 { --col-span: 4; }
+  .row .col-lg-5 { --col-span: 5; }
+  .row .col-lg-6 { --col-span: 6; }
+  .row .col-lg-7 { --col-span: 7; }
+  .row .col-lg-8 { --col-span: 8; }
+  .row .col-lg-9 { --col-span: 9; }
+  .row .col-lg-10 { --col-span: 10; }
+  .row .col-lg-11 { --col-span: 11; }
+  .row .col-lg-12 { --col-span: 12; }
+}
+
+@media (min-width: 1280px) {
+  .row .col-xl-1 { --col-span: 1; }
+  .row .col-xl-2 { --col-span: 2; }
+  .row .col-xl-3 { --col-span: 3; }
+  .row .col-xl-4 { --col-span: 4; }
+  .row .col-xl-5 { --col-span: 5; }
+  .row .col-xl-6 { --col-span: 6; }
+  .row .col-xl-7 { --col-span: 7; }
+  .row .col-xl-8 { --col-span: 8; }
+  .row .col-xl-9 { --col-span: 9; }
+  .row .col-xl-10 { --col-span: 10; }
+  .row .col-xl-11 { --col-span: 11; }
+  .row .col-xl-12 { --col-span: 12; }
+}
+
+/* Stack helpers */
+.stack-tight {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap-tight);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap);
+}
+
+.stack-lg {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap-lg);
+}
+
+.stack-xl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap-xl);
+}
+
+.gap-sm {
+  gap: var(--layout-stack-gap-tight);
+}
+
+.gap-md {
+  gap: var(--layout-stack-gap);
+}
+
+.gap-lg {
+  gap: var(--layout-stack-gap-lg);
+}
+
+.gap-xl {
+  gap: var(--layout-stack-gap-xl);
+}
+
+/* Typography helpers */
+.text-center {
+  text-align: center !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-muted {
+  color: var(--ui-text-muted, var(--brand-fg-300, #54627b));
+}
+
+.text-primary {
+  color: var(--ui-text-primary, var(--brand-fg-100, #1f2a44));
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.eyebrow-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--ui-text-muted, var(--brand-fg-300, #54627b));
+}
+
+/* Flexbox + alignment helpers */
+.d-flex {
+  display: flex !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+.align-center {
+  align-items: center !important;
+}
+
+.align-start {
+  align-items: flex-start !important;
+}
+
+.align-end {
+  align-items: flex-end !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.rounded {
+  border-radius: 12px;
+}
+
+.rounded-lg {
+  border-radius: 24px;
+}
+
+.img-fluid {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.text-break {
+  overflow-wrap: anywhere;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Legal pages */

package/src/styles/theme-base.css

@@ -0,0 +1,84 @@
+:root {
+  --about-image-surface: rgba(10, 10, 13, 0.94);
+  --about-image-placeholder: linear-gradient(135deg, rgba(20, 18, 22, 0.55), rgba(10, 10, 13, 0.75));
+  --responsive-picture-surface: var(--about-image-surface);
+  --responsive-picture-placeholder: var(--about-image-placeholder);
+  --brand-neon-pink: #e44b8d;
+  --brand-crimson-red: #d04f4f;
+  --brand-sultry-purple: #5c6ac4;
+  --brand-electric-blue: #4f6cf0;
+  --brand-amber-heat: #f18f3b;
+  --brand-deep-violet: #2f3a68;
+
+  --brand-bg-900: #f5f7ff;
+  --brand-bg-800: #edf1ff;
+  --brand-bg-700: #dce4ff;
+  --brand-fg-050: #243a80;
+  --brand-fg-100: #1f2a44;
+  --brand-fg-200: #334261;
+  --brand-fg-300: #54627b;
+
+  --brand-radius-sm: 8px;
+  --brand-radius-md: 14px;
+  --brand-radius-lg: 24px;
+
+  --brand-gradient-ignition: linear-gradient(135deg, #4f6cf0 0%, #243a80 100%);
+  --brand-shadow-glow: 0 16px 32px rgba(28, 42, 96, 0.28);
+  --brand-shadow-glow-strong: 0 22px 44px rgba(23, 35, 80, 0.32);
+  --brand-chart-track: rgba(236, 241, 255, 0.85);
+  --brand-chart-center-text: var(--brand-fg-100);
+  --brand-cta-text: #ffffff;
+
+  --brand-accent-electric: var(--brand-electric-blue);
+  --brand-accent-electric-soft: rgba(79, 108, 240, 0.18);
+  --brand-accent-warm: var(--brand-amber-heat);
+
+  --brand-card-soft: #ffffff;
+  --brand-card-border: rgba(79, 108, 240, 0.16);
+  --brand-card-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
+
+  --brand-primary-cta-gradient: var(--brand-gradient-ignition);
+  --brand-primary-cta-text: var(--brand-cta-text);
+  --brand-primary-cta-shadow: var(--brand-shadow-glow);
+  --brand-primary-cta-hover-shadow: var(--brand-shadow-glow-strong);
+  --brand-primary-cta-hover-translate: translateY(-2px);
+
+  --brand-surface-card-bg: var(--brand-card-soft);
+  --brand-surface-card-border: var(--brand-card-border);
+  --brand-surface-card-shadow: var(--brand-card-shadow);
+  --brand-surface-helper-bg: rgba(79, 108, 240, 0.08);
+  --brand-surface-helper-hover-bg: rgba(79, 108, 240, 0.14);
+  --brand-card-radius: var(--brand-radius-lg);
+  --brand-button-radius: var(--brand-radius-md);
+
+  --brand-icon-badge-bg: rgba(79, 108, 240, 0.12);
+  --brand-icon-badge-color: var(--brand-deep-violet);
+
+  --brand-pill-gradient: linear-gradient(135deg, var(--brand-electric-blue) 0%, #2b3d7b 100%);
+  --brand-pill-alt-gradient: linear-gradient(135deg, var(--brand-sultry-purple) 0%, var(--brand-electric-blue) 100%);
+  --brand-pill-contrast: #ffffff;
+
+  --brand-border-highlight: rgba(79, 108, 240, 0.28);
+  --brand-border-glow: rgba(79, 108, 240, 0.32);
+
+  --brand-status-success: #239c65;
+  --brand-status-error: var(--brand-crimson-red);
+  --brand-status-error-soft: rgba(208, 79, 79, 0.18);
+
+  --brand-input-bg: #ffffff;
+  --brand-input-border: rgba(79, 108, 240, 0.25);
+  --brand-input-border-active: rgba(79, 108, 240, 0.45);
+  --brand-input-text: var(--brand-fg-100);
+  --brand-input-placeholder: rgba(84, 98, 123, 0.64);
+  --brand-focus-ring: 0 0 0 2px rgba(79, 108, 240, 0.3);
+  --brand-focus-glow: 0 0 22px rgba(79, 108, 240, 0.22);
+
+  --brand-modal-backdrop: rgba(15, 23, 42, 0.55);
+  --brand-modal-surface: rgba(255, 255, 255, 0.97);
+  --brand-modal-border: rgba(79, 108, 240, 0.18);
+  --brand-modal-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
+  --brand-modal-radius: var(--brand-radius-lg);
+
+  --brand-countdown-digit: var(--brand-accent-electric);
+  --brand-countdown-label: rgba(84, 98, 123, 0.75);
+}

package/src/themes/buildCssVarMap.js

@@ -0,0 +1,246 @@
+// Pure CSS-variable derivation from a theme manifest. Lives in its own
+// file (with no Vite-specific imports) so it can be called from both
+// the runtime themeManager AND the build-time vite plugin, which uses
+// it to emit `virtual:cms-theme-vars.css` — a synchronously-linked
+// stylesheet containing every registered theme's tokens. That, combined
+// with the SSR-rendered `data-site-theme` attribute (see main.js
+// applySiteTheme), eliminates the FOUC dark-themed sites used to suffer.
+
+const toKebab = (value = '') =>
+  value
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+
+const withPx = (value) => {
+  if (value === undefined || value === null) return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  return value;
+};
+
+const setVar = (vars, name, value) => {
+  if (value === undefined || value === null || value === '') return;
+  vars[name] = String(value);
+};
+
+const assignPrefixed = (vars, entries = {}, prefix = '') => {
+  Object.entries(entries).forEach(([key, value]) => {
+    setVar(vars, `${prefix}${key}`, value);
+  });
+};
+
+function setSurfaceVars(vars, prefix, surface = {}) {
+  if (!surface) return;
+  setVar(vars, `${prefix}-bg`, surface.background);
+  setVar(vars, `${prefix}-before`, surface.before);
+  setVar(vars, `${prefix}-after`, surface.after);
+}
+
+function coerceSurface(value, defaults = {}) {
+  if (value && typeof value === 'object') return value;
+  if (!value) return defaults;
+  return { ...defaults, background: value };
+}
+
+function coerceArray(value) {
+  if (!value) return undefined;
+  return Array.isArray(value) ? value.filter(Boolean).join(', ') : value;
+}
+
+export function buildCssVarMap(manifest) {
+  if (!manifest) return {};
+  const vars = {};
+  const tokens = manifest.tokens || {};
+  const palette = tokens.palette || {};
+  const text = tokens.text || {};
+  const surfaces = tokens.surfaces || {};
+  const helper = surfaces.helper || {};
+  const tabs = surfaces.tabs || {};
+  const field = surfaces.field || {};
+  const strip = surfaces.strip || {};
+  const chrome = surfaces.chrome || {};
+  const heroSurface = surfaces.backdropPrimary || {};
+  const promoSurface = surfaces.backdropSecondary || {};
+  const typography = tokens.typography || {};
+  const ctas = tokens.ctas || {};
+  const chips = tokens.chips || {};
+  const focus = tokens.focus || {};
+  const radii = tokens.radii || {};
+  const elevation = tokens.elevation || {};
+  const utility = tokens.utility || {};
+
+  assignPrefixed(
+    vars,
+    Object.fromEntries(
+      Object.entries(palette).map(([key, value]) => [`--brand-${toKebab(key)}`, value])
+    )
+  );
+
+  setVar(vars, '--brand-accent-electric', palette.primary || palette.accent);
+  setVar(vars, '--brand-accent-electric-soft', palette.accentSoft);
+  setVar(vars, '--brand-accent-warm', palette.accent || palette.warning);
+
+  setVar(vars, '--brand-fg-100', text.primary);
+  setVar(vars, '--brand-fg-200', text.muted);
+  setVar(vars, '--brand-fg-300', text.mutedStrong);
+  setVar(vars, '--brand-fg-050', text.inverse);
+  setVar(vars, '--brand-bg-900', surfaces.base);
+  setVar(vars, '--brand-bg-800', surfaces.baseAlt);
+  setVar(vars, '--brand-bg-700', surfaces.raised);
+  setVar(vars, '--brand-bg-600', surfaces.sunken);
+
+  Object.entries(radii).forEach(([key, value]) => {
+    setVar(vars, `--brand-radius-${toKebab(key)}`, withPx(value));
+  });
+  setVar(vars, '--brand-card-radius', withPx(radii.lg || radii.md));
+  setVar(vars, '--brand-button-radius', withPx(radii.md || radii.sm));
+
+  setVar(vars, '--brand-shadow-glow', elevation.raised);
+  setVar(vars, '--brand-shadow-glow-strong', elevation.overlay);
+  setVar(vars, '--brand-card-shadow', elevation.raised);
+  setVar(vars, '--brand-surface-card-shadow', elevation.raised);
+
+  const cardTextColor = text.card || text.primary;
+  setVar(vars, '--brand-card-soft', surfaces.card);
+  setVar(vars, '--brand-surface-card-bg', surfaces.card);
+  setVar(vars, '--brand-card-border', surfaces.border);
+  setVar(vars, '--brand-surface-card-border', surfaces.border);
+  setVar(vars, '--brand-card-text', cardTextColor);
+  setVar(vars, '--brand-surface-helper-bg', helper.background || surfaces.callout);
+  setVar(vars, '--brand-surface-helper-hover-bg', helper.hover || helper.background);
+  setVar(vars, '--brand-icon-badge-bg', surfaces.chipAccent || surfaces.chip);
+  setVar(vars, '--brand-icon-badge-color', palette.primary || text.primary);
+
+  setVar(vars, '--brand-border-highlight', surfaces.border);
+  setVar(vars, '--brand-border-glow', surfaces.border);
+
+  setVar(vars, '--brand-status-success', palette.success);
+  setVar(vars, '--brand-status-error', palette.critical);
+  setVar(vars, '--brand-status-error-soft', palette.criticalSoft);
+
+  setVar(vars, '--brand-input-bg', field.background || surfaces.input);
+  setVar(vars, '--brand-input-border', field.border || utility.inputBorder);
+  setVar(vars, '--brand-input-border-active', focus.ring);
+  setVar(vars, '--brand-input-text', field.inputColor || utility.inputText || text.primary);
+  setVar(
+    vars,
+    '--brand-input-placeholder',
+    field.inputPlaceholder || utility.inputPlaceholder || text.muted
+  );
+  setVar(vars, '--brand-focus-ring', focus.ring);
+  setVar(vars, '--brand-focus-glow', focus.shadowInset);
+
+  setVar(vars, '--brand-modal-backdrop', surfaces.backdrop);
+  setVar(vars, '--brand-modal-surface', utility.modalSurface);
+  setVar(vars, '--brand-modal-border', utility.modalBorder);
+  setVar(vars, '--brand-modal-shadow', utility.modalShadow);
+  setVar(vars, '--brand-modal-radius', withPx(utility.modalRadius));
+
+  setVar(vars, '--brand-chart-track', utility.chartTrack);
+  setVar(vars, '--brand-chart-center-text', utility.chartCenterText);
+
+  setVar(vars, '--brand-header-bg', chrome.background);
+  setVar(vars, '--brand-header-text', chrome.text);
+  setVar(vars, '--site-header-shadow', chrome.shadow);
+  setVar(vars, '--site-header-shadow-compact', chrome.compactShadow);
+
+  const primaryCta = ctas.primary || {};
+  setVar(vars, '--brand-primary-cta-gradient', primaryCta.bg);
+  setVar(vars, '--brand-primary-cta-text', primaryCta.text);
+  setVar(vars, '--brand-primary-cta-border', primaryCta.border);
+  setVar(vars, '--brand-primary-cta-shadow', primaryCta.shadow);
+  setVar(vars, '--brand-primary-cta-hover-shadow', primaryCta.shadow);
+  setVar(vars, '--brand-primary-cta-hover-translate', 'translateY(-1px)');
+  setVar(vars, '--brand-cta-text', primaryCta.text);
+
+  setVar(vars, '--helper-strip-bg', helper.background || surfaces.callout);
+  setVar(vars, '--helper-strip-border', helper.border || surfaces.border);
+  setVar(vars, '--helper-strip-color', helper.text || text.primary);
+  setVar(vars, '--helper-strip-hover-bg', helper.hover || helper.background);
+  setVar(vars, '--helper-strip-hover-color', helper.hoverColor || helper.text || text.primary);
+  setVar(vars, '--helper-strip-link-hover', helper.linkHover || palette.primary);
+  setVar(vars, '--helper-strip-heading-color', helper.heading || text.primary);
+  setVar(vars, '--helper-strip-body-color', helper.body || text.mutedStrong || text.muted);
+
+  setVar(vars, '--tabs-bg', tabs.background);
+  setVar(vars, '--tabs-border', tabs.border || surfaces.border);
+  setVar(vars, '--tabs-shadow', tabs.shadow || elevation.flat);
+  setVar(vars, '--tab-color', tabs.tabColor || text.muted);
+  setVar(vars, '--tab-active-bg', tabs.activeBackground || palette.primary);
+  setVar(vars, '--tab-active-color', tabs.activeColor || palette.inverse || '#fff');
+  setVar(vars, '--tab-active-shadow', tabs.activeShadow || elevation.raised);
+  setVar(vars, '--tab-step-bg', tabs.stepBackground || helper.background);
+  setVar(vars, '--tab-step-border', tabs.stepBorder || helper.border);
+  setVar(vars, '--tab-step-color', tabs.stepColor || palette.primary);
+  setVar(vars, '--tab-active-step-bg', tabs.activeStepBackground || palette.primary);
+  setVar(vars, '--tab-active-step-border', tabs.activeStepBorder || tabs.stepBorder);
+  setVar(vars, '--tab-active-step-color', tabs.activeStepColor || palette.inverse || '#fff');
+
+  setVar(vars, '--field-bg', field.background);
+  setVar(vars, '--field-border', field.border || utility.inputBorder);
+  setVar(vars, '--field-shadow', field.shadow || elevation.flat);
+  setVar(vars, '--field-addon-bg', field.addonBackground || helper.background);
+  setVar(vars, '--field-addon-border', field.addonBorder || helper.border);
+  setVar(vars, '--field-addon-color', field.addonColor || helper.text || text.primary);
+  setVar(vars, '--field-input-color', field.inputColor || text.primary);
+  setVar(vars, '--field-input-placeholder', field.inputPlaceholder || text.muted);
+
+  setVar(vars, '--community-strip-bg', strip.background || surfaces.card);
+  setVar(vars, '--community-strip-border', strip.border || surfaces.border);
+  setVar(vars, '--community-strip-color', strip.text || text.primary);
+
+  setVar(vars, '--ui-text-primary', text.primary);
+  setVar(vars, '--ui-text-muted', text.muted);
+  setVar(vars, '--ui-field-label', text.muted);
+  setVar(vars, '--ui-field-value', text.primary);
+  setVar(vars, '--ui-status-heading-color', text.accent || palette.primary);
+
+  setVar(vars, '--brand-countdown-digit', palette.primary);
+  setVar(vars, '--brand-countdown-label', text.muted);
+
+  const secondaryCta = ctas.secondary || {};
+  setVar(vars, '--brand-pill-gradient', primaryCta.bg);
+  setVar(vars, '--brand-pill-alt-gradient', secondaryCta.bg || primaryCta.bg);
+  setVar(vars, '--brand-pill-contrast', primaryCta.text);
+
+  setVar(vars, '--brand-chip-neutral-bg', chips.neutral?.bg);
+  setVar(vars, '--brand-chip-neutral-color', chips.neutral?.text);
+  setVar(vars, '--brand-chip-neutral-border', chips.neutral?.border);
+
+  const heroBg = coerceArray(utility.gradientHero || heroSurface.background);
+  const promoBg = coerceArray(utility.gradientPromo || promoSurface.background);
+  if (heroBg) setVar(vars, '--brand-gradient-hero', heroBg);
+  if (promoBg) setVar(vars, '--brand-gradient-promo', promoBg);
+
+  setSurfaceVars(vars, '--hero-surface', heroSurface);
+  setSurfaceVars(vars, '--promo-surface', promoSurface);
+  const bodyBackground = coerceArray(utility.bodyBackground);
+  if (bodyBackground) {
+    setVar(vars, '--theme-body-background', bodyBackground);
+  }
+
+  const statusHeadline = coerceSurface(utility.statusHeadline, {
+    color: palette.primary || text.primary,
+    shadow: elevation.raised,
+  });
+
+  setVar(vars, '--status-headline-bg', statusHeadline.background);
+  setVar(vars, '--status-headline-color', statusHeadline.color);
+  setVar(vars, '--status-headline-shadow', statusHeadline.shadow);
+
+  setVar(vars, '--status-price-value-color', palette.accent || palette.primary || text.primary);
+  setVar(vars, '--status-price-value-shadow', elevation.raised);
+
+  return vars;
+}
+
+/**
+ * Render the var map as a CSS rule body.
+ * @param {object} vars Map of CSS custom property name → value
+ */
+export function renderCssVarRule(selector, vars) {
+  const declarations = Object.entries(vars)
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join('\n');
+  return `${selector} {\n${declarations}\n}`;
+}