# UI — componentes e fundações

Kit de interface da Lux Carbon para web/app. As classes `lc-*` citadas existem prontas
em `assets/tokens/tokens.css`; os valores vêm de `cores.md` e `tipografia.md`.
Demonstração viva: `exemplos/exemplo-web.html`.

## 1. Fundações

- **Grid:** 12 colunas, gutter 24px. Container `max-width: 1200px`, padding lateral
  24px (mobile) / 48px (desktop). Seções: `padding-block` 64px mobile / 96px desktop.
- **Espaçamento:** escala 4px — só `4 8 12 16 24 32 48 64 96 128`.
- **Breakpoints:** `sm 640 · md 768 · lg 1024 · xl 1280`.
- **Raio:** `sm 4px` (input, badge) · `md 8px` (botão, card de produto) · `lg 16px`
  (bloco, selo, chip) · `xl 24px` (**superfície de marketing** — os cards do manual)
  · `full` (pill, avatar). Produto usa sm–lg; marketing pode subir para xl.
- **Sombra** (discreta, nunca colorida): `sm 0 1px 2px rgba(2,23,46,.06)` ·
  `md 0 4px 12px rgba(2,23,46,.08)` · `lg 0 12px 32px rgba(2,23,46,.12)`.
  Em card de conteúdo, prefira borda `1px #EBECEE` a sombra.
- **Foco (obrigatório):** `outline: 2px solid #59C3FF; outline-offset: 2px`.
- **Alvo de toque:** mínimo 44×44px.
- **Ícones:** linha fina (stroke 1.5–2px), geométricos (estilo Lucide/Feather servem).
  Sobre foto ou destaque, dentro de um chip 40–48px, `radius-lg`, fundo translúcido
  (`.lc-chip-icon`). Nunca emoji como ícone institucional.

## 2. Botões

| Variante | Classe | Fundo | Texto | Borda | Hover | Quando |
|---|---|---|---|---|---|---|
| Primário | `.lc-btn--primary` | `#0B3D2E` | branco | — | `#1E6E43` | Ação principal em UI |
| CTA verde (manual) | `.lc-btn--cta` | `#1E6E43` | branco, **Zalando 700 CAPS 14px ls .04em** | — | `#0B3D2E` | CTA de peça/marketing ("LEIA MAIS") |
| Secundário | `.lc-btn--secondary` | transparente | `#0B3D2E` | 1px `#0B3D2E` | fundo `#EBECEE` | Ação alternativa |
| Terciário | `.lc-btn--tertiary` | — | `#003C63` | — | sublinha | Ação leve, inline |
| Sobre escuro | `.lc-btn--on-dark` | branco | `#0B3D2E` | — | `#EBECEE` | Seção escura |
| Destaque | `.lc-btn--accent` | `#90D62E` | `#02172E` | — | `#7FC024` | Raro; 1 por página |

Altura 44px (padrão) · 36px `--sm` · 52px `--lg`. Padding horizontal 24px, `radius-md`.
Texto padrão: Public Sans 500 16px (exceto `--cta`, que segue o manual).
Desabilitado: fundo `#EBECEE`, texto `#A4ABB4`, sem hover. Com seta: sufixo ` →`
(caractere), a seta ganha `margin-left: 8px`.

**Pill de marketing** (`.lc-pill`, padrão dos posts): cápsula `radius-full`, borda
1px translúcida, fundo `rgba(255,255,255,.06)` sobre escuro (ou `rgba(2,23,46,.05)`
+ borda `#A4ABB4` sobre claro), texto Public Sans 600 + seta `→` em `#1E6E43`
(claro) ou lime (escuro). Variante **sólida** (`.lc-pill--solid`) — o CTA do próprio
manual: navy `#02172E`, texto branco, seta verde, sombra suave. Use em peça/social/
hero, não em formulário.

## 3. Links

