@roottale/cms-renderer-next 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @roottale/cms-renderer-next
 
+## 0.24.0
+
+### Patch Changes
+
+- Updated dependencies [299c9b2]
+  - @roottale/cms-client@0.24.0
+
 ## 0.22.0
 
 ### Minor Changes

package/dist/cms-public.css

@@ -36,9 +36,9 @@
   align-items: center;
   padding: 0.4375rem 0.875rem;
   border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 82%, transparent);
-  background: color-mix(in srgb, var(--rt-color-muted, #f8fafc) 60%, white);
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 76%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 82%, transparent);
+  background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 60%, white);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 76%, transparent);
   font-family: var(--rt-font-body, system-ui, sans-serif);
   font-size: 0.8125rem;
   font-weight: 700;
@@ -52,13 +52,13 @@
 
 [data-roottale-cms] :where(.rt-cms-filter-chip:hover),
 [data-roottale-cms] :where(.rt-cms-filter-chip:focus-visible) {
-  border-color: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 40%, var(--rt-color-border, #e5e7eb));
-  color: var(--rt-color-foreground, #111827);
+  border-color: color-mix(in srgb, var(--rt-color-primary, #06162f) 40%, var(--rt-color-border, #dceef3));
+  color: var(--rt-color-foreground, #06162f);
 }
 
 [data-roottale-cms] :where(.rt-cms-filter-chip[data-active]) {
   border-color: transparent;
-  background: var(--rt-color-primary, #4f46e5);
+  background: var(--rt-color-primary, #06162f);
   color: var(--rt-color-primary-foreground, #ffffff);
 }
 
@@ -80,10 +80,10 @@
   justify-content: space-between;
   gap: var(--rt-spacing-3, 0.75rem);
   padding: 0.875rem 1rem;
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 82%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 82%, transparent);
   border-radius: var(--rt-radius-md, 0.5rem);
-  background: color-mix(in srgb, var(--rt-color-muted, #f8fafc) 58%, white);
-  color: var(--rt-color-foreground, #111827);
+  background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 58%, white);
+  color: var(--rt-color-foreground, #06162f);
   font-family: var(--rt-font-body, system-ui, sans-serif);
   text-decoration: none;
   transition:
@@ -93,7 +93,7 @@
 
 [data-roottale-cms] :where(.rt-cms-category-link:hover),
 [data-roottale-cms] :where(.rt-cms-category-link:focus-visible) {
-  border-color: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 40%, var(--rt-color-border, #e5e7eb));
+  border-color: color-mix(in srgb, var(--rt-color-primary, #06162f) 40%, var(--rt-color-border, #dceef3));
   background: #fff;
 }
 
@@ -110,7 +110,7 @@
   min-inline-size: 1.75rem;
   padding: 0.1875rem 0.5rem;
   border-radius: 999px;
-  background: var(--rt-color-primary, #4f46e5);
+  background: var(--rt-color-primary, #06162f);
   color: var(--rt-color-primary-foreground, #ffffff);
   font-size: 0.75rem;
   font-weight: 800;
@@ -130,17 +130,17 @@
   display: grid;
   align-content: start;
   min-block-size: 100%;
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 78%, transparent);
   border-radius: var(--rt-radius-md, 0.5rem);
   background:
     linear-gradient(
       180deg,
       rgb(255 255 255 / 0.94),
-      color-mix(in srgb, var(--rt-color-muted, #f8fafc) 70%, white)
+      color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 70%, white)
     ),
     radial-gradient(
       circle at top right,
-      color-mix(in srgb, var(--rt-color-primary, #4f46e5) 8%, transparent),
+      color-mix(in srgb, var(--rt-color-primary, #06162f) 8%, transparent),
       transparent 46%
     );
   box-shadow:
@@ -163,7 +163,7 @@
     var(--rt-spacing-4, 1rem);
   aspect-ratio: 16 / 9;
   object-fit: cover;
-  background: color-mix(in srgb, var(--rt-color-muted, #f8fafc) 70%, white);
+  background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 70%, white);
 }
 
 /* Category badge. */
@@ -174,8 +174,8 @@
   margin-block-end: var(--rt-spacing-3, 0.75rem);
   padding: 0.25rem 0.625rem;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 10%, transparent);
-  color: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 92%, var(--rt-color-foreground, #111827));
+  background: color-mix(in srgb, var(--rt-color-primary, #06162f) 10%, transparent);
+  color: color-mix(in srgb, var(--rt-color-primary, #06162f) 92%, var(--rt-color-foreground, #06162f));
   font-family: var(--rt-font-body, system-ui, sans-serif);
   font-size: 0.75rem;
   font-weight: 800;
@@ -191,14 +191,14 @@
   background: linear-gradient(
     90deg,
     transparent,
-    color-mix(in srgb, var(--rt-color-primary, #4f46e5) 30%, transparent),
+    color-mix(in srgb, var(--rt-color-primary, #06162f) 30%, transparent),
     transparent
   );
 }
 
 [data-roottale-cms] :where(.rt-cms-card-link:hover),
 [data-roottale-cms] :where(.rt-cms-card-link:focus-visible) {
-  border-color: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 32%, var(--rt-color-border, #e5e7eb));
+  border-color: color-mix(in srgb, var(--rt-color-primary, #06162f) 32%, var(--rt-color-border, #dceef3));
   box-shadow:
     0 20px 46px rgb(17 24 39 / 0.07),
     inset 0 1px 0 rgb(255 255 255 / 0.82);
@@ -227,7 +227,7 @@
   gap: 0.375rem;
   justify-self: start;
   margin-block-start: var(--rt-spacing-5, 1.25rem);
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 62%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 62%, transparent);
   font-family: var(--rt-font-body, system-ui, sans-serif);
   font-size: 0.8125rem;
   font-weight: 800;
@@ -238,7 +238,7 @@
   content: "";
   inline-size: 1.75rem;
   block-size: 1px;
-  background: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 46%, transparent);
+  background: color-mix(in srgb, var(--rt-color-primary, #06162f) 46%, transparent);
   transition: inline-size 180ms ease;
 }
 
@@ -251,7 +251,7 @@
   font-family: var(--rt-font-display, system-ui, sans-serif);
   font-size: var(--rt-font-size-2xl, 1.5rem);
   font-weight: var(--rt-font-weight-bold, 700);
-  color: var(--rt-color-foreground, #111827);
+  color: var(--rt-color-foreground, #06162f);
   letter-spacing: 0;
   line-height: 1.25;
   margin: 0 0 var(--rt-spacing-2, 0.5rem);
@@ -260,7 +260,7 @@
 [data-roottale-cms] :where(.rt-cms-excerpt) {
   font-family: var(--rt-font-body, system-ui, sans-serif);
   font-size: var(--rt-font-size-base, 1.0625rem);
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 68%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 68%, transparent);
   margin: 0;
   line-height: 1.75;
   max-inline-size: 42rem;
@@ -274,7 +274,7 @@
   gap: 0.375rem 0.75rem;
   font-size: var(--rt-font-size-sm, 0.8125rem);
   font-weight: 600;
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 56%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 56%, transparent);
   margin: 0 0 var(--rt-spacing-3, 0.75rem);
 }
 
@@ -290,19 +290,19 @@
   inline-size: 0.25rem;
   block-size: 0.25rem;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 70%, white);
+  background: color-mix(in srgb, var(--rt-color-primary, #06162f) 70%, white);
   margin-inline-end: 0.75rem;
 }
 
 [data-roottale-cms] :where(.rt-cms-empty) {
   font-family: var(--rt-font-body, system-ui, sans-serif);
-  color: var(--rt-color-muted-foreground, #64748b);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   font-style: italic;
 }
 
 [data-roottale-cms] :where(.rt-cms-article) {
   font-family: var(--rt-font-body, system-ui, sans-serif);
-  color: var(--rt-color-foreground, #111827);
+  color: var(--rt-color-foreground, #06162f);
 }
 
 [data-roottale-cms] :where(.rt-cms-body) {
@@ -310,17 +310,17 @@
   font-family: var(--rt-font-body, system-ui, sans-serif);
   font-size: var(--rt-font-size-base, 1rem);
   line-height: 1.7;
-  color: var(--rt-color-foreground, #111827);
+  color: var(--rt-color-foreground, #06162f);
 }
 
 [data-roottale-cms] :where(.rt-cms-post-header) {
   position: relative;
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 78%, transparent);
   border-radius: calc(var(--rt-radius-md, 0.5rem) * 1.5);
   background:
-    linear-gradient(135deg, rgb(255 255 255 / 0.92), color-mix(in srgb, var(--rt-color-muted, #f8fafc) 70%, white)),
-    radial-gradient(circle at top right, color-mix(in srgb, var(--rt-color-primary, #4f46e5) 10%, transparent), transparent 42%);
+    linear-gradient(135deg, rgb(255 255 255 / 0.92), color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 70%, white)),
+    radial-gradient(circle at top right, color-mix(in srgb, var(--rt-color-primary, #06162f) 10%, transparent), transparent 42%);
   box-shadow: 0 20px 55px rgb(17 24 39 / 0.05);
   padding: clamp(1.5rem, 3vw, 2.5rem);
   margin-block-end: var(--rt-spacing-6, 1.5rem);
@@ -342,7 +342,7 @@
   inline-size: 0.25rem;
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--rt-color-primary, #4f46e5) 72%, white),
+    color-mix(in srgb, var(--rt-color-primary, #06162f) 72%, white),
     transparent
   );
 }
@@ -361,7 +361,7 @@
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h3),
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h4) {
   font-family: var(--rt-font-display, system-ui, sans-serif);
-  color: var(--rt-color-foreground, #111827);
+  color: var(--rt-color-foreground, #06162f);
   letter-spacing: 0;
   line-height: 1.4;
 }
@@ -409,14 +409,14 @@
 }
 
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] blockquote) {
-  border-inline-start: 3px solid var(--rt-color-border, #e5e7eb);
+  border-inline-start: 3px solid var(--rt-color-border, #dceef3);
   padding-inline-start: var(--rt-spacing-3, 0.75rem);
-  color: var(--rt-color-muted-foreground, #64748b);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   font-style: italic;
 }
 
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] a) {
-  color: var(--rt-color-primary, #0070f3);
+  color: var(--rt-color-primary, #06162f);
   text-decoration: underline;
   text-underline-offset: 0.15em;
 }
@@ -441,7 +441,7 @@
 
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] code) {
   border-radius: var(--rt-radius-sm, 0.25rem);
-  background: var(--rt-color-muted, #f8fafc);
+  background: var(--rt-color-muted, #f7f8f7);
   padding-inline: 0.25em;
   font-family: var(--rt-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
   font-size: 0.9em;
@@ -450,7 +450,7 @@
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] pre) {
   overflow-x: auto;
   border-radius: var(--rt-radius-md, 0.5rem);
-  background: var(--rt-color-muted, #f8fafc);
+  background: var(--rt-color-muted, #f7f8f7);
   padding: var(--rt-spacing-3, 0.75rem);
   font-family: var(--rt-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
   font-size: 0.9em;
@@ -470,7 +470,7 @@
 
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] hr) {
   border: 0;
-  border-block-start: 1px solid var(--rt-color-border, #e5e7eb);
+  border-block-start: 1px solid var(--rt-color-border, #dceef3);
   margin-block: var(--rt-spacing-4, 1rem);
 }
 
@@ -482,8 +482,8 @@
 /* RootTaleTableOfContents */
 [data-roottale-cms] :where(.rt-cms-toc) {
   position: relative;
-  background: color-mix(in srgb, var(--rt-color-muted, #f8fafc) 34%, white);
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 86%, transparent);
+  background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 34%, white);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 86%, transparent);
   border-radius: min(var(--rt-radius-md, 0.5rem), 0.5rem);
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.76);
   padding: 0.875rem 1rem;
@@ -497,7 +497,7 @@
   inset-inline-start: 0;
   inline-size: 3px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 58%, var(--rt-color-border, #e5e7eb));
+  background: color-mix(in srgb, var(--rt-color-primary, #06162f) 58%, var(--rt-color-border, #dceef3));
 }
 
 [data-roottale-cms] :where(.rt-cms-toc-details) {
@@ -526,7 +526,7 @@
   font-weight: var(--rt-font-weight-bold, 800);
   letter-spacing: 0;
   margin: 0;
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 72%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 72%, transparent);
 }
 
 [data-roottale-cms] :where(.rt-cms-toc-title)::after {
@@ -538,7 +538,7 @@
   flex: 0 0 auto;
   inline-size: 1.625rem;
   block-size: 1.625rem;
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 90%, transparent);
   border-radius: 999px;
   background: var(--rt-color-background, #ffffff);
 }
@@ -551,7 +551,7 @@
   inset-inline-start: 50%;
   inline-size: 0.625rem;
   block-size: 1px;
-  background: color-mix(in srgb, var(--rt-color-foreground, #111827) 66%, transparent);
+  background: color-mix(in srgb, var(--rt-color-foreground, #06162f) 66%, transparent);
   transform: translate(-50%, -50%);
 }
 
@@ -592,7 +592,7 @@
   inset-block-start: 0.5rem;
   inset-inline-start: 0.625rem;
   inline-size: 1.375rem;
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 36%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 36%, transparent);
   font-size: 0.6875rem;
   font-variant-numeric: tabular-nums;
   font-weight: 700;
@@ -608,7 +608,7 @@
 
 [data-roottale-cms] :where(.rt-cms-toc-item a) {
   display: block;
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 76%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 76%, transparent);
   text-decoration: none;
   border-radius: min(calc(var(--rt-radius-md, 0.5rem) * 0.75), 0.375rem);
   padding: 0.375rem 0.5rem 0.375rem 2.375rem;
@@ -620,8 +620,8 @@
 
 [data-roottale-cms] :where(.rt-cms-toc-item a:hover),
 [data-roottale-cms] :where(.rt-cms-toc-item a:focus-visible) {
-  color: var(--rt-color-foreground, #111827);
-  background: color-mix(in srgb, var(--rt-color-primary, #4f46e5) 7%, var(--rt-color-background, #ffffff));
+  color: var(--rt-color-foreground, #06162f);
+  background: color-mix(in srgb, var(--rt-color-primary, #06162f) 7%, var(--rt-color-background, #ffffff));
   text-decoration: none;
   transform: translateX(0.125rem);
 }
@@ -631,11 +631,11 @@
   align-items: center;
   gap: var(--rt-spacing-4, 1rem);
   margin-block-start: var(--rt-spacing-8, 3rem);
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #e5e7eb) 82%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 82%, transparent);
   border-radius: calc(var(--rt-radius-md, 0.5rem) * 1.25);
   background:
-    linear-gradient(135deg, rgb(255 255 255 / 0.92), color-mix(in srgb, var(--rt-color-muted, #f8fafc) 82%, white)),
-    radial-gradient(circle at bottom left, color-mix(in srgb, var(--rt-color-primary, #4f46e5) 9%, transparent), transparent 48%);
+    linear-gradient(135deg, rgb(255 255 255 / 0.92), color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 82%, white)),
+    radial-gradient(circle at bottom left, color-mix(in srgb, var(--rt-color-primary, #06162f) 9%, transparent), transparent 48%);
   box-shadow: 0 18px 44px rgb(17 24 39 / 0.055);
   padding: var(--rt-spacing-5, 1.25rem);
 }
@@ -652,13 +652,13 @@
   display: grid;
   place-items: center;
   background:
-    linear-gradient(135deg, var(--rt-color-primary, #4f46e5), color-mix(in srgb, var(--rt-color-primary, #4f46e5) 42%, #111827));
+    linear-gradient(135deg, var(--rt-color-primary, #06162f), color-mix(in srgb, var(--rt-color-primary, #06162f) 42%, #06162f));
   color: var(--rt-color-primary-foreground, #ffffff);
   font-family: var(--rt-font-display, system-ui, sans-serif);
   font-size: 0.9375rem;
   font-weight: 800;
   letter-spacing: 0;
-  box-shadow: 0 12px 30px color-mix(in srgb, var(--rt-color-primary, #4f46e5) 18%, transparent);
+  box-shadow: 0 12px 30px color-mix(in srgb, var(--rt-color-primary, #06162f) 18%, transparent);
 }
 
 [data-roottale-cms] :where(.rt-cms-author-card__image) {
@@ -673,7 +673,7 @@
 
 [data-roottale-cms] :where(.rt-cms-author-card__eyebrow) {
   margin: 0 0 0.125rem;
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 46%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 46%, transparent);
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1.2;
@@ -681,7 +681,7 @@
 
 [data-roottale-cms] :where(.rt-cms-author-card__name) {
   margin: 0;
-  color: var(--rt-color-foreground, #111827);
+  color: var(--rt-color-foreground, #06162f);
   font-family: var(--rt-font-display, system-ui, sans-serif);
   font-size: 1.0625rem;
   font-weight: 800;
@@ -690,7 +690,7 @@
 
 [data-roottale-cms] :where(.rt-cms-author-card__description) {
   margin: 0.375rem 0 0;
-  color: color-mix(in srgb, var(--rt-color-foreground, #111827) 62%, transparent);
+  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 62%, transparent);
   font-size: 0.9375rem;
   line-height: 1.55;
   max-inline-size: 42rem;
@@ -751,7 +751,7 @@
   align-items: center;
   gap: var(--rt-spacing-2, 0.5rem);
   padding: var(--rt-spacing-3, 0.75rem) var(--rt-spacing-4, 1rem);
-  background: var(--rt-color-primary, #0070f3);
+  background: var(--rt-color-primary, #06162f);
   color: var(--rt-color-primary-foreground, #ffffff);
   border-radius: var(--rt-radius-full, 9999px);
   text-decoration: none;
@@ -777,7 +777,7 @@
   gap: var(--rt-spacing-4, 1rem);
   max-inline-size: 32rem;
   font-family: var(--rt-font-body, system-ui, sans-serif);
-  color: var(--rt-color-foreground, #0f172a);
+  color: var(--rt-color-foreground, #06162f);
 }
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-lead-heading) {
@@ -789,7 +789,7 @@
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-lead-description) {
   margin: 0;
-  color: var(--rt-color-muted-foreground, #64748b);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   font-size: var(--rt-font-size-base, 1rem);
   line-height: 1.5;
 }
@@ -797,7 +797,7 @@
 [data-roottale-cms="lead-form"] :where(.rt-cms-lead-vertical-label) {
   margin: 0;
   padding: var(--rt-spacing-3, 0.75rem);
-  background: var(--rt-color-muted, #f8fafc);
+  background: var(--rt-color-muted, #f7f8f7);
   border-radius: var(--rt-radius-md, 0.5rem);
   font-size: var(--rt-font-size-sm, 0.875rem);
 }
@@ -810,7 +810,7 @@
 [data-roottale-cms="lead-form"] :where(.rt-cms-field-label) {
   font-size: var(--rt-font-size-sm, 0.875rem);
   font-weight: var(--rt-font-weight-medium, 500);
-  color: var(--rt-color-foreground, #0f172a);
+  color: var(--rt-color-foreground, #06162f);
 }
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-field-input) {
@@ -818,21 +818,21 @@
   inline-size: 100%;
   min-block-size: 2.75rem; /* WCAG 2.2 AA 48px touch */
   padding: var(--rt-spacing-2, 0.5rem) var(--rt-spacing-3, 0.75rem);
-  border: 1px solid var(--rt-color-border, #e5e7eb);
+  border: 1px solid var(--rt-color-border, #dceef3);
   border-radius: var(--rt-radius-md, 0.5rem);
   background: var(--rt-color-background, #fff);
-  color: var(--rt-color-foreground, #0f172a);
+  color: var(--rt-color-foreground, #06162f);
   font: inherit;
 }
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-field-input:focus-visible) {
-  outline: 2px solid var(--rt-color-primary, #0070f3);
+  outline: 2px solid var(--rt-color-primary, #06162f);
   outline-offset: 2px;
 }
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-field-hint) {
   font-size: var(--rt-font-size-xs, 0.75rem);
-  color: var(--rt-color-muted-foreground, #64748b);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
 }
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-lead-consent) {
@@ -861,7 +861,7 @@
   justify-content: center;
   min-block-size: 2.75rem;
   padding: var(--rt-spacing-3, 0.75rem) var(--rt-spacing-5, 1.25rem);
-  background: var(--rt-color-primary, #0070f3);
+  background: var(--rt-color-primary, #06162f);
   color: var(--rt-color-primary-foreground, #fff);
   border: 0;
   border-radius: var(--rt-radius-md, 0.5rem);
@@ -875,6 +875,6 @@
 }
 
 [data-roottale-cms="lead-form"] :where(.rt-cms-lead-submit:focus-visible) {
-  outline: 2px solid var(--rt-color-primary, #0070f3);
+  outline: 2px solid var(--rt-color-primary, #06162f);
   outline-offset: 2px;
 }

package/dist/routes.js

@@ -129,7 +129,7 @@ function createFleetInfoRoute(config = {}) {
         site: config.site ?? env.VERCEL_PROJECT_PRODUCTION_URL ?? null,
         framework: "next",
         cms_client: CMS_CLIENT_VERSION,
-        cms_renderer: true ? "0.22.0" : "dev",
+        cms_renderer: true ? "0.24.0" : "dev",
         build_sha: env.VERCEL_GIT_COMMIT_SHA?.slice(0, 7) ?? null
       },
       { headers: { "cache-control": "public, max-age=300" } }

package/dist/templates.css

@@ -15,7 +15,7 @@
 :where([data-roottale-tpl]) {
   padding-block: clamp(3rem, 8vw, 6rem);
   background: var(--rt-color-background, transparent);
-  color: var(--rt-color-foreground, #111827);
+  color: var(--rt-color-foreground, #06162f);
   font-family: var(--rt-font-body, system-ui, -apple-system, sans-serif);
 }
 
@@ -34,7 +34,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-section-desc) {
-  color: var(--rt-color-muted-foreground, #6b7280);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   max-inline-size: 46rem;
   margin-block: -0.75rem 2rem;
 }
@@ -57,7 +57,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-btn--primary) {
-  background: var(--rt-color-primary, #4f46e5);
+  background: var(--rt-color-primary, #06162f);
   color: var(--rt-color-primary-foreground, #ffffff);
 }
 
@@ -95,7 +95,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-hero-eyebrow) {
-  color: var(--rt-color-primary, #4f46e5);
+  color: var(--rt-color-primary, #06162f);
   font-weight: 800;
   letter-spacing: 0.04em;
   margin: 0 0 0.75rem;
@@ -115,7 +115,7 @@
 
 [data-roottale-tpl] :where(.rt-tpl-hero-desc) {
   font-size: 1.125rem;
-  color: var(--rt-color-muted-foreground, #6b7280);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   max-inline-size: 40rem;
   margin: 0 0 2rem;
 }
@@ -149,7 +149,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-services-item) {
-  border: 1px solid var(--rt-color-border, #e5e7eb);
+  border: 1px solid var(--rt-color-border, #dceef3);
   border-radius: var(--rt-radius-md, 0.5rem);
   padding: 1.5rem;
   background: var(--rt-color-background, #ffffff);
@@ -161,8 +161,8 @@
 [data-roottale-tpl] :where(.rt-tpl-services-item:hover) {
   border-color: color-mix(
     in srgb,
-    var(--rt-color-primary, #4f46e5) 40%,
-    var(--rt-color-border, #e5e7eb)
+    var(--rt-color-primary, #06162f) 40%,
+    var(--rt-color-border, #dceef3)
   );
   transform: translateY(-2px);
 }
@@ -181,7 +181,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-services-desc) {
-  color: var(--rt-color-muted-foreground, #6b7280);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   font-size: 0.9375rem;
   margin: 0;
 }
@@ -195,7 +195,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-faq-item) {
-  border: 1px solid var(--rt-color-border, #e5e7eb);
+  border: 1px solid var(--rt-color-border, #dceef3);
   border-radius: var(--rt-radius-md, 0.5rem);
   padding: 1rem 1.25rem;
   background: var(--rt-color-background, #ffffff);
@@ -208,12 +208,12 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-faq-item[open] .rt-tpl-faq-q) {
-  color: var(--rt-color-primary, #4f46e5);
+  color: var(--rt-color-primary, #06162f);
 }
 
 [data-roottale-tpl] :where(.rt-tpl-faq-a) {
   margin: 0.75rem 0 0;
-  color: var(--rt-color-muted-foreground, #6b7280);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
 }
 
 /* ── cta-banner ───────────────────────────────────────────────────────────── */
@@ -228,10 +228,10 @@
   border-radius: var(--rt-radius-md, 0.5rem);
   background: color-mix(
     in srgb,
-    var(--rt-color-primary, #4f46e5) 8%,
+    var(--rt-color-primary, #06162f) 8%,
     var(--rt-color-background, #ffffff)
   );
-  border: 1px solid var(--rt-color-border, #e5e7eb);
+  border: 1px solid var(--rt-color-border, #dceef3);
 }
 
 [data-roottale-tpl] :where(.rt-tpl-cta-banner-title) {
@@ -242,7 +242,7 @@
 }
 
 [data-roottale-tpl] :where(.rt-tpl-cta-banner-desc) {
-  color: var(--rt-color-muted-foreground, #6b7280);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   margin: 0;
   max-inline-size: 40rem;
 }
@@ -250,11 +250,11 @@
 /* ── placeholder (admin preview 의 customSections skeleton) ──────────────── */
 
 [data-roottale-tpl] :where(.rt-tpl-placeholder-box) {
-  border: 2px dashed var(--rt-color-border, #e5e7eb);
+  border: 2px dashed var(--rt-color-border, #dceef3);
   border-radius: var(--rt-radius-md, 0.5rem);
   padding: 2.5rem;
   text-align: center;
-  color: var(--rt-color-muted-foreground, #6b7280);
+  color: var(--rt-color-muted-foreground, #6e6e6e);
   font-family: ui-monospace, monospace;
   font-size: 0.875rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roottale/cms-renderer-next",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "type": "module",
   "description": "RootTale CMS public-render React/Next.js Server Components. SSR-only RSC components (RootTaleBlogList / RootTaleBlogPost / RootTaleLeadForm) for external customer sites. Companion of @roottale/cms-renderer-astro (ADR-0034 §1.5 amended).",
   "main": "./dist/index.js",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "zod": "^3.23.8",
-    "@roottale/cms-client": "^0.20.0",
+    "@roottale/cms-client": "^0.24.0",
     "@roottale/cms-core": "^0.18.0"
   },
   "peerDependencies": {