/* ==========================================================================
   Badge / Tag Component — chunky chips
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  background-color: var(--surface);
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--stroke);
  border-radius: var(--r-0);
  box-shadow: var(--sh-xs);
  white-space: nowrap;
}

.tag--accent { background-color: var(--accent); color: var(--ink-on-accent); }
.tag--ink    { background-color: var(--ink);    color: var(--bg); }
.tag--ghost  { background-color: transparent;   box-shadow: none; }
.tag--pink   { background-color: var(--c-pink-soft); }
.tag--blue   { background-color: var(--c-blue-soft); }
.tag--yellow { background-color: var(--c-yellow-soft); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Used for hero pill labels (eyebrows) */
.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
  color: var(--ink-on-accent);
  background-color: var(--accent);
  padding: 0.4rem 0.75rem;
  border: 2px solid var(--stroke);
  box-shadow: var(--sh-xs);
}

.kicker-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--stroke);
  border-radius: 50%;
}