foundations

Tokens

Referência completa das CSS variables expostas pelo COBOGÓ

Cobogó Design System Tokens

Referência de tokens CSS extraídos de global.css.

Nota: Importe via import 'cobogo/styles' (após o rebrand) ou use as CSS variables diretamente.

Token	Hex	Uso
`--papel-00`	`#FBF8F1`	Fundo principal elevado / Base
`--papel-10`	`#F5F1E8`	Fundo principal
`--papel-20`	`#EDE7D8`	Fundo rebaixado
`--papel-30`	`#DCD4BE`	Bordas e divisores suaves
`--concreto-40`	`#B8B0A0`	Elementos de UI inativos/desabilitados
`--concreto-60`	`#6B6455`	Texto secundário (muted)
`--concreto-80`	`#2E2A24`	Texto principal
`--concreto-90`	`#1A1814`	Títulos e elementos de alto contraste

Token	Aponta para	Uso
`--bg`	`var(--papel-10)`	Fundo principal
`--bg-raised`	`var(--papel-00)`	Fundo elevado (cards, modais)
`--bg-sunken`	`var(--papel-20)`	Fundo rebaixado (áreas secundárias)
`--fg`	`var(--concreto-80)`	Texto padrão
`--fg-muted`	`var(--concreto-60)`	Texto secundário
`--fg-heading`	`var(--concreto-90)`	Títulos
`--border`	`var(--papel-30)`	Bordas padrão
`--border-strong`	`var(--concreto-80)`	Bordas de alto contraste
`--accent`	`var(--azul)`	Cor de destaque/interativa

Famílias utilizadas: Archivo, Fraunces, Piazzolla, JetBrains Mono.

Token	Família
`--font-display`	`"Archivo", "Archivo Black", sans-serif`
`--font-display-alt`	`"Fraunces", Georgia, serif`
`--font-sans`	`"Archivo", sans-serif`
`--font-serif`	`"Piazzolla", Georgia, serif`

Token	Tamanho/Valor	Uso sugerido
`--t-micro`	`11px`	Texto muito pequeno, labels
`--t-small`	`13px`	Metadados, legendas
`--t-body`	`16px`	Texto corrido padrão
`--t-lede`	`19px`	Linha de apoio, introdução
`--t-h4`	`22px`	Título de nível 4
`--t-h3`	`30px`	Título de nível 3
`--t-h2`	`44px`	Título de nível 2
`--t-h1`	`68px`	Título de nível 1
`--t-display`	`112px`	Títulos enormes, destaque
`--lh-tight`	`0.95`	Line-height para títulos
`--lh-body`	`1.55`	Line-height para texto corrido

Nota: Mantidos pra retrocompatibilidade; em código novo use os tokens canônicos da seção correspondente acima.