@orion-studios/payload-studio 0.5.0-beta.98 → 0.6.0-beta.1

package/dist/nextjs/index.mjs

@@ -5,11 +5,10 @@ import {
   createSiteQueries,
   resolveMedia,
   resolveSocialMediaLinks
-} from "../chunk-XHWQJUX5.mjs";
+} from "../chunk-OTHERBGX.mjs";
 import "../chunk-ZTXJG4K5.mjs";
+import "../chunk-PF3EBZXF.mjs";
 import "../chunk-ADIIWIYL.mjs";
-import "../chunk-C4J35SPJ.mjs";
-import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   WEBSITE_CONTENT_TAG,

package/dist/sitePreviewTypes-BkHCWxNW.d.mts

@@ -0,0 +1,58 @@
+type AdminRole = 'admin' | 'editor' | 'client';
+declare const adminNavIcons: readonly ["dashboard", "pages", "forms", "globals", "media", "tools", "account", "analytics"];
+type AdminNavIcon = (typeof adminNavIcons)[number];
+type AdminNavItem = {
+    href: string;
+    icon?: AdminNavIcon;
+    label: string;
+    matchPrefixes: string[];
+    roles?: AdminRole[];
+};
+type AdminBreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+declare const roleCanAccessNav: (role: string | undefined, item: AdminNavItem) => boolean;
+declare const navItemIsActive: (pathname: string, item: AdminNavItem) => boolean;
+
+type SitePreviewLink = {
+    href: string;
+    label: string;
+};
+type SitePreviewLocationSummary = {
+    address?: string;
+    hours?: string;
+    phone?: string;
+};
+type SitePreviewSocialLink = {
+    label: string;
+    platform: string;
+    url: string;
+};
+type SiteHeaderPreviewData = {
+    activePath?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    locationSummary?: Pick<SitePreviewLocationSummary, 'address' | 'hours'>;
+    logoUrl?: string;
+    navItems: SitePreviewLink[];
+    siteName: string;
+    socialLinks?: SitePreviewSocialLink[];
+    tagline?: string;
+};
+type SiteFooterPreviewData = {
+    builtByHref?: string;
+    builtByLabel?: string;
+    contactEmail: string;
+    copyright: string;
+    description?: string;
+    footerCategories: string[];
+    footerLinks: SitePreviewLink[];
+    locationSummary: SitePreviewLocationSummary;
+    logoUrl?: string;
+    siteName: string;
+    socialLinks?: SitePreviewSocialLink[];
+    tagline?: string;
+};
+
+export { type AdminBreadcrumbItem as A, type SiteFooterPreviewData as S, type AdminNavIcon as a, type AdminNavItem as b, type AdminRole as c, type SiteHeaderPreviewData as d, type SitePreviewLink as e, type SitePreviewLocationSummary as f, type SitePreviewSocialLink as g, navItemIsActive as n, roleCanAccessNav as r };

package/dist/sitePreviewTypes-BkHCWxNW.d.ts

