/* ═══════════════════════════════════════════════════════════════════════
   ZIBATO — سیستمِ طراحی روی بوت‌استرپ ۵.۳     [LEAD 2026-09-10، دستور مالک]

   فلسفهٔ طراحی: «آبیِ ایرانی + لاکی» · منبع: docs/audit/DESIGN-PHILOSOPHY.md
   ────────────────────────────────────────────────────────────────────
   سندِ مالکِ طراحی همان است و بر هر سندِ دیگری اولویت دارد. اگر سندِ
   دیگری پالتِ دیگری گفت (بنفش، بادمجانی، طلایی، رُز) منسوخ است.

   شاهدِ فرشِ ایرانی: آبی زمینه است، سرخ فقط جزئیاتِ لهجه.

   اصول (ثابت، بی‌استثنا):
     • فرم: گوشهٔ نرمِ گرد. یک مقیاسِ شعاع: 14 / 20 / 28px + قرص.
       هرگز گوشهٔ تیز، هرگز شعاعِ دلبخواه.
     • عمق: سایهٔ نرمِ ته‌رنگِ سرمه‌ای، نه سیاهِ سخت، نه خطِ ضخیم.
       سه پله: نشسته، برخاسته، شناور.
     • رنگ: زمینهٔ کِرِمِ گرم، جوهرِ سرمه‌ایِ آبی، آبیِ ایرانی لهجهٔ اصلی،
       و لاکی فقط لهجهٔ کمیاب (خط، نقطه، بَجِ کوچک) · هرگز پس‌زمینهٔ دکمه.
     • فضا: سخاوتمند. صفحه نفس می‌کشد.
     • حرکت: آرام و بامعنا، همیشه با easing نرمِ واحد.
     • تصویر: عکسِ واقعی قهرمانِ بصری است، نه گرادیانِ توخالی.

   همه از متغیرهای همین بالا می‌آیند. تغییرِ کل حال‌وهوا = تغییرِ چند توکن.
   ═══════════════════════════════════════════════════════════════════════ */

:root, [data-bs-theme="light"] {
    /* [۲۰۲۶-۰۹-۱۱، دستور صریحِ مالک] تمِ اصلی رز/بنفشِ لندینگ است، درست
       استفاده‌شده روی پس‌زمینهٔ روشن: رزِ عمیق برای متن/دکمه (AA)، رزِ
       زنده‌ی لندینگ (#d65181) فقط سرِ گرادیان، بنفش لهجهٔ کمیاب. همان
       جفت‌رنگِ PlatformConfig.primary_color/secondary_color — تنها این
       توکن‌ها عوض شدند؛ نام‌ها دست‌نخورده ماندند تا login/verify/dashboard
       بدونِ تغییرِ خودشان رنگ عوض کنند. */
    --zb-ivory:  #faf7f9;   /* زمینهٔ اصلی (کِرِمِ گرم، ته‌رنگِ رز) */
    --zb-cream:  #ffffff;   /* سطحِ کارت */
    --zb-sand:   #fbeef3;   /* سکشنِ یک‌درمیان (واشِ رز) */
    --zb-plum:   #3a1330;   /* «جوهر» = بنفشِ تیره، متن و بخش‌های تیره */
    --zb-plum-2: #6b2c52;
    --zb-navy:   #26102a;   /* بنفشِ عمیق — سکشنِ تیره */
    --zb-blue:   #d6336c;   /* لهجهٔ اصلی — رزِ عمیقِ AA-امن */
    --zb-blue-2: #d65181;   /* رزِ زنده‌تر — سرِ گرادیان (همان رزِ لندینگ) */
    --zb-laki:   #7c4fe0;   /* بنفش — لهجهٔ کمیابِ دوم */
    --zb-laki-2: var(--violet);
    --zb-tint:   #fde8ef;   /* واشِ رز */
    --zb-gold:   #7c4fe0;   /* سازگاری با کلاس‌های قدیمی → همان بنفش */
    --zb-gold-2: #5b32b8;   /* بنفشِ تیره‌تر برای متن روی روشن (AA) */
    --zb-ink:    #3a1330;   /* متنِ اصلی (بنفشِ تیره) */
    --zb-ink-2:  #7a5c72;   /* متنِ فرعی */
    --zb-line:   #f0e4ea;   /* خطِ بسیار نرم */

    --zb-r-sm: 14px;
    --zb-r:    20px;
    --zb-r-lg: 28px;

    /* سایهٔ نرم، ته‌رنگِ رز */
    --zb-sh-1: 0 2px 14px -6px rgba(58,19,48,.12);
    --zb-sh-2: 0 16px 40px -20px rgba(58,19,48,.20);
    --zb-sh-3: 0 30px 64px -28px rgba(58,19,48,.28);
    --zb-sh-rose: 0 16px 40px -14px rgba(214,51,108,.42);

    --zb-grad: linear-gradient(135deg, #d6336c 0%, #d65181 100%);
    --zb-grad-laki: linear-gradient(135deg, #7c4fe0 0%, #8b5cf6 100%);
    --zb-ease: cubic-bezier(.22,1,.36,1);

    --bs-primary: #d6336c;
    --bs-primary-rgb: 214,51,108;
    --bs-primary-text-emphasis: #a02454;
    --bs-primary-bg-subtle: #fde8ef;
    --bs-primary-border-subtle: #f6c9d8;
    --bs-secondary: #7c4fe0;
    --bs-secondary-rgb: 124,79,224;
    --bs-body-bg: #faf7f9;
    --bs-body-color: #3a1330;
    --bs-secondary-color: rgba(58,19,48,.62);
    --bs-emphasis-color: #26102a;
    --bs-border-color: #f0e4ea;
    --bs-link-color: #a02454;
    --bs-link-hover-color: #7a1c40;
    --bs-link-color-rgb: 160,36,84;
    --bs-body-font-family: 'Estedad', 'Vazirmatn', system-ui, sans-serif;
    --bs-body-line-height: 1.85;
    --bs-border-radius: 20px;
    --bs-border-radius-sm: 14px;
    --bs-border-radius-lg: 28px;
    --bs-border-radius-xl: 28px;
    --bs-border-radius-pill: 999px;
}

[data-bs-theme="dark"] {
    --zb-ivory: #0b1626;  --zb-cream: #12233a;  --zb-sand: #0e1d31;
    --zb-plum: #e6eefb;   --zb-ink: #e6eefb;     --zb-ink-2: #93a4bd;
    --zb-line: rgba(255,255,255,.09);
    --bs-body-bg: #0b1626; --bs-body-color: #e6eefb;
    --bs-emphasis-color: #fff; --bs-border-color: rgba(255,255,255,.09);
    --bs-primary: #4e90dd; --bs-primary-rgb: 78,144,221;
    --bs-link-color: #78ace8; --bs-link-hover-color: #9cc3f0;
    --bs-secondary-bg: #12233a; --bs-tertiary-bg: #0e1d31;
}

/* ── پایه ── */
body { font-family: var(--bs-body-font-family); background: var(--zb-ivory); color: var(--zb-ink); }
h1,h2,h3,.h1,.h2,.h3 { font-weight: 800; letter-spacing: -.02em; }
::selection { background: rgba(26,87,167,.22); }

/* ── دکمه: قرص، نرم، با بلندشدنِ لطیف ── */
.btn { border-radius: 999px; font-weight: 700; transition: transform .25s var(--zb-ease), box-shadow .25s, background-color .2s; }
.btn-lg { padding: .7rem 1.7rem; }
/* دکمهٔ اصلی — گرادیانِ رُز-مرجانی که روی سفید می‌درخشد */
.btn-primary {
    --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
    background-image: var(--zb-grad); border: 0; color: #fff;
    box-shadow: var(--zb-sh-rose);
}
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 46px -14px rgba(26,87,167,.48); background-image: var(--zb-grad); }
.btn:active { transform: translateY(0) scale(.98); }
/* دکمهٔ خطی — لبهٔ رُز */
.btn-outline-gold {
    --bs-btn-color: #a51c30; --bs-btn-border-color: #f0cdd3;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a51c30; --bs-btn-hover-border-color: #a51c30;
    font-weight: 700;
}

/* ── کارت: گرد، سایهٔ نرم، بدون خطِ سخت ── */
.card {
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--zb-r);
    --bs-card-inner-border-radius: calc(var(--zb-r) - 1px);
    background: var(--zb-cream);
    border: 1px solid var(--zb-line);
    box-shadow: var(--zb-sh-1);
    transition: transform .35s var(--zb-ease), box-shadow .35s var(--zb-ease);
}
.card.zb-hoverable:hover { transform: translateY(-6px); box-shadow: var(--zb-sh-2); }

