/* ==========================================================================
MUNDO SEGURO — Design tokens
Extraídos do Figma "MUNDO SEGURO" (frame Desktop - 1, 1440x6345)
Fonte da verdade: material/figma/tokens.json + material/figma/layout-*.txt
========================================================================== */
:root {
/* ---------- Cores da marca ---------- */
--c-blue: #00b6ff; /* primária — PREENCHIMENTO (botões, tags, barras) */
--c-blue-dark: #0098d6; /* derivada, para hover de preenchimento */
/* Tom escuro da mesma família, 4.5:1 sobre branco, #f3f3f3, #ededed e
#d9d9d9.
USO RESTRITO A HOVER (decisão do cliente, 07/10/2026). Ele não entra em
estado normal: link, rótulo, título e ícone usam --c-blue, --c-navy ou
--c-ink conforme o papel. A exceção é o painel, que é ferramenta interna e
não peça da marca.
Quando o azul da marca não servir como texto (ele tem 2.3:1 sobre branco),
a saída é mudar de mecanismo, e não de tom: fundo diluído, filete ou peso.
Foi o que se fez na coluna destacada da tabela comparativa. */
--c-blue-text: #00668f;
--c-green: #00f46e; /* CTA de conversão / WhatsApp */
--c-green-dark: #00d25e; /* derivada, para hover */
--c-navy: #020c1c; /* logo e superfícies escuras */
--c-navy-frio: #06162e; /* azul-escuro do Figma: texto dos cards e faixas */
/* ---------- Sim / não (listas comparativas) ----------
Um verde e um vermelho no site inteiro: o que cobre × o que não cobre
dos seguros, o que está em dia × o que falta dos perfis, e o que muda
nas cargas. São os tons do Figma (#1f9353 / #da5f5f) escurecidos: os
originais ficam em 3.9:1 e 3.4:1 sobre branco, o que serve ao ícone
(3:1) mas não ao título da coluna, que é texto e pede 4.5:1. Estes dão
5.4:1 e 5.2:1, e valem para os dois. */
--c-sim: #137a45;
--c-nao: #c8354b;
/* ---------- Neutros ---------- */
/* Sem preto puro no site (decisão do cliente, 28/09/2026): o escuro é o
navy da marca. Para texto, a escala é --c-gray (#717171) → --c-ink
(#414141) → --c-navy (#020c1c). */
--c-ink: #414141; /* texto de corpo escuro */
--c-gray: #717171; /* texto secundário */
--c-gray-300: #c2c2c2;
--c-gray-200: #d9d9d9;
--c-gray-150: #ededed; /* fundo da faixa de obrigatórios */
--c-gray-100: #f3f3f3; /* fundo de cards e inputs */
--c-white: #ffffff;
/* ---------- Texto (semântico) ---------- */
--text-strong: var(--c-navy);
--text-body: var(--c-ink);
--text-muted: var(--c-gray);
--text-invert: var(--c-white);
/* ---------- Tipografia ---------- */
--font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Só estes cinco pesos são carregados (ver o do Google Fonts nas
páginas). Pedir 800 ou 900 não traz nada: o navegador engorda o 700 por
conta própria e o resultado é aquele texto borrado e pesado.
--fw-light é o peso do TEXTO DESCRITIVO (decisão do cliente, 01/10/2026):
lead, parágrafo de apoio, texto de cartão. Rótulo, link, pergunta de FAQ e
campo de formulário continuam em 500, porque não são leitura corrida.
O 300 entrou no junto: sem baixar o arquivo, o navegador cai no 400
e a regra não faz efeito nenhum. */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Escala do Figma, fluida entre 360px e 1440px de viewport.
O NOME é o papel que o tamanho tem no Figma, não o valor em px — eles já
variavam com a largura da tela desde o início.
Compactação de 29/09/2026: os TÍTULOS tiveram o topo reduzido (o Figma
desenha em 1440px cheios, e no navegador aquilo comia a dobra). O corpo
(18/16/14/12) ficou intacto: encolher texto de leitura piora a leitura,
e não era ele que pesava. */
--fs-50: clamp(1.875rem, 1.35rem + 2.34vw, 2.75rem); /* 30 → 44 (Figma 50) */
--fs-40: clamp(1.625rem, 1.29rem + 1.46vw, 2.1875rem); /* 26 → 35 (Figma 40) */
--fs-32: clamp(1.375rem, 1.15rem + 1.04vw, 1.75rem); /* 22 → 28 (Figma 32) */
--fs-28: clamp(1.25rem, 1.08rem + 0.73vw, 1.5rem); /* 20 → 24 (Figma 28) */
--fs-24: clamp(1.1875rem, 1.10rem + 0.42vw, 1.375rem); /* 19 → 22 (Figma 24) */
--fs-20: clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem); /* 17 → 19 (Figma 20) */
--fs-18: 1.125rem;
--fs-16: 1rem;
--fs-14: 0.875rem;
--fs-12: 0.75rem; /* só para nota de fonte/crédito — não usar em corpo de texto */
/* Título grande com entrelinha de 1.2 fica apertado e forma um bloco
maciço; 1.25 respira sem crescer a página de forma perceptível. */
--lh-tight: 1.25; /* títulos */
--lh-base: 1.3;
--lh-prose: 1.6; /* parágrafos longos: aberto para leitura */
/* Barlow em corpo grande fica largo demais; um leve aperto dá acabamento.
Só em título — em texto de leitura, tracking negativo atrapalha. */
--ls-titulo: -0.015em;
/* ---------- Espaçamento (base 4) ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-9: 36px; /* gap entre cards "O que fazemos" */
--sp-10: 40px;
--sp-12: 48px;
--sp-14: 56px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* ---------- Raios (Figma: 3,4,8,10,13,15,17,27) ---------- */
--r-btn: 3px;
--r-input: 4px;
--r-card: 8px;
--r-lg: 10px;
--r-xl: 13px;
--r-2xl: 15px;
--r-pill: 999px;
/* ---------- Layout ---------- */
--container: 1080px; /* conteúdo (Figma: 1073px) */
--container-wide: 1280px; /* header e footer */
--gutter: clamp(20px, 5vw, 40px);
/* ---------- Elevação ----------
O Figma não define sombras; usamos elevação mínima só onde a
hierarquia exige (cards do blog sobre fundo branco). */
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.06);
--shadow-hover: 0 2px 6px rgb(0 0 0 / 0.06), 0 12px 28px rgb(0 0 0 / 0.10);
/* ---------- Movimento ----------
--ease é uma saída suave (desacelera no fim), que é o que dá a
sensação de "leve" no hover. --dur-slow fica para imagens e
revelações, onde o movimento longo lê como elegante e não como lento. */
--ease: cubic-bezier(0.33, 0.8, 0.35, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 0.3s;
--dur-slow: 0.6s;
/* ---------- Alturas fixas ----------
O Figma desenha o header em 96px porque mostra o mega-menu aberto.
Em uso real, 84px dá a mesma presença sem comer a dobra. */
--header-h: 84px;
}