/* Button — WowVendor DS. Ядро: State=Default.
   Оси: Size (sm/md/lg) × Hierarchy (primary/secondary/tertiary/ghost)
        × State (default/positive/negative) × Interaction
        (default/hover/active/disabled/loading) × iconOnly.
   State=Positive/Negative существует только у Primary (заливка),
   State=Negative — ещё у Ghost (цвет текста). Dark Mode один (Off) — тем нет.

   Значения — только токены. Иконки и текст красятся через color родителя
   (icon = currentColor). Типографика лейбла — utility-классами в разметке
   (.text-display-12 / .text-display-14 / .text-body-16m).
   Под-компоненты: spinner (Loading), indicator (опц. слот-точка).

   Интеракции доступны двумя способами:
     - статические модификаторы .btn--hover/.btn--active/.btn--disabled/.btn--loading
       (чтобы показать все состояния на витрине и для детерминированной сверки);
     - живые :hover / :active / [disabled] для реального поведения. */

.btn {
  --btn-icon-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Рамка — inset box-shadow, а не border: в Figma stroke лежит внутри и не
     раздвигает габарит, высоты остаются 32/40/44. */
  border: none;
  border-radius: var(--radius-8);
  background: transparent;
  font-family: var(--font-family-base);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn__label { display: inline-block; }

.btn__icon {
  display: inline-flex;
  flex: none;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn__icon svg { display: block; width: 100%; height: 100%; }

/* ---- Размеры ---- */
.btn--sm { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-12); --btn-icon-size: 16px; }
.btn--md { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 16px; }
.btn--lg { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 20px; }

/* Icon-only — квадрат, высота сохраняется (32/40/44) */
.btn--icon-only.btn--sm { padding: var(--spacing-8); }
.btn--icon-only.btn--md { padding: var(--spacing-12); }
.btn--icon-only.btn--lg { padding: var(--spacing-12); }

/* ---- Primary ---- */
.btn--primary { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--hover,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--active,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }
.btn--primary.btn--disabled,
.btn--primary:disabled { background: var(--color-accent-100); }
.btn--primary.btn--loading { background: var(--color-accent-100); }

/* ---- Secondary ---- */
.btn--secondary {
  background: var(--color-gray-0);
  color: var(--color-gray-900);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
}
.btn--secondary.btn--hover,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px var(--color-accent-400), var(--shadow-4);
  color: var(--color-accent-400);
}
.btn--secondary.btn--active,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
  box-shadow: inset 0 0 0 1px var(--color-accent-600), var(--shadow-4);
  color: var(--color-accent-600);
}
.btn--secondary.btn--disabled,
.btn--secondary:disabled {
  box-shadow: inset 0 0 0 1px var(--color-gray-50); color: var(--color-gray-100);
}
.btn--secondary.btn--loading { box-shadow: inset 0 0 0 1px var(--color-gray-50); }

/* ---- Tertiary ---- */
.btn--tertiary {
  background: var(--color-accent-25);
  color: var(--color-accent-400);
  box-shadow: inset 0 0 0 1px var(--color-accent-100), var(--shadow-4);
}
.btn--tertiary.btn--hover,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--active,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--disabled,
.btn--tertiary:disabled { box-shadow: none; color: var(--color-accent-100); }
.btn--tertiary.btn--loading { box-shadow: none; }

/* ---- Ghost (text-only) ---- */
.btn--ghost { background: transparent; color: var(--color-gray-800); }
.btn--ghost.btn--hover,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-400); }
.btn--ghost.btn--active,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--ghost.btn--disabled,
.btn--ghost:disabled { color: var(--color-gray-100); }

/* ---- State=Positive (только Primary): зелёная заливка ---- */
.btn--primary.btn--positive { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--hover,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--active,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-600); }
.btn--primary.btn--positive.btn--disabled,
.btn--primary.btn--positive:disabled { background: var(--color-positive-50); }
.btn--primary.btn--positive.btn--loading { background: var(--color-positive-500); }

