/* =================================================================== EFICÁCIA CRM — ds-tokens.css FASE 0 (proposta-design §7) — fundações. ZERO alterações estruturais. =================================================================== O QUE ESTE FICHEIRO FAZ Define a nova linguagem de cor/espaço/tipo/raio/sombra (§2) e, logo a seguir, REAPONTA o vocabulário antigo para ela. Nenhuma variável antiga é renomeada ou apagada: os ~1000 seletores já escritos em style.css / design-system.css / mod-*.css continuam a dizer var(--neutral-200) e passam a receber a cor nova sem serem tocados. Resultado: os mesmos ecrãs, com outra pele. Reversível removendo uma linha do index.html. ------------------------------------------------------------------- PORQUE É QUE O MAPA ESTÁ EM `:root:root` E NÃO EM `@layer` ------------------------------------------------------------------- Duas regras da cascata mandam aqui: 1. CSS *sem* camada ganha sempre a CSS *com* camada. O legado é todo sem camada. Se estes tokens vivessem em `@layer tokens{}`, o `--primary-500: #DA0A0D` do style.css ganhava e o mapa era inerte. 2. Dentro da mesma camada (aqui: nenhuma), especificidade ganha a ordem de carregamento. `:root:root` = (0,2,0) contra o `:root` = (0,1,0) do legado. Por isso os tokens ficam FORA de camada e o mapa usa `:root:root`: assim o ficheiro pode ser carregado PRIMEIRO (como manda o §6.4) e ainda assim ganhar ao legado. As camadas propriamente ditas são declaradas em ds-base.css. Quando a Fase 6 embrulhar o legado em `@layer legado{}`, este bloco pode voltar a `:root` simples dentro de `@layer tokens{}`. =================================================================== MAPA DE COMPATIBILIDADE — ANTIGO → NOVO =================================================================== MARCA --primary-* → --brand-* (§2.2) --primary-50 #fef2f2 → --brand-50 #FFF1F1 --primary-100 #fee2e2 → --brand-100 #FFDDDD --primary-200 #fecaca → --brand-200 #FFBDBD --primary-300 #f87171 → --brand-300 #FF9091 --primary-400 #dc2626 → --brand-400 #EE2C2D ← deixa de ser igual a --error-600 --primary-500 #DA0A0D → --brand-500 #DA0A0D ← valor inalterado (marca) --primary-600 #CC1616 → --brand-600 #B80A0C --primary-700 #9B1010 → --brand-700 #930C0E ← 9.1:1 sobre branco (AAA) --primary-800 #6D0206 → --brand-800 #6D0B0D --primary-900 #450a0a → --brand-900 #4A0A0B PERIGO --error-* → --danger-* (crimson, hue ~348°) (§2.2) --error-50 #fef2f2 → --danger-50 #FFF1F4 --error-100 #fee2e2 → --danger-100 #FFE0E6 --error-200 #fecaca → --danger-200 #FDC4CF --error-400 #f87171 → --danger-400 #F45C7C --error-500 #ef4444 → --danger-500 #E11D48 --error-600 #dc2626 → --danger-600 #C10E3A --error-700 #b91c1c → --danger-700 #A00F33 ⇒ resolve o conflito de §1.5: marca e perigo eram a MESMA cor. NEUTROS --neutral-* → --ink-* (quentes, hue ~5°) (§2.2) --neutral-0 #ffffff → --ink-0 #FFFFFF --neutral-25 #fafafa → --ink-25 #FCFBFB --neutral-50 #f8fafc → --ink-50 #F8F6F6 --neutral-100 #f1f5f9 → --ink-100 #F1EEEE --neutral-200 #e2e8f0 → --ink-200 #E4E0E0 --neutral-300 #cbd5e1 → --ink-300 #CFC9CA --neutral-400 #94a3b8 → --ink-500 #6E6668 ⚠ ÚNICO SALTO DELIBERADO --neutral-500 #64748b → --ink-500 #6E6668 --neutral-600 #475569 → --ink-600 #554E50 --neutral-700 #334155 → --ink-700 #423B3D --neutral-800 #1e293b → --ink-800 #2D2729 --neutral-900 #0f172a → --ink-900 #1B1618 ⚠ Porquê --neutral-400 → --ink-500 e não → --ink-400: --neutral-400 aparece 155× no CSS e 136 dessas vezes em `color:` — ou seja, é TEXTO. A #94a3b8 dava 2.8:1 sobre branco (falha AA) e o --ink-400 (#A39C9D) daria 2.7:1 — o mesmo erro com outra cor. §2.2 fixa a regra "--ink-400 nunca em texto; texto usa --ink-500 ou mais escuro" e nomeia este token como a falha herdada do Shoperfil. Mapear para --ink-500 corrige 136 falhas de contraste de uma só vez. As 7 utilizações decorativas (thumb da scrollbar em hover, pontos de "expirado"/"inativa", 2 bordas) apenas ficam um pouco mais escuras. --ink-400 fica disponível para quem o queira usar explicitamente em decoração. SEMÂNTICOS — mesmos nomes, valores confirmados + degraus fantasma --success-* 50/100/200/500/600/700 mantêm valor · +800 (era fantasma) --warning-* 50/100/500/600 mantêm valor · +300 +700 (eram fantasmas) --info-* 50/500 mantêm valor · +100 (era fantasma) +600 +700 FANTASMAS DE §1.6 — usados no CSS, nunca definidos. Passam a existir: --danger-50 --danger-200 --danger-700 (mod-equipamentos.css) --surface --bg (mod-equipamentos.css) --info-100 (mod-dashboard.css) --warning-300 (mod-contabilidade, mod-frota) --warning-700 --success-800 (mod-frota.css) --text-md (mod-artigos, mod-frota) RAIOS --radius-* → --r-* (§2.5) --radius-sm 6px → --r-xs 6px (igual) --radius-md 10px → --r-md 10px (igual — controlos) --radius-lg 14px → --r-xl 18px ← CARTÕES ficam mais redondos --radius-xl 20px → --r-2xl 24px ← modais / login --radius-full → --r-full SOMBRAS --shadow-* → --sh-* (tingidas em --brand-950) (§2.6) --shadow-xs → --sh-1 --shadow-lg → --sh-3 --shadow-md → --sh-2 --shadow-xl → --sh-4 ⇒ deixam de ser rgba(0,0,0,…): passam a rgba(43,6,7,…). TIPOGRAFIA --text-* → --txt-* (§2.3) --text-sm → --txt-sm --text-xl → --txt-xl --text-base→ --txt-base --text-2xl → --txt-2xl --text-lg → --txt-lg --text-3xl → --txt-3xl --text-md → --txt-md (fantasma, 15px) --font-family → var(--font-sans) --ds-font-mono → var(--font-mono) ⚠ --text-xs NÃO é mapeado, de propósito. O mobile-toque.css eleva-o para 0.75rem dentro de @media (max-width:768px) num `:root` (0,1,0). Um `:root:root` (0,2,0) aqui ganharia a essa media query e devolveria o mobile aos 11px ilegíveis que o mobile-toque.css existe para corrigir. Como o valor legado (0.6875rem) já é exatamente o --txt-xs novo, não se perde nada. OUTROS --sidebar-bg #111111 → #000000 (preto puro, preferência do Guilherme) --ds-ring-color → var(--ring-color) NÃO TOCADO NESTA FASE (deliberado) --ds-page-pad / --ds-page-gap / --ds-card-pad / --ds-field-gap --ds-control-h-* / --ds-touch / --ds-z-* / --transition-* Reapontá-los para a escala --sp-* mexeria em layout, e a Fase 0 é só pele. A escala --sp-* fica criada e pronta para a Fase 1. =================================================================== */ /* =================================================================== 1. VOCABULÁRIO NOVO Nomes que ainda não existem em lado nenhum → `:root` simples chega. =================================================================== */ :root { /* --------------------------------------------------------------- 1.1 MARCA — rampa real ancorada nos dois vermelhos oficiais. Os dois vermelhos da Eficácia entram como 400 (#EE2C2D, o que o mod-pdf.js já usa) e 500 (#DA0A0D, eficacia.pt) em vez de competirem. Branco sobre --brand-500 = 5.2:1 (AA). Vermelho é identidade, não é interface: ≤5% da área do ecrã. --------------------------------------------------------------- */ --brand-50: #FFF1F1; --brand-100: #FFDDDD; --brand-200: #FFBDBD; --brand-300: #FF9091; --brand-400: #EE2C2D; --brand-500: #DA0A0D; --brand-600: #B80A0C; --brand-700: #930C0E; --brand-800: #6D0B0D; --brand-900: #4A0A0B; --brand-950: #2B0607; /* --------------------------------------------------------------- 1.2 PERIGO — crimson (hue ~348°), para deixar de colidir com a marca (hue ~0°). Lê-se diferente mesmo à dimensão de um badge e continua inequivocamente "mau". --------------------------------------------------------------- */ --danger-50: #FFF1F4; --danger-100: #FFE0E6; --danger-200: #FDC4CF; --danger-300: #FB94A9; --danger-400: #F45C7C; --danger-500: #E11D48; --danger-600: #C10E3A; --danger-700: #A00F33; --danger-800: #7C0B28; --danger-900: #5C0A20; /* --------------------------------------------------------------- 1.3 NEUTROS QUENTES — cinzentos com um sopro de vermelho (chroma muito baixa, hue ~5°). Substituem o Slate azulado do Shoperfil: vermelho quente sobre cinzento frio fazia o vermelho parecer um autocolante colado por cima. Contrastes sobre branco, calculados: --ink-400 2.7:1 → DECORATIVO. Nunca texto. --ink-500 5.6:1 → texto secundário (AA) --------------------------------------------------------------- */ --ink-0: #FFFFFF; --ink-25: #FCFBFB; --ink-50: #F8F6F6; --ink-100: #F1EEEE; --ink-200: #E4E0E0; --ink-300: #CFC9CA; --ink-400: #A39C9D; --ink-500: #6E6668; --ink-600: #554E50; --ink-700: #423B3D; --ink-800: #2D2729; --ink-900: #1B1618; --ink-950: #0F0B0C; /* --------------------------------------------------------------- 1.4 SUPERFÍCIES SEMÂNTICAS — a camada que torna o dark mode uma redefinição de ~14 variáveis em vez de uma caça a #fff. REGRA DE OURO (§2.2): componentes novos referenciam --surface, --border e --text-*, NUNCA --ink-* diretamente. (--surface e --bg eram fantasmas em mod-equipamentos.css.) --------------------------------------------------------------- */ --surface: var(--ink-0); --surface-raised: var(--ink-0); --surface-alt: var(--ink-25); --surface-sunken: var(--ink-50); --bg: var(--ink-50); --border: var(--ink-200); --border-strong: var(--ink-300); /* Atenção ao nome: --text-1/2/3 são COR de texto; --text-sm/lg/… (vocabulário legado) são TAMANHO. Não confundir. */ --text-1: var(--ink-900); --text-2: var(--ink-700); --text-3: var(--ink-500); --text-inverse: var(--ink-0); --overlay: rgba(28, 23, 25, .55); /* --------------------------------------------------------------- 1.5 ESPAÇAMENTO — grelha de 4 com ritmo de 8 (§2.4). Não existia NENHUMA escala em 18 864 linhas: era essa a origem da assimetria (um cartão a 16px ao lado de outro a 18px/22px). SÓ estes valores. Nunca 14, nunca 18, nunca 22. --------------------------------------------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* --------------------------------------------------------------- 1.6 TIPOGRAFIA (§2.3) — base 14px, densidade de CRM. Em rem para respeitar o tamanho de letra escolhido pelo utilizador no browser (acessibilidade). --------------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace; --txt-2xs: 0.625rem; /* 10 — contadores em pílula, rótulos da bottom-nav */ --txt-xs: 0.6875rem; /* 11 — eyebrow, badges, meta */ --txt-sm: 0.8125rem; /* 13 — células de tabela */ --txt-base: 0.875rem; /* 14 — corpo */ --txt-md: 0.9375rem; /* 15 — valor de campo na ficha */ --txt-lg: 1rem; /* 16 — títulos de secção; inputs em ≤768px (anti auto-zoom iOS) */ --txt-xl: 1.125rem; /* 18 — título de cartão/modal */ --txt-2xl: 1.375rem; /* 22 — título de página */ --txt-3xl: 1.75rem; /* 28 — número-herói da ficha */ --txt-4xl: 2.125rem; /* 34 — KPI de dashboard */ --txt-5xl: 2.75rem; /* 44 — métrica única do dashboard CEO */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* ≥22px fecha; maiúsculas abrem. Sempre, sem exceção (§2.3). */ --track-tight: -0.02em; --track-caps: 0.06em; /* Números alinham na vertical em euros, datas, quantidades e contadores. É o que separa "tabela feita à pressa" de "produto financeiro". Aplicado em ds-base.css. */ --num-tabular: tabular-nums; /* --------------------------------------------------------------- 1.7 RAIOS (§2.5) Regra de aninhamento: raio interno = raio externo − padding. Um bloco com --sp-4 dentro de um cartão --r-xl usa --r-lg. --------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-full: 9999px; /* --------------------------------------------------------------- 1.8 SOMBRAS TINGIDAS (§2.6) — base --brand-950 (43,6,7), nunca preto puro. Relevo vem da BORDA; a sombra só cresce em hover e em elementos flutuantes. --sh-brand é o hover de cartão clicável: o cartão "acende" na cor da marca. --------------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(43, 6, 7, .05); --sh-2: 0 2px 4px -1px rgba(43, 6, 7, .06), 0 1px 2px rgba(43, 6, 7, .04); --sh-3: 0 8px 16px -4px rgba(43, 6, 7, .08), 0 2px 4px rgba(43, 6, 7, .04); --sh-4: 0 20px 32px -8px rgba(43, 6, 7, .12), 0 4px 8px rgba(43, 6, 7, .05); --sh-brand: 0 0 0 1px rgba(218, 10, 13, .14), 0 10px 24px -6px rgba(218, 10, 13, .16); /* --------------------------------------------------------------- 1.9 FOCO (§5.8) — translúcido de propósito: funciona sobre qualquer fundo, ao contrário de um --brand-200 opaco. --------------------------------------------------------------- */ --ring-color: rgba(218, 10, 13, .16); --ring: 0 0 0 3px var(--ring-color); /* --------------------------------------------------------------- 1.10 DENSIDADE (§2.7) — multiplicador, para as duas densidades não custarem CSS duplicado. Ainda não há toggle: fica pronto. --------------------------------------------------------------- */ --dens: 1; } [data-dens="compacta"] { --dens: .82; } /* =================================================================== 2. DARK MODE — PREPARADO, NÃO LANÇADO Decisão D3(a) do §8.1: o custo de preparar agora é ~zero; a posteriori é uma reescrita. Este bloco está INERTE: nada no código põe data-tema="escuro". Para lançar, basta passar a pôr o atributo em — e, se se quiser seguir o sistema operativo, acrescentar aqui um @media (prefers-color-scheme: dark). NOTA: mod-equipamentos.css tem, de outra época, alguns seletores :root[data-theme="dark"] (inglês). Ficam por reconciliar na Fase 6. =================================================================== */ :root[data-tema="escuro"] { --surface: var(--ink-900); --surface-raised: var(--ink-800); --surface-alt: var(--ink-800); --surface-sunken: var(--ink-950); --bg: var(--ink-950); --border: var(--ink-700); --border-strong: var(--ink-600); --text-1: var(--ink-25); --text-2: var(--ink-200); --text-3: var(--ink-400); --text-inverse: var(--ink-900); --overlay: rgba(10, 6, 7, .72); color-scheme: dark; } /* =================================================================== 3. MAPA DE COMPATIBILIDADE — ANTIGO → NOVO =================================================================== `:root:root` (0,2,0) para ganhar ao `:root` (0,1,0) do style.css e do design-system.css sem depender da ordem de carregamento. Ver a explicação no cabeçalho. NADA aqui é renomeado ou apagado. Os nomes antigos continuam a existir e a funcionar — só passam a apontar para a paleta nova. =================================================================== */ :root:root { /* ---- MARCA ---------------------------------------------------- */ --primary-50: var(--brand-50); --primary-100: var(--brand-100); --primary-200: var(--brand-200); --primary-300: var(--brand-300); --primary-400: var(--brand-400); --primary-500: var(--brand-500); --primary-600: var(--brand-600); --primary-700: var(--brand-700); --primary-800: var(--brand-800); --primary-900: var(--brand-900); /* ---- PERIGO --------------------------------------------------- O passo que separa "gravar" de "apagar": --error-600 e --primary-400 eram literalmente #dc2626 os dois. */ --error-50: var(--danger-50); --error-100: var(--danger-100); --error-200: var(--danger-200); --error-400: var(--danger-400); --error-500: var(--danger-500); --error-600: var(--danger-600); --error-700: var(--danger-700); /* ---- NEUTROS -------------------------------------------------- --neutral-400 → --ink-500 (não --ink-400): ver ⚠ no cabeçalho. */ --neutral-0: var(--ink-0); --neutral-25: var(--ink-25); --neutral-50: var(--ink-50); --neutral-100: var(--ink-100); --neutral-200: var(--ink-200); --neutral-300: var(--ink-300); --neutral-400: var(--ink-500); --neutral-500: var(--ink-500); --neutral-600: var(--ink-600); --neutral-700: var(--ink-700); --neutral-800: var(--ink-800); --neutral-900: var(--ink-900); /* ---- SEMÂNTICOS ---------------------------------------------- Os degraus que já existiam mantêm o valor; os que faltavam (fantasmas de §1.6) passam a existir. */ --success-50: #ECFDF5; --success-100: #D1FAE5; --success-200: #A7F3D0; --success-500: #10B981; --success-600: #059669; --success-700: #047857; --success-800: #065F46; --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-300: #FCD34D; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --info-50: #EFF6FF; --info-100: #DBEAFE; --info-500: #3B82F6; --info-600: #2563EB; --info-700: #1D4ED8; /* ---- RAIOS --------------------------------------------------- --radius-lg é o raio dos cartões: 14 → 18. É a mudança de geometria mais visível da Fase 0 e não mexe em layout. */ --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-xl); --radius-xl: var(--r-2xl); --radius-full: var(--r-full); /* ---- SOMBRAS ------------------------------------------------- De rgba(0,0,0,…) para rgba(43,6,7,…): deixam de "sujar" e passam a assentar a página. */ --shadow-xs: var(--sh-1); --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3); --shadow-xl: var(--sh-4); /* ---- TIPOGRAFIA ----------------------------------------------- --text-xs fica DE FORA de propósito (ver ⚠ no cabeçalho: colidiria com o override mobile do mobile-toque.css). */ --font-family: var(--font-sans); --text-sm: var(--txt-sm); --text-base: var(--txt-base); --text-md: var(--txt-md); --text-lg: var(--txt-lg); --text-xl: var(--txt-xl); --text-2xl: var(--txt-2xl); --text-3xl: var(--txt-3xl); /* ---- TOKENS ds- QUE SÃO COR/TIPO (os de espaço ficam intactos) */ --ds-font-mono: var(--font-mono); --ds-ring-color: var(--ring-color); /* ---- SIDEBAR -------------------------------------------------- Preto puro, por preferência do Guilherme (igual ao design de referência). Antes era #17100F (preto com subtom vermelho). */ --sidebar-bg: #000000; } /* --------------------------------------------------------------------------- Piso de legibilidade em mobile. Conflito real entre dois documentos aprovados: a proposta (§2.3) fixa `--txt-xs: 11px` para o eyebrow, mas o gate responsivo (check 8) exige >= 12px em ecrãs pequenos e é critério de aceitação do cliente. Na ficha de contrato a 390px isso dava 33 elementos abaixo de 12px (rótulos de campo, notas dos heróis, timebar, contadores das abas). Decisão: em mobile manda a legibilidade. É a mesma regra que o `mobile-toque.css` já aplica ao `--text-xs` legado — aqui fica coerente. Mantém-se `:root:root` para ganhar ao mapa acima (mesma especificidade, vence por ordem) sem precisar de !important. --------------------------------------------------------------------------- */ @media (max-width: 768px) { :root:root { --txt-xs: 0.75rem; /* 11px -> 12px */ /* O `--txt-2xs` tinha ficado de fora e era o ÚNICO texto abaixo dos 12px que sobrava nos ecrãs novos a 390px: 27 elementos por passagem (contadores das abas e das secções, validade dos ficheiros, eyebrow de cada valor no cartão de listagem, pílula de sinal). São todos contadores e eyebrows — nenhum precisa de ser mais pequeno que o eyebrow ao lado, e a 10px ninguém os lê num telemóvel. No desktop mantêm os 10px, que é onde a densidade compensa. */ --txt-2xs: 0.75rem; /* 10px -> 12px */ } }