/* ═══════════════════════════════════════════════════════════
   tokens.css — ⛔ تولیدشده از shared/tokens/design-tokens.json
   دستی ویرایش نکن؛ «npm run shared» دوباره می‌سازدش.
   سایت Astro و تم وردپرس هر دو عیناً همین فایل رو لود می‌کنن.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── color ── */
  --brand: #12735A;   /* سبز شب‌سبز — لینک/اکشن روی سطوح روشن (دایرکشن ۱ از design-systems-2) */
  --brand-deep: #0E5B47;
  --brand-tint: #E2F2EC;
  --em: #2BB68B;   /* زمرد — لهجه‌ی روشن روی سطوح تیره (هیرو، band) */
  --em-deep: #1E8E6C;   /* زمرد سیر — آیکون/لهجه روی سطوح روشن */
  --mint: #9ECDBB;   /* نعنا — متن ثانویه/eyebrow روی تیره */
  --dark: #0C1D18;   /* شب — سطح تیره‌ی اصلی (هیرو/band/فوتر) */
  --dark-2: #102420;
  --dark-3: #15302A;
  --brass: #C8A24B;   /* طلا — صدای دوم پالت: eyebrow، قیمت، دکمه‌ی باند CTA، مهر، جرقه */
  --brass-deep: #7A6120;   /* طلای سیر — متن طلایی رو سطوح روشن (کنتراست ≥4.5) */
  --brass-tint: #F7EFDC;
  --ground: #F2F6F0;   /* کاغذ سبزفام — پس‌زمینه‌ی محتوا؛ ته‌رنگ نعنایی که صفحه کسل نشه */
  --surface: #FFFFFF;
  --surface-alt: #F7FAF5;
  --ink: #1C211E;
  --ink-soft: #5D6660;
  --ink-faint: #686F69;   /* کم‌رنگ ولی هنوز خوانا — 4.73 رو ground، 4.91 رو surface-alt، 5.16 رو surface. فقط رو سطح روشن؛ رو تیره از on-dark-* استفاده کن. */
  --on-brand: #EAF2EE;
  --line: #DCE4D9;   /* خط موی سبزفام — هم‌خانواده‌ی ground */
  --line-strong: #C3CFC0;   /* خط پررنگ‌تر، ولی هنوز تزئینی — جداکننده، اسکرول‌بار، خط‌چین. برای کادر عنصر رابط از line-input استفاده کن. */
  --line-input: #828F82;   /* کادر فیلد فرم و دکمه‌ی ghost — 3.10 رو ground، طبق WCAG 1.4.11 که برای عنصر رابط ۳:۱ می‌خواد. line-strong این‌جا 1.48 می‌داد یعنی مرز فیلد عملاً دیده نمی‌شد. */
  --wa: #147A5C;   /* واتساپ، هم‌خانواده‌ی برند */
  --alert: #A8442A;
  --on-dark-soft: #A9BDB3;   /* متن ثانویه رو سطوح تیره (فوتر، هیرو، topbar) — به‌جای rgba های پراکنده */
  --on-dark-faint: #7E8F86;   /* متن کم‌رنگ رو سطوح تیره (زیرنویس، کپی‌رایت) */
  --line-dark: rgba(255,255,255,.09);   /* خط موی جداکننده رو سطوح تیره */
  --line-dark-strong: rgba(255,255,255,.2);   /* مرز کنترل/پیل رو سطوح تیره */

  /* ── font ── */
  --fa: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;

  /* ── type ── */
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15.5px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 25px;
  --t-2xl: 28px;
  --t-3xl: 34px;
  --lh-tight: 1.3;
  --lh-body: 1.8;

  /* ── space ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 88px;

  /* ── shape ── */
  --r-sm: 6px;
  --r-md: 11px;
  --r-lg: 16px;
  --maxw: 1160px;
  --bar-h: 62px;   /* ارتفاع نوار اکشن چسبان موبایل */

  /* ── shadow ── */
  --shadow-1: 0 1px 2px rgba(28,33,30,.04);   /* کارت نشسته رو کاغذ */
  --shadow-2: 0 1px 2px rgba(28,33,30,.04), 0 22px 44px -22px rgba(18,63,49,.28);   /* لیفت hover کارت لینکی */
  --shadow-3: 0 18px 40px rgba(12,29,24,.14);   /* پنل شناور رو روشن (مگامنو) */
  --shadow-dark: 0 30px 60px -28px rgba(0,0,0,.65);   /* پنل/عکس شناور رو سطوح تیره (هیرو) */

  /* ── motion ── */
  --dur-tap: 150ms;   /* دکمه، لینک، مرز کارت */
  --dur-mega: 160ms;   /* مگامنو */
  --dur-header: 200ms;   /* سایه‌ی هدر موقع اسکرول */
  --dur-drawer: 240ms;   /* دراور موبایل */
  --dur-reveal: 300ms;   /* ظاهر شدن بخش موقع اسکرول — فقط یک بار */
  --ease-out: ease;
  --ease-drawer: cubic-bezier(.32,.72,0,1);
}

@media (min-width: 768px){
  :root{
    --t-2xl: 38px;
    --t-3xl: 52px;
  }
}