/* ========================================================================== MERCADO DO MAR — TOKENS Fonte única da verdade. Nenhum valor bruto de cor, corpo ou espaço deve aparecer em outro arquivo — sempre via var(). Base: MARCA.md (cor) + Branding/sistema-tipografico.md (tipografia). ========================================================================== */ :root{ /* ====================================================================== 1. COR — valores extraídos pixel a pixel das referências da marca ====================================================================== */ /* azul — mora entre H218 e H225 nas duas referências. Queda para o violeta, nunca azul-ciano de praia tropical. */ --c-azul-profundo:#12315F; /* texto, wordmark, assinatura */ --c-azul-cobalto:#1E3D8F; /* primário vivo */ --c-azul-mare:#2C6195; /* secundário */ --c-azul-aguada:#8FB3CE; /* pincelada, fundo lavado */ /* quentes — o salmão é FORMA, nunca letra (2,71:1 sobre creme) */ --c-salmao:#F2664B; /* acento principal */ --c-coral:#C6503C; /* acento que aguenta título ≥24px */ --c-lacre:#C4111A; /* raro: selo, carimbo */ --c-amarelo:#EFBE3E; /* sazonal */ --c-verde:#7A9E8E; /* sazonal */ /* neutros */ --c-creme:#F4EFE7; /* fundo primário */ --c-lona:#E9DDCB; /* superfície */ --c-tinta:#1A1714; /* preto quente — nunca #000 */ /* A ÚNICA autorização de branco puro no sistema, e ela é por contraste, não por gosto: o selo de estado vive sobre o Coral e precisa de 4,5:1 para texto pequeno. Creme sobre coral dá 4,17 e reprova; branco dá 4,55. Fora do selo, branco não entra — a marca é impressa, e papel não é #FFF. */ --c-branco-selo:#FFFFFF; /* ---- papéis semânticos: é isto que os componentes consomem ---- */ --bg:var(--c-creme); --bg-surface:var(--c-lona); --bg-invert:var(--c-azul-profundo); --fg:var(--c-azul-profundo); --fg-muted:var(--c-azul-mare); --fg-invert:var(--c-creme); --fg-invert-muted:rgba(244,239,231,.72); --accent:var(--c-salmao); /* Letra SOBRE o campo salmão. Azul Profundo ali dá 4,16:1 — passa em título grande e reprova em rótulo de botão, que é onde o campo salmão mais aparece. A Tinta dá 5,13:1 e é o mesmo par que o menu em tela cheia já usa. Nada de creme sobre salmão: 2,3:1, some. */ --fg-on-accent:var(--c-tinta); --accent-text:var(--c-coral); /* quente sobre CREME — 3,98:1, só ≥24px */ --accent-text-invert:var(--c-salmao);/* quente sobre AZUL — 4,17:1, só ≥24px. O salmão reprova sobre creme (2,71:1) mas passa sobre o azul: a regra "salmão é forma, nunca letra" existe por causa do par salmão/creme. */ --line:rgba(18,49,95,.16); --line-invert:rgba(244,239,231,.16); /* ====================================================================== 2. TIPOGRAFIA ====================================================================== */ /* Sistema v2 — reescrito para o wordmark de lettering art nouveau. A Bodoni Moda saiu: didone é contraste altíssimo e serifa fina, o oposto ponto a ponto da haste flarada sem serifa da logo. */ --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-badge:"Ysabeau SC",Optima,"Segoe UI",sans-serif; --font-script:"Courgette","Segoe Script","Apple Chancery",cursive; --font-body:"Commissioner",-apple-system,"Segoe UI",Roboto,sans-serif; /* ---- presets de eixo variável ---- Regra: font-variation-settings VENCE font-weight. O peso mora aqui. FRAUNCES — tetos duros, e o motivo importa: a linhagem dela (Windsor, Souvenir, Cooper) é a MESMA da logo. Passar de wght 600 / SOFT 50, ou ligar WONK, faz a fonte parar de conversar com o wordmark e virar eco — o mesmo gesto dito duas vezes na mesma composição. */ --vf-display-hero:"opsz" 144,"wght" 600,"SOFT" 40,"WONK" 0; --vf-display-h1:"opsz" 96,"wght" 550,"SOFT" 35,"WONK" 0; --vf-display-h2:"opsz" 60,"wght" 520,"SOFT" 28,"WONK" 0; --vf-display-h3:"opsz" 32,"wght" 500,"SOFT" 20,"WONK" 0; --vf-display-print:"opsz" 14,"wght" 600,"SOFT" 12,"WONK" 0; /* etiqueta, lata */ /* YSABEAU SC — versalete desenhado, não escalado. Quanto menor o corpo, mais peso, para compensar a perda óptica. */ --vf-badge-lg:"wght" 480; /* ≥18px */ --vf-badge:"wght" 560; /* 12–17px */ --vf-badge-sm:"wght" 620; /* ≤11px */ --vf-badge-stitch:"wght" 780; /* bordado e carimbo */ /* COMMISSIONER — FLAR 14 é o parentesco com a logo: os terminais retos da grotesca incham e viram serifas quase glíficas. Em dose baixa ninguém percebe conscientemente, mas o texto respira o mesmo ar do wordmark. Em UI e preço o FLAR vai a 0: ali neutralidade é a função. */ --vf-body-clean:"wght" 400,"slnt" 0,"FLAR" 14,"VOLM" 0; --vf-body-medium:"wght" 500,"slnt" 0,"FLAR" 14,"VOLM" 0; --vf-body-bold:"wght" 620,"slnt" 0,"FLAR" 14,"VOLM" 0; --vf-body-italic:"wght" 400,"slnt" -12,"FLAR" 14,"VOLM" 0; --vf-body-ui:"wght" 500,"slnt" 0,"FLAR" 0,"VOLM" 0; --vf-body-price:"wght" 620,"slnt" 0,"FLAR" 0,"VOLM" 0; --vf-body-engraved:"wght" 600,"slnt" 0,"FLAR" 35,"VOLM" 25; /* A Courgette é ESTÁTICA, peso único 400. Não existe --vf-script-*: qualquer font-weight acima de 400 vira falso-negrito e empasta o pincel. */ /* ---- tracking de caixa alta ---- Quanto MENOR o corpo, MENOR o tracking. Tracking constante em toda a escala é o erro nº 1 de sistema de badge. */ --tracking-caps-hero:.34em; /* ≥24px */ --tracking-caps-lg:.26em; /* 16–23px */ --tracking-caps-md:.18em; /* 12–15px */ --tracking-caps-sm:.12em; /* ≤11px */ --tracking-arc:.30em; /* texto em arco no selo circular */ /* O PISO DO QUENTE COMO LETRA. Coral e salmao so podem ser tinta a partir de 24px — abaixo disso a regra da paleta os devolve para forma. Existe como token porque e limite da NORMA, nao escolha de projeto: qualquer quente deve usar max(var(--text-quente-min), Xem) e nunca so o em, que encolhe junto com o corpo do pai e cruza o piso sem avisar. */ --text-quente-min:1.5rem; /* ---- escala: MOBILE (default) ---- */ --text-display:3rem; --lh-display:.92; --ls-display:-.02em; --text-h1:2.25rem; --lh-h1:1; --ls-h1:-.015em; --text-h2:1.75rem; --lh-h2:1.1; --ls-h2:-.01em; --text-h3:1.375rem; --lh-h3:1.2; --ls-h3:0; --text-eyebrow:.75rem; --lh-eyebrow:1.3; --text-badge:.9375rem; --lh-badge:1.25; --text-script-lg:2rem; --lh-script-lg:1.35; --text-script:1.25rem; --lh-script:1.55; /* mínimo web absoluto: 20px */ --text-body-lg:1.125rem; --lh-body-lg:1.6; --text-body:1rem; --lh-body:1.65; --text-body-sm:.875rem; --lh-body-sm:1.55; --text-caption:.75rem; --lh-caption:1.45; --text-micro:.625rem; --lh-micro:1.2; --text-price:1.375rem; --lh-price:1.2; /* ====================================================================== 3. ESPAÇO E GRID ====================================================================== */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem; --gutter:3.5vw; /* calha mestra do site inteiro */ --maxw:1400px; --maxw-prose:52ch; --sp-section:clamp(5rem,14vh,9rem); /* altura da barra do topo, montada das partes em vez de chutada: o wordmark no piso de legibilidade + .6rem de respiro em cima e embaixo + o fio. 64 + 19,2 + 1 = 84,2px, que é o que a barra mede de fato. Qualquer seção que queira "a tela menos o header" subtrai ESTE token — havia 4.2rem no hero e 5.25rem na PDP, dois chutes para a mesma medida. */ --h-logo-min:64px; /* piso de legibilidade do wordmark — Branding/logo/LEIA-ME.md */ --h-header:calc(var(--h-logo-min) + 1.2rem + var(--border)); /* piso do alvo de toque. Já aparecia como 44 escrito à mão em três lugares (pílula da cesta, botão de menu, "+" do card) sempre com o mesmo comentário explicando de onde vem o número. Vira token porque a passada de celular precisa dele em toda seção — e porque um piso repetido à mão é um piso que uma hora sai errado num dos lugares. 44px é o alvo de toque da HIG e o AAA do WCAG 2.5.5; o AA (2.5.8) pede 24. Quando o alvo tem que crescer sem engordar a barra que o contém, o par é padding + margem negativa do mesmo valor. */ --alvo-toque:2.75rem; /* 44px */ /* ====================================================================== 4. FORMA ====================================================================== */ --r-sm:2px; /* imagem de produto, superfície */ --r-md:4px; /* toast, painel */ --r-pill:100px; /* botão, badge, pill de filtro */ --r-circle:50%; /* seta do carrossel, botão + */ --border:1px; /* ====================================================================== 5. MOVIMENTO ====================================================================== */ --ease:cubic-bezier(.19,1,.22,1); /* o easing da marca: sai rápido, pousa devagar */ --dur-fast:.35s; --dur-base:.45s; --dur-slow:.9s; --dur-carousel:.95s; --cascade-step:45ms; /* atraso entre cards do carrossel */ /* Durações que estavam soltas no site.css e agora nascem aqui, com nome do trabalho que fazem. Nenhum valor mudou — só saiu de dentro da regra. */ --dur-foto:.55s; /* troca de foto na vitrine da PDP */ --dur-zoom:1.1s; /* zoom lento em foto de card e menu */ --dur-zoom-longo:1.4s; /* o mesmo gesto em peça grande */ --dur-linha:.6s; /* fio, sublinhado, régua */ --dur-carta:.58s; /* card do menu entrando */ /* O menu em tela cheia tem curva PRÓPRIA. A --ease da marca é expo-out: dispara e freia forte, o que é ótimo num card de 300px e bruto numa chapa do tamanho da tela — ela chega batendo. Esta acelera e desacelera nos dois extremos, e a chapa desce como cortina. */ --ease-menu:cubic-bezier(.33,0,.12,1); --dur-menu:.62s; --stagger-reveal:.09s; /* degrau entre irmãos com data-d */ /* A onda do rodapé. O passo é por LETRA: 55ms desloca a fase o bastante para a crista ser visível sem a frase virar mola. Ciclo longo (2,8s) porque é movimento de fundo — se pedir atenção, atrapalha o formulário que está logo abaixo. */ --dur-onda:2.8s; --onda-passo:55ms; /* preloader — a saída das duas chapas rumo ao slot do header. Longa de propósito: é o único movimento do site que o usuário assiste parado. */ --dur-registro:.72s; /* ====================================================================== 6. ELEVAÇÃO — usar pouco. A marca é impressa, não material. ====================================================================== */ --shadow-toast:0 12px 34px rgba(18,49,95,.28); /* desfoque do campo da PDP. 64px é o ponto em que a resolução do vídeo deixa de importar — é por isso que o arquivo pode ser 360×640. */ --blur-campo:64px; /* ====================================================================== 7. CAMADAS ====================================================================== */ --z-header:100; --z-toast:200; --z-pre:300; /* a capa cobre tudo, inclusive toast */ } /* ---- escala: DESKTOP ---- */ @media(min-width:60rem){ :root{ --text-display:6.5rem; --lh-display:.88; --ls-display:-.025em; --text-h1:4rem; --lh-h1:.96; --ls-h1:-.02em; --text-h2:2.75rem; --lh-h2:1.05; --ls-h2:-.012em; --text-h3:1.875rem; --lh-h3:1.18; --text-eyebrow:.875rem; --text-badge:1.0625rem; --text-script-lg:3.5rem; --lh-script-lg:1.3; --text-script:1.5rem; --text-body-lg:1.25rem; --text-body:1.0625rem; --lh-body:1.7; --text-body-sm:.9375rem; --text-caption:.8125rem; --text-micro:.6875rem; --text-price:1.625rem; } } /* ========================================================================== EIXOS CUSTOM PELO GOOGLE FONTS — não precisa de self-host Havia aqui um bloco @font-face de self-host, com a nota de que a API css2 "não entrega FLAR/VOLM". Isso estava ERRADO, e o erro era na requisição: Commissioner:wght@100..900 → fvar com 1 eixo (wght) Commissioner:FLAR,VOLM,slnt,wght@0..100,... → fvar com 4 eixos Verificado baixando os dois .woff2 do fonts.gstatic.com e lendo a tabela fvar com fontTools. A API entrega eixo custom — desde que você o NOMEIE na URL. Pedindo só wght, o Google serve um arquivo com os eixos removidos. A URL correta e completa das quatro famílias está no das páginas e em Branding/sistema-tipografico.md §5. ========================================================================== */