/* ════════════════════════════════════════════════════════════════════════════ SOMA DS · soma-tokens.css — a folha única de decisão Este arquivo não inventa um sistema: ele RECOLHE o que já estava decidido e espalhado em cinco folhas, e passa a ser o lugar onde cada número mora uma vez só. styles.css:20-98 cor, família, easing (60 tokens) soma-editorial.css:18-42 espaço e sombra (--e-*, --s-*) soma-premium.css:1-14 movimento (--m-*) page-home.css:114-122 escala de tipo (--t-*) page-home.css:13543-13551 escala de ritmo (--r-*) ── POR QUE OS VALORES SÃO ESTES, E NÃO OS DO PLANO ──────────────────────── `_qa/PLANO_DESIGN_SYSTEM_SOMA.md` (10/08) propôs uma escala própria — `--soma-t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem)`, que dá 56px a 1440. A landing rodou DEPOIS daquele plano a padronização do lote `§ 0 … § 14` (page-home.css:13446+), que mediu peça por peça no navegador e fechou o título de seção em 49px. Onze títulos hoje obedecem a esse número. Entre uma tabela proposta e uma tabela medida-e-aplicada, o sistema descreve a que está na tela. É o princípio 4 do próprio plano: «o sistema descreve o que existe. Cada token nasce de um valor já usado na tela, não de uma tabela inventada.» Adotar os números do plano mudaria onze títulos de 49 para 56px — exatamente a mudança de composição que esta passada não pode fazer. ── AINDA É CÓPIA EM PARTE, E ISSO PRECISA ESTAR ESCRITO ─────────────────── Os eixos 4 (corpo), 5 (ritmo), 7 (espaço) e 8 (sombra) são recolhimento de verdade: a ponte no fim aponta os nomes curtos para cá. Os eixos 1, 2, 3 e 10 ainda são CÓPIA: `styles.css:19-97` segue declarando `--d-*`, `--l-*`, `--c-*`, `--f-*` e `--ease-*` com os mesmos valores, sem ponte e sem consumidor destes. Enquanto ela não consumir os canônicos, esses números moram em dois lugares. TRÊS DIVERGÊNCIAS JÁ NASCEM NA CÓPIA, e conferi-las é obrigatório antes de migrar qualquer regra: · `--soma-f-sans` acrescenta 'Segoe UI' e Roboto à pilha que `--f-sans` não tem — migrar uma regra muda a fonte de reserva no Windows sem Inter. · `--c-navy` (#061323) não foi recolhido. O canônico mais próximo, `--soma-navy-900`, é #050B17 — outra cor. · `--c-gold`, `--c-magenta`, `--l-surf-2`, `--l-line-2` e os quatro gradientes `--g-*` não foram recolhidos. ── COMO ESTE ARQUIVO NÃO MUDA UM PIXEL ──────────────────────────────────── Tudo aqui é declarado em `:root`. As folhas que hoje declaram os mesmos nomes em `body` (page-home.css) continuam vencendo por PROXIMIDADE — uma propriedade customizada declarada no próprio elemento sombreia a herdada do `html` — e, por virem depois desta folha, também por ORDEM. Nunca por especificidade: `:root` é (0,1,0) e VENCE `body`, que é (0,0,1). O valor é idêntico nas duas pontas. Nas demais páginas, os nomes passam a EXISTIR onde antes não existiam, e nenhuma regra os consome ainda. Ligar este arquivo é operação de soma pura. ── ORDEM DE CARGA ───────────────────────────────────────────────────────── Primeiro `` da página, antes de `styles.css`. Quem vier depois sobrescreve, que é o comportamento desejado durante a migração. ════════════════════════════════════════════════════════════════════════════ */ :root { /* ══ 1 · PRIMITIVO — o valor cru. Ninguém consome direto. ═══════════════════ Colhido de styles.css:22-55 e page-home.css:130-131. */ --soma-navy-950: #02040A; /* o canto mais fundo */ --soma-navy-925: #030A16; /* o piso da landing (page-home.css:130) */ --soma-navy-900: #050B17; /* o navy da marca — CLAUDE.md §6 */ --soma-navy-850: #071A30; /* o campo, o navy COM luz (page-home.css:131) */ --soma-navy-800: #08111F; --soma-navy-700: #0E1E36; --soma-navy-600: #102E4F; --soma-navy-500: #155779; --soma-teal-300: #7FE7EB; --soma-teal-400: #02D4DC; /* só no degradê de CTA */ --soma-teal-500: #02B8BF; /* o teal da marca — CLAUDE.md §6 */ --soma-teal-700: #017A80; --soma-teal-800: #02888F; --soma-violet-300:#B3A4FF; --soma-violet-500:#7B61FF; /* o violeta da marca — CLAUDE.md §6 */ --soma-ice-50: #F5F9FC; /* o branco gelo da marca — CLAUDE.md §6 */ --soma-ice-100: #F4F7FB; --soma-ice-200: #E2E8F0; --soma-slate-900: #0F1E33; --soma-slate-600: #475569; --soma-slate-400: #94A3B8; /* funcionais — nome de FUNÇÃO, não de cor */ --soma-sinal-erro: #EF4444; --soma-sinal-alerta: #F59E0B; --soma-sinal-ok: #10B981; /* ══ 2 · SEMÂNTICO — o papel. É daqui que componente lê. ═══════════════════ */ --soma-piso: var(--soma-navy-925); --soma-campo: var(--soma-navy-850); --soma-superficie: var(--soma-navy-900); --soma-superficie-2: var(--soma-navy-800); --soma-superficie-vidro:rgba(255,255,255,0.04); --soma-tinta: var(--soma-ice-50); --soma-tinta-2: rgba(245,249,252,0.78); --soma-tinta-3: rgba(245,249,252,0.55); /* --soma-tinta-4 (32%) NÃO É PERMITIDA EM TEXTO. Só filete e ícone decorativo. A 32% sobre `--soma-piso` o contraste é 2,70:1 — medido pela `design-system.html`, abaixo do piso de 4,5:1 da WCAG para corpo. Fica declarada porque as bordas a usam. */ --soma-tinta-4: rgba(245,249,252,0.32); --soma-borda: rgba(127,231,235,0.14); --soma-acento: var(--soma-teal-500); --soma-acento-claro: var(--soma-teal-300); /* o claro — a área logada, onde a tela é ferramenta de trabalho */ --soma-claro-fundo: var(--soma-ice-100); --soma-claro-superficie:#FFFFFF; --soma-claro-tinta: var(--soma-slate-900); --soma-claro-tinta-2: var(--soma-slate-600); --soma-claro-tinta-3: var(--soma-slate-400); --soma-claro-linha: var(--soma-ice-200); /* ══ 3 · FAMÍLIA ═══════════════════════════════════════════════════════════ TRÊS FAMÍLIAS, HOSPEDADAS. As faces vivem em `soma-fontes.css`; aqui moram só os nomes. Instrument Serif é a serifa da marca, sozinha — a Fraunces saiu por custar 273 KB para alcançar um seletor sem nenhuma ocorrência no HTML. O raciocínio inteiro está no cabeçalho de `soma-fontes.css`. A INTER É VARIÁVEL (300–700 numa face). Peso intermediário renderiza o peso pedido, e não o degrau mais próximo — a escala `--soma-w-*` passa a ser escolha de projeto, não limite do arquivo servido. `--soma-f-rotulo` é sans e não mono de propósito. A razão inteira está em styles.css:69-86: rótulo não é código, e o que dava leitura de etiqueta nunca foi a monoespaçação — era o corpo pequeno, a caixa alta e o espacejamento aberto. */ --soma-f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --soma-f-display: 'Instrument Serif', Georgia, serif; /* título editorial */ /* `--soma-f-enfase` SAIU junto com a Fraunces. Era um segundo nome para o mesmo papel do `--soma-f-display`, apontando para uma família que hoje não é mais servida — token que resolve para uma fonte ausente é pior que token inexistente, porque parece funcionar. Ênfase editorial usa `--soma-f-display`. */ --soma-f-rotulo: var(--soma-f-sans); --soma-f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ══ 4 · CORPO — nove degraus, e nenhum vizinho a menos de um passo ════════ Extraída de page-home.css:114-122. Cada degrau tem um trabalho, e é por isso que são nove e não vinte. */ --soma-t-rot: clamp(8.5px, .62vw, 10.5px); /* rótulo em espaço apertado */ --soma-t-mono: 10.5px; /* A MEDIDA — a régua da casa */ --soma-t-xs: 13px; /* apoio, nota, a dor */ --soma-t-sm: 14.5px; /* corpo secundário */ --soma-t-md: 16px; /* corpo */ --soma-t-lg: clamp(1.05rem, 1.5vw, 1.3rem); /* subtítulo, linha de destaque*/ --soma-t-xl: clamp(1.2rem, 2.1vw, 1.7rem); /* título de bloco */ --soma-t-2xl: clamp(1.8rem, 3.4vw, 3.1rem); /* título de seção */ --soma-t-3xl: clamp(3.2rem, 9vw, 7.5rem); /* o herói — único na página */ /* ══ 5 · RITMO — um por papel, não um por corpo ════════════════════════════ Extraída de page-home.css:13543-13551. A lei: dentro de um papel, o ratio CAI conforme o corpo SOBE. 10,5px pede 1,6 de ar relativo e 49px pede 1,08 — não é gosto, é que o vão entre linhas cresce em valor absoluto junto com o corpo, e a varredura de retorno do olho encurta. */ --soma-r-rotulo: 1; /* t-mono 10,5 → 10,50 · cápsula de UMA linha */ --soma-r-rotulo-env: 1.45; /* o mesmo rótulo quando ENVELOPA */ --soma-r-nota: 1.6; /* t-xs 13 → 20,80 · nota, legenda, apoio */ --soma-r-texto: 1.55; /* t-sm 14,5 → 22,48 · t-md 16 → 24,80 */ --soma-r-destaque: 1.45; /* t-lg 20,8 → 30,16 · o lead */ --soma-r-cartao: 1.25; /* t-lg 20,8 → 26,00 · nome de cartão */ --soma-r-bloco: 1.2; /* t-xl 27,2 → 32,64 · cabeçalho de painel */ --soma-r-titulo: 1.08; /* t-2xl 49 → 52,88 · título de seção */ --soma-r-heroi: 0.92; /* t-3xl 120 → 110,40 · o herói */ /* ══ 6 · PESO ══════════════════════════════════════════════════════════════ Cinco degraus como RÉGUA — não como limite. A Inter é servida variável, com eixo real de 100 a 900: peso intermediário (450, 620) renderiza o valor pedido de verdade, e não cai mais no degrau mais próximo como caía quando a fonte vinha em instâncias estáticas do Google. Isso torna a régua uma escolha de projeto. Cinco bastam para hierarquia, e um sexto peso escolhido no olho é ruído que ninguém nomeia — mas agora é ruído que APARECE na tela, o que antes não acontecia. */ --soma-w-leve: 300; --soma-w-livro: 400; --soma-w-medio: 500; --soma-w-forte: 600; --soma-w-negro: 700; /* ══ 7 · ESPAÇO — potência de 8, fluido onde mede a página ═════════════════ Extraída de soma-editorial.css:20-33 e page-home.css:13574-13628. A LEI, que a folha obedecia em 100% dos casos sem nunca ter escrito: O FLUIDO MEDE A PÁGINA, O FIXO MEDE O OBJETO. Vão de lista e preenchimento de cartão são fixos; goteira e respiro de seção acompanham a largura. */ --soma-e-1: 4px; --soma-e-2: 8px; --soma-e-3: 12px; --soma-e-4: 16px; --soma-e-5: 24px; --soma-e-6: 32px; --soma-e-7: 48px; --soma-e-8: 64px; --soma-e-9: 96px; --soma-e-10: 128px; --soma-e-secao: clamp(64px, 9vw, 144px); --soma-e-secao-fim: calc(var(--soma-e-secao) * 1.25); /* o ar do desfecho */ --soma-e-goteira: clamp(20px, 5vw, 72px); --soma-e-vao-banda: var(--soma-e-goteira); /* texto ↔ imagem, duas colunas */ --soma-e-vao-fileira: var(--soma-e-6); /* entre irmãs de uma fileira */ /* A MEDIDA DE LEITURA, E A ARMADILHA DO `ch`: 1ch em Inter é 0,631em (o avanço do zero) e a letra média do pt-BR é 0,495em. Razão 1,274 — quer dizer que `52ch` entrega 66 caracteres reais, não 52. A faixa saudável de 45-75 caracteres, nesta fonte, é de 35ch a 59ch. */ --soma-e-medida-lead: 52ch; /* = 66 caracteres reais */ /* ══ 8 · FORMA ═════════════════════════════════════════════════════════════ */ /* RAIO usa `--soma-raio-*` e NAO `--soma-r-*`: aquele prefixo e do ritmo (line-height, secao 5). Mesmo prefixo para duas grandezas que nao se somam, num arquivo cuja razao de existir e ser a folha unica, e armadilha pronta — quem escrever `border-radius: var(--soma-r-2)` ao lado de `line-height: var(--soma-r-nota)` esta lendo um namespace so para coisas diferentes. Custou uma edicao agora; depois custaria uma varredura. */ --soma-raio-1: 6px; --soma-raio-2: 10px; --soma-raio-3: 16px; --soma-raio-4: 24px; --soma-raio-pilula: 999px; --soma-s-1: 0 1px 2px rgba(5, 11, 23, .28); --soma-s-2: 0 4px 14px -4px rgba(5, 11, 23, .42); --soma-s-3: 0 16px 40px -16px rgba(5, 11, 23, .58); --soma-s-4: 0 32px 80px -28px rgba(5, 11, 23, .72); --soma-s-acento: 0 8px 30px -8px rgba(2, 184, 191, .38); /* ══ 9 · CONTROLE — a altura vem da fundação ═══════════════════════════════ `.btn { height: 54px }` em styles.css:225 é a base, e todo o resto se deriva dela. As três alturas na tela são TRÊS VARIANTES DECLARADAS, não divergência: 54 é a base, 60 é `.btn-lg` no herói, 44 é `.nav-actions .btn` na barra. 44 é o piso de toque da casa e aparece de propósito onde o espaço é apertado. */ --soma-h-controle: 54px; --soma-h-controle-g:60px; --soma-h-controle-p:44px; --soma-alvo-toque: 44px; /* o piso da casa, acima dos 24 da WCAG 2.2 AA */ /* ══ 10 · MOVIMENTO ════════════════════════════════════════════════════════ Extraída de soma-premium.css:1-14 e styles.css:95-97. Duas curvas, e cada uma diz uma coisa: a de ENTRADA sai rápido e assenta devagar, que é a curva de uma câmera que para; a de SAÍDA hesita e vai embora, que é o que faz algo parecer que decidiu sair em vez de ter sido desligado. */ --soma-m-rapido: .24s; /* resposta ao ponteiro: hover, foco, seta */ --soma-m-medio: .42s; /* mudança de estado: acender, abrir, trocar */ --soma-m-lento: .72s; /* entrada de peça: card, linha, foto */ --soma-m-cena: 1.05s; /* coreografia: lâmina, clarão, símbolo */ --soma-m-escada: 70ms; /* atraso entre irmãs — soma-editorial.js:60 */ --soma-m-entra: cubic-bezier(.16, .84, .26, 1); --soma-m-sai: cubic-bezier(.55, .06, .25, 1); --soma-m-saida: cubic-bezier(0.16, 1, 0.3, 1); --soma-m-suave: cubic-bezier(0.65, 0, 0.35, 1); --soma-m-salto: cubic-bezier(0.34, 1.56, 0.64, 1); /* ══ 11 · EMPILHAMENTO ═════════════════════════════════════════════════════ Nomeia o que hoje são 93 literais espalhados. Nenhum consumidor ainda — entra como vocabulário para a próxima passada usar. */ --soma-z-campo: -2; --soma-z-grao: -1; --soma-z-base: 0; --soma-z-veu: 10; --soma-z-conteudo: 20; --soma-z-flutuante: 40; --soma-z-cabecalho: 90; --soma-z-drawer: 120; --soma-z-modal: 200; --soma-z-aviso: 300; /* ══ 12 · CONTÊINER ════════════════════════════════════════════════════════ */ --soma-largura: 1440px; /* `.wrap` — styles.css:273 */ --soma-largura-lida: 1280px; --soma-topbar-h: 76px; --soma-sidebar-w: 264px; } /* ════════════════════════════════════════════════════════════════════════════ PONTE PARA OS NOMES CURTOS Esta ponte cobre `--t-*`, `--r-*`, `--e-*` e `--s-*`: esses nomes passam a APONTAR para o canônico acima em vez de carregar o valor. NÃO cobre `--m-*`, e é decisão: `soma-premium.css:55-58` é hoje a única folha que declara E a única que consome as quatro durações, e é autossuficiente — uma ponte ali só criaria a segunda casa que este arquivo existe para fechar. Também não cobre `--e-medida` (68ch, `soma-editorial.css:33`), que o próprio arquivo de origem registra como morto: a única regra que o consome, `.home-medida`, tem zero ocorrências no HTML. NÃO ENTRA NESTA PONTE o que já é declarado por outra folha com o mesmo nome e mesmo valor — `--e-1..10`, `--s-1..4` (soma-editorial.css) e `--m-*` (soma-premium.css) continuam sendo declarados lá, e esta ponte só os ANTECIPA para as páginas que não carregam aquelas folhas. Onde as duas existem, a de lá vence por ordem, com valor idêntico. As páginas que carregam `page-home.css` recebem `--t-*` e `--r-*` declarados em `body`, que vence `:root` por proximidade. Valor idêntico, zero pixel. ════════════════════════════════════════════════════════════════════════════ */ :root { --t-rot: var(--soma-t-rot); --t-mono: var(--soma-t-mono); --t-xs: var(--soma-t-xs); --t-sm: var(--soma-t-sm); --t-md: var(--soma-t-md); --t-lg: var(--soma-t-lg); --t-xl: var(--soma-t-xl); --t-2xl: var(--soma-t-2xl); --t-3xl: var(--soma-t-3xl); --r-rotulo: var(--soma-r-rotulo); --r-rotulo-env: var(--soma-r-rotulo-env); --r-nota: var(--soma-r-nota); --r-texto: var(--soma-r-texto); --r-destaque: var(--soma-r-destaque); --r-cartao: var(--soma-r-cartao); --r-bloco: var(--soma-r-bloco); --r-titulo: var(--soma-r-titulo); --r-heroi: var(--soma-r-heroi); --e-1: var(--soma-e-1); --e-2: var(--soma-e-2); --e-3: var(--soma-e-3); --e-4: var(--soma-e-4); --e-5: var(--soma-e-5); --e-6: var(--soma-e-6); --e-7: var(--soma-e-7); --e-8: var(--soma-e-8); --e-9: var(--soma-e-9); --e-10: var(--soma-e-10); --e-secao: var(--soma-e-secao); --e-goteira: var(--soma-e-goteira); --s-1: var(--soma-s-1); --s-2: var(--soma-s-2); --s-3: var(--soma-s-3); --s-4: var(--soma-s-4); --s-teal: var(--soma-s-acento); }