/* ui-chips.css — единый слой чипов на токенах _ds.
   Источник стиля — Конструктор проектов; калькулятор наследует этот файл.
   Правило: размеры/радиусы/цвета только через var(--ds-*) с fallback. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: none;
  border-radius: var(--radius-pill, 9999px);
  font-family: inherit;
  font-size: var(--text-label, 11px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
}
button.chip { cursor: pointer; }
.chip.clickable { cursor: pointer; }
.chip svg { flex-shrink: 0; }
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* — данные: нейтральная информация — */
.chip--data { background: var(--muted, #f0ece5); color: var(--muted-foreground, #6b6259); }

/* — статусы включения (обязательно / по условию / опционально) — */
.chip--required    { background: #f0fdf4; color: #4a9760; }
.chip--conditional { background: #fffbeb; color: #92620a; }
.chip--optional    { background: var(--muted, #f0ece5); color: #8a817a; }

/* — деньги — */
.chip--money {
  background: var(--muted, #f0ece5); color: #5c5249;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.chip--money-strong { background: var(--color-ink, #1a1714); color: #fff; font-size: 12px; }

/* — материалы: намеренно тихие (внутренняя мета, не акцент) — */
.chip--materials {
  background: transparent;
  border: 1px solid var(--border-subtle, #e7e2d9);
  color: var(--muted-foreground, #8a817a);
}
.chip--materials.clickable:hover { color: #5c5249; border-color: #d6cfc3; }

/* — уровень исполнителя — */
.chip--lvl-elite { background: #f3eafe; color: #7c3aed; }
.chip--lvl-pro   { background: #fff0e6; color: #b5521a; }

/* — управление (фильтры и переключатели) — outline, чтобы отличались от данных — */
.chip--control {
  background: transparent;
  border: 1px solid var(--border-subtle, #e7e2d9);
  color: #5c5249;
  font-weight: 500;
}
.chip--control:hover { border-color: #d6cfc3; }
.chip--control[data-active="true"] { background: var(--color-ink, #1a1714); color: #fff; border-color: transparent; }

/* — ghost: значение по умолчанию, почти невидимое до наведения — */
.chip--ghost { background: transparent; color: #b8b0a5; font-weight: 500; }
.chip--ghost:hover { background: var(--muted, #f0ece5); color: #8a817a; }