/*
 * Prompt Manager Pro — Design Tokens (لایه پایه سیستم تطبیق با قالب)
 *
 * این فایل «منبع واحد حقیقت» برای تمام مقادیر بصری پلاگین است.
 * مقادیر پیش‌فرض هر متغیر، مقادیر امن و خنثی (Fallback) هستند.
 * این مقادیر در دو مرحله بازنویسی می‌شوند:
 *   ۱) سمت سرور (PHP) - بلوک <style id="pmp-theme-tokens"> در <head> که پیش از
 *      این فایل بارگذاری می‌شود و بر اساس تحلیل قالب فعال، این متغیرها را
 *      در :root بازنویسی می‌کند (به همین دلیل FOUC رخ نمی‌دهد).
 *   ۲) سمت کاربر (JS) - فایل theme-adapter.js پس از رندر صفحه، برای دقت
 *      بیشتر مقادیر را با نمونه‌برداری از عناصر واقعی قالب اصلاح می‌کند.
 *
 * توسعه‌دهندگان می‌توانند این مقادیر را با فیلتر pmp_theme_tokens (PHP)
 * یا رویداد pmp:theme-tokens-updated (JS) نیز بازنویسی کنند.
 */

:root {
	/* ---- رنگ‌ها ---- */
	--pmp-color-primary: #4f46e5;
	--pmp-color-primary-hover: #4338ca;
	--pmp-color-on-primary: #ffffff;

	--pmp-color-text: #1f2937;
	--pmp-color-muted: #6b7280;
	--pmp-color-border: #e5e7eb;

	--pmp-color-surface: #ffffff;
	--pmp-color-surface-soft: #f9fafb;

	--pmp-color-success-bg: #dcfce7;
	--pmp-color-success-text: #166534;
	--pmp-color-error-bg: #fee2e2;
	--pmp-color-error-text: #991b1b;
	--pmp-color-warning-bg: #fef9c3;
	--pmp-color-warning-text: #854d0e;

	/* ---- تایپوگرافی ---- */
	--pmp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Vazirmatn", "IRANSans", Arial, sans-serif;
	--pmp-font-heading: var(--pmp-font-body);
	--pmp-font-size-base: 14px;

	/* ---- فاصله‌گذاری (بر اساس واحد پایه قالب، پیش‌فرض ۴ پیکسل) ---- */
	--pmp-space-unit: 4px;
	--pmp-space-xs: calc(var(--pmp-space-unit) * 2);   /* 8px  */
	--pmp-space-sm: calc(var(--pmp-space-unit) * 3);   /* 12px */
	--pmp-space-md: calc(var(--pmp-space-unit) * 5);   /* 20px */
	--pmp-space-lg: calc(var(--pmp-space-unit) * 8);   /* 32px */

	/* ---- گردی لبه‌ها ---- */
	--pmp-radius-sm: 6px;
	--pmp-radius-md: 12px;
	--pmp-radius-lg: 18px;
	--pmp-radius-pill: 999px;

	/* ---- سایه‌ها ---- */
	--pmp-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
	--pmp-shadow-md: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);

	/* ---- دکمه: سبک پیش‌فرض (در صورت عدم تشخیص) ---- */
	--pmp-btn-radius: var(--pmp-radius-sm);
	--pmp-btn-border-width: 1px;

	/* ---- سرعت انیمیشن (برای احترام به prefers-reduced-motion در JS) ---- */
	--pmp-transition-fast: 0.15s ease;
	--pmp-transition-base: 0.2s ease;
}

/* ---------------------------------------------------
 * حالت تیره: هم بر اساس ترجیح سیستم‌عامل (فولبک نهایی)
 * و هم بر اساس data-pmp-theme="dark" که توسط theme-adapter.js
 * پس از تشخیص واقعی حالت قالب فعال، روی <html> تنظیم می‌شود.
 * --------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-pmp-theme="light"]) {
		--pmp-color-text: #f3f4f6;
		--pmp-color-muted: #9ca3af;
		--pmp-color-border: #374151;
		--pmp-color-surface: #1f2937;
		--pmp-color-surface-soft: #111827;
	}
}

html[data-pmp-theme="dark"] {
	--pmp-color-text: #f3f4f6;
	--pmp-color-muted: #9ca3af;
	--pmp-color-border: #374151;
	--pmp-color-surface: #1f2937;
	--pmp-color-surface-soft: #111827;
}

html[data-pmp-theme="light"] {
	--pmp-color-text: #1f2937;
	--pmp-color-muted: #6b7280;
	--pmp-color-border: #e5e7eb;
	--pmp-color-surface: #ffffff;
	--pmp-color-surface-soft: #f9fafb;
}

/* ---------------------------------------------------
 * سبک دکمه‌های تشخیص داده‌شده از قالب (توسط theme-adapter.js تنظیم می‌شود)
 * پیش‌فرض: filled (توپر) — رایج‌ترین سبک در اکثر قالب‌ها
 * --------------------------------------------------- */
html[data-pmp-btn-style="outlined"] .pmp-btn-primary-style {
	background: transparent;
	color: var(--pmp-color-primary);
	border: var(--pmp-btn-border-width) solid var(--pmp-color-primary);
}

html[data-pmp-btn-style="outlined"] .pmp-btn-primary-style:hover {
	background: var(--pmp-color-primary);
	color: var(--pmp-color-on-primary);
}

html[data-pmp-btn-style="ghost"] .pmp-btn-primary-style {
	background: transparent;
	color: var(--pmp-color-primary);
	border: none;
}

html[data-pmp-btn-style="ghost"] .pmp-btn-primary-style:hover {
	background: var(--pmp-color-surface-soft);
}

/* ---------------------------------------------------
 * CSS Containment برای جلوگیری از نشت استایل به/از قالب و صفحه‌سازها
 * و بهبود عملکرد رندر (مرزبندی مستقل layout/style)
 * --------------------------------------------------- */
.pmp-container,
.pmp-admin-wrap,
.pmp-modal,
.pmp-uploader {
	contain: layout style;
}
