/* ============================================================================
   توکن‌ها — بند ۱ راهنمای تبدیل طراحی.

   تنها جایی در کل CSS که مقدار خام هگز مجاز است. هر جای دیگر var().
   مقادیر عیناً از راهنمای دیزاین‌سیستم.
   ============================================================================ */

:root {
	/* رنگ */
	--sy-primary:        #0E7C86;
	--sy-primary-dark:   #095A62;
	--sy-accent:         #1AA0B0;
	--sy-tint:           #D2EAEC;
	--sy-surface-tint:   #E8F4F5;
	--sy-cta:            #E85C3A;
	--sy-cta-dark:       #CE4A2B;
	--sy-cta-tint:       #FDEDE7;
	--sy-success:        #17916B;
	--sy-success-tint:   #E4F4EE;
	--sy-star:           #F2A93B;
	--sy-ink:            #10323A;
	--sy-body:           #35525B;
	--sy-muted:          #4A6670;
	--sy-surface:        #F4F9F9;
	--sy-border:         #E5EFEF;
	--sy-border-strong:  #D8E4E5;
	--sy-footer:         #0B3138;

	/* سفید و سیاه — تا هیچ هگزی بیرون از این فایل نماند */
	--sy-white:          #fff;

	/* ------------------------------------------------------------------
	   رنگ‌هایی که طرح به‌کار برده ولی راهنمای دیزاین‌سیستم اعلامشان نکرده.
	   نام‌گذاری‌شان این‌جا یعنی هیچ هگز خامی بیرون از این فایل نمی‌ماند و
	   مقدارشان هم دست‌نخورده می‌ماند.
	   ------------------------------------------------------------------ */
	--sy-hairline:       #EAF3F3;   /* خط جداکنندهٔ کم‌رنگ */
	--sy-hairline-soft:  #F0F5F5;
	--sy-hairline-warm:  #EDF3F3;
	--sy-hairline-cool:  #E1EFEF;
	--sy-surface-2:      #EEF4F4;   /* سطح دوم، روشن‌تر از surface */
	--sy-surface-3:      #F4FBFB;
	--sy-surface-4:      #F3FAFA;
	--sy-surface-5:      #F7FBFB;
	--sy-surface-6:      #F4FBF9;
	--sy-border-soft:    #DCEAEA;
	--sy-cta-border:     #F6D3C7;   /* حاشیهٔ کارت‌های هشدار */
	--sy-cta-surface:    #FFF7F4;
	--sy-cta-ink:        #5A4038;   /* متن روی زمینهٔ نارنجیِ کم‌رنگ */
	--sy-success-border: #C5E8DA;
	--sy-on-dark:        #8FD4DB;   /* متن فرعی روی زمینهٔ تیره */
	--sy-on-dark-soft:   #8FBCC0;
	--sy-ink-2:          #3E6068;
	--sy-footer-deep:    #14454E;
	--sy-footer-mid:     #0F3A42;

	/* فاصله — پایه ۴px */
	--sy-s1: 4px;
	--sy-s2: 8px;
	--sy-s3: 12px;
	--sy-s4: 16px;
	--sy-s5: 24px;
	--sy-s6: 32px;
	--sy-s7: 40px;
	--sy-s8: 64px;

	/* گوشه */
	--sy-r-btn:   11px;
	--sy-r-input: 12px;
	--sy-r-card:  18px;
	--sy-r-panel: 22px;
	--sy-r-pill:  999px;

	/* سایه */
	--sy-sh-1:   0 4px 12px -6px rgba(9,90,98,.3);
	--sy-sh-2:   0 12px 30px -14px rgba(9,90,98,.45);
	--sy-sh-cta: 0 12px 26px -10px rgba(232,92,58,.7);

	/* عرض محتوا */
	--sy-max:        1240px;
	--sy-max-narrow: 900px;

	/* هدر چسبان — برای scroll-margin */
	--sy-header-h: 88px;

	/* ارتفاع سطر — دامنه‌دار، نه گلوبال.
	   روی body گلوبال‌شدنش به تیتر و دکمه و بَج هم می‌ریخت و ۱۸۲ پیکسل
	   ارتفاع تجمعی می‌ساخت که در طرح نیست. */
	--sy-lh-body:    1.85;
	--sy-lh-h1:      1.2;
	--sy-lh-heading: 1.45;
	--sy-lh-tight:   1;
}