/* ── فرم: نرم، فوکوسِ طلایی ── */
.form-control, .form-select {
    border-radius: var(--zb-r-sm); border-color: var(--zb-line);
    background: var(--zb-cream); padding: .7rem 1rem;
}
.form-control:focus, .form-select:focus { border-color: var(--zb-blue); box-shadow: 0 0 0 .2rem rgba(26,87,167,.20); }

/* ── ناوبری ── */
.navbar { transition: background-color .3s, box-shadow .3s, padding .3s; }
.navbar.zb-nav-solid {
    background: rgba(250,249,246,.92) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 6px 26px -20px rgba(18,48,79,.5);
}
.navbar-brand { font-weight: 800; color: var(--zb-plum) !important; }
.navbar .nav-link { font-weight: 600; color: var(--zb-ink) !important; position: relative; }
.navbar .nav-link::after {
    content: ""; position: absolute; inset-inline: .75rem; bottom: .3rem; height: 2px;
    background: var(--zb-gold); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--zb-ease);
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* ── نشانِ مونوگرام (لوگو) ── */
.zb-mark {
    width: 40px; height: 40px; border-radius: var(--zb-r-sm);
    background: var(--zb-plum); color: var(--zb-gold);
    display: grid; place-items: center; font-weight: 800; flex-shrink: 0;
}

/* ── عنوانِ بخش: eyebrow طلایی + خطِ نازک ── */
.zb-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .8rem; letter-spacing: .07em; color: var(--zb-gold-2); }
.zb-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--zb-gold); }
.zb-sec-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--zb-plum); margin-top: .6rem; }

/* ── آکاردئون ── */
.accordion {
    --bs-accordion-border-color: var(--zb-line);
    --bs-accordion-active-color: var(--zb-plum);
    --bs-accordion-active-bg: var(--zb-sand);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(26,87,167,.16);
    --bs-accordion-border-radius: var(--zb-r-sm);
}
.accordion-button { font-weight: 700; }

/* ── آشکارسازیِ اسکرول ── */
.zb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--zb-ease), transform .8s var(--zb-ease); transition-delay: var(--zb-delay,0ms); }
.zb-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .zb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .btn, .card, .navbar { transition: none !important; }
}