/**
 * توکن‌های طراحی نبولار — تنها جایی که رنگ و شعاع و فاصله تعریف می‌شود.
 *
 * سراسری بارگذاری می‌شود (نه فقط روی صفحه‌ی محصول) چون اجزای نبولار
 * در هدر، حساب کاربری و صفحه‌ی محصول پخش‌اند و همه از همین می‌خوانند.
 *
 * بقیه‌ی فایل‌ها این‌ها را با fallback می‌خوانند، مثلاً:
 *   --nb-acc-fg: var(--nb-fg, #e7e9ee);
 * پس اگر این فایل بارگذاری نشود هم چیزی نمی‌شکند.
 *
 * برای عوض‌کردن ظاهرِ کل سایت، فقط همین فایل عوض می‌شود.
 */

:root {

	/* ---------- متن ----------
	   قالب Hello Elementor روی این سایت color:#333 می‌دهد و پس‌زمینه
	   تیره است؛ کنتراستِ متنِ به‌ارث‌رسیده ۱٫۴۳:۱ می‌شد که خوانده
	   نمی‌شد. این دو مقدار اندازه‌گیری‌شده‌اند: ۱۴٫۹ و ۷٫۰. */
	--nb-fg: #e7e9ee;
	--nb-muted: #98a2b3;

	/* ---------- سطح ---------- */
	--nb-surface: rgba(255, 255, 255, .03);
	--nb-surface-2: rgba(255, 255, 255, .05);
	--nb-surface-3: rgba(255, 255, 255, .08);
	--nb-line: rgba(255, 255, 255, .08);
	--nb-line-soft: rgba(255, 255, 255, .06);

	/* ---------- شعاع ----------
	   عمداً فقط دو مقدار. قبلاً شش مقدار مختلف (۹ تا ۱۸) در کد بود و
	   همان بی‌نظمی بخشی از حسِ «ماشینی» را می‌ساخت. */
	--nb-radius: 16px;
	--nb-radius-sm: 10px;
	--nb-radius-pill: 999px;

	/* ---------- فاصله ---------- */
	--nb-gap: 16px;
	--nb-gap-sm: 9px;
	--nb-pad: 16px;

	/* ---------- رنگ اصلی ----------
	   از متغیر خود ووکامرس می‌آید تا اگر رنگ فروشگاه عوض شد، دنبالش
	   برود. */
	--nb-primary: var(--wc-primary, #720eec);
	--nb-on-primary: #fff;

	/* ---------- وضعیت سفارش ----------
	   نام‌ها عمداً با متغیرهای داخلی افزونه (--nb-st-*) فرق دارند:
	   افزونه می‌نویسد `--nb-st-completed: var(--nb-status-completed, …)`
	   و اگر هم‌نام بودند، ارجاع حلقوی می‌شد و CSS کلاً بی‌اثر. */
	--nb-status-completed: #22c55e;
	--nb-status-processing: #38bdf8;
	--nb-status-pending: #fbbf24;
	--nb-status-on-hold: #a78bfa;
	--nb-status-cancelled: #f87171;
	--nb-status-failed: #ef4444;
	--nb-status-refunded: #94a3b8;

	/* ---------- اندازه‌ی لمس ----------
	   کمتر از این روی گوشی قابل زدن نیست. */
	--nb-touch: 44px;
}

/* کاربری که در سیستم‌عاملش «کاهش حرکت» را روشن کرده نباید انیمیشن
   ببیند. */
@media (prefers-reduced-motion: reduce) {

	[class*="nb-"] {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}