/* ========================================================================== TOKENS — toda cor, tipo, espaço, forma e tempo do site sai daqui. Camada 1 de 3 (tokens → base → componentes). Sem seletor de componente. ========================================================================== */ /* --- Fontes auto-hospedadas (subset latino, woff2). 51,3 KB no total: nenhuma conexão com terceiro antes do consentimento. --- */ @font-face{ font-family:'Chivo';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/chivo-700.woff2') format('woff2'); } @font-face{ font-family:'Chivo';font-style:normal;font-weight:900;font-display:swap; src:url('../fonts/chivo-900.woff2') format('woff2'); } @font-face{ font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); } @font-face{ font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); } /* Fallback com métrica ajustada: reduz o pulo quando a Chivo chega. */ @font-face{ font-family:'Chivo fallback'; src:local('Arial Bold'),local('Helvetica Bold'); font-weight:700 900; size-adjust:96%;ascent-override:95%;descent-override:24%;line-gap-override:0%; } :root{ /* Cor — papel técnico: branco frio de ambiente clínico + tinta petróleo + água (azul de engenharia) + UMA cor quente, exclusiva do CTA. */ --papel:#F2F6F7; --branco:#FFFFFF; --tinta:#0B222E; /* 15,0:1 sobre o papel */ --tinta-2:#43616F; /* 6,1:1 sobre o papel */ --linha:#D3E0E5; --linha-forte:#B4CBD3; --agua:#0C6E86; /* 5,4:1 sobre o papel */ --agua-clara:#E3F0F4; --breu:#0A1C26; --breu-2:#123243; --gelo:#7FD9E8; /* só dentro do painel escuro */ --acao:#BF4A16; /* CTA — branco sobre ele: 4,99:1 */ --acao-alta:#A63D11; /* hover — 6,4:1 */ /* Tipografia */ --f-display:'Chivo','Chivo fallback','Helvetica Neue',Arial,sans-serif; --f-corpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --t-hero:clamp(2.1rem,5.4vw,3.9rem); --t-h2:clamp(1.6rem,3.4vw,2.5rem); --t-h3:clamp(1.08rem,1.7vw,1.3rem); --t-corpo:clamp(1rem,1.05vw,1.06rem); --t-apoio:.94rem; --t-mini:.82rem; /* Espaço (escala de 4px) */ --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-6:1.5rem; --e-8:2rem; --e-12:3rem; --e-16:4rem; --secao-y:clamp(3.25rem,7vw,5.75rem); --largura:1180px; --gutter:clamp(1.15rem,4vw,2.5rem); /* Forma */ --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px; --sombra-acao:0 10px 24px -14px rgba(191,74,22,.75); /* Movimento */ --d-rapida:150ms; --d-media:300ms; --d-lenta:560ms; --ease:cubic-bezier(.22,.61,.36,1); } /* ========================================================================== TEMAS DE ACESSIBILIDADE — aplicados por atributo no , persistidos em localStorage (preferência do titular, não rastreio). ========================================================================== */ /* Alto contraste: mesmos papéis de cor, valores mais duros. */ html[data-contraste="alto"]{ --papel:#FFFFFF; --branco:#FFFFFF; --tinta:#000000; --tinta-2:#22323C; --linha:#5F7683; --linha-forte:#3C4E58; --agua:#07485D; --agua-clara:#DCEFF5; --acao:#8F3106; --acao-alta:#6E2504; --breu:#000000; --breu-2:#0A1620; --gelo:#9FE8F5; --sombra-acao:none; } /* Se o sistema pedir mais contraste e o visitante não tiver escolhido nada, o site obedece ao sistema. */ @media (prefers-contrast: more){ html:not([data-contraste]){ --tinta:#000000; --tinta-2:#22323C; --linha:#5F7683; --linha-forte:#3C4E58; --agua:#07485D; --acao:#8F3106; --acao-alta:#6E2504; } } /* Escala de fonte: tudo é rem, então mexer na raiz escala o layout inteiro. */ html[data-fonte="1"]{font-size:112.5%} html[data-fonte="2"]{font-size:125%}