/**
 * Design System v2 — Spacing & Grid (نسخه 1.3.0)
 *
 * سیستم ۸px. متغیرهای فاصله/شعاعِ قدیمی (--clinic-spacing-*، --clinic-border-radius،
 * --clinic-radius-pill) دست‌نخورده می‌مانند؛ این فایل فقط مقیاس جدید را اضافه می‌کند.
 * کلاس‌های کمکی فقط روی صفحات پلاگین بارگذاری می‌شوند (تداخل سراسری ندارند).
 *
 * @package Clinic_Manager
 */

:root {
	/* مقیاس ۸px */
	--spacing-0: 0;
	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-7: 28px;
	--spacing-8: 32px;
	--spacing-9: 36px;
	--spacing-10: 40px;
	--spacing-11: 44px;
	--spacing-12: 48px;
	--spacing-14: 56px;
	--spacing-16: 64px;
	--spacing-20: 80px;
	--spacing-24: 96px;

	/* شعاع گوشه */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 20px;
	--radius-full: var(--clinic-radius-pill, 999px); /* STEP 223-B: تک‌منبع pill */
}

/* ابزارهای فاصله — محدود به کانتینر پلاگین تا با صفحه/قالب تداخل نکنند */
.clinic-wrap .m-0 { margin: var(--spacing-0); }
.clinic-wrap .m-1 { margin: var(--spacing-1); }
.clinic-wrap .m-2 { margin: var(--spacing-2); }
.clinic-wrap .m-3 { margin: var(--spacing-3); }
.clinic-wrap .m-4 { margin: var(--spacing-4); }
.clinic-wrap .m-6 { margin: var(--spacing-6); }
.clinic-wrap .m-8 { margin: var(--spacing-8); }
.clinic-wrap .mx-auto { margin-right: auto; margin-left: auto; }

.clinic-wrap .p-2 { padding: var(--spacing-2); }
.clinic-wrap .p-3 { padding: var(--spacing-3); }
.clinic-wrap .p-4 { padding: var(--spacing-4); }
.clinic-wrap .p-6 { padding: var(--spacing-6); }
.clinic-wrap .p-8 { padding: var(--spacing-8); }

.clinic-wrap .gap-2 { gap: var(--spacing-2); }
.clinic-wrap .gap-3 { gap: var(--spacing-3); }
.clinic-wrap .gap-4 { gap: var(--spacing-4); }
.clinic-wrap .gap-6 { gap: var(--spacing-6); }

/* شبکه‌ی واکنش‌گرا (mobile-first) — STEP 40 */
.clinic-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-4);
}

@media (min-width: 768px) {
	.clinic-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.clinic-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
	.clinic-grid-4 { grid-template-columns: repeat(4, 1fr); }
}