@actuate-media/cms-admin 0.54.0 → 0.56.2

package/src/views/SetupWizard.tsx

@@ -21,11 +21,14 @@ function passwordStrength(pw: string): { score: number; label: string; color: st
   if (/\d/.test(pw)) score++
   if (/[^a-zA-Z0-9]/.test(pw)) score++
 
-  if (score <= 2) return { score, label: 'Weak', color: 'bg-red-500' }
-  if (score <= 4) return { score, label: 'Fair', color: 'bg-yellow-500' }
-  return { score, label: 'Strong', color: 'bg-green-500' }
+  if (score <= 2) return { score, label: 'Weak', color: 'bg-destructive' }
+  if (score <= 4) return { score, label: 'Fair', color: 'bg-warning' }
+  return { score, label: 'Strong', color: 'bg-success' }
 }
 
+const fieldClass =
+  'w-full rounded-lg border border-border bg-input-background px-3 py-2.5 text-sm text-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none'
+
 export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizardProps) {
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
@@ -69,18 +72,18 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
 
   if (done) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+      <div className="bg-muted flex min-h-screen items-center justify-center px-4">
         <div className="w-full max-w-md text-center">
-          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
-            <CheckCircle2 className="h-8 w-8 text-green-600" />
+          <div className="bg-success/10 mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full">
+            <CheckCircle2 className="text-success h-8 w-8" />
           </div>
-          <h1 className="mb-2 text-2xl font-medium text-gray-900">Setup Complete</h1>
-          <p className="mb-6 text-gray-600">
+          <h1 className="text-foreground mb-2 text-2xl font-medium">Setup Complete</h1>
+          <p className="text-muted-foreground mb-6">
             Your admin account has been created. You can now sign in to manage your content.
           </p>
           <button
             onClick={() => window.location.reload()}
-            className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700"
+            className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg px-6 py-3 font-medium transition-colors"
           >
             Go to Login
           </button>
@@ -90,29 +93,32 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+    <div className="bg-muted flex min-h-screen items-center justify-center px-4">
       <div className="w-full max-w-md">
         <div className="mb-8 text-center">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
-            <Shield className="h-7 w-7 text-white" />
+          <div className="bg-primary mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl">
+            <Shield className="text-primary-foreground h-7 w-7" />
           </div>
-          <h1 className="text-2xl font-medium text-gray-900">Welcome to {siteName}</h1>
-          <p className="mt-2 text-gray-600">Create your admin account to get started</p>
+          <h1 className="text-foreground text-2xl font-medium">Welcome to {siteName}</h1>
+          <p className="text-muted-foreground mt-2">Create your admin account to get started</p>
         </div>
 
         <form
           onSubmit={handleSubmit}
-          className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
+          className="border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm"
         >
           {error && (
-            <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-              <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
-              <p className="text-sm text-red-800">{error}</p>
+            <div className="border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3">
+              <AlertTriangle className="text-destructive mt-0.5 h-5 w-5 shrink-0" />
+              <p className="text-destructive text-sm">{error}</p>
             </div>
           )}
 
           <div>
-            <label htmlFor="setup-name" className="mb-1.5 block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="setup-name"
+              className="text-foreground mb-1.5 block text-sm font-medium"
+            >
               Full Name
             </label>
             <input
@@ -121,7 +127,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Jane Smith"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className={fieldClass}
               required
               autoFocus
               autoComplete="name"
@@ -129,7 +135,10 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </div>
 
           <div>
-            <label htmlFor="setup-email" className="mb-1.5 block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="setup-email"
+              className="text-foreground mb-1.5 block text-sm font-medium"
+            >
               Email Address
             </label>
             <input
@@ -138,7 +147,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="admin@example.com"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className={fieldClass}
               required
               autoComplete="email"
             />
@@ -147,7 +156,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div>
             <label
               htmlFor="setup-password"
-              className="mb-1.5 block text-sm font-medium text-gray-700"
+              className="text-foreground mb-1.5 block text-sm font-medium"
             >
               Password
             </label>
@@ -158,7 +167,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Minimum 12 characters"
-                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                className={`${fieldClass} pr-10`}
                 required
                 minLength={12}
                 autoComplete="new-password"
@@ -166,7 +175,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
                 tabIndex={-1}
               >
                 {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -175,13 +184,13 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
             {password && (
               <div className="mt-2">
                 <div className="flex items-center gap-2">
-                  <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
+                  <div className="bg-muted h-1.5 flex-1 overflow-hidden rounded-full">
                     <div
                       className={`h-full rounded-full transition-all ${strength.color}`}
                       style={{ width: `${(strength.score / 6) * 100}%` }}
                     />
                   </div>
-                  <span className="text-xs text-gray-600">{strength.label}</span>
+                  <span className="text-muted-foreground text-xs">{strength.label}</span>
                 </div>
               </div>
             )}
@@ -190,7 +199,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div>
             <label
               htmlFor="setup-confirm"
-              className="mb-1.5 block text-sm font-medium text-gray-700"
+              className="text-foreground mb-1.5 block text-sm font-medium"
             >
               Confirm Password
             </label>
@@ -200,26 +209,26 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               placeholder="Re-enter your password"
-              className={`w-full rounded-lg border px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none ${
-                confirmPassword && !passwordsMatch ? 'border-red-300' : 'border-gray-300'
+              className={`${fieldClass} ${
+                confirmPassword && !passwordsMatch ? 'border-destructive' : ''
               }`}
               required
               autoComplete="new-password"
             />
             {confirmPassword && !passwordsMatch && (
-              <p className="mt-1 text-xs text-red-600">Passwords do not match</p>
+              <p className="text-destructive mt-1 text-xs">Passwords do not match</p>
             )}
           </div>
 
           <button
             type="submit"
             disabled={!canSubmit}
-            className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg py-2.5 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
           >
             {submitting ? 'Creating Account...' : 'Create Admin Account'}
           </button>
 
-          <p className="text-center text-xs text-gray-500">
+          <p className="text-muted-foreground text-center text-xs">
             This form is only available during initial setup. Once an admin account exists, it will
             be replaced by the login screen.
           </p>

package/src/views/page-builder/DesignScore.tsx

@@ -25,16 +25,16 @@ export interface DesignScorePanelProps {
 
 function getScoreColor(score: number, max: number): string {
   const ratio = max > 0 ? score / max : 0
-  if (ratio >= 0.8) return 'text-green-500'
-  if (ratio >= 0.5) return 'text-amber-500'
-  return 'text-red-500'
+  if (ratio >= 0.8) return 'text-success'
+  if (ratio >= 0.5) return 'text-warning'
+  return 'text-destructive'
 }
 
 function getBarColor(score: number, max: number): string {
   const ratio = max > 0 ? score / max : 0
-  if (ratio >= 0.8) return 'bg-green-500'
-  if (ratio >= 0.5) return 'bg-amber-500'
-  return 'bg-red-500'
+  if (ratio >= 0.8) return 'bg-success'
+  if (ratio >= 0.5) return 'bg-warning'
+  return 'bg-destructive'
 }
 
 function getScoreLabel(score: number): string {
@@ -53,19 +53,19 @@ function getRingStrokeColor(score: number): string {
 function StatusIcon({ status }: { status: BuilderDesignCheck['status'] }) {
   switch (status) {
     case 'good':
-      return <CheckCircle2 size={14} className="shrink-0 text-green-500" />
+      return <CheckCircle2 size={14} className="text-success shrink-0" />
     case 'warning':
-      return <AlertCircle size={14} className="shrink-0 text-amber-500" />
+      return <AlertCircle size={14} className="text-warning shrink-0" />
     case 'error':
-      return <XCircle size={14} className="shrink-0 text-red-500" />
+      return <XCircle size={14} className="text-destructive shrink-0" />
   }
 }
 
 function SeverityBadge({ severity }: { severity: DesignSuggestion['severity'] }) {
   const classes: Record<DesignSuggestion['severity'], string> = {
-    important: 'bg-red-100 text-red-700',
-    suggestion: 'bg-amber-100 text-amber-700',
-    info: 'bg-blue-100 text-blue-700',
+    important: 'bg-destructive/10 text-destructive',
+    suggestion: 'bg-warning/10 text-warning',
+    info: 'bg-info/10 text-info',
   }
 
   return (

package/src/views/page-builder/SEOPanel.tsx

@@ -33,9 +33,9 @@ export interface BuilderSEOPanelProps {
 }
 
 function getScoreColor(score: number): string {
-  if (score >= 70) return 'text-green-500'
-  if (score >= 40) return 'text-amber-500'
-  return 'text-red-500'
+  if (score >= 70) return 'text-success'
+  if (score >= 40) return 'text-warning'
+  return 'text-destructive'
 }
 
 function getRingStrokeColor(score: number): string {
@@ -54,11 +54,11 @@ function getScoreLabel(score: number): string {
 function StatusIcon({ status }: { status: BuilderSEOCheck['status'] }) {
   switch (status) {
     case 'good':
-      return <CheckCircle2 size={14} className="shrink-0 text-green-500" />
+      return <CheckCircle2 size={14} className="text-success shrink-0" />
     case 'warning':
-      return <AlertCircle size={14} className="shrink-0 text-amber-500" />
+      return <AlertCircle size={14} className="text-warning shrink-0" />
     case 'error':
-      return <XCircle size={14} className="shrink-0 text-red-500" />
+      return <XCircle size={14} className="text-destructive shrink-0" />
   }
 }
 
@@ -109,15 +109,15 @@ function ScoreSummary({ checks }: { checks: BuilderSEOCheck[] }) {
   return (
     <div className="flex flex-col gap-1">
       <div className="flex items-center gap-1.5">
-        <CheckCircle2 size={12} className="text-green-500" />
+        <CheckCircle2 size={12} className="text-success" />
         <span className="text-muted-foreground text-xs">{passed} passed</span>
       </div>
       <div className="flex items-center gap-1.5">
-        <AlertCircle size={12} className="text-amber-500" />
+        <AlertCircle size={12} className="text-warning" />
         <span className="text-muted-foreground text-xs">{warnings} warnings</span>
       </div>
       <div className="flex items-center gap-1.5">
-        <XCircle size={12} className="text-red-500" />
+        <XCircle size={12} className="text-destructive" />
         <span className="text-muted-foreground text-xs">{errors} issues</span>
       </div>
     </div>
@@ -265,7 +265,7 @@ function BasicSEOFields({
         <div className="flex items-center justify-between">
           <label className="text-foreground text-xs font-medium">Meta Title</label>
           <span
-            className={`text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
+            className={`text-xs ${metaTitleLength > 60 ? 'text-destructive' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
           >
             {metaTitleLength}/60
           </span>
@@ -283,7 +283,7 @@ function BasicSEOFields({
         <div className="flex items-center justify-between">
           <label className="text-foreground text-xs font-medium">Meta Description</label>
           <span
-            className={`text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
+            className={`text-xs ${metaDescLength > 160 ? 'text-destructive' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
           >
             {metaDescLength}/160
           </span>
@@ -321,7 +321,7 @@ function SearchPreview({ pageSettings }: { pageSettings: PageSettings }) {
       <p className="text-muted-foreground mb-2 text-xs">Google Search Preview</p>
       <div className="flex flex-col gap-1">
         <p className="text-primary truncate text-sm">{title}</p>
-        <p className="truncate text-xs text-green-600">example.com/{slug}</p>
+        <p className="text-success truncate text-xs">example.com/{slug}</p>
         <p className="text-muted-foreground line-clamp-2 text-xs">{description}</p>
       </div>
     </div>

package/src/views/page-editor/EditorCanvas.tsx

@@ -85,7 +85,7 @@ export function EditorCanvas({
           >
             <div
               ref={surfaceRef}
-              className="border-border origin-top overflow-hidden rounded-xl border bg-white shadow-sm"
+              className="border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
               style={{
                 width: vp.width,
                 transform: `scale(${scale})`,

package/src/views/page-editor/EditorTopBar.tsx

@@ -72,9 +72,9 @@ const VIEWPORT_ICONS: Record<string, LucideIcon> = {
 }
 
 const STATUS_TEXT: Record<PageStatus, { label: string; className: string }> = {
-  DRAFT: { label: 'Draft', className: 'text-amber-600 dark:text-amber-400' },
+  DRAFT: { label: 'Draft', className: 'text-warning dark:text-amber-400' },
   PUBLISHED: { label: 'Published', className: 'text-emerald-600 dark:text-emerald-400' },
-  SCHEDULED: { label: 'Scheduled', className: 'text-amber-600 dark:text-amber-400' },
+  SCHEDULED: { label: 'Scheduled', className: 'text-warning dark:text-amber-400' },
   ARCHIVED: { label: 'Archived', className: 'text-muted-foreground' },
 }
 

package/src/views/page-editor/PagePreview.tsx

@@ -91,7 +91,7 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
 
       {/* The canvas is intentionally white regardless of the admin theme:
           it emulates the public page surface, not admin chrome. */}
-      <div className="flex-1 overflow-auto bg-white">
+      <div className="bg-card flex-1 overflow-auto">
         {visible.length === 0 ? (
           <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
             This page has no visible sections yet.

package/src/views/page-editor/SectionInspector.tsx

@@ -513,7 +513,7 @@ function BooleanField({
           }`}
         >
           <span
-            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            className={`bg-card inline-block h-4 w-4 transform rounded-full transition-transform ${
               value ? 'translate-x-4' : 'translate-x-0.5'
             }`}
           />

package/src/views/page-editor/SitePreviewFrame.tsx

@@ -70,7 +70,7 @@ export function SitePreviewFrame({
             src={src}
             title={title}
             onLoad={() => setLoaded(true)}
-            className="border-border rounded-xl border bg-white shadow-sm"
+            className="border-border bg-card rounded-xl border shadow-sm"
             style={{
               width: vp.width,
               height: frameHeight / scale,

package/src/views/page-editor/sections/ArticleBodySection.tsx

@@ -27,22 +27,22 @@ export function ArticleBodySection({
   return (
     <div className={`mx-auto px-6 ${wide ? 'max-w-4xl' : 'max-w-2xl'}`}>
       {showToc && (
-        <div className="mb-8 rounded-lg border border-zinc-200 bg-zinc-50 p-4">
-          <p className="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
+        <div className="border-border bg-muted mb-8 rounded-lg border p-4">
+          <p className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
             On this page
           </p>
-          <p className="mt-1 text-sm text-zinc-400">
+          <p className="text-muted-foreground mt-1 text-sm">
             A table of contents will be generated from the body headings.
           </p>
         </div>
       )}
       {html.trim() ? (
         <div
-          className="prose prose-zinc max-w-none text-base leading-relaxed text-zinc-700"
+          className="prose prose-zinc text-foreground max-w-none text-base leading-relaxed"
           dangerouslySetInnerHTML={{ __html: html }}
         />
       ) : (
-        <p className="text-base leading-relaxed text-zinc-400 italic">
+        <p className="text-muted-foreground text-base leading-relaxed italic">
           {source === 'field'
             ? "This will show the post's Body content."
             : 'Add body copy in the inspector.'}

package/src/views/page-editor/sections/AuthorBioSection.tsx

@@ -27,7 +27,7 @@ export function AuthorBioSection({
 
   return (
     <div className="mx-auto max-w-3xl px-6">
-      <div className="flex items-start gap-4 rounded-xl border border-zinc-200 bg-zinc-50 p-5">
+      <div className="border-border bg-muted flex items-start gap-4 rounded-xl border p-5">
         {showAvatar &&
           (avatarUrl ? (
             <img
@@ -36,20 +36,20 @@ export function AuthorBioSection({
               className="h-14 w-14 shrink-0 rounded-full object-cover"
             />
           ) : (
-            <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-violet-100 text-sm font-medium text-violet-700">
+            <span className="bg-brand/10 text-brand flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-sm font-medium">
               {initials || '?'}
             </span>
           ))}
         <div className="min-w-0">
           {heading && (
-            <p className="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
+            <p className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
               {heading}
             </p>
           )}
-          <p className="mt-0.5 text-base font-medium text-zinc-900">{name}</p>
-          <p className="mt-1 text-sm leading-relaxed text-zinc-600">{bio}</p>
+          <p className="text-foreground mt-0.5 text-base font-medium">{name}</p>
+          <p className="text-muted-foreground mt-1 text-sm leading-relaxed">{bio}</p>
           {showSocial && (
-            <div className="mt-2 flex gap-3 text-sm text-violet-600">
+            <div className="text-brand mt-2 flex gap-3 text-sm">
               <span>Twitter</span>
               <span>LinkedIn</span>
             </div>

package/src/views/page-editor/sections/ByTheNumbersSection.tsx

@@ -16,21 +16,21 @@ export function ByTheNumbersSection({ section }: { section: PageSection }) {
   return (
     <div className="mx-auto max-w-5xl px-6 text-center">
       {heading && (
-        <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
+        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
           {heading}
         </h2>
       )}
-      {body && <p className="mx-auto mt-4 max-w-2xl text-base text-zinc-600">{body}</p>}
+      {body && <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-base">{body}</p>}
       {stats.length > 0 && (
         <dl className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
           {stats.map((s, i) => (
             <div key={i}>
-              <dt className="text-4xl font-semibold tracking-tight text-violet-600">
+              <dt className="text-brand text-4xl font-semibold tracking-tight">
                 {String(s.value ?? '')}
               </dt>
-              <dd className="mt-2 text-sm font-medium text-zinc-700">{String(s.label ?? '')}</dd>
+              <dd className="text-foreground mt-2 text-sm font-medium">{String(s.label ?? '')}</dd>
               {s.description ? (
-                <dd className="mt-1 text-xs text-zinc-500">{String(s.description)}</dd>
+                <dd className="text-muted-foreground mt-1 text-xs">{String(s.description)}</dd>
               ) : null}
             </div>
           ))}

package/src/views/page-editor/sections/CtaBannerSection.tsx

@@ -12,7 +12,7 @@ export function CtaBannerSection({ section }: { section: PageSection }) {
       <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">{heading}</h2>
       {body && (
         <p
-          className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-violet-100' : 'text-zinc-600'}`}
+          className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
         >
           {body}
         </p>

package/src/views/page-editor/sections/EmbedSection.tsx

@@ -0,0 +1,43 @@
+import { PlayCircle } from 'lucide-react'
+import { parseEmbed, EMBED_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+const RATIO_CLASS: Record<string, string> = {
+  '16:9': 'aspect-video',
+  '4:3': 'aspect-[4/3]',
+  '1:1': 'aspect-square',
+  '9:16': 'aspect-[9/16]',
+}
+
+/**
+ * Canvas body for the `embed` (video) section. Mirrors the public renderer's
+ * reserved aspect-ratio box, but shows a lightweight provider placeholder
+ * instead of loading the live external iframe inside the editor.
+ */
+export function EmbedSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const parsed = parseEmbed(str(c, 'url'))
+  const ratioClass = RATIO_CLASS[str(c, 'ratio', '16:9')] ?? RATIO_CLASS['16:9']
+  const title = str(c, 'title')
+  const caption = str(c, 'caption')
+
+  return (
+    <figure className="mx-auto max-w-3xl px-6">
+      <div
+        className={`bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl ${ratioClass}`}
+      >
+        <PlayCircle className="h-10 w-10" aria-hidden />
+        <p className="text-foreground text-sm font-medium">
+          {parsed ? `${EMBED_PROVIDER_LABEL[parsed.provider]} video` : 'No valid video URL'}
+        </p>
+        {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
+      </div>
+      {caption && (
+        <figcaption className="text-muted-foreground mt-2 text-center text-sm">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}

package/src/views/page-editor/sections/FeatureHighlightSection.tsx

@@ -14,12 +14,14 @@ export function FeatureHighlightSection({ section }: { section: PageSection }) {
   const text = (
     <div className="flex-1">
       {label && (
-        <span className="mb-3 inline-block rounded bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
+        <span className="bg-brand mb-3 inline-block rounded px-2 py-0.5 text-xs font-medium text-white">
           {label}
         </span>
       )}
-      <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">{heading}</h2>
-      {body && <p className="mt-4 text-base leading-relaxed text-zinc-600">{body}</p>}
+      <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
+        {heading}
+      </h2>
+      {body && <p className="text-muted-foreground mt-4 text-base leading-relaxed">{body}</p>}
       <div className="mt-6">
         <PreviewButton label={str(c, 'buttonLabel')} href={str(c, 'buttonUrl')} tone="primary" />
       </div>
@@ -36,8 +38,8 @@ export function FeatureHighlightSection({ section }: { section: PageSection }) {
           className="aspect-[4/3] w-full rounded-xl object-cover"
         />
       ) : (
-        <div className="flex aspect-[4/3] w-full items-center justify-center rounded-xl bg-violet-50">
-          <ImageIcon className="h-10 w-10 text-violet-300" aria-hidden />
+        <div className="bg-brand/10 flex aspect-[4/3] w-full items-center justify-center rounded-xl">
+          <ImageIcon className="text-brand h-10 w-10" aria-hidden />
         </div>
       )}
     </div>

package/src/views/page-editor/sections/GallerySection.tsx

@@ -25,19 +25,21 @@ export function GallerySection({ section }: { section: PageSection }) {
   return (
     <div className="mx-auto max-w-5xl px-6">
       {heading && (
-        <h2 className="mb-6 text-2xl font-semibold tracking-tight text-zinc-900">{heading}</h2>
+        <h2 className="text-foreground mb-6 text-2xl font-semibold tracking-tight">{heading}</h2>
       )}
       {withUrl.length > 0 ? (
         <div className={`grid grid-cols-1 gap-3 ${cols}`}>
           {withUrl.map((img, i) => (
-            <figure key={i} className="overflow-hidden rounded-lg border border-zinc-200">
+            <figure key={i} className="border-border overflow-hidden rounded-lg border">
               <img
                 src={img.url}
                 alt={img.alt ?? ''}
                 className="aspect-square w-full object-cover"
               />
               {img.caption && (
-                <figcaption className="px-2 py-1.5 text-xs text-zinc-500">{img.caption}</figcaption>
+                <figcaption className="text-muted-foreground px-2 py-1.5 text-xs">
+                  {img.caption}
+                </figcaption>
               )}
             </figure>
           ))}
@@ -45,7 +47,7 @@ export function GallerySection({ section }: { section: PageSection }) {
       ) : (
         <div className={`grid grid-cols-1 gap-3 ${cols}`}>
           {Array.from({ length: columns }, (_, i) => (
-            <div key={i} className="aspect-square rounded-lg bg-zinc-100" aria-hidden />
+            <div key={i} className="bg-muted aspect-square rounded-lg" aria-hidden />
           ))}
         </div>
       )}

package/src/views/page-editor/sections/HeroBannerSection.tsx

@@ -12,7 +12,7 @@ export function HeroBannerSection({ section }: { section: PageSection }) {
     <div className="mx-auto max-w-3xl px-6 text-center">
       {eyebrow && (
         <p
-          className={`mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-violet-200' : 'text-violet-600'}`}
+          className={`mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-brand-foreground/80' : 'text-brand'}`}
         >
           {eyebrow}
         </p>
@@ -22,7 +22,7 @@ export function HeroBannerSection({ section }: { section: PageSection }) {
       </h1>
       {body && (
         <p
-          className={`mx-auto mt-5 max-w-2xl text-base sm:text-lg ${dark ? 'text-violet-100' : 'text-zinc-600'}`}
+          className={`mx-auto mt-5 max-w-2xl text-base sm:text-lg ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
         >
           {body}
         </p>

package/src/views/page-editor/sections/MissionSection.tsx

@@ -12,11 +12,13 @@ export function MissionSection({ section }: { section: PageSection }) {
   return (
     <div className={`max-w-3xl px-6 ${align}`}>
       {heading && (
-        <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
+        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
           {heading}
         </h2>
       )}
-      {body && <p className="mt-4 text-base leading-relaxed text-zinc-600 sm:text-lg">{body}</p>}
+      {body && (
+        <p className="text-muted-foreground mt-4 text-base leading-relaxed sm:text-lg">{body}</p>
+      )}
     </div>
   )
 }