/**
 * Buttons — Warm-Platinum (Sprint S8)
 *
 * Источник: docs/s8/moodboard.md §4.4 (CTA кнопки), §6 (WCAG).
 * BEM: .sk-btn + модификаторы. Touch target min 44px (WCAG 2.5.5).
 */

/* ===== База кнопки ===== */
.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-height: 44px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  transition: var(--btn-transition);
  -webkit-appearance: none;
  appearance: none;
}

/* ===== Focus (WCAG AA) ===== */
.sk-btn:focus { outline: none; }

.sk-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

/* ===== Иконка внутри кнопки ===== */
.sk-btn__icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.sk-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ===== Модификатор: Primary (terracotta) ===== */
.sk-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

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

.sk-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ===== Модификатор: Outline ===== */
.sk-btn--outline {
  background: transparent;
  color: var(--btn-outline-text);
  border-color: var(--btn-outline-border);
}

.sk-btn--outline:hover,
.sk-btn--outline:focus-visible {
  border-color: var(--btn-outline-border-hover);
  color: var(--color-accent);
}

.sk-btn--outline:active {
  background: var(--color-bg-subtle);
}

/* ===== Модификатор: Ghost ===== */
.sk-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
}

.sk-btn--ghost:hover,
.sk-btn--ghost:focus-visible {
  background: rgba(26, 29, 31, 0.04);
  color: var(--color-accent);
}

.sk-btn--ghost:active {
  background: rgba(26, 29, 31, 0.08);
}

/* ===== Модификатор: Icon-only ===== */
.sk-btn--icon {
  padding: var(--sp-3);
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}

.sk-btn--icon .sk-btn__icon {
  width: 1.25em;
  height: 1.25em;
}

/* ===== Размеры ===== */
.sk-btn--sm {
  padding: var(--sp-2) var(--sp-4);
  min-height: 36px;
  font-size: var(--fs-14);
}

.sk-btn--lg {
  padding: var(--sp-4) var(--sp-8);
  min-height: 52px;
  font-size: var(--fs-18);
}

/* ===== Модификатор: Full-width ===== */
.sk-btn--block {
  display: flex;
  width: 100%;
}

/* ===== Группа кнопок ===== */
.sk-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .sk-btn {
    transition: none;
  }
  .sk-btn--primary:hover,
  .sk-btn--primary:focus-visible,
  .sk-btn--primary:active {
    transform: none;
  }
}

/* ===== Responsive ===== */
@media (min-width: 768px) {
  .sk-btn {
    font-size: var(--fs-16);
  }
  .sk-btn--block {
    width: auto;
    display: inline-flex;
  }
}