/**
 * توکن‌های ظاهریِ مشترک.
 *
 * تنها منبعِ حقیقت برای پیش‌تنظیم‌های ظاهر. هم ویجتِ سایت و هم
 * پیش‌نمایشِ صفحه‌ی مدیریت همین فایل را بار می‌کنند، پس مقدارِ تمِ
 * تیره فقط یک جا تعریف شده و امکان واگراییِ دو نسخه وجود ندارد.
 *
 * ### چه چیزی اینجا هست
 *
 * فقط **متغیر**: رنگ، سطح، متن، خط، گوشه.
 *
 * ### چه چیزی اینجا نیست
 *
 * هیچ قاعده‌ی چیدمانی، موقعیتی یا مؤلفه‌ای. `position: fixed`،
 * عرضِ پنجره و اندازه‌ی دکمه در `widget.css` می‌مانند — اگر این‌ها
 * وارد صفحه‌ی مدیریت می‌شدند، ویجت روی کل صفحه‌ی wp-admin می‌افتاد.
 *
 * ### چرا دو انتخابگر برای هر بلوک
 *
 * `#wpsd-root` ریشه‌ی ویجت در سایت است و `.wpsd-pv-stage` ریشه‌ی
 * پیش‌نمایش در پنل. هر دو همان صفت‌های `data-*` را می‌گیرند، پس با
 * یک تعریف هر دو تغذیه می‌شوند.
 *
 * @package WPSupportDesk
 */

/* ==========================================================
   پایه — تمِ روشن
   ========================================================== */

#wpsd-root,
.wpsd-pv-stage {
	/* رنگ برند. جاوااسکریپت مقدارِ انتخابیِ مدیر را به‌صورت متغیر
	   درون‌خطی روی همین عنصر می‌نویسد و این مقدار را کنار می‌زند. */
	--wpsd-primary: #1568f6;
	--wpsd-primary-hover: color-mix(in srgb, var(--wpsd-primary) 88%, #000000);
	--wpsd-primary-soft: color-mix(in srgb, var(--wpsd-primary) 12%, #ffffff);
	--wpsd-primary-disabled: color-mix(in srgb, var(--wpsd-primary) 42%, #ffffff);
	--wpsd-focus-ring: color-mix(in srgb, var(--wpsd-primary) 18%, transparent);

	/* سطوح */
	--wpsd-bg: #ffffff;
	--wpsd-canvas: #fcfcfd;
	--wpsd-surface: #f5f6f8;
	--wpsd-surface-subtle: #fafbfc;

	/* متن */
	--wpsd-text: #252a34;
	--wpsd-text-secondary: #667085;
	--wpsd-text-muted: #98a2b3;

	/* خط */
	--wpsd-border: #e6e8ec;

	/* وضعیت */
	--wpsd-success: #22c55e;
	--wpsd-warning: #f59e0b;
	--wpsd-danger: #ef4444;
	--wpsd-warning-surface: #fff8eb;
	--wpsd-warning-text: #9a6700;
	--wpsd-danger-surface: color-mix(in srgb, var(--wpsd-danger) 8%, #ffffff);

	/* حباب پشتیبان */
	--wpsd-bubble-agent: var(--wpsd-surface);
	--wpsd-bubble-agent-text: var(--wpsd-text);

	/* گوشه — پیش‌تنظیم «معمولی» */
	--wpsd-radius-sm: 8px;
	--wpsd-radius-md: 12px;
	--wpsd-radius-lg: 16px;
	--wpsd-radius-xl: 20px;
	--wpsd-radius-full: 999px;

	/* سایه */
	--wpsd-shadow-window: 0 16px 48px rgba(16, 24, 40, 0.18);
	--wpsd-shadow-launcher: 0 8px 24px rgba(16, 24, 40, 0.18);
}

/* ==========================================================
   تم: ملایم
   ==========================================================
   همان پالت روشن با سطوحِ گرم‌تر و مرزهای نرم‌تر. */

#wpsd-root[data-theme='soft'],
.wpsd-pv-stage[data-theme='soft'] {
	--wpsd-bg: #fdfdfc;
	--wpsd-canvas: #faf9f7;
	--wpsd-surface: #f2f0ec;
	--wpsd-surface-subtle: #f7f6f3;
	--wpsd-border: #e8e4dd;
}

/* ==========================================================
   تم: تیره
   ==========================================================

   تیره‌سازی واقعی با توکنِ اختصاصی، نه `filter: invert`؛
   وارونه‌سازی رنگ برند و تصاویر را هم خراب می‌کند.

   کنتراست‌ها سنجیده شده‌اند و همه از حد AA بالاترند.

   حبابِ کاربر همچنان رنگ برند است تا هویت محصول در تم تیره هم
   شناخته بماند. */

#wpsd-root[data-theme='dark'],
.wpsd-pv-stage[data-theme='dark'] {
	--wpsd-bg: #16181d;
	--wpsd-canvas: #1a1d23;
	--wpsd-surface: #23272f;
	--wpsd-surface-subtle: #1e2229;

	--wpsd-text: #f2f4f7;
	--wpsd-text-secondary: #a6aebc;
	--wpsd-text-muted: #7c8595;

	--wpsd-border: #2f343d;

	--wpsd-bubble-agent: #23272f;
	--wpsd-bubble-agent-text: #f2f4f7;

	/* سطحِ اعلان‌ها هم تیره می‌شود، وگرنه کارتِ کرم‌رنگِ روشن وسط
	   گفتگوی تیره مثل لکه دیده می‌شود. */
	--wpsd-warning-surface: #2a2416;
	--wpsd-warning-text: #e5b567;
	--wpsd-danger-surface: #2c1c1f;

	--wpsd-primary-soft: color-mix(in srgb, var(--wpsd-primary) 22%, #16181d);
	--wpsd-shadow-window: 0 16px 48px rgba(0, 0, 0, 0.5);
	--wpsd-shadow-launcher: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ==========================================================
   گردی گوشه‌ها
   ==========================================================
   فقط مقیاسِ توکن جابه‌جا می‌شود تا همه‌ی مؤلفه‌ها هماهنگ بمانند؛
   هیچ مؤلفه‌ای گوشه‌ی مستقل نمی‌گیرد. */

#wpsd-root[data-radius='soft'],
.wpsd-pv-stage[data-radius='soft'] {
	--wpsd-radius-sm: 6px;
	--wpsd-radius-md: 8px;
	--wpsd-radius-lg: 12px;
	--wpsd-radius-xl: 14px;
}

#wpsd-root[data-radius='extra'],
.wpsd-pv-stage[data-radius='extra'] {
	--wpsd-radius-sm: 10px;
	--wpsd-radius-md: 14px;
	--wpsd-radius-lg: 20px;
	--wpsd-radius-xl: 26px;
}