// ==========================================================================
// Shared surface tokens for the redesigned bl-* modal cards:
//   .bl-utm   — per-link UTM builder      (_utm-builder-redesign.scss + Pro copy)
//   .bl-utmt  — UTM template modal        (_utm-template-modal-redesign.scss)
//   .bl-clp   — customize link preview    (_customize-link-preview-redesign.scss)
//
// Those sheets only read these custom properties, so light/dark lives here.
// Pro ships its own copy of the .bl-utm rules but not of these tokens — the
// free stylesheet always loads on the same screens, so Pro markup inherits them.
// ==========================================================================
.bl-utm,
.bl-utmt,
.bl-clp,
// Legacy Pro (v2.8.0) markup — inherits the same tokens so its compatibility
// styles (_utm_builder.scss / _customize-link-preview-redesign.scss) theme
// identically in light/dark.
.btl-modal-utm-builder,
.btl-modal-customize-link-preview-container,
.link-modal-options__dynamic-redirects {
	--bl-m-surface: #ffffff;
	--bl-m-surface-2: #f7f8fa;
	--bl-m-border: #e6e8ee;
	--bl-m-text: #1a2233;
	--bl-m-muted: #6b7280;
	--bl-m-input-bg: #ffffff;
	--bl-m-input-border: #e6e8ee;
	--bl-m-placeholder: #9aa1ad;
	--bl-m-accent: #2f6bff;
	--bl-m-accent-hover: #1f57e6;
	--bl-m-accent-soft: rgba(47, 107, 255, 0.1);
	--bl-m-accent-border: rgba(47, 107, 255, 0.5);
	--bl-m-accent-ring: rgba(47, 107, 255, 0.12);
	--bl-m-accent-shadow: rgba(47, 107, 255, 0.28);
	--bl-m-danger: #ef4444;
	--bl-m-danger-soft: rgba(239, 68, 68, 0.08);
	--bl-m-danger-border: rgba(239, 68, 68, 0.45);
	--bl-m-danger-ring: rgba(239, 68, 68, 0.12);
	--bl-m-scroll: rgba(107, 114, 128, 0.3);
	--bl-m-shadow: rgba(16, 24, 40, 0.12);
}

body.betterlinks-dark-mode {
	.bl-utm,
	.bl-utmt,
	.bl-clp,
	.btl-modal-utm-builder,
	.btl-modal-customize-link-preview-container,
	.link-modal-options__dynamic-redirects {
		--bl-m-surface: #252f47;
		--bl-m-surface-2: #2c3650;
		--bl-m-border: #36405a;
		--bl-m-text: #ffffff;
		--bl-m-muted: #c3cce0;
		--bl-m-input-bg: #36405a;
		--bl-m-input-border: #414d6b;
		--bl-m-placeholder: #8d98b3;
		--bl-m-accent: #4f83ff;
		--bl-m-accent-hover: #6c96ff;
		--bl-m-accent-soft: rgba(79, 131, 255, 0.18);
		--bl-m-accent-border: rgba(79, 131, 255, 0.6);
		--bl-m-accent-ring: rgba(79, 131, 255, 0.25);
		--bl-m-accent-shadow: rgba(0, 0, 0, 0.4);
		--bl-m-danger: #f87171;
		--bl-m-danger-soft: rgba(248, 113, 113, 0.14);
		--bl-m-danger-border: rgba(248, 113, 113, 0.5);
		--bl-m-danger-ring: rgba(248, 113, 113, 0.2);
		--bl-m-scroll: rgba(195, 204, 224, 0.3);
		--bl-m-shadow: rgba(0, 0, 0, 0.45);
	}

	// Each redesigned card forces a white modal shell in light mode; repaint it
	// here. Literal value — the tokens above live on the card, not on the shell.
	.ReactModal__Content:has(.bl-utm),
	.ReactModal__Content:has(.bl-utmt),
	.ReactModal__Content:has(.bl-clp) {
		background: #252f47 !important;
	}
}