/* ========================================================================== Chase — ponte entre os tokens do tema e o design system do handoff O QUE ESTE ARQUIVO RESOLVE O tema tem 3.915 linhas de CSS escritas contra 42 tokens `--chase-*`. O handoff traz 124 tokens com nomes próprios (`--blue-500`, `--neutral-700`, `--surface-page`...). Reescrever as 3.915 linhas para os nomes novos seria um diff impossível de revisar e de reverter. Esta ponte faz o contrário: os nomes `--chase-*` continuam existindo e passam a APONTAR para a rampa do design system. O CSS do tema não muda uma linha, e o visual inteiro vira de uma vez. Desligar é remover três enqueues do functions.php. A ORDEM DE CARREGAMENTO É PARTE DA SOLUÇÃO variables.css → ds/colors, typography, spacing, effects → ds/ponte 23 nomes de token existem nos dois lados, e 22 com valores diferentes: `--chase-blue`, os quatro `--radius-*`, os três `--shadow-*`, `--container-max` e os onze `--space-*`. Carregando o design system DEPOIS do variables.css, ele ganha nesses 23 — que é o efeito desejado. A ponte vem por último e cuida do que sobra. Duas notas sobre as colisões: Os `--space-*` são EQUIVALENTES, não conflitantes: o tema usa `rem` e o handoff usa `px`, mas 0.25rem = 4px, 1rem = 16px e assim por diante nos onze. O tamanho renderizado é o mesmo; só a unidade muda. A escala de tipo também coincide: `--font-size-xs` 0.75rem = `--text-xs` 12px, e assim até 3rem = 48px. O handoff acrescenta 18px e 60px. O QUE NÃO ENTROU DO HANDOFF, E POR QUÊ `tokens/fonts.css` — trocado por `ds/fontes.css`, que hospeda as fontes no nosso domínio. Ver o cabeçalho daquele arquivo. `tokens/base.css` — ele estiliza `body`, `h1`–`h5` e `a` no seletor de elemento, incluindo `a:hover { text-decoration: underline }`. Isso brigaria de frente com o Storefront e com o nosso CSS: o sublinhado em link é exatamente o comportamento que precisou de três classes para ser desfeito nos filtros da loja. O que aquele arquivo faz de útil está no fim desta ponte, com especificidade sob controle. DECISÕES QUE MUDAM A APARÊNCIA, E QUE SÃO DO PROPRIETÁRIO O AZUL. O tema usava `#008ecf` no header e `#176CA6` no resto; o design system tem um azul só, `#188ccd`. Branco sobre ele mede 3,70:1 — abaixo dos 4,5:1 do WCAG AA para texto normal, praticamente igual aos 3,64:1 do `#008ecf` que já estava no ar por decisão consciente de 17/08/2026. Ou seja: adotar o azul do handoff não piora o contraste, mas também não corrige. O `--text-on-brand` do próprio design system é branco, então essa é a escolha dele. O DOURADO. O tema tinha `--chase-gold: #D99A24`, um âmbar escuro com 26 usos. O design system não tem dourado — o acento é o amarelo `#FFD100`. Aqui o dourado passa a apontar para `--yellow-600` (`#b89500`), que é o ponto da rampa nova mais próximo do âmbar antigo. Assim os 26 usos sobrevivem sem virar amarelo-sinalização. O FUNDO. O tema estava em branco puro; o design system usa `--surface-page` = `#fafbfc`, um branco levemente frio. ========================================================================== */ :root { /* ─────────────────────────── Marca ─────────────────────────── */ /* O `--chase-blue` e o `--chase-yellow` já foram redefinidos pelo ds/colors.css, que carrega antes desta ponte. Não são repetidos aqui. */ /* ── A COLUNA DO SITE INTEIRO, E POR QUE ELA NAO E A DO HANDOFF ── O `spacing.css` do handoff declara `--container-max: 1240px`, e la isso vale para TUDO: o `Header.jsx` usa `var(--container-max)` nas tres faixas — aviso, logo e navegacao —, o `HomeScreen.jsx` no `
` e o `Footer.jsx` nas duas linhas dele. Uma coluna so. AQUI NAO ERA ASSIM, e o desalinhamento vinha disso. O header e o rodape deste tema usam `--container-wide`, que e 1440 e vem do visual anterior; a barra de aviso e o corpo usam o 1240 do handoff. Medido a 1561px: a logo comecava em x77 e o heroi em x177 — **100px de diferenca**, com o texto da barra de aviso e todo o conteudo encolhidos para dentro em relacao a logo e ao carrinho. O proprietario pediu o oposto do que o handoff faria: alinhar o corpo COM a logo e a ponta do carrinho, e nao trazer a logo para dentro. Decisao mais recente e mais especifica que o prototipo, como foi a remocao do SKU. Entao a coluna passa a ser 1440 para todo mundo. O override mora AQUI, e nao no `spacing.css`, porque aqueles quatro arquivos de token sao copia byte a byte do handoff — mexer neles faria a conferencia de fidelidade parar de valer e esconderia que isto e escolha nossa. Como `--container-max` e lido por onze arquivos da camada, uma linha move o site inteiro: aviso, home, listagem, produto, carrinho, checkout, conta, conteudo e 404. A medida de leitura das paginas de texto NAO acompanha — ela e `42rem` no `conteudo.css`, independente desta. */ --container-max: var(--container-wide, 1440px); --chase-blue-light: var(--blue-400); --chase-blue-dark: var(--blue-700); --chase-blue-darker: var(--blue-800); --chase-blue-lightest: var(--blue-50); /* Dourado: ver a nota no cabeçalho. */ --chase-gold: var(--yellow-600); --chase-gold-dark: var(--yellow-700); --chase-gold-light: var(--yellow-100); --chase-gold-lightest: var(--yellow-50); /* ──────────────────── Superfícies e texto ──────────────────── */ --chase-bg: var(--surface-page); --chase-bg-alt: var(--surface-sunken); --chase-white: var(--neutral-0); --chase-text: var(--text-body); /* ─────────────────────── Escala neutra ─────────────────────── */ --chase-gray-50: var(--neutral-50); --chase-gray-100: var(--neutral-100); --chase-gray-200: var(--neutral-200); --chase-gray-300: var(--neutral-300); --chase-gray-400: var(--neutral-400); --chase-gray-500: var(--neutral-500); --chase-gray-600: var(--neutral-600); --chase-gray-700: var(--neutral-700); --chase-gray-800: var(--neutral-800); --chase-gray-900: var(--neutral-900); --chase-border: var(--border-default); --chase-border-light: var(--border-subtle); /* ───────────────────────── Semânticas ──────────────────────── */ --chase-success: var(--success-500); --chase-success-light: var(--success-50); --chase-error: var(--danger-500); --chase-error-light: var(--danger-50); --chase-warning: var(--warning-500); --chase-warning-light: var(--warning-50); --chase-info: var(--info-500); --chase-info-light: var(--info-50); /* ─────────────────────────── Header ────────────────────────── */ /* ── O HEADER DO HANDOFF É BRANCO, NÃO AZUL ── Esta era a maior diferença entre o nosso local e o protótipo. No `Header.jsx` do handoff só a BARRA DE AVISO é azul escura; a faixa do logo, da busca e da navegação é `rgba(255,255,255,0.94)` com desfoque, e a navegação é azul sobre branco com um traço amarelo no item ativo. Os cinco tokens andam juntos, como o CLAUDE.md registra — e é justamente por isso que virar só o fundo não bastaria: com fundo branco o texto branco desapareceria. Então: bg passa a ser a faixa translúcida text passa de branco para --blue-700, que é a cor da nav no handoff hover passa de branco a 16% para --blue-50, porque sobre fundo CLARO quem sinaliza hover é uma superfície mais escura, não mais clara accent passa a ser o AMARELO, que no handoff é o que marca o item ativo ícone da busca passa de dourado para --blue-500: o dourado existia para contrastar com o círculo azul do header azul O logo troca de variante no template — ver site-header.php. */ --chase-header-bg: rgba(255, 255, 255, 0.94); --chase-header-text: var(--blue-700); --chase-header-hover: var(--blue-50); --chase-header-accent: var(--chase-yellow); --chase-header-search-icon: var(--blue-500); /* ──────────────────────── Tipografia ───────────────────────── */ /* O tema tem UMA família (`--font-primary`); o design system tem duas, corpo e display. O corpo assume o `--font-primary` para as 3.915 linhas existentes seguirem funcionando, e o display é aplicado no fim deste arquivo, onde o handoff manda: títulos e preços. */ --font-primary: var(--font-body); /* ────────────── Triplas RGB, que não podem ser alias ─────────── */ /* Estes quatro entram em `rgba(var(--x), 0.5)`, então precisam do valor numérico cru — um `var()` apontando para `#188ccd` não funcionaria dentro de rgba(). São os únicos valores repetidos à mão nesta ponte, e cada um corresponde ao token do design system indicado no comentário. */ --chase-blue-rgb: 24, 140, 205; /* --blue-500 #188ccd */ --chase-gold-rgb: 184, 149, 0; /* --yellow-600 #b89500 */ --chase-text-rgb: 51, 59, 69; /* --neutral-700 #333b45 */ --chase-bg-rgb: 250, 251, 252; /* --neutral-25 #fafbfc */ } /* ========================================================================== O que aproveitamos do `tokens/base.css` do handoff Só o essencial, e com escopo. O arquivo original mirava `body`, `h1`–`h5` e `a` no seletor de elemento; aqui: - o corpo do texto é aplicado em `body`, porque é o único lugar onde faz sentido e o Storefront não disputa `font-family` de body; - a família de display vai nos títulos e nos preços, que é a regra do handoff ("Outfit para títulos e preços"); - o estilo de link NÃO é replicado. O handoff sublinha link no hover, e este projeto passou trabalho para tirar exatamente esse sublinhado do Storefront. Mudar isso agora é decisão de design, não de integração. ========================================================================== */ body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Títulos e preços em Outfit, com o entreletras negativo do design system. O `body` na frente dos títulos NÃO é enfeite. O components.css declara `h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary) }` — mesma especificidade de um seletor de elemento — e carrega DEPOIS desta ponte, na cadeia de dependências. Sem o `body`, ele vence por ordem de declaração e o título sai em IBM Plex Sans: medido no navegador, foi exatamente o que aconteceu na primeira tentativa. Com `body h1` a conta vira 0,0,2 contra 0,0,1 e a ordem deixa de importar. É o mesmo princípio já registrado no projeto em "Ordem de declaração vence especificidade igual", e a mesma saída do `body.home #masthead`. As três famílias de seletor de preço estão aqui de propósito: são TRÊS markups diferentes neste projeto — a página de produto, o card da loja e o card da home — e uma regra que cubra só um já nos enganou antes. */ body h1, body h2, body h3, body h4, body h5, .chase-product-card__price, .woocommerce div.product p.price, .woocommerce ul.products li.product .price { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }