Badge

Build a shadcn/ui Badge component for the **Clinic Admin** design system.

**Status variants with exact colors:**
- success: bg #EAF8EF, text #186B36 — use for: Confirmed, Completed
- warning: bg #FFF5DE, text #8A5A00 — use for: Needs Review, Rescheduled
- error: use destructive token (bg-destructive/10, text-destructive, border-destructive/30) — use for: Cancelled, Failed
- info: bg #EAF7F8, text #2F6F73 — use for: In Progress, Informational
- pending: bg #F3F4F6, text #4B5563 — use for: Awaiting, Pending

**Brand variants:**
- default (teal): bg primary, text white
- secondary: bg secondary, text secondary-foreground

**Styling:**
- Border radius: 20px (pill shape), rounded-full
- Padding: 3px 10px
- Font: Nunito Sans, 12px, weight 600, letter-spacing 0.02em
- Optional dot: 6px circle before label (e.g. before:content-[''] before:rounded-full before:size-1.5 before:mr-1.5)

**Design preview to replicate exactly:**
- Default: label "Default"
- Status variants: "Confirmed", "Needs Review", "Cancelled", "In Progress", "Pending"
- Brand: "Doctor", "Nurse"
- Dot: "Confirmed" and "Pending" with dot indicator before text
- Fallback: "Success", "Warning", "Error", "Info" badges

Return a React Badge component with variant prop supporting all variants above, plus optional dot. Use cn() + Tailwind CSS with cva() variants.