---
globs: *.tsx,*.ts,*.css
---

# UI System Guidelines

## Theme & Design System

- **Default Theme**: Dark mode only - do not introduce light-first designs
- **Typography**: Use CSS variables for fonts (Geist, Geist Mono, Bebas Neue, Orbitron, etc.)
- **Components**: Use shadcn/ui primitives from [src/components/ui/](mdc:src/components/ui/)
- **Spacing**: Follow Tailwind 4 defaults, prefer utility classes over custom CSS
- **Animation**: Keep Framer Motion subtle and meaningful only

## Component Structure

```typescript
// Use shadcn/ui primitives as base
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

// Extend with local wrappers when needed
export function CustomComponent() {
  return (
    <Card className="bg-black border-gray-800">
      <Button variant="outline" className="text-white">
        Action
      </Button>
    </Card>
  )
}
```

## Styling Rules

1. **Dark Theme**: All components must work in dark mode
2. **Tailwind First**: Use utility classes before custom CSS
3. **Component Variants**: Use class-variance-authority for component variants
4. **Responsive**: Mobile-first responsive design
5. **Accessibility**: Include proper ARIA labels and semantic HTML

## Font Usage

Available font variables from [src/app/layout.tsx](mdc:src/app/layout.tsx):
- `--font-geist-sans` (default)
- `--font-geist-mono`
- `--font-bebas`
- `--font-orbitron`
- `--font-inter`
- `--font-jetbrains-mono`
- `--font-space-mono`
- `--font-rajdhani`
- `--font-exo-2`

## Animation Guidelines

- Use Framer Motion sparingly for meaningful transitions
- Prefer CSS transitions for simple hover effects
- Keep animations under 300ms for UI feedback
- Respect `prefers-reduced-motion` for accessibility