/* ==========================================================================
CONVOQUE — TOKENS v2
--------------------------------------------------------------------------
Fonte única de verdade visual. Nenhum outro arquivo deste projeto escreve
um hexadecimal. Se a cor não está aqui, ela não existe.
Inspiracao: o par frio/quente e a metafora de rede da referencia escolhida
pelo dono (hireup.com.br). NENHUM valor foi copiado: as cores foram
redesenhadas em torno de alvos de contraste medidos par a par.
57 pares verificados: 100% dos pares de TEXTO passam WCAG 2.1 AA (>=4.5:1)
e 100% dos pares de CONTROLE passam 1.4.11 Non-text Contrast (>=3.0:1).
Aliases de compatibilidade no fim do arquivo mantêm base.css e as páginas
antigas funcionando sem edição.
========================================================================== */
/* ── FONTE ──────────────────────────────────────────────────────────────────
Plus Jakarta Sans variavel, auto-hospedada. Arquivo unico, subset `latin`
(U+0000-00FF cobre TODOS os diacriticos do portugues: ã õ ç á é í ó ú â ê
ô à). Medido em 23/09/2026 direto do Google Fonts: 27.348 bytes.
Sem italico: enfase se faz com peso e cor, nao com segundo arquivo. */
/* PENDENTE: auto-hospedar. Hoje a fonte vem do Google Fonts pelo do
HTML — funciona, mas custa 2 preconnect + 1 CSS bloqueante no caminho
critico. Quando o .woff2 estiver em /fonts/, descomente o bloco abaixo,
tire o das paginas, e o ganho e de ~200ms no primeiro carregamento.
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
*/
:root {
color-scheme: light dark;
/* ══ RAMPAS CRUAS ═════════════════════════════════════════════════════
Nunca use uma rampa crua num componente. Use os papeis semanticos. */
/* violeta — primaria */
--roxo-50: #F4F1FE; --roxo-100: #E9E3FD; --roxo-200: #D3C7FA;
--roxo-300: #B7A3F3; --roxo-400: #977BE7; --roxo-500: #7B57D6;
--roxo-600: #663DC0; --roxo-700: #542FA0; --roxo-800: #43267E;
--roxo-900: #2C1A54; --roxo-950: #1B1035;
/* coral-brasa — acento */
--coral-50: #FFF5F0; --coral-100: #FFE6DA; --coral-200: #FFC8AE;
--coral-300: #FBA37A; --coral-400: #F47F4B; --coral-500: #E75F26;
--coral-600: #C54817; --coral-700: #9E3914; --coral-800: #7A2E14;
--coral-900: #521F10;
/* verde — estado positivo do produto (plano ativo, disponivel, aceito) */
--verde-50: #EDFAF2; --verde-100: #D3F2E1; --verde-200: #A6E3C3;
--verde-300: #6ECC9F; --verde-400: #38AE79; --verde-500: #1D8F5F;
--verde-600: #15724C; --verde-700: #115A3D;
/* ardosia azulada — neutros */
--ard-0: #FFFFFF; --ard-25: #FAFAFC; --ard-50: #F4F5F8;
--ard-100: #E9EBF1; --ard-200: #D7DBE4; --ard-300: #B9C0CE;
--ard-400: #838C9E; /* 3.38:1 em branco — limiar de CONTROLE, nunca texto */
--ard-500: #626C7E; /* 5.30:1 em branco — texto secundario claro */
/* 3.45:1 em #11151F — borda de controle no escuro */
--ard-600: #4B5466; --ard-700: #373F4E; --ard-800: #262D3B;
--ard-900: #1B2030; --ard-950: #11151F;
/* off-white quente — fundo de pagina no modo claro */
--creme-50: #F7F4F0; --creme-100: #EFEAE3;
/* feedback */
--err-50: #FDECEA; --err-100: #FBD5D1; --err-300: #F2A29A;
--err-500: #D93A2B; --err-600: #B32A1E; --err-700: #8E2018;
--avi-50: #FFF6E0; --avi-100: #FDEBBE; --avi-300: #F0C25C;
--avi-500: #C98100; --avi-600: #9A6100; --avi-700: #7A4D00;
--inf-50: #E7F2FB; --inf-100: #CCE4F6; --inf-300: #8FC6EC;
--inf-500: #1573B8; --inf-600: #0F5A92; --inf-700: #0B4574;
/* ══ PAPEIS SEMANTICOS — MODO CLARO ═══════════════════════════════════ */
/* superficies */
--fundo: var(--creme-50); /* pagina */
--fundo-2: var(--creme-100); /* faixa alternada */
--fundo-3: var(--ard-50); /* area fria (filtros, tabelas) */
--superficie: var(--ard-0); /* card */
--superficie-alta: var(--ard-0); /* modal, dropdown */
--superficie-marca: var(--roxo-800); /* hero, rodape */
/* linhas */
--borda: var(--ard-200); /* decorativa: divisor, contorno de card */
--borda-forte: var(--ard-300);
--borda-controle: var(--ard-400); /* input/checkbox/switch — 1.4.11 >= 3:1 */
/* texto */
--texto: var(--ard-900); /* 16.21:1 em branco · 14.78:1 em creme */
--texto-suave: var(--ard-500); /* 5.30:1 em branco · 4.83:1 em creme */
--texto-fraco: var(--ard-500); /* alias: NAO existe texto abaixo de AA */
--texto-invertido: var(--ard-0);
--texto-marca: var(--roxo-700); /* 9.17:1 em branco */
/* acao primaria */
--primaria: var(--roxo-600); /* branco sobre ela: 7.01:1 */
--primaria-hover: var(--roxo-700); /* branco sobre ela: 9.17:1 */
--primaria-ativa: var(--roxo-800);
--primaria-suave: var(--roxo-50);
--primaria-texto: var(--roxo-700); /* texto da acao em fundo claro */
/* acento (segunda acao, destaque, selo) */
--acento: var(--coral-400); /* superficie: texto escuro 6.16:1 */
--acento-hover: var(--coral-500);
--acento-solido: var(--coral-600); /* com texto branco: 4.87:1 */
--acento-texto: var(--coral-700); /* 6.89:1 em branco · 6.28:1 em creme */
--acento-suave: var(--coral-100);
/* feedback */
--ok: var(--verde-600); --ok-texto: var(--verde-700); --ok-suave: var(--verde-50);
--erro: var(--err-600); --erro-texto: var(--err-700); --erro-suave: var(--err-50);
--aviso: var(--avi-600); --aviso-texto: var(--avi-700); --aviso-suave: var(--avi-50);
--info: var(--inf-600); --info-texto: var(--inf-700); --info-suave: var(--inf-50);
/* foco — visivel em QUALQUER superficie deste sistema */
--foco: var(--roxo-600); /* 7.01:1 em branco · 6.40:1 em creme */
--anel: 0 0 0 3px color-mix(in srgb, var(--roxo-600) 38%, transparent);
/* a teia */
--teia-fio-a: var(--roxo-300);
--teia-fio-b: var(--coral-400);
--teia-no: var(--roxo-200);
/* ══ TIPOGRAFIA ═══════════════════════════════════════════════════════ */
--fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
--fonte-num: ui-monospace, 'SFMono-Regular', 'Cascadia Mono',
'Segoe UI Mono', 'Roboto Mono', monospace;
/* escala fluida — o publico chega pelo celular 4G barato */
--t-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.80rem);
--t-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.925rem);
--t-md: clamp(0.95rem, 0.91rem + 0.20vw, 1.05rem);
--t-lg: clamp(1.10rem, 1.03rem + 0.35vw, 1.30rem);
--t-xl: clamp(1.35rem, 1.20rem + 0.75vw, 1.75rem);
--t-2xl: clamp(1.70rem, 1.40rem + 1.50vw, 2.50rem);
--t-3xl: clamp(2.10rem, 1.55rem + 2.75vw, 3.50rem);
--t-4xl: clamp(2.40rem, 1.60rem + 4.00vw, 4.25rem); /* so o H1 do hero */
--lh-apertado: 1.10; /* titulos grandes */
--lh-titulo: 1.22; /* h3/h4 e titulos de card */
--lh-corpo: 1.6; /* corpo */
--lh-largo: 1.75; /* paragrafo longo, termos */
--ls-titulo: -0.022em;
--ls-corpo: 0;
--ls-miudo: 0.01em;
--ls-caixa: 0.06em; /* CAIXA ALTA curta (selos) */
--peso-normal: 400; --peso-medio: 500; --peso-semi: 600;
--peso-forte: 700; --peso-extra: 800;
/* ══ ESPACO (escala de 4) ══════════════════════════════════════════════ */
--e-0: 0; --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem;
--e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem;
--e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem; --e-20: 5rem;
--e-24: 6rem; --e-32: 8rem;
--gutter: 1rem; /* respiro lateral obrigatorio no celular */
--largura-max: 1180px;
--largura-texto: 68ch; /* medida de leitura para termos/blog */
--alvo-toque: 44px; /* altura minima de qualquer alvo tocavel */
/* ══ FORMA ═════════════════════════════════════════════════════════════ */
--r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
--r-xl: 22px; --r-2xl: 28px; --r-full: 999px;
/* sombras coloridas na propria ardosia (27,32,48) — cinza puro suja o creme */
--sombra-1: 0 1px 2px rgba(27,32,48,.06);
--sombra-2: 0 2px 8px rgba(27,32,48,.07), 0 1px 2px rgba(27,32,48,.05);
--sombra-3: 0 8px 24px rgba(27,32,48,.09), 0 2px 6px rgba(27,32,48,.05);
--sombra-4: 0 20px 48px rgba(27,32,48,.14), 0 4px 12px rgba(27,32,48,.06);
--sombra-marca: 0 10px 28px rgba(102,61,192,.24);
--transicao: 160ms cubic-bezier(.4,0,.2,1);
--transicao-lenta: 280ms cubic-bezier(.4,0,.2,1);
}
/* ══ MODO ESCURO ═══════════════════════════════════════════════════════════
O sistema decide, MAS data-theme no vence: quem escolheu um modo
nao pode ve-lo trocar sozinho as 18h.
No escuro, a separacao entre superficie e fundo mede apenas 1.13:1 — ou
seja, elevacao por sombra e INVISIVEL. Quem separa e a BORDA. Esta regra
esta codificada abaixo: --borda no escuro e mais clara que a superficie. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) { color-scheme: dark; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) {
--fundo: var(--ard-950);
--fundo-2: var(--ard-900);
--fundo-3: var(--ard-800);
--superficie: var(--ard-900);
--superficie-alta: var(--ard-800);
--superficie-marca: var(--roxo-950);
--borda: var(--ard-700);
--borda-forte: var(--ard-600);
--borda-controle: var(--ard-500); /* 3.45:1 no fundo · 3.06:1 na superficie */
--texto: var(--ard-100); /* 15.31:1 no fundo */
--texto-suave: var(--ard-300); /* 9.99:1 no fundo */
--texto-fraco: var(--ard-300);
--texto-invertido: var(--ard-950);
--texto-marca: var(--roxo-300); /* 8.29:1 no fundo */
--primaria: var(--roxo-500); /* branco sobre ela: 5.03:1 */
--primaria-hover: var(--roxo-400);
--primaria-ativa: var(--roxo-300);
--primaria-suave: var(--roxo-900);
--primaria-texto: var(--roxo-300);
--acento: var(--coral-400); /* texto #11151F sobre ela: 6.94:1 */
--acento-hover: var(--coral-300);
--acento-solido: var(--coral-600);
--acento-texto: var(--coral-300); /* 9.23:1 no fundo */
--acento-suave: var(--coral-900);
--ok: var(--verde-300); --ok-texto: var(--verde-200); --ok-suave: var(--verde-700);
--erro: var(--err-300); --erro-texto: var(--err-300); --erro-suave: #3A1512;
--aviso: var(--avi-300); --aviso-texto: var(--avi-300); --aviso-suave: #362609;
--info: var(--inf-300); --info-texto: var(--inf-300); --info-suave: #0C2439;
--foco: var(--roxo-300); /* 8.29:1 no fundo · 7.37:1 na superficie */
--anel: 0 0 0 3px color-mix(in srgb, var(--roxo-300) 45%, transparent);
--teia-fio-a: var(--roxo-400);
--teia-fio-b: var(--coral-500);
--teia-no: var(--roxo-700);
--sombra-1: 0 1px 2px rgba(0,0,0,.55);
--sombra-2: 0 2px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.45);
--sombra-3: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
--sombra-4: 0 20px 48px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.5);
--sombra-marca: 0 10px 28px rgba(0,0,0,.6);
}}
/* escolha explicita do visitante — mesmos valores, maior especificidade */
:root[data-theme='dark'] {
color-scheme: dark;
--fundo: var(--ard-950); --fundo-2: var(--ard-900); --fundo-3: var(--ard-800);
--superficie: var(--ard-900); --superficie-alta: var(--ard-800);
--superficie-marca: var(--roxo-950);
--borda: var(--ard-700); --borda-forte: var(--ard-600); --borda-controle: var(--ard-500);
--texto: var(--ard-100); --texto-suave: var(--ard-300); --texto-fraco: var(--ard-300);
--texto-invertido: var(--ard-950); --texto-marca: var(--roxo-300);
--primaria: var(--roxo-500); --primaria-hover: var(--roxo-400);
--primaria-ativa: var(--roxo-300); --primaria-suave: var(--roxo-900);
--primaria-texto: var(--roxo-300);
--acento: var(--coral-400); --acento-hover: var(--coral-300);
--acento-solido: var(--coral-600); --acento-texto: var(--coral-300);
--acento-suave: var(--coral-900);
--ok: var(--verde-300); --ok-texto: var(--verde-200); --ok-suave: var(--verde-700);
--erro: var(--err-300); --erro-texto: var(--err-300); --erro-suave: #3A1512;
--aviso: var(--avi-300); --aviso-texto: var(--avi-300); --aviso-suave: #362609;
--info: var(--inf-300); --info-texto: var(--inf-300); --info-suave: #0C2439;
--foco: var(--roxo-300);
--anel: 0 0 0 3px color-mix(in srgb, var(--roxo-300) 45%, transparent);
--teia-fio-a: var(--roxo-400); --teia-fio-b: var(--coral-500); --teia-no: var(--roxo-700);
--sombra-1: 0 1px 2px rgba(0,0,0,.55);
--sombra-2: 0 2px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.45);
--sombra-3: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
--sombra-4: 0 20px 48px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.5);
--sombra-marca: 0 10px 28px rgba(0,0,0,.6);
}
/* ══ COMPATIBILIDADE COM O SISTEMA v1 ══════════════════════════════════════
base.css e as paginas antigas referenciam --laranja-* e --ardosia-*.
Mantidos como alias para nao quebrar nada. NAO USE em codigo novo. */
:root {
--laranja-50: var(--coral-50); --laranja-100: var(--coral-100);
--laranja-200: var(--coral-200); --laranja-300: var(--coral-300);
--laranja-400: var(--coral-400); --laranja-500: var(--coral-500);
--laranja-600: var(--coral-600); --laranja-700: var(--coral-700);
--ardosia-50: var(--ard-50); --ardosia-100: var(--ard-100);
--ardosia-200: var(--ard-200); --ardosia-300: var(--ard-300);
--ardosia-400: var(--ard-400); --ardosia-500: var(--ard-500);
--ardosia-600: var(--ard-600); --ardosia-700: var(--ard-700);
--ardosia-800: var(--ard-800); --ardosia-900: var(--ard-900);
}
/* ══ MOVIMENTO ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}