/**
 * BUTTON — کامپوننت دکمه
 * وابسته به: styles/base/tokens.css
 * استفاده در PHP: template-parts/components/button.php
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min); /* حداقل ۴۴px در همه اندازه‌ها */
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- انواع (Variants) --- */

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}
.btn--primary:active {
  background-color: var(--color-primary-active);
  color: var(--color-text-inverse);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-brown-950);
  color: var(--color-brown-950);
}
.btn--secondary:hover {
  background-color: var(--color-brown-950);
  color: var(--color-text-inverse);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-brown-950);
}
.btn--accent:hover {
  background-color: var(--color-accent-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  padding-inline: var(--space-3);
}
.btn--ghost:hover {
  background-color: var(--color-sofreh-200);
}

/* --- اندازه‌ها (Sizes) ---
   نکته: حتی در حالت sm، ارتفاع کمتر از ۴۴px نمی‌شود؛
   فقط padding و فونت کوچک‌تر می‌گردد. */

.btn--sm {
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
}

.btn--lg {
  min-height: 52px;
  padding: 0 var(--space-8);
  font-size: var(--font-size-lg);
}

.btn--full {
  width: 100%;
}

@media (max-width: 359.98px) {
  .btn--lg {
    padding-inline: var(--space-5);
    font-size: var(--font-size-md);
  }
}