/* ==========================================================================
Somos Atitude — tokens.css
Fonte canônica: "Somos Atitude Design System" (Guia de Marca).
Os valores da camada BRAND são cópia fiel do guia. A camada WEB adiciona
apenas o que a web exige (escala fluida, container mobile, foco visível).
Não editar cores/tipografia aqui sem alterar antes o Guia de Marca.
========================================================================== */
/* --------------------------------------------------------------------------
Fontes — Poppins (display) + DM Sans (corpo)
As páginas carregam via no (preconnect + display=swap):
Evitamos @import aqui porque ele serializa o download e atrasa o LCP —
crítico em páginas de tráfego pago.
-------------------------------------------------------------------------- */
:root{
/* === BRAND · Cores (Guia de Marca / tokens/colors.css) =================== */
--sa-sky:#01AFFE;
--sa-azure:#0071FD;
--sa-navy:#10248A;
--sa-ink-navy:#071A5C;
--sa-abyss:#050F3A; /* fundo mais profundo do gradiente hero */
--sa-cobalt:#0B47C9; /* ponto claro do gradiente radial */
--sa-ink:#26303C;
--sa-slate:#5B6472;
--sa-muted:#98A2B3;
--sa-line:#E4EAF2;
--sa-cloud:#F4F7FB;
--sa-white:#FFFFFF;
--sa-success:#0F9D58;
--sa-warning:#E5720B;
--sa-danger:#E5484D;
--sa-gradient:linear-gradient(120deg,#01AFFE 0%,#0071FD 55%,#10248A 100%);
--sa-gradient-bright:linear-gradient(135deg,#01AFFE,#0071FD);
/* Gradiente de CTA: mesma leitura ciano->azul do guia, com as paradas
deslocadas para que o texto branco fique sobre a faixa azul/cobalto.
Sobre o ciano puro (#01AFFE) o branco dá 2,45:1 e reprova em WCAG AA. */
--sa-gradient-cta:linear-gradient(120deg,#01AFFE -20%,#0071FD 30%,#0B47C9 100%);
--sa-gradient-deep:radial-gradient(900px 500px at 20% 0%,#0B47C9 0%,#071A5C 60%,#050F3A 100%);
/* Papéis semânticos */
--sa-brand:var(--sa-azure);
--sa-brand-strong:var(--sa-navy);
--sa-accent:var(--sa-sky);
--text-heading:var(--sa-ink);
--text-body:var(--sa-slate);
--text-muted:var(--sa-muted);
--surface:var(--sa-white);
--surface-muted:var(--sa-cloud);
--surface-dark:var(--sa-ink-navy);
--border:var(--sa-line);
/* === BRAND · Tipografia ================================================= */
--sa-font-display:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--sa-font-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--sa-weight-regular:400;
--sa-weight-medium:500;
--sa-weight-semibold:600;
--sa-weight-bold:700;
--sa-weight-black:800;
/* Escala de referência do guia (valores desktop) */
--sa-text-display:64px;
--sa-text-h1:42px;
--sa-text-h2:28px;
--sa-text-h3:20px;
--sa-text-lg:18px;
--sa-text-body:16px;
--sa-text-sm:14px;
--sa-text-caption:13px;
--sa-leading-tight:1.1;
--sa-leading-snug:1.25;
--sa-leading-normal:1.6;
--sa-tracking-tight:-0.02em;
--sa-tracking-caps:0.12em;
/* === BRAND · Espaçamento / raios / sombras ============================== */
--sa-space-1:4px; --sa-space-2:8px; --sa-space-3:12px; --sa-space-4:16px;
--sa-space-5:24px; --sa-space-6:32px; --sa-space-7:48px; --sa-space-8:64px;
--sa-space-9:96px;
--sa-container:1080px;
--sa-gutter:40px;
--sa-radius-sm:9px;
--sa-radius-md:12px;
--sa-radius-lg:18px;
--sa-radius-xl:24px;
--sa-radius-pill:100px;
--sa-shadow-sm:0 2px 8px rgba(16,36,138,0.06);
--sa-shadow-md:0 8px 28px rgba(16,36,138,0.08);
--sa-shadow-card:0 8px 28px rgba(16,36,138,0.06);
--sa-shadow-glow:0 12px 30px rgba(1,175,254,0.35);
/* === WEB · Escala fluida (mobile-first; teto = escala do guia) ========== */
--fs-display:clamp(34px,7.4vw,64px);
--fs-h1:clamp(28px,5.6vw,42px);
--fs-h2:clamp(23px,3.6vw,28px);
--fs-h3:clamp(18px,2.2vw,20px);
--fs-lead:clamp(17px,2.2vw,20px);
--fs-lg:18px;
--fs-body:16px;
--fs-sm:14px;
--fs-caption:13px;
/* === WEB · Layout ======================================================= */
--gutter:20px; /* mobile; cresce até --sa-gutter no desktop */
--section-y:clamp(48px,8vw,96px);
--header-h:64px;
/* === WEB · Motion (guia: transições curtas, fade + translate leve) ====== */
--ease:cubic-bezier(.2,.6,.3,1);
--dur:.15s;
--dur-md:.25s;
}
@media (min-width:768px){
:root{ --gutter:32px; --header-h:76px; }
}
@media (min-width:1080px){
:root{ --gutter:var(--sa-gutter); }
}
@media (prefers-reduced-motion:reduce){
:root{ --dur:0s; --dur-md:0s; }
}
/* ==========================================================================
Reset enxuto + base
========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:var(--surface);
color:var(--text-body);
font-family:var(--sa-font-body);
font-size:var(--fs-body);
line-height:var(--sa-leading-normal);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
h1,h2,h3,h4{
margin:0 0 var(--sa-space-4);
font-family:var(--sa-font-display);
color:var(--text-heading);
line-height:var(--sa-leading-snug);
letter-spacing:var(--sa-tracking-tight);
text-wrap:balance;
}
h1{ font-size:var(--fs-h1); font-weight:var(--sa-weight-black); line-height:var(--sa-leading-tight); }
h2{ font-size:var(--fs-h2); font-weight:var(--sa-weight-bold); }
h3{ font-size:var(--fs-h3); font-weight:var(--sa-weight-semibold); }
h4{ font-size:var(--fs-lg); font-weight:var(--sa-weight-semibold); }
p{ margin:0 0 var(--sa-space-4); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:var(--sa-brand); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--sa-brand-strong); }
img,svg,video{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0 0 var(--sa-space-4); padding-left:1.25em; }
li{ margin-bottom:var(--sa-space-2); }
strong,b{ font-weight:var(--sa-weight-bold); color:var(--text-heading); }
button,input,select,textarea{ font:inherit; color:inherit; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--sa-azure);
outline-offset:2px;
border-radius:var(--sa-radius-sm);
}
::selection{ background:rgba(1,175,254,.22); color:var(--sa-ink-navy); }
/* ==========================================================================
Utilitários de layout
========================================================================== */
.sa-container{
width:100%;
max-width:calc(var(--sa-container) + var(--gutter) * 2);
margin-inline:auto;
padding-inline:var(--gutter);
}
.sa-container--narrow{ max-width:calc(760px + var(--gutter) * 2); }
.sa-section{ padding-block:var(--section-y); }
.sa-section--muted{ background:var(--surface-muted); }
.sa-section--dark{ background:var(--sa-gradient-deep); color:rgba(255,255,255,.82); }
.sa-section--dark h1,
.sa-section--dark h2,
.sa-section--dark h3,
.sa-section--dark h4,
.sa-section--dark strong{ color:var(--sa-white); }
.sa-section__head{ max-width:680px; margin:0 auto var(--sa-space-7); text-align:center; }
.sa-section__head p{ font-size:var(--fs-lead); }
.sa-stack > * + *{ margin-top:var(--sa-space-4); }
.sa-visually-hidden{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sa-skip-link{
position:absolute; left:var(--gutter); top:-100px; z-index:200;
background:var(--sa-white); color:var(--sa-ink-navy);
padding:var(--sa-space-3) var(--sa-space-4);
border-radius:var(--sa-radius-md); box-shadow:var(--sa-shadow-md);
font-weight:var(--sa-weight-bold);
}
.sa-skip-link:focus{ top:var(--sa-space-3); }
[hidden]{ display:none !important; }