/*
 * custom.css — CSS escrito à mão, carregado DEPOIS de app.css.
 *
 * Por que existe: app.css é Tailwind compilado uma única vez a partir do
 * projeto React antigo, e nada no repo consegue regerá-lo (a config em
 * tools/tailwind-src/ ainda aponta pra './src/**' de um React que não existe
 * mais aqui). Classe Tailwind nova simplesmente não sai no CSS e não tem
 * efeito nenhum — falha silenciosa, sem erro.
 *
 * Este arquivo é a saída: precisou de estilo que não existe em app.css,
 * escreve CSS de verdade aqui. Sem build, sem npm, sem tocar em app.css.
 *
 * Use os tokens que app.css já define em :root — são variáveis CSS normais e
 * continuam valendo aqui, então o visual segue o mesmo sistema de design:
 *
 *   Base       --background --foreground --card --border --input --ring
 *   Marca      --primary (lima) --accent (teal) --destructive
 *   Próprios   --volt --aqua --surface --surface-2 --line
 *   Forma      --radius
 *
 * Os valores são triplas HSL sem a função, do jeito que o shadcn faz — então
 * sempre embrulhe: `hsl(var(--primary))`, ou `hsl(var(--volt) / 0.5)` para
 * opacidade.
 *
 * Exemplo:
 *
 *   .minha-grade {
 *     background: hsl(var(--surface-2));
 *     border: 1px solid hsl(var(--line));
 *     border-radius: var(--radius);
 *   }
 *
 * Regra de convivência: se a classe já existe em app.css, use a de lá. Este
 * arquivo é para o que falta, não para reescrever o que funciona.
 */

/* Relógio da execução guiada de tiros (workout.js::runHtml) — app.css não tem
 * text-5xl/text-6xl compilados, então o tamanho vem daqui. */
.run-clock {
  font-size: 3.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) {
  .run-clock { font-size: 4.5rem; }
}