# Style Guide - Lerma

## Design Philosophy

Create a **world-class, premium SPA experience** with subtle micro-interactions, clean typography, and polished visual design. Focus on usability and aesthetics following modern design principles.

## Color Palette

Use the daisyUI themes as a foundation, with custom accent modifications:
- **Primary**: `oklch(58% 0.233 277.117)` - Vibrant purple for primary actions
- **Secondary**: `oklch(58% 0.233 277.117)` - Consistent branding
- **Accent**: `oklch(60% 0.25 292.717)` - Cyan accents
- **Background**: Use light theme default, dark theme available via toggle

## Typography

- **Font Family**: System font stack for performance
- **Headings**: Bold, clean hierarchy with consistent sizing
- **Body**: Readable, well-spaced for accessibility

## Layout Principles

1. **Sidebar Navigation**: Fixed left sidebar for main navigation (SPA feel)
2. **Content Area**: Fluid content with max-width constraints for readability
3. **Consistent Spacing**: Use Tailwind spacing scale (4, 6, 8, etc.)
4. **Responsive Design**: Mobile-first approach with breakpoints

## Component Guidelines

### Navigation Component

- Fixed sidebar with logo at top
- Navigation items with icons and labels
- Active state indicator (highlighted background)
- Hover effects on navigation items
- Smooth transitions between states

### Home/Welcome Component

- Hero greeting with user context
- Quick stats overview cards
- Route cards showing available sections
- Clear visual hierarchy

### Cards

- Rounded corners (`rounded-xl`)
- Subtle shadows for depth
- Hover lift effect
- Consistent padding

### Buttons

- Primary: Filled with primary color
- Secondary: Outlined or ghost
- Hover transitions (scale, opacity)
- Focus states for accessibility

## Micro-interactions

- **Hover**: Subtle scale (1.02) and shadow increase
- **Active**: Slight press effect (scale 0.98)
- **Transitions**: 200-300ms ease-out for smooth feel
- **Loading**: Skeleton states with pulse animation

## Spacing & Layout

- Base unit: 4px (Tailwind default)
- Section padding: `p-6` to `p-8`
- Card padding: `p-4` to `p-6`
- Gap between cards: `gap-4` to `gap-6`

## Animations

- Use `transition` utility for smooth state changes
- Duration: 200ms for micro-interactions, 300ms for larger transitions
- Easing: `ease-out` for most animations

## Icons

- Use Heroicons via the `<.icon>` component
- Consistent sizing: `size-4` for inline, `size-6` for featured
- Stroke width: 1.5px for outline icons