frontend/src/components/react/Search.tsx

@@ -166,7 +166,7 @@ export default function Search() {
             aria-hidden="true"
           />
           <div
-            className="relative w-full max-w-xl bg-[var(--rosewater)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
+            className="relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
             style={{
               borderRadius: 2,
               boxShadow: '0 30px 60px -20px rgba(20,16,12,0.55), 0 8px 20px -8px rgba(20,16,12,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',

frontend/src/components/react/admin/Editor.tsx

@@ -18,7 +18,7 @@ interface Props {
 
 const salonTheme = EditorView.theme({
   '&': {
-    backgroundColor: 'var(--rosewater)',
+    backgroundColor: 'var(--base)',
     color: 'var(--text)',
     border: '1px solid var(--surface2)',
     borderRadius: '2px',
@@ -477,7 +477,7 @@ export default function Editor({ editSlug }: Props) {
             {/* Autocomplete dropdown */}
             {showAutocomplete && autocompleteAssets.length > 0 && (
               <div
-                className="absolute z-50 bg-[var(--rosewater)] border border-[var(--surface2)] shadow-2xl max-h-64 overflow-y-auto w-80"
+                className="absolute z-50 bg-[var(--base)] border border-[var(--surface2)] shadow-2xl max-h-64 overflow-y-auto w-80"
                 style={{ top: autocompletePos.top, left: autocompletePos.left, borderRadius: 2 }}
                 onClick={e => e.stopPropagation()}
               >
@@ -510,7 +510,7 @@ export default function Editor({ editSlug }: Props) {
           {/* Live Preview — stretches to match editor height on desktop, full-pane via tabs on mobile */}
           {showPreview && (
             <div
-              className={`border border-[var(--surface2)] bg-[var(--rosewater)] overflow-y-auto flex-col md:flex md:min-h-0 ${
+              className={`border border-[var(--surface2)] bg-[var(--base)] overflow-y-auto flex-col md:flex md:min-h-0 ${
                 mobileView === 'preview' ? 'flex min-h-[60vh]' : 'hidden'
               }`}
               style={{ borderRadius: 2 }}