@riverbankcms/sdk 0.76.0 → 0.77.1

package/dist/server/theme-bridge.mjs

@@ -532,6 +532,97 @@ var confidentChip = defineButtonPersonality({
   }
 });
 
+// ../theme-core/src/buttons/personalities/earth-pill.ts
+var earthPill = defineButtonPersonality({
+  id: "earth-pill",
+  name: "Earth Pill",
+  description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
+  tags: { tone: "classic", energy: "calm", motion: "subtle", era: "organic" },
+  buttonSystem: {
+    global: {
+      cornerStyle: "pill",
+      shadow: "low",
+      textTransform: "none",
+      fontWeight: 500,
+      borderWidth: 1,
+      hoverTransform: "lift",
+      hoverColor: "none",
+      typography: "body",
+      paddingPreset: "default"
+    },
+    sizes: {
+      sm: { padding: "0.5rem 1rem", fontSize: "text-sm" },
+      md: { padding: "0.625rem 1.35rem" },
+      lg: { padding: "0.75rem 1.65rem", fontSize: "text-lg" },
+      xl: { padding: "0.875rem 2rem", fontSize: "text-xl" }
+    },
+    variants: [
+      {
+        id: "primary",
+        name: "Primary",
+        enabled: true,
+        priority: 1,
+        background: { type: "solid", colorToken: "primary" },
+        textColorToken: "primaryForeground",
+        borderRadius: "rounded-full",
+        shadow: { elevation: "low", softness: "soft", position: "bottom" },
+        effects: {
+          hover: [
+            { effectId: "lift", options: { translateY: "-1px" } },
+            { effectId: "background-on-hover", options: { colorToken: "accent" } }
+          ],
+          active: [{ effectId: "scale-down", options: { scale: "0.98" } }]
+        }
+      },
+      {
+        id: "secondary",
+        name: "Secondary",
+        enabled: true,
+        priority: 2,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-full",
+        border: { widthClass: "border", colorToken: "primary" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "muted" } }]
+        }
+      },
+      {
+        id: "outline",
+        name: "Outline",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "text",
+        borderRadius: "rounded-full",
+        border: { widthClass: "border", colorToken: "border" },
+        effects: {
+          hover: [{ effectId: "background-on-hover", options: { colorToken: "surfaceAlt" } }]
+        }
+      },
+      {
+        id: "ghost",
+        name: "Ghost",
+        enabled: true,
+        priority: 3,
+        background: { type: "transparent" },
+        textColorToken: "primary",
+        borderRadius: "rounded-full",
+        shadow: { elevation: "none", softness: null, position: "bottom" },
+        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" }
+        },
+        effects: {
+          hover: [{ effectId: "opacity-reduce", options: { reduction: 25 } }]
+        }
+      }
+    ]
+  }
+});
+
 // ../theme-core/src/buttons/personalities/editorial-link.ts
 var editorialLink = defineButtonPersonality({
   id: "editorial-link",
@@ -990,6 +1081,7 @@ var softPill = defineButtonPersonality({
 // ../theme-core/src/buttons/personalities/index.ts
 var buttonPersonalities = [
   softPill,
+  earthPill,
   confidentChip,
   editorialLink,
   pebble,
@@ -1711,6 +1803,47 @@ var eyebrowTreatmentValues = [
   "pill-bounce",
   "accent-pill-bounce"
 ];
+var visibleHeadingDecorationFamilyValues = [
+  "organic-squiggle",
+  "short-center-rule"
+];
+var visibleHeadingDecorationPlacementValues = [
+  "after-heading",
+  "between-heading-and-body",
+  "under-centered-heading"
+];
+var headingDecorationOverrideValues = [
+  "site-default",
+  "on",
+  "off"
+];
+var headingDecorationColorTokenValues = [
+  "text",
+  "primary",
+  "secondary",
+  "accent",
+  "border",
+  "muted"
+];
+var accordionIconSetValues = [
+  "plus",
+  "chevron",
+  "caret",
+  "minimal-cross"
+];
+var accordionIconColorTokenValues = [
+  "text",
+  "muted",
+  "primary",
+  "secondary",
+  "accent",
+  "current"
+];
+var accordionIconMotionValues = [
+  "none",
+  "rotate",
+  "swap"
+];
 
 // ../theme-core/src/utils/tokenOrColor.ts
 import { z as z15 } from "zod";
@@ -1761,8 +1894,19 @@ var headingTypographyStyleSchema = typographyStyleSchema.extend({
   colorToken: themeColorTokenSchema.nullable().optional()
 });
 var proseLinkUnderlineStyleSchema = z16.enum(["solid", "dotted", "dashed"]);
-var proseLinkUnderlineThicknessSchema = z16.enum(["auto", "fromFont", "thin", "medium", "thick"]);
-var proseLinkUnderlineOffsetSchema = z16.enum(["auto", "tight", "normal", "loose"]);
+var proseLinkUnderlineThicknessSchema = z16.enum([
+  "auto",
+  "fromFont",
+  "thin",
+  "medium",
+  "thick"
+]);
+var proseLinkUnderlineOffsetSchema = z16.enum([
+  "auto",
+  "tight",
+  "normal",
+  "loose"
+]);
 var proseLinkStyleSchema = z16.object({
   colorToken: themeColorTokenSchema.optional(),
   hoverColorToken: themeColorTokenSchema.optional(),
@@ -1773,7 +1917,14 @@ var proseLinkStyleSchema = z16.object({
   underlineThickness: proseLinkUnderlineThicknessSchema.optional(),
   underlineOffset: proseLinkUnderlineOffsetSchema.optional()
 });
-var semanticSpacingSchema = z16.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]);
+var semanticSpacingSchema = z16.enum([
+  "none",
+  "compact",
+  "cozy",
+  "medium",
+  "comfortable",
+  "spacious"
+]);
 var boxRoundedSchema = z16.enum(["none", "sm", "md", "lg", "xl", "2xl", "full"]);
 var boxBackgroundOverlaySchema = z16.object({
   type: z16.enum(["none", "color", "gradient"]).nullable().optional(),
@@ -1795,12 +1946,36 @@ var boxBackgroundSchema = z16.object({
   textColor: tokenOrCssColorValueSchema.nullable().optional(),
   headingColor: tokenOrCssColorValueSchema.nullable().optional()
 });
+var noHeadingDecorationSchema = z16.object({
+  family: z16.literal("none"),
+  placement: z16.literal("none")
+});
+var visibleHeadingDecorationSchema = z16.object({
+  family: z16.enum(visibleHeadingDecorationFamilyValues),
+  placement: z16.enum(visibleHeadingDecorationPlacementValues),
+  colorToken: z16.enum(headingDecorationColorTokenValues).optional()
+});
+var headingDecorationSchema = z16.union([
+  noHeadingDecorationSchema,
+  visibleHeadingDecorationSchema
+]);
+var accordionIconTreatmentSchema = z16.object({
+  iconSet: z16.enum(accordionIconSetValues),
+  colorToken: z16.enum(accordionIconColorTokenValues),
+  openColorToken: z16.enum(accordionIconColorTokenValues).optional(),
+  motion: z16.enum(accordionIconMotionValues)
+});
 var sectionStylesOverrideSchema = z16.object({
   background: boxBackgroundSchema.nullable().optional(),
   spacing: semanticSpacingSchema.nullable().optional(),
   minHeight: z16.enum(["none", "banner", "hero", "immersive"]).nullable().optional(),
   tileTreatment: z16.enum(tileTreatmentValues).nullable().optional(),
-  eyebrowTreatment: z16.enum(eyebrowTreatmentValues).nullable().optional()
+  eyebrowTreatment: z16.enum(eyebrowTreatmentValues).nullable().optional(),
+  headingDecoration: headingDecorationSchema.nullable().optional(),
+  // Author-level override consumed by later block/editor rendering phases.
+  // Keeping it in section styles lets existing block save APIs persist it.
+  headingDecorationOverride: z16.enum(headingDecorationOverrideValues).nullable().optional(),
+  accordionIconTreatment: accordionIconTreatmentSchema.nullable().optional()
 });
 var containerStylesOverrideSchema = z16.object({
   background: boxBackgroundSchema.nullable().optional(),
@@ -1893,9 +2068,17 @@ var inputStyle = z16.object({
   focus: z16.enum(["glow", "ring", "underline"]),
   label: z16.enum(["inside", "above"])
 });
-var headerVariant = z16.enum(["classic", "centered", "transparent", "floating", "editorial"]);
+var headerVariant = z16.enum(["classic", "centered", "transparent", "floating"]);
 var headerPositioning = z16.enum(["static", "sticky", "fixed"]);
-var headerNavStyle = z16.enum(["minimal", "underline", "underline-grow", "capsule", "scale", "frosted", "solid"]);
+var headerNavStyle = z16.enum([
+  "minimal",
+  "underline",
+  "underline-grow",
+  "capsule",
+  "scale",
+  "frosted",
+  "solid"
+]);
 var navFontWeight = z16.enum(["regular", "medium", "semibold", "bold"]);
 var headerMaxWidth = z16.enum(["container", "full"]);
 var headerContainerSchema = z16.object({
@@ -1943,8 +2126,22 @@ var dropdownStyleSchema = z16.object({
   textSize: z16.enum(["xs", "sm", "base", "lg"]).optional()
   // optional = no override (browser default)
 }).optional();
-var headerCtaGapSchema = z16.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
-var headerCtaTreatmentSchema = z16.enum(["default", "primary", "secondary", "inverted", "outline", "ghost"]);
+var headerCtaGapSchema = z16.enum([
+  "none",
+  "tight",
+  "compact",
+  "default",
+  "relaxed",
+  "spacious"
+]);
+var headerCtaTreatmentSchema = z16.enum([
+  "default",
+  "primary",
+  "secondary",
+  "inverted",
+  "outline",
+  "ghost"
+]);
 var navContainerSchema = z16.object({
   type: z16.enum(["none", "pill", "glass"]).default("none"),
   tint: z16.string().nullable().optional(),
@@ -1999,7 +2196,14 @@ var footerMaxWidth = z16.enum(["container", "full"]);
 var footerMode = z16.enum(["default", "blocks", "default+blocks", "none"]);
 var footerNavLayoutMode = z16.enum(["stack", "inline", "inline-wrap"]);
 var footerNavLayoutAlign = z16.enum(["start", "center", "end", "space-between"]);
-var footerSpacing = z16.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
+var footerSpacing = z16.enum([
+  "none",
+  "tight",
+  "compact",
+  "default",
+  "relaxed",
+  "spacious"
+]);
 var footerLogoPlacement = z16.enum(["left", "right", "above", "below"]);
 var footerLogoSize = z16.enum(["sm", "md", "lg", "xl"]);
 var footerLogoMaxHeight = z16.enum(["sm", "md", "lg", "xl"]);
@@ -2064,7 +2268,12 @@ var footerSchema = z16.object({
   logo: footerLogoSchema.optional(),
   bottomBar: footerBottomBarSchema.optional()
 });
-var containerPaddingPresetSchema = z16.enum(["tight", "compact", "default", "relaxed"]);
+var containerPaddingPresetSchema = z16.enum([
+  "tight",
+  "compact",
+  "default",
+  "relaxed"
+]);
 var layoutSchema = z16.object({
   containerPadding: z16.object({
     mobile: containerPaddingPresetSchema.optional(),
@@ -2072,8 +2281,24 @@ var layoutSchema = z16.object({
     desktop: containerPaddingPresetSchema.optional()
   }).optional()
 }).optional();
-var heroTypographySizeSchema = z16.enum(["sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "editorial"]);
-var heroTypographyLineHeightSchema = z16.enum(["tight", "snug", "normal", "relaxed"]);
+var heroTypographySizeSchema = z16.enum([
+  "sm",
+  "base",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "editorial"
+]);
+var heroTypographyLineHeightSchema = z16.enum([
+  "tight",
+  "snug",
+  "normal",
+  "relaxed"
+]);
 var heroResponsiveTypographySchema = z16.object({
   headlineSize: heroTypographySizeSchema.optional(),
   headlineLineHeight: heroTypographyLineHeightSchema.optional(),
@@ -4792,9 +5017,9 @@ var containerResponsiveThemeCss = `/*
 }
 
 @layer rb-theme {
-/* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
-:root {
-  /* --tb-primary: 17 24 39;
+  /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
+  :root {
+    /* --tb-primary: 17 24 39;
   --tb-text: 17 24 39;
   --tb-muted: 107 114 128;
   --tb-bg: 255 255 255;
@@ -4816,159 +5041,164 @@ var containerResponsiveThemeCss = `/*
 
   --motion-duration: 180ms;
   --motion-ease: cubic-bezier(.2,.8,.2,1); */
-}
+  }
 
-/* -------------------------------------------------------------------------- */
-/* Shared: Modal                                                             */
-/* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
+  /* Shared: Modal                                                             */
+  /* -------------------------------------------------------------------------- */
 
-:where(.theme-scope) .rb-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--rb-modal-z-index, 20000);
-  display: grid;
-  place-items: center;
-  padding: 1rem;
-  /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
-  background-color: rgba(0, 0, 0, 0.6);
-  background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
-}
+  :where(.theme-scope) .rb-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--rb-modal-z-index, 20000);
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+    /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
+    background-color: rgba(0, 0, 0, 0.6);
+    background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
+  }
 
-:where(.theme-scope) .rb-modal {
-  width: min(var(--rb-modal-max-width, 560px), 100%);
-  background: var(--rb-modal-bg, rgb(var(--tb-surface)));
-  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)));
-}
+  :where(.theme-scope) .rb-modal {
+    width: min(var(--rb-modal-max-width, 560px), 100%);
+    background: var(--rb-modal-bg, rgb(var(--tb-surface)));
+    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)));
+  }
 
-:where(.theme-scope) .rb-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1rem 0.75rem;
-  border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
-}
+  :where(.theme-scope) .rb-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1rem 0.75rem;
+    border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
+  }
 
-:where(.theme-scope) .rb-modal__title {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 1.0625rem;
-  font-weight: 600;
-  color: rgb(var(--tb-text));
-}
+  :where(.theme-scope) .rb-modal__title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: rgb(var(--tb-text));
+  }
 
-:where(.theme-scope) .rb-modal__close {
-  background: transparent;
-  border: none;
-  width: 2.25rem;
-  height: 2.25rem;
-  padding: 0;
-  line-height: 1;
-  color: rgb(var(--tb-mutedText));
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-  border-radius: var(--radius-control);
-}
+  :where(.theme-scope) .rb-modal__close {
+    background: transparent;
+    border: none;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    line-height: 1;
+    color: rgb(var(--tb-mutedText));
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    border-radius: var(--radius-control);
+  }
 
-:where(.theme-scope) .rb-modal__close:hover {
-  color: rgb(var(--tb-text));
-  background: rgba(var(--tb-border), 0.2);
-}
+  :where(.theme-scope) .rb-modal__close:hover {
+    color: rgb(var(--tb-text));
+    background: rgba(var(--tb-border), 0.2);
+  }
 
-:where(.theme-scope) .rb-modal__close:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
-}
+  :where(.theme-scope) .rb-modal__close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
+  }
 
-:where(.theme-scope) .rb-modal__body {
-  padding: 0.875rem 1rem 1rem;
-  color: rgb(var(--tb-text));
-  font-size: 0.9375rem;
-  line-height: 1.45;
-}
+  :where(.theme-scope) .rb-modal__body {
+    padding: 0.875rem 1rem 1rem;
+    color: rgb(var(--tb-text));
+    font-size: 0.9375rem;
+    line-height: 1.45;
+  }
 
-/* -------------------------------------------------------------------------- */
-/* Header: Mobile nav overlay transitions                                      */
-/* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
+  /* Header: Mobile nav overlay transitions                                      */
+  /* -------------------------------------------------------------------------- */
 
-/* Keep the overlay in the DOM so we can transition opacity/transform.
+  /* Keep the overlay in the DOM so we can transition opacity/transform.
    JS toggles \`aria-hidden\` + \`inert\` (via enhancer), and CSS uses pointer-events
    to prevent interaction while closed. */
-.nav-mobile-overlay {
-  pointer-events: none;
-  /* Prevent transformed children (panel) from creating viewport scrollbars
+  .nav-mobile-overlay {
+    pointer-events: none;
+    /* Prevent transformed children (panel) from creating viewport scrollbars
      during enter/exit transitions. */
-  overflow: hidden;
-}
-
-.nav-mobile-overlay[aria-hidden="false"] {
-  pointer-events: auto;
-}
+    overflow: hidden;
+  }
 
-.nav-mobile-overlay .nav-mobile-backdrop {
-  opacity: 0;
-  transition: opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
-}
+  .nav-mobile-overlay[aria-hidden='false'] {
+    pointer-events: auto;
+  }
 
-.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-backdrop {
-  opacity: 1;
-}
+  .nav-mobile-overlay .nav-mobile-backdrop {
+    opacity: 0;
+    transition: opacity var(--motion-duration, 180ms)
+      var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+  }
 
-.nav-mobile-overlay .nav-mobile-panel {
-  opacity: 0;
-  transform: translate3d(12px, 0, 0);
-  overflow-x: hidden;
-  transition:
-    opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
-    transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
-  will-change: opacity, transform;
-}
+  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {
+    opacity: 1;
+  }
 
-.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-panel {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-}
+  .nav-mobile-overlay .nav-mobile-panel {
+    opacity: 0;
+    transform: translate3d(12px, 0, 0);
+    overflow-x: hidden;
+    transition:
+      opacity var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
+      transform var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+    will-change: opacity, transform;
+  }
 
-/* -------------------------------------------------------------------------- */
-/* Header: Mobile toggle hamburger -> X                                       */
-/* -------------------------------------------------------------------------- */
+  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 
-.nav-mobile-toggle .nav-mobile-bar {
-  transform-origin: center;
-  transition:
-    transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
-    opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
-  will-change: transform, opacity;
-}
+  /* -------------------------------------------------------------------------- */
+  /* Header: Mobile toggle hamburger -> X                                       */
+  /* -------------------------------------------------------------------------- */
 
-.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-top {
-  transform: translateY(6px) rotate(45deg);
-}
+  .nav-mobile-toggle .nav-mobile-bar {
+    transform-origin: center;
+    transition:
+      transform var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
+      opacity var(--motion-duration, 180ms)
+        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+    will-change: transform, opacity;
+  }
 
-.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-middle {
-  opacity: 0;
-}
+  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {
+    transform: translateY(6px) rotate(45deg);
+  }
 
-.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-bottom {
-  transform: translateY(-6px) rotate(-45deg);
-}
+  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {
+    opacity: 0;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .nav-mobile-overlay .nav-mobile-backdrop,
-  .nav-mobile-overlay .nav-mobile-panel {
-    transition: none;
-    transform: none;
+  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {
+    transform: translateY(-6px) rotate(-45deg);
   }
 
-  .nav-mobile-toggle .nav-mobile-bar {
-    transition: none;
+  @media (prefers-reduced-motion: reduce) {
+    .nav-mobile-overlay .nav-mobile-backdrop,
+    .nav-mobile-overlay .nav-mobile-panel {
+      transition: none;
+      transform: none;
+    }
+
+    .nav-mobile-toggle .nav-mobile-bar {
+      transition: none;
+    }
   }
-}
 
-/*
+  /*
  * Theme Scope Styles
  *
  * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them
@@ -4978,790 +5208,838 @@ var containerResponsiveThemeCss = `/*
  * Example: \`h4 { color: white; }\` will override \`:where(:where(.theme-scope)) h4\`
  */
 
-:where(:where(.theme-scope)) {
-  font-family: var(--font-body);
-  letter-spacing: var(--ls-body);
-  line-height: var(--lh-body);
-  font-weight: var(--font-weight-body);
-
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    font-family: var(--font-heading);
-    /* Color is set by generateTypographyCss.ts with full cascade:
+  :where(:where(.theme-scope)) {
+    font-family: var(--font-body);
+    letter-spacing: var(--ls-body);
+    line-height: var(--lh-body);
+    font-weight: var(--font-weight-body);
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & 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 */
-    font-weight: var(--font-weight-heading);
-    text-transform: var(--tt-heading);
-    font-variant-caps: var(--fv-heading);
+      font-weight: var(--font-weight-heading);
+      text-transform: var(--tt-heading);
+      font-variant-caps: var(--fv-heading);
+    }
   }
-}
 
-/* Heading typographic overrides (fallback to defaults when not provided) */
-:where(:where(.theme-scope)) h1 {
-  letter-spacing: var(--ls-h1, var(--ls-heading));
-  line-height: var(--lh-h1, var(--lh-heading));
-  font-weight: var(--fw-h1, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h2 {
-  letter-spacing: var(--ls-h2, var(--ls-heading));
-  line-height: var(--lh-h2, var(--lh-heading));
-  font-weight: var(--fw-h2, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h3 {
-  letter-spacing: var(--ls-h3, var(--ls-heading));
-  line-height: var(--lh-h3, var(--lh-heading));
-  font-weight: var(--fw-h3, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h4,
-:where(:where(.theme-scope)) h5,
-:where(:where(.theme-scope)) h6 {
-  letter-spacing: var(--ls-heading);
-  line-height: var(--lh-heading);
-}
-:where(:where(.theme-scope)) h4 {
-  font-weight: var(--fw-h4, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h5 {
-  font-weight: var(--fw-h5, var(--font-weight-heading));
-}
-:where(:where(.theme-scope)) h6 {
-  font-weight: var(--fw-h6, var(--font-weight-heading));
-}
+  /* Heading typographic overrides (fallback to defaults when not provided) */
+  :where(:where(.theme-scope)) h1 {
+    letter-spacing: var(--ls-h1, var(--ls-heading));
+    line-height: var(--lh-h1, var(--lh-heading));
+    font-weight: var(--fw-h1, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h2 {
+    letter-spacing: var(--ls-h2, var(--ls-heading));
+    line-height: var(--lh-h2, var(--lh-heading));
+    font-weight: var(--fw-h2, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h3 {
+    letter-spacing: var(--ls-h3, var(--ls-heading));
+    line-height: var(--lh-h3, var(--lh-heading));
+    font-weight: var(--fw-h3, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h4,
+  :where(:where(.theme-scope)) h5,
+  :where(:where(.theme-scope)) h6 {
+    letter-spacing: var(--ls-heading);
+    line-height: var(--lh-heading);
+  }
+  :where(:where(.theme-scope)) h4 {
+    font-weight: var(--fw-h4, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h5 {
+    font-weight: var(--fw-h5, var(--font-weight-heading));
+  }
+  :where(:where(.theme-scope)) h6 {
+    font-weight: var(--fw-h6, var(--font-weight-heading));
+  }
 
-/* Rich text element spacing based on theme rhythm */
-:where(.theme-scope) .rb-prose h1 {
-  margin-top: calc(var(--rt-space-y) * 1.6);
-  margin-bottom: calc(var(--rt-space-y) * 0.8);
-}
-:where(.theme-scope) .rb-prose h2 {
-  margin-top: calc(var(--rt-space-y) * 1.4);
-  margin-bottom: calc(var(--rt-space-y) * 0.7);
-}
-:where(.theme-scope) .rb-prose h3 {
-  margin-top: calc(var(--rt-space-y) * 1.2);
-  margin-bottom: calc(var(--rt-space-y) * 0.6);
-}
-:where(.theme-scope) .rb-prose h4 {
-  margin-top: calc(var(--rt-space-y) * 1);
-  margin-bottom: calc(var(--rt-space-y) * 0.5);
-}
-:where(.theme-scope) .rb-prose h5 {
-  margin-top: calc(var(--rt-space-y) * 0.9);
-  margin-bottom: calc(var(--rt-space-y) * 0.45);
-}
-:where(.theme-scope) .rb-prose h6 {
-  margin-top: calc(var(--rt-space-y) * 0.8);
-  margin-bottom: calc(var(--rt-space-y) * 0.4);
-}
-:where(.theme-scope) .rb-prose p {
-  margin: var(--rt-space-y) 0;
-}
-:where(.theme-scope) .rb-prose img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: calc(var(--rt-space-y) * 1) 0;
-}
-:where(.theme-scope) .rb-prose ul,
-:where(.theme-scope) .rb-prose ol {
-  margin: var(--rt-space-y) 0;
-  padding-left: 1.25rem;
-}
-:where(.theme-scope) .rb-prose ul {
-  list-style-type: disc;
-}
-:where(.theme-scope) .rb-prose ol {
-  list-style-type: decimal;
-}
-:where(.theme-scope) .rb-prose ul ul {
-  list-style-type: circle;
-}
-:where(.theme-scope) .rb-prose ul ul ul {
-  list-style-type: square;
-}
-:where(.theme-scope) .rb-prose ol ol {
-  list-style-type: lower-alpha;
-}
-:where(.theme-scope) .rb-prose ol ol ol {
-  list-style-type: lower-roman;
-}
-:where(.theme-scope) .rb-prose blockquote {
-  margin: calc(var(--rt-space-y) * 1) 0;
-  padding-left: 1rem;
-  border-left: 3px solid rgb(var(--tb-border));
-}
-:where(.theme-scope) .rb-prose > :first-child {
-  margin-top: 0;
-}
-:where(.theme-scope) .rb-prose > :last-child {
-  margin-bottom: 0;
-}
+  /* Rich text element spacing based on theme rhythm */
+  :where(.theme-scope) .rb-prose h1 {
+    margin-top: calc(var(--rt-space-y) * 1.6);
+    margin-bottom: calc(var(--rt-space-y) * 0.8);
+  }
+  :where(.theme-scope) .rb-prose h2 {
+    margin-top: calc(var(--rt-space-y) * 1.4);
+    margin-bottom: calc(var(--rt-space-y) * 0.7);
+  }
+  :where(.theme-scope) .rb-prose h3 {
+    margin-top: calc(var(--rt-space-y) * 1.2);
+    margin-bottom: calc(var(--rt-space-y) * 0.6);
+  }
+  :where(.theme-scope) .rb-prose h4 {
+    margin-top: calc(var(--rt-space-y) * 1);
+    margin-bottom: calc(var(--rt-space-y) * 0.5);
+  }
+  :where(.theme-scope) .rb-prose h5 {
+    margin-top: calc(var(--rt-space-y) * 0.9);
+    margin-bottom: calc(var(--rt-space-y) * 0.45);
+  }
+  :where(.theme-scope) .rb-prose h6 {
+    margin-top: calc(var(--rt-space-y) * 0.8);
+    margin-bottom: calc(var(--rt-space-y) * 0.4);
+  }
+  :where(.theme-scope) .rb-prose p {
+    margin: var(--rt-space-y) 0;
+  }
+  :where(.theme-scope) .rb-prose img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: calc(var(--rt-space-y) * 1) 0;
+  }
+  :where(.theme-scope) .rb-prose ul,
+  :where(.theme-scope) .rb-prose ol {
+    margin: var(--rt-space-y) 0;
+    padding-left: 1.25rem;
+  }
+  :where(.theme-scope) .rb-prose ul {
+    list-style-type: disc;
+  }
+  :where(.theme-scope) .rb-prose ol {
+    list-style-type: decimal;
+  }
+  :where(.theme-scope) .rb-prose ul ul {
+    list-style-type: circle;
+  }
+  :where(.theme-scope) .rb-prose ul ul ul {
+    list-style-type: square;
+  }
+  :where(.theme-scope) .rb-prose ol ol {
+    list-style-type: lower-alpha;
+  }
+  :where(.theme-scope) .rb-prose ol ol ol {
+    list-style-type: lower-roman;
+  }
+  :where(.theme-scope) .rb-prose blockquote {
+    margin: calc(var(--rt-space-y) * 1) 0;
+    padding-left: 1rem;
+    border-left: 3px solid rgb(var(--tb-border));
+  }
+  :where(.theme-scope) .rb-prose > :first-child {
+    margin-top: 0;
+  }
+  :where(.theme-scope) .rb-prose > :last-child {
+    margin-bottom: 0;
+  }
 
-/* Prose color overrides - use theme CSS variables instead of hardcoded colors
+  /* Prose color overrides - use theme CSS variables instead of hardcoded colors
  * This makes prose elements automatically adapt to light/dark themes */
-:where(.theme-scope) .rb-prose {
-  /* Body text inherits from parent, which should already have theme color */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose {
+    /* Body text inherits from parent, which should already have theme color */
+    color: inherit;
+  }
 
-/* Prose size variants (theme-aware, CSS-only) */
-:where(.theme-scope) {
-  /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
-  --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
-  --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);
+  /* Prose size variants (theme-aware, CSS-only) */
+  :where(.theme-scope) {
+    /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
+    --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
+    --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);
 
-  --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
-  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);
+    --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
+    --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);
 
-  /* Applied at >= 640px; below that, rb-prose-lg is typically used */
-  --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
-  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
-}
+    /* Applied at >= 640px; below that, rb-prose-lg is typically used */
+    --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
+    --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
+  }
 
-:where(.theme-scope) .rb-prose-sm {
-  font-size: var(--rb-prose-sm-font-size);
-  line-height: var(--rb-prose-sm-line-height);
-}
-:where(.theme-scope) .rb-prose-lg {
-  font-size: var(--rb-prose-lg-font-size);
-  line-height: var(--rb-prose-lg-line-height);
-}
-@container rb-site (min-width: 640px) {
+  :where(.theme-scope) .rb-prose-sm {
+    font-size: var(--rb-prose-sm-font-size);
+    line-height: var(--rb-prose-sm-line-height);
+  }
+  :where(.theme-scope) .rb-prose-lg {
+    font-size: var(--rb-prose-lg-font-size);
+    line-height: var(--rb-prose-lg-line-height);
+  }
+  @container rb-site (min-width: 640px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
 :where(.theme-scope) .rb-prose-xl-sm {
-    font-size: var(--rb-prose-xl-sm-font-size);
-    line-height: var(--rb-prose-xl-sm-line-height);
-  }
+      font-size: var(--rb-prose-xl-sm-font-size);
+      line-height: var(--rb-prose-xl-sm-line-height);
+    }
 }
 }
 
-/* Neutral prose uses theme text color by default */
-:where(.theme-scope) .rb-prose-neutral {
-  color: rgb(var(--tb-text));
-}
+  /* Neutral prose uses theme text color by default */
+  :where(.theme-scope) .rb-prose-neutral {
+    color: rgb(var(--tb-text));
+  }
 
-:where(.theme-scope) .rb-prose p,
-:where(.theme-scope) .rb-prose li {
-  /* Body text uses inherited color (set by fragment via textColorStyle) */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose p,
+  :where(.theme-scope) .rb-prose li {
+    /* Body text uses inherited color (set by fragment via textColorStyle) */
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose h1,
-:where(.theme-scope) .rb-prose h2,
-:where(.theme-scope) .rb-prose h3,
-:where(.theme-scope) .rb-prose h4,
-:where(.theme-scope) .rb-prose h5,
-:where(.theme-scope) .rb-prose h6 {
-  /* Headings inherit from parent or use theme text color */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose h1,
+  :where(.theme-scope) .rb-prose h2,
+  :where(.theme-scope) .rb-prose h3,
+  :where(.theme-scope) .rb-prose h4,
+  :where(.theme-scope) .rb-prose h5,
+  :where(.theme-scope) .rb-prose h6 {
+    /* Headings inherit from parent or use theme text color */
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose strong,
-:where(.theme-scope) .rb-prose b {
-  /* Bold text inherits color but increases weight */
-  color: inherit;
-  font-weight: 600;
-}
+  :where(.theme-scope) .rb-prose strong,
+  :where(.theme-scope) .rb-prose b {
+    /* Bold text inherits color but increases weight */
+    color: inherit;
+    font-weight: 600;
+  }
 
-:where(.theme-scope) .rb-prose em,
-:where(.theme-scope) .rb-prose i {
-  /* Italic text inherits color */
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose em,
+  :where(.theme-scope) .rb-prose i {
+    /* Italic text inherits color */
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose a {
-  /* Global prose link style with theme-level overrides */
-  color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
-  text-decoration-line: var(--rb-prose-link-decoration-line, underline);
-  text-decoration-style: var(--rb-prose-link-underline-style, solid);
-  text-decoration-thickness: var(--rb-prose-link-underline-thickness, from-font);
-  text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
-  text-decoration-color: var(--rb-prose-link-decoration-color, rgba(var(--tb-primary), 0.3));
-  transition:
-    color 150ms ease,
-    text-decoration-color 150ms ease;
-}
+  :where(.theme-scope) .rb-prose a {
+    /* Global prose link style with theme-level overrides */
+    color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
+    text-decoration-line: var(--rb-prose-link-decoration-line, underline);
+    text-decoration-style: var(--rb-prose-link-underline-style, solid);
+    text-decoration-thickness: var(
+      --rb-prose-link-underline-thickness,
+      from-font
+    );
+    text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
+    text-decoration-color: var(
+      --rb-prose-link-decoration-color,
+      rgba(var(--tb-primary), 0.3)
+    );
+    transition:
+      color 150ms ease,
+      text-decoration-color 150ms ease;
+  }
 
-:where(.theme-scope) .rb-prose a:hover {
-  color: var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))));
-  text-decoration-color: var(
-    --rb-prose-link-hover-decoration-color,
-    var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))))
-  );
-}
+  :where(.theme-scope) .rb-prose a:hover {
+    color: var(
+      --rb-prose-link-hover-color,
+      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+    );
+    text-decoration-color: var(
+      --rb-prose-link-hover-decoration-color,
+      var(
+        --rb-prose-link-hover-color,
+        var(--rb-prose-link-color, rgb(var(--tb-primary)))
+      )
+    );
+  }
 
-:where(.theme-scope) .rb-prose blockquote {
-  /* Blockquotes use muted text color */
-  color: rgb(var(--tb-mutedText));
-  border-left-color: rgb(var(--tb-border));
-}
+  :where(.theme-scope) .rb-prose blockquote {
+    /* Blockquotes use muted text color */
+    color: rgb(var(--tb-mutedText));
+    border-left-color: rgb(var(--tb-border));
+  }
 
-:where(.theme-scope) .fragment-quote-body blockquote {
-  /* Quote fragment should not get the generic prose blockquote left border/indent. */
-  border-left: 0;
-  padding-left: 0;
-}
+  :where(.theme-scope) .fragment-quote-body blockquote {
+    /* Quote fragment should not get the generic prose blockquote left border/indent. */
+    border-left: 0;
+    padding-left: 0;
+  }
 
-:where(.theme-scope) .rb-columns-equal-height {
-  /* Needed so we can use container query units (\`cqw\`) for width-based tile sizing. */
-  container-type: inline-size;
+  :where(.theme-scope) .rb-columns-equal-height {
+    /* Needed so we can use container query units (\`cqw\`) for width-based tile sizing. */
+    container-type: inline-size;
 
-  --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
-  --rb-columns-gap: var(--rb-semantic-gap, 0px);
-  --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);
+    --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
+    --rb-columns-gap: var(--rb-semantic-gap, 0px);
+    --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);
 
-  --rb-columns-tile-w: calc(
-    (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) / var(--rb-columns-cols)
-  );
-  --rb-columns-tile-h: calc(var(--rb-columns-tile-w) * var(--rb-columns-tile-ar));
-}
+    --rb-columns-tile-w: calc(
+      (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /
+        var(--rb-columns-cols)
+    );
+    --rb-columns-tile-h: calc(
+      var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)
+    );
+  }
 
-@container rb-site (min-width: 768px) {
+  @container rb-site (min-width: 768px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
 :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
-  }
+      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
+    }
 }
 }
 
-@container rb-site (min-width: 1024px) {
+  @container rb-site (min-width: 1024px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
 :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
-  }
+      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
+    }
 }
 }
 
-@container rb-site (min-width: 1280px) {
+  @container rb-site (min-width: 1280px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
 :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
-  }
+      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
+    }
 }
 }
 
-:where(.theme-scope) .rb-columns-equal-height > * {
-  height: var(--rb-columns-tile-h);
-}
+  :where(.theme-scope) .rb-columns-equal-height > * {
+    height: var(--rb-columns-tile-h);
+  }
 
-:where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
-  /*
+  :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
+    /*
     Grid items commonly include \`rb-h-full\` (height: 100%) to stretch within
     their row. In equal-height mode we instead want a fixed tile height so the
     spanning editorial tile doesn't become taller due to its larger width +
     aspect-ratio.
   */
-  height: var(--rb-columns-tile-h);
-  min-height: var(--rb-columns-tile-h);
-  max-height: var(--rb-columns-tile-h);
-}
+    height: var(--rb-columns-tile-h);
+    min-height: var(--rb-columns-tile-h);
+    max-height: var(--rb-columns-tile-h);
+  }
 
