/* ==========================================================================
   tokens.css — انستیتو روانکاوی تهران
   پالت برند دقیقاً از design/footage/pallet.png
   ========================================================================== */

:root {
  /* ---- پالت برند — این هشت مقدار تغییر نمی‌کنند ---- */
  --brand:        #0B8E9B;  /* سبزآبی اصلی */
  --brand-bright: #08A6B5;  /* فیروزه‌ای روشن */
  --heading:      #0B3440;  /* تیترهای اصلی */
  --dark:         #073F48;  /* بخش‌های تیره */
  --cream:        #F7F1E8;  /* شیری گرم */
  --paper:        #FCFAF7;  /* سفید گرم */
  --muted:        #6E7477;  /* متن فرعی */
  --line:         #DCECEE;  /* حاشیه روشن */

  /* ---- مشتق‌های مجاز ---- */
  /* فقط شفافیت یا آمیختن با paper — هیچ رنگ تازه‌ای وارد نمی‌شود */
  --brand-wash:   #E7F2F4;  /* زمینه‌ی مدال آبی — brand روی paper */
  --brand-faint:  #F1F7F8;  /* زمینه‌ی خیلی کم‌رنگ */
  --neutral-wash: #E9F2F1;  /* مدال صفحه‌های ۲، ۵، ۷ — خاکستریِ سبزآبی، نمونه‌برداری از ماکاپ */
  --dark-soft:    #0E4E58;  /* یک پله روشن‌تر از dark، برای hover */
  --line-soft:    #EAF2F3;  /* خط مویی داخل کارت */

  /* ---- زمینه‌ی نوارها — نمونه‌برداری‌شده از ماکاپ‌ها ---- */
  --band-cream: #F8F3ED;
  --band-tint:  #DCECEE;   /* = --line. مقدار قبلی #DCE9F5 بنفش‌آبی و خارج از پالت بود */
  --band-sage:  #E8EBE9;
  --band-mist:  #F3F6F7;
  --band-sky:   #EEF3EF;

  /* ---- شعاع گوشه ---- */
  --r-pill: 999px;  /* چیپ‌ها و فیلدها */
  --r-btn:  14px;   /* دکمه‌ها — ماکاپ گردگوشه می‌کشد، نه قرص */
  --r-lg:   24px;   /* نوارها و کارت‌های بزرگ */
  --r-md:   18px;   /* کارت معمولی */
  --r-sm:   12px;   /* کاشی، چیپ، فیلد */

  /* ---- سایه ---- */
  --sh-card:  0 2px 10px rgba(11, 52, 64, .05);
  --sh-raise: 0 8px 24px rgba(11, 52, 64, .09);

  /* ---- ریتم عمودی ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;

  /* فاصله‌ی بین بخش‌ها — در بریک‌پوینت‌ها بازنویسی می‌شود.
     ماکاپ‌ها به‌مراتب فشرده‌ترند از چیزی که اول ساخته شد؛ رندر ۱.۵ برابر
     ماکاپ بلند درمی‌آمد و علتش انباشتِ همین فاصله‌ها روی هشت بخش بود. */
  --section-gap: var(--sp-6);

  /* ---- قاب افقی ---- */
  --container: 1200px;
  --gutter: 24px;

  /* ---- انتقال ---- */
  --t: 160ms ease;
}

@media (max-width: 1023px) {
  :root { --section-gap: var(--sp-6); --gutter: 20px; }
}

@media (max-width: 640px) {
  :root {
    --section-gap: var(--sp-5);
    --gutter: 20px;
    --r-lg: 20px;
    --r-md: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
}