/* ═══════════════════════════════════════════════════════════════════════════ PONTE — a paleta do design system novo, na marcação que já existe. ─── O QUE ESTE ARQUIVO É ──────────────────────────────────────────────── O design system novo (agosto/2026) tem 456 classes; o sistema atual tem 333, e só 26 nomes coincidem — com aparências diferentes. Trocar o CSS de uma vez aplicaria estilo novo a marcação velha em 266 das 295 telas. Então esta ponte faz a única coisa que dá para fazer sem tocar em marcação: REDEFINE OS TOKENS ANTIGOS com os valores da pele nova. Nenhuma classe muda de nome, nenhuma view é editada, e as 295 telas ganham a paleta nova no mesmo instante. ⚠ ISTO NÃO É O DESIGN SYSTEM. É a cor dele. Os componentes, a tipografia, a escala de densidade e o terceiro estado continuam no sistema novo, esperando a migração tela a tela. Quem ler este arquivo daqui a um ano e concluir que "o design system foi aplicado" vai estar enganado — e é por isso que este parágrafo existe. ─── COMO DESLIGAR ─────────────────────────────────────────────────────── Uma linha: tire o deste arquivo do `app/Views/layouts/app.php`. O sistema volta à paleta anterior sem nenhum outro efeito. É de propósito que seja assim: uma mudança que atinge 295 telas de uma vez precisa ter volta de um passo só. ─── DE ONDE VÊM OS VALORES ────────────────────────────────────────────── `entrega/sgci-dimora/peles/sgci.css` — gerada pelo designer com `gerar_pele.py --matiz 258 --croma 0.065`. Não edite os hex aqui à mão: se a pele for regerada, este arquivo se refaz a partir dela. ⚠ CARREGA DEPOIS DO `app.css`. Custom property não tem especificidade — quem vem por último vence. Se alguém inverter a ordem no layout, esta ponte deixa de valer em silêncio, sem erro nenhum. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ══════════════════════════════════════════════════════════════════════════ MAIS COR NOS ESTADOS — set/2026 ⚠ O QUE ESTAVA LAVADO ERA A LUZ, NÃO A SATURAÇÃO. Os fundos tinham S entre 37% e 100% e L entre 92% e 97%: saturados no papel, quase brancos na tela. Descer a luz um degrau (para 89%) e acrescentar uma BORDA na cor do estado resolve — e a borda é o que mais pesa, porque dá FORMA ao selo em vez de deixá-lo como uma mancha clara sobre o cartão. ⚠ UM DEGRAU, NÃO DOIS, e a razão está no §3.10. Com cor cheia, uma lista de 40 linhas vira um mosaico e a cor deixa de destacar o que importa — que é exatamente o mecanismo de "alarme que acende sempre ensina a ignorar o alarme", aplicado à tela em vez do alerta. Todos os pares texto/fundo medidos: 4,79:1 no pior caso (claro) e 5,80:1 (escuro), contra o alvo de 4,5:1. ══════════════════════════════════════════════════════════════════════════ */ /* ── Superfícies ─────────────────────────────────────────────────────── */ --bg: #f6f7f8; /* era #eef1f7 */ --surface: #ffffff; --surface-2: #f6f7f8; /* era #f5f7fb */ --surface-3: #ecedef; /* era #eef1f6 */ /* ⚠ O DS NÃO TEM GRADIENTE, e o §6.1 já proibia gradiente em botão. Aqui os dois pontos da rampa viram a MESMA cor: o gradiente continua declarado nas regras antigas, mas passa a ser um degradê de uma cor só — ou seja, chapado. Zerar o token seria pior: `linear-gradient()` com valor vazio não pinta nada, e a área ficaria transparente. */ --bg-grad-1: #f6f7f8; --bg-grad-2: #f6f7f8; /* ── Texto ───────────────────────────────────────────────────────────── */ --text: #1d1e21; /* foreground */ --text-soft: #4d5156; /* foreground-2 */ --text-faint: #62676e; /* muted-foreground */ /* ── Linhas ──────────────────────────────────────────────────────────── */ /* ⚠ `--border-strong` NÃO recebe o `--border-strong` do DS, e este é o erro que a medição pegou. O DS tem TRÊS níveis de linha (`border`, `border-strong`, `border-control`) e o sistema atual tem dois — e o nosso `--border-strong` faz, em 13 dos 18 usos, o papel do `--border-control` deles: é a borda do botão secundário, do campo, do seletor. Borda que IDENTIFICA um controle precisa de 3:1 (§6.2); a decorativa não. Com o `--border-strong` do DS (#bdc1c7) o contraste dava 1,81:1 e todo campo do sistema ficaria com contorno invisível. */ --border: #d9dbdf; /* hairline decorativo — 1,39:1 e tudo bem */ --border-strong: #7d8289; /* border-control — 3,87:1 sobre o cartão */ /* ⚠ TOKENS QUE O SISTEMA ATUAL NÃO TINHA, e que o terceiro estado exige. `--faint` é a tinta da HACHURA — não é texto, então o piso dela não é 4,5; mas precisa ser vista, e 3,87:1 sobre o cartão dá conta. */ --faint: #7d8289; /* `.since` ("quem não respondeu, e desde quando") é mono de propósito: número de horário em fonte proporcional dança de largura a cada segundo. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ── Destaque ────────────────────────────────────────────────────────── */ /* ⚠ A PRIMÁRIA É O ANIL DA MARCA (#6664c0), E ISSO CONTRARIA A REGRA QUE VEIO NO PACOTE — deliberadamente, por decisão do dono do produto. Fica escrito aqui porque a regra oposta ainda está no `marca-sgci.css` e em `MARCA-SGCI.md`, e quem ler os dois precisa saber qual vale. A regra do pacote dizia: `--mark-signal` só dentro do desenho da marca, porque usá-lo em botão e link "apaga a diferença entre a marca aponta e o estado narra". O argumento é bom e continua valendo para os ESTADOS — verde, âmbar e vermelho seguem intocados. O que mudou foi a leitura sobre a AÇÃO: aqui, botão e link não narram estado nenhum, então pintá-los com a cor da casa não confunde nada — dá identidade. ⚠ E A CONSEQUÊNCIA FOI MEDIDA, não assumida. Com a primária em anil (241°), o `--info` antigo (215°) ficava a 26° de distância: "botão de ação" e "selo informativo" viravam a mesma cor para quem olha de relance. Por isso o `--info` esfriou para 198° — 43° de distância, distinguíveis. Mexer na primária sem mexer no info teria criado uma ambiguidade pior que a falta de identidade que a mudança veio resolver. Histórico: antes disto a primária era `#4f688c`, um azul acinzentado escolhido para "não chamar atenção numa ferramenta de 12 horas". Esse princípio não morreu — ele vive na densidade, na sobriedade das superfícies e no fato de os estados continuarem em um degrau, não dois. */ --primary: #6664c0; /* accent */ --primary-dark: #49429f; /* accent-strong */ --primary-soft: #f4f5ff; /* accent-soft */ /* ⚠ ESTES DOIS SEGUEM A PRIMÁRIA, e é por isso que a barrinha do `.card-title` e o ponto do cabeçalho passam a ser anil junto com ela — sem que nenhuma view precise saber disso. Continuam iguais entre si: o §6.1 proíbe gradiente em elemento com texto, e aqui os dois pontos existem só porque a regra antiga esperava dois. */ --primary-grad-1:#6664c0; --primary-grad-2:#6664c0; --accent-text: #49429f; /* accent-strong — o tom que passa em AA como texto */ --on-accent: #ffffff; /* on-color */ /* ⚠ `--info` NÃO EXISTE NO DS NOVO: lá o informativo é o próprio acento. Mapeamos para os mesmos valores em vez de inventar uma cor — duas cores para o mesmo papel divergem na primeira correção (§3.16). */ --info: #276a86; --info-soft: #d4e9f2; --info-text: #276a86; /* ── Estado ──────────────────────────────────────────────────────────── */ --success: #3b7649; --success-soft: #d8eedd; /* success-tint */ --success-text: #206f34; --warning: #8d5a00; --warning-soft: #f4e6d2; /* warning-tint */ --warning-text: #8f5300; --danger: #9a4c47; --danger-soft: #f7d3cf; /* danger-tint */ --danger-text: #8d3e35; --neutral: #7d8289; /* idle */ --neutral-soft: #e1e3e5; /* idle-tint */ --success-border: #9cd3aa; --warning-border: #ddbe92; --danger-border: #df9890; --info-border: #97c4d8; --neutral-border: #b1b7be; --neutral-text: #596069; /* idle-text */ /* ── Botões de cor cheia ─────────────────────────────────────────────── */ /* ⚠ O PRIMÁRIO NÃO É O ACENTO. No DS o botão de ação principal é `--action` (#2b2d31, quase preto) e o acento fica para link, seleção e foco. Isso é o que impede a tela de ter vinte manchas azuis competindo pela atenção — mas é uma mudança grande: o botão principal deixa de ser azul. */ --btn-primary-bg:#4f4dad; /* action */ --btn-success-bg:#3b7649; --btn-warning-bg:#8d5a00; --btn-danger-bg: #9a4c47; /* ── Foco ────────────────────────────────────────────────────────────── */ /* ⚠ O FORMATO É DIFERENTE NOS DOIS SISTEMAS. Aqui `--ring` é um `box-shadow` COMPLETO (as regras antigas fazem `box-shadow: var(--ring)`); no DS é só uma COR. Copiar a cor crua deixaria todas as regras de foco inválidas — e foco que some é falha de acessibilidade, não de estilo. Então a ponte monta o box-shadow com a cor nova. */ --ring: 0 0 0 3px #f4f7fc; /* ── Sombra ──────────────────────────────────────────────────────────── */ /* A sombra do DS é mais fria e mais fechada (base azulada #212e40). */ --shadow-xs: 0 1px 2px rgba(33,46,64,.05); --shadow: 0 1px 3px rgba(33,46,64,.07); --shadow-md: 0 4px 12px -2px rgba(33,46,64,.10); --shadow-lg: 0 18px 40px -12px rgba(33,46,64,.24); /* ── Raio ────────────────────────────────────────────────────────────── */ /* A escala do DS é 6/8/10/14 — o `xs` sobe de 4 para 6 e o `sm` de 6 para 8. `--radius` e `--radius-lg` já batiam. */ --radius-xs: 6px; --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; /* ⚠ AS MEDIDAS DE LAYOUT NÃO ENTRAM NESTA PONTE. `--header-h`, `--sidebar-w`, `--bottom-nav-h` e `--icon` são geometria da casca atual, e o DS tem outra escala de altura (`--h-control`, `--h-row`) que só faz sentido junto com os componentes dele. Trocar a altura sem trocar o componente desalinharia a barra superior de todas as telas. Elas migram na fase seguinte, com a marcação. */ /* ── A MARCA ───────────────────────────────────────────────────────── Um eixo de cor, e só um: o SINAL. O resto da marca é o cromo do sistema, por token — é isso que faz o logotipo parecer parte da interface, e não um adesivo colado nela. ⚠ ESTES TOKENS NÃO PINTAM INTERFACE. `--mark-signal` só existe dentro do desenho da marca. Botão, link, pílula e série de gráfico têm cada um a sua família — usar o sinal neles apaga a diferença entre "a marca aponta" e "o estado narra", que é a regra 3 da casa. ⚠ E O CONTRÁRIO TAMBÉM: nada de `--primary` dentro da marca. Matiz 282°, anil — fora das três famílias de estado, de propósito: verde, âmbar e vermelho pertencem a "deu certo", "atenção" e "deu errado" por convenção cultural. As medidas estão em `design-system/sgci-dimora/MARCA-SGCI.md`; o desenho, em `app/Support/Helpers.php`. */ --mark-signal: #6664c0; /* 5,06:1 sobre a superfície */ --mark-signal-strong: #49429f; --mark-signal-soft: #f4f5ff; --mark-signal-border: #d6d9ff; /* Sobre o cromo escuro o sinal NÃO vira com o tema: o cromo é o mesmo nos dois, então o sinal em cima dele também é. 7,01:1. */ --mark-signal-on-chrome: #9ea0fa; } /* ═══════════════════════════════════════════════════════════════════════════ TEMA ESCURO ⚠ O SELETOR É O DO SISTEMA ATUAL (`:root[data-theme="dark"]`), não o do DS (`.dark`). A ponte traduz VALORES, não a forma de ligar o tema — trocar o seletor exigiria mexer no `Tema::marcaJs()` e em toda regra `[data-theme]` que já existe. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #1d1e21; --surface: #2b2d31; --surface-2: #3b3e42; --surface-3: #3b3e42; --bg-grad-1: #1d1e21; --bg-grad-2: #1d1e21; --text: #f6f7f8; --text-soft: #bdc1c7; /* ⚠ NÃO É O `--muted-foreground` DO DS (#9ca1a7), e o CSS atual já avisava: a linha do `--text-faint` no `app.css` traz o comentário "clareado: o antigo #6f7c93 dava 3,3:1 sobre --surface-3 (reprovava)". Alguém já bateu nesta pedra, e a ponte estava reintroduzindo o problema — #9ca1a7 sobre #3b3e42 dá 4,13:1, abaixo do piso de 4,5. Sobe um degrau na rampa do DS (`--foreground-2`), que dá 5,95:1 no pior par. O tom fica um pouco menos apagado que o desenhado; é o preço de o texto ser legível sobre as três superfícies do tema escuro. */ --text-faint: #bdc1c7; --border: #3b3e42; --border-strong: #7d8289; /* border-control — 3,56:1 sobre o cartão escuro */ /* Mesmo valor nos dois temas: é assim na pele do DS, e funciona porque o cinza médio contrasta com o claro e com o escuro. */ --faint: #7d8289; --primary: #9ea0fa; --primary-dark: #c5c9ff; --primary-soft: #262741; --primary-grad-1:#9ea0fa; --primary-grad-2:#9ea0fa; --accent-text: #9ea0fa; /* ⚠ No escuro o acento é CLARO, então o que vai por cima dele é ESCURO. Herdar o #ffffff do tema claro daria texto branco sobre azul claro. */ --on-accent: #1d1e21; --info: #79bbd8; --info-soft: #112f3b; --info-text: #79bbd8; --success: #79b084; --success-soft: #17361f; --success-text: #79d890; --warning: #c89655; --warning-soft: #3b2a11; --warning-text: #ffb752; --danger: #d68982; --danger-soft: #3b1511; --danger-text: #cf8981; --neutral: #9ca1a7; --neutral-soft: #232629; --success-border: #337142; --warning-border: #76582d; --danger-border: #76342d; --info-border: #2d6076; --neutral-border: #4a5059; --neutral-text: #a1a7af; /* ⚠ No escuro o botão de ação inverte: fundo CLARO, tinta escura. É assim na pele do DS (`--action:#ecedef`), e é o que mantém o botão principal sendo o elemento mais presente da tela nos dois temas. */ --btn-primary-bg:#9ea0fa; --btn-success-bg:#79b084; --btn-warning-bg:#c89655; --btn-danger-bg: #d68982; --ring: 0 0 0 3px #212e40; --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow: 0 1px 3px rgba(0,0,0,.40); --shadow-md: 0 4px 12px -2px rgba(0,0,0,.44); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.60); /* ── A MARCA (ver o bloco claro) ─────────────────────────────────── */ --mark-signal: #9ea0fa; /* 7,03:1 sobre o fundo escuro */ --mark-signal-strong: #c5c9ff; --mark-signal-soft: #262741; --mark-signal-border: #3b3c66; --mark-signal-on-chrome: #9ea0fa; } /* ═══════════════════════════════════════════════════════════════════════════ O QUE A PONTE **NÃO** RESOLVE — a lista honesta Nada aqui é bug: são as coisas que só a migração de marcação traz. · A TIPOGRAFIA continua a atual (Inter). O DS usa Instrument Sans e uma escala própria (`.t-h1`, `.t-body`, `.t-label` em mono). · A DENSIDADE continua fixa. O DS tem três (confortável, compacta, kiosk) e volta sozinho para 44px de alvo em `pointer:coarse`. · O TERCEIRO ESTADO continua sendo desenhado tela a tela (a hachura da linha do tempo, o card hachurado da saúde do motor). O DS traz `.hatch`, `.pill.unknown` e `.dot.unknown` no núcleo — é o maior ganho que ainda está esperando. · OS COMPONENTES novos (tabela, modal, folha de baixo, autocompletar, os 14 gráficos) não entram por aqui. · A DIMORA não é tocada: ela tem pele própria no DS, e a folha dela é outra. Ordem sugerida da migração, quando for a hora: as telas onde o terceiro estado já existe (linha do tempo, saúde do motor, revisão) — porque nelas o ganho é imediato e a marcação já pensa nos três estados. ═══════════════════════════════════════════════════════════════════════════ */