@@ -0,0 +1,58 @@
+type AdminRole = 'admin' | 'editor' | 'client';
+declare const adminNavIcons: readonly ["dashboard", "pages", "forms", "globals", "media", "tools", "account", "analytics"];
+type AdminNavIcon = (typeof adminNavIcons)[number];
+type AdminNavItem = {
+    href: string;
+    icon?: AdminNavIcon;
+    label: string;
+    matchPrefixes: string[];
+    roles?: AdminRole[];
+};
+type AdminBreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+declare const roleCanAccessNav: (role: string | undefined, item: AdminNavItem) => boolean;
+declare const navItemIsActive: (pathname: string, item: AdminNavItem) => boolean;
+
+type SitePreviewLink = {
+    href: string;
+    label: string;
+};
+type SitePreviewLocationSummary = {
+    address?: string;
+    hours?: string;
+    phone?: string;
+};
+type SitePreviewSocialLink = {
+    label: string;
+    platform: string;
+    url: string;
+};
+type SiteHeaderPreviewData = {
+    activePath?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    locationSummary?: Pick<SitePreviewLocationSummary, 'address' | 'hours'>;
+    logoUrl?: string;
+    navItems: SitePreviewLink[];
+    siteName: string;
+    socialLinks?: SitePreviewSocialLink[];
+    tagline?: string;
+};
+type SiteFooterPreviewData = {
+    builtByHref?: string;
+    builtByLabel?: string;
+    contactEmail: string;
+    copyright: string;
+    description?: string;
+    footerCategories: string[];
+    footerLinks: SitePreviewLink[];
+    locationSummary: SitePreviewLocationSummary;
+    logoUrl?: string;
+    siteName: string;
+    socialLinks?: SitePreviewSocialLink[];
+    tagline?: string;
+};
+
+export { type AdminBreadcrumbItem as A, type SiteFooterPreviewData as S, type AdminNavIcon as a, type AdminNavItem as b, type AdminRole as c, type SiteHeaderPreviewData as d, type SitePreviewLink as e, type SitePreviewLocationSummary as f, type SitePreviewSocialLink as g, navItemIsActive as n, roleCanAccessNav as r };

package/dist/studio/index.d.mts

@@ -1,2 +1,2 @@
-export { I as ImageUploadOptimizationOptions, c as StudioCompileResult, S as StudioDocumentV1, d as StudioInspectorField, e as StudioInspectorPanel, f as StudioMigration, b as StudioModuleManifest, g as StudioNode, h as StudioNodeData, a as StudioNodeTypeDefinition, j as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as SupportedImageMimeType, q as assertStudioDocumentV1, r as compileStudioDocument, s as createEmptyStudioDocument, t as createImageUploadOptimizationHook, u as createStudioRegistry, v as migrateStudioDocument, w as validateStudioDocument, x as withImageUploadOptimization } from '../index-BIwu3qIH.mjs';
+export { I as ImageUploadOptimizationOptions, d as StudioCompileResult, S as StudioDocumentV1, e as StudioInspectorField, f as StudioInspectorPanel, g as StudioMigration, a as StudioModuleManifest, h as StudioNode, j as StudioNodeData, c as StudioNodeTypeDefinition, b as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as SupportedImageMimeType, q as assertStudioDocumentV1, r as compileStudioDocument, s as createEmptyStudioDocument, t as createImageUploadOptimizationHook, u as createStudioRegistry, v as migrateStudioDocument, w as validateStudioDocument, x as withImageUploadOptimization } from '../index-DWmudwDm.mjs';
 import 'payload';

package/dist/studio/index.d.ts

@@ -1,2 +1,2 @@
-export { I as ImageUploadOptimizationOptions, c as StudioCompileResult, S as StudioDocumentV1, d as StudioInspectorField, e as StudioInspectorPanel, f as StudioMigration, b as StudioModuleManifest, g as StudioNode, h as StudioNodeData, a as StudioNodeTypeDefinition, j as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as SupportedImageMimeType, q as assertStudioDocumentV1, r as compileStudioDocument, s as createEmptyStudioDocument, t as createImageUploadOptimizationHook, u as createStudioRegistry, v as migrateStudioDocument, w as validateStudioDocument, x as withImageUploadOptimization } from '../index-BIwu3qIH.js';
+export { I as ImageUploadOptimizationOptions, d as StudioCompileResult, S as StudioDocumentV1, e as StudioInspectorField, f as StudioInspectorPanel, g as StudioMigration, a as StudioModuleManifest, h as StudioNode, j as StudioNodeData, c as StudioNodeTypeDefinition, b as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as SupportedImageMimeType, q as assertStudioDocumentV1, r as compileStudioDocument, s as createEmptyStudioDocument, t as createImageUploadOptimizationHook, u as createStudioRegistry, v as migrateStudioDocument, w as validateStudioDocument, x as withImageUploadOptimization } from '../index-DWmudwDm.js';
 import 'payload';

