/* ═══════════════════════════════════════════════════════════════════════════
   توکن‌های طراحی آناتومیار — اپلیکیشن دانش‌آموز

   مقادیر عیناً از وریبل‌های فایل فیگما استخراج شده‌اند
   (fileKey cxlEda8TQUDOX5Pgwux9Tj، صفحه‌ی «❖ Components»، با get_variable_defs).
   نسخه‌ی قبلی این فایل placeholder دوره‌ی پورت یونیتی بود و هیچ ربطی به فیگما نداشت.

   دو نکته که هنگام ممیزی مشخص شد و اینجا حل شده‌اند:

   ۱. فیگما دو کالکشن جدا با نام‌های یکسان دارد. توکن --sm در یک نود هم ۴ (رادیوس)
      و هم ۲ (فاصله) می‌داد. اینجا به دو مقیاس مستقل تفکیک شده‌اند:
      --radius-* و --space-*.
   ۲. در مقیاس رادیوس، md و lg هر دو ۸ هستند. برای وفاداری به فیگما هر دو نام
      نگه داشته شده‌اند، ولی در کد جدید فقط از --radius-lg استفاده کنید.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ───────── رنگ برند نقش دانش‌آموز (مبنای این فاز) ───────── */
  --students-50:  #fff3e9;
  --students-100: #ffeddf;
  --students-200: #ffd8c0;
  --students-300: #ffc2b8;
  --students-500: #ff7963;

  /* ───────── رنگ اصلی وب‌سایت ───────── */
  --primary-50:  #f6f9ff;
  --primary-100: #e2f2fe;
  --primary-200: #c5e3fe;
  --primary-300: #a8d1fc;
  --primary-500: #6ea5f6;
  --primary-600: #5080d3;
  --primary-700: #375eb1;

  /* ───────── رنگ ثانویه ───────── */
  --secondary-100: #fef4e2;
  --secondary-400: #f9c192;
  --secondary-500: #f6a46e;

  /* ───────── نقش‌های دیگر — فقط جایی که فیگما عمداً استفاده کرده
     (نوار «شناسه معلم» در خانه، حباب چت معلم‌یار، Top Navigation style 3).
     برای عناصر عمومی اپ دانش‌آموز از این‌ها استفاده نکنید. ───────── */
  --teacher-50:  #f7f6ff;
  --teacher-200: #dedaff;
  --teacher-500: #9079d3;
  --manager-200: #beb1f1;
  /* Role/CollegeStudent/500 — سبز «برد/رکورد» صفحات نتیجه. قبلاً در چهار فایل
     با چهار اسم محلی تکرار شده بود. عمداً با --state-success-500 (#37b737)
     یکی نشد: فیگما در آن صفحات همین سبز را دارد و محسوساً متفاوت است. */
  --college-student-500: #2fba79;

  /* ───────── خنثی ───────── */
  --neutral-white: #ffffff;
  --neutral-100:   #f4f4f5;
  --neutral-200:   #e4e4e7;
  --neutral-300:   #d4d4d8;
  --neutral-400:   #a1a1aa;
  --neutral-500:   #71717a;
  --neutral-600:   #52525b;
  --neutral-700:   #3f3f46;
  --neutral-800:   #27272a;
  --neutral-black: #09090b;
  --neutral-mobile-bg: #fcfcfc;

  /* ───────── وضعیت ───────── */
  --state-error-500:   #ff2056;
  /* State/Info/500 — در فیگما وجود داشت (قلم آبی وایت‌برد، 8304:29941) ولی در
     مقیاس محلی نبود. طبق تصمیم طراح رسمی شد و سه‌گانه‌ی state را کامل می‌کند. */
  --state-info-500:    #0092ed;
  --state-success-500: #37b737;

  /* ───────── نام‌های معنایی — کد جدید باید این‌ها را صدا بزند ───────── */
  --color-bg:           var(--neutral-mobile-bg);
  --color-surface:      var(--neutral-white);
  --color-surface-alt:  var(--neutral-100);
  --color-text:         var(--neutral-black);
  --color-text-muted:   var(--neutral-500);
  --color-text-subtle:  var(--neutral-400);
  --color-border:       var(--neutral-200);
  --color-border-strong:var(--neutral-300);
  --color-brand:        var(--students-500);
  --color-brand-soft:   var(--students-200);
  --color-accent:       var(--primary-500);
  --color-accent-soft:  var(--primary-100);
  --color-danger:       var(--state-error-500);
  --color-success:      var(--state-success-500);
  --color-info:         var(--state-info-500);
  --color-on-brand:     var(--neutral-white);

  /* بک‌دراپ از خود توکن ساخته می‌شود، نه هاردکد — اگر Neutral/Black عوض شود
     بک‌دراپ هم خودکار عوض می‌شود. */
  --color-backdrop: color-mix(in srgb, var(--neutral-black) 45%, transparent);

  /* ───────── مقیاس رادیوس ───────── */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;  /* هم‌مقدار با lg — میراث فیگما، در کد جدید استفاده نکنید */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ───────── مقیاس فاصله ───────── */
  --space-none: 0px;
  --space-sm:   2px;
  --space-md:   4px;
  --space-lg:   8px;
  --space-xl:   12px;
  --space-2xl:  16px;
  --space-3xl:  24px;
  --space-4xl:  32px;

  /* ───────── تایپوگرافی ───────── */
  --font-base:    "IRANSansXFaNum", "IRANSansX", "IRANSans", Tahoma, sans-serif;
  /* ممیزی نشان داد کامپوننت Chat در فیگما هم IRANSansXFaNum است، نه BNazanin.
     نام توکن برای سازگاری با chatBot.css باقی مانده ولی به فونت پایه اشاره می‌کند. */
  --font-chatbot: var(--font-base);

  --fs-2xs: 10px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;   /* در فیگما استفاده شده بود ولی مستند نبود — طبق تصمیم طراح رسمی شد */

  --fw-reg:  400;
  --fw-med:  500;
  --fw-demi: 600;   /* فیگما اسمش را «Bold» گذاشته ولی وزنش ۶۰۰ است */
  --fw-bold: 700;

  /* فیگما همه‌جا lineHeight: 100 دارد. برای متن چندخطی فارسی غیرقابل‌خواندن است،
     پس ۱ فقط برای تک‌خطی‌ها و ۱٫۷ برای پاراگراف. */
  --lh-tight: 1;
  --lh-body:  1.7;

  /* ───────── سایه ───────── */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-xs-top: 0 -4px 2px rgba(9, 9, 11, 0.05);
  --shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-toast:  0 12px 24px rgba(40, 47, 56, 0.2);

  /* ───────── حاشیه امن دستگاه ───────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-start:  env(safe-area-inset-right, 0px); /* dir=rtl → لبه شروع سمت راست */
  --safe-end:    env(safe-area-inset-left, 0px);

  /* ───────── گرید و چیدمان — موبایل (پیش‌فرض) ─────────
     از خودِ فریم «خانه» فیگما استخراج شده (نود 10851:202304):
     مارجین ۲۴، ردیف ۳۴۲، کارت ۱۶۵×۲۴۹، فاصله ۱۲.
     ۳۹۰ − ۲×۲۴ = ۳۴۲   و   ۷۶٫۵×۲ + ۱۲ = ۱۶۵ */
  --grid-columns:  4;
  --grid-gutter:   12px;
  --grid-row-gap:  8px;
  --page-margin:   24px;
  --content-max:   342px;
  --card-min:      165px;   /* حداقل عرض کارت — تعداد ستون از همین درمی‌آید */

  --sidebar-width: 240px;
  --topbar-height: calc(52px + var(--safe-top));
  --tabs-height:   calc(64px + var(--safe-bottom));

  /* ───────── z-index ───────── */
  --z-topbar:    100;
  --z-tabs:      100;
  --z-sidebar:   150;
  --z-side-menu: 200;
  --z-modal:     300;
  --z-toast:     400;
}

