/*
 * Кнопки дизайн-системы. Состояния описаны один раз (docs/tokens-audit.md, решение 2026-10-18):
 * вид подставляет цвета в локальные переменные --btn-*, общий класс .btn рисует обычное состояние,
 * наведение, нажатие, фокус и неактивность. Работает и для <button>, и для ссылки <a class="btn">.
 *
 *   <a class="btn btn--primary" href="/booking">Записаться</a>
 *   <button class="btn btn--outline btn--l">…</button>
 */
.btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--btn-bg);
  --btn-bg-pressed: var(--btn-bg-hover);
  --btn-text: var(--color-text);
  --btn-text-pressed: var(--btn-text);
  --btn-border: transparent;
  --btn-shadow: none;
  --btn-shadow-hover: var(--btn-shadow);
  --btn-shadow-pressed: var(--btn-shadow);
  --btn-shift-hover: 0, 0;
  --btn-shift-pressed: 0, 0;

  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-height-m); padding: 0 var(--space-5);
  border: var(--border-width-button) solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-text);
  font-size: var(--font-size-button); line-height: var(--line-height-button);
  font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-spring),
    background-color var(--duration-instant) var(--ease-standard);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-text); box-shadow: var(--btn-shadow-hover); transform: translate(var(--btn-shift-hover)); }
.btn:active { background: var(--btn-bg-pressed); color: var(--btn-text-pressed); box-shadow: var(--btn-shadow-pressed); transform: translate(var(--btn-shift-pressed)); }
.btn:focus-visible { outline-offset: var(--focus-ring-offset-button); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-button-disabled-bg);
  border-color: var(--color-button-disabled-border);
  color: var(--color-button-disabled-text);
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* Размеры: M — по умолчанию, L — крупная (--control-height-*) */
.btn--l { height: var(--control-height-l); padding: 0 var(--space-7); gap: var(--space-2-5); font-size: var(--font-size-button-l); }

/* Кнопки с тенью: при наведении приподнимаются, при нажатии вдавливаются */
.btn--primary, .btn--secondary, .btn--outline, .btn--danger {
  --btn-border: var(--color-border-ink);
  --btn-shadow: var(--shadow-button);
  --btn-shadow-hover: var(--shadow-raised);
  --btn-shadow-pressed: var(--shadow-button-pressed);
  --btn-shift-hover: var(--shift-hover), var(--shift-hover);
  --btn-shift-pressed: var(--shift-pressed), var(--shift-pressed);
}
.btn--primary {
  --btn-bg: var(--color-button-primary-bg);
  --btn-bg-hover: var(--color-button-primary-bg-hover);
  --btn-bg-pressed: var(--color-button-primary-bg-pressed);
  --btn-text: var(--color-button-primary-text);
}
.btn--secondary {
  --btn-bg: var(--color-button-secondary-bg);
  --btn-bg-hover: var(--color-button-secondary-bg-hover);
  --btn-bg-pressed: var(--color-button-secondary-bg-pressed);
  --btn-text: var(--color-button-secondary-text);
}
.btn--outline {
  --btn-bg: var(--color-button-outline-bg);
  --btn-bg-hover: var(--color-button-outline-bg-hover);
  --btn-bg-pressed: var(--color-button-outline-bg-pressed);
  --btn-text: var(--color-button-outline-text);
}
.btn--danger {
  --btn-bg: var(--color-button-danger-bg);
  --btn-bg-hover: var(--color-button-danger-bg-hover);
  --btn-bg-pressed: var(--color-button-danger-bg-pressed);
  --btn-text: var(--color-button-danger-text);
}

/* Без тени */
.btn--ghost {
  --btn-text: var(--color-button-ghost-text);
  --btn-text-pressed: var(--color-button-ghost-text-pressed);
  --btn-bg-hover: var(--color-button-ghost-bg-hover);
  --btn-bg-pressed: var(--color-button-ghost-bg-pressed);
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { background: transparent; border-color: transparent; }
.btn--danger-outline {
  --btn-bg: var(--color-button-danger-outline-bg);
  --btn-bg-hover: var(--color-button-danger-outline-bg-hover);
  --btn-bg-pressed: var(--color-button-danger-outline-bg-pressed);
  --btn-text: var(--color-button-danger-outline-text);
  --btn-border: var(--color-button-danger-outline-border);
}