/* ==========================================================================
   Кнопки — компонент «Кнопка/акцентная» из Figma (Frame 329)
   Геометрия целиком из макета: padding 7px 12px, gap 10px, radius 90px,
   высота 38px, текст «17B» (PT Root UI 700 / 17px / 20px).
   Требует: design/tokens.css
   ========================================================================== */

.tt-btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--tt-gap-btn);
  padding: var(--tt-pad-btn);
  min-height: 38px;
  box-sizing: border-box;

  font: var(--tt-t-17b);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tt-bg);

  border: none;
  border-radius: var(--tt-radius-pill);
  cursor: pointer;
  transition: filter .18s ease, box-shadow .18s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}

.tt-btn:disabled,
.tt-btn[aria-disabled='true'] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.tt-btn__icon {
  flex: none;
  width: 15px;
  height: 15px;
  display: block;
}

/* --- Красная акцентная: «Начать творить», «Загрузить фото» --------------- */
.tt-btn--accent {
  background: var(--tt-accent);
  box-shadow: var(--tt-shadow-accent);
}

.tt-btn--accent:hover {
  filter: brightness(1.06);
}

.tt-btn--accent:active {
  transform: translateY(1px);
  box-shadow: 0px 2px 14px rgba(246, 12, 43, 0.26);
}

/* --- Синяя: «Сгенерировать» (из макета, слой «Кнопка/акцентная») --------- */
.tt-btn--blue {
  background: var(--tt-blue);
  box-shadow: var(--tt-shadow-blue);
}

.tt-btn--blue:hover {
  filter: brightness(1.08);
}

.tt-btn--blue:active {
  transform: translateY(1px);
  box-shadow: 0px 2px 14px rgba(22, 101, 196, 0.26);
}

/* --- Тёмная контурная: «Настройки» (слой скрыт в макете, но стиль задан) -- */
.tt-btn--outline {
  padding: 7px 12px;
  gap: var(--tt-gap-tab);
  min-height: 34px;
  background: var(--tt-h1);
  border: 1px solid var(--tt-h2);
  border-radius: var(--tt-radius-tab);
  box-shadow: none;
}

/* --- Крупный размер под «Начать творить» на карточке ---------------------
   В макете кнопка живёт в auto-layout и тянется по контенту; на скриншоте
   она заметно шире базовых 12px паддинга. Модификатор даёт тот же вид,
   не ломая базовый компонент.
   ----------------------------------------------------------------------- */
.tt-btn--lg {
  padding: 9px 20px;
  min-height: 42px;
}

.tt-btn:focus-visible {
  outline: 2px solid var(--tt-bg);
  outline-offset: 2px;
}