-:where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
+  :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
 
-:where(.theme-scope) .rb-columns-equal-height .fragment-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+  :where(.theme-scope) .rb-columns-equal-height .fragment-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-:where(.theme-scope) .rb-prose code {
-  /* Inline code uses text color with surface background */
-  color: inherit;
-  background-color: rgba(var(--tb-surface), 0.5);
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  font-size: 0.875em;
-}
+  :where(.theme-scope) .rb-prose code {
+    /* Inline code uses text color with surface background */
+    color: inherit;
+    background-color: rgba(var(--tb-surface), 0.5);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+  }
 
-:where(.theme-scope) .rb-prose pre {
-  /* Code blocks */
-  background-color: rgb(var(--tb-surface));
-  color: rgb(var(--tb-text));
-  border: 1px solid rgb(var(--tb-border));
-  border-radius: 0.5rem;
-  padding: 1rem;
-  overflow-x: auto;
-}
+  :where(.theme-scope) .rb-prose pre {
+    /* Code blocks */
+    background-color: rgb(var(--tb-surface));
+    color: rgb(var(--tb-text));
+    border: 1px solid rgb(var(--tb-border));
+    border-radius: 0.5rem;
+    padding: 1rem;
+    overflow-x: auto;
+  }
 
-:where(.theme-scope) .rb-prose pre code {
-  /* Code inside pre blocks */
-  background-color: transparent;
-  padding: 0;
-  color: inherit;
-}
+  :where(.theme-scope) .rb-prose pre code {
+    /* Code inside pre blocks */
+    background-color: transparent;
+    padding: 0;
+    color: inherit;
+  }
 
