/* ============================================================
   BeauTips — Кнопки и глобальные состояния интерактива
   Блок 1 · Быстрые победы.
   Подключать ПОСЛЕ tokens.css.
   Две части:
   1) Переиспользуемый компонент .btn (для нового кода).
   2) Аккуратные глобальные состояния (:focus-visible, :disabled)
      с нулевой специфичностью через :where() — применяются
      ко всем кнопкам/ссылкам разом и не перекрывают вёрстку.
   ============================================================ */

/* ---------- 1. Компонент .btn ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-main);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

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

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Основная кнопка --- */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--shadow-brand);
}

.btn--primary:active {
  background: var(--btn-primary-bg-active);
}

/* --- Кнопка с бренд-градиентом --- */
.btn--gradient {
  background: var(--gradient-brand);
  color: var(--color-on-brand);
}

.btn--gradient:hover {
  box-shadow: var(--shadow-brand);
}

/* --- Вторичная (контурная) кнопка --- */
.btn--secondary {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn--secondary:hover {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.btn--secondary:active {
  background: var(--color-brand-active);
  border-color: var(--color-brand-active);
}

/* --- Тихая (ghost) кнопка --- */
.btn--ghost {
  background: transparent;
  color: var(--color-brand);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-brand-soft);
}

/* --- Опасное действие --- */
.btn--danger {
  background: var(--color-danger);
  color: var(--color-on-brand);
}

.btn--danger:hover {
  filter: brightness(0.94);
  box-shadow: var(--shadow-sm);
}

/* --- Размеры --- */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-lg);
}

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

/* ---------- 2. Глобальные состояния (нулевая специфичность) ---------- */

/* Единый видимый фокус для клавиатурной навигации на всех
   интерактивных элементах. :where() = 0 специфичности, поэтому
   любое существующее правило легко переопределяет это при нужде. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Единый вид отключённого состояния для всех кнопок/полей. */
:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: var(--btn-disabled-opacity);
}

/* Плавный ховер по умолчанию для интерактивных элементов, у которых
   нет своего transition (не перекрывает — 0 специфичности). */
:where(a, button):where(:not(.btn)) {
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), box-shadow var(--transition);
}

/* Уважение к пользовательской настройке «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Мобильная адаптация (тач-таргеты) ----------
   На телефоне палец менее точен, чем курсор — гарантируем
   минимальную высоту нажимаемой области (~44px), не трогая
   внешний вид кнопок на десктопе. */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
  }

  .btn--sm {
    min-height: 40px;
  }

  .btn--lg {
    min-height: 48px;
  }
}