/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-size: var(--size-button);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--transition-hover), transform var(--transition-hover), box-shadow var(--transition-hover);
}

.btn-primary {
  background: var(--bordeaux-accent);
  color: var(--bg-cream);
}

.btn-primary:hover {
  background: var(--bordeaux-hover);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-strong);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Градиентная кнопка — точно как в Figma (диагональный градиент accent →︎ dark) */
.btn-gradient {
  position: relative;
  isolation: isolate;
  background: var(--bordeaux-gradient);
  color: var(--bg-cream);
}

.btn-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(130.31deg, var(--bordeaux-hover) 32.212%, var(--bordeaux-accent) 62.806%);
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-strong);
}

.btn-gradient:hover::after {
  opacity: 1;
}

.btn-gradient:active {
  transform: translateY(0);
}

/* Эйбрау-тег */
.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--size-eyebrow);
  font-weight: 600;
  color: var(--bordeaux-accent);
  text-transform: lowercase;
}

/* Карточки — общий базовый вид */
.card {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-hover), box-shadow var(--transition-hover);
}

.card-on-dark {
  border: var(--card-border-on-dark);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-strong);
}