# TabataGo — Visual Style Guide v1.0

> Document pratique pour les développeurs. Tokens, composants, et exemples de code prêts à l'emploi.

---

## 1. Color Tokens

### 1.1 Brand Colors

```typescript
// src/shared/constants/colors.ts

export const BRAND = {
  PRIMARY: '#F97316',       // Orange Energy - Main brand color
  PRIMARY_LIGHT: '#FB923C', // Orange Glow - Hover, accents
  PRIMARY_DARK: '#EA580C',  // Orange Deep - Work phase
  SECONDARY: '#FBBF24',     // Gold - Streaks, badges
  DANGER: '#EF4444',        // Red - Alerts, last seconds
  SUCCESS: '#22C55E',       // Green - Complete, success
  INFO: '#3B82F6',          // Blue - Rest phase, info
} as const
```

### 1.2 Dark Theme (Base)

```typescript
export const DARK = {
  BASE: '#1A1A1E',          // Main background
  RAISED: '#222226',        // Cards level 1
  ELEVATED: '#2A2A2E',      // Cards level 2, modals
  SURFACE: '#0A0A0E',       // Focus zones, timer
  OVERLAY_1: 'rgba(255, 255, 255, 0.04)',   // Subtle hover
  OVERLAY_2: 'rgba(255, 255, 255, 0.08)',   // Active states
  OVERLAY_3: 'rgba(255, 255, 255, 0.12)',   // Selected states
  SCRIM: 'rgba(0, 0, 0, 0.6)',              // Modal overlay
} as const
```

### 1.3 Text Colors

```typescript
export const TEXT = {
  PRIMARY: '#FFFFFF',
  SECONDARY: 'rgba(255, 255, 255, 0.85)',
  TERTIARY: 'rgba(255, 255, 255, 0.70)',
  MUTED: 'rgba(255, 255, 255, 0.55)',
  HINT: 'rgba(255, 255, 255, 0.40)',
  DISABLED: 'rgba(255, 255, 255, 0.25)',
} as const
```

### 1.4 Border Colors

```typescript
export const BORDER = {
  SUBTLE: 'rgba(255, 255, 255, 0.04)',
  LIGHT: 'rgba(255, 255, 255, 0.08)',
  MEDIUM: 'rgba(255, 255, 255, 0.12)',
  STRONG: 'rgba(255, 255, 255, 0.20)',
  BRAND: 'rgba(249, 115, 22, 0.30)',
} as const
```

### 1.5 Phase Gradients

```typescript
export const PHASE_GRADIENTS = {
  IDLE: ['#0A0A14', '#12101F', '#1E1E2E'] as const,
  GET_READY: ['#451A03', '#92400E', '#D97706'] as const,
  WORK: ['#450A0A', '#991B1B', '#EA580C'] as const,
  REST: ['#0C1929', '#1E3A5F', '#2563EB'] as const,
  COMPLETE: ['#052E16', '#166534', '#16A34A'] as const,
} as const
```

### 1.6 Glow Effects

```typescript
export const GLOW = {
  // Orange glow (primary)
  ENERGY: {
    shadowColor: '#F97316',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 40,
  },
  ENERGY_INTENSE: {
    shadowColor: '#F97316',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.7,
    shadowRadius: 60,
  },
  // White glow (active)
  WHITE: {
    shadowColor: '#FFFFFF',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.3,
    shadowRadius: 20,
  },
  // Red glow (danger)
  DANGER: {
    shadowColor: '#EF4444',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 30,
  },
} as const
```

---

## 2. Typography Scale

### 2.1 Font Family

```typescript
// Single font family for consistency
export const FONT_FAMILY = {
  REGULAR: 'Inter',
  MEDIUM: 'Inter',
  SEMIBOLD: 'Inter',
  BOLD: 'Inter',
  EXTRABOLD: 'Inter',
  BLACK: 'Inter',
} as const
```

### 2.2 Type Scale

