/**
 * توکن‌های طراحی (Design Tokens) — شنزی
 *
 * این مقادیر مستقیماً از متغیرهای فایل فیگما استخراج شده‌اند.
 * همه‌جای تم فقط از این متغیرها استفاده می‌کنیم؛ اگر رنگی عوض شد،
 * فقط اینجا تغییرش می‌دهیم و کل سایت به‌روز می‌شود.
 *
 * منبع: Figma SHANZI Website — Variables
 */

:root {
	/* ---------- رنگ‌ها (Colors) ---------- */

	/* رنگ برند و پس‌زمینه‌های تیره */
	--color-brand: #0d0d0d;              /* مشکی برند — دکمه‌ها، هدر تیره */
	--color-bg: #ffffff;                 /* پس‌زمینه اصلی */
	--color-bg-secondary: #f7f7f7;       /* پس‌زمینه خاکستری روشن */

	/* متن */
	--color-text-primary: #1a1a1a;       /* متن اصلی */
	--color-text-secondary: #454545;     /* متن ثانویه */
	--color-text-tertiary: #5c5c5c;      /* متن کم‌رنگ‌تر */
	--color-text-on-brand: #ffffff;      /* متن روی پس‌زمینه تیره */
	--color-text-quaternary-on-brand: #d1d1d1;

	/* بوردر و خطوط */
	--color-border: #e4e4e4;             /* بوردر اصلی */
	--color-border-strong: #757575;      /* بوردر پررنگ (دکمه ثانویه) */

	/* رنگ‌های خنثی کمکی */
	--color-fg-quinary: #a8a8a8;

	/* ---------- تایپوگرافی (Typography) ---------- */

	/* خانواده فونت — مقادیر واقعی در fonts.css تعریف می‌شوند.
	   اینجا فقط اسم متغیرها را می‌سازیم که در main.css استفاده شوند. */
	--font-display: var(--font-family-display); /* عنوان‌ها (سریف) */
	--font-body: var(--font-family-body);       /* متن بدنه */

	/* اندازه فونت‌ها — از فیگما (بر حسب پیکسل، تبدیل به rem) */
	--text-xs: 0.75rem;     /* 12px */
	--text-sm: 0.875rem;    /* 14px */
	--text-md: 1rem;        /* 16px */
	--text-lg: 1.125rem;    /* 18px */

	--display-xs: 1.5rem;   /* 24px */
	--display-sm: 1.875rem; /* 30px */
	--display-md: 2.25rem;  /* 36px */
	--display-lg: 3rem;     /* 48px */
	--display-xl: 3.75rem;  /* 60px */

	/* ارتفاع خط (line-height) */
	--leading-xs: 1.375rem; /* 22px */
	--leading-sm: 1.75rem;  /* 28px */
	--leading-md: 1.75rem;  /* 28px */
	--leading-lg: 2rem;     /* 32px */

	/* وزن فونت */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* ---------- فاصله‌ها (Spacing) ---------- */
	/* بر اساس مقیاس فیگما */
	--space-xxs: 2px;
	--space-xs: 4px;
	--space-sm: 6px;
	--space-md: 8px;
	--space-lg: 12px;
	--space-xl: 16px;
	--space-2xl: 24px;
	--space-3xl: 32px;
	--space-4xl: 48px;
	--space-5xl: 64px;

	/* ---------- گوشه‌ها (Border Radius) ---------- */
	/* در طراحی شنزی دکمه‌ها گوشه تیز دارند (radius = 0) */
	--radius-none: 0;
	--radius-xs: 0;

	/* ---------- عرض محتوا (Layout) ---------- */
	--container-max: 1280px;  /* عرض ماکزیمم محتوا */
	--container-pad: 24px;    /* حاشیه دو طرف در دسکتاپ */
}