# FightRate — Redesign de gráficos e sistema visual

## Objetivo

Corrigir a direção visual do FightRate: gráficos profissionais, úteis e interativos; interface menos genérica/card-heavy; design system original e obrigatório para próximas telas.

## Problemas atuais

- Gráficos aparecem mesmo sem dados úteis.
- Estados vazios parecem gráficos quebrados/amadores.
- Vico está subutilizado: pouca interação, pouco contexto visual, sem zoom/scroll claro.
- UI tem excesso de cards iguais, pouca hierarquia e pouco padrão visual.
- O aplicativo parece montado por IA, não por um produto esportivo premium.

## Decisões

- Manter Vico. Pesquisa em 2026-06 mostra Vico como biblioteca Compose/Kotlin madura com suporte a `scrollState` e `zoomState`.
- Não trocar dependências nesta fase.
- Não desenhar chart customizado em Canvas.
- Não renderizar gráfico se houver menos de 2 pontos reais.
- Se houver poucos dados, mostrar insight/empty state, não eixos vazios.
- O eixo temporal deve continuar baseado em timestamps reais.
- O design system passa a ser a fonte visual do app.

## Design System: FightRate Combat Lab

### Conceito

Interface de laboratório de performance para lutas: escura, precisa, atlética, com sensação de equipamento esportivo premium. Menos cartões genéricos, mais painéis editoriais, faixas de dados, chips compactos, e superfícies com função clara.

### Tokens principais

- Fundo: `#090A0B` — preto quente de OLED.
- Surface: `#111315` — bloco primário.
- Surface Elevated: `#181B1E` — módulo de leitura.
- Ink: `#F6F0E7` — texto principal quente.
- Muted: `#A79C8F` — texto secundário.
- Dim: `#6E665D` — metadados.
- Accent: `#FF6A1A` — FightRate Orange.
- Amber: `#F6B44B` — atenção.
- Redline: `#FF3B30` — limite/risco.
- Cyan: `#48C7D8` — recuperação/ciência.
- Line: `#2A2E32` — divisores sutis.

### Forma

- Telas: blocos editoriais com seções claras, não grade de cards repetidos.
- Painéis principais: radius 28–32 dp, borda hairline, padding 20–24 dp.
- Métricas pequenas: strips/pills, não cards grandes.
- Gráfico: painel amplo, prioridade visual máxima, legenda compacta.
- Empty state: peça editorial com próxima ação, nunca gráfico vazio.

### Tipografia

- Números grandes, tabulares quando possível.
- Títulos curtos, fortes, em PT-BR.
- Corpo pequeno, mas legível. Nada abaixo de 10sp para informação essencial.
- Evitar muitos pesos/tamanhos diferentes.

### Gráficos

- Mostrar gráfico somente se `samples.size >= 2` e duração > 0.
- Para 1 ponto: mostrar leitura única e instrução de continuar medindo.
- Para 0 pontos: mostrar estado vazio contextual.
- Linha com espessura alta, cor FightRate Orange, área/ambiente escuro.
- Scroll/zoom habilitado via Vico quando possível.
- Controles explícitos de janela/zoom fora do gráfico.
- Resumo sempre visível: média, pico, mínima, duração, densidade de amostras.
- Não usar índices como tempo; usar segundos/minutos reais desde o início da janela.

## Fatias de implementação

1. Consolidar tokens em tema/design system.
2. Criar componentes visuais base: `FightSection`, `FightMetricStrip`, `FightEmptyState`, `FightChartPanel`.
3. Atualizar `HeartRateLineChart` para não renderizar vazio e usar zoom/scroll Vico.
4. Reorganizar Home/Histórico para priorizar gráfico e dados úteis.
5. Atualizar documentação e roadmap.
6. Rodar testes/build e gerar APK.

## Critérios de sucesso

- Nenhum gráfico vazio é renderizado.
- Gráfico com dados tem zoom/scroll ou controle equivalente claro.
- Histórico sem dados mostra estado vazio premium.
- UI usa tokens e componentes do design system.
- Build final passa com `./gradlew :app:testDebugUnitTest :app:assembleDebug`.