/* ---- State=Negative (Primary): красная заливка ---- */
.btn--primary.btn--negative { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--hover,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--active,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--disabled,
.btn--primary.btn--negative:disabled { background: var(--color-negative-50); }
.btn--primary.btn--negative.btn--loading { background: var(--color-negative-500); }

/* ---- State=Negative (Ghost): красный текст ---- */
.btn--ghost.btn--negative { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--hover,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--active,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--disabled,
.btn--ghost.btn--negative:disabled { color: var(--color-negative-50); }

/* ==== Overlay=On — кнопка поверх цветной/тёмной заливки =====================
   Вторая половина component set'а (210 из 420 вариантов). В Figma подписана
   «Dark Mode=On», но это НЕ тема: это ось Overlay самого компонента, поэтому
   живёт модификатором .btn--overlay, а не data-theme.

   Отличия от Overlay=Off не сводятся к смене палитры:
     Primary   — заливка та же (accent/positive/negative), но disabled и loading
                 уходят в нейтральный gray-700 вместо осветлённой заливки.
     Secondary — теряет белую заливку: прозрачный фон + рамка alpha-light.
     Tertiary  — теряет и заливку, и рамку: остаётся только цветной текст.
     Ghost     — белый текст вместо gray-800.
   State=Positive у Primary тоже сдвинут: default = positive-400 (в Off — 500).

   Блок идёт последним, а каждое правило дополнено классом .btn--overlay, из-за
   чего перекрывает одноимённое базовое (см. ниже про специфичность).
   ВАЖНО: цепочка :not(.btn--disabled):not(.btn--loading):not(:disabled)
   обязательна — базовые интерактивные правила имеют специфичность 0-5-0, и без
   неё overlay-версия (0-3-0) проигрывает каскад, а не переопределяет его. */

/* ---- Primary: заливка сохраняется, гасшие состояния — нейтральные ---- */
.btn--primary.btn--overlay { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--overlay.btn--hover,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--overlay.btn--active,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }
/* disabled/loading — общие для всех State у Primary */
.btn--primary.btn--overlay.btn--disabled,
.btn--primary.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--overlay.btn--loading { background: var(--color-gray-700); }

/* Primary × State=Positive (default сдвинут на 400, в Off было 500) */
.btn--primary.btn--positive.btn--overlay { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--overlay.btn--hover,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-300); }
.btn--primary.btn--positive.btn--overlay.btn--active,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--overlay.btn--disabled,
.btn--primary.btn--positive.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--positive.btn--overlay.btn--loading { background: var(--color-positive-400); }

/* Primary × State=Negative (заливки как в Off, гасшие — нейтральные) */
.btn--primary.btn--negative.btn--overlay { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--overlay.btn--hover,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--overlay.btn--active,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--overlay.btn--disabled,
.btn--primary.btn--negative.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--negative.btn--overlay.btn--loading { background: var(--color-negative-500); }

/* ---- Secondary: без заливки, рамка полупрозрачным белым ---- */
.btn--secondary.btn--overlay {
  background: transparent;
  color: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-24), var(--shadow-4);
}
.btn--secondary.btn--overlay.btn--hover,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px var(--color-gray-0), var(--shadow-4);
  color: var(--color-gray-0);
}
.btn--secondary.btn--overlay.btn--active,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-84), var(--shadow-4);
  color: var(--color-alpha-light-84);
}
.btn--secondary.btn--overlay.btn--disabled,
.btn--secondary.btn--overlay:disabled {
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-24);
  color: var(--color-alpha-light-24);
}
.btn--secondary.btn--overlay.btn--loading { box-shadow: inset 0 0 0 1px var(--color-alpha-light-24); }

/* ---- Tertiary: ни заливки, ни рамки — только цветной текст ---- */
.btn--tertiary.btn--overlay {
  background: transparent;
  color: var(--color-accent-400);
  box-shadow: none;
}
.btn--tertiary.btn--overlay.btn--hover,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--overlay.btn--active,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--overlay.btn--disabled,
.btn--tertiary.btn--overlay:disabled { color: var(--color-gray-600); }

/* ---- Ghost: белый текст (этим вариантом живёт close-кнопка тоста) ---- */
.btn--ghost.btn--overlay { color: var(--color-gray-0); }
.btn--ghost.btn--overlay.btn--hover,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-gray-200); }
.btn--ghost.btn--overlay.btn--active,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-gray-300); }
.btn--ghost.btn--overlay.btn--disabled,
.btn--ghost.btn--overlay:disabled { color: var(--color-gray-600); }

/* Ghost × State=Negative (default сдвинут на 400, в Off было 500) */
.btn--ghost.btn--negative.btn--overlay { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--overlay.btn--hover,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--overlay.btn--active,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--overlay.btn--disabled,
.btn--ghost.btn--negative.btn--overlay:disabled { color: var(--color-gray-600); }

/* Цвет спиннера в Overlay: на заливке/тёмном фоне — белый; у прозрачного
   Tertiary остаётся акцентным, у Ghost-Negative — красным. Селекторы с двумя
   классами перебивают блок «Цвет спиннера» ниже (0-2-0). */
.btn--primary.btn--overlay .btn__spinner,
.btn--secondary.btn--overlay .btn__spinner,
.btn--ghost.btn--overlay .btn__spinner { color: var(--color-gray-0); }
.btn--tertiary.btn--overlay .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative.btn--overlay .btn__spinner { color: var(--color-negative-400); }

/* ---- Клавиатурный фокус (реальная интеракция, в статичной витрине не срабатывает) ---- */
.btn:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

/* ---- Disabled поведение ---- */
.btn--disabled, .btn:disabled { cursor: default; }

/* ---- Loading: контент скрыт, показан только spinner ---- */
.btn--loading { cursor: default; }
.btn--loading .btn__icon,
.btn--loading .btn__label { visibility: hidden; }
.btn__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn__spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: btn-spinner-rotate 0.8s linear infinite;
}
.btn--loading .btn__spinner { display: inline-flex; }

@keyframes btn-spinner-rotate {
  to { transform: rotate(360deg); }
}
/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .btn__spinner svg { animation: none; }
}

/* Цвет спиннера: filled (primary + его state-варианты) — белый через color:gray-0
   базового .btn--primary; контурные/текстовые — акцент; ghost-negative — красный. */
.btn--secondary .btn__spinner,
.btn--tertiary .btn__spinner,
.btn--ghost .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative .btn__spinner { color: var(--color-negative-500); }

/* ---- Слот индикатора (опц.): точка-бейдж в правом-верхнем углу.
   Разметка и стили точки — из компонента indicator (indicator.css). ---- */
.btn__indicator {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}