CSS moderno e Tailwind v4
Trechos do capítulo · alexandrecaramaschi.com/educacao/frontends-com-vibecoding

Leia o LEIA-ME.txt desta pasta antes de usar qualquer trecho.

### O que faz: pede a refatoração do CSS do projeto para a base de 2026, sem sair do Tailwind v4
### Onde entra: conversa com o agente, num projeto que já tem CSS global e arquivo de tokens
### Cuidado: os itens 3 e 5 dependem de recurso recente; exija a alternativa escrita junto, como o próprio pedido manda

Refatore o CSS deste projeto para usar a baseline CSS de 2026, mantendo o Tailwind v4.

1. No topo do CSS global, declare a ordem das camadas com @layer
   reset, tokens, base, componentes, utilities, para que as utilitárias
   do Tailwind sempre vençam meu CSS de componente.
2. No tokens.css, derive os estados hover/active e as bordas translúcidas
   com color-mix(in oklch, var(--primary) ...): NÃO crave hex novos.
3. Troque o bloco [data-theme="dark"] por light-dark() nos tokens de
   superfície e texto, com color-scheme: light dark no :root e um
   fallback antes de cada linha light-dark().
4. Na fileira de cartões do dashboard, use grid-template-rows: subgrid
   para alinhar títulos e rodapés.
5. No textarea de comentário, aplique field-sizing: content (com @supports
   e fallback de altura) para ele crescer sem JS.

Mantenha contraste AA e respeite prefers-reduced-motion em toda animação.

### O que faz: liga três recursos recentes de CSS como melhoria progressiva, cada um com alternativa
### Onde entra: conversa com o agente, sobre uma tela específica
### Cuidado: sem a exigência de @supports e alternativa, a tela quebra num navegador que você não usa e o defeito só chega pela reclamação de alguém

Aplique a baseline CSS de 2026 nesta tela, sempre como progressive enhancement:
- Estilize o estado aberto de dialog/details com :open (sem checar atributo nem classe).
- Derive a cor de texto com contrast-color() embrulhado em @supports, mantendo o token AA como fallback.
- Onde houver clip-path/offset-path complexo, use shape() em vez da string do path().
Embrulhe cada recurso em @supports, mantenha fallback e respeite prefers-reduced-motion.

### O que faz: escreve de uma vez os tokens de largura, espaçamento, raio, cor e elevação do projeto
### Onde entra: conversa com o agente, no arquivo de estilos, antes da primeira tela
### Cuidado: as medidas vêm de uma auditoria de 26 sites curados por um diretório de design, então valem como repertório de decisão, e não como norma

Monte meus tokens de layout e cor no padrão técnico dos sites de alto padrão, num único arquivo de CSS, mantendo a base de cor em OKLCH:
- Container: --container-max: 1200px, centralizado sobre canvas full-bleed.
- Espaçamento em base 4 (4/8/12/16/24/32) e --section-gap: 80px; padding de card 24px com gap interno de 16px; coluna de leitura de texto longo limitada a ~560px.
- Raio: escolha UM regime entre pílula (assinatura de marca), médio 8–16px (app) e reto 0–4px (editorial), justifique a escolha e aplique consistente; se usar contraste de raio, documente a exceção (ex.: inputs em 0).
- Cor: um único acento de marca, usado SÓ em CTA/ações (nunca decorativo); canvas neutro quente (near-white, jamais #fff puro); texto em quase-preto (jamais #000); par semântico sucesso/erro com AA.
- Elevação: sem box-shadow pesada, com profundidade por empilhamento de superfícies e hairline de 1px; se houver sombra, tingida da marca e com 1–5% de opacidade.
Regra: nenhum valor solto nos componentes; tudo de token nomeado. Mantenha contraste AA nos dois temas.