/* Badges & status pills — design.md §11 (product badges), §15 (Badge), §13 (Orders). */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Product badges: champagne bg + ink text — never gold bg (§11) */
.badge--product {
  background: var(--color-accent-champagne);
  color: var(--color-neutral-ink);
}

/* Discount/offer badge: maroon pill (§11, §12) */
.badge--offer {
  background: var(--accent-maroon);
  color: var(--color-neutral-50);
}

/* Order status pills (§13 Orders) */
.badge--info    { background: rgba(46, 94, 140, 0.12);  color: var(--color-info); }
.badge--warning { background: rgba(184, 121, 46, 0.14); color: var(--color-warning); }
.badge--success { background: rgba(30, 122, 76, 0.12);  color: var(--color-success); }
.badge--error   { background: rgba(163, 43, 43, 0.12);  color: var(--color-error); }

/* Gift price-anchor chips (§14.11) — gold outline when active */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  min-height: 44px;
  border-radius: var(--radius-full);
  border: var(--border-hairline);
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: border-color 150ms var(--easing-standard), color 150ms var(--easing-standard);
}

.chip--active,
.chip[aria-pressed="true"] {
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
}