/* سیستم برند دنتیوال (نشان، لوگوتایپ، lockup) — بعد از site.css بارگذاری می‌شود تا مقادیر نشان را بازنویسی کند؛ --brand-clear فاصلهٔ آزاد را یک‌چهارم اندازهٔ نشان نگه می‌دارد */

/* اندازهٔ نشان متغیر است تا همهٔ نسخه‌ها از یک منبع مقیاس بگیرند؛ ۲٫۲۵rem همان اندازهٔ فعلی هدر */
.brand-mark {
  --brand-mark-size: 2.25rem;
  inline-size: var(--brand-mark-size);
  block-size: var(--brand-mark-size);
  flex: 0 0 auto;
  color: var(--color-brand);
}

/* فاصلهٔ آزاد به اندازهٔ نشان گره خورده تا در هر مقیاس نسبت حفظ شود */
.brand,
.brand-lockup {
  --brand-clear: calc(var(--brand-mark-size, 2.25rem) / 4);
}

/* --- گونه‌های اندازه ------------------------------------------------------ */
/* xs برای فاوآیکن‌مانند و نشان‌های درون‌متنی؛ در این اندازه فقط نشان می‌آید */
.brand--xs .brand-mark { --brand-mark-size: 1.25rem; }
.brand--sm .brand-mark { --brand-mark-size: 1.75rem; }
.brand--lg .brand-mark { --brand-mark-size: 2.75rem; }
/* xl برای صفحات ورود و ثبت‌نام که نشان نقش تصویر اصلی را دارد */
.brand--xl .brand-mark { --brand-mark-size: 4rem; }

.brand--xs .brand-text { font-size: var(--fs-sm); }
.brand--sm .brand-text { font-size: var(--fs-lg); }
.brand--lg .brand-text { font-size: var(--fs-2xl); }
.brand--xl .brand-text { font-size: var(--fs-3xl); }

/* --- قفل‌شدهٔ ترکیبی: نشان + لوگوتایپ ------------------------------------ */
/* چیدمان منطقی (inline-flex + gap) است تا در RTL و LTR یکسان درست بنشیند */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
}

.brand-lockup:hover,
.brand-lockup:focus-visible {
  text-decoration: none;
}

/* بلوک متنی: نام برند و توضیح یک‌خطی زیر آن */
.brand-lockup-text {
  display: flex;
  flex-direction: column;
  /* خط ابتدای متن باید با بالای نشان هم‌تراز شود، نه با مرکزش */
  justify-content: center;
  gap: 0.125rem;
  min-inline-size: 0;
}

.brand-lockup-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-strong);
  white-space: nowrap;
}

/* توضیح کنار نام در اندازه‌های کوچک حذف می‌شود چون خوانا نیست و فقط شلوغی می‌سازد */
.brand-lockup-tagline {
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brand--xs .brand-lockup-name,
.brand--sm .brand-lockup-name { font-size: var(--fs-lg); }
.brand--lg .brand-lockup-name { font-size: var(--fs-2xl); }
.brand--xl .brand-lockup-name { font-size: var(--fs-3xl); }

.brand--xs .brand-lockup-tagline { display: none; }

/* --- نسخهٔ معکوس برای زمینهٔ تیره ---------------------------------------- */
/* نشان رنگ را از currentColor می‌گیرد، پس فقط کافی است color را عوض کنیم */
.brand--inverse .brand-mark { color: var(--color-text-inverse); }
.brand--inverse .brand-lockup-name { color: var(--color-text-inverse); }
.brand--inverse .brand-lockup-tagline { color: var(--color-inverse-text-muted); }

/* روی زمینهٔ برند از توکن مخصوص همان زمینه استفاده می‌شود؛ در حالت تیره که زمینهٔ برند روشن می‌شود، این توکن هم تیره می‌شود و کنتراست حفظ می‌ماند */
.brand--on-brand .brand-mark { color: var(--color-text-on-brand); }
.brand--on-brand .brand-lockup-name { color: var(--color-text-on-brand); }

/* --- تطبیق با حالت تیرهٔ سیستم ------------------------------------------ */
/* در حالت تیره نشان با سبز روشن‌تر خوانا می‌ماند؛ c-brand-600 روی زمینهٔ تیره کنتراست کافی ندارد */
@media (prefers-color-scheme: dark) {
  /* گونه‌های معکوس و روی‌زمینهٔ‌برند رنگ خودشان را دارند و باید مستثنا شوند */
  .brand:not(.brand--inverse):not(.brand--on-brand) .brand-mark,
  .brand-lockup:not(.brand--inverse):not(.brand--on-brand) .brand-mark {
    color: var(--color-inverse-brand-mark);
  }
}

/* --- کاربردهای خاص ------------------------------------------------------- */
/* هدر پنل و نوار کنار: ارتفاع محدود است، پس نشان کوچک‌تر و بدون توضیح */
.panel-brand .brand-mark { --brand-mark-size: 1.75rem; }
.panel-brand .brand-lockup-tagline { display: none; }

/* صفحات ورود و ثبت‌نام: نشان بزرگ و وسط‌چین با فاصلهٔ آزاد رعایت‌شده */
.auth-brand {
  display: flex;
  justify-content: center;
  padding-block: var(--brand-clear, 0.5rem);
}
.auth-brand .brand-mark { --brand-mark-size: 3.5rem; }

/* در موبایل لوگوتایپ حذف و فقط نشان می‌ماند تا نوار بالا شکسته نشود */
@media (max-width: 480px) {
  .brand-lockup-tagline { display: none; }
}

/* در چاپ، نشان باید تک‌رنگ مشکی شود تا در چاپ تک‌رنگ محو نشود */
@media print {
  .brand-mark,
  .brand-lockup-name { color: var(--c-n-1000) !important; }
  .brand-lockup-tagline { display: none; }
}


/* --- لوگوتایپ: نام برند به فارسی و انگلیسی ------------------------------- */
/* اندازه با em است نه rem، تا لوگوتایپ با متنِ والد مقیاس بگیرد و نسبتش با نشان حفظ بماند */
.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1em;
  line-height: 1;
  min-inline-size: 0;
}

.brand-wordmark-fa {
  font-weight: var(--fw-bold);
  font-size: 1em;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

/* نام لاتین کوچک‌تر و بازتر: در ترکیب دوزبانه نقش زیرنویس دارد و نباید با نام فارسی رقابت کند */
.brand-wordmark-en {
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  white-space: nowrap;
}

/* در حالت تک‌زبانهٔ لاتین نام نقش اصلی را دارد، پس محو و کوچک نمی‌ماند */
.brand-wordmark--en .brand-wordmark-en {
  font-size: 1em;
  letter-spacing: 0.1em;
  opacity: 1;
}

/* در اندازه‌های کوچک فقط نام فارسی می‌ماند؛ دو سطر در نوار باریک خوانا نیست */
.brand--xs .brand-wordmark-en,
.brand--sm .brand-wordmark-en { display: none; }