CSS Module Best Practices

I want to adopt CSS Modules in my React project.

**Current Setup:**
- Build tool: [Vite/CRA/Next.js/webpack]
- Current CSS approach: [global/styled-components/etc.]
- TypeScript: [yes/no]

**Organization Needs:**
- Component structure: [describe]
- Shared styles: [what needs sharing]
- Theming: [requirements]

**Sample Component:**
```jsx
[paste a component to convert]
```

**Concerns:**
- Class naming conventions: [preference]
- Global styles handling: [requirements]
- CSS variables: [usage plans]

Please provide:
1. CSS Module setup/configuration
2. TypeScript declaration for modules
3. Sample converted component
4. Composition patterns
5. Global styles approach
6. Theming with CSS variables
7. Best practices and organization tips