Sobre claro: `#003C63`, sublinhado 1px, `text-underline-offset: 2px`. Sobre escuro:
`#59C3FF`. Nunca lime como link. Link externo em texto: mesmo estilo (sem ícone
obrigatório); link "saiba mais" isolado → botão terciário com seta.

## 4. Formulários

- **Label** (`.lc-label`): Public Sans 500 14px `#02172E`, sempre visível acima do
  campo (placeholder nunca substitui label).
- **Campo** (`.lc-input`, select, textarea): altura 44px (textarea livre), fundo
  branco, borda 1px `#A4ABB4`, `radius-sm`, padding 0 12px, texto 16px `#02172E`,
  placeholder `#A4ABB4`. Focus: borda `#003C63` + ring sky. Erro: borda `#9B1C1C`
  + mensagem (`.lc-error`) 13px `#9B1C1C` com ícone. Desabilitado: fundo `#EBECEE`.
- **Ajuda** (`.lc-help`): 13px `#495869` abaixo do campo.
- **Checkbox/radio:** 20px, borda `#A4ABB4`; marcado = fundo `#0B3D2E`, check branco.
- **Switch:** trilho 44×24px `#A4ABB4` → `#1E6E43` ligado.
- Agrupe com `fieldset`/heading `h5`; espaçamento entre campos 16–24px.
- Obrigatório: marque os **opcionais** ("(opcional)"), não os obrigatórios com asterisco.

## 5. Badges e status (`.lc-badge`)

Cápsula `radius-full`, 12px Public Sans 600, padding 2px 10px, CAPS leve (ou caixa
normal). Ponto de status opcional à esquerda.

| Uso | Classe | Cores |
|---|---|---|
| Certificado / ativo | `--success` | texto `#1E6E43`, fundo `#E8F1EC` |
| Em análise / info | `--info` | texto `#003C63`, fundo `#D5E5EC` |
| Pendente / atenção | `--warning` | texto `#8A6A00`, fundo `#FFF4D6` |
| Reprovado / erro | `--danger` | texto `#9B1C1C`, fundo `#FDE8E8` |
| Neutro / rascunho | `--neutral` | texto `#495869`, fundo `#EBECEE` |
| Destaque de marca | `--brand` | texto `#02172E`, fundo `#90D62E` (parcimônia) |

## 6. Cards

- **Padrão** (`.lc-card`): fundo branco, borda 1px `#EBECEE`, `radius-md`, padding 24px.
- **Marketing** (`.lc-card--soft`): `radius-xl 24px`, sem borda, sombra difusa —
  o card do manual (p. 7/12). Só em superfície de marketing, sobre fundo atmosférico.
- **Com acento** (`.lc-card--accent`): + borda superior 3px `#90D62E` — para o card
  que merece destaque (1 por grupo).
- **KPI** (`.lc-card` + `.lc-kpi`): overline em cima, número Zalando 300–500 grande
  (`tabular-nums`), variação/label embaixo. Número que importa pode ser `#1E6E43`.
- **Projeto/entidade:** título h5, metadados em `caption` `#495869`
  (metodologia · safra · região), badge de status, número à direita.
- Card clicável: hover eleva para `shadow-md` + borda `#A4ABB4`; o card inteiro é o link.

## 7. Tabelas (`.lc-table`)

Header: fundo `#0B3D2E`, texto branco Public Sans 500 14px, alinhado à esquerda
(números à direita). Linhas: zebra `#FFFFFF`/`#EBECEE`, sem bordas verticais,
divisória 1px `#EBECEE`. Células: padding 10–14px; números com `tabular-nums`
alinhados à direita; unidade no header ("tCO₂e"), não repetida em cada célula.
Linha hover: `#D5E5EC` a 40%. Variante compacta: padding 6–10px, 13px.
Tabela larga: contêiner com `overflow-x: auto`, nunca espremer.

## 8. Navegação

