Colors

O sistema de cores da Ana Autentic é construído sobre uma paleta pink/magenta com 11 tonalidades, cores semânticas para feedback, e tokens de superfície/borda para layout. Alterne o tema para ver os valores em light e dark mode.

Brand Palette

Escala completa da marca. aautentic-500 (#ff3d8d) é a cor primária.

aautentic-50

#fef1f7

aautentic-100

#fee5f1

aautentic-200

#ffcae5

aautentic-300

#ff9fcd

aautentic-400

#ff63aa

aautentic-500

#ff3d8d

aautentic-600

#f01263

aautentic-700

#d10549

aautentic-800

#ad073c

aautentic-900

#8f0c36

aautentic-950

#58001b

Semantic Colors

Cores com significado funcional. Os valores mudam automaticamente entre light e dark mode.

--primary

Cor principal da marca - botões, links, destaques

--primary-foreground

Texto sobre fundo primary

--secondary

Fundo de elementos secundários

--secondary-foreground

Texto sobre fundo secondary

--accent

Fundo de itens ativos em menus e seleções

--accent-foreground

Texto sobre fundo accent

--destructive

Ações destrutivas - excluir, erro

--success

Confirmação, sucesso, pagamento aprovado

--warning

Alertas e avisos

--info

Informações e links auxiliares

Surfaces

Tokens de fundo para diferentes camadas da interface.

--background

Fundo principal de todas as páginas

--surface

Header, sidebar, áreas elevadas

--surface-muted

Fundo de seções alternadas

--card

Fundo de cards e containers

--muted

Fundo de inputs desabilitados, badges

--popover

Fundo de popovers, dropdowns

Borders

Escala de bordas do mais sutil ao mais forte. O token brand-accent é decorativo.

--border

Borda padrão de cards, inputs, divisores

--border-light

Borda sutil - product cards, linhas divisoras

--border-medium

Borda média - header, separadores

--border-dark

Borda forte - search pill, elementos destaque

--brand-accent

Borda decorativa - avatar ring, category circles

Status Colors

Cores semânticas para feedback. Use opacity modifiers (ex: bg-success/10) para fundos leves que se adaptam ao dark mode automaticamente.

Success

Pago, confirmado, ativo, entrega local

Warning

Pendente, aguardando, estoque baixo

Destructive

Cancelado, erro, excluído

Info

Enviado, informação, dica

Como usar

{/* Cores de fundo */}
<div className="bg-primary" />
<div className="bg-surface" />
<div className="bg-muted" />

{/* Cores de texto */}
<p className="text-foreground" />
<p className="text-muted-foreground" />
<p className="text-primary" />

{/* Bordas */}
<div className="border border-border" />
<div className="border border-border-light" />
<div className="border border-border-medium" />
<div className="border border-brand-accent" />

{/* Brand palette direto */}
<div className="bg-aautentic-500" />
<div className="text-aautentic-600" />

{/* Status: fundo sólido (Badge) */}
<Badge className="bg-success text-success-foreground" />
<Badge className="bg-warning text-warning-foreground" />
<Badge className="bg-info text-info-foreground" />

{/* Status: fundo leve com opacity (Alert, Card) */}
<Alert className="border-success/20 bg-success/10 text-success" />
<Alert className="border-warning/20 bg-warning/10 text-warning" />
<Alert className="border-info/20 bg-info/10 text-info" />