/**
 * Anyfor mist-silver surface system.
 *
 * Canvas: large page/section backgrounds.
 * Surface: cards, forms and dialogs remain white in the parent theme.
 */
:root {
	--anyfor-canvas: #f3f5f7;
	--anyfor-canvas-soft: #f7f8fa;
	--anyfor-surface: #ffffff;
	--anyfor-surface-hover: #e9edf1;
	--anyfor-surface-border: #e1e6ea;
	--anyfor-text-primary: #1f2933;
	--anyfor-text-secondary: #667085;
}

html,
html body:not(.wp-admin) {
	background-color: var(--anyfor-canvas);
}

body:not(.elementor-editor-active) main.workreap-main,
body:not(.elementor-editor-active) main.workreap-main > .elementor,
body:not(.elementor-editor-active) .wr-mainwrapper,
body:not(.elementor-editor-active) .wr-main-section {
	background-color: var(--anyfor-canvas);
}

/*
 * The companion script adds this class only to pure-white, image-free,
 * top-level Elementor sections inside the main page content. Header, footer,
 * menus, coloured sections and white cards are deliberately excluded.
 */
body:not(.elementor-editor-active) main.workreap-main > .elementor > .anyfor-canvas-section {
	background-color: var(--anyfor-canvas) !important;
}

/* Keep the custom dashboards on the same canvas without changing their cards. */
body.anyfor-admin-dashboard-v2,
body.anyfor-admin-dashboard-v2 .wr-mainwrapper,
body.anyfor-admin-dashboard-v2 .wr-subwrapper,
body.anyfor-admin-dashboard-v2 .wr-subwrapper .wr-main,
body.anyfor-freelancer-dashboard-v2,
body.anyfor-freelancer-dashboard-v2 .wr-main,
body.anyfor-freelancer-dashboard-v2 .wr-main-section {
	background-color: var(--anyfor-canvas);
}

/* A subtle border reads more cleanly against the new canvas. */
body:not(.elementor-editor-active) :is(
	.wr-project-card,
	.wr-freelancer-card,
	.wr-service-card,
	.wr-dbholder,
	.wr-box,
	.wr-card
) {
	border-color: var(--anyfor-surface-border);
}

@media (prefers-reduced-motion: no-preference) {
	body:not(.elementor-editor-active) main.workreap-main > .elementor > .anyfor-canvas-section {
		transition: background-color .2s ease;
	}
}