- **Header:** 72px, fundo branco, borda inferior 1px `#EBECEE`. Logo
  `svg-tight/Principal_Claro.svg` com `height: 28px` (blocada 40px). Links Public
  Sans 500 14px `#495869`; ativo `#02172E` + sublinha 2px `#1E6E43`. CTA à direita
  (`--primary --sm`). Versão escura: fundo `#02172E`, logo `_Escuro`, links `#D5E5EC`.
- **Mobile:** menu hambúrguer → painel full com links 20px; CTA fixo embaixo.
- **Breadcrumb:** 13px, `#495869`, separador `/`, página atual `#02172E` sem link.
- **Tabs** (`.lc-tabs`): texto 500 15px `#495869`; ativa `#02172E` + sublinha 2px
  `#1E6E43`; trilho 1px `#EBECEE`.
- **Pagination:** botões 36px `radius-sm`; atual fundo `#0B3D2E` branco.

## 9. Alertas e feedback

- **Alert/banner** (`.lc-alert`): fundo da cor de estado (§5 de `cores.md`),
  `radius-md`, ícone + título 600 + corpo 14px. **Sem barra lateral colorida** —
  a tinta de fundo + ícone já comunicam; a barrinha é clichê de template.
- **Toast:** canto inferior, fundo `#02172E`, texto branco, ação em sky; some em 5–8s,
  com pausa em hover.
- **Confirmação destrutiva:** modal com verbo explícito ("Excluir projeto"), nunca
  botão vermelho primário por padrão — erro/danger só onde há destruição real.

## 10. Modal, tooltip, popover

Modal: painel branco `radius-lg`, `shadow-lg`, máx 560px, overlay `rgba(2,23,46,.5)`;
título h4, ações à direita (secundário + primário); fecha por X, ESC e overlay.
Tooltip: fundo `#02172E`, texto branco 12px, `radius-sm`, padding 6px 10px, sem seta
obrigatória; aparece em 300ms.

## 11. Progresso e carregamento

- **Barra** (`.lc-progress`): trilho 4px `#EBECEE` (`rgba(255,255,255,.2)` no escuro),
  preenchimento `#1E6E43` (lime sobre escuro — padrão dos carrosséis).
- **Passos:** círculos 24px numerados; feito = fundo `#1E6E43` branco; atual = borda
  2px `#0B3D2E`; futuro = borda `#A4ABB4`.
- **Skeleton** (`.lc-skeleton`): blocos `#EBECEE` pulsando (1.2s); use skeleton em
  vez de spinner para conteúdo estrutural.

## 12. Empty state

Ícone linha fina em chip, título h5 ("Nenhum projeto ainda"), 1 frase de contexto
`#495869`, e **uma ação** (botão primário). Sem ilustração fofa — sobriedade.

## 13. Footer

Fundo `#02172E`. Logo `svg-tight/Principal_Escuro.svg` ~22–24px (o `Lettering` é
assinatura manuscrita — não vai em footer de produto). Colunas de links 14px
`#A4ABB4` (hover branco). Linha final:
`© {ano} Lux Carbon Standard ® Todos os direitos reservados` em `caption`.
Selo `Manifesto_Escuro.png` opcional na coluna da marca.

## 14. Dataviz

Ordem fixa das séries: `#0B3D2E → #003C63 → #85B199 → #7596AB → #90D62E → #495869 → #59C3FF`
(1 série = Verde Escuro; destaque de 1 ponto = lime).

- Fundo branco/`#EBECEE`; grid **horizontal apenas**, 1px `#EBECEE`; eixos sem linha
  vertical; rótulos Public Sans 400 12px `#495869`.
- Sem 3D, sem gradiente, sem sombra. Barras `radius-sm` no topo no máximo.
- Formato pt-BR: `1.234.567,89` · unidade tCO₂e no título/eixo, não em cada rótulo ·
  datas `mmm/aa` ("jan/26") · moeda "US$ 548M" no estilo dos posts.
