feat: design system v2 with liquid glass aesthetic

Overhaul design constants for OLED-first dark mode:
- Colors: brand palette, phase colors, glass/shadow tokens, gradients
- Typography: Inter font scale matching iOS type system
- Spacing: 4px base unit with layout constants
- Border radius: liquid glass card radii
- Animations: spring/timing presets for UI transitions

Add v2 product docs (PRD, PDD, BDSD) and update CLAUDE.md.
Install expo-video, expo-sharing, @expo-google-fonts/inter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -1,123 +1,213 @@
-# TabataGo — CLAUDE.md
-> Lis ce fichier EN ENTIER avant chaque session. C'est la constitution du projet.
+# TabataFit — CLAUDE.md
+> "Apple Fitness+ for Tabata" — Lis ce fichier EN ENTIER avant chaque session.
 
-## Projet
-Application mobile Tabata (iOS + Android) construite avec Expo SDK 52 + Expo Router v3.
-Modèle freemium via RevenueCat. Analytics via PostHog. Offline-first.
+---
 
-## Environnement de développement
-**Test sur device physique via Expo Go** — pas de simulateur iOS.
-- Scanner le QR code affiché par `npx expo start` avec l'app Expo Go sur le téléphone
-- Le téléphone et le Mac doivent être sur le **même réseau Wi-Fi**
-- En cas de problème réseau : `npx expo start --tunnel` (utilise ngrok, plus lent mais fiable)
+## 🎯 Vision
 
-### Contraintes Expo Go à respecter
-- **Pas de modules natifs custom** — uniquement les modules inclus dans le SDK Expo Go
-- `react-native-purchases` (RevenueCat) **ne fonctionne PAS dans Expo Go** → mocker le paywall en dev, tester sur build EAS uniquement
-- `expo-notifications` fonctionne partiellement dans Expo Go → tester les notifications sur build EAS dev
-- Modules **compatibles Expo Go SDK 52** (utilisables sans build) :
-  `expo-av`, `expo-haptics`, `expo-keep-awake`, `expo-router`, `expo-secure-store`,
-  `@react-native-async-storage/async-storage`, `expo-localization`, `react-native-posthog`
+**TabataFit est l'Apple Fitness+ du Tabata.**
 
-### Workflow de test
-1. **Expo Go** → développement UI, timer, audio, exercices (90% du dev)
-2. **EAS Build (Development)** → tester RevenueCat, notifications avancées
-3. **EAS Build (Production)** → build final App Store / Play Store
+Une expérience premium, video-first, guidée par des coachs, qui transforme 4 minutes d'exercice en une expérience de fitness immersive.
 
-## Stack technique — règles non-négociables
-| Domaine | Solution | Interdit |
-|---|---|---|
-| Framework | Expo SDK 52 (managed workflow) | Bare workflow sauf si absolument nécessaire |
-| Navigation | Expo Router v3 (file-based) | React Navigation seul |
-| State global | Zustand + AsyncStorage | Redux, MobX, Context pour state global |
-| Timer engine | Date.now() delta dans un hook isolé | setInterval seul (drift inacceptable) |
-| Audio | expo-av avec AVAudioSession | expo-audio (instable), react-native-sound |
-| Paiements | react-native-purchases (RevenueCat) | IAP natif direct — **MOCKER en dev Expo Go** |
-| Analytics | react-native-posthog | Firebase Analytics, Amplitude |
-| Styles | StyleSheet.create() | Styles inline, Tailwind, NativeWind |
-| Types | TypeScript strict (`"strict": true`) | any, @ts-ignore sauf justification |
+*"Workouts that work. Beautifully."*
+
+---
+
+## 📱 Produit
+
+### Positionnement
+- **Analogy** : "If Apple made a Tabata app"
+- **Focus** : Tabata/HIIT uniquement (pas multi-activité)
+- **Durée** : 4-20 min (format Tabata)
+- **Différenciateur** : Video-led + Coaching audio + Timer intelligent
+
+### Stack Technique
+| Domaine | Solution |
+|---------|----------|
+| Framework | Expo SDK 52 (managed) |
+| Navigation | Expo Router v3 |
+| State | Zustand + AsyncStorage |
+| Video | expo-av → HLS streaming |
+| Audio | expo-av (coaching + music) |
+| Animations | React Native Animated |
+| Payments | RevenueCat |
+| Analytics | PostHog |
+
+---
+
+## 📚 Documentation
+
+| Document | Description |
+|----------|-------------|
+| `TabataFit_PRD_v2.0.md` | Product Requirements — features, roadmap |
+| `TabataFit_PDD_v2.0.md` | Product Design — screens, UX, flows |
+| `TabataFit_BDSD_v2.0.md` | Brand Design — colors, typography, style |
+
+**TOUJOURS lire ces documents avant de développer.**
+
+---
+
+## 🏗️ Architecture
 
