/* ============================================================ KIT UNIVERSAL · tokens.css · v1.19.1 — 2026-09-24 GERADO por ferramentas/gerar.mjs a partir do tokens.json (W3C DTCG, rascunho do grupo comunitário). ⛔ NÃO EDITE À MÃO: mudou no JSON, roda o gerador. Aqui mora o NÚCLEO (estrutura) e o CONTRATO por referência: os papéis de cor e de tipografia são preenchidos pelo pacote vestido (pacotes.css, data-pacote-cor / data-pacote-tipo / data-escala na raiz). Sem pacote, a página avisa — não finge. ============================================================ */ :root { /* NÚCLEO · espaço (base 4; fora da escala só token nomeado) */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px; --e9: 48px; --e10: 64px; --e11: 80px; --e12: 96px; --e13: 128px; --gutter: var(--e4); /* o ÚNICO padding lateral do leitor; ≥768px: gutter-largo */ --ritmo-texto: var(--e4); --ritmo-bloco: var(--e7); --respiro-mobiliario: var(--e5); /* o vão mínimo da mobília fixa ao conteúdo (R-59) */ --pilha-espera-voz: 3000ms; /* o guarda da voz: quanto a pilha espera a família medida (R-62) */ --respiro-secao: var(--e9); /* ≥768px: respiro-secao */ /* NÚCLEO · raio, fio, opacidade, empilhamento */ --raio-controle: 6px; --raio-cartao: 8px; --raio-pilula: 999px; --fio: 1px; --fio-forte: 2px; --opacidade-desabilitado: 0.5; --opacidade-legenda-repouso: 0.7; --opacidade-marca-dagua: 0.08; --opacidade-logo-repouso: 0.7; /* o tom contido da parede de logos — 1 no hover/foco (R-73…R-76) */ --z-base: 0; --z-mobiliario: 10; --z-instrumento: 100; --z-veu: 1000; /* NÚCLEO · logo — as famílias de forma da parede de terceiros, pelo eixo do peso visual (degraus da escala: mudou o degrau, muda o token) */ --logo-altura-horizontal: var(--e7); --logo-lado-quadrado: var(--e9); --logo-largura-vertical: var(--e7); /* DEMONSTRAÇÃO · números das páginas-demo do próprio kit (R-28: nascer no JSON com nome e porquê) */ --demo-colapso-galeria: 420px; --demo-colapso-estreito: 340px; --demo-min-papeis: 150px; --demo-min-prop: 120px; --demo-min-mola: 260px; --demo-min-proporcao: 140px; --demo-altura-css-gerado: 520px; /* NÚCLEO · sombra — a tinta do pacote diluída (reserva: preto), composta no @supports abaixo */ --sombra-1: 0 2px 8px rgb(0 0 0 / 12%); --sombra-2: 0 12px 32px rgb(0 0 0 / 20%); /* NÚCLEO · degradê — o fundo editorial (to bottom in oklch; as paradas são papéis do contrato e trocam de tema junto com o pacote) */ --degrade-editorial: linear-gradient(to bottom in oklch, var(--fundo) 0%, var(--superficie) 100%); --degrade-palco: linear-gradient(to bottom in oklch, var(--fundo) 0%, var(--acao) 100%); --degrade-altura-minima: 100svh; /* a pegadinha da rolagem: cobre o documento, nunca preso à tela (R-67) */ /* NÚCLEO · transparencia — o alfa de superfície em percentual (NÃO é opacidade de elemento: escurece o fundo e deixa a tinta inteira); os derivados --veu-fundo/--cartela-fundo nascem AQUI compostos, com reserva declarada — o padrão da sombra */ --alfa-superficie-suave: 12%; --alfa-superficie-cartela: 80%; --alfa-veu: 67%; --veu-fundo: rgb(0 0 0 / 67%); /* reserva: preto, como a sombra — navegador sem color-mix */ --cartela-fundo: var(--superficie); /* reserva: opaca — perde a transparência, não o contraste */ /* NÚCLEO · grade */ --grade-colunas: 4; /* ≥768px: media · ≥1024px: larga */ --grade-largura-max: 1280px; --trilho-doc: 248px; /* NÚCLEO · movimento (12 temas: duração · curva · distância · escala · opacidade · stagger · scroll-reveal · paralaxe · sticky · view-transition · reduced-motion · molas M3) */ --dur-instantaneo: 80ms; --dur-rapido: 150ms; --dur-base: 220ms; --dur-lento: 400ms; --dur-revela: 600ms; --curva-padrao: cubic-bezier(0.2, 0, 0, 1); --curva-entrada: cubic-bezier(0.25, 0.85, 0.4, 1); --curva-saida: cubic-bezier(0.4, 0, 1, 1); --curva-enfase: cubic-bezier(0.16, 1, 0.3, 1); --dist-revela: 24px; --dist-revela-linha: 8px; --escala-aperto: 0.98; --escala-hover-cartao: 1.02; --stagger-passo: 40ms; --stagger-maximo: 240ms; /* NÚCLEO · MOLAS M3 Expressive → Web (curvas oficiais que imitam as molas; m3.material.io/styles/motion/overview/specs, lidas 19/09/2026). 2 esquemas × 2 tipos × 3 velocidades: espacial = move/tamanho/rotação (QUICA no expressivo); efeitos = cor/opacidade (nunca quica). O esquema veste na raiz por data-movimento="expressivo" — os nomes neutros abaixo apontam para o vestido. */ --mov-expressivo-espacial-rapida-curva: cubic-bezier(0.42, 1.67, 0.21, 0.9); --mov-expressivo-espacial-rapida-duracao: 350ms; --mov-expressivo-espacial-base-curva: cubic-bezier(0.38, 1.21, 0.22, 1); --mov-expressivo-espacial-base-duracao: 500ms; --mov-expressivo-espacial-lenta-curva: cubic-bezier(0.39, 1.29, 0.35, 0.98); --mov-expressivo-espacial-lenta-duracao: 650ms; --mov-expressivo-efeitos-rapida-curva: cubic-bezier(0.31, 0.94, 0.34, 1); --mov-expressivo-efeitos-rapida-duracao: 150ms; --mov-expressivo-efeitos-base-curva: cubic-bezier(0.34, 0.8, 0.34, 1); --mov-expressivo-efeitos-base-duracao: 200ms; --mov-expressivo-efeitos-lenta-curva: cubic-bezier(0.34, 0.88, 0.34, 1); --mov-expressivo-efeitos-lenta-duracao: 300ms; --mov-padrao-espacial-rapida-curva: cubic-bezier(0.27, 1.06, 0.18, 1); --mov-padrao-espacial-rapida-duracao: 350ms; --mov-padrao-espacial-base-curva: cubic-bezier(0.27, 1.06, 0.18, 1); --mov-padrao-espacial-base-duracao: 500ms; --mov-padrao-espacial-lenta-curva: cubic-bezier(0.27, 1.06, 0.18, 1); --mov-padrao-espacial-lenta-duracao: 750ms; --mov-padrao-efeitos-rapida-curva: cubic-bezier(0.31, 0.94, 0.34, 1); --mov-padrao-efeitos-rapida-duracao: 150ms; --mov-padrao-efeitos-base-curva: cubic-bezier(0.34, 0.8, 0.34, 1); --mov-padrao-efeitos-base-duracao: 200ms; --mov-padrao-efeitos-lenta-curva: cubic-bezier(0.34, 0.88, 0.34, 1); --mov-padrao-efeitos-lenta-duracao: 300ms; /* nomes NEUTROS — o que o componente consome; sem data-movimento = padrao (fail-closed: sem quique por omissão) */ --mov-espacial-rapida-curva: var(--mov-padrao-espacial-rapida-curva); --mov-espacial-rapida-duracao: var(--mov-padrao-espacial-rapida-duracao); --mov-espacial-base-curva: var(--mov-padrao-espacial-base-curva); --mov-espacial-base-duracao: var(--mov-padrao-espacial-base-duracao); --mov-espacial-lenta-curva: var(--mov-padrao-espacial-lenta-curva); --mov-espacial-lenta-duracao: var(--mov-padrao-espacial-lenta-duracao); --mov-efeitos-rapida-curva: var(--mov-padrao-efeitos-rapida-curva); --mov-efeitos-rapida-duracao: var(--mov-padrao-efeitos-rapida-duracao); --mov-efeitos-base-curva: var(--mov-padrao-efeitos-base-curva); --mov-efeitos-base-duracao: var(--mov-padrao-efeitos-base-duracao); --mov-efeitos-lenta-curva: var(--mov-padrao-efeitos-lenta-curva); --mov-efeitos-lenta-duracao: var(--mov-padrao-efeitos-lenta-duracao); /* NÚCLEO · acessibilidade como número (WCAG 2.2) */ --alvo-toque: 24px; --alvo-conforto: 44px; --foco-espessura: 2px; --foco-offset: 3px; --texto-grande-negrito: 19px; /* NÚCLEO · imagem — proporções como token */ --prop-retrato: 4 / 5; --prop-tres-quatro: 3 / 4; --prop-quadrado: 1 / 1; --prop-paisagem: 3 / 2; --prop-tela: 16 / 9; /* NÚCLEO · tipografia — pesos e tracking do núcleo; famílias, pesos de título e tamanhos vêm do pacote e da escala */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --track-rotulo: 0.08em; --track-corpo: 0; --medida-alvo: 66; /* caracteres por linha; faixa 45–75 */ /* NÚCLEO · a MEDIDA DE LEITURA em px, calculada da largura de caractere MEDIDA da fonte vestida (--ppc-*, pacotes.css) × tamanho do papel (escala) */ --medida-corpo: calc(var(--medida-alvo) * var(--ppc-instrumento) * var(--papel-corpo-tamanho-n) * 1px); --medida-corpo-longo: calc(var(--medida-alvo) * var(--ppc-instrumento) * var(--papel-corpo-longo-tamanho-n) * 1px); --medida-lede: calc(var(--medida-alvo) * var(--ppc-instrumento) * var(--papel-lede-tamanho-n) * 1px); --medida-meta: calc(var(--medida-alvo) * var(--ppc-instrumento) * var(--papel-meta-tamanho-n) * 1px); --medida-citacao: calc(var(--medida-alvo) * var(--ppc-voz-italico) * var(--papel-h3-tamanho-n) * 1px); /* NÚCLEO · os 12 papéis de texto: família, peso e tracking (o tamanho e a entrelinha vêm da escala vestida) */ --papel-display-xl-familia: var(--voz); --papel-display-xl-peso: var(--peso-display); --papel-display-xl-tracking: var(--track-display); --papel-display-l-familia: var(--voz); --papel-display-l-peso: var(--peso-display); --papel-display-l-tracking: var(--track-display); --papel-h1-familia: var(--voz); --papel-h1-peso: var(--peso-display); --papel-h1-tracking: var(--track-display); --papel-h2-familia: var(--voz); --papel-h2-peso: var(--peso-titulo); --papel-h2-tracking: var(--track-titulo); --papel-h3-familia: var(--voz); --papel-h3-peso: var(--peso-titulo); --papel-h3-tracking: var(--track-titulo); --papel-lede-familia: var(--instrumento); --papel-lede-peso: var(--peso-normal); --papel-lede-tracking: var(--track-corpo); --papel-corpo-longo-familia: var(--instrumento); --papel-corpo-longo-peso: var(--peso-normal); --papel-corpo-longo-tracking: var(--track-corpo); --papel-corpo-familia: var(--instrumento); --papel-corpo-peso: var(--peso-normal); --papel-corpo-tracking: var(--track-corpo); --papel-meta-familia: var(--instrumento); --papel-meta-peso: var(--peso-normal); --papel-meta-tracking: var(--track-corpo); --papel-rotulo-familia: var(--instrumento); --papel-rotulo-peso: var(--peso-forte); --papel-rotulo-tracking: var(--track-rotulo); --papel-navegacao-familia: var(--instrumento); --papel-navegacao-peso: var(--peso-medio); --papel-navegacao-tracking: var(--track-corpo); --papel-dado-familia: var(--dado); --papel-dado-peso: var(--peso-normal); --papel-dado-tracking: var(--track-corpo); } @media (min-width: 768px) { :root { --gutter: var(--e6); --respiro-secao: var(--e11); --grade-colunas: 8; } } @media (min-width: 1024px) { :root { --grade-colunas: 12; } } @supports (color: color-mix(in srgb, red, blue)) { :root { --sombra-1: 0 2px 8px color-mix(in srgb, var(--texto) 12%, transparent); --sombra-2: 0 12px 32px color-mix(in srgb, var(--texto) 20%, transparent); --veu-fundo: color-mix(in srgb, var(--texto) var(--alfa-veu), transparent); --cartela-fundo: color-mix(in srgb, var(--superficie) var(--alfa-superficie-cartela), transparent); } } /* reserva: navegador sem interpolação especificável — o degradê funciona, só o meio menos vivo */ @supports not (background-image: linear-gradient(in oklch, red, blue)) { :root { --degrade-editorial: linear-gradient(to bottom, var(--fundo) 0%, var(--superficie) 100%); --degrade-palco: linear-gradient(to bottom, var(--fundo) 0%, var(--acao) 100%); } } /* ---------- os três estados de tema: sistema · claro fixado · escuro fixado (light-dark() lê o color-scheme do elemento) ---------- */ :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* ---------- MOLAS · troca de esquema inteiro NA RAIZ — nenhum componente muda (o esquema não faz parte do nome do token, como no M3) ---------- */ [data-movimento="expressivo"] { --mov-espacial-rapida-curva: var(--mov-expressivo-espacial-rapida-curva); --mov-espacial-rapida-duracao: var(--mov-expressivo-espacial-rapida-duracao); --mov-espacial-base-curva: var(--mov-expressivo-espacial-base-curva); --mov-espacial-base-duracao: var(--mov-expressivo-espacial-base-duracao); --mov-espacial-lenta-curva: var(--mov-expressivo-espacial-lenta-curva); --mov-espacial-lenta-duracao: var(--mov-expressivo-espacial-lenta-duracao); --mov-efeitos-rapida-curva: var(--mov-expressivo-efeitos-rapida-curva); --mov-efeitos-rapida-duracao: var(--mov-expressivo-efeitos-rapida-duracao); --mov-efeitos-base-curva: var(--mov-expressivo-efeitos-base-curva); --mov-efeitos-base-duracao: var(--mov-expressivo-efeitos-base-duracao); --mov-efeitos-lenta-curva: var(--mov-expressivo-efeitos-lenta-curva); --mov-efeitos-lenta-duracao: var(--mov-expressivo-efeitos-lenta-duracao); } /* ---------- base obrigatória ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--papel-corpo-familia); font-size: var(--papel-corpo-tamanho); line-height: var(--papel-corpo-entrelinha); font-optical-sizing: auto; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--link-texto); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: var(--fio); } a:hover { color: var(--acao-hover); } :focus-visible { outline: var(--foco-espessura) solid var(--foco); outline-offset: var(--foco-offset); } /* foco NUNCA invisível (2.4.7 / 2.4.13) */ ::selection { background: var(--acao); color: var(--sobre-acao); } .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pular { position: absolute; left: -9999px; top: 0; z-index: var(--z-veu); padding: var(--e2) var(--e4); background: var(--texto); color: var(--fundo); font-weight: var(--peso-forte); } .pular:focus { left: var(--e3); top: var(--e3); } /* ---------- FAIL-CLOSED: sem pacote, a página avisa em vez de fingir (cores de sistema, sem hex) ---------- */ html:not([data-pacote-cor]) body::before { content: "KIT UNIVERSAL — nenhum pacote de COR vestido. Ponha data-pacote-cor=\"geist|radix|tailwind|material|apple|referencia\" na raiz e carregue pacotes.css."; display: block; padding: var(--e3) var(--e4); margin: 0 0 var(--e4); background: Canvas; color: CanvasText; border: var(--fio-forte) solid CanvasText; font: 600 14px/1.4 system-ui, sans-serif; } html:not([data-pacote-tipo]) body::after, html:not([data-escala]) body::after { content: "KIT UNIVERSAL — pacote de TIPOGRAFIA (data-pacote-tipo=\"geist|inter|plex|google|source|fraunces\") ou ESCALA (data-escala=\"carbon|material|apple|editorial\") não vestidos. Sem eles não há tamanho nem família — o kit não inventa."; display: block; padding: var(--e3) var(--e4); margin: var(--e4) 0 0; background: Canvas; color: CanvasText; border: var(--fio-forte) solid CanvasText; font: 600 14px/1.4 system-ui, sans-serif; } /* ---------- reduced-motion da base: o resto vive em cada componente, por REMOÇÃO ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Regras que token nenhum dispensa ————————————————————————————— · alvo de toque mínimo 24×24px CSS (2.5.8); botões e itens de menu a 44px · medida de leitura 45–75 caracteres, alvo 66 — em px por caixa e por FONTE (--medida-*); ch é PROIBIDA · reflow: sem rolagem em dois eixos a 320px (1.4.10); zero estouro em 375px/768px/1024px/1440px/1920px · hover troca a COR (acao → acao-hover), nunca a opacidade; opacidade é só para desabilitado · estado nunca só por cor: selo com texto, fio com rótulo (1.4.1) · o bloco invertido (fundo texto / texto fundo) é o volume mais alto: um por peça · reduced-motion REMOVE por componente, inclusive o estado inicial deslocado · orçamento: LCP ≤ 2500ms · CLS ≤ 0.1 · INP ≤ 200ms (p75) — medir com ferramentas/medir-vitais.mjs; sem medição, sem selo · JS próprio ≤ 50 KB · DOM ≤ 1500 nós */ /* ============================================================ A VESTE DA CASA · pauline-di-paula · v2.0.0 GERADO por ferramentas/vestir-site.mjs a partir de site/veste.json. ⛔ NÃO EDITE À MÃO: mudou no JSON ou no kit, roda o vestidor. Aqui mora SÓ o que o kit universal não tem: os números calibrados desta casa, cada um com nome e porquê no JSON (ponto 01 do kit — «não copie valor à mão»). ============================================================ */ :root { --gutter: var(--e5); /* 20px medidos na página de referência em 20/09/2026, o mesmo valor em qualquer largura; sobrepõe o 16/24 que o kit muda por @media porque quem vem depois manda — continua sendo o ÚNICO padding lateral do leitor. */ --conteudo-max: 1408px; /* a largura em que o conteúdo para, medida na própria página modelo em 20/09/2026 (janela 1463, documento 1448, conteúdo de 20 a 1428); acima dela crescem as margens — não é a largura 1280 do kit, é a da referência que o dono escolheu (lei #071-b). */ --coluna-1: 22%; /* a primeira coluna da página em RAZÃO e não em largura fixa: 22% = 1:4,55 em qualquer largura de tela, dentro da faixa 1:4 a 1:6 que o kit pede no ponto 04; largura fixa dava 1:3,43 a 1024px. */ --dist-revela: 32px; /* V1 · a distância de entrada da revelação por rolagem — medida (a do kit é 24px; esta é a calibrada da cópia nova). */ --falta-fundo: color-mix(in srgb, var(--aviso) 18%, transparent); /* o marcador de conteúdo que falta na guia: o aviso a 18% por trás do texto cheio — o que falta fica VISÍVEL, nunca escondido. */ --entrelinha-manchete: 0.95; /* a entrelinha das manchetes (display-xl e display-l), fechada por ordem dele em 22/09/2026 («as entrelinhas nos títulos tem que ficarem mais coladas»): 0,95 contra os 1,114 que a escala editorial entrega. */ --entrelinha-titulo: 1.05; /* a entrelinha dos títulos de seção (h1 e h2), pela mesma ordem: 1,05 contra os 1,2 da escala. */ --fraunces-soft: 100; /* o eixo SOFT da Fraunces — «the wetness or inkiness of the typeface» (fraunces. */ --fraunces-wonk: 1; /* o eixo WONK da Fraunces — «the substitution of wonky characters» (mesma fonte, mesma data): a inclinação do h, do n e do m herdada da Windsor, e os terminais em bola no itálico. */ --pilha-colar: 5.4%; /* o quanto a SEGUNDA linha da pilha SOBE sobre a anterior, em porcentagem da largura do bloco (proporcional: escala junto com a letra em qualquer tela). */ --pilha-colar-3: 9.6%; /* o mesmo recuo, para a TERCEIRA linha — maior porque ela é a mais curta e portanto a mais ampliada (escala 6,57 contra 3,93), e a reserva da fórmula escala junto: o vão medido entre «No Palco» e «Certo» era 173px, contra 110px do primeiro par. */ --pilha-colar-2: 3.3%; /* o recuo da SEGUNDA linha na pilha de DUAS linhas (a do largo, «Sua Marca No» / «Palco Certo»). */ }