/* ============================================================================ Benta · Design System · tokens ---------------------------------------------------------------------------- Duas dimensões independentes, ligadas no : data-estilo = "limpo" | "padrao" linguagem visual data-tema = "claro" | "escuro" dois conjuntos de verdade, não um filtro sobre o outro Sem atributo nenhum: padrao + claro. Toda cor, espaço, tipo e raio vem daqui. Componente nenhum escreve valor cru: se falta token, falta token — a falta aparece em vez de virar número solto. Valores medidos no mockup dos 4 turnos (já absorvido aqui e removido do repositório). O que não estava no mockup está marcado `derivado`. ============================================================================ */ /* ---------------------------------------------------------------- 1. Escalas */ :root { /* espaço — em px, nomeado pelo valor. O mockup não segue grade fixa; a escala registra o que existe em vez de arredondar a referência. */ --ds-esp-2: 2px; --ds-esp-4: 4px; --ds-esp-6: 6px; --ds-esp-8: 8px; --ds-esp-10: 10px; --ds-esp-11: 11px; --ds-esp-12: 12px; --ds-esp-14: 14px; --ds-esp-16: 16px; --ds-esp-18: 18px; --ds-esp-20: 20px; --ds-esp-22: 22px; --ds-esp-24: 24px; --ds-esp-26: 26px; --ds-esp-28: 28px; --ds-esp-30: 30px; --ds-esp-32: 32px; --ds-esp-36: 36px; --ds-esp-40: 40px; --ds-esp-44: 44px; --ds-esp-48: 48px; --ds-esp-52: 52px; --ds-esp-56: 56px; /* tipo */ --ds-fonte: Sora, system-ui, -apple-system, sans-serif; --ds-fonte-codigo: ui-monospace, Menlo, monospace; --ds-peso-300: 300; --ds-peso-400: 400; --ds-peso-500: 500; --ds-peso-600: 600; --ds-peso-700: 700; /* tipo — tamanhos em uso */ --ds-tipo-10: 10px; --ds-tipo-11: 11px; --ds-tipo-12: 12px; --ds-tipo-13: 13px; --ds-tipo-14: 14px; --ds-tipo-15: 15px; --ds-tipo-16: 16px; --ds-tipo-17: 17px; --ds-tipo-18: 18px; --ds-tipo-20: 20px; --ds-tipo-22: 22px; --ds-tipo-24: 24px; --ds-tipo-25: 25px; --ds-tipo-26: 26px; --ds-tipo-30: 30px; --ds-tipo-32: 32px; --ds-tipo-36: 36px; --ds-tipo-38: 38px; --ds-tipo-40: 40px; --ds-tipo-44: 44px; --ds-tipo-46: 46px; /* tipo — entrelinha e espaçamento de letra */ --ds-linha-1: 1; --ds-linha-1-2: 1.2; --ds-linha-1-25: 1.25; --ds-linha-1-3: 1.3; --ds-linha-1-35: 1.35; --ds-linha-1-4: 1.4; --ds-linha-1-5: 1.5; --ds-linha-1-6: 1.6; --ds-linha-1-7: 1.7; --ds-letra-rotulo: .09em; /* rótulo em caixa alta */ --ds-letra-tabela: .07em; /* cabeçalho de tabela */ --ds-letra-miudo: .06em; --ds-letra-normal: 0; /* medidas do casco — a largura da lateral muda por estilo, e está lá embaixo */ --ds-lateral-recolhida: 64px; --ds-topo-altura: 56px; --ds-rodape-altura: 40px; --ds-assistente-largura: 420px; /* a coluna do acesso da tela de entrar: o campo, o botão e os avisos param aqui */ --ds-login-largura: 440px; --ds-campo-curto: 200px; /* o campo da ação que vive **dentro** de uma linha de tabela */ /* O mínimo de **um** campo da grade (`.ds-campos`) — o formulário de vários campos da `/custo/`. `derivado` das duas medidas do navegador (24/09/2026, sem a fonte Sora, sonda `var/probe-campos.html`): quem manda é a **entrada** — o `` na largura intrínseca (`width: auto`, o `size` padrão do campo) pede **205px**, e o `date`, **168px** —, porque o **rótulo** é bloco e **quebra**: o mais largo (*"origem (fonte e data da consulta)"*) tem **275px** numa linha só, e cede passando para duas. O mínimo é a entrada com folga: 220px. Medido com ela, a grade sai em **1** coluna na caixa de **445px** (a janela de 1209px com o painel da assistente aberto — o caso que o dono viu), **2** de 330px na de **676px** (janela de 1440px) e **5** de 250px na de 1316px, e em nenhuma delas o formulário passa da largura do cartão (`scrollWidth` igual ao `clientWidth` nos três). Abaixo disto a entrada espreme o número, que é o defeito de novo. */ --ds-campos-minima: 220px; /* O mínimo de **uma** lista de concessões: o item mais largo (o nome da função mais a origem), medido em 24/09/2026 no navegador em 344,59px — abaixo disto o item estoura a lista. Na coluna de conteúdo de 716px (o casco com o painel aberto, que dá 650px de caixa) cabe **uma** lista por linha, e as três empilham; duas pedem 772px de coluna, e as três, 1135px. */ --ds-concessoes-minima: 345px; /* A espessura da barra da caixa que rola (`.ds-rolagem`): é o `::-webkit-scrollbar` do Chrome e do Safari que a desenha, e sem um número declarado ele não desenha nada. `derivado` — o mockup é estático e não tem barra nenhuma para medir. O número é o medido no navegador em 24/09/2026, na bancada (`ui/ds/referencia.html#coluna-estreita`), janela de 1209px: com ele a barra **ocupa 12px** da altura da caixa e aparece sem ninguém rolar; sem a regra, a barra de sobreposição do macOS ocupava **0px** e a caixa não se anunciava. Ele é do DS, e não um `--ds-esp-*`, de propósito: a escala de espaço é a folga **entre** coisas, e isto é a espessura de um controle. */ --ds-rolagem-barra: 12px; /* camadas */ --ds-camada-assistente: 20; --ds-camada-menu: 30; /* tempo — `derivado`: o mockup é estático e não declara transição nenhuma */ --ds-tempo-rapido: 120ms; --ds-tempo: 180ms; } /* --------------------------------------- 2. Estilo limpo · tema claro ------ */ :root, [data-estilo="limpo"][data-tema="claro"] { --ds-fundo: #F7F7F9; --ds-fundo-lateral: #FFFFFF; --ds-fundo-topo: #FFFFFF; --ds-superficie: #FFFFFF; --ds-superficie-alta: #F7F7F9; --ds-borda: #E3E4EA; --ds-borda-forte: #C9CBD4; --ds-borda-secao: #E3E4EA; /* divisor de 2px do cabeçalho de seção */ --ds-divisor: #E3E4EA; --ds-texto: #1B1E2B; --ds-texto-2: #3A3D48; --ds-texto-3: #5C6070; --ds-texto-fraco: #8A8E9C; --ds-rotulo: #5C6070; --ds-rotulo-grupo: #8A8E9C; --ds-acao: #15479E; /* azul do cliente, tirado do logo dele */ --ds-acao-texto: #FFFFFF; --ds-acao-hover: #0F356F; /* derivado */ --ds-selecao-fundo: #EDF1F9; --ds-selecao-texto: #15479E; --ds-selecao-borda: #15479E; --ds-marca: #7D6BAF; /* roxo Benta: só a assistente e a assinatura */ --ds-marca-texto: #5E4E8C; --ds-marca-fundo: transparent; --ds-marca-suave: #C9CBD4; --ds-assistente-fundo: transparent; --ds-assistente-texto: #5E4E8C; --ds-assistente-borda: #C9CBD4; --ds-ok: #1F7A4D; --ds-ok-fundo: #E4F5EC; --ds-ok-texto: #227A50; --ds-atencao: #9A6408; --ds-atencao-fundo: #FBF1DD; --ds-atencao-texto: #9A731C; --ds-negativo: #B3261E; --ds-negativo-fundo: #FBE0DE; --ds-negativo-texto: #B3423A; --ds-aviso-borda: #9A6408; --ds-aviso-fundo: #FBF1DD; --ds-aviso-marca: #9A6408; --ds-traco-ausente: #C9CBD4; --ds-foco: #15479E; /* derivado — o mockup não mostra o foco */ --ds-raio: 0px; /* canto reto é o que define o limpo */ --ds-raio-botao: 0px; --ds-raio-cartao: 0px; --ds-raio-caixa: 0px; --ds-raio-chip: 0px; --ds-raio-pilula: 0px; --ds-raio-icone: 0px; --ds-sombra: none; --ds-sombra-caixa: none; --ds-sombra-menu: 0 2px 8px rgba(27, 30, 43, .1); --ds-sombra-assistente: none; --ds-lateral-largura: 240px; --ds-assistente-largura: 420px; } /* --------------------------------------- 3. Estilo limpo · tema escuro ----- */ [data-estilo="limpo"][data-tema="escuro"] { --ds-fundo: #14161F; --ds-fundo-lateral: #1B1E2A; --ds-fundo-topo: #1B1E2A; --ds-superficie: #1B1E2A; --ds-superficie-alta: #22293C; --ds-borda: #2E3342; --ds-borda-forte: #3A4055; --ds-borda-secao: #2E3342; --ds-divisor: #2E3342; --ds-texto: #ECEDF2; --ds-texto-2: #C6CAD8; --ds-texto-3: #A0A6BA; --ds-texto-fraco: #8F95A8; --ds-rotulo: #A0A6BA; --ds-rotulo-grupo: #8F95A8; --ds-acao: #7FA8EF; --ds-acao-texto: #10131C; --ds-acao-hover: #9CBDF5; /* derivado */ --ds-selecao-fundo: #22293C; --ds-selecao-texto: #7FA8EF; --ds-selecao-borda: #7FA8EF; --ds-marca: #B8A6E8; --ds-marca-texto: #B8A6E8; --ds-marca-fundo: transparent; --ds-marca-suave: #3A4055; --ds-assistente-fundo: transparent; --ds-assistente-texto: #B8A6E8; --ds-assistente-borda: #3A4055; /* faróis: o mockup escuro usa só a cor como marca e como texto, sem preenchimento. Os fundos são `derivado` — mesma matiz, lavada. */ --ds-ok: #4ECB8A; --ds-ok-fundo: color-mix(in srgb, #4ECB8A 16%, transparent); --ds-ok-texto: #4ECB8A; --ds-atencao: #E0A93B; --ds-atencao-fundo: color-mix(in srgb, #E0A93B 16%, transparent); --ds-atencao-texto: #E0A93B; --ds-negativo: #F2837B; --ds-negativo-fundo: color-mix(in srgb, #F2837B 16%, transparent); --ds-negativo-texto: #F2837B; --ds-aviso-borda: #6B5416; --ds-aviso-fundo: #241F14; --ds-aviso-marca: #E0A93B; --ds-traco-ausente: #3A4055; --ds-foco: #7FA8EF; /* derivado */ --ds-raio: 0px; --ds-raio-botao: 0px; --ds-raio-cartao: 0px; --ds-raio-caixa: 0px; --ds-raio-chip: 0px; --ds-raio-pilula: 0px; --ds-raio-icone: 0px; --ds-sombra: none; --ds-sombra-caixa: none; --ds-sombra-menu: 0 2px 8px rgba(0, 0, 0, .45); --ds-sombra-assistente: none; --ds-lateral-largura: 240px; --ds-assistente-largura: 420px; } /* -------------------------------------- 4. Estilo padrão · tema claro ------ */ [data-estilo="padrao"][data-tema="claro"] { --ds-fundo: #EFECF7; /* lavanda */ --ds-fundo-lateral: #F7F5FB; --ds-fundo-topo: #FFFFFF; --ds-superficie: #FFFFFF; --ds-superficie-alta: #F7F5FB; --ds-borda: #DAD6EC; --ds-borda-forte: #C9BCEA; --ds-borda-secao: #EEEBF7; --ds-divisor: #F3F1FA; --ds-texto: #211D3D; /* azul-marinho escuro */ --ds-texto-2: #302B54; --ds-texto-3: #4A4570; --ds-texto-fraco: #8B85A8; --ds-rotulo: #8B85A8; --ds-rotulo-grupo: #A79FC4; --ds-acao: #211D3D; --ds-acao-texto: #FFFFFF; --ds-acao-hover: #302B54; /* derivado */ --ds-selecao-fundo: #E4DEF7; --ds-selecao-texto: #5B4B99; --ds-selecao-borda: transparent; --ds-marca: #7D6BAF; --ds-marca-texto: #5E4E8C; --ds-marca-fundo: #F3EEFB; --ds-marca-suave: #C9BCEA; --ds-assistente-fundo: #F3B23E; /* âmbar: cor de ação da assistente */ --ds-assistente-texto: #211D3D; --ds-assistente-borda: #7D6BAF; --ds-ok: #2E9E6C; --ds-ok-fundo: #E4F5EC; --ds-ok-texto: #227A50; --ds-atencao: #C9971F; --ds-atencao-fundo: #FBF1DD; --ds-atencao-texto: #9A731C; --ds-negativo: #C0392E; --ds-negativo-fundo: #FBE0DE; --ds-negativo-texto: #B3423A; --ds-aviso-borda: #C9971F; --ds-aviso-fundo: #FBF1DD; --ds-aviso-marca: #C9971F; --ds-traco-ausente: #C9C3E4; --ds-foco: #C9BCEA; /* o próprio mockup mostra este foco no campo */ --ds-raio: 16px; --ds-raio-botao: 14px; --ds-raio-cartao: 24px; --ds-raio-caixa: 18px; --ds-raio-chip: 10px; --ds-raio-pilula: 24px; --ds-raio-icone: 9px; --ds-sombra: 0 14px 32px rgba(33, 29, 61, .16), 0 2px 6px rgba(33, 29, 61, .08); --ds-sombra-caixa: 0 8px 20px rgba(33, 29, 61, .12); --ds-sombra-menu: 0 8px 20px rgba(33, 29, 61, .18); --ds-sombra-assistente: 0 8px 20px rgba(33, 29, 61, .18); --ds-lateral-largura: 250px; --ds-assistente-largura: 400px; } /* -------------------------------------- 5. Estilo padrão · tema escuro ----- */ [data-estilo="padrao"][data-tema="escuro"] { --ds-fundo: #1B1830; --ds-fundo-lateral: #211D3D; --ds-fundo-topo: #211D3D; --ds-superficie: #241F3D; --ds-superficie-alta: #2E2650; --ds-borda: #382E60; --ds-borda-forte: #4A3D78; /* derivado */ --ds-borda-secao: #332A56; --ds-divisor: #332A56; --ds-texto: #ECE9F7; --ds-texto-2: #C6B8EE; --ds-texto-3: #C3BEDA; --ds-texto-fraco: #9C93BE; --ds-rotulo: #9C93BE; --ds-rotulo-grupo: #8E86B0; /* derivado */ --ds-acao: #FBCE7A; --ds-acao-texto: #211D3D; --ds-acao-hover: #FFDCA0; /* derivado */ --ds-selecao-fundo: #382E60; --ds-selecao-texto: #C6B8EE; --ds-selecao-borda: transparent; --ds-marca: #C6B8EE; --ds-marca-texto: #C6B8EE; --ds-marca-fundo: #2E2650; --ds-marca-suave: #4A3D78; --ds-assistente-fundo: #FBCE7A; --ds-assistente-texto: #211D3D; --ds-assistente-borda: #7D6BAF; /* `derivado` — mesma matiz lavada; o mockup escuro só mostra marca e texto */ --ds-ok: #4ECB8A; --ds-ok-fundo: color-mix(in srgb, #4ECB8A 16%, transparent); --ds-ok-texto: #4ECB8A; --ds-atencao: #E0A93B; --ds-atencao-fundo: color-mix(in srgb, #E0A93B 16%, transparent); --ds-atencao-texto: #E0A93B; --ds-negativo: #F2837B; --ds-negativo-fundo: color-mix(in srgb, #F2837B 16%, transparent); --ds-negativo-texto: #F2837B; --ds-aviso-borda: #6B5416; --ds-aviso-fundo: #241F14; --ds-aviso-marca: #E0A93B; --ds-traco-ausente: #3A4055; --ds-foco: #C6B8EE; /* derivado */ --ds-raio: 16px; --ds-raio-botao: 14px; --ds-raio-cartao: 24px; --ds-raio-caixa: 18px; --ds-raio-chip: 10px; --ds-raio-pilula: 24px; --ds-raio-icone: 9px; --ds-sombra: 0 14px 32px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .25); --ds-sombra-caixa: 0 8px 20px rgba(0, 0, 0, .35); --ds-sombra-menu: 0 8px 20px rgba(0, 0, 0, .45); --ds-sombra-assistente: 0 8px 20px rgba(0, 0, 0, .45); --ds-lateral-largura: 250px; --ds-assistente-largura: 400px; }