package/dist/studio-pages/builder.css

@@ -1,19 +1,57 @@
 :root {
-  --orion-studio-bg: #f5f7f6;
-  --orion-studio-ink: #13211c;
-  --orion-studio-muted: #54655f;
-  --orion-studio-card: #ffffff;
-  --orion-studio-border: rgba(19, 33, 28, 0.14);
-  --orion-studio-shadow: 0 12px 26px rgba(16, 24, 20, 0.12);
-  --orion-studio-radius-lg: 22px;
-  --orion-studio-radius-md: 16px;
-  --orion-studio-accent: #0d4a37;
+  --orion-studio-bg: var(--orion-cms-page-bg, var(--orion-cms-page-bg-resolved, #f6f7f9));
+  --orion-studio-ink: var(--orion-cms-text, var(--orion-cms-text-resolved, #182332));
+  --orion-studio-body-text: color-mix(in srgb, var(--orion-studio-ink) 80%, white);
+  --orion-studio-muted: var(--orion-cms-muted, var(--orion-cms-muted-resolved, #5d6a79));
+  --orion-studio-card: var(--orion-cms-surface, var(--orion-cms-surface-resolved, #ffffff));
+  --orion-studio-border: var(--orion-cms-border, var(--orion-cms-border-resolved, rgba(24, 35, 50, 0.14)));
+  --orion-studio-shadow: var(
+    --orion-cms-shadow-elevated,
+    var(--orion-cms-shadow-elevated-resolved, 0 12px 26px rgba(18, 26, 38, 0.12))
+  );
+  --orion-studio-radius-lg: var(--orion-cms-radius-lg, var(--orion-cms-radius-lg-resolved, 22px));
+  --orion-studio-radius-md: var(--orion-cms-radius-md, var(--orion-cms-radius-md-resolved, 16px));
+  --orion-studio-radius-sm: var(--orion-cms-radius-sm, var(--orion-cms-radius-sm-resolved, 12px));
+  --orion-studio-radius-pill: var(--orion-cms-radius-pill, var(--orion-cms-radius-pill-resolved, 999px));
+  --orion-studio-accent: var(--orion-cms-accent, var(--orion-cms-accent-resolved, #334b63));
+  --orion-studio-accent-contrast: var(
+    --orion-cms-accent-contrast,
+    var(--orion-cms-accent-contrast-resolved, #ffffff)
+  );
+  --orion-studio-accent-border-hairline: color-mix(in srgb, var(--orion-studio-accent) 8%, transparent);
+  --orion-studio-accent-border-subtle: color-mix(in srgb, var(--orion-studio-accent) 12%, transparent);
+  --orion-studio-accent-border: color-mix(in srgb, var(--orion-studio-accent) 18%, transparent);
+  --orion-studio-accent-border-strong: color-mix(in srgb, var(--orion-studio-accent) 24%, transparent);
+  --orion-studio-accent-soft: var(
+    --orion-cms-accent-soft,
+    var(--orion-cms-accent-soft-resolved, rgba(51, 75, 99, 0.08))
+  );
+  --orion-studio-accent-soft-strong: color-mix(in srgb, var(--orion-studio-accent) 14%, transparent);
+  --orion-studio-accent-ghost: color-mix(in srgb, var(--orion-studio-accent) 82%, transparent);
+  --orion-studio-selection-outline: color-mix(in srgb, var(--orion-studio-accent) 55%, transparent);
+  --orion-studio-accent-gradient-start: var(--orion-cms-button-bg, var(--orion-studio-accent));
+  --orion-studio-accent-gradient-end: var(--orion-cms-button-hover-bg, var(--orion-studio-accent));
+  --orion-studio-surface-subtle: var(
+    --orion-cms-surface-subtle,
+    var(--orion-cms-surface-subtle-resolved, #eef2f5)
+  );
+  --orion-studio-body-font: var(
+    --orion-cms-font-body,
+    var(--orion-cms-font-body-resolved, 'Trebuchet MS', 'Gill Sans', 'Segoe UI', sans-serif)
+  );
+  --orion-studio-heading-font: var(
+    --orion-cms-font-heading,
+    var(--orion-cms-font-heading-resolved, 'Avenir Next', 'Gill Sans', 'Trebuchet MS', sans-serif)
+  );
+  --forest-900: var(--orion-studio-ink);
+  --ink-700: var(--orion-studio-body-text);
+  --ink-500: var(--orion-studio-muted);
 }
 
 body {
   background: var(--orion-studio-bg);
   color: var(--orion-studio-ink);
-  font-family: 'Trebuchet MS', 'Gill Sans', 'Segoe UI', sans-serif;
+  font-family: var(--orion-studio-body-font);
   line-height: 1.5;
 }
 
@@ -21,7 +59,7 @@ h1,
 h2,
 h3,
 h4 {
-  font-family: 'Avenir Next', 'Gill Sans', 'Trebuchet MS', sans-serif;
+  font-family: var(--orion-studio-heading-font);
   letter-spacing: 0.01em;
   line-height: 1.1;
 }
@@ -121,7 +159,7 @@ h4 {
   background: var(--orion-studio-card);
   border: 1px solid var(--orion-studio-border);
   border-radius: var(--orion-studio-radius-md);
-  box-shadow: 0 8px 20px rgba(16, 24, 20, 0.08);
+  box-shadow: var(--orion-cms-shadow-card, var(--orion-cms-shadow-card-resolved, 0 8px 20px rgba(16, 24, 20, 0.08)));
   padding: 1rem;
 }
 
@@ -131,7 +169,7 @@ h4 {
   align-items: center;
   justify-content: center;
   gap: 0.45rem;
-  border-radius: 999px;
+  border-radius: var(--orion-studio-radius-pill);
   font-weight: 800;
   padding: 0.72rem 1.05rem;
   border: 0;
@@ -147,14 +185,14 @@ h4 {
 }
 
 .btn-primary {
-  background: var(--orion-studio-accent);
-  color: #fff;
+  background: var(--orion-studio-accent-gradient-start);
+  color: var(--orion-studio-accent-contrast);
 }
 
 .btn-secondary {
-  background: #fff;
+  background: var(--orion-studio-card);
   color: var(--orion-studio-accent);
-  border: 1px solid rgba(13, 74, 55, 0.25);
+  border: 1px solid var(--orion-studio-accent-border-strong);
 }
 
 .hero {
@@ -165,7 +203,7 @@ h4 {
   overflow: hidden;
   box-shadow: var(--orion-studio-shadow);
   background: transparent;
-  color: #fff;
+  color: var(--orion-studio-accent-contrast);
 }
 
 .hero-grid {
@@ -186,9 +224,9 @@ h4 {
 
 .orion-builder-upload-overlay {
   align-items: center;
-  background: rgba(9, 28, 21, 0.58);
+  background: color-mix(in srgb, var(--orion-studio-accent) 54%, black);
   border-radius: inherit;
-  color: #ffffff;
+  color: var(--orion-studio-accent-contrast);
   display: inline-flex;
   font-size: 0.8rem;
   font-weight: 700;
@@ -203,9 +241,9 @@ h4 {
 
 .orion-builder-upload-spinner {
   animation: orion-builder-upload-spin 0.9s linear infinite;
-  border: 2px solid rgba(255, 255, 255, 0.35);
-  border-radius: 999px;
-  border-top-color: #ffffff;
+  border: 2px solid color-mix(in srgb, var(--orion-studio-accent-contrast) 35%, transparent);
+  border-radius: var(--orion-studio-radius-pill);
+  border-top-color: var(--orion-studio-accent-contrast);
   display: inline-block;
   height: 18px;
   width: 18px;
@@ -236,7 +274,7 @@ h4 {
 .hero p {
   margin-top: 0.75rem;
   max-width: 48ch;
-  color: rgba(255, 255, 255, 0.9);
+  color: color-mix(in srgb, var(--orion-studio-accent-contrast) 90%, transparent);
 }
 
 .hero-actions {
@@ -253,9 +291,13 @@ h4 {
 .features {
   border-radius: var(--orion-studio-radius-lg);
   padding: 0;
-  background: linear-gradient(135deg, #124a37 0%, #1f684f 100%);
+  background: linear-gradient(
+    135deg,
+    var(--orion-studio-accent-gradient-start) 0%,
+    var(--orion-studio-accent-gradient-end) 100%
+  );
   border: 1px solid var(--orion-studio-border);
-  color: #fff;
+  color: var(--orion-studio-accent-contrast);
 }
 
 .features .inner {
@@ -272,22 +314,22 @@ h4 {
 }
 
 .feature-item {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 14px;
+  background: color-mix(in srgb, var(--orion-studio-accent-contrast) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--orion-studio-accent-contrast) 20%, transparent);
+  border-radius: var(--orion-studio-radius-sm);
   padding: 0.9rem;
 }
 
 .feature-item h3 {
-  color: #fff;
+  color: var(--orion-studio-accent-contrast);
 }
 
 .feature-item p {
-  color: rgba(255, 255, 255, 0.88);
+  color: color-mix(in srgb, var(--orion-studio-accent-contrast) 88%, transparent);
 }
 
 .feature-item-media {
-  border-radius: 12px;
+  border-radius: var(--orion-studio-radius-sm);
   height: 120px;
   margin-bottom: 0.65rem;
   object-fit: cover;
@@ -295,14 +337,14 @@ h4 {
 }
 
 .feature-item-media-card {
-  border: 1px solid rgba(13, 74, 55, 0.12);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
 }
 
 .feature-icon {
   width: 44px;
   height: 44px;
-  border-radius: 12px;
-  background: rgba(13, 74, 55, 0.1);
+  border-radius: var(--orion-studio-radius-sm);
+  background: var(--orion-studio-accent-soft);
   display: grid;
   place-items: center;
   font-weight: 900;
@@ -341,9 +383,9 @@ h4 {
 }
 
 .service-card {
-  border: 1px solid rgba(19, 33, 28, 0.1);
-  border-radius: 16px;
-  background: #fff;
+  border: 1px solid var(--orion-studio-border);
+  border-radius: var(--orion-studio-radius-md);
+  background: var(--orion-studio-card);
   padding: 1rem;
 }
 
@@ -355,8 +397,8 @@ h4 {
 
 .service-tag-icon {
   align-items: center;
-  background: rgba(13, 74, 55, 0.1);
-  border-radius: 12px;
+  background: var(--orion-studio-accent-soft);
+  border-radius: var(--orion-studio-radius-sm);
   color: var(--orion-studio-accent);
   display: inline-grid;
   height: 44px;
@@ -391,10 +433,10 @@ h4 {
   transform: translateY(-50%);
   width: 42px;
   height: 42px;
-  border-radius: 999px;
-  border: 1px solid rgba(19, 33, 28, 0.14);
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 18px 34px rgba(15, 125, 82, 0.12);
+  border-radius: var(--orion-studio-radius-pill);
+  border: 1px solid var(--orion-studio-border);
+  background: color-mix(in srgb, var(--orion-studio-card) 92%, transparent);
+  box-shadow: 0 18px 34px var(--orion-studio-accent-soft-strong);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -425,7 +467,7 @@ h4 {
   display: block;
   font-size: 2.2rem;
   line-height: 0.8;
-  color: #e7b55a;
+  color: var(--brand-secondary);
   margin-bottom: 0;
   opacity: 0.8;
 }
@@ -446,7 +488,7 @@ h4 {
 }
 
 .testimonial-stars {
-  color: #e7b55a;
+  color: var(--brand-secondary);
   display: inline-flex;
   font-size: 0.92rem;
   gap: 0.04rem;
@@ -457,7 +499,7 @@ h4 {
 }
 
 .testimonial-stars-muted {
-  color: rgba(13, 74, 55, 0.25);
+  color: var(--orion-studio-accent-border-strong);
 }
 
 .quote-author {
@@ -471,8 +513,8 @@ h4 {
 .quote-avatar {
   width: 34px;
   height: 34px;
-  border-radius: 12px;
-  background: rgba(13, 74, 55, 0.12);
+  border-radius: var(--orion-studio-radius-sm);
+  background: var(--orion-studio-accent-soft-strong);
 }
 
 .faq-list {
@@ -482,28 +524,28 @@ h4 {
 }
 
 .faq-item {
-  border: 1px solid rgba(19, 33, 28, 0.1);
-  border-radius: 14px;
-  background: #fff;
+  border: 1px solid var(--orion-studio-border);
+  border-radius: var(--orion-studio-radius-sm);
+  background: var(--orion-studio-card);
   padding: 0.75rem 0.85rem;
 }
 
 .contact-strip {
-  background: #fff;
-  border: 1px solid rgba(19, 33, 28, 0.12);
-  border-radius: 18px;
+  background: var(--orion-studio-card);
+  border: 1px solid var(--orion-studio-border);
+  border-radius: var(--orion-studio-radius-md);
   padding: 1.1rem;
 }
 
 .contact-strip-dark {
   background: var(--orion-studio-accent);
-  color: #fff;
+  color: var(--orion-studio-accent-contrast);
 }
 
 .richtext-wrap {
-  background: #fff;
-  border: 1px solid rgba(19, 33, 28, 0.12);
-  border-radius: 18px;
+  background: var(--orion-studio-card);
+  border: 1px solid var(--orion-studio-border);
+  border-radius: var(--orion-studio-radius-md);
   padding: 1.1rem;
 }
 
@@ -549,8 +591,8 @@ h4 {
 }
 
 .orion-stat-card {
-  background: #edf3e8;
-  border: 1px solid rgba(13, 74, 55, 0.1);
+  background: var(--orion-studio-surface-subtle);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
   border-radius: 14px;
   padding: 0.9rem;
 }
@@ -587,7 +629,7 @@ h4 {
 .orion-logo-wall-item {
   align-items: center;
   background: #fff;
-  border: 1px solid rgba(13, 74, 55, 0.12);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
   border-radius: 14px;
   display: flex;
   justify-content: center;
@@ -643,7 +685,7 @@ h4 {
 
 .orion-before-after-card {
   background: #fff;
-  border: 1px solid rgba(13, 74, 55, 0.12);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
   border-radius: 16px;
   overflow: hidden;
 }
@@ -670,9 +712,9 @@ h4 {
 }
 
 .orion-before-after-media figcaption {
-  background: rgba(13, 74, 55, 0.82);
+  background: var(--orion-studio-accent-ghost);
   border-radius: 999px;
-  color: #fff;
+  color: var(--orion-studio-accent-contrast);
   font-size: 0.7rem;
   left: 0.55rem;
   padding: 0.2rem 0.44rem;
@@ -683,7 +725,7 @@ h4 {
 
 .orion-before-after-placeholder {
   align-items: center;
-  background: #e9efea;
+  background: var(--orion-studio-surface-subtle);
   color: var(--orion-studio-muted);
   display: flex;
   font-size: 0.85rem;
@@ -705,8 +747,8 @@ h4 {
 
 .orion-builder-settings-summary-row {
   align-items: center;
-  background: rgba(18, 74, 55, 0.04);
-  border: 1px solid rgba(13, 74, 55, 0.12);
+  background: var(--orion-studio-accent-soft);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
   border-radius: 12px;
   display: flex;
   gap: 0.5rem;
@@ -731,7 +773,7 @@ h4 {
 
 .orion-builder-settings-mode-btn {
   background: #fff;
-  border: 1px solid rgba(13, 74, 55, 0.2);
+  border: 1px solid var(--orion-studio-accent-border);
   border-radius: 999px;
   color: var(--orion-studio-muted);
   cursor: pointer;
@@ -741,21 +783,21 @@ h4 {
 }
 
 .orion-builder-settings-mode-btn.is-active {
-  background: #124a37;
-  border-color: #124a37;
-  color: #fff;
+  background: var(--orion-studio-accent);
+  border-color: var(--orion-studio-accent);
+  color: var(--orion-studio-accent-contrast);
 }
 
 .orion-builder-settings-group {
   background: #fff;
-  border: 1px solid rgba(13, 74, 55, 0.14);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
   border-radius: 12px;
   overflow: hidden;
 }
 
 .orion-builder-settings-group-header {
   align-items: center;
-  background: linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0));
+  background: linear-gradient(180deg, var(--orion-studio-accent-soft), transparent);
   border: none;
   color: var(--orion-studio-ink);
   cursor: pointer;
@@ -789,7 +831,7 @@ h4 {
 }
 
 .orion-builder-settings-group-body {
-  border-top: 1px solid rgba(13, 74, 55, 0.08);
+  border-top: 1px solid var(--orion-studio-accent-border-hairline);
   display: grid;
   gap: 0.6rem;
   padding: 0.65rem;
@@ -817,7 +859,7 @@ h4 {
 
 .orion-builder-settings-input {
   background: #fff;
-  border: 1px solid rgba(13, 74, 55, 0.2);
+  border: 1px solid var(--orion-studio-accent-border);
   border-radius: 10px;
   color: var(--orion-studio-ink);
   font-size: 0.79rem;
@@ -843,7 +885,7 @@ h4 {
 }
 
 .orion-builder-settings-empty {
-  border: 1px dashed rgba(13, 74, 55, 0.2);
+  border: 1px dashed var(--orion-studio-accent-border);
   border-radius: 12px;
   color: var(--orion-studio-muted);
   font-size: 0.75rem;
@@ -864,8 +906,8 @@ h4 {
 }
 
 .orion-builder-settings-add-btn {
-  background: rgba(18, 74, 55, 0.06);
-  border: 1px solid rgba(13, 74, 55, 0.2);
+  background: var(--orion-studio-accent-soft);
+  border: 1px solid var(--orion-studio-accent-border);
   border-radius: 999px;
   color: var(--orion-studio-ink);
   cursor: pointer;
@@ -875,7 +917,7 @@ h4 {
 }
 
 .orion-builder-settings-inline-btn {
-  border: 1px solid rgba(13, 74, 55, 0.22);
+  border: 1px solid var(--orion-studio-accent-border-strong);
   border-radius: 999px;
   color: var(--orion-studio-ink);
   cursor: pointer;
@@ -895,14 +937,14 @@ h4 {
 }
 
 .orion-builder-settings-item-card {
-  border: 1px solid rgba(13, 74, 55, 0.15);
+  border: 1px solid var(--orion-studio-accent-border-subtle);
   border-radius: 11px;
   overflow: hidden;
 }
 
 .orion-builder-settings-item-toggle {
   align-items: center;
-  background: linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0));
+  background: linear-gradient(180deg, var(--orion-studio-accent-soft), transparent);
   border: none;
   cursor: pointer;
   display: flex;
@@ -928,7 +970,7 @@ h4 {
 }
 
 .orion-builder-settings-item-body {
-  border-top: 1px solid rgba(13, 74, 55, 0.1);
+  border-top: 1px solid var(--orion-studio-accent-border-subtle);
   display: grid;
   gap: 0.52rem;
   padding: 0.56rem;