/* @spec-kitty/html-js — sk-tag + sk-eyebrow-pill styles — tokens only, no hardcoded values */

/* ---- Base tag ---- */
.sk-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sk-space-1) var(--sk-space-3);
  background: var(--sk-bg-pill);
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-sans);
  font-size: var(--sk-text-xs);
  font-weight: var(--sk-weight-medium);
  color: var(--sk-fg-muted);
  white-space: nowrap;
  line-height: 1.5;
}

/* ---- Colour variants ---- */
/* Using colour channels approach for broad compatibility.
   Fallback opaque colours are provided for environments that do not
   support CSS relative colour syntax (rgba(from var(...) r g b / α)). */

.sk-tag--green {
  /* Fallback for older environments */
  background: var(--sk-surface-tint-mint);
  color: var(--sk-color-green);
}

.sk-tag--purple {
  background: var(--sk-surface-tint-lilac);
  color: var(--sk-color-purple);
}

.sk-tag--breaking {
  background: var(--sk-surface-tint-sky);
  color: var(--sk-color-red);
}

.sk-tag--yellow {
  background: var(--sk-surface-tint-butter);
  color: var(--sk-color-yellow);
}

/* ---- Eyebrow pill ---- */
.sk-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--sk-space-2) var(--sk-space-4);
  background: var(--sk-bg-pill);
  border-radius: var(--sk-radius-sm);
  font-family: var(--sk-font-sans);
  font-size: var(--sk-text-sm);
  font-weight: var(--sk-weight-medium);
  color: var(--sk-fg-muted);
  white-space: nowrap;
  line-height: 1.5;
}