/*
====================================================================
TOKENS — سیستم توکن طراحی
====================================================================
این فایل تنها منبع حقیقت برای رنگ، تایپوگرافی، فاصله و سایه‌هاست.
هر سایت/برند (sornashop، rangirangi، sheenbeauty و...) باید این
متغیرها را در استایل قالب فرزند (child theme) override کند، نه این‌که
مارک‌آپ یا کلاس‌های CSS را تغییر دهد.

وقتی موکاپ/طراحی جدید داده می‌شود، اول این فایل به‌روزرسانی می‌شود.
====================================================================
*/

:root {
	/* ---------- رنگ پایه (override در child theme) ---------- */
	--color-ink: #1A1D23;          /* متن اصلی */
	--color-ink-soft: #5B5F6B;     /* متن کم‌رنگ‌تر / توضیحات */
	--color-surface: #FFFFFF;      /* پس‌زمینه کارت‌ها */
	--color-bg: #F7F7F8;           /* پس‌زمینه صفحه */
	--color-border: #E6E7EA;       /* خط جداکننده */
	--color-border-strong: #D2D4D9;

	--color-primary: #2D6A4F;      /* رنگ برند اصلی — دکمه‌ها، لینک فعال */
	--color-primary-hover: #235940;
	--color-primary-tint: #E8F3EE; /* پس‌زمینه ملایم روی رنگ اصلی */

	--color-accent: #C9A227;       /* قیمت تخفیف، نشان موجودی کم، برچسب ویژه */
	--color-accent-tint: #FBF4DD;

	--color-danger: #C0392B;       /* خطا، ناموجود */
	--color-success: #2D6A4F;      /* موفقیت، تایید */
	--color-warning: #B7791F;      /* هشدار، موجودی کم */

	/* ---------- تایپوگرافی ---------- */
	--font-base: "IRANSansX", Tahoma, sans-serif;
	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-base: 1rem;     /* 16px */
	--font-size-md: 1.125rem;   /* 18px */
	--font-size-lg: 1.375rem;   /* 22px */
	--font-size-xl: 1.75rem;    /* 28px */
	--font-size-2xl: 2.25rem;   /* 36px */

	--line-height-tight: 1.25;
	--line-height-base: 1.6;

	/* ---------- فاصله‌گذاری (مقیاس 4px) ---------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;

	/* ---------- شکل/سایه ---------- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--shadow-card: 0 1px 3px rgba(26, 29, 35, 0.06), 0 1px 2px rgba(26, 29, 35, 0.04);
	--shadow-card-hover: 0 8px 24px rgba(26, 29, 35, 0.10);
	--shadow-popover: 0 12px 32px rgba(26, 29, 35, 0.14);

	/* ---------- چیدمان ---------- */
	--container-width: 1280px;
	--container-padding: var(--space-4);
	--header-height: 76px;

	/* ---------- زمان‌بندی انیمیشن ---------- */
	--transition-fast: 120ms ease;
	--transition-base: 200ms ease;
}

/* احترام به کاربرانی که حرکت کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}