/* ==========================================================================
   VENDORHA — پوسته‌های ظاهری
   --------------------------------------------------------------------------
   ⚠️ پوسته **رنگ برند را عوض نمی‌کند**.

   سبز وندورها در همهٔ پوسته‌ها ثابت است؛ آنچه عوض می‌شود جنس
   سطح‌هاست: شفافیت، سایه، لبه و بلور.

   هر پوسته با هر دو تم (روشن و تیره) کار می‌کند.
   ========================================================================== */

/* ==========================================================================
   ۱) کلاسیک — پیش‌فرض
   --------------------------------------------------------------------------
   بدون قاعدهٔ اضافه؛ همان چیزی که سایت از ابتدا داشته.

   سبک‌ترین گزینه و روی هر دستگاهی روان.
   ========================================================================== */


/* ==========================================================================
   ۲) شیشه‌ای — پنل‌های شفاف
   ========================================================================== */
html[data-skin="glass"] {
  /*
    ⚠️ `backdrop-filter` پرهزینه است.

    فقط روی سطح‌هایی اعمال می‌شود که کاربر واقعاً می‌بیند —
    نه هر کارتی در فهرست بلند.
  */
  --skin-blur: blur(18px) saturate(1.5);
  --skin-rim: rgba(255, 255, 255, .42);
}

html[data-skin="glass"] .card,
html[data-skin="glass"] .form-card,
html[data-skin="glass"] .auth-box,
html[data-skin="glass"] .drawer,
html[data-skin="glass"] .fmodal,
html[data-skin="glass"] .topbar {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: var(--skin-blur);
  -webkit-backdrop-filter: var(--skin-blur);
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow:
    0 8px 32px rgba(15, 23, 42, .1),
    inset 0 1px 0 var(--skin-rim);
}

html[data-skin="glass"][data-theme="dark"] {
  --skin-rim: rgba(255, 255, 255, .1);
}

html[data-skin="glass"][data-theme="dark"] .card,
html[data-skin="glass"][data-theme="dark"] .form-card,
html[data-skin="glass"][data-theme="dark"] .auth-box {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .3),
    inset 0 1px 0 var(--skin-rim);
}


/* ==========================================================================
   ۳) شیشهٔ مایع — لبه‌های نورگیر
   --------------------------------------------------------------------------
   ⚠️ حاشیهٔ گرادیانی با `border-box` ساخته می‌شود، نه
   `border-color` — چون یک حاشیهٔ تک‌رنگ نمی‌تواند درخشش
   داشته باشد.
   ========================================================================== */
html[data-skin="liquid"] {
  --skin-blur: blur(30px) saturate(1.9);
}

html[data-skin="liquid"] .card,
html[data-skin="liquid"] .form-card,
html[data-skin="liquid"] .auth-box,
html[data-skin="liquid"] .fmodal {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg,
      rgba(255, 255, 255, .5),
      rgba(255, 255, 255, .04) 42%,
      rgba(255, 255, 255, .28)) border-box;
  border: 1px solid transparent;
  backdrop-filter: var(--skin-blur);
  -webkit-backdrop-filter: var(--skin-blur);
  box-shadow:
    0 14px 44px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -14px 30px -22px rgba(255, 255, 255, .3);
}

html[data-skin="liquid"][data-theme="dark"] .card,
html[data-skin="liquid"][data-theme="dark"] .form-card,
html[data-skin="liquid"][data-theme="dark"] .auth-box,
html[data-skin="liquid"][data-theme="dark"] .fmodal {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg,
      rgba(255, 255, 255, .16),
      rgba(255, 255, 255, .02) 42%,
      rgba(255, 255, 255, .1)) border-box;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* دکمهٔ اصلی هم درخشش می‌گیرد */
html[data-skin="liquid"] .btn-primary {
  box-shadow:
    0 6px 20px color-mix(in srgb, var(--green-btn) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}


/* ==========================================================================
   ۴) نرم — سایه‌های ملایم
   --------------------------------------------------------------------------
   بدون لبهٔ سخت؛ عمق فقط با سایه ساخته می‌شود.

   مناسب صفحه‌هایی که کاربر طولانی می‌خواند.
   ========================================================================== */
html[data-skin="soft"] .card,
html[data-skin="soft"] .form-card,
html[data-skin="soft"] .auth-box,
html[data-skin="soft"] .fmodal {
  border-color: transparent;
  border-radius: 20px;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, .04),
    0 12px 32px rgba(15, 23, 42, .07);
}

html[data-skin="soft"][data-theme="dark"] .card,
html[data-skin="soft"][data-theme="dark"] .form-card,
html[data-skin="soft"][data-theme="dark"] .auth-box {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .2),
    0 12px 32px rgba(0, 0, 0, .32);
}

html[data-skin="soft"] .btn {
  border-radius: 14px;
}

html[data-skin="soft"] input,
html[data-skin="soft"] textarea,
html[data-skin="soft"] select {
  border-radius: 13px;
}


/* ==========================================================================
   موبایل — سبک‌سازی
   --------------------------------------------------------------------------
   ⚠️ `backdrop-filter` روی موبایل باتری می‌خورد و اسکرول را
   کند می‌کند.

   در صفحهٔ کوچک شفافیت دیده هم نمی‌شود چون سطح‌ها تمام‌عرض‌اند.
   ========================================================================== */
@media (max-width: 640px) {
  html[data-skin="glass"] .card,
  html[data-skin="glass"] .form-card,
  html[data-skin="glass"] .auth-box,
  html[data-skin="liquid"] .card,
  html[data-skin="liquid"] .form-card,
  html[data-skin="liquid"] .auth-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}

/*
  دستگاه‌هایی که `backdrop-filter` ندارند — سطح مات می‌شود تا
  متن روی پس‌زمینه گم نشود.
*/
@supports not (backdrop-filter: blur(1px)) {
  html[data-skin="glass"] .card,
  html[data-skin="glass"] .form-card,
  html[data-skin="glass"] .auth-box,
  html[data-skin="liquid"] .card,
  html[data-skin="liquid"] .form-card,
  html[data-skin="liquid"] .auth-box {
    background: var(--surface);
  }
}