/* ═══════════════════════════════════════════
   TMS DESIGN TOKENS
   منبع واحد سیستم دیزاین مدرسه بازاریابی تهران
   هر تغییری اینجا، در همه ویجت‌ها اعمال می‌شود.
   ═══════════════════════════════════════════ */

:root {
	/* رنگ اصلی — نیوی (متن، دکمه اصلی، تیتر) */
	--tms-navy: #0B1E3E;
	--tms-navy-light: #142A4D;
	--tms-navy-2: #1c3a6e;

	/* رنگ ثانویه — فیروزه‌ای (حداکثر ۱۰٪ سطح — هرگز متن روی سفید) */
	--tms-teal: #3EC2C0;
	--tms-teal-soft: rgba(62, 194, 192, .12);
	--tms-teal-deep: rgba(62, 194, 192, .06);
	--tms-teal-hover: #52cfcd;

	/* رنگ لهجه — طلایی (برای موارد ویژه: دوره اول، مدرک بین‌المللی) */
	--tms-gold: #C9A84C;
	--tms-gold-soft: rgba(201, 168, 76, .1);

	/* خنثی */
	--tms-n0: #FFFFFF;
	--tms-n50: #F7F9FA;
	--tms-n100: #EDF1F4;
	--tms-n300: #C8D1D9;
	--tms-n500: #7A8794;
	--tms-n700: #3D4753;

	/* وضعیت */
	--tms-success: #2F8F6F;
	--tms-warning: #C98A3B;
	--tms-error: #C24545;

	/* شعاع گوشه — مقیاس ثابت پروژه */
	--tms-radius-s: 6px;
	--tms-radius-m: 10px;
	--tms-radius-l: 16px;
	--tms-radius-xl: 24px;

	/* سایه */
	--tms-shadow-s: 0 1px 4px rgba(11, 30, 62, .06);
	--tms-shadow-m: 0 8px 28px rgba(11, 30, 62, .1);
	--tms-shadow-l: 0 24px 56px rgba(11, 30, 62, .16);

	/* تایپوگرافی — IRANSans از قبل به‌صورت سراسری در تنظیمات المنتور تعریف شده است.
	   این متغیر فقط برای مواردی است که خارج از کنترل تایپوگرافی المنتور رندر می‌شوند
	   (مثل بخش‌هایی از ویجت‌های TMS). اندازه و وزن از کنترل‌های Typography هر ویجت می‌آید،
	   نه از اینجا. */
	--tms-font: 'IRANSans', Tahoma, sans-serif;

	/* منحنی حرکت — برای همه transition/animation های پروژه */
	--tms-ease: cubic-bezier(.4, 0, .2, 1);

	/* فاصله‌گذاری بخش‌ها */
	--tms-space-section: 88px;
	--tms-space-section-sm: 48px;
}

/* IRANSans در تنظیمات سایت (Elementor > Site Settings > Global Fonts) تعریف شده؛
   ویجت‌های TMS به‌صورت پیش‌فرض از font-family کلی صفحه ارث می‌برند و فقط
   اندازه/وزن را از طریق کنترل Typography خودشان قابل‌تنظیم می‌کنند. */

/* کلاس کمکی مشترک بین ویجت‌ها */
.tms-ek-wrap {
	font-family: var(--tms-font);
	direction: rtl;
	box-sizing: border-box;
}
.tms-ek-wrap *,
.tms-ek-wrap *::before,
.tms-ek-wrap *::after {
	box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   TMS MOTION — کلاس‌های reveal-on-scroll
   ═══════════════════════════════════════════ */
.tms-motion-fade-up,
.tms-motion-fade-in,
.tms-motion-fade-right,
.tms-motion-fade-left {
	opacity: 0;
	transition: opacity var(--tms-motion-duration, 600ms) var(--tms-ease) var(--tms-motion-delay, 0ms),
	            transform var(--tms-motion-duration, 600ms) var(--tms-ease) var(--tms-motion-delay, 0ms);
}
.tms-motion-fade-up   { transform: translateY(18px); }
.tms-motion-fade-right{ transform: translateX(-24px); }
.tms-motion-fade-left { transform: translateX(24px); }
.tms-motion-fade-in   { transform: none; }

.tms-motion-visible {
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
	.tms-motion-fade-up,
	.tms-motion-fade-in,
	.tms-motion-fade-right,
	.tms-motion-fade-left {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ═══════════════════════════════════════════
   TMS PARALLAX — پوستر با عمق بصری
   ═══════════════════════════════════════════ */
[data-tms-parallax] {
	overflow: hidden;
}
[data-tms-parallax] img {
	will-change: transform;
	transition: transform 0s linear; /* بدون transition — مستقیم از JS */
}

@media (prefers-reduced-motion: reduce) {
	[data-tms-parallax] img {
		transform: none !important;
	}
}

/* ═══════════════════════════════════════════
   TMS GLASSMORPHISM — افکت شیشه‌ای تدریجی
   ═══════════════════════════════════════════ */
[data-tms-glass] {
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	background: rgba(255, 255, 255, 0.4);
	border-bottom: 1px solid rgba(11, 30, 62, 0);
	transition: background .1s linear, border-bottom-color .1s linear;
	will-change: backdrop-filter, background;
}

/* کلاس utility برای استفاده مستقیم (بدون اسکرول تدریجی) */
.tms-glass {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 32px rgba(11, 30, 62, 0.08);
}