/* shortwind: badge@0.0.2 sha:07c6ab5a8deb77e3 */

/* @guide
   @badge is the default. Its color is DATA-DRIVEN: it reads the --tone-bg /
   --tone-fg CSS variables, so set the tone from your data with a data-tone
   attribute instead of picking a different recipe name —
   `<span className="@badge" data-tone={severity}>`. Define your tones once in
   CSS (init scaffolds neutral/success/warning/danger/info; add your own
   `[data-tone="sev1"] { --tone-bg: …; --tone-fg: … }`). With no data-tone it
   falls back to the neutral muted look, identical to before.

   The static @badge-success/warning/danger/info variants still exist for when
   the tone is known at author time; reach for data-tone when it's chosen from
   data. @badge-outline is unfilled. @badge-base is a color-less shell for
   building custom tones — not for direct use.
*/

/* Badge shell — shape, sizing, focus ring. No bg/text/border color so
   variants can supply their own tone without conflicts. */
@recipe badge-base {
  inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
}

/* Default badge — tone-aware. Reads --tone-bg/--tone-fg (set via data-tone),
   falling back to the neutral muted tokens so it renders unchanged when no
   tone is set. */
@recipe badge {
  inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium bg-[var(--tone-bg,var(--muted))] text-[var(--tone-fg,var(--muted-foreground))]
}

/* Success tone badge. */
@recipe badge-success {
  inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200
}

/* Warning tone badge. */
@recipe badge-warning {
  inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900 dark:text-amber-200
}

/* Danger tone badge. */
@recipe badge-danger {
  inline-flex items-center gap-1 rounded-full bg-destructive/15 px-2 py-0.5 text-xs font-medium text-destructive
}

/* Info tone badge. */
@recipe badge-info {
  inline-flex items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-xs font-medium text-primary
}

/* Outline badge — no fill. */
@recipe badge-outline {
  inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs font-medium text-foreground
}