/* Step chip -pill + secondary label, used in multi-step flows
 * (password reset, signup, onboarding). Pairs with the design's
 * "Step 01 / 03 · Request code" pattern.
 *
 *   <span class="step-chip">
 *     <span class="step-chip-tag">Step 01 / 03</span>
 *     <span class="step-chip-label">Request code</span>
 *   </span>
 */

.step-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.step-chip-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0) var(--space-2);
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-label);
}

.step-chip-label {
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--muted);
}