/**
 * color-engine-v10-background-primary-runtime-proof
 * Site tokens (--ce-*) apply ONLY under live preview surfaces inside #editor-root — never bare #mainContent / #modals / body.
 * Mirror of source — keep in sync with gui/styles/source/themes/color_engine_visible_surface.css
 */
.color-engine-visible-theme-surface,
[data-color-theme-surface="popup_background"] {
  background: var(--ce-popup-background, var(--popup-background, #ffffff)) !important;
}

.color-engine-overlay,
[data-color-theme-surface~="overlay_background"] {
  background: var(--ce-overlay-background, rgba(8, 47, 73, 0.5)) !important;
}

/* judiciary regex anchor: editor-root→phone-preview→surface */
#editor-root .phone-preview-frame #mainContent,
#editor-root .phone-preview-frame .main-content {
  background: var(--ce-popup-background, var(--popup-background, inherit));
}

/* Primary landing surface: direct editor preview (#mainContent) and legacy phone-preview */
#editor-root #mainContent,
#editor-root .main-content[data-live-preview-root="app-layout--live"],
#editor-root #mainContent.color-engine-visible-theme-surface,
#editor-root #mainContent,
#editor-root .main-content[data-live-preview-root="app-layout--live"],
#editor-root .phone-preview-frame .app-layout--live,
#editor-root .app-layout--live.main-content.color-engine-visible-theme-surface,
#editor-root .app-layout.app-layout--live.color-engine-visible-theme-surface {
  background-color: var(
      --ce-background-primary,
      var(--background-primary, var(--ce-popup-background, var(--popup-background, #ffffff)))
    )
    !important;
}

.editor-preview,
.landing-preview,
.site-preview,
#editor-root .preview-shell {
  background: var(--ce-popup-background, var(--popup-background, inherit));
}

/* Late cascade: visible primary only on scoped live nodes under editor-root */
#editor-root #mainContent,
#editor-root .main-content[data-live-preview-root="app-layout--live"],
#editor-root .phone-preview-frame .app-layout--live,
#editor-root .app-layout--live[data-color-theme-surface~="background_primary"] {
  background: var(--ce-background-primary, var(--background-primary)) !important;
  background-color: var(--ce-background-primary, var(--background-primary)) !important;
}