-:where(.theme-scope) .rb-prose hr {
-  /* Horizontal rules */
-  border-color: rgb(var(--tb-border));
-}
+  :where(.theme-scope) .rb-prose hr {
+    /* Horizontal rules */
+    border-color: rgb(var(--tb-border));
+  }
 
-:where(.theme-scope) .rb-prose ul > li::marker,
-:where(.theme-scope) .rb-prose ol > li::marker {
-  /* List markers use muted text color */
-  color: rgb(var(--tb-mutedText));
-}
+  :where(.theme-scope) .rb-prose ul > li::marker,
+  :where(.theme-scope) .rb-prose ol > li::marker {
+    /* List markers use muted text color */
+    color: rgb(var(--tb-mutedText));
+  }
 
-/*
+  /*
 /* Density helpers */
-:where(.theme-scope) .section-pad {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-:where(.theme-scope)[data-density="airy"] .section-pad {
-  padding-top: 4.5rem;
-  padding-bottom: 4.5rem;
-}
-:where(.theme-scope)[data-density="compact"] .section-pad {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-:where(.theme-scope) .rounded-control {
-  border-radius: var(--radius-control);
-}
-:where(.theme-scope) .rounded-card {
-  border-radius: var(--radius-card);
-}
+  :where(.theme-scope) .section-pad {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+  :where(.theme-scope)[data-density='airy'] .section-pad {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+  :where(.theme-scope)[data-density='compact'] .section-pad {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
 
-:where(.theme-scope) .shadow-elev {
-  box-shadow: var(--shadow-elev);
-}
+  :where(.theme-scope) .rounded-control {
+    border-radius: var(--radius-control);
+  }
+  :where(.theme-scope) .rounded-card {
+    border-radius: var(--radius-card);
+  }
 
-:where(.theme-scope) .font-heading {
-  font-family: var(--font-heading);
-}
-:where(.theme-scope) .font-body {
-  font-family: var(--font-body);
-}
+  :where(.theme-scope) .shadow-elev {
+    box-shadow: var(--shadow-elev);
+  }
 
-:where(.theme-scope) .text-h1 {
-  font-size: var(--fs-h1);
-  line-height: 1.1;
-}
-:where(.theme-scope) .text-h2 {
-  font-size: var(--fs-h2);
-  line-height: 1.15;
-}
-:where(.theme-scope) .text-h3 {
-  font-size: var(--fs-h3);
-  line-height: 1.2;
-}
-:where(.theme-scope) .text-body-size {
-  font-size: var(--fs-body);
-}
+  :where(.theme-scope) .font-heading {
+    font-family: var(--font-heading);
+  }
+  :where(.theme-scope) .font-body {
+    font-family: var(--font-body);
+  }
 
-:where(.theme-scope) .transition-theme {
-  transition: all var(--motion-duration) var(--motion-ease);
-}
-:where(.theme-scope) .transition-theme-standard {
-  transition: all var(--motion-duration) var(--motion-ease);
-}
-:where(.theme-scope) .transition-theme-subtle {
-  transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
-}
-:where(.theme-scope) .transition-theme-expressive {
-  transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
-}
+  :where(.theme-scope) .text-h1 {
+    font-size: var(--fs-h1);
+    line-height: 1.1;
+  }
+  :where(.theme-scope) .text-h2 {
+    font-size: var(--fs-h2);
+    line-height: 1.15;
+  }
+  :where(.theme-scope) .text-h3 {
+    font-size: var(--fs-h3);
+    line-height: 1.2;
+  }
+  :where(.theme-scope) .text-body-size {
+    font-size: var(--fs-body);
+  }
 
-/* Shade tokens (50..950) for primary */
-:where(.theme-scope) .from-primary-50 {
-  --rb-gradient-from: rgb(var(--tb-primary-50)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-50 {
-  --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-100 {
-  --rb-gradient-from: rgb(var(--tb-primary-100))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-100 {
-  --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-200 {
-  --rb-gradient-from: rgb(var(--tb-primary-200))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-200 {
-  --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-300 {
-  --rb-gradient-from: rgb(var(--tb-primary-300))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-300 {
-  --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-400 {
-  --rb-gradient-from: rgb(var(--tb-primary-400))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-400 {
-  --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-500 {
-  --rb-gradient-from: rgb(var(--tb-primary-500))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-500 {
-  --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-600 {
-  --rb-gradient-from: rgb(var(--tb-primary-600))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-600 {
-  --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-700 {
-  --rb-gradient-from: rgb(var(--tb-primary-700))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-700 {
-  --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-800 {
-  --rb-gradient-from: rgb(var(--tb-primary-800))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-800 {
-  --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-900 {
-  --rb-gradient-from: rgb(var(--tb-primary-900))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-900 {
-  --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-primary-950 {
-  --rb-gradient-from: rgb(var(--tb-primary-950))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-primary-950 {
-  --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
-}
-
-/* Shade tokens (50..950) for secondary */
-:where(.theme-scope) .from-secondary-50 {
-  --rb-gradient-from: rgb(var(--tb-secondary-50))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-50 {
-  --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-100 {
-  --rb-gradient-from: rgb(var(--tb-secondary-100))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-100 {
-  --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-200 {
-  --rb-gradient-from: rgb(var(--tb-secondary-200))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-200 {
-  --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-300 {
-  --rb-gradient-from: rgb(var(--tb-secondary-300))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-300 {
-  --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-400 {
-  --rb-gradient-from: rgb(var(--tb-secondary-400))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-400 {
-  --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-500 {
-  --rb-gradient-from: rgb(var(--tb-secondary-500))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-500 {
-  --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-600 {
-  --rb-gradient-from: rgb(var(--tb-secondary-600))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-600 {
-  --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-700 {
-  --rb-gradient-from: rgb(var(--tb-secondary-700))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-700 {
-  --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-800 {
-  --rb-gradient-from: rgb(var(--tb-secondary-800))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-800 {
-  --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-900 {
-  --rb-gradient-from: rgb(var(--tb-secondary-900))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-900 {
-  --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-secondary-950 {
-  --rb-gradient-from: rgb(var(--tb-secondary-950))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-secondary-950 {
-  --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
-}
-
-/* Shade tokens (50..950) for accent */
-:where(.theme-scope) .from-accent-50 {
-  --rb-gradient-from: rgb(var(--tb-accent-50)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-50 {
-  --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-100 {
-  --rb-gradient-from: rgb(var(--tb-accent-100)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-100 {
-  --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-200 {
-  --rb-gradient-from: rgb(var(--tb-accent-200)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-200 {
-  --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-300 {
-  --rb-gradient-from: rgb(var(--tb-accent-300)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-300 {
-  --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-400 {
-  --rb-gradient-from: rgb(var(--tb-accent-400)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-400 {
-  --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-500 {
-  --rb-gradient-from: rgb(var(--tb-accent-500)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-500 {
-  --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-600 {
-  --rb-gradient-from: rgb(var(--tb-accent-600)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-600 {
-  --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-700 {
-  --rb-gradient-from: rgb(var(--tb-accent-700)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-700 {
-  --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-800 {
-  --rb-gradient-from: rgb(var(--tb-accent-800)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-800 {
-  --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-900 {
-  --rb-gradient-from: rgb(var(--tb-accent-900)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-900 {
-  --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-accent-950 {
-  --rb-gradient-from: rgb(var(--tb-accent-950)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-accent-950 {
-  --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
-}
+  :where(.theme-scope) .transition-theme {
+    transition: all var(--motion-duration) var(--motion-ease);
+  }
+  :where(.theme-scope) .transition-theme-standard {
+    transition: all var(--motion-duration) var(--motion-ease);
+  }
+  :where(.theme-scope) .transition-theme-subtle {
+    transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
+  }
+  :where(.theme-scope) .transition-theme-expressive {
+    transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
+  }
 
-/* Shade tokens (50..950) for neutral */
-:where(.theme-scope) .from-neutral-50 {
-  --rb-gradient-from: rgb(var(--tb-neutral-50)) var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-50 {
-  --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-100 {
-  --rb-gradient-from: rgb(var(--tb-neutral-100))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-100 {
-  --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-200 {
-  --rb-gradient-from: rgb(var(--tb-neutral-200))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-200 {
-  --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-300 {
-  --rb-gradient-from: rgb(var(--tb-neutral-300))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-300 {
-  --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-400 {
-  --rb-gradient-from: rgb(var(--tb-neutral-400))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-400 {
-  --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-500 {
-  --rb-gradient-from: rgb(var(--tb-neutral-500))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-500 {
-  --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-600 {
-  --rb-gradient-from: rgb(var(--tb-neutral-600))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-600 {
-  --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-700 {
-  --rb-gradient-from: rgb(var(--tb-neutral-700))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-700 {
-  --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-800 {
-  --rb-gradient-from: rgb(var(--tb-neutral-800))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-800 {
-  --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-900 {
-  --rb-gradient-from: rgb(var(--tb-neutral-900))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-900 {
-  --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
-}
-:where(.theme-scope) .from-neutral-950 {
-  --rb-gradient-from: rgb(var(--tb-neutral-950))
-    var(--rb-gradient-from-position);
-  --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
-  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
-}
-:where(.theme-scope) .to-neutral-950 {
-  --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
-}
-
-/* =================================================================
+  /* Shade tokens (50..950) for primary */
+  :where(.theme-scope) .from-primary-50 {
+    --rb-gradient-from: rgb(var(--tb-primary-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-50 {
+    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-100 {
+    --rb-gradient-from: rgb(var(--tb-primary-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-100 {
+    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-200 {
+    --rb-gradient-from: rgb(var(--tb-primary-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-200 {
+    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-300 {
+    --rb-gradient-from: rgb(var(--tb-primary-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-300 {
+    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-400 {
+    --rb-gradient-from: rgb(var(--tb-primary-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-400 {
+    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-500 {
+    --rb-gradient-from: rgb(var(--tb-primary-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-500 {
+    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-600 {
+    --rb-gradient-from: rgb(var(--tb-primary-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-600 {
+    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-700 {
+    --rb-gradient-from: rgb(var(--tb-primary-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-700 {
+    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-800 {
+    --rb-gradient-from: rgb(var(--tb-primary-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-800 {
+    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-900 {
+    --rb-gradient-from: rgb(var(--tb-primary-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-900 {
+    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-primary-950 {
+    --rb-gradient-from: rgb(var(--tb-primary-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-primary-950 {
+    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
+  }
+
+  /* Shade tokens (50..950) for secondary */
+  :where(.theme-scope) .from-secondary-50 {
+    --rb-gradient-from: rgb(var(--tb-secondary-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-50 {
+    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-100 {
+    --rb-gradient-from: rgb(var(--tb-secondary-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-100))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-100 {
+    --rb-gradient-to: rgb(var(--tb-secondary-100))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-200 {
+    --rb-gradient-from: rgb(var(--tb-secondary-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-200))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-200 {
+    --rb-gradient-to: rgb(var(--tb-secondary-200))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-300 {
+    --rb-gradient-from: rgb(var(--tb-secondary-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-300))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-300 {
+    --rb-gradient-to: rgb(var(--tb-secondary-300))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-400 {
+    --rb-gradient-from: rgb(var(--tb-secondary-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-400))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-400 {
+    --rb-gradient-to: rgb(var(--tb-secondary-400))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-500 {
+    --rb-gradient-from: rgb(var(--tb-secondary-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-500))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-500 {
+    --rb-gradient-to: rgb(var(--tb-secondary-500))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-600 {
+    --rb-gradient-from: rgb(var(--tb-secondary-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-600))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-600 {
+    --rb-gradient-to: rgb(var(--tb-secondary-600))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-700 {
+    --rb-gradient-from: rgb(var(--tb-secondary-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-700))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-700 {
+    --rb-gradient-to: rgb(var(--tb-secondary-700))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-800 {
+    --rb-gradient-from: rgb(var(--tb-secondary-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-800))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-800 {
+    --rb-gradient-to: rgb(var(--tb-secondary-800))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-900 {
+    --rb-gradient-from: rgb(var(--tb-secondary-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-900))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-900 {
+    --rb-gradient-to: rgb(var(--tb-secondary-900))
+      var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-secondary-950 {
+    --rb-gradient-from: rgb(var(--tb-secondary-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-secondary-950))
+      var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-secondary-950 {
+    --rb-gradient-to: rgb(var(--tb-secondary-950))
+      var(--rb-gradient-to-position);
+  }
+
+  /* Shade tokens (50..950) for accent */
+  :where(.theme-scope) .from-accent-50 {
+    --rb-gradient-from: rgb(var(--tb-accent-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-50 {
+    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-100 {
+    --rb-gradient-from: rgb(var(--tb-accent-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-100 {
+    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-200 {
+    --rb-gradient-from: rgb(var(--tb-accent-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-200 {
+    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-300 {
+    --rb-gradient-from: rgb(var(--tb-accent-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-300 {
+    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-400 {
+    --rb-gradient-from: rgb(var(--tb-accent-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-400 {
+    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-500 {
+    --rb-gradient-from: rgb(var(--tb-accent-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-500 {
+    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-600 {
+    --rb-gradient-from: rgb(var(--tb-accent-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-600 {
+    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-700 {
+    --rb-gradient-from: rgb(var(--tb-accent-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-700 {
+    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-800 {
+    --rb-gradient-from: rgb(var(--tb-accent-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-800 {
+    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-900 {
+    --rb-gradient-from: rgb(var(--tb-accent-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-900 {
+    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-accent-950 {
+    --rb-gradient-from: rgb(var(--tb-accent-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-accent-950 {
+    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
+  }
+
+  /* Shade tokens (50..950) for neutral */
+  :where(.theme-scope) .from-neutral-50 {
+    --rb-gradient-from: rgb(var(--tb-neutral-50))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-50 {
+    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-100 {
+    --rb-gradient-from: rgb(var(--tb-neutral-100))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-100 {
+    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-200 {
+    --rb-gradient-from: rgb(var(--tb-neutral-200))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-200 {
+    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-300 {
+    --rb-gradient-from: rgb(var(--tb-neutral-300))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-300 {
+    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-400 {
+    --rb-gradient-from: rgb(var(--tb-neutral-400))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-400 {
+    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-500 {
+    --rb-gradient-from: rgb(var(--tb-neutral-500))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-500 {
+    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-600 {
+    --rb-gradient-from: rgb(var(--tb-neutral-600))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-600 {
+    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-700 {
+    --rb-gradient-from: rgb(var(--tb-neutral-700))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-700 {
+    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-800 {
+    --rb-gradient-from: rgb(var(--tb-neutral-800))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-800 {
+    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-900 {
+    --rb-gradient-from: rgb(var(--tb-neutral-900))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-900 {
+    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
+  }
+  :where(.theme-scope) .from-neutral-950 {
+    --rb-gradient-from: rgb(var(--tb-neutral-950))
+      var(--rb-gradient-from-position);
+    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
+    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
+  }
+  :where(.theme-scope) .to-neutral-950 {
+    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
+  }
+
+  /* =================================================================
    Header System Class Naming Conventions
 
    rb-header-*    Utility-style classes set in site-header.ts layouts
@@ -5774,240 +6052,240 @@ var containerResponsiveThemeCss = `/*
                   (nav-dropdown, nav-mobile-panel, nav-underline-grow)
    ================================================================= */
 
-/* =================================================================
+  /* =================================================================
    Header Layout Padding
 
    Padding is controlled entirely by CSS based on variant class.
    This ensures shrink headers look identical to non-shrink before scroll.
    ================================================================= */
 
-/* Prevent scroll anchoring feedback loops when the header height transitions.
+  /* Prevent scroll anchoring feedback loops when the header height transitions.
    In some browsers, resizing a sticky header near the top can cause the UA to
    adjust scroll position ("scroll anchoring"), which then flips the
    \`header-scrolled\` threshold logic back and forth. */
-:where(.theme-scope) .block-site-header {
-  overflow-anchor: none;
-}
+  :where(.theme-scope) .block-site-header {
+    overflow-anchor: none;
+  }
 
-/* Base padding for horizontal variants (classic, transparent) */
-:where(.theme-scope) .rb-header-layout {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  transition: padding 300ms var(--motion-ease, ease);
-}
+  /* Base padding for horizontal variants (classic, transparent) */
+  :where(.theme-scope) .rb-header-layout {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    transition: padding 300ms var(--motion-ease, ease);
+  }
 
-/* Vertical variants need more breathing room
+  /* Vertical variants need more breathing room
    Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */
-:where(.theme-scope) .header-variant-centered .rb-header-layout,
-:where(.theme-scope) .header-variant-editorial .rb-header-layout {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
+  :where(.theme-scope) .header-variant-centered .rb-header-layout {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
 
-/* Floating variant - compact padding */
-:where(.theme-scope) .header-variant-floating .rb-header-layout {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
+  /* Floating variant - compact padding */
+  :where(.theme-scope) .header-variant-floating .rb-header-layout {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
 
-/* =================================================================
+  /* =================================================================
    Header Shrink-on-Scroll
 
    Only applies when .rb-header-shrink is present AND user has scrolled.
    No changes until scroll - shrink header = non-shrink header initially.
    ================================================================= */
 
-/* Scrolled state - reduce padding */
-:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
+  /* Scrolled state - reduce padding */
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
 
-/* Vertical variants get gentler reduction
+  /* Vertical variants get gentler reduction
    Note: Both classes are on Section, rb-header-layout on inner div */
-:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-centered .rb-header-layout,
-:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-editorial .rb-header-layout {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-centered
+    .rb-header-layout {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
 
-/* Floating variant */
-:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-floating .rb-header-layout {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
+  /* Floating variant */
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-floating
+    .rb-header-layout {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
 
-/* =================================================================
+  /* =================================================================
    Logo & Title Sizing
 
    Font sizes controlled here, not via utility classes, so shrink
    transitions work (utility classes would override :where()).
    ================================================================= */
 
-/* Logo image sizing */
-:where(.theme-scope) .rb-header-logo-sm {
-  height: 2.5rem;
-  transition: height 300ms var(--motion-ease, ease);
-}
-:where(.theme-scope) .rb-header-logo-lg {
-  height: 3rem;
-  transition: height 300ms var(--motion-ease, ease);
-}
+  /* Logo image sizing */
+  :where(.theme-scope) .rb-header-logo-sm {
+    height: 2.5rem;
+    transition: height 300ms var(--motion-ease, ease);
+  }
+  :where(.theme-scope) .rb-header-logo-lg {
+    height: 3rem;
+    transition: height 300ms var(--motion-ease, ease);
+  }
 
-/* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
-:where(.theme-scope) .header-logo-text {
-  font-size: 1.125rem; /* matches rb-text-lg */
-  line-height: 1.75rem;
-  transition: font-size 300ms var(--motion-ease, ease);
-}
+  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
+  :where(.theme-scope) .header-logo-text {
+    font-size: 1.125rem; /* matches rb-text-lg */
+    line-height: 1.75rem;
+    transition: font-size 300ms var(--motion-ease, ease);
+  }
 
-/* Mobile: reduce site title size (~30%) to keep header compact */
-@container rb-site (max-width: 767px) {
+  /* Mobile: reduce site title size (~30%) to keep header compact */
+  @container rb-site (max-width: 767px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
 :where(.theme-scope) .header-logo-text {
-    font-size: 0.8rem;
-    line-height: 1.25rem;
-  }
+      font-size: 0.8rem;
+      line-height: 1.25rem;
+    }
 
-  :where(.theme-scope) .header-variant-centered .header-logo-text,
-  :where(.theme-scope) .header-variant-editorial .header-logo-text {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
+    :where(.theme-scope) .header-variant-centered .header-logo-text {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
 }
 }
 
-/* Centered/editorial variants use larger title */
-:where(.theme-scope) .header-variant-centered .header-logo-text,
-:where(.theme-scope) .header-variant-editorial .header-logo-text {
-  font-size: 1.25rem; /* matches rb-text-xl */
-  line-height: 1.75rem;
-}
+  /* Centered variant uses larger title */
+  :where(.theme-scope) .header-variant-centered .header-logo-text {
+    font-size: 1.25rem; /* matches rb-text-xl */
+    line-height: 1.75rem;
+  }
 
-/* =================================================================
+  /* =================================================================
    Shrink on Scroll - Logo & Title
    ================================================================= */
 
-:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
-  height: 2rem;
-}
-:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
-  height: 2.5rem;
-}
-:where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
-  font-size: 0.875rem;
-}
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
+    height: 2rem;
+  }
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
+    height: 2.5rem;
+  }
+  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
+    font-size: 0.875rem;
+  }
 
-@container rb-site (max-width: 767px) {
+  @container rb-site (max-width: 767px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
 :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
-    font-size: 0.75rem;
-  }
+      font-size: 0.75rem;
+    }
 }
 }
 
-/* =================================================================
+  /* =================================================================
    Accessibility: Reduced Motion
    ================================================================= */
 
-@media (prefers-reduced-motion: reduce) {
-  :where(.theme-scope) .rb-header-layout,
-  :where(.theme-scope) .rb-header-logo-sm,
-  :where(.theme-scope) .rb-header-logo-lg,
-  :where(.theme-scope) .header-logo-text {
-    transition: none;
+  @media (prefers-reduced-motion: reduce) {
+    :where(.theme-scope) .rb-header-layout,
+    :where(.theme-scope) .rb-header-logo-sm,
+    :where(.theme-scope) .rb-header-logo-lg,
+    :where(.theme-scope) .header-logo-text {
+      transition: none;
+    }
   }
-}
 
-/* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
-:where(.theme-scope) .nav-underline-grow {
-  position: relative;
-  overflow: visible;
-}
-:where(.theme-scope) .nav-underline-grow::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: var(--nav-underline-offset, -0.35em);
-  width: 100%;
-  height: 2px;
-  background-color: currentColor;
-  transform: scaleX(0);
-  transform-origin: left center;
-  transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
-}
-:where(.theme-scope) .nav-underline-grow:hover::after,
-:where(.theme-scope)
-  .nav-underline-grow.nav-underline-active[data-active="true"]::after {
-  transform: scaleX(1);
-}
-:where(.theme-scope) .nav-underline-offset-tight {
-  --nav-underline-offset: -0.2em;
-}
-:where(.theme-scope) .nav-underline-offset-normal {
-  --nav-underline-offset: -0.3em;
-}
-:where(.theme-scope) .nav-underline-offset-loose {
-  --nav-underline-offset: -0.45em;
-}
+  /* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
+  :where(.theme-scope) .nav-underline-grow {
+    position: relative;
+    overflow: visible;
+  }
+  :where(.theme-scope) .nav-underline-grow::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: var(--nav-underline-offset, -0.35em);
+    width: 100%;
+    height: 2px;
+    background-color: currentColor;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
+  }
+  :where(.theme-scope) .nav-underline-grow:hover::after,
+  :where(.theme-scope)
+    .nav-underline-grow.nav-underline-active[data-active='true']::after {
+    transform: scaleX(1);
+  }
+  :where(.theme-scope) .nav-underline-offset-tight {
+    --nav-underline-offset: -0.2em;
+  }
+  :where(.theme-scope) .nav-underline-offset-normal {
+    --nav-underline-offset: -0.3em;
+  }
+  :where(.theme-scope) .nav-underline-offset-loose {
+    --nav-underline-offset: -0.45em;
+  }
 
-:where(.theme-scope) .card-surface {
-  background: rgb(var(--tb-surface));
-  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);
-}
-:where(.theme-scope) .media-rounded {
-  border-radius: var(--radius-card);
-}
+  :where(.theme-scope) .card-surface {
+    background: rgb(var(--tb-surface));
+    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);
+  }
+  :where(.theme-scope) .media-rounded {
+    border-radius: var(--radius-card);
+  }
 
-:where(.theme-scope) .is-placeholder::after {
-  content: "Placeholder";
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  font-size: 11px;
-  background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
-  color: rgb(var(--tb-text));
-  padding: 0.15rem 0.35rem;
-  border-radius: 4px;
-  opacity: 0.85;
-}
+  :where(.theme-scope) .is-placeholder::after {
+    content: 'Placeholder';
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    font-size: 11px;
+    background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
+    color: rgb(var(--tb-text));
+    padding: 0.15rem 0.35rem;
+    border-radius: 4px;
+    opacity: 0.85;
+  }
 
-/* Status badges - theme-aware styling for capacity indicators */
-:where(.theme-scope) .badge-status {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-}
+  /* Status badges - theme-aware styling for capacity indicators */
+  :where(.theme-scope) .badge-status {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
 
-/* All badges use a subtle theme-aware style by default */
-:where(.theme-scope) .badge-status-available {
-  background-color: rgba(var(--tb-secondary), 0.15);
-  color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
-}
+  /* All badges use a subtle theme-aware style by default */
+  :where(.theme-scope) .badge-status-available {
+    background-color: rgba(var(--tb-secondary), 0.15);
+    color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
+  }
 
-:where(.theme-scope) .badge-status-low {
-  background-color: rgba(var(--tb-accent), 0.15);
-  color: rgb(var(--tb-accent-700, var(--tb-accent)));
-}
+  :where(.theme-scope) .badge-status-low {
+    background-color: rgba(var(--tb-accent), 0.15);
+    color: rgb(var(--tb-accent-700, var(--tb-accent)));
+  }
 
-:where(.theme-scope) .badge-status-sold-out {
-  background-color: rgba(var(--tb-text), 0.1);
-  color: rgb(var(--tb-mutedText));
-}
+  :where(.theme-scope) .badge-status-sold-out {
+    background-color: rgba(var(--tb-text), 0.1);
+    color: rgb(var(--tb-mutedText));
+  }
 
-/* Event list empty state - theme-aware */
-:where(.theme-scope) .event-list-empty {
-  background-color: rgb(var(--tb-surface));
-  color: rgb(var(--tb-onSurface, var(--tb-text)));
-  border-color: rgb(var(--tb-border));
-}
+  /* Event list empty state - theme-aware */
+  :where(.theme-scope) .event-list-empty {
+    background-color: rgb(var(--tb-surface));
+    color: rgb(var(--tb-onSurface, var(--tb-text)));
+    border-color: rgb(var(--tb-border));
+  }
 } /* end @layer rb-theme */
 
 @keyframes accordion-down {