- Rotule direto na série quando possível (evita legenda); tooltip fundo `#02172E`.
- Dado-destaque editorial: círculo sólido `#1E6E43` com número branco gigante
  (Zalando 500) + fonte citada em `caption` — padrão do manual p. 12.
- Linha do tempo: régua de ticks verticais finos + marcos em bold — manual p. 13.

## 15. Componentes EXCLUSIVOS da marca (prontos em `tokens.css`)

A assinatura de UI da Lux Carbon — derivados do material oficial, não existem em kit
genérico. **Prefira-os aos equivalentes genéricos** (é o que torna a peça "da casa"):

| Componente | Classe | Origem | Substitui |
|---|---|---|---|
| **Régua de ticks** | `.lc-regua` + `.lc-regua__marco` (posicione com `style="left:N%"`) | Timeline do manual p.13 | Steppers e timelines genéricas |
| **Círculo de dado** | `.lc-dado` (+ `__numero`, `__contexto`, `__fonte`) | Posts oficiais / manual p.12 | O "hero metric" de SaaS |
| **Selo de certificação** | `.lc-selo` (+ `__titulo`, `__meta`) | Estrutura do asset Manifesto | Badges de "trusted by" |
| **Carimbo de proveniência** | `.lc-carimbo` (✓ + origem + data/hora) | Princípio "prova > promessa" | Tooltips de fonte escondidos |
| **Trilha de rastreabilidade** | `.lc-trilha` (li `.done`/`.atual`/`.pendente`) | Cadeia de custódia do negócio | Steppers verticais genéricos |
| **Pill CTA** | `.lc-pill` / `.lc-pill--solid` | CTA do próprio manual (p.2/4) | Botão fantasma comum |
| **Halftone + círculo + orbes** | `.lc-halftone`, `.lc-circle-line`, `.lc-bg-atmo`+`.lc-orb` | Capas e posts | Heros de gradiente genérico |
| **ID de registro** | `.lc-id` | Registro público | — |
| **Dica de arraste** | `.lc-hint-swipe` (sky, com seta) | Capas dos carrosséis | "Swipe up" genérico |
| **Paginação segmentada** | `.lc-progress--segmentos` (+ `.ativo`) | Base dos posts | Dots de carrossel |
| **Chip flutuante** | `.lc-chip-icon--flutuante` (`--rot`, posicionar inline) | Slides claros dos posts | Ícones em grade |
| **Marca inline** | `.lc-marca-inline` (o ARQUIVO do logo dentro da headline) | POST 2, fechamento | Digitar "LuxCarbon" em texto |
| **Fecho verde** | `.lc-fecho-verde` (última frase SemiBold verde) | POST 2, fechamento | Itálico/sublinhado de ênfase |
| **Citação editorial** | `.lc-citacao` (+ `__origem`; `em` = verde) | Intro do manual (p.2) | Blockquote com barra lateral |
| **Régua rotulada** | `.lc-regua-bloco` + `.lc-marco-rotulo--acima/--abaixo` | Timeline do manual (p.13) | Timelines verticais genéricas |
| **Card de uso proibido** | `.lc-nao-card` (+ `__rotulo`; diagonal vermelha) | Grade de erros (p.6) | Print riscado no Figma |
| **Card de especificação** | `.lc-espec` (+ `__rotulo` azul-400 CAPS) | Tamanhos (p.7) | Tabela de specs sem amostra |
| **Galeria de variantes** | `.lc-galeria` (+ `__tile`, `--escuro`) | Grade de variações (p.8) | Lista de thumbnails |
| **Malha de construção** | `.lc-malha` (/ `--escura`) — fundo técnico, nunca sob texto longo | Grades técnicas (p.5) | Fundo pontilhado genérico |
| **Wordmark sangrado** | `.lc-wordmark-bleed` (`--bleed-opacity`) — só capa/divisória | Splashes (p.5 e p.11) | Marca d'água repetida |

