/* theme.css — GERADO, não editar à mão.
 * Origem: afiliados-marketplace/estudos/2026-10-vitrine-cestinha/design-system-claude/tokens/
 *         (fonts.css, colors.css, typography.css, spacing.css), copiados sem alteração de valor;
 *         só o caminho da fonte mudou para ../fontes/.
 * Gerado em: 2026-10-23.
 * Valor errado ou faltando: pedir ao afiliados (design system) e gerar de novo. */

/* ---- fonts.css ---- */
/* Manrope variable (OFL) — copiada de ferramentas/carrossel/fontes. Pesos usados: 400, 500, 800. */
@font-face{font-family:"Manrope";src:url("../fontes/Manrope-VF.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}

/* ---- colors.css ---- */
/* Tema único, claro. Não existe versão escura. Contraste medido sobre papel. */
:root{
--papel:#F4F4F1;        /* o único fundo */
--oliva:#373E25;        /* a cor que manda · 10,2:1 sobre papel · 7,2:1 sobre areia */
--carvao:#151412;       /* texto corrido · 16,7:1 sobre papel · 11,8:1 sobre areia */
--cobre:#A97440;        /* SÓ símbolo e "da Lana" do logo · 3,6:1 — nunca texto */
--cobre-claro:#D9A570;  /* cobre sobre oliva (só logo) · 5,1:1 */
--areia:#E2CCAF;        /* superfície rara: no máx. UMA faixa por página */
--pedra:#D8CFC4;        /* fios divisórios, decorativa · oliva sobre pedra 7,3:1 */

/* Aliases semânticos */
--fundo-pagina:var(--papel);
--fundo-respiro:var(--areia);
--texto-titulo:var(--oliva);
--texto-corpo:var(--carvao);
--texto-apoio:var(--carvao);
--texto-link:var(--oliva);
--texto-sobre-oliva:var(--papel);
--botao-fundo:var(--oliva);
--botao-texto:var(--papel);
--botao-fundo-hover:var(--carvao);
--botao-fundo-desativado:var(--pedra);
--botao-texto-desativado:var(--oliva);
--fio-cor:var(--pedra);
--foco-cor:var(--oliva);
--campo-borda:var(--oliva);
--campo-fundo:var(--papel);
}

/* ---- typography.css ---- */
/* Escala web derivada do post 1080 (molde B). Fluida entre 390px (celular) e 1280px (desktop).
   Proporção post → web: celular ≈ 0,386 do post (corpo 44 → 17); desktop amplia títulos (revista).
   Pisos de legibilidade: nada abaixo de 12px. */
:root{
--fonte:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;/* @kind font */
--peso-regular:400;/* @kind font */
--peso-medio:500;/* @kind font */
--peso-forte:800;/* @kind font */

/* post 84/500 → web 32 → 56 */
--tam-titulo:clamp(32px,calc(32px + 24*((100vw - 390px)/890)),56px);/* @kind font */
/* post 62/800 → 24 → 40 */
--tam-nome-produto:clamp(24px,calc(24px + 16*((100vw - 390px)/890)),40px);/* @kind font */
/* post 44/500 lh 1,32 → 17 → 19 */
--tam-corpo:clamp(17px,calc(17px + 2*((100vw - 390px)/890)),19px);/* @kind font */
/* post 40/800 → 15 → 18 */
--tam-numero:clamp(15px,calc(15px + 3*((100vw - 390px)/890)),18px);/* @kind font */
/* post 36/500 → 14 → 16 */
--tam-apoio:clamp(14px,calc(14px + 2*((100vw - 390px)/890)),16px);/* @kind font */
/* post 30/800 caixa alta 0,2em → 12 → 13 */
--tam-sobretitulo:clamp(12px,calc(12px + 1*((100vw - 390px)/890)),13px);/* @kind font */
/* post 22/800 → 12 (piso) */
--tam-rodape:12px;/* @kind font */

--entrelinha-titulo:1.04;/* @kind font */
--entrelinha-nome:1.05;/* @kind font */
--entrelinha-corpo:1.32;/* @kind font */
--entrelinha-apoio:1.35;/* @kind font */
--espaco-titulo:-0.025em;/* @kind font */
--espaco-numero:0.02em;/* @kind font */
--espaco-sobretitulo:0.2em;/* @kind font */
}

/* ---- spacing.css ---- */
:root{
/* margem-post 72/1080 = 6,67% da largura → web */
--margem-pagina:clamp(24px,6.67vw,72px);/* @kind spacing */
--largura-texto:36rem;/* @kind spacing */      /* coluna de leitura */
--largura-pagina:1180px;/* @kind spacing */

--esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:24px;--esp-6:32px;--esp-7:48px;--esp-8:72px;--esp-9:112px;

/* Forma */
--fio:2px;/* @kind spacing */                  /* fio pedra */
--regua:3px;/* @kind spacing */                /* régua do post */
--raio-zero:0px;            /* botões, blocos, cards, campos */
--raio-foto:4px;            /* único raio permitido: foto */
--sombra:none;/* @kind shadow */              /* não há sombra no sistema */

/* Foco */
--foco-largura:3px;/* @kind spacing */
--foco-recuo:3px;/* @kind spacing */

/* Toque */
--alvo-minimo:48px;/* @kind spacing */
--transicao:140ms ease-out;/* @kind other */
}