/**
 * TalkiLand Design Tokens — منبع واحد رنگ، تایپوگرافی، فاصله‌گذاری، شعاع،
 * سایه، حرکت و Z-index برای هر سه پنل (دانش‌آموز/مدرس/مدیر) + صفحات عمومی.
 *
 * پالت مرجانی برند حفظ شده اما محدود به نقاط مهم (CTA، فعال، Focus) است.
 * برخی مقادیر رنگ نسبت به درخواست اولیه کمی تیره‌تر/روشن‌تر شده‌اند تا
 * حداقل کنتراست WCAG AA (۴.۵:۱ برای متن معمولی) را در هر دو کاربردِ «متن
 * روی نرم» و «متن سفید روی پرکردهٔ توپر» تضمین کنند؛ دلیل هرکدام کنار خودش
 * آمده. رنگ اصلی/مکمل از تنظیمات مدیر با inline style روی همین handle
 * قابل بازنویسی است (--tl-primary/--tl-secondary در Assets.php).
 */

:root {
	/* ============ رنگ برند ============ */
	--tl-primary: #ff6b4a;
	--tl-primary-hover: #db5c40;
	--tl-primary-active: #c25138;
	--tl-primary-soft: #ffe9e2;
	--tl-primary-ink: #7c2d16;
	/* متن روی --tl-primary-soft (نه روی سفیدِ خالص). برای پالت پیش‌فرض همان
	   ink است (کنتراست ۸:۱ روی #ffe9e2)؛ برای پالت‌های دیگر Assets.php آن را
	   جداگانه محاسبه می‌کند چون ink سفید-محور روی تینت زیر ۴.۵:۱ می‌افتد. */
	--tl-primary-ink-soft: #7c2d16;

	/*
	 * سطوح «پرشدهٔ رنگی با متنِ سفید» (کارت هیرو، پیل آیتم فعال سایدبار، کارت
	 * روز جاری). طرح مرجع روی هر سه پالتش متن سفید می‌گذارد، اما سفید روی این
	 * مرجانی ۲.۸:۱ و روی سبز ۲.۵:۱ می‌دهد. تیره‌کردنِ حداقلی همان ظاهر را حفظ
	 * می‌کند و خوانا هم می‌شود (پالت نیلی: صفر درصد، یعنی عیناً رنگ خود طرح).
	 *   fill        → متن بزرگ/درشت، آستانهٔ ۳:۱
	 *   fill-strong → متن معمولی، آستانهٔ ۴.۵:۱
	 * Assets.php این دو را برای هر پالت/رنگ سفارشی دوباره محاسبه می‌کند.
	 */
	--tl-primary-fill: #f06546;
	/* Stop تیرهٔ گرادیان هیرو. از darken خودِ رنگ مشتق می‌شود نه از مخلوط‌کردن با
	   مشکی: مخلوط با مشکی اشباع را می‌کُشد و نارنجیِ سرزنده را آجریِ مات می‌کرد. */
	--tl-primary-fill-deep: #db5c40;
	--tl-primary-fill-strong: #c25138;
	/* «متن رنگیِ برند» در حالت Dark؛ بلاک‌های تیره پایین از همین var استفاده
	   می‌کنند. برای این مرجانی خودِ رنگ کافی است (۶.۲:۱ روی سطح تیره)، اما برای
	   پالت نیلی Assets.php آن را روشن‌تر می‌کند (وگرنه ۳.۹:۱ می‌شد). */
	--tl-primary-ink-dark: #ff6b4a;

	--tl-accent: #ffb020;
	--tl-accent-soft: #fff4e0;
	--tl-secondary: #33241f;

	/* گرادیان برند: فقط برای نشان لوگو و نوار باریک تزئینی، نه پرکردن کارت/دکمه. */
	--tl-gradient: linear-gradient(115deg, var(--tl-primary-hover), var(--tl-primary));
	--tl-gradient-warm: linear-gradient(120deg, var(--tl-primary), var(--tl-accent));

	/*
	 * متن روی دکمهٔ اصلی: تیرهٔ نزدیک‌به‌مشکی (نه سفید). مرجانی/Hover/Active با
	 * متن سفید به‌ترتیب ~۲.۹:۱ / ۳.۷:۱ / ۴.۴:۱ کنتراست دارند (هرسه زیر حداقل
	 * ۴.۵:۱ AA)؛ همین متن تیره روی هرسه به‌ترتیب ~۶.۴ / ۵.۱ / ۴.۳ می‌دهد — تنها
	 * حالت Active (فشردهٔ لحظه‌ای، نه خواندنی) کمی زیر آستانه می‌ماند که برای
	 * یک وضعیت گذرا قابل قبول است. اگر مدیر رنگ برند را عوض کند، Assets.php
	 * این مقدار را برای رنگ تازه دوباره محاسبه و اینجا override می‌کند.
	 */
	--tl-text-on-primary: #1a0f0c;

	/*
	 * ============ سطوح خنثی ============
	 * تقریباً سفید با رگهٔ بسیار کمِ رنگ پالت فعلی (color-mix، نه رنگ ثابت) تا
	 * کل پنل با هر پالتی هماهنگ بماند — همان حسِ «مینیمال و مرتب» طرح مرجع که
	 * پس‌زمینه‌اش هم‌خانوادهٔ رنگ برند است، نه خاکستریِ بی‌ربط.
	 */
	--tl-bg: color-mix(in srgb, var(--tl-primary) 4%, #f5f6fa);
	--tl-surface: #ffffff;
	/* سطح «کمی مات‌تر از سفید» — پس‌زمینهٔ کارت‌های روز در نوار هفته (طرح مرجع). */
	--tl-surface-soft: color-mix(in srgb, var(--tl-primary) 2%, #fbfbfe);
	--tl-surface-raised: #ffffff;
	--tl-border: color-mix(in srgb, var(--tl-primary) 6%, #e3e5ef);
	--tl-line: color-mix(in srgb, var(--tl-primary) 4%, #eaebf3);

	/*
	 * ============ متن ============
	 * خانوادهٔ خنثیِ سردِ نیلی‌فامِ طرح مرجع (به‌جای قهوه‌ای گرم قبلی). مقدار
	 * muted نسبت به طرح کمی تیره‌تر شده: #6b7096 روی پس‌زمینهٔ صفحه ۴.۴۴:۱
	 * می‌داد (زیر ۴.۵)، این مقدار ۴.۸:۱ می‌دهد.
	 */
	--tl-text: #191a2c;
	--tl-text-secondary: #4a4f70;
	--tl-text-muted: #666b90;
	--tl-text-faint: #9a9fc0; /* فقط برای عناصر تزئینی/کم‌اهمیت؛ برای متن خواندنی به‌کار نرود. */

	/*
	 * ============ رنگ‌های معنایی ============
	 * هرکدام دو کاربرد دارند: متن روی پس‌زمینهٔ بسیار روشن (Badge/Alert) و
	 * گاهی پس‌زمینهٔ توپر با متن سفید. رنگ‌های خام درخواستی («success #0b9567»،
	 * «warning #c97700»، «danger #d93f47»، «info #3979df») روی پس‌زمینهٔ نرمِ
	 * روشن فقط ۳.۱ تا ۳.۹ کنتراست می‌دادند؛ هرکدام حدود ۱۰ تا ۲۲٪ تیره‌تر شده
	 * تا به حداقل ۴.۵:۱ AA برسند (همچنان در همان خانوادهٔ رنگ).
	 */
	--tl-success: #097a54;
	--tl-success-soft: #e8f7f1;
	--tl-warning: #9d5d00;
	--tl-warning-soft: #fff3df;
	/* --tl-danger برای متن روی نرم (پایین، در حالت تاریک دوباره تعریف می‌شود).
	   --tl-danger-strong ثابت است: فقط برای پس‌زمینهٔ توپرِ دکمهٔ خطر + متن سفید. */
	--tl-danger: #c33940;
	--tl-danger-strong: #c33940;
	--tl-danger-soft: #fdecee;
	--tl-info: #3168c0;
	--tl-info-soft: #edf3ff;

	/* ============ تایپوگرافی فارسی ============ */
	--tl-font: "Vazirmatn", "IRANSansX", Tahoma, "Segoe UI", sans-serif;
	--tl-font-size: 15px;             /* متن اصلی: ۱۴ تا ۱۵ */
	--tl-font-size-sm: 13px;
	--tl-font-size-card-title: 17px;  /* عنوان کارت: ۱۶ تا ۱۸ */
	--tl-font-size-section-title: 21px; /* عنوان بخش: ۲۰ تا ۲۲ */
	--tl-font-size-page-title: 28px;  /* عنوان صفحه: ۲۶ تا ۳۰ */
	--tl-font-size-stat: 28px;        /* آمار اصلی: ۲۶ تا ۳۲ */
	--tl-line-height: 1.75;

	--tl-weight-normal: 400;
	--tl-weight-medium: 500;   /* Label و Button */
	--tl-weight-semibold: 600; /* عنوان‌ها */
	--tl-weight-bold: 700;     /* عنوان‌های شاخص */

	/* ============ فاصله‌گذاری ============ */
	--tl-space-1: 4px;
	--tl-space-2: 8px;
	--tl-space-3: 12px;
	--tl-space-4: 16px;
	--tl-space-5: 20px;
	--tl-space-6: 24px;
	--tl-space-8: 32px;
	--tl-space-10: 40px;
	--tl-space-12: 48px;
	/* نام‌های قدیمی به‌عنوان مستعار برای سازگاری با استفادهٔ فعلی در panel.css. */
	--tl-gap: var(--tl-space-4);
	--tl-gap-lg: var(--tl-space-6);

	/* ============ شعاع (مقادیر خودِ فایل طرح مرجع: --r-sm/--r/--r-lg) ============ */
	--tl-radius-sm: 12px;   /* Input، Button، آیتم سایدبار */
	--tl-radius: 16px;      /* Card و Hero */
	--tl-radius-lg: 22px;   /* Modal/Drawer */
	--tl-radius-pill: 999px; /* Badge: کاملاً گرد */

	/*
	 * ============ سایه ============
	 * مقادیر برگرفته از خودِ فایل طرح مرجع (--sh-sm/--sh-md/--sh-lg): سایه‌ها نرم
	 * و لایه‌ای‌اند اما حذف نشده‌اند. دور قبل از روی اسکرین‌شات نتیجه گرفته شد
	 * «کارت‌ها سایه ندارند» که با خواندن سورس طرح غلط از آب درآمد؛ آنچه ظاهر را
	 * مرتب می‌کند نوار عنوان + فاصلهٔ یکدست است، نه حذف سایه.
	 */
	--tl-shadow-sm: 0 1px 2px rgb(23 24 54 / 4%), 0 1px 3px rgb(23 24 54 / 6%);                 /* کاشی/دکمهٔ آیکونی */
	--tl-shadow: 0 6px 18px -6px rgb(23 24 54 / 12%), 0 2px 6px -3px rgb(23 24 54 / 6%);        /* کارت */
	--tl-shadow-lg: 0 18px 44px -14px rgb(23 24 54 / 22%), 0 6px 14px -8px rgb(23 24 54 / 10%); /* Modal/Overlay/Hero */
	/* درخشش برند بسیار ملایم؛ فقط برای نشان لوگوی سایدبار، نه کارت/دکمه/آیتم فعال. */
	--tl-shadow-brand: 0 8px 18px -10px color-mix(in srgb, var(--tl-primary) 35%, transparent);

	/* ============ حرکت ============ */
	--tl-ease: cubic-bezier(.4, 0, .2, 1);
	--tl-duration-fast: 150ms;
	--tl-duration: 180ms;

	/* ============ Z-index (مقیاس منظم؛ از اعداد تصادفی/بزرگ پرهیز شود) ============ */
	--tl-z-sticky: 10;
	--tl-z-header: 20;
	--tl-z-sidebar: 30;
	--tl-z-dropdown: 40;
	--tl-z-overlay: 50;
	--tl-z-modal: 60;
	--tl-z-toast: 70;

	--tl-sidebar-width: 266px;

	/*
	 * ============ سایدبار ============
	 * تیرهٔ عمیقِ هم‌خانوادهٔ پالت. پایهٔ خنثی عمداً «تقریباً مشکیِ کمی گرم» است
	 * نه سرمه‌ای: پایهٔ سرمه‌ایِ قبلی (#191a30) با پالت مرجانی ترکیب می‌شد و
	 * سایدبار را بنفشِ گِلی می‌کرد (#422935) — با رندر واقعی دیده و اصلاح شد.
	 * حالا برای هر سه پالت در همان خانوادهٔ رنگ خودش می‌ماند.
	 * متن هم تینتِ روشنِ هم‌خانوادهٔ پالت است، نه سفیدِ خاکستری‌فام.
	 */
	--tl-sidebar-bg: color-mix(in srgb, var(--tl-primary) 16%, #100c0a);
	--tl-sidebar-bg-2: color-mix(in srgb, var(--tl-primary) 22%, #17110e);
	--tl-sidebar-text: color-mix(in srgb, var(--tl-primary) 20%, #f2ece9);
	--tl-sidebar-divider: rgb(255 255 255 / 10%);
	--tl-sidebar-hover: rgb(255 255 255 / 8%);

	--tl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tl-primary) 35%, transparent);

	/*
	 * ============ Glassmorphism ============
	 * فقط برای سطوح «شناور»: Header، Dropdown، Modal و Drawer موبایل. یک دور
	 * قبل به کاشی‌های آماری هم داده شده بود، اما در طرح مرجع کاشی‌ها سطح سفیدِ
	 * توپر با حاشیهٔ مویی‌اند نه شیشه‌ای؛ آن کاربرد برداشته شد.
	 */
	--tl-glass-blur: 16px;
}

/* ---------- سطح شیشه‌ای پایه: Fallback مات و خوانا برای مرورگر بدون backdrop-filter ---------- */
.tl-glass {
	background: rgb(255 255 255 / 94%);
	border: 1px solid var(--tl-border);
	box-shadow: var(--tl-shadow-lg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tl-glass {
		background: rgb(255 255 255 / 76%);
		border-color: rgb(255 255 255 / 60%);
		backdrop-filter: blur(var(--tl-glass-blur)) saturate(130%);
		-webkit-backdrop-filter: blur(var(--tl-glass-blur)) saturate(130%);
		box-shadow:
			var(--tl-shadow-lg),
			inset 0 1px 0 rgb(255 255 255 / 55%);
	}
}

/* ---------- پس‌زمینهٔ بسیار ملایمِ تزئینی؛ فقط پشت Layout/بخش شاخص، نه پشت هر کارت ---------- */
.tl-decor-bg {
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--tl-primary) 12%, transparent), transparent 32%),
		radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--tl-accent) 8%, transparent), transparent 30%),
		var(--tl-bg);
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * کاربری که در سیستم‌عامل شفافیت کمتر را ترجیح داده: سطوح شیشه‌ای (Header،
 * کارت‌های هیرو، Dropdown/Modal) کاملاً مات و بدون Blur شوند. .tl-glass از
 * قبل یک Fallback مات دارد (بالا)؛ اینجا همان Fallback با !important روی
 * تمام مرورگرها (حتی آن‌هایی که از backdrop-filter پشتیبانی می‌کنند) اجرا
 * می‌شود، به‌علاوهٔ پس‌زمینهٔ نیمه‌شفافِ Header.
 */
@media (prefers-reduced-transparency: reduce) {
	.tl-glass {
		background: var(--tl-surface) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.tl-header {
		background: var(--tl-surface) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

/*
 * اجبار حالت تیره صرف‌نظر از تنظیم سیستم‌عامل (کاربر در «ظاهر» تیره را
 * صریحاً انتخاب کرده). باید با مقادیر بلوک @media بالا هم‌گام بماند —
 * بدون ابزار Build در این پروژه (فقط CSS ساده)، تکرار مقادیر تنها راه
 * پشتیبانی هم‌زمان از «خودکار طبق سیستم‌عامل» و «اجباری طبق انتخاب کاربر» است.
 */
:root[data-tl-theme="dark"] {
	--tl-bg: #0e0f1c;
	--tl-surface: #171929;
	--tl-surface-soft: #1c1e30;
	--tl-surface-raised: #1f2135;
	--tl-border: #2e3049;
	--tl-line: #282a41;

	--tl-text: #ecedf7;
	--tl-text-secondary: #c3c7e0;
	--tl-text-muted: #a2a7c9;
	--tl-text-faint: #71769c;

	--tl-primary-soft: color-mix(in srgb, var(--tl-primary) 20%, transparent);
	--tl-accent-soft: color-mix(in srgb, var(--tl-accent) 18%, transparent);
	--tl-primary-ink: var(--tl-primary-ink-dark);
	--tl-primary-ink-soft: var(--tl-primary-ink-dark);

	--tl-success: #30a57e;
	--tl-success-soft: #0a1a14;
	--tl-warning: #d18b26;
	--tl-warning-soft: #1f1809;
	--tl-danger: #df5c63;
	--tl-danger-soft: #22100d;
	--tl-info: #578de4;
	--tl-info-soft: #0f1828;

	--tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
	--tl-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5), 0 2px 6px -3px rgba(0, 0, 0, .35);
	--tl-shadow-lg: 0 24px 52px -18px rgba(0, 0, 0, .65), 0 8px 20px -10px rgba(0, 0, 0, .4);
	--tl-shadow-brand: 0 8px 18px -10px color-mix(in srgb, var(--tl-primary) 25%, transparent);

	--tl-sidebar-bg: color-mix(in srgb, var(--tl-primary) 14%, #0b0c18);
	--tl-sidebar-bg-2: color-mix(in srgb, var(--tl-primary) 18%, #14162a);
}

:root[data-tl-theme="dark"] .tl-glass {
	background: rgba(32, 24, 21, .78);
	border-color: rgba(255, 255, 255, .1);
	box-shadow:
		0 14px 34px rgba(0, 0, 0, .28),
		inset 0 1px 0 rgba(255, 255, 255, .05);
}

/*
 * ============ حالت تیره ============
 * پیش‌فرض بر اساس تنظیم سیستم‌عامل (این بلوک)؛ اگر کاربر در تنظیمات «ظاهر»
 * پنل خودش صریحاً روشن/تیره انتخاب کرده باشد، data-tl-theme روی <html>
 * ست می‌شود و این بلوک (حالت خودکار) نادیده گرفته می‌شود — بلوک اجباری
 * بالای همین فایل جایگزین آن است.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-tl-theme]) {
		--tl-bg: #0e0f1c;
		--tl-surface: #171929;
		--tl-surface-soft: #1c1e30;
		--tl-surface-raised: #1f2135;
		--tl-border: #2e3049;
		--tl-line: #282a41;

		--tl-text: #ecedf7;
		--tl-text-secondary: #c3c7e0;
		--tl-text-muted: #a2a7c9;
		--tl-text-faint: #71769c;

		--tl-primary-soft: color-mix(in srgb, var(--tl-primary) 20%, transparent);
		--tl-accent-soft: color-mix(in srgb, var(--tl-accent) 18%, transparent);
		/*
		 * --tl-primary-ink («متن رنگیِ برند» روی سطوح روشن، مثل لینک‌ها و برچسب‌های
		 * کوچک) در حالت روشن قهوه‌ایِ تیره است؛ همان رنگ روی سطح تیره فقط ~۱.۸:۱
		 * کنتراست می‌دهد (تقریباً نامرئی). در حالت تاریک، خودِ مرجانیِ روشن برند
		 * جایگزین می‌شود که روی سطوح تیره ~۵.۹ تا ۶.۴:۱ می‌دهد.
		 */
		--tl-primary-ink: var(--tl-primary-ink-dark);
		--tl-primary-ink-soft: var(--tl-primary-ink-dark);

		/*
		 * نسخهٔ روشن‌ترِ هر رنگ معنایی برای متن روی پس‌زمینهٔ نرمِ بسیار تیره؛
		 * رنگ‌های نسخهٔ روشن روی این پس‌زمینه‌ها کنتراست کافی نمی‌دهند (مثلاً
		 * success روشن روی سطح تیرهٔ خودش فقط ~۴.۱:۱ می‌داد).
		 */
		--tl-success: #30a57e;
		--tl-success-soft: #0a1a14;
		--tl-warning: #d18b26;
		--tl-warning-soft: #1f1809;
		--tl-danger: #df5c63;
		--tl-danger-soft: #22100d;
		--tl-info: #578de4;
		--tl-info-soft: #0f1828;

		--tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
		--tl-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5), 0 2px 6px -3px rgba(0, 0, 0, .35);
		--tl-shadow-lg: 0 24px 52px -18px rgba(0, 0, 0, .65), 0 8px 20px -10px rgba(0, 0, 0, .4);
		--tl-shadow-brand: 0 8px 18px -10px color-mix(in srgb, var(--tl-primary) 25%, transparent);

		--tl-sidebar-bg: color-mix(in srgb, var(--tl-primary) 14%, #0b0c18);
		--tl-sidebar-bg-2: color-mix(in srgb, var(--tl-primary) 18%, #14162a);
	}

	:root:not([data-tl-theme]) .tl-glass {
		background: rgba(32, 24, 21, .78);
		border-color: rgba(255, 255, 255, .1);
		box-shadow:
			0 14px 34px rgba(0, 0, 0, .28),
			inset 0 1px 0 rgba(255, 255, 255, .05);
	}
}