As cores utilizadas no projeto são definidas no Figma por meio de tokens de design, que representam a paleta de cores base da identidade visual. Esses tokens são declarados no arquivo global.css, garantindo consistência visual em toda a aplicação.

A partir desses tokens, sobrescrevemos as variáveis CSS utilizadas pelas bibliotecas TailwindCSS e shadcn/ui. Com isso, conseguimos personalizar os componentes dessas bibliotecas mantendo a padronização do design.

Importante: Sempre que for necessário customizar um componente do Tailwind ou do shadcn, dê preferência por alterar apenas as variáveis fornecidas pelas bibliotecas. Isso garante maior compatibilidade, manutenção e reaproveitamento dos estilos globais.

Referências úteis:
📘 Variáveis de tema no Tailwind
🎨 Theming no shadcn/ui

Exemplo de Configuração no global.css

No seu global.css, você pode declarar os tokens com variáveis CSS dentro do :root. Exemplo:

                        /* custom tailwind */
                        @theme inline {
                        --color-background-page: var(--background-page);
                        }
                        

                        /* custom shadcn */
                        :root {
                        --background: var(--background-page);
                        }