/**
 * WC EU Withdrawal — design tokens.
 *
 * Every surface (wizard, My Account, admin, e-mail, PDF) consumes these custom
 * properties. Override any token from a theme by redefining it on `.wceuw`
 * (scoped) or `:root` (global), via the `wceuw_design_tokens` PHP filter, or via
 * the plugin settings (accent colour, radius preset).
 */
.wceuw {
	/* WP Opieka brand accent (default). Override per shop via the accent-colour
	   setting, the `wceuw_design_tokens` filter, or by redefining in a theme. */
	--wceuw-color-accent: #f9741c;
	--wceuw-color-accent-hover: #e25f0a;
	--wceuw-color-accent-contrast: #ffffff;
	--wceuw-color-bg: transparent;
	--wceuw-color-surface: #ffffff;
	--wceuw-color-surface-alt: #f6f7f9;
	--wceuw-color-border: #e2e4e7;
	--wceuw-color-text: #1e1e1e;
	--wceuw-color-muted: #6b7280;

	--wceuw-color-success: #15803d;
	--wceuw-color-success-bg: #f0fdf4;
	--wceuw-color-danger: #b91c1c;
	--wceuw-color-danger-bg: #fef2f2;
	--wceuw-color-warning: #b45309;
	--wceuw-color-warning-bg: #fffbeb;
	--wceuw-color-info: #1d4ed8;
	--wceuw-color-info-bg: #eff6ff;

	--wceuw-space-1: 4px;
	--wceuw-space-2: 8px;
	--wceuw-space-3: 12px;
	--wceuw-space-4: 16px;
	--wceuw-space-5: 24px;
	--wceuw-space-6: 32px;

	--wceuw-radius-sm: 6px;
	--wceuw-radius-md: 10px;
	--wceuw-radius-lg: 16px;
	--wceuw-radius-pill: 999px;

	--wceuw-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	--wceuw-shadow-md: 0 4px 12px rgba( 0, 0, 0, 0.08 );

	--wceuw-font-size-sm: 0.875rem;
	--wceuw-font-size-base: 1rem;
	--wceuw-font-size-lg: 1.125rem;
	--wceuw-font-size-xl: 1.5rem;
	--wceuw-line-height: 1.5;

	--wceuw-focus-ring: 0 0 0 3px rgba( 249, 116, 28, 0.35 );
	--wceuw-transition: 0.18s ease;
}

@supports ( color: color-mix( in srgb, red, blue ) ) {
	.wceuw {
		--wceuw-focus-ring: 0 0 0 3px color-mix( in srgb, var( --wceuw-color-accent ) 35%, transparent );
		--wceuw-color-accent-hover: color-mix( in srgb, var( --wceuw-color-accent ) 85%, #000 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wceuw *,
	.wceuw *::before,
	.wceuw *::after {
		transition: none !important;
		animation: none !important;
	}
}