-## Architecture — structure de fichiers
 ```
 src/
   features/
-    timer/
-      hooks/useTimerEngine.ts      ← moteur central, AUCUN JSX
-      hooks/useTimerSync.ts        ← synchronise audio + exercice sur les events timer
-      components/TimerDisplay.tsx  ← affichage uniquement, reçoit tout par props
-      components/TimerControls.tsx ← boutons start/pause/stop/skip
-      types.ts                     ← TimerPhase, TimerState, TimerConfig
-    audio/
-      hooks/useAudioEngine.ts      ← gestion expo-av, preload, crossfade
-      hooks/useAudioSettings.ts    ← préférences utilisateur (ambiance, volume)
-      data/tracks.ts               ← catalogue des tracks (offline)
-      data/sounds.ts               ← catalogue des signaux de phase
-      types.ts
-    exercises/
-      hooks/useExercise.ts         ← sélection, navigation entre exercices
-      components/ExerciseDisplay.tsx ← rendu selon la phase courante
-      components/ExerciseGif.tsx   ← affichage GIF avec fallback
-      data/exercises.ts            ← les 38 exercices (offline)
-      types.ts
-    programs/
-      hooks/useProgram.ts
-      components/ProgramBuilder.tsx
-      data/defaultPrograms.ts
-    onboarding/
-      hooks/useOnboarding.ts
-      screens/                     ← 6 écrans (1 fichier par écran)
-    paywall/
-      hooks/usePaywall.ts          ← RevenueCat wrapper
-      components/PaywallScreen.tsx
+    home/           # Home tab - For You, Continue, Collections
+    workouts/       # Workouts tab - Categories, workout list
+    player/         # Active workout - Video, timer, stats
+    activity/       # Activity tab - Stats, trends, calendar
+    browse/         # Browse tab - Filters, trainers
+    profile/        # Profile tab - Settings, achievements
   shared/
-    components/                    ← Button, Card, Typography, etc.
-    hooks/                         ← useHaptics, useKeepAwake, useAppState
-    utils/                         ← formatTime, etc.
-    constants/                     ← couleurs, durées par défaut
-  app/                             ← Expo Router (fichiers de route uniquement)
+    components/     # Button, Card, VideoPlayer, etc.
+    hooks/          # useTimer, useVideo, useHaptics
+    utils/          # formatTime, etc.
+    constants/      # colors, typography, spacing
+  app/              # Expo Router routes
     (tabs)/
-      index.tsx                    ← Home
-      history.tsx
-      settings.tsx
-    timer/index.tsx
-    programs/[id].tsx
-    onboarding/index.tsx
-    paywall/index.tsx
+      index.tsx     # Home
+      workouts.tsx  # Workouts
+      activity.tsx  # Activity
+      browse.tsx    # Browse
+      profile.tsx   # Profile
+    player/
+      [id].tsx      # Workout player
 ```
 
