/** * tokens.css — DESIGN TOKENS DO PILOT (fonte única da verdade) * * Consolida os antigos vars-colors.css + vars-dimensions.css + themes.css * num único ficheiro canónico. Valores EXTRAÍDOS do sistema existente — * nenhuma cor/dimensão nova foi inventada. * * REGRAS DO PROJETO: * - Carregado PRIMEIRO em head.php; todos os outros ficheiros podem referenciar estas vars. * - NUNCA definir `:root { --var }` fora deste ficheiro. * - NUNCA usar valores hardcoded (cores, espaçamentos, z-index) nos restantes CSS — usar tokens. * - Overrides responsivos de dimensões vivem aqui — não em base.css nem noutros ficheiros. * - Cores de superfície/texto/borda são dependentes do tema — secção TEMAS no fim. * * BREAKPOINTS CANÓNICOS — mobile-first, sempre com `min-width`. * * base (sem media query) telemóvel — é aqui que se escreve o layout * 481px sm telemóvel grande * 641px md tablet vertical * 769px lg tablet horizontal / portátil pequeno * 1025px xl desktop * 1281px 2xl desktop grande * * Os valores são os duais EXACTOS dos antigos `max-width` (480/640/768/1024/ * 1280) — um `max-width: 768px` passa a `min-width: 769px` e o comportamento * fica igual ao pixel. Não são 768/1024/1280 de propósito: um `min-width:768px` * daria layout de desktop a um iPad em retrato (768px exactos), que hoje recebe * o de telemóvel. A convenção já existia no projecto — o * `dashboard-responsive.css`, a única folha que nasceu mobile-first, usa * 641/1025/1281. * * Fora da escala e por convergir: 520, 560, 600, 620, 720, 800, 820, 860, 900, * 950, 980, 992, 1100, 1200, 1240, 1360, 1500, 1536. Cada um deles é uma * decisão de alguém num dia, não uma medida do produto. */ /* O tipo do `--toast-offset-top`, declarado para o valor CHEGAR EM PIXELS ao JS. Sem `@property` uma custom property guarda o TEXTO do `calc()`, e o `getPropertyValue` do Toast.js recebia a expressão em vez de um número: o toast ficava no canto de cima, por cima do cabeçalho (2026-09-17). Com o tipo declarado, o browser resolve o calc e entrega `70px`. A DERIVAÇÃO VIVE NO , no header.css, e NÃO aqui, pela mesma razão do `--content-max-width` (ver a nota na secção das dimensões): um `calc()` com `var()` resolve-se no elemento onde é declarado, e no `:root` a faixa do topo vale sempre 0px, porque quem a liga é a classe no . Declarado aqui, o toast ficava a 70px com a faixa ligada e tapava-a. */ @property --toast-offset-top { syntax: ""; inherits: true; initial-value: 10px; } :root { /* ══════════════════════════════════════════════════════════════════ 1. CORES DE MARCA / ESTADO (tema-independentes) ══════════════════════════════════════════════════════════════════ */ /* Valores do tema ESCURO do projeto de referência (é o tema principal do CRM); o bloco [data-theme="light"] no fim sobrepõe-nos pelos claros, que lá são mais saturados para aguentarem fundo branco. */ /* Acento AZUL — o do CRM, mantido de propósito. O projeto de referência traz um índigo (#616CD1, hsl(234 55% 60%)) no --primary, mas é o azul que se usa nos botões e nas ligações aqui há muito, e é para ficar. O resto da paleta (superfícies, verde, vermelho, amarelo, ciano) é a do projeto. */ --color-blue: #3b82f6; /* O verde do projeto de referência era #00ff6a (hsl 145 100% 50%): a 145º o olho já está no pico de luminância e, a 100%/50%, a cor sai do conjunto — dava 14,2:1 contra o fundo (o dobro do azul e do vermelho) e apenas 1,35:1 contra o texto branco que lhe assenta por cima nos botões e nas etiquetas. Descido para o mesmo degrau dos irmãos: 3,7:1 com o branco e 5,2:1 com o fundo — os números exactos do --color-blue e do --color-red. */ --color-green: #16984c; /* --success hsl(145 75% 34%) */ --color-red: #f53d6b; /* --destructive hsl(345 90% 60%) */ --color-yellow: #ffab1a; /* --warning hsl(38 100% 55%) */ --color-orange: #ff8229; /* --severity-high hsl(25 100% 58%) */ --color-cyan: #1ab6ff; /* --info hsl(199 100% 55%) */ /* Sem equivalente no projeto — ficam como estavam, para os gráficos e as etiquetas de estado que já dependem deles não perderem distinção. */ --color-purple: #a855f7; --color-pink: #ec4899; --color-indigo: #818cf8; --color-teal: #0f766e; --color-slate: #475569; --color-grey: #333333; --color-mustard: #a16207; /* ── Variantes subtle (fundo tingido a 12% de opacidade) ──────────── */ --color-blue-subtle: color-mix(in srgb, var(--color-blue), transparent 88%); /* TENDÊNCIA E VOLUME nos widgets: sparklines e barras de magnitude. Uma cor só, de propósito — estas barras não distinguem categorias, medem tamanho. Cada widget tinha a sua (roxo, azul, verde-água) e a página parecia estar a dizer alguma coisa com a cor. Onde a cor SIGNIFICA (a paleta dos Motivos de Perda) usa-se a paleta categórica. */ --widget-trend: var(--color-blue); --color-green-subtle: color-mix(in srgb, var(--color-green), transparent 88%); --color-red-subtle: color-mix(in srgb, var(--color-red), transparent 88%); --color-yellow-subtle: color-mix(in srgb, var(--color-yellow), transparent 88%); --color-orange-subtle: color-mix(in srgb, var(--color-orange), transparent 88%); --color-purple-subtle: color-mix(in srgb, var(--color-purple), transparent 88%); --color-pink-subtle: color-mix(in srgb, var(--color-pink), transparent 88%); --color-cyan-subtle: color-mix(in srgb, var(--color-cyan), transparent 88%); --color-indigo-subtle: color-mix(in srgb, var(--color-indigo), transparent 88%); --color-teal-subtle: color-mix(in srgb, var(--color-teal), transparent 88%); --color-slate-subtle: color-mix(in srgb, var(--color-slate), transparent 88%); --color-grey-subtle: color-mix(in srgb, var(--color-grey), transparent 88%); --color-mustard-subtle: color-mix(in srgb, var(--color-mustard), transparent 88%); /* ══════════════════════════════════════════════════════════════════ 2. CORES SEMÂNTICAS (novas — extraídas do uso real no código) Os tons "-strong" são os hexes mais repetidos fora de tokens (#2563eb ×65, #16a34a ×79, #dc2626 ×60) — agora canonizados. Em código novo usar SEMPRE estes em vez dos hexes. ══════════════════════════════════════════════════════════════════ */ /* O azul divide-se em dois papéis (decisão do Jorge, 2026-09-08). Este é o que PINTA: botão cheio, interruptor ligado, o dia de hoje. A #2563eb o texto branco fica a 5,2:1; com o #3b82f6 de antes ficava a 3,7:1, abaixo do mínimo. A cor que ESCREVE (ligações, separador ativo, ícones, linha de tendência) é --color-primary-text, declarada nos blocos de tema, porque sobre fundo escuro precisa de ser mais clara e sobre branco mais escura. O --color-primary-subtle vive também nos blocos de tema, pela mesma razão dos aliases legados: um var() numa custom property resolve-se onde ela é declarada, e aqui ficava presa ao tom do escuro. */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; /* Os tons "-strong" são os do tema CLARO do projeto: mais escuros e saturados, é deles que se precisa quando a cor tem de aguentar fundo branco (texto de badge, barra de progresso, valor num campo). */ --color-success: var(--color-green); --color-success-strong: #138643; --color-success-subtle: var(--color-green-subtle); --color-warning: var(--color-yellow); --color-warning-strong: #f59f0a; --color-warning-subtle: var(--color-yellow-subtle); /* A tinta que assenta no amarelo, fixa nos dois temas. O botão de aviso escrevia com `--color-bg`, o que no tema escuro dava tinta escura e no claro dava tinta quase branca sobre amarelo: 1,98:1, ilegível. E não há como o resolver do lado do fundo, porque um amarelo escurecido até aguentar tinta clara deixa de ser amarelo e passa a castanho. Mesma razão pela qual o toast tem fundo claro fixo e tinta escura fixa. Dá 9,2:1 sobre o amarelo do tema escuro e 8,1:1 sobre o do claro. */ --color-warning-ink: #201a08; --color-danger: var(--color-red); --color-danger-strong: #dc2855; --color-danger-subtle: var(--color-red-subtle); /* O projeto separa "informação" (ciano) do primário (índigo) — aqui eram a mesma coisa, e um aviso informativo lia-se como uma acção. */ --color-info: var(--color-cyan); --color-info-subtle: var(--color-cyan-subtle); /* O roxo que PINTA, pela mesma lógica do azul mais acima: o `--color-purple` é a cor, e com texto branco por cima dava 3,96:1 nos dois temas. Este é o degrau que aguenta a tinta branca, e não substitui o outro nos gráficos nem nas etiquetas, onde a cor não leva texto por cima. */ --color-accent-strong: #9e42f6; /* 4,61:1 com o branco */ /* ══════════════════════════════════════════════════════════════════ 3. DIMENSÕES (tipografia, espaçamento, raio, sombra, layout) ══════════════════════════════════════════════════════════════════ */ /* ── Razão de Ouro ─────────────────────────────────────────────────── */ /* φ = 1.618034 — base de todas as proporções do projeto. Sidebar collapsed (80px) × φ² ≈ 210px (sidebar expandida). Line-height relaxed = 1.618 (golden ratio). Usar em calc() sempre que um elemento deve ter uma proporção harmoniosa. */ --ratio-golden: 1.618; /* ── Tipografia — família ──────────────────────────────────────────── */ /* Inter, e só Inter (decisão do Jorge, 2026-09-03). O Geist estava aqui à frente dela e era a segunda família de texto do projeto: duas fontes com métricas diferentes davam duas alturas de linha e dois pesos para a mesma escala. Auto-hospedada em vendor/inter, sem CDN. O monoespaçado FICA, e não é uma segunda família de texto: serve o que tem de alinhar caractere a caractere (código, matrículas, um VIN), onde a largura variável da Inter torna a comparação impossível. */ --main-font-family: 'Inter', sans-serif; --font-family-base: var(--main-font-family); --font-mono: ui-monospace, 'Consolas', monospace; /* ── Tipografia — escala (base 12px / minor-third progression) ──────── */ /* Regra: valores hardcoded de font-size PROIBIDOS em qualquer outro ficheiro. Usar sempre estes tokens. */ --text-2xs: 10px; /* micro labels, badge dot, legal */ --text-xs: 11px; /* table cells compactas, chip text */ --text-sm: 12px; /* body default, form labels */ --text-md: 13px; /* corpo comfortable, detalhe panels */ --text-lg: 14px; /* sub-headings, card titles */ --text-xl: 16px; /* section headings */ --text-2xl: 18px; /* page headings */ --text-3xl: 22px; /* hero numbers (KPIs) */ --text-4xl: 28px; /* dashboard display */ /* ── Alturas de linha ──────────────────────────────────────────────── */ --line-tight: 1.1; /* headings / display */ --line-snug: 1.25; /* sub-headings */ --line-normal: 1.4; /* body text */ --line-relaxed: 1.618; /* golden-ratio — prose / descrições */ --line-height-base: var(--line-normal); /* ── Peso de fonte ─────────────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Breakpoints (informativos — usáveis em JS mas não em @media) ─── */ --bp-mobile: 640px; --bp-tablet: 1024px; --bp-medium: 1280px; --bp-large: 1536px; --bp-xlarge: 1920px; /* ── Transições ────────────────────────────────────────────────────── */ --dur-micro: 0.1s; --dur-fast: 0.15s; --dur-md: 0.2s; --dur-lg: 0.3s; --ease-out: ease-out; --ease-in: ease-in; /* Aliases legados — não usar em código novo */ --tran-05: all 0.5s ease; --tran-03: all 0.3s ease; --tran-02: all 0.2s ease; /* ── UI Timing ─────────────────────────────────────────────────────── */ --toast-animation-duration: 4s; /* ── Espaçamento (grelha 4px) ──────────────────────────────────────── */ /* Fibonacci-aligned: 4, 8, 12, 20, 32, 52 aproximam golden ratio × 4. Valores intermédios (16, 24, 48, 64) mantidos por compatibilidade. ⚠️ NUNCA definir aqui --space-xs/sm/md/lg: vários CSS antigos referem esses nomes INEXISTENTES (declarações inválidas → computam 0 desde sempre). Defini-los agora mudaria silenciosamente o espaçamento de deals/manage/styles/schedules. A correção é feita página a página na migração (Fase 4), substituindo pelos --space-N reais. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Border Radius ─────────────────────────────────────────────────── */ --radius-sm: 6px; /* 8px e não 12: o raio de superfície do sistema (painéis, cartões, widgets, fieldsets). Com hairline em vez do traço forte, o 12 lia-se mole; o 8 é o que um SaaS denso usa. Os controlos mantêm a escala própria mais abaixo. */ --radius: 8px; /* 8px e NÃO alias de --radius: honra os var(--radius-md, 8px) que já existiam em deals/atendimento/settings/dashboard/stock antes do token. */ --radius-md: 8px; --radius-lg: 12px; /* modais, ilha de escrita, cartão de entrada */ --radius-xl: 20px; --radius-full: 9999px; /* ── RAIO DOS CONTROLOS ─────────────────────────────────────────────── Botões e campos partilham a MESMA escala, e só o tamanho do controlo é que a faz variar: um botão `.small` tem o raio de um campo `.small`, um botão `.normal` o de um campo normal. Antes os botões eram cápsula (`--radius-full`) e os campos 6px — lado a lado na mesma linha, liam-se como peças de sistemas diferentes. A escala segue a altura (~18% dela), que é o que mantém a curva com o mesmo peso visual em controlos de tamanhos diferentes: 26px → 5px | 34px → 6px | 42px → 8px */ --radius-control-sm: 5px; /* .small — 26px de altura */ --radius-control-md: 6px; /* .normal, input, select, textarea — 34px */ --radius-control-lg: 8px; /* .big — 42px */ /* ── Indicador de foco (FONTE ÚNICA) ───────────────────────────────── */ /* Era `0 0 0 2px` do mesmo tom a 22% de opacidade, repetido em 10 sítios. Medido: 1,6:1 no tema claro e 1,4:1 no escuro contra o que está à volta — um halo largo e difuso que ficava ABAIXO do mínimo de 3:1 da WCAG 1.4.11 (Non-text Contrast). Pesava aos olhos sem sequer cumprir a norma. Agora metade da espessura e cor a sério: 1px a 80% de opacidade. Passa a 1.4.11 nos dois temas com um traço nítido em vez de uma mancha, e o mínimo de 2px do 2.4.13 (AAA) continua satisfeito pelo par borda-do-campo + anel. A COR vive nos blocos de tema, mais abaixo, e não aqui: um `var()` dentro de uma custom property é resolvido onde a propriedade é DECLARADA, não onde é usada. Declarada em :root ficava presa ao cinzento do tema escuro, e o cartão claro do login herdava-a já resolvida. */ --focus-ring-width: 1px; /* ── Elevação / Sombras ────────────────────────────────────────────── */ --shadow: 0 10px 25px rgba(0, 0, 0, 0.08); --shadow-md: var(--shadow); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.14); /* ── Alturas de componentes (derivadas de golden ratio) ─────────────── */ /* height-btn-sm × φ ≈ height-btn-lg (26 × 1.618 ≈ 42) */ --height-btn-sm: 26px; --height-btn-md: 34px; --height-btn-lg: 42px; --height-input: 34px; /* input, select */ --height-header: var(--header-height); /* A altura de um cabeçalho de painel: a barra de separadores de uma página e o cabeçalho do painel ao lado dela têm de acabar à mesma linha, senão os dois lados do ecrã ficam desencontrados logo no primeiro pixel (decisão do Jorge, 2026-09-18). 45px é o que o cabeçalho do aside dos pedidos já media com o seu texto e o seu padding; quem a usa é a classe `.cms-pane-head`. */ --height-pane-head: 45px; /* ── Layout ────────────────────────────────────────────────────────── */ --header-height: 60px; --footer-height: 40px; /* ── O RESPIRO LATERAL DE UMA PÁGINA ─────────────────────────────── Dois conceitos diferentes, e é isto que os separa: --page-edge quanto o cartão da página se afasta da borda do ecrã --page-pad quanto o conteúdo se afasta da borda do cartão São o mesmo valor no computador, e divergem no telemóvel: num ecrã de 390px os dois a 24px comiam 96px de largura, um quarto do ecrã, para dar duas folgas seguidas que ninguém lê. Escolha do Jorge a 2026-09-19: no telemóvel o cartão fica a 10px da borda e respira 12px por dentro. Viviam como literais no `.app .page-panel` (components.css), e por isso não acompanhavam degrau nenhum: o `--page-pad-end` também está aqui pela mesma razão. Quem os APLICA continua a ser cada peça (o painel sangra e o conteúdo recolhe, ver o bloco do padrão de página); aqui só se diz quanto valem. O `--page-edge` é novo e nasce igual ao `--page-pad`, para nada mudar acima de 768px. */ --page-edge: 24px; --page-pad: 24px; --page-pad-end: 32px; /* ── SIDEBAR: dimensões ──────────────────────────────────────────── Estavam no `sidebar.css`, num `:root` próprio — o mesmo ficheiro cujo comentário de topo diz "nunca declarar :root { --var } fora do tokens.css". As cores foram movidas na altura; as dimensões ficaram, e por isso a largura da sidebar acabou definida em seis sítios. Dois conceitos DIFERENTES, que estavam num só token e é o que os separa: --sidebar-width quão LARGA a sidebar é desenhada --sidebar-offset quanto espaço horizontal ela TIRA ao conteúdo São iguais quando está encostada; divergem quando flutua por cima (overlay) ou está colapsada. */ /* Mobile-first: a base é a GAVETA. Em ecrãs estreitos a sidebar flutua por cima do conteúdo e por isso o offset é zero — não é a largura dela que é zero, como estava escrito (`--sidebar-width: 0px` no modo overlay). Eram dois conceitos no mesmo token, e a largura real da gaveta acabou hardcoded em dois sítios do responsive.css: 280px em telemóvel e 260px em tablet, para a mesma gaveta. Ficou uma. */ --sidebar-width: 280px; --sidebar-width-collapsed: 80px; --sidebar-nav-item-height: 39px; --sidebar-offset: 0px; /* ── LARGURA DA APLICAÇÃO ────────────────────────────────────────── REGRA (Jorge, 2026-08-31): o limite é o TOTAL da viewport, sidebar incluída. Num ecrã de 2560 a aplicação ocupa 1920 e o resto fica vazio, esteja a sidebar aberta, colapsada ou em overlay. Por isso `--content-max-width` deixou de ser um número e passou a ser o que SOBRA: era 1440px fixo aplicado DENTRO da sidebar, o que dava um total de 1690 com ela encostada — o limite nunca era o do projecto. aberta 250 + 1670 = 1920 colapsada 80 + 1840 = 1920 overlay 0 + 1920 = 1920 Escapam a isto as páginas marcadas `.is-fullbleed` — chat, suporte, configurador e os dois quadros Kanban —, que vivem de largura: quantas colunas cabem. É uma excepção decidida (Jorge, 2026-08-31), não um acidente; ver o bloco do `.is-fullbleed` em layout.css. */ --app-max-width: 1920px; /* Sem sidebar (o ecrã de login é anónimo e não tem `.app`), o cap é o limite inteiro. A derivação com o offset vive no `.app`, em layout.css, e NÃO aqui: uma custom property com `var()` resolve-se no elemento onde é declarada. Declarada no `:root`, ficava congelada no offset do e não acompanhava os estados, que o JS escreve no . */ --content-max-width: var(--app-max-width); /* ── Faixas do topo (acima do header) ────────────────────────────── Duas podem estar ligadas ao mesmo tempo, e cada uma tem a sua altura: a do ambiente local (`--sim-bar-height`) fica por cima, e a de manutenção ou de notícias (`--news-bar-height`) fica por baixo dela. Zero por omissão; quem as liga são as classes `has-sim-bar` e `has-announcement-bar` do . A `--announcement-bar-height` é a SOMA das duas, e é por ela que o header, a barra lateral e o conteúdo sabem onde começam. A soma é derivada no , no header.css, e NÃO aqui: um `calc()` com `var()` resolve-se no elemento onde é declarado, e no `:root` as duas faixas valem sempre zero. */ --sim-bar-height: 0px; --news-bar-height: 0px; --announcement-bar-height: 0px; /* ══════════════════════════════════════════════════════════════════ 4. Z-INDEX (novo — escala nomeada, ancorada nos valores reais) Valores atuais dos componentes estruturais mantidos (header 1035, sidebar 1030/1040, footer 1010, toasts header 1300). Na migração, substituir números soltos por estes tokens; NUNCA introduzir novos valores numéricos de z-index. ══════════════════════════════════════════════════════════════════ */ --z-sticky: 900; /* barras/headers sticky dentro da página */ --z-dropdown: 1000; /* dropdowns, datepickers, menus flutuantes */ --z-footer: 1010; --z-sidebar: 1030; --z-header: 1035; --z-sidebar-mobile: 1040; /* sidebar sobreposta em mobile */ --z-header-menu: 1100; /* dropdowns do header (perfil, notificações) */ /* O ecrã de uma chamada tapa a aplicação inteira (cabeçalho, menu lateral, menus do cabeçalho) e fica ABAIXO de tudo o que pergunta ou avisa: os modais, os toasts e as dicas. Esteve a 4000, acima de tudo, e a 2026-09-25 o Jorge deu por isso a meio de uma chamada: um modal de confirmação nascia atrás do vídeo e o aviso fixo que o abria nunca se conseguia fechar. O Modal.js lê o `--z-modal` daqui, e é isso que faz a ordem valer. */ --z-call: 1150; /* o ecrã da chamada (MeetUI), sobre a app e sob os modais */ --z-modal-backdrop: 1200; --z-modal: 1210; --z-toast: 1300; /* toasts/notificações — acima de modais */ --z-tooltip: 1400; --z-max: 9999; /* último recurso — substitui 99999/999999 */ } /* ── Overrides responsivos (dimensões) ─────────────────────────────── */ /* ── SIDEBAR: onde deixa de flutuar e passa a empurrar ────────────────── 901px é o degrau histórico deste layout e fica como está nesta passagem — converge para 1024px (a escala canónica) quando as media queries todas forem revistas, porque muda o comportamento em tablets de 900 a 1023. Daqui para cima a sidebar está encostada: a largura dela É o offset. */ @media (min-width: 901px) { :root { --sidebar-width: 190px; --sidebar-offset: var(--sidebar-width); } } @media (min-width: 1281px) { :root { --sidebar-width: 250px; } } /* Tablet portrait / large phone (≤ 768px) */ @media (max-width: 768px) { :root { --header-height: 52px; --space-4: 12px; --space-5: 12px; --space-6: 20px; --radius: 8px; --radius-lg: 12px; /* O degrau intermédio do respiro da página: a folga e o respiro ainda valem o mesmo, e o fim da página encurta com eles. */ --page-edge: 16px; --page-pad: 16px; --page-pad-end: 24px; } } /* Small phones (≤ 480px) */ @media (max-width: 480px) { :root { --header-height: 48px; --space-3: 8px; --space-4: 10px; --space-5: 10px; --radius: 6px; --radius-lg: 10px; --radius-sm: 4px; /* A escala dos controlos encolhe no mesmo passo (ver a secção 3). */ --radius-control-sm: 4px; --radius-control-md: 5px; --radius-control-lg: 6px; /* Aqui os dois separam-se: o cartão quase encosta à borda e guarda o respiro para dentro, onde ele serve de alguma coisa. */ --page-edge: 10px; --page-pad: 12px; /* O rodapé sai do telemóvel (Jorge, 2026-09-19): são 40px, 4,7% do ecrã, para dizer o copyright e a versão. Nenhuma aplicação gasta isso num telemóvel. O token a zero é o que devolve o espaço ao conteúdo, porque é dele que o `padding-bottom` do `.content` se serve; o `display:none` do rodapé em si está no `footer.css`. Repõe-se apagando estas duas linhas. */ --footer-height: 0px; } } /* ══════════════════════════════════════════════════════════════════════ 5. TEMAS (PADRÃO: DARK) Agrupamos :root, default e dark porque partilham os mesmos valores. Aqui só vivem cores de superfície/texto/borda dependentes do tema. ══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="default"], [data-theme="dark"] { /* ── Surfaces & Borders ────────────────────────────────────────────── REFEITAS A 2026-09-19, porque a vista cansava. A queixa foi dos próprios utilizadores e o motivo estava aqui, em três números: 1. A mesa era quase preta (#09090b, 0,28 % de luminosidade). Sobre um preto assim, o texto claro espalha-se nas bordas e obriga a pupila a trabalhar a cada linha. É o efeito de halation, e é a primeira causa de fadiga num tema escuro, sobretudo para quem tem astigmatismo. 2. O contraste do texto era de 16:1 sobre o painel. A WCAG pede 4,5:1 como MÍNIMO; não há máximo escrito, mas acima de 15:1 num fundo escuro o texto passa a vibrar. O confortável fica entre 11:1 e 13:1. 3. Os cinzentos tinham 4 a 6 % de azul. A luz azul é a que mais custa ao fim de um dia inteiro ao ecrã. A escada nova sai do quase-preto (como o módulo do chat já tinha feito a 2026-09-03: «numa página só de conversa, o quase-preto lia-se como um buraco»), baixa o texto para 12,6:1 e troca o azul por um toque quente, que é o que se vê nos clientes de correio que o Jorge deu por referência. mesa #1a1a19 1,03 % de luminosidade (era 0,28 %) painel #212120 1,52 % dentro #282826 2,11 % hover #31312f borda #343432 A borda continua HAIRLINE (2026-09-08): não desenha traço em tudo o que tem contorno. O traço que tem de se ver ganhou nome próprio. */ --color-bg: #1a1a19; --color-surface: #212120; --color-surface-alt: #282826; --color-surface-hover: #31312f; --color-border: #343432; /* SUBIU a 2026-09-19, de #454542 para aqui. Este token não é decoração: é o contorno dos CONTROLOS (campo, select, textarea, o grupo de campo, o dropdown, o botão de contorno, a caixa de visto). A WCAG 1.4.11 pede 3:1 para a parte visual que identifica um controlo, e a #454542 o contorno de um campo dava 1,54:1 sobre o fundo dele: sabia-se que havia ali um campo por hábito, não por se ver. Medido: 3,19:1 sobre o fundo de um campo, 3,48:1 sobre o painel e 3,76:1 sobre a mesa. A hairline decorativa (`--color-border`) fica como estava, que é a decisão de 2026-09-08 e não é o que a norma cobre. */ --color-border-strong: #757570; /* A LINHA ENTRE REGISTOS de uma lista. Entre a hairline e o contorno: a hairline (`--color-border`) dava 1,29:1 sobre a superfície e 1,15:1 dentro de um cartão, e nesse ponto a tabela deixava de se ler linha a linha. A 30% do contorno fica em 1,6:1 a 1,8:1 nas três superfícies, que se vê sem a tabela passar a grelha. */ --color-row-line: color-mix(in srgb, var(--color-border-strong) 30%, var(--color-border)); /* --radius-sm / --radius-lg definidos na secção 3 (dimensões) */ /* ── Text ── Off-white, e não quase-branco: é a outra metade da correção de 2026-09-19. Medidos sobre o painel (#212120) e sobre um cartão (#282826): principal 12,6:1 e 11,6:1 (era 16:1 e 15:1) secundário 7,2:1 e 6,6:1 apagado 5,7:1 e 5,2:1 e 4,6:1 sobre o hover Todos acima do 4,5:1 da WCAG 1.4.3, incluindo o apagado na superfície mais clara, que era onde a escada antiga raspava o mínimo. */ --color-text: #e4e4e1; /* 12,6:1 sobre o painel */ --color-text-secondary: #adada8; /* rótulos, apoio, menus: 7,2:1 */ --color-text-muted: #9a9a92; /* 5,7:1 sobre o painel, 5,2:1 num cartão */ --focus-ring-color: color-mix(in srgb, var(--color-text-muted), transparent 20%); /* A cor que ESCREVE do acento (ver --color-primary na secção 2). */ --color-primary-text: #60a5fa; /* 7,6:1 sobre o painel */ --color-primary-subtle: rgba(96, 165, 250, 0.14); /* Tons de TEXTO das cores de estado. As cores base servem para pintar (pontos, barras, fundos tingidos); escritas como texto de badge sobre o escuro, o teal dava 3,4:1, o slate 2,5:1 e o mustard 3,8:1. O vermelho e o rosa subiram a 2026-09-19, com a escada de superfícies: um badge escreve-se sobre o seu PRÓPRIO fundo tingido, que subiu com a superfície por baixo, e os dois caíam para 4,47:1 e 4,04:1. Quem mede isto é o `_badges_contraste.py`, e passa a correr sempre que se mexe na escada. */ --color-green-text: #3fbf73; --color-red-text: #ff7f9e; --color-yellow-text: #ffab1a; --color-orange-text: #ff8229; --color-cyan-text: #1ab6ff; --color-blue-text: #60a5fa; --color-purple-text: #c084fc; --color-pink-text: #f27ab5; --color-indigo-text: #a5b4fc; --color-teal-text: #2dd4bf; --color-slate-text: #94a3b8; --color-mustard-text: #d4a52a; /* ── Os gradientes, com nome e com regra ───────────────────────────── Cinco usos, e só estes (decisão do Jorge, 2026-09-08). Nenhum é decoração: cada um representa luz, profundidade ou magnitude. --gradient-edge a luz a apanhar o rebordo de cima de um painel (1px) --gradient-sheen o brilho quase nulo de uma superfície com volume --gradient-fill a profundidade de uma peça cheia: bolhas, contadores (NUNCA nos botões: são planos, sem sombra nem efeito) --gradient-scrim o véu sobre uma imagem, para o texto se ler nela --gradient-magnitude a barra que mede tamanho, a esvair-se para a ponta */ --gradient-edge: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%); --gradient-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 55%); --gradient-fill: linear-gradient(180deg, #2f6fe8 0%, #2259d8 100%); --gradient-scrim: linear-gradient(90deg, rgba(26, 26, 25, 0.94) 0%, rgba(26, 26, 25, 0.62) 48%, rgba(26, 26, 25, 0.28) 100%), linear-gradient(0deg, rgba(26, 26, 25, 0.88) 0%, rgba(26, 26, 25, 0) 50%); --gradient-magnitude: linear-gradient(90deg, #2563eb 0%, rgba(37, 99, 235, 0.55) 100%); --glass-bg: rgba(33, 33, 32, 0.58); /* cartões sobre a imagem do herói */ --frozen-shadow: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent); /* colunas fixas */ /* ── Sidebar ── O projeto dá-lhe superfície própria, um degrau ABAIXO da mesa (--sidebar-background hsl(240 6% 5%)), com o item activo em --sidebar-accent e o texto em repouso mais apagado que o do corpo. */ /* Na MESMA mesa que a página (2026-09-08), separada por hairline; o item ativo é um degrau de superfície com um filete de luz à esquerda. As linhas entre itens ficam (o Jorge gosta delas) e passam a token. */ --sidebar-bg-solid: #1a1a19; --sidebar-bg: var(--sidebar-bg-solid); --sidebar-text: #adada8; --sidebar-text-muted: #9a9a92; --sidebar-text-3: #82827c; --sidebar-text-strong: #e4e4e1; --sidebar-active-bg: #282826; --sidebar-hover-bg: rgba(255, 255, 255, 0.04); --sidebar-border: #343432; --sidebar-line: rgba(255, 255, 255, 0.06); /* ── Header ── */ /* Vidro fosco, reposto a 2026-09-10 por decisão do Jorge: a barra de cima e a de baixo deixam ver o conteúdo a passar por trás, como antes de 2026-09-08. A cor é a mesma do cabeçalho opaco; o que volta é o alfa e o desfoque. O alfa é 0,52, bem mais aberto do que os 0,72 e 0,80 que a casa já teve: a legibilidade do rodapé foi resolvida na cor do texto, não a tapar o fundo. */ --header-bg: rgba(26, 26, 25, 0.52); --header-border: var(--color-border); --header-blur: 16px; --header-hover-bg: rgba(255, 255, 255, 0.06); /* ── Elevação (dependente do tema) ────────────────────────────────── Os valores da secção 3 são os do tema CLARO — uma sombra ténue basta sobre branco. Sobre preto essa sombra não existe: precisa de ser muito mais opaca para se ver, e mesmo assim só faz trabalho debaixo de coisas que FLUTUAM (dropdowns, modais, toasts). Cartões assentes na página separam-se pela superfície, não por aqui. */ --shadow: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-md: var(--shadow); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65); /* ── Chat module palette (mesma escada de superfícies, tema-aware) ── */ /* Cinzentos NEUTROS, e não os frios do resto do CRM: o chat segue a referência que o Jorge deu (2026-09-03), e nela não há azul nenhum, nem sequer os 4 a 6% que os cinzentos da aplicação levam. Os valores estão também um degrau acima do quase-preto do CRM, que numa página só de conversa lia-se como um buraco. */ --chat-bg: #1c1c1c; /* área de conversa */ --chat-rail: #141414; /* lista de conversas, um degrau abaixo */ --chat-panel: #202020; /* painéis e cabeçalhos */ --chat-panel-alt: #2a2a2a; /* cartões, campos, chips */ --chat-panel-hover: #333333; --chat-card-active: #2a2a2a; /* item de conversa selecionado */ --chat-border: #2e2e2e; --chat-text: #e8e8e8; /* O esbatido passa em TODAS as superfícies do módulo, incluindo a conversa aberta da lista (o degrau de 12% pedido): 5,78 sobre ela. O #9a9a9a de antes falhava lá por um centésimo (4,49). Medido na maqueta do chat de 2026-09-26, letra A. */ --chat-text-muted: #a3a3a3; --chat-bubble-in: #2e2e2e; /* bolha recebida */ --chat-bubble-in-text: #ececec; /* Bolha enviada: contraste, não cor. O gradiente azul que estava aqui era a única mancha de cor de um ecrã que é todo conversa, e não significava estado nenhum: era só o azul por omissão do projeto. Uma cor sólida invertida é o que as apps de conversa fazem e o que o Jorge pediu (2026-09-03). As duas pontas ficam iguais para o gradiente que as usa continuar a resolver, sem uma segunda regra a desligá-lo. */ --chat-sent-from: #ececec; --chat-sent-to: #ececec; --chat-sent-text: #1a1a1a; --chat-accent: #ececec; /* o destaque do módulo: o próprio texto */ --chat-live: var(--color-green); /* verde: reunião a decorrer / presente */ --chat-live-missing: #f53d6b; /* vermelho: convocado e a faltar */ color-scheme: dark; /* ── Legacy aliases (backward-compat for styles.css pre-token era) ── */ --panel-color: var(--color-surface); --text-color: var(--color-text); --border-color: var(--color-border); --black-light-color: var(--color-text-muted); --main-background-color: var(--color-bg); --main-color: var(--color-blue); } /* ══════════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES Aqui só colocamos o que realmente MUDA em relação ao padrão. ══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Surfaces ── Bloco `:root` do projeto de referência. Lá o fundo e os cartões são ambos brancos e quem os separa é a BORDA (#E6E6E6) — não a diferença de superfície, como no escuro. */ /* A mesa deixa de ser branca (2026-09-08): um cinzento quase branco é o que faz um painel branco ler-se como painel sem precisar de sombra. */ --color-bg: #f6f6f8; --color-surface: #ffffff; --color-surface-alt: #f4f4f6; /* --secondary / --muted / --accent */ --color-surface-hover: #ececef; --color-border: #e4e4e8; /* O mesmo de 2026-09-19 do lado claro: era #cfcfd6, e o contorno de um campo dava 1,41:1 sobre o fundo dele. Agora 3,11:1 no campo, 3,42:1 no painel e 3,17:1 na mesa. */ --color-border-strong: #8a8a94; /* A LINHA ENTRE REGISTOS de uma lista. Entre a hairline e o contorno: a hairline (`--color-border`) dava 1,29:1 sobre a superfície e 1,15:1 dentro de um cartão, e nesse ponto a tabela deixava de se ler linha a linha. A 30% do contorno fica em 1,6:1 a 1,8:1 nas três superfícies, que se vê sem a tabela passar a grelha. */ --color-row-line: color-mix(in srgb, var(--color-border-strong) 30%, var(--color-border)); /* ── Text ── */ --color-text: #18181b; --color-text-secondary: #52525b; /* 7,6:1 sobre branco */ --color-text-muted: #6b6b75; /* 5,3:1 sobre branco, 4,8:1 num cartão */ --focus-ring-color: color-mix(in srgb, var(--color-text-muted), transparent 20%); --color-primary-text: #1d4ed8; /* 7,1:1 sobre branco */ --color-primary-subtle: rgba(37, 99, 235, 0.10); /* A tinta de cada cor sobre o fundo pastel da mesma família, que é onde ela se lê pior: um badge não assenta em branco, assenta no `-subtle`, que é a cor a 12% sobre a superfície. Medido assim (2026-09-13), seis destes tons ficavam entre 3,67:1 e 4,33:1 e desceram até passarem 4,5:1 nas três superfícies do CMS. Os números estavam certos para branco, e só para branco: quem os escolheu mediu contra a superfície e não contra o pastel. Prova: `python scripts/ferramentas/_badges_contraste.py`. */ --color-green-text: #107239; --color-red-text: #bf1f47; --color-yellow-text: #a84d08; --color-orange-text: #b63d0b; --color-cyan-text: #0369a1; --color-blue-text: #1d4ed8; --color-purple-text: #7e22ce; --color-pink-text: #bf1469; --color-indigo-text: #4338ca; --color-teal-text: #0e6d66; --color-slate-text: #475569; --color-mustard-text: #8d5606; /* No claro a luz do rebordo é o acento muito diluído: um brilho branco sobre branco não se via. */ --gradient-edge: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.22) 50%, transparent 100%); --gradient-sheen: linear-gradient(180deg, #ffffff, #fbfbfc); --gradient-fill: linear-gradient(180deg, #2f6fe8 0%, #2259d8 100%); --gradient-scrim: linear-gradient(90deg, rgba(9, 9, 11, 0.94) 0%, rgba(9, 9, 11, 0.62) 48%, rgba(9, 9, 11, 0.28) 100%), linear-gradient(0deg, rgba(9, 9, 11, 0.88) 0%, rgba(9, 9, 11, 0) 50%); --gradient-magnitude: linear-gradient(90deg, #2563eb 0%, rgba(37, 99, 235, 0.55) 100%); --glass-bg: rgba(18, 18, 21, 0.58); --frozen-shadow: linear-gradient(90deg, rgba(0, 0, 0, 0.10), transparent); /* ── Cores de estado, versão clara ── No projeto os semânticos mudam entre temas: no escuro são vivos para se verem sobre quase-preto, no claro são mais escuros para aguentarem o branco. Os "-strong" da secção 2 já são estes valores — aqui é a cor base que desce um degrau. */ --color-green: #138643; /* --success hsl(145 75% 30%) */ --color-red: #dc2855; /* --destructive hsl(345 72% 51%) */ --color-yellow: #f59f0a; /* --warning hsl(38 92% 50%) */ --color-orange: #f59f0a; --color-cyan: #0da2e7; /* --info hsl(199 89% 48%) */ /* Os fundos tingidos das CINCO cores de cima, redeclarados aqui pela mesma razão do `--sidebar-bg` e do `--color-primary-subtle`: um `var()` dentro de uma custom property resolve-se no elemento onde ELA é declarada, e estes estão declarados no `:root` (), onde `--color-green` ainda é o verde do tema escuro. O `data-theme` vive no , e o que desce por herança é o valor já resolvido. Sem estas cinco linhas, um badge «Aberto» no tema claro tinha o fundo tingido com a paleta do tema escuro. Descoberto a 2026-09-19, ao medir o contraste dos estados. As outras oito cores não se redeclaram porque o tema claro não lhes toca. */ --color-green-subtle: color-mix(in srgb, var(--color-green), transparent 88%); --color-red-subtle: color-mix(in srgb, var(--color-red), transparent 88%); --color-yellow-subtle: color-mix(in srgb, var(--color-yellow), transparent 88%); --color-orange-subtle: color-mix(in srgb, var(--color-orange), transparent 88%); --color-cyan-subtle: color-mix(in srgb, var(--color-cyan), transparent 88%); /* ── Sidebar (Mantendo o estilo escuro que tinhas no light) ── */ /* Escura por omissão no tema claro, como sempre foi, num cinzento menos pesado que o #333 de antes. A alternativa clara escolhe-se ao lado do tema, no menu do utilizador (decisão do Jorge, 2026-09-08): ver o bloco [data-sidebar="light"] a seguir. */ --sidebar-bg-solid: #1c1c1f; /* Redeclarado pela mesma razão dos aliases legacy mais abaixo: `--sidebar-bg` é declarado no bloco base, ou seja no :root (), onde o var() já resolveu para o cinzento do tema escuro. O data-theme vive no , e o que desce por herança é o valor JÁ RESOLVIDO — sem esta linha a sidebar do tema claro ficava com a cor do escuro. */ --sidebar-bg: var(--sidebar-bg-solid); --sidebar-text: rgba(255, 255, 255, 0.78); --sidebar-text-muted: rgba(255, 255, 255, 0.60); --sidebar-text-3: rgba(255, 255, 255, 0.45); --sidebar-text-strong: #ffffff; --sidebar-active-bg: rgba(255, 255, 255, 0.09); --sidebar-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-border: #1c1c1f; --sidebar-line: rgba(255, 255, 255, 0.06); /* ── Header ── */ --header-bg: rgba(255, 255, 255, 0.52); --header-border: var(--color-border); --header-blur: 16px; --header-hover-bg: rgba(23, 23, 23, 0.06); /* ── Chat module palette (variante clara) ── */ /* Mesma escada do bloco claro acima: no projeto de referência o fundo e os painéis são ambos brancos e quem os separa é a borda. O rail e os cartões ficam no cinzento --secondary (#F5F5F5) para o olho não perder a estrutura das colunas. */ /* O claro é o mesmo desenho ao contrário: a lista recua para o cinzento e a conversa fica no branco. Os degraus são os mesmos, com os mesmos papéis. */ --chat-bg: #ffffff; --chat-rail: #f2f2f2; --chat-panel: #ffffff; --chat-panel-alt: #f2f2f2; --chat-panel-hover: #e6e6e6; --chat-card-active: #e6e6e6; --chat-border: #e2e2e2; --chat-text: #1a1a1a; /* O #737373 de antes só passava sobre o branco: sobre a lista, a ilha de escrita, a bolha recebida e a conversa aberta ficava entre 3,80 e 4,24. Este passa em todas, e dá 4,84 sobre a conversa aberta (maqueta do chat de 2026-09-26, letra A). */ --chat-text-muted: #5a5a5a; --chat-bubble-in: #f0f0f0; --chat-bubble-in-text: #1a1a1a; --chat-sent-from: #171717; --chat-sent-to: #171717; --chat-sent-text: #ffffff; --chat-accent: #171717; --chat-live: var(--color-green); --chat-live-missing: var(--color-red); /* ── Legacy aliases (backward-compat for styles.css pre-token era) ── TÊM de ser redeclarados aqui: os aliases do bloco base ficam no :root (), mas o data-theme é aplicado ao (layout.js) — resolvidos no , apanhavam sempre as cores DARK e qualquer regra legacy com var(--panel-color)/var(--text-color) ignorava o tema claro. */ --panel-color: var(--color-surface); --text-color: var(--color-text); --border-color: var(--color-border); --black-light-color: var(--color-text-muted); --main-background-color: var(--color-bg); --main-color: var(--color-blue); /* ── Os semânticos, pela MESMA razão dos aliases acima ── `--color-danger` e companhia são `var(--color-red)` declarado no :root, e ali o vermelho é o do tema escuro. São 68 usos do danger, 53 do warning e 32 do success a pintar com a paleta errada no tema claro, sem ninguém dar por isso: a diferença entre o #f53d6b do escuro e o #dc2855 do claro lê-se como «está um bocado vivo demais», não como um defeito. Encontrado a 2026-09-19, ao medir o contraste dos estados. */ --color-success: var(--color-green); --color-success-subtle: var(--color-green-subtle); --color-warning: var(--color-yellow); --color-warning-subtle: var(--color-yellow-subtle); --color-danger: var(--color-red); --color-danger-subtle: var(--color-red-subtle); --color-info: var(--color-cyan); --color-info-subtle: var(--color-cyan-subtle); /* ── Elevação ── Redeclaradas pela mesma razão que os aliases legacy acima: o bloco de tema base declara-as no :root () e o data-theme é aplicado ao . Sem isto o tema claro herdava as sombras pesadas do escuro. */ --shadow: 0 10px 25px rgba(0, 0, 0, 0.08); --shadow-md: var(--shadow); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.14); color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════ BARRA LATERAL CLARA (só no tema claro) Escolhe-se no menu do utilizador, ao lado do tema; o layout.js escreve `data-sidebar` no , ao lado do `data-theme`. No escuro a barra é sempre a da mesa. Mesma escada do painel, para se ler como parte da página. ══════════════════════════════════════════════════════════════════════ */ [data-theme="light"][data-sidebar="light"] { --sidebar-bg-solid: #fbfbfc; --sidebar-bg: var(--sidebar-bg-solid); --sidebar-text: #52525b; --sidebar-text-muted: #6b6b75; --sidebar-text-3: #8a8a93; --sidebar-text-strong: #18181b; --sidebar-active-bg: #ececef; --sidebar-hover-bg: rgba(0, 0, 0, 0.04); --sidebar-border: #e4e4e8; --sidebar-line: rgba(0, 0, 0, 0.06); } /* ── BARRA DE ROLAGEM ─────────────────────────────────────────────────── Vinham do layout.css; os tokens têm uma fonte única. A regra é o contraste da PEGA contra o FUNDO da página, não contra o track: é a pega que se procura com os olhos. No escuro, 40% dá 3,81:1 sobre #0d0d0f; no claro, 48% é o mínimo para 3:1 sobre o cinza da aplicação (WCAG 1.4.11). */ :root, [data-theme="default"], [data-theme="dark"] { --scrollbar-track-bg: rgba(255, 255, 255, 0.10); --scrollbar-thumb: rgba(255, 255, 255, 0.40); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.60); } [data-theme="light"] { --scrollbar-track-bg: rgba(18, 25, 38, 0.10); --scrollbar-thumb: rgba(18, 25, 38, 0.48); --scrollbar-thumb-hover: rgba(18, 25, 38, 0.68); }