/* ========================================================================== Essence Tântric — tokens.css Fonte única dos valores visuais do site novo. Um valor = um token. Nenhuma vista escreve cor, tamanho, espaço, raio ou sombra à mão. Autor: DESIGNER (Coneki) · 19/09/2026 · idioma da conta: pt-PT Revisão de 24/09/2026 (DEVOPS, a pedido do dono: «mais elegância»): a família de texto passa de Overpass para Jost, entra o Cormorant itálico como acento editorial e o display ganha o degrau 300. Nenhum papel de cor muda. Instalação no Laravel: public/css/tokens.css + public/fontes/*.woff2 (o caminho das fontes é relativo: css/../fontes/) ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTES — auto-hospedadas (WOFF2, licença OFL), eixo variável wght. Zero pedidos a fonts.googleapis.com / fonts.gstatic.com (RGPD + peso). Ficheiros servidos de /fontes/; subset latin cobre a acentuação portuguesa (ã ç õ á â à é ê í ó ô ú), latin-ext fica como rede de segurança. -------------------------------------------------------------------------- */ @font-face { font-family: 'Cormorant'; src: url('../fontes/cormorant-var-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant'; src: url('../fontes/cormorant-var-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant itálico: a mesma família noutra voz. Não é ornamento — é o acento editorial do site (a segunda linha do herói e as citações). Sem ele, o navegador falsificaria o itálico inclinando o romano, e vê-se. */ @font-face { font-family: 'Cormorant'; src: url('../fontes/cormorant-var-italic-latin.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant'; src: url('../fontes/cormorant-var-italic-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Jost no lugar do Overpass (24/09/2026). O Overpass nasceu de sinalética de autoestrada: é uma grotesca de serviço, e lia-se como tal ao lado do Cormorant. O Jost é geométrico de traço fino, alto contraste de forma com o serifado, e a letra maiúscula espaçada dele é o que dá o tom de casa de spa. Mesmo número de ficheiros, mesmo subset, mesmo eixo variável. */ @font-face { font-family: 'Jost'; src: url('../fontes/jost-var-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; src: url('../fontes/jost-var-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------------ 2. COR — 6 papéis de marca + 3 neutros derivados. Paleta de marca preservada do legado: bordéus, dourado, creme, tinta. Saem as cores de plugin do legado (azul #1863DC, roxo #605BE5, laranja #DD2C00, amarelo #FFFF00, verde #25D466) e o dourado de herói #C6A75E (era um segundo dourado sem papel: deriva de cor). Todos os pares medidos estão na tabela do design-contract (§3.4). ------------------------------------------------------------------------ */ --cor-fundo: #FFFFFF; /* papel da página */ --cor-superficie: #F2E4D8; /* creme: faixas e cartões */ --cor-texto: #111111; /* tinta: todo o texto corrido */ --cor-texto-suave: #6B4A45; /* texto secundário: 7,80:1 no papel · 6,27:1 no creme */ --cor-marca: #720917; /* bordéus: identidade, ação, títulos */ --cor-acento: #D4AF37; /* dourado: superfície e fio. NUNCA texto pequeno sobre claro (2,10:1) */ /* derivados dos papéis acima (não são cores novas da marca) */ --cor-borda: #D9C6B4; /* aresta decorativa de cartão e faixa */ --cor-borda-controlo: #7D6A5E; /* aresta de campo de formulário: 5,13:1 no papel · 4,12:1 no creme (mínimo 3:1) */ --cor-fundo-escuro: #111111; /* rodapé e barra legal: o preto #000000 do legado passa a tinta (um só preto) */ --cor-texto-escuro: #F2E4D8; /* 15,16:1 sobre tinta */ --cor-texto-escuro-suave: #B9A99B; /* 8,28:1 sobre tinta */ --cor-foco: #720917; /* anel de foco em fundo claro */ --cor-foco-escuro: #D4AF37; /* anel de foco em fundo escuro: 8,98:1 */ /* Cor funcional do WhatsApp (27/09/2026). Não é uma cor da paleta da casa: é a cor do canal, e existe por uma razão medida. O verde de marca do WhatsApp (#25D366) com texto branco mede 1,98:1 — reprovado, e é por isso que o botão do próprio WhatsApp se lê mal. O degrau escuro da mesma família resolve-o: #0F7A5F mede 5,29:1 com branco, 4,25:1 sobre o creme e 3,57:1 de aresta sobre a tinta (mínimo de 3:1 para componente). É o único valor novo deste ficheiro desde 24/09/2026 e o motivo é de leitura, não de gosto. */ --cor-conversa: #0F7A5F; /* ------------------------------------------------------------------------ 3. ESPAÇO — escala única, base 4. Nada fora desta lista. ------------------------------------------------------------------------ */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px; --esp-20: 80px; --esp-24: 96px; --esp-32: 128px; /* respiro vertical de secção: degraus fixos por breakpoint. O valor é fixo (não clamp) por uma razão medida: o portão de composição não resolve clamp() em padding e acusa "filhos encostados" que não existem. */ --respiro-seccao: 64px; /* telemóvel (mínimo do estúdio: 64px) */ --respiro-seccao-faixa: 48px; --respiro-bloco: 32px; /* ------------------------------------------------------------------------ 4. TIPOGRAFIA — 2 famílias, 4 pesos (300–600), 6 degraus por largura. Degrau mínimo entre degraus de título: 1,25:1 (medido em §6.3 do contrato). Mínimos: prosa 17px (telemóvel) / 19px (desktop) · rótulo e nota 13px. ------------------------------------------------------------------------ */ --fonte-display: 'Cormorant', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --fonte-texto: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fs-legenda: 13px; /* rótulo, etiqueta, nota legal */ --fs-corpo: clamp(17px, 0.5vw + 15px, 19px); /* 17px a 390 · 19px a 1440 */ --fs-h3: 24px; --fs-h2: 30px; --fs-h1: 38px; --fs-display: 48px; /* só no herói da home */ /* O degrau 300 existe para os títulos grandes. Num serifado de traço fino, o peso é o que separa «elegante» de «encorpado»: a 11rem o 400 fecha os vazios e a mancha escurece; o 300 abre-os. Abaixo de 24px não se usa. */ --peso-leve: 300; --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --altura-linha-display: 1.05; --altura-linha-titulo: 1.2; --altura-linha-corpo: 1.6; /* -0,02em apertava demais o Cormorant, que já é estreito de desenho: a 11rem as hastes encostavam. -0,012em é o mesmo gesto sem o defeito. */ --tracking-display: -0.012em; --tracking-legenda: 0.08em; /* medida de linha: teto de prosa. Medida a 24/09/2026, já em Jost, no que está renderizado (`tools/mede-linha-2026-09-24.py`): 47ch davam 517px e 49,7 caracteres por linha — o fundo da faixa 45–75, quando com o Overpass davam 64–67 (o `ch` é a largura do zero e mudou de família para família). Com 56ch a prosa mede 616px e 68,9 caracteres por linha cheia a 1440, e com 46ch a entradinha mede 506px e 58,5. Faixa-alvo: 45–75. */ --medida-prosa: 56ch; --medida-intro: 46ch; /* ------------------------------------------------------------------------ 5. RAIO — 4 degraus (o legado tinha 9, e o mesmo cartão com 30 e 20px) ------------------------------------------------------------------------ */ --raio-fio: 2px; --raio-controlo: 8px; --raio-cartao: 16px; --raio-pilula: 999px; /* ------------------------------------------------------------------------ 6. SOMBRA — 3 níveis. Regra dura: aresta E sombra difusa larga no mesmo elemento é a assinatura nº 1 de layout gerado por máquina. Escolhe-se um. ------------------------------------------------------------------------ */ --sombra-0: none; --sombra-1: 0 1px 2px rgba(17, 17, 17, 0.06); --sombra-2: 0 8px 24px rgba(17, 17, 17, 0.1); /* ------------------------------------------------------------------------ 7. GRELHA ------------------------------------------------------------------------ */ --largura-conteudo: 1200px; --largura-prosa: 720px; --gutter: var(--esp-4); --gutter-desktop: var(--esp-8); --colunas-cartoes-telemovel: 1; --colunas-cartoes-medio: 2; --colunas-cartoes-desktop: 3; /* ------------------------------------------------------------------------ 8. CONTROLO, ALVOS E FOCO ------------------------------------------------------------------------ */ --altura-controlo: 48px; --alvo-minimo: 24px; /* WCAG 2.5.8 */ --foco-largura: 2px; --foco-deslocamento: 2px; /* ------------------------------------------------------------------------ 9. MOVIMENTO — o legado não tinha linguagem de movimento para preservar. Define-se uma, mínima e respeitadora de prefers-reduced-motion. ------------------------------------------------------------------------ */ --dur-rapida: 160ms; --dur-media: 240ms; --ease-padrao: cubic-bezier(0.2, 0.7, 0.3, 1); }