## Design Tokens Reference

Style your UIs with consistent visual language:

### Color Theory
- **Primary**: #1A73E8 (blue) - #8AB4F8 (light blue)
- **Secondary**: #34A853 (green) - #A3D97D (light green)
- **Background**: #FFFFFF (white) - #121212 (dark)
- **Surface**: #F8F9FA (light gray) - #1E1E1E (dark)
- **Error**: #EA4335 (red) - #FFB3B3 (light red)
- **Success**: #34A853 (green) - #B3FFB3 (light green)

### Typography Scale
- **Heading 1**: 32px, 700 weight, Inter
- **Heading 2**: 24px, 600 weight, Inter
- **Body**: 16px, 400 weight, Inter
- **Caption**: 12px, 400 weight, Inter
- **Code**: 14px, 400 weight, Source Code Pro

### Spacing Scale
- **Base unit**: 4px
- **Values**: 4, 8, 12, 16, 24, 32, 48px
- **Divider**: 1px solid #EDECEC

### Border Radius Scale
- **Small**: 2px
- **Default**: 8px
- **Large**: 12px
- **Full circle**: 999px

### Shadow Scale
- **Level 1**: 0 1px 3px rgba(0,0,0,0.12)
- **Level 2**: 0 2px 5px rgba(0,0,0,0.15)
- **Level 3**: 0 4px 12px rgba(0,0,0,0.1)

### Micro-interaction States
- **Hover**: Opacity 0.9, transform: scale(1.02)
- **Focus**: Box-shadow: 0 0 0 3px rgba(--primary-color, 0.3)
- **Active**: Transform: scale(0.98), opacity 0.95