/* ===================================================================
   سیستمِ رنگِ سراسریِ سایت — حالتِ تیره (پیش‌فرض) و روشن
   هر رنگِ سایت باید از این متغیرها استفاده کنه، نه مقدارِ ثابت.
   حالتِ روشن با گذاشتنِ data-theme="light" رویِ <html> فعال می‌شه
   (نگاه کن به shared/config.js).
   =================================================================== */

:root{
  /* --- پس‌زمینه‌ها --- */
  --jn-bg-0: #050914;      /* عمیق‌ترین لایه (گرادینت‌ها/هیرو) */
  --jn-bg-1: #0b1220;      /* پس‌زمینه‌ی اصلیِ صفحه */
  --jn-bg-2: #0d1626;      /* کارت/پنل */
  --jn-bg-3: #101a2e;      /* کارتِ بالاتر/هاور */
  --jn-bg-0-rgb: 5,9,20;
  --jn-bg-1-rgb: 11,18,32;
  --jn-bg-2-rgb: 13,22,38;

  /* رنگِ «جوهریِ» ثابت — برایِ متنِ تیره‌ای که رویِ یه چیپ/دکمه‌یِ توپر و
     پررنگ می‌شینه (مثلِ متنِ مشکی رویِ دکمه‌ی سبز)؛ چون خودِ اون پس‌زمینه
     در هر دو حالت پررنگ می‌مونه، این رنگ لازم نیست با تم عوض بشه */
  --jn-ink: #0a0f18;

  /* روکشِ ثابتِ روشن — برایِ عناصرِ کوچیکی مثلِ دسته‌یِ سوییچ یا چیپِ برچسب
     که باید در هر دو حالت، روشن/خنثی بمونن (نه با تم عوض بشن) */
  --jn-paper: #c3cee6;

  /* --- خط و مرز --- */
  --jn-border: #1e2a3a;
  --jn-border-strong: #2d3748;

  /* --- متن --- */
  --jn-text-1: #e8f0fa;    /* اصلی */
  --jn-text-1-rgb: 232,240,250;
  --jn-text-2: #c3cee6;    /* ثانویه */
  --jn-text-3: #7c88a8;    /* کم‌رنگ/توضیحی */
  --jn-text-3-rgb: 124,136,168;

  /* --- روکشِ هاور/فشردن (برایِ rgba(var(--jn-overlay-rgb),X)) --- */
  --jn-overlay-rgb: 255,255,255;

  /* --- رنگ‌هایِ هویتی: نسخه‌یِ «توپر» برایِ پس‌زمینه/مرز/گلو --- */
  --jn-cyan: #00f5ff;
  --jn-cyan-rgb: 0,245,255;
  --jn-cyan-2: #00ffee;
  --jn-cyan-2-rgb: 0,255,238;
  --jn-blue: #0088ff;
  --jn-blue-rgb: 0,136,255;

  --jn-green: #00e5a0;
  --jn-green-rgb: 0,229,160;
  --jn-green-2: #00ff88;
  --jn-green-2-rgb: 0,255,136;

  --jn-red: #ff3b5c;
  --jn-red-rgb: 255,59,92;
  --jn-red-2: #ff5370;
  --jn-red-2-rgb: 255,83,112;

  --jn-purple: #8b5cf6;
  --jn-purple-rgb: 139,92,246;
  --jn-purple-2: #7c5cff;
  --jn-purple-2-rgb: 124,92,255;

  --jn-gold: #ffb84d;
  --jn-gold-rgb: 255,184,77;

  /* --- نسخه‌یِ «متنی» برایِ استفاده‌یِ مستقیم به‌عنوانِ رنگِ متن/آیکون
         رویِ پس‌زمینه‌یِ صفحه (نه رویِ یه چیپِ توپر) — در حالتِ تیره
         همون رنگِ هویتیه، در حالتِ روشن تیره‌تر می‌شه تا خوانا بمونه --- */
  --jn-cyan-text: var(--jn-cyan);
  --jn-green-text: var(--jn-green);
  --jn-green-2-text: var(--jn-green-2);
  --jn-red-text: var(--jn-red);
  --jn-red-2-text: var(--jn-red-2);
  --jn-purple-text: var(--jn-purple);
  --jn-purple-2-text: var(--jn-purple-2);
  --jn-gold-text: var(--jn-gold);

  /* فرمولِ تقویتِ متن‌هایِ کم‌رنگ — جاهایی که با rgba(var(--jn-text-1-rgb),N) یه متنِ ثانویه/ */
  /* کم‌اهمیت می‌سازن (مثلِ تبِ انتخاب‌نشده یا متنِ راهنمای خالیِ یه پنل). این شفافیت‌ها برایِ   */
  /* حالتِ تیره تنظیم شده بودن (حتی خیلی کم‌هاشون، مثلِ ۰.۲، روی زمینه‌ی تیره چشمگیرن)، ولی   */
  /* دقیقاً همون عددِ کم روی زمینه‌ی روشن تقریباً نامرئی می‌شه. به‌جایِ ضربِ ساده (که برایِ      */
  /* عددهایِ خیلی کوچیک ناکافیه)، با calc(1 - (1-N) * K) فاصله‌شون رو تا کدریِ کامل «فشرده»    */
  /* می‌کنیم — این‌جوری حتی ۰.۲ هم به یه خاکستریِ خوانا می‌رسه، بدونِ اینکه لازم باشه تک‌تکِ     */
  /* ده‌ها جایی که ازش استفاده شده دست بخوره */
  --jn-dim-compress: 1;

  color-scheme: dark;
}

