# Aavya Design Tokens — Border Radius

Soft-edged radii are a core part of the Aavya aesthetic. Sharp corners are strictly avoided — every element uses rounded forms. Think circles, hexagons, and rounded rectangles. Never squares.

---

## Radius Scale

All radii derive from the base `--radius` value (`0.825rem`). Use soft, rounded forms consistent with the brand identity.

| Token | Value | Tailwind | Use Case |
|---|---|---|---|
| `radius-sm` | `calc(var(--radius) - 4px)` | `rounded-sm` | Small elements: tags, badges, small buttons |
| `radius-md` | `calc(var(--radius) - 2px)` | `rounded-md` | Default radius: inputs, standard buttons, menu items |
| `radius-lg` | `var(--radius)` | `rounded-lg` | Cards, panels, containers — the primary brand radius |
| `radius-xl` | `calc(var(--radius) + 4px)` | `rounded-xl` | Large containers, modals, hero sections |
| `radius-full` | `9999px` | `rounded-full` | Pills, avatars, circular elements |

---

## Usage Examples

How radius tokens map to common UI elements.

| Element | Token |
|---|---|
| Button | `rounded-md` |
| Card | `rounded-lg` |
| Pill / Status tag | `rounded-full` |
| Input | `rounded-md` |
| Modal | `rounded-xl` |
| Avatar | `rounded-full` |

---

## Sharp Corners — Prohibited

Per brand guidelines, sharp corners (`border-radius: 0`) are strictly avoided. Every surface, button, input, and container should carry a radius. If you find yourself reaching for a square corner, step up to `radius-sm` instead.

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Border Radius Tokens */
--radius: 0.825rem;                      /* Base */
--radius-sm: calc(var(--radius) - 4px); /* ~0.575rem */
--radius-md: calc(var(--radius) - 2px); /* ~0.7rem   */
--radius-lg: var(--radius);              /* 0.825rem  */
--radius-xl: calc(var(--radius) + 4px); /* ~1.075rem */
--radius-full: 9999px;
```

---

## Usage Rules

1. **No sharp corners. Ever.** Every element gets a radius. The smallest valid choice is `radius-sm`.
2. **`radius-lg` is the brand default.** When in doubt, reach for it — cards, panels, and most containers should land here.
3. **Match radius to scale.** Small elements get small radii. Large containers get large radii. A pill on a card never looks bigger than the card itself.
4. **Pills for status, avatars for people.** `radius-full` has a meaning — use it for status tags, avatars, and circular indicators. Don't apply it to rectangular content.
5. **Use tokens, not raw values.** Reference `var(--radius-lg)` instead of `0.825rem` so the system stays unified.