Regras de uso: o **carimbo** acompanha qualquer número/afirmação auditável (KPIs,
relatórios, certificados). A **régua** é o jeito da casa de mostrar sequência — se a
seção é um processo real, use-a em vez de cards numerados. O **círculo de dado** é o
único formato autorizado para "número gigante" em marketing, sempre com `__fonte`.
O **selo** aparece 1× por página no máximo.

### Objetos do domínio (o negócio como componente)

| Componente | Classe | Substitui |
|---|---|---|
| **Certificado** | `.lc-certificado` (+ `__topo`, `__tipo`, `__id`, `__corpo`, `__campo` em `dl`, `__rodape`, `__hash`) | Cards genéricos de "documento" |
| **Anel de verificação** | `.lc-anel` (+ `__valor`; `--p` = %, `--tam`) — a régua de ticks em círculo | Donut charts genéricos |
| **Medidor com escala** | `.lc-medidor` (+ `__barra>span` com `--w`, `__escala`, `__meta` com `--meta`) | Progress bars sem contexto |
| **Mapa de parcelas** | `.lc-parcelas` (spans `.ok/.consolidacao/.pendente` + `title`) + `.lc-parcelas-legenda` | Heatmaps genéricos |
| **Balanço de carbono** | `.lc-balanco` (+ `__linha`/`--debito`, `__barra`, `__valor`, `__saldo`) — "mostramos a conta" | Gráficos de barras para débito/crédito |
| **Linha de safras** | `.lc-safras` + `.lc-safra` (+ `--ativa`, sublinha verde) | Selects/tabs para vintages |
| **Bloco de assinatura** | `.lc-assinatura` (+ `__linha`) — o ÚNICO uso do Lettering manuscrito em documento | Nome digitado em itálico |
| **Evidência fotográfica** | `.lc-evidencia` (+ `__foto`, `__geo` com lat/long/data, `__meta`) | Galeria de fotos sem lastro |
| **Bloco de fontes** | `.lc-fontes` (+ `__titulo`; `ol` numera `[1]` em verde) | Notas de rodapé escondidas |
| **Quantidade tCO₂e** | `.lc-co2` (número + `.un` com `sub`scrito real) | "tCO2e" digitado errado |
| **Trilha horizontal** | `.lc-trilha--horizontal` (passaporte do crédito) | Steppers horizontais genéricos |

### Materiais: vidro, instrumentos e relevo

| Componente | Classe | Regra de uso |
|---|---|---|
| **Vidro** | `.lc-glass` / `.lc-glass--escuro` (+ `.lc-card--glass`, `.lc-topo-glass`) | **Só sobre foto, fundo escuro ou atmosfera** (precedente: chips dos posts). Nunca vidro dentro de vidro; nunca default de produto. Fallback sólido automático sem `backdrop-filter`. |
| **Anel rotulado / inline / grupo** | `.lc-anel--rotulado` (+ `__sub`), `.lc-anel--inline`, `.lc-anel-grupo` | Inline para tabelas e frases; grupo para leitura por dimensão. |
| **Arco** | `.lc-arco` (+ `__valor`, `__minmax`; `--p`, `--tam`) | Medidor semicircular de instrumento — % com contexto de min/máx. |
| **Escala vertical** | `.lc-escala-v` (+ `__barra` `--h`, `__ticks`, `__marco` `--marco`) | Estoque/altura — o altímetro da casa. |
| **Medidor comparativo** | `.lc-medidor--comparativo` + `__auditado` (`--x`) | Medido × auditado × meta na mesma régua. |
| **Relevo (curvas de nível)** | `.lc-relevo` / `--escura` (`--relevo-cor/tam/pos`) | Fundo técnico-orgânico; **nunca atrás de texto longo**, nunca em botão/input. |
| **Forma orgânica** | `.lc-forma-organica` / `--2` / `--3` | Moldura de foto/cor de parcela — terreno, não decoração de card de produto. |
| **Terreno** | `.lc-terreno` (+ `__nome`, `__geo`) | A parcela como card: compor com `.lc-relevo--escuro` e chip `.lc-glass--escuro`. |

