/* tokens.css — o contrato entre a base e a marca. * * Estes são os valores neutros. Cada cliente sobrescreve o que precisa em * `marca.css`, carregado DEPOIS deste arquivo. Um protótipo bem feito * sobrescreve cor e tipografia e quase nada mais. * * Regra: token se chama pelo papel que exerce, nunca pela aparência. * `--acento`, não `--rosa`. Trocar de cliente não pode exigir renomear nada. */ :root { /* ---- cor ------------------------------------------------------------- * superficie fundo da página * superficie-2 cartões, blocos que sobem um degrau * superficie-3 estados de hover, faixas alternadas * acento a cor da marca; usada em CTA, links, detalhes * acento-forte variante para hover/foco — mais escura no tema claro * sobre-acento texto/ícone POR CIMA do acento. Ver CONVERSAO.md: este par * precisa passar em AA (4.5:1). É o único ponto onde a marca * cede pra legibilidade. */ --superficie: #ffffff; --superficie-2: #f7f5f3; --superficie-3: #eeeae6; --texto: #1b1a19; --texto-suave: #6b6560; --acento: #8a6a4f; --acento-forte: #6d5340; --sobre-acento: #ffffff; --borda: #e2dcd6; /* ---- tipografia ----------------------------------------------------- * Dois slots. Display carrega a personalidade da marca; texto carrega a * legibilidade. Muitas marcas de PME só têm o display definido — nesse * caso deixe o texto no neutro e não invente. */ --fonte-display: Georgia, "Times New Roman", serif; --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --peso-display: 400; --peso-forte: 600; --entreletras-display: normal; /* escala fluida: encolhe sozinha no celular, sem media query */ --t-xs: 0.78rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); --t-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); --t-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem); --t-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); --linha-titulo: 1.12; --linha-texto: 1.65; /* ---- espaço ---------------------------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem); /* respiro entre seções */ /* Teto de altura para foto dentro de bloco de duas colunas. Sem isto, uma * foto retrato numa coluna de 500px vira 660px de altura e a página passa * a exigir rolagem por conteúdo que já foi lido. */ --foto-alta: clamp(320px, 46vh, 460px); /* ---- forma ----------------------------------------------------------- */ --raio: 10px; --raio-g: 18px; --raio-pilula: 999px; --sombra: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.05); --sombra-g: 0 4px 12px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.09); /* ---- layout ---------------------------------------------------------- */ --largura: 1080px; --largura-estreita: 640px; /* a coluna de um linktree */ --margem-lateral: clamp(1rem, 5vw, 2rem); /* ---- movimento ------------------------------------------------------- */ --transicao: 180ms cubic-bezier(0.2, 0, 0.2, 1); } /* Tema escuro só entra se a marca tiver um. Não herde isto de graça: * marca de confeitaria em dark mode costuma ficar pior, não melhor. * Para ligar, o cliente declara `data-tema="auto"` no . */ @media (prefers-color-scheme: dark) { html[data-tema="auto"] { --superficie: #16151a; --superficie-2: #1e1d24; --superficie-3: #2a2831; --texto: #f2f0ee; --texto-suave: #a49e98; --borda: #33313a; } } @media (prefers-reduced-motion: reduce) { :root { --transicao: 1ms; } }