```typescript
// src/shared/constants/typography.ts

import { TextStyle } from 'react-native'

export const TYPOGRAPHY = {
  // ═══════════════════════════════════════════════════════════
  // DISPLAY — Maximum impact
  // ═══════════════════════════════════════════════════════════

  // Timer countdown (the hero number)
  countdown: {
    fontFamily: 'Inter',
    fontSize: 140,
    fontWeight: '900',
    fontVariant: ['tabular-nums'],
    letterSpacing: -2,
  } as TextStyle,

  // Time display (completion screen)
  timeDisplay: {
    fontFamily: 'Inter',
    fontSize: 72,
    fontWeight: '900',
    fontVariant: ['tabular-nums'],
    letterSpacing: -1,
  } as TextStyle,

  // Brand title (TABATA)
  brandTitle: {
    fontFamily: 'Inter',
    fontSize: 56,
    fontWeight: '900',
    letterSpacing: 8,
  } as TextStyle,

  // Display large (onboarding titles, victory)
  displayLarge: {
    fontFamily: 'Inter',
    fontSize: 42,
    fontWeight: '900',
    letterSpacing: 2,
  } as TextStyle,

  // Display small (GO, section headers)
  displaySmall: {
    fontFamily: 'Inter',
    fontSize: 32,
    fontWeight: '900',
    letterSpacing: 4,
  } as TextStyle,

  // ═══════════════════════════════════════════════════════════
  // HEADLINES — Section titles, emphasis
  // ═══════════════════════════════════════════════════════════

  // Hero button text (START)
  buttonHero: {
    fontFamily: 'Inter',
    fontSize: 30,
    fontWeight: '900',
    letterSpacing: 4,
  } as TextStyle,

  // Heading (screen titles, card titles)
  heading: {
    fontFamily: 'Inter',
    fontSize: 24,
    fontWeight: '800',
    letterSpacing: 0.5,
  } as TextStyle,

  // Subheading
  subheading: {
    fontFamily: 'Inter',
    fontSize: 20,
    fontWeight: '700',
    letterSpacing: 0.3,
  } as TextStyle,

  // ═══════════════════════════════════════════════════════════
  // BODY — Readable content
  // ═══════════════════════════════════════════════════════════

  // Large body (descriptions, emphasis)
  bodyLarge: {
    fontFamily: 'Inter',
    fontSize: 18,
    fontWeight: '600',
    lineHeight: 26,
  } as TextStyle,

  // Standard body
  body: {
    fontFamily: 'Inter',
    fontSize: 16,
    fontWeight: '400',
    lineHeight: 24,
  } as TextStyle,

  // ═══════════════════════════════════════════════════════════
  // CAPTION & LABELS — Smaller text
  // ═══════════════════════════════════════════════════════════

  // Caption (secondary info)
  caption: {
    fontFamily: 'Inter',
    fontSize: 14,
    fontWeight: '500',
    lineHeight: 20,
  } as TextStyle,

  // Label (badges, tags)
  label: {
    fontFamily: 'Inter',
    fontSize: 13,
    fontWeight: '700',
    letterSpacing: 0.5,
  } as TextStyle,

  // Overline (section labels, uppercase)
  overline: {
    fontFamily: 'Inter',
    fontSize: 11,
    fontWeight: '600',
    letterSpacing: 1.5,
    textTransform: 'uppercase',
  } as TextStyle,

  // Micro (tiny labels)
  micro: {
    fontFamily: 'Inter',
    fontSize: 10,
    fontWeight: '600',
    letterSpacing: 1,
  } as TextStyle,

} as const
```

### 2.3 Usage Examples

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  TYPOGRAPHY PREVIEW                                             │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  countdown    140   20                                   │   │
│  │  timeDisplay   72   4:00                                 │   │
│  │  brandTitle    56   TABATA                               │   │
│  │  displayLarge  42   Terminé !                            │   │
│  │  displaySmall  32   GO                                   │   │
│  │  buttonHero    30   START                                │   │
│  │  heading       24   Tabata Classic                       │   │
│  │  subheading    20   Séances cette semaine                │   │
│  │  bodyLarge     18   Description importante               │   │
│  │  body          16   Texte courant standard               │   │
│  │  caption       14   Information secondaire               │   │
│  │  label         13   BEGINNER                             │   │
│  │  overline      11   TON PROGRAMME                        │   │
│  │  micro         10   8 rounds                             │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## 3. Spacing System

