/*
 * tags.css — Tags, badges, chips
 * Grailsome Design System — Section 5.2
 */

/* -------------------------------------------------------
   Eyebrow tag — section label above headings
------------------------------------------------------- */

.tag--eyebrow {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--color-red);
  background: rgba(192, 48, 26, 0.08);
  border: 1.5px solid rgba(192, 48, 26, 0.25);
  padding: 0.3rem 0.85rem;
  border-radius: 2px;
}

/* -------------------------------------------------------
   Feature category tag — used on feat-cards
------------------------------------------------------- */

.tag--feature {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  border: 1.5px solid rgba(26, 13, 8, 0.20);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}

/* Hover state when parent card goes dark */
.feat-card:hover .tag--feature {
  border-color: rgba(250, 246, 238, 0.3);
  color: rgba(250, 246, 238, 0.6);
}

/* -------------------------------------------------------
   Featured badge — diagonal ribbon
------------------------------------------------------- */

.badge--featured {
  position: absolute;
  top: 1.5rem;
  right: -2.5rem;
  background: var(--color-red);
  color: var(--color-ivory);
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 3rem;
  transform: rotate(45deg);
}

/* -------------------------------------------------------
   Chip base — iOS-style status chips
------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

/* Value up — mint / green */
.chip--value-up {
  background: var(--color-mint-light);
  color: var(--color-mint);
}

/* Value down — red */
.chip--value-down {
  background: rgba(192, 48, 26, 0.10);
  color: var(--color-red);
}

/* Graded — amber */
.chip--graded {
  background: var(--color-amber-light);
  color: var(--color-amber-2);
}

/* AI feature — electric blue */
.chip--ai {
  background: rgba(26, 95, 255, 0.10);
  color: var(--color-electric);
}