/* Компоненты. Кнопка — строго по systems/sandbox/components/button.md. */

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  height: var(--button-size-md-height);
  padding-inline: var(--button-size-md-padding-x);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body-md);
  line-height: var(--font-line-height-body);
  white-space: nowrap;
  cursor: pointer;
}

.btn--sm { height: var(--button-size-sm-height); padding-inline: var(--button-size-sm-padding-x); font-size: var(--font-size-body-sm); }
.btn--md { height: var(--button-size-md-height); padding-inline: var(--button-size-md-padding-x); }
.btn--lg { height: var(--button-size-lg-height); padding-inline: var(--button-size-lg-padding-x); }
.btn--xl { height: var(--button-size-xl-height); padding-inline: var(--button-size-xl-padding-x); font-size: var(--font-size-body-lg); }

.btn--primary { background: var(--button-primary-bg-default); color: var(--button-primary-text-default); }
.btn--primary:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); }
.btn--primary:active { background: var(--button-primary-bg-pressed); color: var(--button-primary-text-pressed); }

.btn--secondary { background: var(--button-secondary-bg-default); color: var(--button-secondary-text-default); border-color: var(--button-secondary-border-default); }
.btn--secondary:hover { background: var(--button-secondary-bg-hover); }
.btn--secondary:active { background: var(--button-secondary-bg-pressed); }

.btn--soft { background: var(--button-soft-bg-default); color: var(--button-soft-text-default); border-color: var(--button-soft-border-default); }
.btn--soft:hover { background: var(--button-soft-bg-hover); color: var(--button-soft-text-hover); }
.btn--soft:active { background: var(--button-soft-bg-pressed); color: var(--button-soft-text-pressed); }

.btn--ghost { background: transparent; color: var(--button-ghost-text-default); }
.btn--ghost:hover { background: var(--button-ghost-bg-hover); }
.btn--ghost:active { background: var(--button-ghost-bg-pressed); color: var(--button-ghost-text-pressed); }

.btn:focus-visible {
  outline: var(--button-focus-width) solid var(--button-focus-ring);
  outline-offset: var(--button-focus-width);
}

.btn:disabled {
  background: var(--color-bg-muted);
  color: var(--color-text-disabled);
  border-color: transparent;
  cursor: default;
}

/* Иконка в кружке внутри главной кнопки: цвет текста кнопки, фон — тот же цвет, прозрачный */
.btn__icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

/* ---------- Иконка-маска: форма из файла, цвет — из токена через color ---------- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------- Блок с реакцией на наведение (docs/creation.md, «Анимация») ----------
   Без наведения тени нет. При наведении — тень shadow.lg и заголовок блока цвета бренда.
   На блоках с фото (--photo) заголовок не перекрашивается: синий на тёмном фото нечитаем. */
.hover-card {
  transition: box-shadow var(--duration-base) var(--easing-standard);
}

.hover-card:hover {
  box-shadow: var(--shadow-lg);
}

.hover-card :is(.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6) {
  transition: color var(--duration-base) var(--easing-standard);
}

.hover-card:not(.hover-card--photo):hover :is(.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6) {
  color: var(--color-text-primary);
}

/* ---------- Текстовая ссылка со стрелкой ---------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-primary);
}

.text-link:hover {
  color: var(--color-text-accent);
}

/* ---------- Карточка бренда (светлый фон бренда и фирменная рамка) ---------- */
.brand-card {
  padding: var(--space-24);
  border: var(--border-width-default) solid var(--color-border-brand);
  border-radius: var(--radius-block);
  background: var(--color-bg-brand);
}

/* ---------- Метка (таблетка) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-button);
  background: var(--color-bg-brand);
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.badge--sm {
  padding: var(--space-4) var(--space-8);
}

/* ---------- Точка-индикатор: круг, цвет из currentColor ---------- */
.dot {
  display: inline-block;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: currentColor;
}

.dot--primary { color: var(--color-bg-primary); }
.dot--success { color: var(--color-text-success); }
.dot--error { color: var(--color-text-error); }

/* ---------- Кружок с иконкой ---------- */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-brand);
  color: var(--color-icon-primary);
}