/* ==========================================================================
   WikiMoms Design System — 00 · Tokens
   تنها منبع حقیقت برای رنگ، تایپوگرافی، فاصله، شکل و حرکت.
   هیچ مقدار خامی (px / hex) خارج از این فایل در کامپوننت‌ها استفاده نمی‌شود.
   ========================================================================== */

@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/Vazirmatn.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* ---------- رنگ: برند (Crimson) ---------- */
	--c-primary-50:  #fdeff3;
	--c-primary-100: #fadbe4;
	--c-primary-200: #f4b3c6;
	--c-primary-300: #ea809f;
	--c-primary-400: #e0527b;
	--c-primary-500: #c9275a;
	--c-primary-600: #b0113f;   /* اصلی */
	--c-primary-700: #8f0d33;   /* hover / active */
	--c-primary-800: #6e0a28;
	--c-primary-900: #4d071c;

	/* ---------- رنگ: خنثی (Ink) ---------- */
	--c-ink-900: #20253f;       /* تیتر */
	--c-ink-800: #232846;       /* سطح تیره (فوتر، بنر) */
	--c-ink-700: #4a4f66;       /* متن اصلی */
	--c-ink-500: #7a7f94;       /* متن کم‌رنگ */
	--c-ink-300: #cdd0e4;       /* متن روی سطح تیره */
	--c-line:    #f0e2e7;       /* خط جداکننده */
	--c-border:  #e6d9de;       /* حاشیهٔ فیلد */
	--c-white:   #ffffff;

	/* ---------- رنگ: سطوح ---------- */
	--c-surface:        var(--c-white);
	--c-surface-soft:   var(--c-primary-50);
	--c-surface-blue:   #edf2fb;
	--c-surface-dark:   #1e2340;
	--c-accent-blue:    #3b6fb0;

	/* ---------- رنگ: سطوح تیره و روی تصویر ---------- */
	--c-hero-base: #2a2630;
	--c-ink-900-soft: #2b2c4a;
	--c-on-dark: #e6e8f5;
	--c-on-dark-muted: #d9dcee;
	--c-on-hero: #efe6ea;
	--c-play: #e11d48;

	/* ---------- گرادیان‌ها ---------- */
	--g-soft: linear-gradient(110deg, #fdf3f6, var(--c-primary-100));
	--g-page-head: linear-gradient(100deg, var(--c-primary-50), #fff6f8);
	--g-path-women: linear-gradient(90deg, #fde9ef, #fdf3f6);
	--g-path-kid: linear-gradient(90deg, #e8effa, #f1f5fc);
	--g-brand: linear-gradient(160deg, var(--c-primary-500), var(--c-primary-700));
	--g-stats: linear-gradient(95deg, #b4123f, var(--c-primary-700));
	--g-shop: linear-gradient(90deg, #fdf2f5 0%, var(--c-white) 70%);
	--g-dark: linear-gradient(100deg, var(--c-ink-900-soft), #1e2240);
	--g-quote: linear-gradient(120deg, #272b4b, #1f2340);
	--g-panel-brand: linear-gradient(120deg, #c01a4c, var(--c-primary-600));
	--g-newsletter: linear-gradient(95deg, #fbe4ea, var(--c-primary-50));
	--g-photo-bg: linear-gradient(#ececee, #e3dfe2);

	/* ---------- رنگ: معنایی ---------- */
	--c-success: #1f8a5b;
	--c-warning: #c9791b;
	--c-danger:  #d32f2f;
	--c-success-50: #e7f6ee;
	--c-danger-50:  #fdeaea;
	--c-focus:   rgba(176, 17, 63, .18);

	/* ---------- تایپوگرافی ---------- */
	--font-sans: "Vazirmatn", Tahoma, sans-serif;

	--fs-2xs: 0.75rem;     /* 12 — برچسب، متن ریز */
	--fs-xs:  0.8125rem;   /* 13 — متادیتا */
	--fs-sm:  0.875rem;    /* 14 — متن ثانویه، لینک منو */
	--fs-base: 1rem;       /* 16 — متن اصلی */
	--fs-md:  1.125rem;    /* 18 — تیتر کارت، متن مقاله */
	--fs-lg:  1.25rem;     /* 20 */
	--fs-xl:  1.5rem;      /* 24 */
	--fs-2xl: 1.875rem;    /* 30 */
	--fs-3xl: 2.375rem;    /* 38 */
	--fs-4xl: 3.25rem;     /* 52 — فقط هیرو */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	--lh-tight: 1.45;      /* تیترها */
	--lh-snug: 1.65;       /* عنوان کارت، دکمه */
	--lh-body: 1.9;        /* متن فارسی */
	--lh-loose: 2.1;       /* پاراگراف بلند */

	/* ---------- فاصله (مقیاس ۴ نقطه‌ای) ---------- */
	--sp-0: 0;
	--sp-1: 0.25rem;   /* 4 */
	--sp-2: 0.5rem;    /* 8 */
	--sp-3: 0.75rem;   /* 12 */
	--sp-4: 1rem;      /* 16 */
	--sp-5: 1.25rem;   /* 20 */
	--sp-6: 1.5rem;    /* 24 */
	--sp-8: 2rem;      /* 32 */
	--sp-10: 2.5rem;   /* 40 */
	--sp-12: 3rem;     /* 48 */
	--sp-16: 4rem;     /* 64 */
	--sp-20: 5rem;     /* 80 */
	--sp-24: 6rem;     /* 96 */

	/* فاصله‌های معنایی */
	--gutter: var(--sp-4);           /* حاشیهٔ کنار صفحه (موبایل) */
	--grid-gap: var(--sp-6);         /* فاصلهٔ بین کارت‌ها */
	--card-pad: var(--sp-5);
	--panel-pad-y: var(--sp-10);     /* پنل‌های بزرگ: بنر، تجربهٔ کاربران */
	--panel-pad-x: var(--sp-12);
	--section-gap: var(--sp-16);     /* فاصلهٔ دیدهٔ بین دو بخش؛ هر بخش نصفش را padding می‌گیرد */
	--section-pad: calc(var(--section-gap) / 2);
	--stack-sm: var(--sp-2);
	--stack-md: var(--sp-4);
	--stack-lg: var(--sp-8);

	/* ---------- ابعاد ---------- */
	--container: 82.5rem;            /* 1320 */
	--container-narrow: 55rem;       /* 880 — متن */
	--header-h: 4rem;                /* 64 */

	/* ---------- شکل ---------- */
	--r-sm: 0.5rem;     /* 8 */
	--r-md: 0.625rem;   /* 10 — دکمه و فیلد */
	--r-lg: 1rem;       /* 16 — کارت */
	--r-xl: 1.25rem;    /* 20 — پنل‌های بزرگ */
	--r-full: 999px;

	--shadow-sm: 0 2px 14px rgba(32, 37, 63, .06);
	--shadow-md: 0 6px 22px rgba(32, 37, 63, .07);
	--shadow-lg: 0 12px 30px rgba(32, 37, 63, .11);
	--shadow-pop: 0 8px 30px rgba(0, 0, 0, .35);

	/* ---------- کنترل‌ها ---------- */
	--control-sm: 2.25rem;   /* 36 */
	--control-md: 2.75rem;   /* 44 */
	--control-lg: 3.25rem;   /* 52 */
	--control-input: 3rem;   /* 48 */
	--btn-px-sm: var(--sp-4);
	--btn-px-md: var(--sp-6);
	--btn-px-lg: var(--sp-8);

	/* ---------- آیکن ---------- */
	--icon-xs: 1rem;       /* 16 */
	--icon-sm: 1.25rem;    /* 20 — داخل دکمه و متن */
	--icon-md: 1.5rem;     /* 24 */
	--icon-lg: 2rem;       /* 32 — چیپ */
	--icon-xl: 2.5rem;     /* 40 */
	--icon-2xl: 3rem;      /* 48 */
	--icon-stroke: 1.6;

	/* ---------- لایه‌ها ---------- */
	--z-base: 1;
	--z-raised: 2;
	--z-dropdown: 10;
	--z-sticky: 60;

	/* ---------- حرکت ---------- */
	--ease: cubic-bezier(.2, .7, .3, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 500ms;

	/* ---------- نقاط شکست (برای مستندات؛ در @media نمی‌شود var گذاشت) ---------- */
	/* sm: 640px · md: 960px · lg: 1180px */
}

/* مقیاس واکنش‌گرا: توکن‌ها در موبایل کوچک‌تر می‌شوند، نه کامپوننت‌ها */
@media (max-width: 960px) {
	:root {
		--section-gap: var(--sp-12);
		--grid-gap: var(--sp-5);
		--fs-2xl: 1.625rem;
		--fs-3xl: 2rem;
		--fs-4xl: 2.375rem;
	}
}
@media (max-width: 640px) {
	:root {
		--section-gap: var(--sp-10);
		--card-pad: var(--sp-4);
		--panel-pad-y: var(--sp-6);
		--panel-pad-x: var(--sp-6);
		--fs-xl: 1.375rem;
		--fs-2xl: 1.5rem;
		--fs-3xl: 1.75rem;
		--fs-4xl: 2.125rem;
	}
}