-## Règles de code
-1. **Un fichier = une responsabilité** — si un hook dépasse 150 lignes, il doit être découpé
-2. **Toute logique métier dans les hooks** — les composants n'ont QUE du JSX + appel de hooks
-3. **Barrel exports** — chaque feature expose un `index.ts` propre
-4. **Tests colocalisés** — `ComponentName.test.tsx` dans le même dossier
-5. **Pas d'effet secondaire dans le render** — tout dans useEffect ou les handlers
-6. **Typage strict des events** — pas de `any` dans les callbacks de timer/audio
+---
+
+## 🎨 Design System
+
+### Couleurs Principales
+```typescript
+BACKGROUND: '#000000'    // Pure black
+SURFACE: '#1C1C1E'       // Charcoal
+BRAND: '#FF6B35'         // Flame orange
+REST: '#5AC8FA'          // Ice blue
+SUCCESS: '#30D158'       // Energy green
+```
+
+### Phase Colors (Critique)
+```typescript
+PREP: '#FF9500'    // Orange-yellow
+WORK: '#FF6B35'    // Flame orange
+REST: '#5AC8FA'    // Ice blue
+COMPLETE: '#30D158' // Green
+```
+
+### Typography
+- **Font**: Inter (Google Fonts)
+- **Timer**: 96px, Black weight
+- **Titles**: 34px/28px/22px
+- **Body**: 17px
+
+---
+
+## 📋 Priorités Développement
+
+### Phase 1 — MVP (Semaines 1-4)
+1. ✅ Design system setup
+2. 🔲 Home tab (Featured, Continue Watching)
+3. 🔲 Workouts tab (Categories)
+4. 🔲 Pre-workout detail screen
+5. 🔲 Video player avec timer overlay
+6. 🔲 Workout complete screen
+7. 🔲 20 workouts (mock data)
+
+### Phase 2 — Core (Semaines 5-8)
+1. 🔲 Activity tab (Stats, Calendar)
+2. 🔲 Browse tab (Filters, Trainers)
+3. 🔲 Profile tab (Settings)
+4. 🔲 Apple Watch integration
+5. 🔲 50 workouts total
+
+### Phase 3 — Premium (Semaines 9-12)
+1. 🔲 Offline downloads
+2. 🔲 Burn Bar
+3. 🔲 Subscription system
+4. 🔲 Achievements
+5. 🔲 100+ workouts
+
+---
+
+## 🧪 Test Environment
+
+**Expo Go sur device physique** — pas de simulateur.
+
+1. `npx expo start`
+2. Scanner le QR code avec Expo Go
+3. Même réseau Wi-Fi requis
+
+---
+
+## 📝 Règles de Code
+
+1. **Un fichier = une responsabilité**
+2. **Toute logique métier dans les hooks**
+3. **Components = JSX uniquement**
+4. **TypeScript strict** — pas de `any`
+5. **Styles avec StyleSheet.create()**
+6. **Dark mode only** — pas de light mode
+
+---
+
+## 🎬 Contenu Video
+
+### Format Workout Video
+- **Resolution**: 1080p minimum
+- **Duration**: Match workout duration
+- **Structure**:
+  - Intro (5s): Trainer greeting
+  - Prep (3s): 3-2-1 countdown
+  - Work (20s): Exercise demonstration
+  - Rest (10s): Recovery, next exercise preview
+  - Repeat for each round
+  - Outro (5s): Celebration, trainer sign-off
+
+### Trainers (5 au launch)
+1. **Emma** — Energy queen, beginner-friendly
+2. **Jake** — Strength focus
+3. **Mia** — Form perfectionist
+4. **Alex** — Cardio beast
+5. **Sofia** — Chill but effective
+
+---
+
+## 💰 Monetization
+
+### Free Tier
+- 3 workouts free forever
+- Basic stats
+- Ads between workouts
+
+### Premium ($6.99/mo or $49.99/yr)
+- Unlimited workouts
+- Offline downloads
+- Apple Watch integration
+- Advanced stats
+- No ads
+- Family Sharing
+
+---
+
+## 🚀 Commands
 
-## Commandes du projet
 ```bash
-npx expo start                    # dev — scanner le QR avec Expo Go
-npx expo start --tunnel           # si problème réseau Wi-Fi (ngrok)
-npx expo start --clear            # vider le cache Metro si comportement bizarre
-jest --watchAll                   # tests en continu
-eas build --profile development   # build dev (pour tester RevenueCat, notifs)
-eas build --platform ios          # build TestFlight
-npx expo export                   # bundle production
+npx expo start              # Development
+npx expo start --tunnel     # If network issues
+npx expo start --clear      # Clear cache
+npx tsc --noEmit            # Type check
+eas build --profile dev     # Dev build
 ```
 
-## Comment utiliser les skills
+---
 
-Quand tu travailles sur une feature spécifique, lis le skill correspondant :
-- Timer → `.claude/skills/timer/SKILL.md`
-- Audio → `.claude/skills/audio/SKILL.md`
-- Exercices → `.claude/skills/exercises/SKILL.md`
-- Workflow général → `.claude/skills/workflow/SKILL.md`
+## 📖 Comment Utiliser les Skills
 
-## Priorité d'implémentation V1
-1. `useTimerEngine` + `TimerDisplay` (plein écran)
-2. `useAudioEngine` + synchronisation avec timer
-3. `ExerciseDisplay` + données des 38 exercices
-4. Synchronisation triple timer × audio × exercice
-5. Onboarding 6 écrans + mini-démo live
-6. Paywall RevenueCat
-7. Streak + historique
-8. Notifications de rappel
+Voir `.claude/skills/` pour les guides spécialisés.
+
+---
+
+*Document updated: February 18, 2026*
+*Version: 2.0*
+*Project: TabataFit — Apple Fitness+ for Tabata*