# Aavya Design Tokens — Shadows

Our elevation system uses soft, diffused shadows in light mode and glowing accents in dark mode. The goal is the same in both: make elements feel like they're floating, not stamped onto the page.

---

## Light Mode Shadows

Drop shadows using deep navy (`#1E2338`) at 5–10% opacity. Creates the premium "floating" effect.

| Token | Use Case | Value |
|---|---|---|
| `shadow-sm` | Subtle elevation for small interactive elements | `0 1px 2px rgba(11, 6, 32, 0.05)` |
| `shadow-md` | Default floating panel shadow | `0 4px 6px -1px rgba(11, 6, 32, 0.07), 0 2px 4px -2px rgba(11, 6, 32, 0.05)` |
| `shadow-lg` | Elevated elements like dropdowns and popovers | `0 10px 15px -3px rgba(11, 6, 32, 0.08), 0 4px 6px -4px rgba(11, 6, 32, 0.05)` |
| `shadow-xl` | Modals, dialogs, and top-level floating surfaces | `0 20px 25px -5px rgba(11, 6, 32, 0.10), 0 8px 10px -6px rgba(11, 6, 32, 0.05)` |

---

## Dark Mode Glows

Instead of shadows, use subtle outer glows to separate dark objects from the dark background.

| Token | Use Case | Value |
|---|---|---|
| `glow-indigo` | Default elevation in dark mode — separates surfaces from the background | `0 0 20px rgba(99, 102, 241, 0.3)` |
| `glow-mint` | Success states and data flow indicators | `0 0 20px rgba(44, 182, 125, 0.2)` |

---

## Glassmorphism (Dark Mode)

Semi-transparent layers with background blur for depth. Use sparingly — for hero panels, floating navigation, or modal overlays.

**Glass Panel**

```css
background: rgba(30, 35, 56, 0.5);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);
```

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Shadow Tokens */

/* Light Mode Shadows */
--shadow-sm: 0 1px 2px rgba(11, 6, 32, 0.05);
--shadow-md: 0 4px 6px -1px rgba(11, 6, 32, 0.07), 0 2px 4px -2px rgba(11, 6, 32, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(11, 6, 32, 0.08), 0 4px 6px -4px rgba(11, 6, 32, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(11, 6, 32, 0.10), 0 8px 10px -6px rgba(11, 6, 32, 0.05);

/* Dark Mode Glows */
--glow-indigo: 0 0 20px rgba(99, 102, 241, 0.3);
--glow-mint: 0 0 20px rgba(44, 182, 125, 0.2);

/* Glassmorphism (Dark Mode) */
--glass-bg: rgba(30, 35, 56, 0.5);
--glass-blur: blur(24px);
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
```

---

## Usage Rules

1. **Match the shadow to the elevation level.** Small elements get `shadow-sm`. Modals get `shadow-xl`. Don't skip levels.
2. **Shadows in light, glows in dark.** Never use a dark drop shadow on a dark background — it disappears. Switch to `glow-indigo` instead.
3. **One shadow per element.** Stacking shadows muddies the float effect. Pick the right token and stop there.
4. **Glow indigo is the default.** Use `glow-mint` only for success or positive data signals — keep its meaning intentional.
5. **Glass is for hero moments.** Don't blur every surface. Reserve glassmorphism for floating navigation, hero panels, and overlay modals.