/* ========================================================================== GutEase — Design tokens Fonte de verdade: specs/design.md §16 Todo valor aqui é derivado das quatro cores reais do rótulo. Não invente token novo sem validar contraste (design.md §2.6 regra 10). ========================================================================== */ :root { /* ===================================================================== PALETA "BRANCO + KIWI LIME" — D162, pedido do cliente 2026-09-10. A anterior (creme + verde-floresta) esta guardada inteira em _paleta-anterior/tokens-creme-floresta.css. Voltar e copiar por cima. O QUE MUDOU, e por que: 1. O ground deixa de ser o creme do rotulo e passa a BRANCO. 2. O verde de acao deixa de ser o do wordmark (#344231, matiz 109) e passa ao matiz do pill "Kiwi Lime Flavor" (#829400, matiz 67). A COR DE ACAO NAO E O #829400 LITERAL, e nao pode ser: ele da 3.40:1 sobre branco, entao reprova como texto (precisa de 4.5) e reprova com branco por cima no botao de compra. E o P11 do projeto. O que entra e o MESMO MATIZ escurecido ate passar — #455000, 8.75:1 nos dois sentidos. Os tres olivas lado a lado leem como uma cor so, e o #829400 exato do pote continua existindo onde ele existe no pote: o pill de sabor. Todos os pares abaixo foram calculados antes de escrever, nao estimados. ===================================================================== */ /* --------------------------------------------------------------------- COR — base clara. Ladder: branco -> oliva palido -> oliva palido 2. Com o ground branco, o segundo tom NAO pode ser branco tambem, senao cartao e secao alternada somem (design.md 9). --------------------------------------------------------------------- */ --white: #FFFFFF; /* branco puro — so para card, nao para fundo */ /* BRANCO FOSCO, nao branco puro (D164). Com tinta preta, o #FFFFFF dava 21:1 — acima da faixa confortavel de leitura, e o cliente relatou que "brilha". A 19.52:1 o texto continua com folga enorme e o fundo para de ofuscar. De quebra devolve o site a regra 7 de design.md 2.6, que sempre disse "nunca branco puro como fundo de pagina". */ --cream-50: #F6F7F3; /* GROUND da pagina */ --paper: #FFFFFF; /* card: agora salta do fundo pelo TOM (1.08) e pelo contorno */ /* Subiu de #E6EFE4 (D167). A separacao do ground era 1.09 — abaixo do 1.24 que design.md 2.2 chama de minimo perceptivel —, entao a faixa alternada mal existia. Agora separa 1.24 do ground e o card branco salta 1.34 dela. */ --cream-100: #D4E3D2; /* seções alternadas */ /* Nao e preto puro (D167). O cliente pediu "preto pros contornos", e preto puro cumpre — mas a pagina tem hoje 8 elementos com borda e vai ter dezenas: a tabela de Supplement Facts sozinha tem 23 linhas, uma borda em cada. Preto a 100% em todas le como planilha. #2B2B2B da 13.16:1 sobre o ground: continua linha forte, sem a dureza. A TINTA continua preta pura, entao texto e mais escuro que linha — que e a hierarquia certa. */ --cream-200: #2B2B2B; /* CONTORNOS e divisores */ /* Superficie morta. Existe porque --cream-200 virou preto e ele pintava DOIS fundos: o botao travado e a bolinha inativa da galeria. Com o token preto, o botao ficaria preto no preto e a bolinha inativa ficaria mais forte que a ativa — hierarquia invertida. (D163) */ --mute: #DCDCDC; /* --------------------------------------------------------------------- /* --------------------------------------------------------------------- COR — verdes de marca. Matiz 120, familia do verde puro. HISTORICO DAS TROCAS, curto de proposito — o detalhe esta em memoria.md: D103 #344231, o verde do wordmark do rotulo (matiz 109) D162 #455000, o matiz do pill Kiwi Lime escurecido (67) D163 #228B22 pedido pelo cliente, com tinta PRETA (120) D170 #1F801F, onze degraus abaixo, para aceitar tinta BRANCA (120) D195 #829400, o oliva literal do rotulo, tinta preta (67) D196 #6B7900, o mesmo 18% mais escuro, tinta branca (67) D197 #0B7D0B, o verde do botao que o cliente enviou (120) <- ATUAL Os nomes "forest" e "olive" sao LEGADO e nao descrevem mais nem floresta nem oliva: hoje sao o mesmo matiz 120 em luminosidades diferentes. Ficam assim para nao reescrever os quatro arquivos de CSS. --------------------------------------------------------------------- */ /* ===== VERDE DO BOTAO "ADD TO CART" ENVIADO PELO CLIENTE (D197) ===== Matiz 120, a familia do verde puro. NAO e o oliva do rotulo (67) nem o verde do wordmark (109): e um quarto verde, como R15 e D163 ja tinham registrado em outras rodadas. Decisao de estilo do dono da marca. O HEX E LEITURA DA IMAGEM, NAO AMOSTRAGEM. A arte chegou colada na conversa e nao em arquivo, entao nao deu para contar pixel — que e o que P06 e D133 exigem. Se o cliente salvar o PNG numa pasta, eu amostro e travo o valor exato; a diferenca seria de poucos pontos, invisivel a olho, mas o projeto ja errou cor tres vezes por leitura visual. ELE RESOLVE O PEDAGIO DE D196: branco em cima da 5.31 com folga, entao nao precisa escurecer nada para os brancos do cliente funcionarem. O oliva exigia descer 18%; este nao exige nada. */ --forest-900: #0B7D0B; /* CTA, selecao, blocos verdes - BRANCO em cima 5.31:1 */ /* Tinta branca, entao o hover ESCURECE. Ver D195c/D196c. */ --forest-950: #086808; /* hover ESCURECE - branco 7.01:1, separa 1.32 */ --forest-800: #066006; /* card dentro de bloco verde - branco 7.83:1, separa 1.47 */ --olive-500: #0B7D0B; /* o mesmo verde, papel de superficie */ /* Os nomes "olive" sao legado e nao descrevem mais oliva nenhum: sao o MESMO matiz 120 em tres luminosidades, que e a regra de D40 — lado a lado leem como uma cor so. Ficam com o nome antigo para nao reescrever os quatro arquivos de CSS. */ --olive-600: #0A6E0A; /* icones de interface, chips - tinta no ground 6.01:1 */ --olive-700: #085C08; /* link inline e anel de foco - tinta no ground 7.67:1 */ --olive-100: #E3F3E3; /* fundo de chip, badge - preto 18.20, separa 1.15 do card */ --lime-300: #C0F0C0; /* SÓ dentro de bloco escuro — preto 16.47:1 */ /* --------------------------------------------------------------------- COR — texto. Validado contra os TRES fundos claros; o pior caso agora e --cream-100 #E9EED7, e todos passam nele. --------------------------------------------------------------------- */ /* A TINTA E PRETA, o verde e acao. Revoga D80, em que o cliente tinha confirmado texto em verde-escuro e nao em preto puro — agora o preto e escolha dele, coerente com o contorno preto. */ --text-hi: #000000; /* títulos e corpo — pior caso 19.44:1 */ --text-mid: #3D3D3D; /* corpo secundário — pior caso 10.05:1 */ --text-low: #5A5A5A; /* legenda, microcópia — pior caso 6.38:1 */ /* BRANCO sobre o verde, a pedido do cliente (D170). Continua nao havendo segundo tom: o mais escuro que passaria seria #D7EED7, que da 4.11 e reprova. Num bloco verde a hierarquia vem de CORPO e PESO, nunca de cor. O rodape e a excecao e resolve isso redefinindo estes tres tokens no proprio escopo, porque o verde dele e mais fundo e cabe escada. */ /* PRETO sobre o verde, e nao branco (D195). Nao e preferencia: branco sobre o oliva do pote da 3.40 e reprova. Isto DESFAZ o pedido de D170, em que o cliente quis os rotulos do toggle em branco — naquele verde dava, neste nao da. E a troca que D170 ja tinha anotado, agora no sentido inverso: o hex exato do rotulo custa a tinta preta. Continua nao havendo segundo tom: num bloco verde a hierarquia vem de CORPO e PESO. O rodape e a excecao e redefine estes tres no proprio escopo, porque o verde dele e fundo e cabe escada. */ /* BRANCO de volta, a pedido do cliente (D196). Foi por isso que o verde desceu 18% — ver o bloco de --forest-900 acima. Continua NAO havendo segundo tom: a 4.82 nao sobra folga para um cinza-claro, entao num bloco verde a hierarquia vem de CORPO e PESO. O rodape e a excecao e redefine estes tres no proprio escopo, porque o verde dele e fundo e cabe escada. */ --text-hi-inv: #FFFFFF; /* sobre --forest-900 — 5.31:1 */ --text-mid-inv: #FFFFFF; /* idem: nao ha folga para um segundo tom */ --accent-inv: #FFFFFF; /* link dentro de bloco verde; distingue por sublinhado */ --on-forest: #FFFFFF; /* texto sobre --forest-900 #0B7D0B - 5.31:1 */ --on-olive: #FFFFFF; /* texto sobre --olive-600 #0A6E0A - 6.47:1 */ /* Verde FUNDO, so para o rodape. MESMO matiz 67 do oliva do pote, tres luminosidades abaixo (D195). Ele existe pelo mesmo motivo de sempre: sobre o #829400 SO O PRETO passa, e preto unico nao faz escada — e um rodape precisa de titulo, secundario, link, aviso da FDA e endereco. Aqui cabe: branco 10.46, secundario #D8DFC0 7.59, link #B9CE4B 5.98. */ --forest-deep: #063A06; /* --------------------------------------------------------------------- COR — estados --------------------------------------------------------------------- */ --ok: #0A6E0A; /* mesmo matiz 120 do verde novo — D197 */ --warn: #7A5209; --error: #A32B22; /* --------------------------------------------------------------------- ELEVAÇÃO Sombra tingida de verde-floresta, nunca preto neutro. Sempre descendente. Nunca saturada, nunca decorativa. --------------------------------------------------------------------- */ /* Neutras agora. A regra de design.md 2.5 — sombra tingida, nunca preto neutro — existia porque preto sobre CREME suja. Sobre branco, com tinta preta e contorno preto, tingir de verde e que ficaria estranho. (D163) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px -18px rgba(0, 0, 0, 0.22); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.07), 0 24px 48px -28px rgba(0, 0, 0, 0.26); /* sticky bar projeta para cima */ --shadow-up: 0 -2px 4px rgba(0, 0, 0, 0.05), 0 -12px 28px -18px rgba(0, 0, 0, 0.18); /* --------------------------------------------------------------------- TIPOGRAFIA — famílias Self-hosted em woff2. Sem Google Fonts em runtime (D13). --------------------------------------------------------------------- */ --font-display: 'Playfair Display', Didot, 'Bodoni MT', Georgia, 'Times New Roman', serif; --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* --------------------------------------------------------------------- TIPOGRAFIA — escala fluida Base 16px. clamp() em tudo; nunca dois conjuntos de tamanhos fixos. --------------------------------------------------------------------- */ --fs-display: clamp(2.75rem, 6.2vw, 4.5rem); /* Subiu de clamp(2.125rem, 4.2vw, 3.25rem) para bater com os mockups do cliente (D151): medido, o titulo deles equivale a ~44px num viewport de 393, contra os 34px que a escala antiga dava. Todos os seis mockups usam essa escala de titulo, entao a mudanca e do token, nao de uma secao. */ --fs-h2: clamp(2.75rem, 5.5vw, 3.5rem); --fs-h3: clamp(1.5rem, 2.4vw, 2rem); --fs-h4: clamp(1.125rem, 1.4vw, 1.375rem); /* 20px no celular, contra 17px de antes: e o corpo do subtitulo nos mockups (D151). */ --fs-lead: clamp(1.25rem, 1.6vw, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-caption: 0.75rem; --fs-label: 0.6875rem; --fs-price: clamp(1.75rem, 3vw, 2.5rem); /* line-heights pareados */ --lh-display: 1.02; --lh-h2: 1.08; --lh-h3: 1.16; --lh-h4: 1.3; --lh-lead: 1.6; --lh-body: 1.65; --lh-small: 1.55; --lh-caption: 1.4; --lh-label: 1.2; --lh-price: 1; /* tracking pareado */ --tr-display: -0.022em; --tr-h2: -0.018em; --tr-h3: -0.012em; --tr-h4: -0.005em; --tr-label: 0.14em; --tr-price: -0.02em; /* --------------------------------------------------------------------- RAIOS --------------------------------------------------------------------- */ --r-sm: 8px; /* chips, badges */ --r-md: 14px; /* botões, inputs, cards de quantidade */ --r-lg: 20px; /* cards */ --r-xl: 28px; /* cartão de seção, imagens grandes */ --r-full: 999px; /* pills, avatares, ícones circulares */ /* --------------------------------------------------------------------- ESPAÇAMENTO — escala base 4px --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 96px; --sp-11: 128px; --sp-12: 160px; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container: 1200px; --measure: 34rem; /* 60–72 caracteres */ --measure-h1: 20ch; --measure-h2: 26ch; --gutter: 20px; /* mobile; sobe para 24px em ≥600px */ --card-inset: 16px; /* margem do cartão de seção; 24px no desktop */ --section-y: clamp(64px, 9vw, 144px); --header-h: 72px; --stickybar-h: 68px; /* --------------------------------------------------------------------- MOVIMENTO design.md §12.1. Nada de bounce, elastic ou overshoot. --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-panel: cubic-bezier(0.4, 0, 0.2, 1); /* Resposta ao toque. Não é animação de entrada: é o retorno tátil que diz "recebi", e por isso precisa ser mais curto que qualquer transição de estado — abaixo de ~120ms o dedo lê como imediato (D132). */ --dur-press: 110ms; /* Volta do arrasto que não virou troca de slide. Percorre uma fração de largura, então usar os 240ms de troca de slide faria a imagem "boiar". */ --dur-snap: 200ms; --dur-fast: 180ms; /* hover de botão e link */ --dur-card: 200ms; /* hover de card, header */ --dur-price: 160ms; /* troca de preço */ --dur-img: 240ms; /* troca de slide */ --dur-base: 280ms; /* acordeão */ --dur-bar: 260ms; /* sticky bar */ /* Entrada de seção. Era 480ms: com o escalonamento, um bloco levava até 720ms para terminar de aparecer contando do momento em que já estava 97px dentro da tela — num scroll de reel ele passava do meio da tela ainda clareando. 340 + 160 = 500ms de pior caso (D134). */ --dur-slow: 340ms; /* entrada de seção */ --dur-mark: 520ms; /* marcador de destaque */ /* --------------------------------------------------------------------- PROFUNDIDADE --------------------------------------------------------------------- */ --z-sticky-bar: 40; --z-header: 50; --z-drawer: 60; --z-skiplink: 70; } @media (min-width: 600px) { :root { --gutter: 24px; --card-inset: 24px; } }