### 3.1 Scale (4px base)

```typescript
// src/shared/constants/spacing.ts

export const SPACING = {
  0: 0,
  0.5: 2,
  1: 4,
  1.5: 6,
  2: 8,
  2.5: 10,
  3: 12,
  3.5: 14,
  4: 16,
  5: 20,
  6: 24,
  7: 28,
  8: 32,
  10: 40,
  12: 48,
  14: 56,
  16: 64,
  20: 80,
  24: 96,
} as const

// Semantic aliases
export const SPACE = {
  NONE: 0,
  XXXS: 2,
  XXS: 4,
  XS: 8,
  SM: 12,
  MD: 16,
  LG: 24,
  XL: 32,
  XXL: 48,
  XXXL: 64,
  PAGE: 24,        // Horizontal page padding
  SECTION: 40,     // Between major sections
  CARD: 16,        // Internal card padding
  BUTTON: 16,      // Button padding
} as const
```

### 3.2 Visual Reference

```
┌─────────────────────────────────────────────────────────────────┐
│  SPACING SCALE                                                  │
│                                                                 │
│  0   ─ (none)                                                   │
│  2   ── (xxxs)                                                  │
│  4   ──── (xxs)                                                 │
│  8   ──────── (xs)                                              │
│  12  ──────────── (sm)                                          │
│  16  ──────────────── (md)                                      │
│  24  ──────────────────────── (lg)                              │
│  32  ──────────────────────────────── (xl)                      │
│  48  ──────────────────────────────────────────────── (xxl)     │
│  64  ──────────────────────────────────────────────────────────────── (xxxl) │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## 4. Border Radius

### 4.1 Scale

```typescript
// src/shared/constants/borderRadius.ts

export const RADIUS = {
  NONE: 0,
  XS: 4,       // Tags, small elements
  SM: 6,       // Small buttons
  MD: 8,       // Badges, chips
  LG: 12,      // Buttons, inputs
  XL: 16,      // Cards
  XXL: 20,     // Large cards, modals
  XXXL: 24,    // Bottom sheets
  FULL: 9999,  // Pills, circles
} as const
```

### 4.2 Usage Guide

| Radius | Use Case |
|--------|----------|
| `XS` (4px) | Inline tags, tiny badges |
| `SM` (6px) | Small buttons, compact cards |
| `MD` (8px) | Standard badges, chips |
| `LG` (12px) | Buttons, inputs, medium cards |
| `XL` (16px) | Standard cards, list items |
| `XXL` (20px) | Large cards, bottom sheets |
| `XXXL` (24px) | Modal containers, hero cards |
| `FULL` | Pills, circular avatars, CTA buttons |

---

## 5. Shadows & Glows

### 5.1 Elevation Shadows

```typescript
// src/shared/constants/shadows.ts

import { ViewStyle } from 'react-native'