:root[data-theme="light"]{
  /* --- پس‌زمینه‌ها --- */
  --jn-bg-0: #e9edf7;
  --jn-bg-1: #f4f6fb;
  --jn-bg-2: #ffffff;
  --jn-bg-3: #eef2fa;
  --jn-bg-0-rgb: 233,237,247;
  --jn-bg-1-rgb: 244,246,251;
  --jn-bg-2-rgb: 255,255,255;

  /* --- خط و مرز --- */
  --jn-border: #dbe2f0;
  --jn-border-strong: #c3cce2;

  /* --- متن --- */
  --jn-text-1: #101a2e;
  --jn-text-1-rgb: 16,26,46;
  --jn-text-2: #303c58;
  --jn-text-3: #5b6684;
  --jn-text-3-rgb: 91,102,132;

  /* --- روکشِ هاور: در روشن باید تیره کنه نه روشن --- */
  --jn-overlay-rgb: 16,26,46;

  /* --- نسخه‌یِ توپر: تقریباً همون، فقط کمی برایِ تضاد رویِ سفید تنظیم شده --- */
  --jn-cyan: #00c2d6;
  --jn-cyan-rgb: 0,194,214;
  --jn-cyan-2: #00acc9;
  --jn-cyan-2-rgb: 0,172,201;
  --jn-blue: #0066cc;
  --jn-blue-rgb: 0,102,204;

  --jn-green: #00a876;
  --jn-green-rgb: 0,168,118;
  --jn-green-2: #009e63;
  --jn-green-2-rgb: 0,158,99;

  --jn-red: #e0294f;
  --jn-red-rgb: 224,41,79;
  --jn-red-2: #d5335c;
  --jn-red-2-rgb: 213,51,92;

  --jn-purple: #7c3aed;
  --jn-purple-rgb: 124,58,237;
  --jn-purple-2: #6d28d9;
  --jn-purple-2-rgb: 109,40,217;

  --jn-gold: #b3690a;
  --jn-gold-rgb: 179,105,10;

  /* --- نسخه‌یِ متنی: تیره‌تر از نسخه‌یِ توپر تا رویِ سفید خوانا بمونه --- */
  --jn-cyan-text: #0089a3;
  --jn-green-text: #00805a;
  --jn-green-2-text: #00754f;
  --jn-red-text: #c81e42;
  --jn-red-2-text: #b62249;
  --jn-purple-text: #6d28d9;
  --jn-purple-2-text: #6425d6;
  --jn-gold-text: #92600a;

  /* فاصله‌یِ همون متن‌های کم‌رنگ تا کدریِ کامل، ۴۵٪ فشرده می‌شه — مثلاً N=۰.۲ (تقریباً نامرئی) */
  /* به ۰.۵۶ می‌رسه، N=۰.۵۵ به ۰.۷۵، N=۰.۹۲ به ۰.۹۶ — همه‌جا خواناتر، ولی سلسله‌مراتب حفظ می‌شه */
  --jn-dim-compress: .55;

  color-scheme: light;
}

/* ===================================================================
   دکمه‌یِ تغییرِ حالت (تزریق‌شده توسطِ shared/config.js رویِ همه‌یِ صفحه‌ها)
   =================================================================== */
#jnThemeToggle{
  position: fixed;
  /* پیش‌فرض: صفحاتی که هیچ‌کدوم از تاپ‌بار/هدرِ زیر رو ندارن (صفحاتِ ورود/ثبت‌نام) —
     چون اون‌جا لوگو وسطِ کارتِ صفحه‌ست نه توی یه نوارِ بالا، همین‌جا-نزدیکِ گوشه کافیه */
  top: 12px;
  right: 12px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--jn-border);
  background: var(--jn-bg-2);
  color: var(--jn-text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  padding: 0;
}
#jnThemeToggle:hover{
  transform: translateY(-2px);
  border-color: var(--jn-cyan);
}
#jnThemeToggle svg{ width: 18px; height: 18px; }
#jnThemeToggle .jn-icon-sun{ display: none; }
:root[data-theme="light"] #jnThemeToggle .jn-icon-moon{ display: none; }
:root[data-theme="light"] #jnThemeToggle .jn-icon-sun{ display: block; }

/* حالتِ inline: وقتی shared/config.js دکمه رو مستقیم آخرِ ردیفِ بالا (کنارِ
   لوگو، جایِ آیتمِ چپ‌ترینِ فعلی) اضافه می‌کنه — دیگه شناور نیست، عضوِ عادیِ
   همون فلکسه، پس فاصله/تراز رو خودِ فلکسِ والد (gap/align-items) مدیریت می‌کنه */
#jnThemeToggle.jn-toggle-inline{
  position: static;
  flex: none;
  box-shadow: none;
}
.jn-toggle-inline-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 480px){
  #jnThemeToggle{ width: 36px; height: 36px; }
}