/* ==================================================================
   توکن‌های طراحیِ پنل — تنها منبعِ حقیقتِ مقادیرِ سراسری
   ==================================================================
   این فایل فقط متغیر دارد و هیچ قاعده‌ی استایلی ندارد. هر عددی که در بیش از
   یک جا تکرار می‌شود (رنگ، فاصله، گردیِ گوشه، ضخامتِ خط، مدت و منحنیِ
   انیمیشن، سایه، اندازه‌ی فونت، لایه‌ی z-index) باید از این‌جا بیاید، نه
   به‌صورتِ عددِ خام در style.css، تمپلیت یا جاوااسکریپت.

   سه لایه، از پایین به بالا:
     ۱. پایه (primitive): رمپ‌های رنگ و مقیاس‌های عددی. اسمشان فقط «چه
        هستند» را می‌گوید (--gray-300، --space-4) نه «کجا استفاده می‌شوند».
     ۲. معنایی (semantic): نقش‌ها (--color-danger، --radius-control،
        --surface-hover). کامپوننت‌ها فقط از این لایه می‌خوانند، پس عوضِ
        کردنِ حسِ کلِ پنل (مثلاً «گوشه‌ها را کمی تیزتر کن») یک خط تغییر است.
     ۳. کامپوننت: اندازه‌های ثابتِ یک کنترل (--control-h)، که از دو لایه‌ی
        بالا ساخته می‌شوند.

   Tailwind هم به همین متغیرها نگاشت شده (نگاه کن به
   dashboard/_panel_head_assets.html) تا کلاس‌هایی مثل p-4، rounded-lg،
   text-sm، text-gray-600 که در تمپلیت و JS پخش‌اند، از همین مقیاس‌ها
   بخوانند و جدا از آن‌ها عددِ دیگری نداشته باشند.

   صفحه‌ی ورود (accounts) هم همین فایل را لود می‌کند؛ پس دیگر هیچ کپیِ دستیِ
   پالت وجود ندارد.
   ================================================================== */