/* ═══════════ تبلت ═══════════ */
@media (min-width: 768px) {
  :root {
    --grid-columns: 6;
    --grid-gutter:  16px;
    --grid-row-gap: 16px;
    --page-margin:  32px;
    --content-max:  704px;
    --card-min:     224px;
  }
}

/* ═══════════ دسکتاپ — از اینجا ساید‌بار ثابت جای تب پایین را می‌گیرد ═══════════ */
@media (min-width: 1024px) {
  :root {
    --grid-columns: 8;
    --grid-gutter:  24px;
    --grid-row-gap: 24px;
    /* زیر ۱۴۴۰ مارجین نصف می‌شود، وگرنه ساید‌بارِ ۲۴۰ کارت را از تبلت هم
       کوچک‌تر می‌کند (۹۷۶ محتوا → کارت ۲۲۶). */
    --page-margin:  16px;
    --content-max:  1200px;
    --card-min:     224px;
  }
}

@media (min-width: 1440px) {
  :root {
    --page-margin: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   نام‌های قدیمی — فقط برای اینکه ۷۹ فایل css/views/* در حین مهاجرت نشکنند.
   هر ویو که به دیزاین جدید منتقل شد، این‌ها را ترک می‌کند؛ پس از اتمام مرحله ب
   این بخش کامل حذف می‌شود. هیچ کد جدیدی نباید از این‌ها استفاده کند.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --color-primary: var(--primary-500);
  --color-primary-contrast: var(--neutral-white);
  --color-overlay: var(--color-backdrop);

  --fs-md: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}