# Ícone de vidro em camadas — objeto escuro aceso pela própria peça

Aprendido em 2026-09-25 levando para CSS/SVG os três ladrilhos do cartão de
permissões (`226:51`, `226:60`, `226:68` no arquivo `<figma-ds>`) e
desenhando mais dois na mesma receita. Réplica em
`~/Documents/NASH/site/design-system/propostas/icones-vidro/` (worktree
`agent-aaf3c8a3e5f0c58c2` até o merge), bancada `comparacao.html` + `medir.js`.
Renderizado e medido: 1,1 a 1,3/255 de diferença média nos ladrilhos soltos.

- **O "vidro" desses ícones não é efeito, é pintura.** Nenhum nó usa GLASS nem
  BACKGROUND_BLUR: placa branca a 6,5 → 5,3%, aro de 1 px por dentro a 7 → 2%,
  e um objeto de vidro escuro com aro claro no alto. Tudo atravessa pro CSS.
- **O corpo clareia na direção da peça de luz.** Apagado, a luz é cinza-claro
  e o corpo sobe até ~29% dela; aceso, a peça fica verde, o corpo esverdeia a
  partir dela e um reflexo gaussiano (25%, raio = 3σ) aparece na borda da placa
  por onde a luz entra. O eixo muda por ícone: embaixo no microfone e na tela,
  à direita na câmera (a lente).
- **Três cores explicam as 20 paradas.** Cada parada do Figma é
  `sombra + a·(luz apagada − sombra) + b·(ligado − sombra)` com erro ≤ 2,5/255;
  em CSS, `color-mix` aninhado sobre três tokens. Retingir o ícone é trocar os
  três.
- **O traço preto do Figma e o eixo torto saíram a pedido do dono.** O Figma
  contorna a lente e o pé do monitor com 1 px preto centrado, e o dono pediu
  sem ("stroke preto que nao deve ter"); sem ele, o aro do corpo basta. O
  microfone do Figma está fora do eixo sem rotação — base em 38,8, haste em
  37,8, reflexo em 39,3 num ladrilho de meio 38 — e 1 px já lê "torto". Medir
  o meio da caixa de cada camada contra o eixo antes de copiar geometria.
- **Traço "inside" em SVG**: traço de 2 px com `vector-effect:
  non-scaling-stroke` recortado pela própria forma — 1 px interno em qualquer
  escala, o que mantém aro e junta legíveis em 32 px.
- **Cor por variável exige SVG embutido.** `stop-color: var()` e `color-mix()`
  não resolvem num `<img>`; embutir e renomear ids por instância, senão todos
  os ladrilhos apontam pro degradê do primeiro.
- **Coordenada fracionária do Figma vira 0,3 px de desvio.** O Chromium
  assenta a caixa no pixel inteiro (47,7 → 48); medir o centro da peça de luz
  nos dois prova o deslocamento antes de caçar erro de receita.
- **Conota**: o aparelho dorme como vidro fumê e acorda de dentro — a luz nasce
  na peça e atravessa o corpo, causa e efeito; verde aceso é interruptor, e o
  mesmo desenho em vermelho lê mudo num microfone.