/* ═══════════════════════════════════════════════════════════════
   پالتِ کاربر — zh-gender.css                [۲۰۲۶-۰۹-۱۷ · دستور مالک]
   ═══════════════════════════════════════════════════════════════
   سه حالت، نه دو:
     • مهمان (هنوز ثبت‌نام نکرده)  → بادمجانی
     • مرد                          → آبی/سرمه‌ای
     • زن                           → رز/بنفش (پالتِ برند)

   `data-gender` را همیشه قالبِ پایه روی <html> می‌گذارد — برای کاربرِ
   ناشناس یا جنسیتِ `unset` مقدارش `guest` است، پس هر سه حالت صریح‌اند و
   هیچ‌کدام به «نبودِ صفت» تکیه نمی‌کند.

   عمداً فقط توکن‌ها بازنویسی می‌شوند، نه کامپوننت‌ها: هر جای پروژه که از
   var(--rose)/var(--grad-1) استفاده کرده باشد خودبه‌خود همراه می‌شود و
   لازم نیست حتی یک کلاس عوض شود.

   رنگ‌ها از خانوادهٔ مات/کم‌اشباعِ پروژه‌اند (نه آبیِ اشباعِ شرکتی، نه
   بادمجانیِ تیرهٔ سنگین) تا کنارِ طلاییِ برند جیغ نشوند — همان قاعده‌ای
   که tenants/models.py برای رنگِ برندِ سالن می‌گذارد.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ مهمان — بادمجانی ═══ */
