# Aavya Design Tokens — Colors

Our color system is built around four brand colors and a token-based theme structure that supports both light and dark modes. Use tokens by name — never hardcode hex values in components.

---

## Brand Colors

The four core colors that define the Aavya identity.

| Token | Hex | Role |
|---|---|---|
| `--primary` | `#4F46E5` | Indigo. Primary actions, buttons, CTAs, and links. |
| `--aavya` | `#3AADDD` | Aavya Cyan. Accent color — focus rings, links, eyebrow text. |
| `--navy` | `#1E2338` | Deep Navy. Logo mark, image backgrounds, dark anchors. |
| `--mint` | `#2CB67D` | Mint Green. Semantic success states only — not a brand accent. |

> **Note:** `--violet` remains as a back-compat alias pointing to `#4F46E5`. Do not use in new code. Electric Violet (`#7F5AF0`) is retired.

---

## Light Mode

The default theme. Clean, bright, and readable.

| Token | Hex | Purpose |
|---|---|---|
| `--background` | `#FAFBFC` | Page background — near-white cool surface |
| `--foreground` | `#1E2338` | Primary text — deep navy for maximum contrast |
| `--card` | `#FFFFFF` | Card and floating panel backgrounds |
| `--card-foreground` | `#1E2338` | Text on cards |
| `--popover` | `#FFFFFF` | Popover and dropdown backgrounds |
| `--popover-foreground` | `#1E2338` | Text on popovers |
| `--primary` | `#4F46E5` | Primary actions, buttons, CTAs |
| `--primary-foreground` | `#FFFFFF` | Text on primary backgrounds |
| `--secondary` | `#EEF0F4` | Subtle neutral surface |
| `--secondary-foreground` | `#1E2338` | Text on secondary surfaces |
| `--muted` | `#F1F3F6` | Muted backgrounds for low-emphasis areas |
| `--muted-foreground` | `#5B6275` | Secondary text and labels |
| `--accent` | `#E8EBF0` | Subtle accent surface |
| `--accent-foreground` | `#1E2338` | Text on accent surfaces |
| `--border` | `#E2E5EB` | Borders and dividers — light cool grey |
| `--input` | `#E2E5EB` | Input border color |
| `--ring` | `#3AADDD` | Focus rings — Aavya Cyan |
| `--sidebar` | `#F8FBFD` | Sidebar background |
| `--sidebar-primary` | `#4F46E5` | Active nav item color |
| `--sidebar-accent` | `#ECEAFB` | Hover/active state surface in sidebar |
| `--sidebar-accent-foreground` | `#4F46E5` | Text on sidebar accent |

---

## Dark Mode

The navy-anchored theme. Deep, calm, and high-contrast.

| Token | Hex | Purpose |
|---|---|---|
| `--background` | `#14172A` | Navy-anchored dark foundation |
| `--foreground` | `#F4F5F8` | Near-white — slightly cool for comfort on dark |
| `--card` | `#1E2338` | Navy surface for floating panels |
| `--card-foreground` | `#F4F5F8` | Near-white text on dark cards |
| `--popover` | `#1E2338` | Popover and dropdown backgrounds |
| `--popover-foreground` | `#F4F5F8` | Text on popovers |
| `--primary` | `#6366F1` | Indigo-500 — brighter for legibility on dark |
| `--primary-foreground` | `#FFFFFF` | Text on primary backgrounds |
| `--secondary` | `#252A42` | Elevated surface — one step above background |
| `--secondary-foreground` | `#F4F5F8` | Near-white text on secondary surfaces |
| `--muted` | `#1A1F33` | Recessed surface — one step below background |
| `--muted-foreground` | `#9BA1B5` | Mid-tone for secondary text |
| `--accent` | `#2A2F4A` | Subtle accent surface |
| `--accent-foreground` | `#F4F5F8` | Text on accent surfaces |
| `--border` | `#2A2F4A` | Matches accent surface for subtle borders |
| `--input` | `#2A2F4A` | Input border color |
| `--ring` | `#3AADDD` | Focus rings — Aavya Cyan (consistent across modes) |
| `--sidebar` | `#242736` | Slightly lighter than background for separation |
| `--sidebar-primary` | `#6366F1` | Active nav item color |
| `--sidebar-accent` | `#322F66` | Hover/active state surface in sidebar |
| `--sidebar-accent-foreground` | `#C7C5FA` | Indigo-200 text on sidebar accent |

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Color Tokens — Brand Colors */
--primary: #4F46E5;
--aavya: #3AADDD;
--navy: #1E2338;
--mint: #2CB67D;
--violet: #4F46E5; /* back-compat alias — do not use in new code */

/* Light Mode */
--background: #FAFBFC;
--foreground: #1E2338;
--card: #FFFFFF;
--card-foreground: #1E2338;
--popover: #FFFFFF;
--popover-foreground: #1E2338;
--primary: #4F46E5;
--primary-foreground: #FFFFFF;
--secondary: #EEF0F4;
--secondary-foreground: #1E2338;
--muted: #F1F3F6;
--muted-foreground: #5B6275;
--accent: #E8EBF0;
--accent-foreground: #1E2338;
--border: #E2E5EB;
--input: #E2E5EB;
--ring: #3AADDD;
--sidebar: #F8FBFD;
--sidebar-primary: #4F46E5;
--sidebar-accent: #ECEAFB;
--sidebar-accent-foreground: #4F46E5;

/* Dark Mode */
--background: #14172A;
--foreground: #F4F5F8;
--card: #1E2338;
--card-foreground: #F4F5F8;
--popover: #1E2338;
--popover-foreground: #F4F5F8;
--primary: #6366F1;
--primary-foreground: #FFFFFF;
--secondary: #252A42;
--secondary-foreground: #F4F5F8;
--muted: #1A1F33;
--muted-foreground: #9BA1B5;
--accent: #2A2F4A;
--accent-foreground: #F4F5F8;
--border: #2A2F4A;
--input: #2A2F4A;
--ring: #3AADDD;
--sidebar: #242736;
--sidebar-primary: #6366F1;
--sidebar-accent: #322F66;
--sidebar-accent-foreground: #C7C5FA;
```

---

## Usage Rules

1. **Use tokens, not hex values.** Reference `var(--primary)` instead of `#4F46E5` in components.
2. **Foreground pairs with background.** Always pair `--card` with `--card-foreground`, `--primary` with `--primary-foreground`, and so on.
3. **`--aavya` is the brand accent.** Use it for focus rings, links, and eyebrow text. `--primary` is for actions.
4. **Mint signals success only.** Do not use `bg-mint` or `text-mint` in non-success UI.
5. **Test in both modes.** Every component should look right in light and dark mode before it ships.