/* Chip Component - Material Design 3 Specs */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  padding: 6px 16px;
  height: 32px;
  border-radius: var(--radius-2);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-5);
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Chip variants */
.chip--success {
  background: var(--green-2);
  color: var(--green-11);
}

.chip--warning {
  background: var(--yellow-2);
  color: var(--yellow-11);
}

.chip--secondary {
  background: var(--gray-3);
  color: var(--gray-11);
}

.chip--error {
  background: var(--red-2);
  color: var(--red-11);
}

.chip--primary {
  background: var(--brand-primary);
  color: white;
}

.chip--info {
  background: var(--blue-2);
  color: var(--blue-11);
}

/* Dark theme adjustments */
[data-theme="dark"] .chip--success {
  background: var(--green-3);
  color: var(--green-10);
}

[data-theme="dark"] .chip--warning {
  background: var(--yellow-3);
  color: var(--yellow-10);
}

[data-theme="dark"] .chip--secondary {
  background: var(--gray-4);
  color: var(--gray-10);
}

[data-theme="dark"] .chip--error {
  background: var(--red-3);
  color: var(--red-10);
}

[data-theme="dark"] .chip--info {
  background: var(--blue-3);
  color: var(--blue-10);
}

/* Chip with icon */
.chip svg {
  width: 12px;
  height: 12px;
}