/* ==========================================================================
   Component — Buttons
   1) پل زدن دکمه‌های Bootstrap به توکن‌ها (چون .btn-primary مقدار رنگ را
      hardcode می‌کند و صرفاً override کردن --bs-primary کافی نیست).
   2) کلاس‌های BEM سفارشی: .btn--primary / .btn--ghost برای طراحی جدید.
   ========================================================================== */

/* --- Bridge: Bootstrap .btn-primary → tokens --- */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

/* --- Custom BEM buttons --- */
.btn--primary,
.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  line-height: 1.2;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}

.btn--ghost:hover,
.btn--ghost:focus {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
}

/* اندازه‌ها */
.btn--lg {
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-8);
}

/* تمام‌عرض روی موبایل */
@media (max-width: 575.98px) {
  .btn--block-mobile {
    width: 100%;
  }
}