### Modo escuro (light + dark prontos)

O `tokens.css` traz o tema completo: **segue o sistema** (`prefers-color-scheme`) e
aceita override manual — `<html data-theme="dark">` força escuro, `data-theme="light"`
trava claro. Tudo que usa as variáveis semânticas flipa sozinho (superfícies, textos,
trilhos, ticks, feedback, atmosfera). Regras:

- **Produto** (app, dashboard): suporte aos dois temas — não trave.
- **Marketing/peça** (landing, post, capa): direção de arte fixa — trave com
  `data-theme="light"` (os templates já travam).
- Logo por tema: os dois `<img>` lado a lado com `.lc-light-only` / `.lc-dark-only`.
- No escuro, verde-500 vira **texto** fraco — as variáveis já trocam
  (`--lc-verde-texto` → verde-100, destaque → lime); não use hex direto.
- Superfícies escuras derivam do Navy (`#0F2540`, `#0C2238`) — documentadas em
  `cores.md`; não invente outros tons.
- Toggle de referência (Claro/Auto/Escuro com localStorage): ver `exemplos/ui-kit.html`.

Regras: o **certificado** é o documento-cartão da casa — 1 por vista, sempre com
`__hash`/ID e carimbo no rodapé. O **mapa de parcelas** é honesto: cada ponto é uma
parcela real com `title`, e a legenda é obrigatória (cor nunca é o único canal). O
**balanço** fecha com saldo em verde e cita fonte via `.lc-fontes` ou `.lc-carimbo`.
O **anel** é para % de verificação/completude (não decoração). A **assinatura** dá
lar ao `Lettering_Claro.png` em cartas, certificados e manifestos — segue proibido
em navegação/UI. Em `.lc-evidencia`, o chip `__geo` carrega lat/long e data da
captura — é o "prova > promessa" aplicado a imagem.

## 16. O que a UI da Lux Carbon nunca faz

Gradiente em componente · confete/gamification · glassmorphism fora das regras de
`.lc-glass` (vidro só sobre foto/escuro/atmosfera, nunca empilhado) · dark
pattern (botão "cancelar" escondido) · lime/sky como texto sobre branco · duas seções
escuras seguidas · sombras coloridas · emoji como ícone · animação chamativa
(ver `ux-diretrizes.md` §Motion).

**Anti-clichês de layout de IA (proibições ativas).** A peça não pode parecer
"gerada". Se o layout cair em qualquer um destes padrões, reestruture:

- Overline/kicker em caixa alta **acima de toda seção** — o overline da Lux Carbon é
  um momento de voz (1× por página, no hero ou na tese), não gramática de seção.
- Marcadores numerados `01 / 02 / 03` como decoração de seção. Número só quando a
  sequência é real (etapas de certificação, timeline) — e aí use a **régua de ticks**
  da marca, não eyebrows.
- Grade de 3 cards idênticos (ícone + título + parágrafo) repetida — varie estrutura:
  lista editorial com divisores finos, split de duas colunas, tabela, imagem.
- Hero centralizado + features em 3 colunas + banner de CTA = a landing modal de IA.
  A Lux Carbon compõe como **capa** (conteúdo ancorado, foto full-bleed, assimetria).
- "Hero metric" (número gigante + label + acento gradiente). O dado da marca vive no
  **círculo verde com fonte citada**, não em tile de SaaS.
- Barrinha lateral colorida em card/alerta (side-stripe).
- Texto em gradiente (`background-clip: text`).
- Fade-on-scroll uniforme em todas as seções; motion é pontual e funcional.
- Body cinza-claro sem contraste "por elegância" — os pares AA de `cores.md` mandam.
