Design System Token Generator

Generate a design token system for [BRAND/PROJECT].

Project Context:
- Brand colors: [PRIMARY COLORS]
- Typography: [FONT CHOICES]
- Scale preference: [4pt/8pt BASE]
- Platforms: [WEB/IOS/ANDROID]
- Existing system: [NONE/PARTIAL/MIGRATING]

Create a comprehensive token system:

**1. Color Tokens**

*Primitive Colors:*
```
color.primitive.blue.50: #...
color.primitive.blue.100: #...
[full scale for each hue]
```

*Semantic Colors:*
```
color.background.primary: {color.primitive...}
color.background.secondary: ...
color.text.primary: ...
color.text.secondary: ...
color.text.inverse: ...
color.border.default: ...
color.interactive.primary: ...
color.interactive.hover: ...
color.status.success: ...
color.status.warning: ...
color.status.error: ...
color.status.info: ...
```

**2. Typography Tokens**
```
font.family.heading: ...
font.family.body: ...
font.family.mono: ...
font.size.xs: ...
font.size.sm: ...
font.size.md: ...
font.size.lg: ...
font.size.xl: ...
font.weight.regular: ...
font.weight.medium: ...
font.weight.bold: ...
line-height.tight: ...
line-height.normal: ...
line-height.relaxed: ...
letter-spacing.tight: ...
letter-spacing.normal: ...
```

**3. Spacing Tokens**
```
space.0: 0
space.1: 4px
space.2: 8px
space.3: 12px
space.4: 16px
[continue scale...]
```

**4. Sizing Tokens**
```
size.icon.sm: ...
size.icon.md: ...
size.icon.lg: ...
size.avatar.sm: ...
size.avatar.md: ...
size.avatar.lg: ...
```

**5. Border Tokens**
```
border.radius.none: ...
border.radius.sm: ...
border.radius.md: ...
border.radius.lg: ...
border.radius.full: ...
border.width.thin: ...
border.width.medium: ...
```

**6. Shadow Tokens**
```
shadow.sm: ...
shadow.md: ...
shadow.lg: ...
shadow.inner: ...
```

**7. Animation Tokens**
```
duration.instant: ...
duration.fast: ...
duration.normal: ...
duration.slow: ...
easing.default: ...
easing.in: ...
easing.out: ...
easing.in-out: ...
```

**8. Breakpoint Tokens**
```
breakpoint.sm: ...
breakpoint.md: ...
breakpoint.lg: ...
breakpoint.xl: ...
```

**9. Z-Index Tokens**
```
z-index.dropdown: ...
z-index.sticky: ...
z-index.modal: ...
z-index.tooltip: ...
```

**10. Token Implementation**
- CSS custom properties format
- JavaScript/TypeScript export
- Platform-specific transformations

Generate a design token system for [BRAND/PROJECT].

Project Context:
- Brand colors: [PRIMARY COLORS]
- Typography: [FONT CHOICES]
- Scale preference: [4pt/8pt BASE]
- Platforms: [WEB/IOS/ANDROID]
- Existing system: [NONE/PARTIAL/MIGRATING]

Create a comprehensive token system:

**1. Color Tokens**

*Primitive Colors:*
```
color.primitive.blue.50: #...
color.primitive.blue.100: #...
[full scale for each hue]
```

*Semantic Colors:*
```
color.background.primary: {color.primitive...}
color.background.secondary: ...
color.text.primary: ...
color.text.secondary: ...
color.text.inverse: ...
color.border.default: ...
color.interactive.primary: ...
color.interactive.hover: ...
color.status.success: ...
color.status.warning: ...
color.status.error: ...
color.status.info: ...
```

**2. Typography Tokens**
```
font.family.heading: ...
font.family.body: ...
font.family.mono: ...
font.size.xs: ...
font.size.sm: ...
font.size.md: ...
font.size.lg: ...
font.size.xl: ...
font.weight.regular: ...
font.weight.medium: ...
font.weight.bold: ...
line-height.tight: ...
line-height.normal: ...
line-height.relaxed: ...
letter-spacing.tight: ...
letter-spacing.normal: ...
```

**3. Spacing Tokens**
```
space.0: 0
space.1: 4px
space.2: 8px
space.3: 12px
space.4: 16px
[continue scale...]
```

**4. Sizing Tokens**
```
size.icon.sm: ...
size.icon.md: ...
size.icon.lg: ...
size.avatar.sm: ...
size.avatar.md: ...
size.avatar.lg: ...
```

**5. Border Tokens**
```
border.radius.none: ...
border.radius.sm: ...
border.radius.md: ...
border.radius.lg: ...
border.radius.full: ...
border.width.thin: ...
border.width.medium: ...
```

**6. Shadow Tokens**
```
shadow.sm: ...
shadow.md: ...
shadow.lg: ...
shadow.inner: ...
```

**7. Animation Tokens**
```
duration.instant: ...
duration.fast: ...
duration.normal: ...
duration.slow: ...
easing.default: ...
easing.in: ...
easing.out: ...
easing.in-out: ...
```

**8. Breakpoint Tokens**
```
breakpoint.sm: ...
breakpoint.md: ...
breakpoint.lg: ...
breakpoint.xl: ...
```

**9. Z-Index Tokens**
```
z-index.dropdown: ...
z-index.sticky: ...
z-index.modal: ...
z-index.tooltip: ...
```

**10. Token Implementation**
- CSS custom properties format
- JavaScript/TypeScript export
- Platform-specific transformations