# Card — Yoonet AU & NZ Component Prompt

You are building a Card 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/card
- 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
## Anatomy
Card > CardHeader > CardTitle + CardDescription
Card > CardContent
Card > CardFooter

## Usage
```tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle style={{ fontFamily: "var(--font-heading)" }}>Active Projects</CardTitle>
    <CardDescription>Track progress across your team.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-black text-primary" style={{ fontFamily: "var(--font-heading)" }}>24</p>
  </CardContent>
  <CardFooter>
    <Badge variant="outline">+3 this week</Badge>
  </CardFooter>
</Card>
```

## Rules
- Card background: var(--card), foreground: var(--card-foreground)
- Border: 1px solid var(--border), radius: var(--radius)
- Use CardTitle in heading font (Manrope)
- Metric values in heading font, extra-bold