export const SHADOW = {
  // Subtle elevation (cards)
  sm: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 2,
  } as ViewStyle,

  // Medium elevation (raised cards)
  md: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 16,
    elevation: 4,
  } as ViewStyle,

  // High elevation (modals)
  lg: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.25,
    shadowRadius: 24,
    elevation: 8,
  } as ViewStyle,

} as const
```

### 5.2 Brand Glows

```typescript
export const GLOW = {
  // Primary orange glow
  brand: {
    shadowColor: '#F97316',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 40,
  } as ViewStyle,

  // Intense glow (active states)
  brandIntense: {
    shadowColor: '#F97316',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.7,
    shadowRadius: 60,
  } as ViewStyle,

  // Subtle glow (hover)
  brandSubtle: {
    shadowColor: '#F97316',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.3,
    shadowRadius: 20,
  } as ViewStyle,

  // White glow (active elements)
  white: {
    shadowColor: '#FFFFFF',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.3,
    shadowRadius: 16,
  } as ViewStyle,

  // Danger glow (warnings)
  danger: {
    shadowColor: '#EF4444',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 24,
  } as ViewStyle,

} as const
```

### 5.3 Text Shadows

```typescript
export const TEXT_SHADOW = {
  // Brand orange shadow
  brand: {
    textShadowColor: '#F97316',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 20,
  },

  // White soft shadow
  white: {
    textShadowColor: 'rgba(255, 255, 255, 0.3)',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 12,
  },

  // Intense white
  whiteIntense: {
    textShadowColor: 'rgba(255, 255, 255, 0.5)',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 20,
  },

  // Danger red
  danger: {
    textShadowColor: '#EF4444',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 16,
  },

} as const
```

---

## 6. Component Specs

### 6.1 Primary Button (CTA)

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│               ┌─────────────────────────────┐                  │
│               │         START               │                  │
│               │     (150×150 circle)        │                  │
│               └─────────────────────────────┘                  │
│                         ▓▓▓▓▓▓▓                               │
│                    (Glow breathing)                            │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Primary CTA Button (Circular)
const styles = StyleSheet.create({
  ctaButton: {
    width: 150,
    height: 150,
    borderRadius: 75,
    backgroundColor: BRAND.PRIMARY,
    alignItems: 'center',
    justifyContent: 'center',
    ...GLOW.brand,
  },
  ctaButtonPressed: {
    transform: [{ scale: 0.95 }],
  },
  ctaText: {
    ...TYPOGRAPHY.buttonHero,
    color: TEXT.PRIMARY,
  },
  ctaGlow: {
    position: 'absolute',
    width: 172,
    height: 172,
    borderRadius: 86,
    backgroundColor: BRAND.PRIMARY,
    opacity: 0.3, // Animated: 0.3 → 0.6 → 0.3
  },
})
```

### 6.2 Secondary Button (Pill)

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│     ┌───────────────────────────────────────────────────┐      │
│     │                 SUIVANT  →                        │      │
│     └───────────────────────────────────────────────────┘      │
│     (Full width pill, gradient fill, glow effect)              │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Secondary Button (Pill)
const styles = StyleSheet.create({
  button: {
    height: 54,
    borderRadius: RADIUS.FULL,
    backgroundColor: BRAND.PRIMARY,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: SPACING[10],
    ...GLOW.brandSubtle,
  },
  buttonText: {
    ...TYPOGRAPHY.subheading,
    color: TEXT.PRIMARY,
    letterSpacing: 2,
  },
})
```

### 6.3 Tertiary Button (Ghost)

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│     ┌───────────────────────────────────────────────────┐      │
│     │              Continuer sans abonnement            │      │
│     └───────────────────────────────────────────────────┘      │
│     (Transparent bg, subtle border, no glow)                   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Tertiary Button (Ghost)
const styles = StyleSheet.create({
  button: {
    height: 44,
    borderRadius: RADIUS.LG,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: SPACING[6],
    borderWidth: 1,
    borderColor: BORDER.LIGHT,
  },
  buttonText: {
    ...TYPOGRAPHY.caption,
    color: TEXT.HINT,
  },
})
```

### 6.4 Card (Standard)

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │                                                         │    │
│  │   Tabata Classic                            BEGINNER   │    │
│  │                                                         │    │
│  │   8 rounds de Burpees pour commencer en force         │    │
│  │                                                         │    │
│  │   ┌──────────┐                                        │    │
│  │   │ Burpees  │   8 rounds • 4 min • 1 ex.            │    │
│  │   └──────────┘                                        │    │
│  │                                                         │    │
│  └─────────────────────────────────────────────────────────┘    │
│  (Soft elevated, subtle border, rounded corners)               │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Standard Card
const styles = StyleSheet.create({
  card: {
    backgroundColor: DARK.RAISED,
    borderRadius: RADIUS.XXL,
    borderWidth: 1,
    borderColor: BORDER.LIGHT,
    padding: SPACING[6],
    ...SHADOW.md,
  },
  cardSelected: {
    backgroundColor: 'rgba(249, 115, 22, 0.08)',
    borderColor: BORDER.BRAND,
    ...GLOW.brandSubtle,
  },
  cardTitle: {
    ...TYPOGRAPHY.heading,
    color: TEXT.PRIMARY,
  },
  cardDescription: {
    ...TYPOGRAPHY.body,
    color: TEXT.MUTED,
    marginTop: SPACING[2],
  },
})
```

### 6.5 Badge (Difficulty)

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   BEGINNER      INTERMEDIATE      ADVANCED                     │
│   ─────────     ─────────────     ─────────                    │
│   Vert #4ADE80  Or #FBBF24        Rouge #F87171               │
│                                                                 │
│   ┌────────┐    ┌────────────┐    ┌──────────┐                │
│   │BEGINNER│    │INTERMEDIATE│    │ ADVANCED │                │
│   └────────┘    └────────────┘    └──────────┘                │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Difficulty Badge
const DIFFICULTY_STYLES = {
  BEGINNER: {
    bg: 'rgba(74, 222, 128, 0.15)',
    text: '#4ADE80',
  },
  INTERMEDIATE: {
    bg: 'rgba(251, 191, 36, 0.15)',
    text: '#FBBF24',
  },
  ADVANCED: {
    bg: 'rgba(248, 113, 113, 0.15)',
    text: '#F87171',
  },
}

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: SPACING[3],
    paddingVertical: SPACING[1.5],
    borderRadius: RADIUS.MD,
  },
  badgeText: {
    ...TYPOGRAPHY.label,
    letterSpacing: 0.5,
  },
})
```