:root {
  /* ================================================================
     ۱. پایه — رمپ‌های رنگ
     ================================================================ */

  /* خاکستریِ خنثی (نه بژ: بژِ گرم کنارِ نارنجی «خاکی» می‌شد). */
  --gray-50: #f7f8fa;
  --gray-100: #eef1f4;
  --gray-200: #e3e7eb;
  --gray-300: #cfd5db;
  --gray-400: #a3aab3;
  --gray-500: #858b94;
  --gray-600: #626871;
  --gray-700: #494e56;
  --gray-800: #2e323a;
  --gray-900: #16181c;

  /* نارنجیِ برند. در Tailwind زیرِ اسمِ «blue» نگاشت شده (اسمِ کلاس عمداً
     عوض نشد تا هیچ فایلِ JS دست نخورد). */
  --brand-50: #fff7ef;
  --brand-100: #ffe8cf;
  --brand-200: #ffd7ae;
  --brand-300: #ffb570;
  --brand-400: #ff8f2e;
  --brand-500: #e2650f;
  --brand-600: #b25708;
  --brand-700: #8f4506;
  --brand-800: #6f3505;
  --brand-900: #522704;

  --red-50: #fee9eb;
  --red-100: #fdd8dc;
  --red-200: #f8ccd2;
  --red-300: #f2a3ad;
  --red-400: #e64a5e;
  --red-500: #df3349;
  --red-600: #d92137;
  --red-700: #b5182b;

  --green-50: #e3f7e8;
  --green-100: #d1f0d9;
  --green-200: #bfe6c8;
  --green-300: #8ed5a2;
  --green-400: #3da05f;
  --green-500: #22904b;
  --green-600: #15803d;
  --green-700: #116631;

  --yellow-50: #fdf5d2;
  --yellow-100: #faedb4;
  --yellow-200: #f2e29a;
  --yellow-300: #dcc25c;
  --yellow-400: #c4a017;
  --yellow-500: #ad8a0f;
  --yellow-600: #9a7209;
  --yellow-700: #7d5c06;

  /* ================================================================
     ۲. معنایی — رنگ
     ================================================================ */

  /* --- سطح و متن --- */
  --page-bg: #f4f6f8;
  --surface: #ffffff;
  --surface-sunken: var(--gray-50);   /* گروهِ فیلد، فرورفتگی‌ها */
  --divider: #edf0f3;

  --text: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);

  /* --- hover و خط ---
     قاعده: hover روی ردیفِ جدول، کارت و باکس *هیچ‌وقت* نارنجی نیست. نارنجی
     رنگِ «عمل» و «انتخاب‌شده» است؛ اگر هر ردیفی که ماوس از رویش رد می‌شود
     نارنجی شود، دیگر نمی‌شود فهمید کدام ردیف واقعاً انتخاب شده. hover فقط یک
     پله تیره‌ترشدنِ خاکستری است. */
  --surface-hover: var(--gray-100);
  --hairline: var(--gray-200);        /* تنها ضخامتِ مجازِ خط: ۱ پیکسل */
  --border-strong: var(--gray-300);   /* خطِ hoverشده / ورودیِ hoverشده */

  /* --- رنگِ برند و عمل: نارنجیِ روشن ---
     دکمه‌ی اصلی متنِ تیره روی نارنجی دارد نه سفید: تیره کنتراستِ ~۶٫۵ می‌دهد،
     سفید زیرِ ۲٫۵ می‌افتد. */
  --color-accent: var(--brand-400);
  --color-accent-dark: #f07a10;
  --color-accent-ink: #3d2206;
  --color-accent-soft: var(--brand-100);
  --color-accent-softer: var(--brand-50);
  --color-accent-border: var(--brand-200);
  /* نارنجیِ خواندنی روی سفید — فقط برای متن/آیکونِ کوچک. */
  --color-accent-text: var(--brand-600);
  --color-accent-ring: rgba(255, 143, 46, 0.28);

  /* --- ساختار: خاکستریِ تیره (سرصفحه، سرستون) --- */
  --color-primary: #333a44;
  --color-primary-dark: #242a33;
  --color-primary-deep: #171b21;
  --color-primary-soft: #e5e8ec;
  --color-primary-softer: #f5f7f9;

  /* --- وضعیت‌ها: fillِ ملایم + متنِ هم‌خانواده + خطِ هم‌خانواده --- */
  --color-success: var(--green-600);
  --color-success-dark: var(--green-700);
  --color-success-bg: var(--green-50);
  --color-success-bg-soft: #f3fbf5;
  --color-success-border: var(--green-200);
  --color-success-text: var(--green-600);

  --color-danger: var(--red-600);
  --color-danger-dark: var(--red-700);
  --color-danger-bg: var(--red-50);
  --color-danger-bg-strong: var(--red-100);
  --color-danger-border: var(--red-200);
  --color-danger-border-strong: var(--red-300);
  --color-danger-ring: rgba(217, 33, 55, 0.22);

  /* «منتظر» زرد است نه نارنجی: نارنجی رنگِ برند است. */
  --color-warning: var(--yellow-600);
  --color-warning-bg: var(--yellow-50);
  --color-warning-bg-soft: #fffaea;
  --color-warning-bg-strong: var(--yellow-100);
  --color-warning-border: var(--yellow-200);
  --color-warning-border-strong: var(--yellow-300);
  --color-warning-text: var(--yellow-700);

  /* «تازه ثبت‌نام کرده» — نه خوب است نه بد، فقط جدید. */
  --color-new: #1d4ed8;
  --color-new-bg: #e7effe;

  /* خنثی: پایه و رشته داده‌ی توصیفی‌اند، نه وضعیت. */
  --color-info-bg: var(--gray-100);
  --color-info-text: var(--gray-700);

  /* سازگاری با اسم‌های قدیمی */
  --color-border: var(--hairline);
  --color-text: var(--text);

  /* --- نمودار --- */
  --viz-series: var(--brand-500);
  --viz-series-wash: rgba(226, 101, 15, 0.12);
  --viz-grid: var(--gray-200);
  --viz-axis: #c3c9d0;
  --viz-muted: var(--gray-500);

  --overlay-bg: rgba(22, 24, 28, 0.45);
  --scrollbar-thumb: #d3d8de;
  --scrollbar-thumb-hover: var(--gray-400);
  --scrollbar-size: var(--space-2);

  /* --- روی زمینه‌ی تیره (سرصفحه) ---
     دکمه‌ی ثانویه روی نوارِ تیره شیشه‌ای است: هم‌رنگِ نوار ولی خوانا. */
  --on-dark-text: #ffffff;
  --on-dark-text-muted: rgba(255, 255, 255, 0.72);
  --on-dark-surface: rgba(255, 255, 255, 0.13);
  --on-dark-surface-hover: rgba(255, 255, 255, 0.22);
  --on-dark-border: rgba(255, 255, 255, 0.3);
  --on-dark-border-hover: rgba(255, 255, 255, 0.45);

  /* ================================================================
     ۱. پایه — تایپوگرافی
     ================================================================ */
  --font-sans: 'Peyda', Tahoma, 'Segoe UI', sans-serif;

  /* rem نه px: اگر کاربر اندازه‌ی فونتِ مرورگر را بزرگ کرده، پنل هم باید
     بزرگ شود. */
  --text-2xs: 0.6875rem;   /* 11 — شمارنده‌ها */
  --text-xs: 0.75rem;      /* 12 — سرستون، برچسب، توضیحِ فرعی */
  --text-compact: 0.8125rem; /* 13 — چیپ، گزینه‌ی منو، سلول‌های فشرده */
  --text-sm: 0.875rem;     /* 14 — متنِ اصلیِ رابط */
  --text-base: 1rem;       /* 16 */
  --text-lg: 1.125rem;     /* 18 */
  --text-xl: 1.25rem;      /* 20 */
  --text-2xl: 1.5rem;      /* 24 */
  --text-3xl: 1.875rem;    /* 30 */
  --text-4xl: 2.25rem;     /* 36 */
  --text-5xl: 3rem;        /* 48 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ارتفاعِ خط: متنِ فارسی (با اعراب و نقطه‌های بالا و پایین) از لاتین
     بلندتر می‌خواهد؛ 1.5 در پیدا کمی فشرده می‌شد. */
  --leading-tight: 1.35;   /* عنوان‌ها و اعدادِ درشت */
  --leading-normal: 1.65;  /* متنِ عادی */
  --leading-control: 1.5;  /* متنِ تک‌خطیِ داخلِ دکمه و ورودی */

  /* ================================================================
     ۱. پایه — فاصله (مقیاسِ ۴پیکسلی)
     ================================================================
     همه‌ی padding / margin / gap از مضرب‌های این واحد می‌آیند. Tailwind هم
     با همین واحد کار می‌کند (p-4 = 4 × واحد)، پس ظرفِ تمپلیت و ظرفِ CSS
     هیچ‌وقت از هم دور نمی‌شوند. */
  --space-unit: 0.25rem;
  --space-0-5: calc(var(--space-unit) * 0.5);  /*  2 */
  --space-1: calc(var(--space-unit) * 1);      /*  4 */
  --space-1-5: calc(var(--space-unit) * 1.5);  /*  6 */
  --space-2: calc(var(--space-unit) * 2);      /*  8 */
  --space-2-5: calc(var(--space-unit) * 2.5);  /* 10 */
  --space-3: calc(var(--space-unit) * 3);      /* 12 */
  --space-3-5: calc(var(--space-unit) * 3.5);  /* 14 */
  --space-4: calc(var(--space-unit) * 4);      /* 16 */
  --space-4-5: calc(var(--space-unit) * 4.5);  /* 18 */
  --space-5: calc(var(--space-unit) * 5);      /* 20 */
  --space-6: calc(var(--space-unit) * 6);      /* 24 */
  --space-8: calc(var(--space-unit) * 8);      /* 32 */
  --space-10: calc(var(--space-unit) * 10);    /* 40 */
  --space-12: calc(var(--space-unit) * 12);    /* 48 */

  /* ================================================================
     ۱. پایه — گردیِ گوشه
     ================================================================
     «گرد، ولی نه خیلی گرد»: کوچک‌ترین گام ۴ و بزرگ‌ترین گامِ مستطیلی ۱۲ است.
     قبلاً ۶، ۷، ۸، ۱۰، ۱۱، ۱۴، ۱۶ و ۲۰ پیکسل همه‌جا قاطی بود -- یعنی هیچ
     قاعده‌ای نبود و هر عنصر کمی با همسایه‌اش فرق داشت. pill (۹۹۹) فقط برای
     نقطه، شمارنده و نوارِ پیشرفت است. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* معنایی: کامپوننت‌ها از این‌ها می‌خوانند نه از مقیاسِ بالا. */
  --radius-badge: var(--radius-sm);
  --radius-control: var(--radius-md);   /* دکمه، ورودی، چیپ، تب، آیتمِ منو */
  --radius-surface: var(--radius-lg);   /* کارت، جدول، باکسِ اطلاع‌رسانی */
  --radius-overlay: var(--radius-xl);   /* مودال، لوگو */

  /* برای سازگاری با کدِ قبلی */
  --radius: var(--radius-surface);

  /* ================================================================
     ۱. پایه — خط
     ================================================================ */
  --border-width: 1px;
  --border-width-thick: 3px;   /* نوارِ زیرِ سرصفحه، زیرخطِ تبِ فعال، خطِ کناریِ پاسخ */
  --border: var(--border-width) solid var(--hairline);

  /* ================================================================
     ۱. پایه — سایه
     ================================================================ */
  --shadow-xs: 0 1px 2px rgba(22, 24, 28, 0.05);
  --shadow-sm: 0 2px 6px rgba(22, 24, 28, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 24, 28, 0.12);
  --shadow-lg: 0 18px 44px rgba(22, 24, 28, 0.24);

  --shadow-card: var(--shadow-xs);
  --shadow-pop: var(--shadow-md);

  /* حلقه‌ی فوکوس: همه‌ی کنترل‌ها دقیقاً همین را می‌گیرند. */
  --ring-width: 3px;
  --focus-ring: 0 0 0 var(--ring-width) var(--color-accent-ring);
  --focus-ring-danger: 0 0 0 var(--ring-width) var(--color-danger-ring);

  /* ================================================================
     ۱. پایه — حرکت
     ================================================================
     سه مدت، دو منحنی. هر transition در پنل از این‌ها ساخته می‌شود تا حسِ
     حرکت یکدست باشد (قبلاً ۰٫۱۳، ۰٫۱۵، ۰٫۱۸ و ۰٫۳ ثانیه قاطی بود). */
  --duration-fast: 120ms;    /* hover، تغییرِ رنگ */
  --duration-base: 180ms;    /* باز/بسته‌شدنِ منو، چرخشِ فلش */
  --duration-slow: 300ms;    /* پرشدنِ نوار، ظاهرشدنِ مودال */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* کنترلی که فقط رنگش با hover/focus عوض می‌شود. */
  --transition-colors:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);

  /* ================================================================
     ۱. پایه — لایه‌ها (z-index)
     ================================================================
     ترتیبِ قطعی: سلول‌های چسبان < مودال < toast < دراپ‌دان < تولتیپ. دراپ‌دان
     باید بالای مودال باشد چون داخلِ مودال باز می‌شود، و تولتیپ بالای همه. */
  --z-raised: 5;
  --z-sticky: 10;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-dropdown: 3000;
  --z-tooltip: 4000;

  /* ================================================================
     ۳. کامپوننت — اندازه‌ی کنترل‌ها
     ================================================================
     ارتفاعِ ثابت به‌جای padding: قبلاً دکمه، ورودی و دراپ‌دان هر کدام با
     padding و line-height خودشان ارتفاعِ کمی متفاوت (۴۰ تا ۴۳) می‌گرفتند و
     کنارِ هم در یک ردیف تراز نبودند. */
  --control-h: 2.5rem;       /* 40 — دکمه، ورودی، دراپ‌دان */
  --control-h-sm: 2rem;      /* 32 — دکمه‌ی آیکونیِ ردیفِ جدول، چیپ */
  --control-pad-x: var(--space-4);
  --control-pad-y: var(--space-2);
  --control-gap: var(--space-2);

  --opacity-disabled: 0.45;
}

/* کاربری که در سیستم‌عامل «کاهش حرکت» را روشن کرده، نباید انیمیشن ببیند.
   مدت‌ها را صفر می‌کنیم تا همه‌ی transitionها (که از توکن می‌خوانند) یک‌جا
   خاموش شوند، بدونِ لمس‌کردنِ تک‌تکِ قاعده‌ها. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}