/* =============================================================================
   ПРИМИТИВЫ — классы, которые потребляют токены слоя component.
   Здесь раскладка и состояния; значения приходят только из tokens.css (Р1).
   После чистки 2026-10-21 файл держит только живой слой: CTA, коробка карточки,
   тег и круглый номер шага. Всё, что не отрисовывалось (кнопки, поля ввода,
   модалка, тосты, прогресс, степпер, табы, строки «параметр — значение»),
   удалено — список был снят цензом использования.
   ============================================================================= */

/* ---------- CTA-пилюля (hero чёрная кнопка референса) ----------------------- */
.cw-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-s);
  background: var(--cw-cta-bg);
  color: var(--cw-cta-ink);
  border: none;
  border-radius: var(--cw-radius-circular);
  font-family: var(--cw-font-body);
  font-size: var(--cw-text-subtitle-2);
  font-weight: 600;
  padding: var(--cw-space-m) var(--cw-space-xl);
  cursor: pointer;
  transition: background-color var(--cw-duration-fast) var(--cw-curve-easy-ease);
}

.cw-cta:hover {
  background: var(--cw-cta-bg-hover);
}

.cw-cta:focus-visible {
  outline: var(--cw-focus-outline-width) solid var(--cw-focus-stroke);
  outline-offset: var(--cw-focus-outline-offset);
}

/* ---------- Карточка -------------------------------------------------------- */
/* Единая «коробка» карточки. Три класса разметки (.cw-card, .cw-cardlink,
   .cw-toolcard) — одна геометрия. До 2026-10-20 фон/рамка/радиус/тень были
   продублированы в трёх местах, и правка радиуса требовала трёх правок. */
.cw-card,
.cw-cardlink,
.cw-toolcard {
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-card-radius);
  box-shadow: var(--cw-card-shadow);
}

.cw-card {
  padding: var(--cw-card-pad);
}

.cw-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cw-space-m);
  margin-bottom: var(--cw-space-m);
}

.cw-card__title {
  margin: 0;
  font-size: var(--cw-text-title-3);
  line-height: var(--cw-leading-title-3);
  font-weight: 600;
  color: var(--cw-color-neutral-foreground-1);
}

/* ---------- Тег ------------------------------------------------------------- */
.cw-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-xs);
  border-radius: var(--cw-tag-radius);
  padding: 2px var(--cw-space-s);
  font-size: var(--cw-text-caption-1);
  line-height: var(--cw-leading-caption-1);
  font-weight: 600;
  white-space: nowrap;
}

.cw-tag--success   { background: var(--cw-color-status-success-background); color: var(--cw-color-status-success-foreground); }
.cw-tag--danger    { background: var(--cw-color-status-danger-background);  color: var(--cw-color-status-danger-foreground); }
.cw-tag--warning   { background: var(--cw-color-status-warning-background); color: var(--cw-color-status-warning-foreground); }
.cw-tag--info      { background: var(--cw-color-status-info-background);    color: var(--cw-color-status-info-foreground); }
.cw-tag--neutral   { background: var(--cw-color-neutral-background-3);     color: var(--cw-color-neutral-foreground-3); }
.cw-tag--mapver    { background: var(--cw-color-neutral-background-3); color: var(--cw-color-neutral-foreground-3); }
.cw-tag--planned   { background: var(--cw-color-status-warning-background); color: var(--cw-color-status-planned); }
.cw-tag--active    { background: var(--cw-nav-item-active-bg);              color: var(--cw-color-status-active); }

/* Круглый номер шага. Одна геометрия на два компонента: прогресс-петля
   (.cw-step) и список этапов (.cw-steps). До 2026-10-20 размер, круг, центровка
   и кегль дублировались, различались только палитры состояния. */
.cw-steps__num {
  width: var(--cw-tile-xs);
  height: var(--cw-tile-xs);
  border-radius: var(--cw-radius-circular);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cw-text-body-1);
  font-weight: 600;
}