### 6.6 Input Field

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   LABEL                                                         │
│   ┌───────────────────────────────────────────────────────┐    │
│   │  Placeholder text...                              □   │    │
│   └───────────────────────────────────────────────────────┘    │
│   (Dark background, subtle border, rounded corners)            │
│                                                                 │
│   FOCUSED STATE                                                 │
│   ┌───────────────────────────────────────────────────────┐    │
│   │  Entered text                                     ✓   │ ▒▒ │
│   └───────────────────────────────────────────────────────┘    │
│   (Brand border glow when focused)                             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Input Field
const styles = StyleSheet.create({
  inputContainer: {
    backgroundColor: DARK.RAISED,
    borderRadius: RADIUS.LG,
    borderWidth: 1,
    borderColor: BORDER.LIGHT,
    paddingHorizontal: SPACING[4],
    height: 48,
  },
  inputContainerFocused: {
    borderColor: BRAND.PRIMARY,
    ...GLOW.brandSubtle,
  },
  input: {
    ...TYPOGRAPHY.body,
    color: TEXT.PRIMARY,
    flex: 1,
  },
  label: {
    ...TYPOGRAPHY.overline,
    color: TEXT.HINT,
    marginBottom: SPACING[2],
  },
})
```

### 6.7 Progress Bar

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Default:  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│                                                                 │
│   Progress: ▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│             (Orange gradient fill with subtle glow)            │
│                                                                 │
│   Size variations:                                              │
│   Thin:   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ (4px)  │
│   Medium: ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ (6px)  │
│   Thick: ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ (8px)  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

```typescript
// Progress Bar
const styles = StyleSheet.create({
  container: {
    height: 6,
    backgroundColor: DARK.OVERLAY_2,
    borderRadius: RADIUS.FULL,
    overflow: 'hidden',
  },
  fill: {
    height: '100%',
    backgroundColor: BRAND.PRIMARY,
    borderRadius: RADIUS.FULL,
  },
  // With glow
  fillWithGlow: {
    ...GLOW.brandSubtle,
  },
})
```

---

## 7. Animation Specs

### 7.1 Timing Constants

```typescript
// src/shared/constants/animations.ts

export const DURATION = {
  INSTANT: 100,      // Micro-feedback
  FAST: 200,         // Quick interactions
  NORMAL: 300,       // Standard transitions
  SLOW: 400,         // Cross-fades, reveals
  BREATHING: 2000,   // Cyclic animations
  BREATHING_HALF: 1000,
} as const

export const EASING = {
  // Standard ease (most transitions)
  STANDARD: Easing.inOut(Easing.cubic),

  // Ease out (elements entering)
  OUT: Easing.out(Easing.cubic),

  // Ease in (elements leaving)
  IN: Easing.in(Easing.cubic),

  // Bouncy (playful interactions)
  BOUNCY: Easing.elastic(1.2),
} as const

