@riverbankcms/sdk 0.77.0 → 0.77.1

package/dist/styles/index.css

@@ -1651,9 +1651,9 @@
 
 
 @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;
@@ -1675,159 +1675,164 @@
 
   --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
@@ -1837,782 +1842,830 @@
  * 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);
-}
-@media (min-width: 640px) {
-  :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);
+  :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);
+  }
+  @media (min-width: 640px) {
+    :where(.theme-scope) .rb-prose-xl-sm {
+      font-size: var(--rb-prose-xl-sm-font-size);
+      line-height: var(--rb-prose-xl-sm-line-height);
+    }
   }
-}
 
-/* Neutral prose uses theme text color by default */
-:where(.theme-scope) .rb-prose-neutral {
-  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)
+    );
+  }
 
-@media (min-width: 768px) {
-  :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
+  @media (min-width: 768px) {
+    :where(.theme-scope) .rb-columns-equal-height {
+      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
+    }
   }
-}
 
-@media (min-width: 1024px) {
-  :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
+  @media (min-width: 1024px) {
+    :where(.theme-scope) .rb-columns-equal-height {
+      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
+    }
   }
-}
 
-@media (min-width: 1280px) {
-  :where(.theme-scope) .rb-columns-equal-height {
-    --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
+  @media (min-width: 1280px) {
+    :where(.theme-scope) .rb-columns-equal-height {
+      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
+    }
   }
-}
 
-:where(.theme-scope) .rb-columns-equal-height > * {
-  height: var(--rb-columns-tile-h);
-}
+  :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
@@ -2625,236 +2678,236 @@
                   (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);
-}
-
-/* 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);
-}
+  /* 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);
+  }
 
-/* Mobile: reduce site title size (~30%) to keep header compact */
-@media (max-width: 767px) {
+  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
   :where(.theme-scope) .header-logo-text {
-    font-size: 0.8rem;
-    line-height: 1.25rem;
+    font-size: 1.125rem; /* matches rb-text-lg */
+    line-height: 1.75rem;
+    transition: font-size 300ms var(--motion-ease, ease);
   }
 
-  :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;
+  /* Mobile: reduce site title size (~30%) to keep header compact */
+  @media (max-width: 767px) {
+    :where(.theme-scope) .header-logo-text {
+      font-size: 0.8rem;
+      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;
-}
-
-@media (max-width: 767px) {
+  :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.75rem;
+    font-size: 0.875rem;
   }
-}
 
-/* =================================================================
+  @media (max-width: 767px) {
+    :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
+      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 */