# Color Tokens

These color tokens are defined in `src/index.css` using Tailwind v4's `@theme inline` directive. Each token automatically generates all Tailwind utility classes (bg-, text-, border-, ring-, etc.) with full modifier support (hover:, focus:, /opacity).

## Primary Colors

- `accent` - Primary brand color (dynamically set by application)
- `action` - Alias for accent
- `ring` - Focus ring color (defaults to accent)

## Gray Scale

- `gray-0` through `gray-950` - Full grayscale range
- `border` - Default border color (gray-200)
- `border-dark` - Darker border (gray-400)

## Surface Colors

- `background` - Page background
- `card` - Card/elevated surface
- `muted` - Muted/subtle background
- `input` - Form input background
- `navigation` - Navigation bar background
- `popover` - Popover/dropdown background

## Text Colors

- `primary` - Primary text
- `secondary` - Secondary text
- `disabled` - Disabled text

## Semantic Colors

- `destructive` - Error/danger states
- `success` - Success states
- `warning` - Warning states

## Chart Colors

- `chart-1` through `chart-4` - Chart color palette