export const SPRING = {
  // Gentle bounce
  GENTLE: {
    damping: 20,
    stiffness: 150,
  },

  // Bouncy pop (victory, celebrations)
  BOUNCY: {
    damping: 12,
    stiffness: 180,
  },

  // Snappy (quick feedback)
  SNAPPY: {
    damping: 25,
    stiffness: 300,
  },
} as const
```

### 7.2 Animation Presets

```typescript
// Pre-built animation configs

export const ANIMATION = {
  // Fade in
  FADE_IN: {
    toValue: 1,
    duration: DURATION.NORMAL,
    easing: EASING.OUT,
    useNativeDriver: true,
  },

  // Fade out
  FADE_OUT: {
    toValue: 0,
    duration: DURATION.NORMAL,
    easing: EASING.IN,
    useNativeDriver: true,
  },

  // Scale up (pop in)
  POP_IN: {
    toValue: 1,
    duration: DURATION.SLOW,
    easing: EASING.BOUNCY,
    useNativeDriver: true,
  },

  // Pulse (countdown tick)
  PULSE_UP: {
    toValue: 1.03,
    duration: 100,
    easing: EASING.OUT,
    useNativeDriver: true,
  },
  PULSE_DOWN: {
    toValue: 1,
    duration: 100,
    easing: EASING.IN,
    useNativeDriver: true,
  },

  // Breathing glow
  BREATH_HALF: {
    toValue: 1,
    duration: DURATION.BREATHING_HALF,
    easing: EASING.STANDARD,
    useNativeDriver: false, // Opacity/color can't be native
  },

  // Gradient crossfade
  GRADIENT_CROSSFADE: {
    toValue: 1,
    duration: DURATION.SLOW,
    easing: EASING.STANDARD,
    useNativeDriver: false,
  },
} as const
```

### 7.3 Common Animations

```typescript
// Glow breathing (START button)
const glowAnim = useRef(new Animated.Value(0)).current

useEffect(() => {
  Animated.loop(
    Animated.sequence([
      Animated.timing(glowAnim, {
        toValue: 1,
        duration: 2000,
        easing: EASING.STANDARD,
        useNativeDriver: false,
      }),
      Animated.timing(glowAnim, {
        toValue: 0,
        duration: 2000,
        easing: EASING.STANDARD,
        useNativeDriver: false,
      }),
    ])
  ).start()
}, [])

const glowOpacity = glowAnim.interpolate({
  inputRange: [0, 1],
  outputRange: [0.3, 0.6],
})

const glowScale = glowAnim.interpolate({
  inputRange: [0, 1],
  outputRange: [1, 1.08],
})
```

```typescript
// Countdown pulse
const pulseAnim = useRef(new Animated.Value(1)).current

useEffect(() => {
  Animated.sequence([
    Animated.timing(pulseAnim, ANIMATION.PULSE_UP),
    Animated.timing(pulseAnim, ANIMATION.PULSE_DOWN),
  ]).start()
}, [secondsLeft])
```

```typescript
// Victory pop
const scaleAnim = useRef(new Animated.Value(0.5)).current

useEffect(() => {
  Animated.spring(scaleAnim, {
    toValue: 1,
    ...SPRING.BOUNCY,
    useNativeDriver: true,
  }).start()
}, [])
```

---

## 8. Icon Reference

### 8.1 Ionicons Mapping

```typescript
// src/shared/constants/icons.ts

export const ICONS = {
  // Navigation
  HOME: 'home',
  HISTORY: 'time',
  SETTINGS: 'settings',

  // Timer controls
  PLAY: 'play',
  PAUSE: 'pause',
  STOP: 'stop',
  SKIP: 'play-skip-forward',

  // Actions
  CHEVRON_RIGHT: 'chevron-forward',
  CHEVRON_LEFT: 'chevron-back',
  CLOSE: 'close',
  CHECK: 'checkmark',

  // Status
  FLAME: 'flame',
  TROPHY: 'trophy',
  CHECK_CIRCLE: 'checkmark-circle',

  // Info
  INFO: 'information-circle',
  WARNING: 'warning',
  LOCK: 'lock-closed',
} as const
```

### 8.2 Icon Sizes

```typescript
export const ICON_SIZE = {
  XS: 16,
  SM: 20,
  MD: 24,
  LG: 28,
  XL: 32,
  XXL: 48,
} as const
```

---

## 9. Safe Areas & Layout

### 9.1 Layout Constants

```typescript
// src/shared/constants/layout.ts

