/* =========================================================================== LUCREI — DESIGN SYSTEM Fonte da verdade de cor, tipografia, raio e sombra do site e do aplicativo. Base: LUCREI-manual-da-marca.pdf (Atlântico + Menta, setembro/2026). Criado em 17/09/2026. COMO USAR 1. Esta folha entra PRIMEIRO em toda página (antes de lucrei.css, v5.css, dashboard-atlantico.css). Ela só declara tokens e primitivas .ds-*; não tem regra que dispute seletor com as folhas antigas. 2. Em CSS novo, use os PAPÉIS (--ds-fundo, --ds-texto, --ds-acao...). Nunca escreva hex na mão e nunca use as PRIMITIVAS direto num componente. 3. Tema escuro: o aplicativo coloca data-tema="escuro" no . Os papéis viram sozinhos. Nenhuma tela precisa repetir cor por tema. 4. Quer uma cor nova? Ela entra AQUI primeiro e aparece em /design-system. Cor que não está aqui não está na marca. REGRAS DE COR DO MANUAL (não negociáveis) - A menta (#34D6B5) é AÇÃO e PREENCHIMENTO. No claro ela não é texto: texto/linha de marca no claro é o verde #007C68. - Texto sobre menta é sempre Atlântico, nunca branco. - O azul (#3E6FE8) é só apoio e comparação — comparação anda com traço tracejado, nunca sozinha na cor. - Estado sempre vem acompanhado de texto ou ícone; cor não informa sozinha. - No escuro os estados sobem de tom (tokens *-claro abaixo). - Não existe preto na marca. O escuro é o Atlântico. =========================================================================== */ :root{ /* ------------------------------------------------------------------------ A RAMPA. 45 degraus, e mais nenhum: toda cor do site e do aplicativo encaixa em um destes. Fechada em 17/09/2026 medindo as 793 cores que existiam nas folhas (desvio médio ΔE 6,8 — imperceptível). Não usar direto em componente: use os PAPÉIS mais abaixo. ------------------------------------------------------------------------ */ /* NEUTROS — a rampa entre o Atlântico e o branco */ --ds-branco:#FFFFFF; /* superfícies */ --ds-nevoa:#F2F7F8; /* fundo claro (manual) */ --ds-neutro-1:#EAF2F3; --ds-neutro-2:#DFEAEC; --ds-linha:#D7E4E7; /* borda no claro (manual) */ --ds-neutro-3:#CFDEE1; --ds-linha-2:#C3D6DA; --ds-apoio-2:#A8C4CB; --ds-apoio-escuro:#9FBFC7; /* texto de apoio no escuro (7,49:1 no Atlântico) */ --ds-tinta-4:#6B8C96; --ds-tinta-3:#516D78; /* rótulo em peça grande; não usar em 12px */ --ds-tinta-2:#46626C; /* texto secundário medido (6,03:1 na Névoa) */ --ds-atlantico-4:#35545E; --ds-atlantico-3:#28505B; /* borda no escuro */ --ds-atlantico-2:#163944; /* superfície no escuro */ --ds-atlantico:#102C36; /* estrutura e texto (manual) */ /* MENTA e VERDE — ação e marca */ --ds-menta-tenue:#DDF6F0; --ds-menta-4:#A8EEDF; --ds-menta-3:#73E7CF; --ds-menta:#34D6B5; /* ação e marca (manual) */ --ds-menta-hover:#2BC3A4; /* hover da ação (6,58:1 com Atlântico) */ --ds-menta-2:#0E9C82; --ds-verde:#007C68; /* marca e gráfico NO CLARO */ --ds-verde-2:#00604F; --ds-verde-fundo:#06463C; --ds-verde-tinta:#043029; /* verde quase preto: texto no claro (14,4:1) */ /* SUCESSO */ --ds-sucesso-tenue:#DCF2E4; --ds-sucesso-claro:#4FD99A; /* ✓ no escuro */ --ds-sucesso-2:#1E8E5A; --ds-sucesso:#166534; /* ✓ no claro */ --ds-sucesso-fundo:#0E3B20; /* ATENÇÃO */ --ds-atencao-tenue:#FBEEE0; --ds-atencao-claro:#F0AD4E; /* ! no escuro */ --ds-atencao-2:#D07A1A; --ds-atencao:#A64B00; /* ! no claro */ --ds-atencao-fundo:#3B1C00; /* ERRO */ --ds-erro-tenue:#FBE4E6; --ds-erro-claro:#FF8A80; /* × no escuro */ --ds-erro-2:#D94452; --ds-erro:#B42332; /* × no claro */ --ds-erro-fundo:#3D0F14; /* APOIO E COMPARAÇÃO (azul) */ --ds-azul-tenue:#E4EAFC; --ds-azul-claro:#8AA9F5; --ds-azul:#3E6FE8; /* apoio e comparação (manual) */ --ds-azul-2:#2A50B8; --ds-azul-fundo:#132A5C; /* trinca r,g,b de cada degrau — para escrever rgba(var(--ds-x-rgb),.12) */ --ds-branco-rgb:255,255,255; --ds-nevoa-rgb:242,247,248; --ds-neutro-1-rgb:234,242,243; --ds-neutro-2-rgb:223,234,236; --ds-linha-rgb:215,228,231; --ds-neutro-3-rgb:207,222,225; --ds-linha-2-rgb:195,214,218; --ds-apoio-2-rgb:168,196,203; --ds-apoio-escuro-rgb:159,191,199; --ds-tinta-4-rgb:107,140,150; --ds-tinta-3-rgb:81,109,120; --ds-tinta-2-rgb:70,98,108; --ds-atlantico-4-rgb:53,84,94; --ds-atlantico-3-rgb:40,80,91; --ds-atlantico-2-rgb:22,57,68; --ds-atlantico-rgb:16,44,54; --ds-menta-tenue-rgb:221,246,240; --ds-menta-4-rgb:168,238,223; --ds-menta-3-rgb:115,231,207; --ds-menta-rgb:52,214,181; --ds-menta-hover-rgb:43,195,164; --ds-menta-2-rgb:14,156,130; --ds-verde-rgb:0,124,104; --ds-verde-2-rgb:0,96,79; --ds-verde-fundo-rgb:6,70,60; --ds-verde-tinta-rgb:4,48,41; --ds-sucesso-tenue-rgb:220,242,228; --ds-sucesso-claro-rgb:79,217,154; --ds-sucesso-2-rgb:30,142,90; --ds-sucesso-rgb:22,101,52; --ds-sucesso-fundo-rgb:14,59,32; --ds-atencao-tenue-rgb:251,238,224; --ds-atencao-claro-rgb:240,173,78; --ds-atencao-2-rgb:208,122,26; --ds-atencao-rgb:166,75,0; --ds-atencao-fundo-rgb:59,28,0; --ds-erro-tenue-rgb:251,228,230; --ds-erro-claro-rgb:255,138,128; --ds-erro-2-rgb:217,68,82; --ds-erro-rgb:180,35,50; --ds-erro-fundo-rgb:61,15,20; --ds-azul-tenue-rgb:228,234,252; --ds-azul-claro-rgb:138,169,245; --ds-azul-rgb:62,111,232; --ds-azul-2-rgb:42,80,184; --ds-azul-fundo-rgb:19,42,92; /* ------------------------------------------------------------------------ ESCALA SEQUENCIAL — "quanto" (mapa de calor, calendario, mapa do Brasil). UMA matiz (a menta/verde da marca), 5 degraus monotonos em claridade. No escuro a ancora VIRA: pouco = escuro, muito = claro. Cada degrau vem com a tinta que passa 4,5:1 em cima dele (medido): claro 1 12,9 · 2 11,1 · 3 9,8 · 4 7,96 · 5 4,76 escuro 1 6,98 · 2 4,76 · 3 6,58 · 4 7,96 · 5 9,79 --ds-seq-0 e "sem dado" (dia futuro): superficie, com borda tracejada. ------------------------------------------------------------------------ */ --ds-seq-0:var(--ds-neutro-1); --ds-seq-0-ink:var(--ds-tinta-2); --ds-seq-1:var(--ds-menta-tenue);--ds-seq-1-ink:var(--ds-atlantico); --ds-seq-2:var(--ds-menta-4); --ds-seq-2-ink:var(--ds-atlantico); --ds-seq-3:var(--ds-menta-3); --ds-seq-3-ink:var(--ds-atlantico); --ds-seq-4:var(--ds-menta); --ds-seq-4-ink:var(--ds-atlantico); --ds-seq-5:var(--ds-verde); --ds-seq-5-ink:var(--ds-nevoa); /* ------------------------------------------------------------------------ SÉRIE CATEGÓRICA — 12 itens que precisam ser distinguidos entre si (os 12 agentes do Escritório, as fatias de um gráfico de composição). O manual tem 5 cores, não 12: esta série é montada COM os degraus da rampa, 4 famílias x 3 tons, para não inventar cor nova. Ordem importa — itens vizinhos ficam em famílias diferentes. ------------------------------------------------------------------------ */ --ds-cat-1:var(--ds-menta-3); /* #73E7CF */ --ds-cat-2:var(--ds-menta); /* #34D6B5 */ --ds-cat-3:var(--ds-menta-2); /* #0E9C82 */ --ds-cat-4:var(--ds-azul-claro); /* #8AA9F5 */ --ds-cat-5:var(--ds-azul); /* #3E6FE8 */ --ds-cat-6:var(--ds-azul-2); /* #2A50B8 */ --ds-cat-7:var(--ds-sucesso-claro); /* #4FD99A */ --ds-cat-8:var(--ds-sucesso-2); /* #1E8E5A */ --ds-cat-9:var(--ds-sucesso); /* #166534 */ --ds-cat-10:var(--ds-atencao-claro); /* #F0AD4E */ --ds-cat-11:var(--ds-atencao-2); /* #D07A1A */ --ds-cat-12:var(--ds-atencao); /* #A64B00 */ /* cor de fora da marca, protegida: as marcas dos marketplaces */ --ds-ml:#FFE600; /* amarelo do Mercado Livre */ --ds-shopee:#EE4D2D; /* laranja da Shopee */ /* --- PAPÉIS: é isto que o componente usa. Tema claro. ------------------- */ --ds-fundo:var(--ds-nevoa); --ds-superficie:var(--ds-branco); --ds-superficie-2:var(--ds-neutro-1); --ds-superficie-forte:var(--ds-atlantico); /* faixa/cartão escuro no claro */ --ds-borda:var(--ds-linha); --ds-borda-forte:var(--ds-linha-2); --ds-texto:var(--ds-atlantico); --ds-texto-2:var(--ds-tinta-2); --ds-texto-sobre-forte:var(--ds-branco); --ds-marca:var(--ds-verde); /* a marca escrita/linha, no claro */ --ds-acao:var(--ds-menta); /* preenchimento do botão principal */ --ds-acao-2:var(--ds-menta-2); --ds-acao-texto:var(--ds-atlantico); /* texto sobre menta: sempre Atlântico */ --ds-foco:var(--ds-verde); --ds-estado-sucesso:var(--ds-sucesso); --ds-estado-atencao:var(--ds-atencao); --ds-estado-erro:var(--ds-erro); --ds-estado-apoio:var(--ds-azul); /* gráfico */ --ds-serie:var(--ds-verde); /* série principal no claro */ --ds-serie-2:var(--ds-menta-2); --ds-serie-comparacao:var(--ds-azul); /* sempre com traço tracejado */ --ds-grade:var(--ds-linha); /* --- TIPOGRAFIA --------------------------------------------------------- */ --ds-fonte:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --ds-fonte-numero:Inter,ui-sans-serif,system-ui,sans-serif; --ds-fonte-pixel:"VT323",monospace; /* só o terminal do Escritório */ --ds-t-marca:clamp(40px,6vw,112px); /* título de marca: 64–112 */ --ds-t-titulo:32px; /* título de produto: 24–32 */ --ds-t-titulo-2:24px; --ds-t-secao:20px; --ds-t-corpo:16px; /* corpo: 14–18 */ --ds-t-corpo-2:14px; --ds-t-rotulo:12px; /* rótulo: 12–14 */ --ds-peso-rotulo:800; --ds-peso-titulo:800; --ds-peso-apoio:500; --ds-num-xl:46px; --ds-num-l:30px; --ds-num-m:23px; --ds-num-s:17px; /* --- FORMA -------------------------------------------------------------- */ /* escala do SITE (aprovada na v100) */ --ds-r-pill:999px; --ds-r-in:14px; /* peça de dentro */ --ds-r-card:24px; /* cartão */ --ds-r-faixa:32px; /* faixa grande */ /* escala do PAINEL (aprovada na v76) — o dashboard usa --r/--r-in próprios */ --ds-r-card-painel:30px; --ds-r-in-painel:18px; --ds-sombra:0 10px 30px rgba(var(--ds-atlantico-rgb),.07),0 1px 2px rgba(var(--ds-atlantico-rgb),.05); --ds-sombra-forte:0 26px 60px rgba(var(--ds-atlantico-rgb),.14),0 2px 6px rgba(var(--ds-atlantico-rgb),.05); --ds-anel-foco:0 0 0 3px rgba(var(--ds-verde-rgb),.28); --ds-e-1:4px; --ds-e-2:8px; --ds-e-3:12px; --ds-e-4:16px; --ds-e-5:24px; --ds-e-6:32px; --ds-e-7:48px; --ds-tempo:.22s; /* entrada de 180–300 ms (manual) */ --ds-curva:cubic-bezier(.2,.7,.3,1); } /* --- TEMA ESCURO: só os papéis viram. Nenhuma tela repete cor. ----------- */ :root[data-tema="escuro"], [data-tema="escuro"]{ --ds-fundo:var(--ds-atlantico); --ds-superficie:var(--ds-atlantico-2); --ds-superficie-2:var(--ds-atlantico-3); --ds-superficie-forte:var(--ds-atlantico); --ds-borda:var(--ds-atlantico-3); --ds-borda-forte:var(--ds-atlantico-4); --ds-texto:var(--ds-nevoa); --ds-texto-2:var(--ds-apoio-escuro); --ds-texto-sobre-forte:var(--ds-nevoa); --ds-marca:var(--ds-menta); /* no escuro quem marca é a menta */ --ds-foco:var(--ds-menta); --ds-estado-sucesso:var(--ds-sucesso-claro); --ds-estado-atencao:var(--ds-atencao-claro); --ds-estado-erro:var(--ds-erro-claro); --ds-estado-apoio:var(--ds-azul-claro); --ds-serie:var(--ds-menta); /* gráfico no escuro: menta */ --ds-serie-2:var(--ds-menta-3); --ds-serie-comparacao:var(--ds-azul-claro); /* escala sequencial no escuro: degraus proprios, medidos contra o #163944 */ --ds-seq-0:var(--ds-atlantico-2);--ds-seq-0-ink:var(--ds-apoio-escuro); --ds-seq-1:var(--ds-verde-2); --ds-seq-1-ink:var(--ds-nevoa); --ds-seq-2:var(--ds-verde); --ds-seq-2-ink:var(--ds-nevoa); --ds-seq-3:var(--ds-menta-hover);--ds-seq-3-ink:var(--ds-atlantico); --ds-seq-4:var(--ds-menta); --ds-seq-4-ink:var(--ds-atlantico); --ds-seq-5:var(--ds-menta-3); --ds-seq-5-ink:var(--ds-atlantico); --ds-grade:var(--ds-atlantico-3); --ds-sombra:0 10px 30px rgba(var(--ds-atlantico-rgb),.55),0 1px 2px rgba(var(--ds-atlantico-rgb),.45); --ds-sombra-forte:0 26px 60px rgba(var(--ds-atlantico-rgb),.62),0 2px 6px rgba(var(--ds-atlantico-rgb),.45); --ds-anel-foco:0 0 0 3px rgba(var(--ds-menta-rgb),.32); } /* =========================================================================== APELIDOS — os nomes antigos das folhas que já estão no ar. Ficam aqui para a cor vir de UM lugar só. Apontam para PRIMITIVA (valor do tema claro), nunca para papel: as telas do site sao claras e nao aplicam data-tema — com papel, um data-tema="escuro" apagava o texto (medido 1:1). Os nomes mentem por herança (--lime é a menta, --blue é o verde da marca, --roxo é o verde da marca): em CSS novo use os papéis --ds-*, não estes. =========================================================================== */ :root{ /* v5.css / site */ --ink:var(--ds-atlantico); --ink-2:var(--ds-atlantico-2); --panel:var(--ds-atlantico-2); --paper:var(--ds-nevoa); --white:var(--ds-branco); --text:var(--ds-atlantico); --muted:var(--ds-tinta-2); --line:var(--ds-linha); --line-dark:var(--ds-atlantico-3); --lime:var(--ds-menta); --blue:var(--ds-verde); --blue-2:var(--ds-menta-2); --azul:var(--ds-azul); --green:var(--ds-sucesso); --orange:var(--ds-atencao); --red:var(--ds-erro); --shadow:var(--ds-sombra-forte); --radius:var(--ds-r-card); --radius-sm:12px; --radius-md:18px; --radius-lg:24px; --radius-xl:32px; --shadow-soft:var(--ds-sombra); --shadow-strong:var(--ds-sombra-forte); --font-brand:var(--ds-fonte); /* lucrei.css / painel */ --fundo:var(--ds-nevoa); --card:var(--ds-branco); --card2:var(--ds-neutro-1); --gun:var(--ds-neutro-2); --gun2:var(--ds-neutro-3); --linha:var(--ds-linha); --linha2:var(--ds-linha-2); --ink3:var(--ds-tinta-3); --roxo:var(--ds-verde); --roxo-esc:var(--ds-verde-2); --roxo-2:var(--ds-menta-2); --roxo-claro:var(--ds-menta-tenue); --roxo-tinta:#06463C; --verde:var(--ds-sucesso); --verde-esc:#12522B; --verde-tinta:var(--ds-sucesso); --verde-claro:var(--ds-sucesso-tenue); --verde-vivo:#1E8E5A; --lime2:#00866F; --menta:var(--ds-menta); --menta-ink:var(--ds-atlantico); --laranja:var(--ds-atencao); --laranja-claro:var(--ds-atencao-tenue); --amarelo:#8A5A00; --amarelo-claro:#FAF0DE; --ml:var(--ds-ml); --escuro:var(--ds-atlantico); --escuro2:var(--ds-atlantico-2); --escuro-ink:var(--ds-nevoa); --escuro-ink2:var(--ds-linha-2); --fonte:var(--ds-fonte); --fdisp:var(--ds-fonte); --fnum:var(--ds-fonte-numero); --sombra:var(--ds-sombra); --sombra2:var(--ds-sombra-forte); } /* =========================================================================== BASE — o minimo para o navegador nao inventar cor fora da marca. Medido em 17/09/2026: button/input/select nasciam com a cor "buttontext" do navegador, que e PRETO PURO, e pintavam texto e borda em 19 telas. O manual nao tem preto: o controle herda a tinta de quem o contem. Nao mexe em nada que já declare cor — isto e a primeira folha da pagina. =========================================================================== */ button,input,select,textarea{color:inherit} /* a borda do botao e decisao do componente, nao do navegador: sem isto o