Beach Tennis Ui

Tipografia

• Títulos/headings: Fredoka Bold (700)
• Body/labels/botões: Outfit (300-700)
• Nenhuma outra fonte usada
• Tamanho mínimo: 12px

Layout

• Mobile-first (375px base)
• Container max-width: 480px
• Padding de página: 16px mobile, 24px tablet+

Interatividade

• Botões min-height: 48px (toque ao ar livre)
• Border radius: 12px+ em elementos interativos
• Inputs min-height: 48px
• Padding generoso (dedos suados em quadra)

Animações

• Usando Framer Motion (não CSS animations para enter/exit)
• Respeitando prefers-reduced-motion
• Duração máx: 400ms para transições, 800ms para celebrações
• Consultando docs/motion-specs.md

Acessibilidade para uso ao ar livre

• Contraste mínimo 4.5:1
• Texto legível sob sol forte (alto brilho)
• Áreas de toque grandes o suficiente para dedos
• Feedback visual claro para todas as interações

Componentes base do app

Os seguintes componentes devem existir em src/components/ui/:

• button.tsx — Botão com variantes: primary, secondary, outline, ghost, danger
• card.tsx — Card com variantes: default, highlight, result
• badge.tsx — Badge/pill com variantes: ocean, sunset, palm, coral, sand
• avatar.tsx — Avatar com tamanhos: sm, md, lg, xl
• input.tsx — Input com estados: default, focus, error, disabled
• score-display.tsx — Display de placar com Fredoka Bold

Padrões de layout

• Page layout: Sand background, padding 16px, max-width 480px, centered
• List layout: Cards em stack vertical, gap 12px
• Header: Fredoka título + Outfit subtitle, padding-bottom 24px
• Bottom nav: Fixo, 4 itens, Sand Light background, Ocean active state
• Modal: Backdrop blur, Sand Light card, shadow-lg, centered