export const LAYOUT = {
  // Horizontal padding for screens
  PAGE_HORIZONTAL: 24,

  // Minimum touch target
  TOUCH_TARGET: 44,

  // Tab bar height
  TAB_BAR_HEIGHT: 80,

  // Header height
  HEADER_HEIGHT: 56,

  // Bottom sheet handle
  BOTTOM_SHEET_HANDLE: 24,
} as const
```

### 9.2 Safe Area Usage

```typescript
import { useSafeAreaInsets } from 'react-native-safe-area-context'

function Screen() {
  const insets = useSafeAreaInsets()

  return (
    <View style={{
      flex: 1,
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingHorizontal: LAYOUT.PAGE_HORIZONTAL,
    }}>
      {/* Content */}
    </View>
  )
}
```

---

## 10. Accessibility

### 10.1 Minimum Touch Targets

```typescript
// All interactive elements must be at least 44×44

const TOUCH_TARGET_STYLE = {
  minHeight: 44,
  minWidth: 44,
  justifyContent: 'center',
  alignItems: 'center',
}
```

### 10.2 Contrast Ratios

| Text Size | Minimum Ratio | Status |
|-----------|---------------|--------|
| Large (18px+) | 3:1 | ✅ TEXT.PRIMARY on DARK.BASE |
| Normal | 4.5:1 | ✅ TEXT.SECONDARY on DARK.BASE |
| Small (<14px) | 4.5:1 | ⚠️ TEXT.HINT may need adjustment |

### 10.3 Accessibility Labels

```typescript
<Pressable
  accessibilityLabel="Démarrer la séance"
  accessibilityHint="Double-tap pour commencer"
  accessibilityRole="button"
>
  <Text>START</Text>
</Pressable>
```

---

## 11. Quick Reference Card

```
┌─────────────────────────────────────────────────────────────────┐
│                    TABATAGO QUICK REFERENCE                     │
├─────────────────────────────────────────────────────────────────┤
│  COLORS                                                         │
│  Primary:    #F97316 (Orange Energy)                           │
│  Dark Base:  #1A1A1E                                           │
│  Text:       #FFFFFF → rgba(255,255,255,0.40)                  │
├─────────────────────────────────────────────────────────────────┤
│  TYPOGRAPHY                                                     │
│  Font:       Inter                                              │
│  Countdown:  900 140px                                          │
│  Heading:    800 24px                                           │
│  Body:       400 16px                                           │
│  Caption:    500 14px                                           │
├─────────────────────────────────────────────────────────────────┤
│  SPACING                                                        │
│  Base:       4px                                                │
│  Page:       24px                                               │
│  Card:       16px                                               │
│  Section:    40px                                               │
├─────────────────────────────────────────────────────────────────┤
│  RADIUS                                                         │
│  Button:     9999px (pill)                                     │
│  Card:       20px                                               │
│  Badge:      8px                                                │
├─────────────────────────────────────────────────────────────────┤
│  ANIMATION                                                      │
│  Fast:       200ms                                              │
│  Normal:     300ms                                              │
│  Breathing:  2000ms                                             │
│  Easing:     cubic in-out                                       │
├─────────────────────────────────────────────────────────────────┤
│  GLOW                                                           │
│  Brand:      #F97316, 0.5 opacity, 40px radius                 │
│  White:      #FFFFFF, 0.3 opacity, 16px radius                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## 12. File Structure

```
src/shared/constants/
├── colors.ts          // All color tokens
├── typography.ts      // Type scale
├── spacing.ts         // Spacing scale
├── borderRadius.ts    // Radius tokens
├── shadows.ts         // Shadow & glow effects
├── animations.ts      // Animation presets
├── icons.ts           // Icon mappings
└── layout.ts          // Layout constants
```

---

*Document créé le 18 février 2026 — TabataGo Style Guide v1.0*
