feat(components): ActionButton stopAlert + typography type fixes

docs/superpowers/specs/2026-06-09-fightrate-chart-design-system-redesign.md

@@ -0,0 +1,86 @@
+# 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`.