:root[data-gender="guest"]{
    --rose:#a56a92;
    --violet:#8b5a8f;
    --grad-1:linear-gradient(120deg,#a56a92 0%,#96608f 52%,#8b5a8f 100%);
    --grad:linear-gradient(120deg,#a56a92 0%,#96608f 52%,#8b5a8f 100%);
    --glow:0 8px 24px -10px rgba(165,106,146,.35);
}
:root[data-gender="guest"][data-theme="light"]{
    --rose:#6E2F6B;
    --violet:#3E2A6E;
    --grad-1:linear-gradient(120deg,#6E2F6B 0%,#562C6C 52%,#3E2A6E 100%);
    --grad:linear-gradient(120deg,#6E2F6B 0%,#562C6C 52%,#3E2A6E 100%);
    --glow:0 8px 22px -12px rgba(109,63,99,.3);
}
:root[data-gender="guest"]{
    --c-primary:#6E2F6B; --c-gradient-from:#6E2F6B; --c-gradient-to:#3E2A6E;
    --zb-brand:#6E2F6B; --zb-brand-deep:#3B2150;
}

/* ═══ مردانه — آبی/سرمه‌ای ═══ */
:root[data-gender="male"]{
    --rose:#4d9ae0;
    --violet:#6d7fd6;
    --grad-1:linear-gradient(120deg,#4d9ae0 0%,#5a86dd 52%,#6d7fd6 100%);
    --grad:linear-gradient(120deg,#4d9ae0 0%,#5a86dd 52%,#6d7fd6 100%);
    --glow:0 8px 24px -10px rgba(77,154,224,.38);
}
:root[data-gender="male"][data-theme="light"]{
    --rose:#2456A6;
    --violet:#3A3C9E;
    --grad-1:linear-gradient(120deg,#2456A6 0%,#2F48A2 52%,#3A3C9E 100%);
    --grad:linear-gradient(120deg,#2456A6 0%,#2F48A2 52%,#3A3C9E 100%);
    --glow:0 8px 22px -12px rgba(43,108,168,.32);
}
:root[data-gender="male"]{
    --c-primary:#2456A6; --c-gradient-from:#2456A6; --c-gradient-to:#3A3C9E;
    --zb-brand:#2456A6; --zb-brand-deep:#1C3F7C;
}

/* ═══ زنانه — رز/بنفشِ برند (صریح نوشته شده تا اگر پیش‌فرضِ برند عوض شد،
      تجربهٔ زنانه ثابت بماند) ═══ */
:root[data-gender="female"]{
    --rose:#c48aa2;
    --violet:#7c4ff0;
    --grad-1:linear-gradient(120deg,#a3567a 0%,#7a4a8c 52%,#584a9c 100%);
    --grad:linear-gradient(120deg,#a3567a 0%,#7a4a8c 52%,#584a9c 100%);
}
:root[data-gender="female"][data-theme="light"]{
    --rose:#7A2E4D;
    --violet:#5E2C5E;
    --grad-1:linear-gradient(120deg,#7A2E4D 0%,#5E2C5E 52%,#3A2A5E 100%);
    --grad:linear-gradient(120deg,#7A2E4D 0%,#5E2C5E 52%,#3A2A5E 100%);
}

/* ═══════════════════════════════════════════════════════════════
   تینت‌های سفت‌شده در قالب‌ها
   ───────────────────────────────────────────────────────────────
   بعضی کارت‌ها تینتشان را به‌صورتِ inline و با عددِ خام می‌گیرند
   (مثلاً `style="--tint:255,77,141"` در هوم نوا). آن‌ها به var(--rose)
   نگاه نمی‌کنند، پس با بازنویسیِ توکن آبی/بادمجانی نمی‌شدند و مردِ
   لاگین‌کرده هنوز آیکونِ صورتی می‌دید.
   این قاعده دقیقاً همان دو تینتِ «رز» و «بنفش» را هدف می‌گیرد (با تطبیقِ
   زیررشته روی خودِ صفتِ style) و مینت/طلایی را دست نمی‌زند، چون آن دو
   لهجهٔ خنثی‌اند و تنوعِ رنگیِ عمدیِ طراحی را نگه می‌دارند.
   ═══════════════════════════════════════════════════════════════ */
:root[data-gender="male"] [style*="--tint:255,77,141"]{--tint:43,108,168}
:root[data-gender="male"] [style*="--tint:139,92,246"]{--tint:63,77,138}
:root[data-gender="male"] [style*="--tint:224,64,127"]{--tint:43,108,168}
:root[data-gender="male"] [style*="--tint:109,70,230"]{--tint:63,77,138}

:root[data-gender="guest"] [style*="--tint:255,77,141"]{--tint:109,63,99}
:root[data-gender="guest"] [style*="--tint:139,92,246"]{--tint:91,58,82}
:root[data-gender="guest"] [style*="--tint:224,64,127"]{--tint:109,63,99}
:root[data-gender="guest"] [style*="--tint:109,70,230"]{--tint:91,58,82}

/* ═══════════════════════════════════════════════════════════════
   حسِ زنده‌بودن — [۲۰۲۶-۰۹-۱۷ · دستور مالک: «گرادیان‌های واقعا زیبا و
   خلاقانه متحرک با پترن‌های زیبا»]
   ───────────────────────────────────────────────────────────────
   ۱) زاویهٔ خودِ گرادیانِ --grad-1/--grad را با @property انیمیت می‌کنیم
      — یعنی هر جای پروژه که از این دو متغیر استفاده کرده (بدونِ تغییرِ
      حتی یک کلاس) خودبه‌خود کمی «می‌چرخد»، خیلی آرام و بی‌صدا.
   ۲) کلاسِ کمکیِ .zb-alive برای سطح‌های اصلی (هیرو، CTA اصلی): ضربانِ
      نرمِ سایه + گرادیانِ متحرکِ background-position.
   ۳) کلاسِ کمکیِ .zb-pattern: پترنِ نقطه‌چینِ ظریف از خودِ رنگِ جنسیت،
      برای پشتِ هیرو/کارت‌های بزرگ — بدونِ فایلِ تصویرِ اضافه.
   همه‌چیز پشتِ prefers-reduced-motion خاموش می‌شود.
   ═══════════════════════════════════════════════════════════════ */
@property --zb-grad-angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 120deg;
}
:root {
    --zb-grad-angle: 120deg;
    animation: zbGradDrift 22s linear infinite;
}
@keyframes zbGradDrift {
    to { --zb-grad-angle: 480deg; }
}
:root[data-gender="guest"],:root[data-gender="guest"][data-theme="light"]{
    --grad-1:linear-gradient(var(--zb-grad-angle),#6E2F6B 0%,#562C6C 52%,#3E2A6E 100%);
    --grad:linear-gradient(var(--zb-grad-angle),#6E2F6B 0%,#562C6C 52%,#3E2A6E 100%);
}
:root[data-gender="guest"]{
    --grad-1:linear-gradient(var(--zb-grad-angle),#a56a92 0%,#96608f 52%,#8b5a8f 100%);
    --grad:linear-gradient(var(--zb-grad-angle),#a56a92 0%,#96608f 52%,#8b5a8f 100%);
}
:root[data-gender="male"],:root[data-gender="male"][data-theme="light"]{
    --grad-1:linear-gradient(var(--zb-grad-angle),#2456A6 0%,#2F48A2 52%,#3A3C9E 100%);
    --grad:linear-gradient(var(--zb-grad-angle),#2456A6 0%,#2F48A2 52%,#3A3C9E 100%);
}
:root[data-gender="male"]{
    --grad-1:linear-gradient(var(--zb-grad-angle),#4d9ae0 0%,#5a86dd 52%,#6d7fd6 100%);
    --grad:linear-gradient(var(--zb-grad-angle),#4d9ae0 0%,#5a86dd 52%,#6d7fd6 100%);
}
:root[data-gender="female"],:root[data-gender="female"][data-theme="light"]{
    --grad-1:linear-gradient(var(--zb-grad-angle),#7A2E4D 0%,#5E2C5E 52%,#3A2A5E 100%);
    --grad:linear-gradient(var(--zb-grad-angle),#7A2E4D 0%,#5E2C5E 52%,#3A2A5E 100%);
}
:root[data-gender="female"]{
    --grad-1:linear-gradient(var(--zb-grad-angle),#a3567a 0%,#7a4a8c 52%,#584a9c 100%);
    --grad:linear-gradient(var(--zb-grad-angle),#a3567a 0%,#7a4a8c 52%,#584a9c 100%);
}

.zb-alive{position:relative;animation:zbBreathe 4.5s ease-in-out infinite}
@keyframes zbBreathe{
    0%,100%{box-shadow:0 8px 24px -10px color-mix(in srgb,var(--rose) 55%,transparent)}
    50%{box-shadow:0 12px 34px -8px color-mix(in srgb,var(--rose) 75%,transparent)}
}
.zb-pulse-dot{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--rose);flex:none}
.zb-pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rose);
    animation:zbPulseRing 1.8s ease-out infinite}
@keyframes zbPulseRing{
    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rose) 55%,transparent)}
    70%,100%{box-shadow:0 0 0 9px transparent}
}

.zb-pattern{position:relative;isolation:isolate}
.zb-pattern::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    opacity:.5;background-image:radial-gradient(color-mix(in srgb,var(--rose) 55%,transparent) 1px,transparent 1.6px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(120% 100% at 85% 0%,#000 0%,transparent 72%);
    mask-image:radial-gradient(120% 100% at 85% 0%,#000 0%,transparent 72%)}

@media (prefers-reduced-motion:reduce){
    :root{animation:none}
    .zb-alive,.zb-pulse-dot::after{animation:none}
}