/* Staffly — TOKENS. Fonte única de verdade do sistema visual. Direção "software de trabalho": a interface se apaga para o conteúdo do cliente aparecer. POR QUE ESTE ARQUIVO EXISTE. A paleta morava em dois lugares que não se conheciam: o bloco :root de web/styles.css (escuro, esmeralda, fonte de sistema) e admin/src/lib/tokens.css (claro, Inter, acento azul #155eef). Quem clicava em "Consumo" saía de um produto e entrava em outro. Agora as duas áreas leem daqui, e a divergência deixa de ser possível por construção — não por disciplina. COR É SINAL, NÃO DECORAÇÃO. Verde só quer dizer rodando ou concluído. Superfície, texto e borda nunca carregam cor de marca: é isso que deixa o painel que o cliente monta aparecer por cima sem brigar com a tela. OS DOIS TEMAS TÊM O MESMO PESO. Mesma escada de superfície, mesma forma, mesma densidade; muda a luminosidade e o tom do acento. O escuro não é um modo noturno improvisado em cima do claro. TODO PAR TEXTO/FUNDO AQUI PASSA EM WCAG AA (4.5:1), incluindo os rótulos maiúsculos de 11px. Se criar um token novo, meça antes. NOMES HERDADOS. --azul, --verde, --vermelho e companhia continuam existindo como apelidos no fim de cada bloco. São ~250 usos espalhados em web/styles.css; renomear tudo seria um diff ilegível para ganhar nada. Em código novo, use o nome semântico. */ :root { /* ---- ESCURO (padrão do produto) ------------------------------------- Superfícies, da mais funda para a mais próxima. A escada é curta de propósito: no escuro, saltos grandes viram listras. */ --bg: #0b0f14; /* lateral, fundo de código */ --sup: #0d1117; /* área de trabalho */ --card: #12171e; /* cartões, balões, barra de topo */ --card2: #161b22; /* hover e elevação */ /* Bordas. --linha separa, --linha2 destaca, --linha3 é a scrollbar sob o cursor (único lugar que precisa de um terceiro degrau). */ --linha: #1e242c; --linha2: #2b333d; --linha3: #3a434f; /* Texto em três pesos. --fraco é o piso: 4.70:1 sobre --card2. */ --texto: #e6e9ee; --suave: #9aa3b0; --fraco: #7d8694; /* Acento. Alinhado ao logo; --acento-sobre é o texto que vai EM CIMA dele. */ --acento: #10d68b; --acento-hover: #34e0a1; --acento-sobre: #022034; /* Sinal de estado — os quatro únicos usos de cor permitidos. "Parado" não tem cor própria: é --fraco, e a ausência é informação. */ --ok: #10d68b; --aviso: #e3b341; --erro: #f87171; --erro-hover: #ef4444; --ok-fundo: #0e2a22; --aviso-fundo: #2b2312; --erro-fundo: #2d1719; /* Foco: o mesmo anel nos dois temas, em tudo que o teclado alcança. */ --foco: var(--acento); /* A PÁGINA DA PRÉVIA NÃO É SUPERFÍCIE DE UI: é papel. Fica branca nos dois temas, porque o que abre ali — relatório, HTML gerado, planilha exportada — traz o próprio estilo e foi escrito para fundo claro. Antes isto usava `--sobre-acento`, cujo trabalho é contrastar COM o acento: no escuro ele vale #022034, e a prévia abria azul-marinho contra o próprio comentário do CSS, que pedia base branca. */ --papel-previa: #ffffff; /* Tipografia. As famílias entram por webfont; sem ela, a pilha de sistema assume e nada quebra. */ --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Forma e densidade. --alt-toque é o piso no celular: o controle CRESCE quando a tela encolhe, não o contrário. */ --raio-ctrl: 6px; --raio-card: 8px; --raio-sup: 10px; --raio-pilula: 999px; --alt-linha: 28px; --alt-ctrl: 32px; --alt-toque: 44px; --alt-topo: 52px; /* Espaço, base 4. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px; --e12: 48px; /* Sombra só no que FLUTUA. Hierarquia normal se resolve com 1px de borda e um degrau de superfície — empilhar sombra no escuro só suja a tela. */ --sombra-flutua: 0 8px 28px rgb(0 0 0 / 45%); /* ---- apelidos herdados (ver cabeçalho) ---- */ --azul: var(--acento); --azul2: var(--acento-hover); --azul-ativo: var(--acento); --sobre-acento: var(--acento-sobre); --verde: var(--ok); --amarelo: var(--aviso); --vermelho: var(--erro); --vermelho2: var(--erro-hover); --roxo: var(--acento); /* O balão do usuário deixa de ser petróleo e vira superfície neutra: pela regra 01, a bolha não é um estado, então não leva cor. */ --user-bolha: var(--card2); --user-bolha-linha: var(--linha); --user-bolha-texto: var(--texto); /* O navegador desenha scrollbar, seleção e controles nativos a partir disto. Sem ele, um