# Avatar — Yoonet AU & NZ Component Prompt

You are building a Avatar component for Yoonet AU & NZ.
Use shadcn/ui with the CSS variables below applied to :root.

## Active Brand Tokens
--primary: hsl(231 100% 77%);         /* #8A9EFF */
--primary-foreground: hsl(0 0% 100%); /* #fff */
--secondary: hsl(183 70% 76%);
--secondary-foreground: hsl(235 22% 12%);
--destructive: hsl(341 100% 70%); /* #FF6495 */
--radius: 0.5rem;
--font-heading: var(--font-heading);  /* Manrope */
--font-body: var(--font-body);        /* Inter */

## Typography
- Heading font: Manrope (weights 700, 800)
- Body / UI font: Inter (weights 400, 700)

## Code Conventions
- Import from @/components/ui/avatar
- Use cn() from @/lib/utils for conditional classes
- "use client" only when state or events are needed
- No inline hex values — always reference CSS variables
## Usage
```tsx
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"

{/* With image */}
<Avatar>
  <AvatarImage src="/avatars/ada.jpg" alt="Ada Chen" />
  <AvatarFallback>AC</AvatarFallback>
</Avatar>

{/* Initials only */}
<Avatar>
  <AvatarFallback
    className="bg-primary text-primary-foreground font-bold"
    style={{ fontFamily: "var(--font-heading)" }}
  >
    AC
  </AvatarFallback>
</Avatar>

{/* Stacked group */}
<div className="flex -space-x-2">
  {users.map(u => (
    <Avatar key={u.id} className="border-2 border-background">
      <AvatarFallback className="bg-primary text-primary-foreground">
        {u.initials}
      </AvatarFallback>
    </Avatar>
  ))}
</div>
```

## Rules
- Fallback background: var(--primary) (#8A9EFF), text: var(--primary-foreground) (#fff)
- Initials in heading font (Manrope), font-bold
- Border: border-2 border-background for stacked groups
- Size classes: w-8 h-8 (sm), w-10 h-10 (md), w-12 h-12 (lg)