# Button — Yoonet AU & NZ Component Prompt

You are building a Button 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/button
- 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
## Variants
- default: bg-primary text-primary-foreground (#8A9EFF / #fff)
- secondary: bg-secondary text-secondary-foreground
- outline: border border-input bg-background hover:bg-accent hover:text-accent-foreground
- ghost: hover:bg-accent hover:text-accent-foreground
- destructive: bg-destructive text-destructive-foreground (#FF6495)

## Usage
```tsx
import { Button } from "@/components/ui/button"

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
<Button disabled>Disabled</Button>
```

## Rules
- Primary CTA always uses default variant
- Destructive actions (delete, remove) use destructive variant
- Never hardcode colour — use variant prop only
- Border radius inherits var(--radius) = 0.5rem