/* ═══════════════════════════════════════════════════════════════════════════ Digital Tech · TOKENS Só VALORES: cor, tipo, espaço, raio, sombra, tempo. Nenhuma regra de estilo. Se você precisa de um valor novo em qualquer lugar do sistema, ele nasce aqui — nunca cravado direto no CSS de uma página. Componentes ficam em componentes.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ============================================================================ DIGITAL TECH — TOKENS DE DESIGN · v1.0 (06/09/2026) Fonte única de verdade visual. Importe em qualquer projeto da Digital Tech: site institucional, painel do CreditCore, painel do MessageCore. REGRA DE OURO: use os PAPÉIS (--dt-fundo, --dt-acao, --dt-texto…), nunca a paleta crua dentro de um componente. É isso que faz o tema escuro funcionar trocando um bloco só. O tema segue o sistema por padrão. Para forçar: ou ============================================================================ */ /* ══════════════ TEMA CLARO (base) ══════════════ Fundo levemente TINGIDO de violeta — nunca branco estourado. Os cartões são MAIS CLAROS que o fundo, para flutuarem sobre ele. Claro e escuro partilham a mesma família de matiz: é o que faz os dois conversarem. */ :root{ /* marca — hexadecimais da folha de marca (Azul Principal e Secundário) */ --dt-vi:#0b3dff; /* ação — o azul da marca */ --dt-vi-forte:#2563eb; /* hover / realce — o Azul Secundário da folha */ --dt-vi-fraco:#e5eaf5; /* fundo de realce — o Cinza Claro da folha */ --dt-ci:#00c2ff; /* Ciano Inovação — acento secundário, uso raro */ --dt-sobre-acao:#ffffff;/* texto sobre superfície na cor de ação */ --dt-luz-topo:rgba(255,255,255,.85); /* fio de luz na aresta superior */ --dt-luz-borda:rgba(255,255,255,.5); /* semânticos — significado fixo, nunca estética */ --dt-ok:#00a86b; --dt-atencao:#d97706; --dt-erro:#e11d48; --dt-info:#0284c7; /* superfícies e traços */ --dt-fundo:#e8ecf4; /* base tingida de azul — nunca branco estourado */ --dt-fundo-2:#e0e6f1; /* seção alternada */ --dt-sup:#f5f7fc; /* cartão — mais claro que o fundo */ --dt-sup-2:#eef2f9; /* superfície interna */ --dt-borda:#d5dcea; --dt-borda-forte:#bfc9dd; /* texto — preto com matiz violeta, não preto puro */ --dt-texto:#0d1424; --dt-texto-2:#4f5a72; --dt-texto-3:#858ea5; /* comportamento da luz: no claro vira sombra tingida */ --dt-grao:.030; --dt-ambiente:.14; --dt-rail-luz:none; --dt-som:0 2px 14px -6px rgba(13,20,36,.14); --dt-som-alta:0 14px 38px -16px rgba(11,95,255,.32); --dt-anel:0 0 0 3px color-mix(in srgb,var(--dt-vi) 22%,transparent); /* ── BALÃO DE CONVERSA ── Lição do WhatsApp: o balão usa um TINGIMENTO da marca, nunca a marca cheia. Cor saturada em bloco cansa a leitura e grita no escuro. Sem borda: a separação vem do valor da superfície. */ --dt-bolha-eu:#d8e5ff; --dt-bolha-eu-tx:#0b2c66; --dt-bolha-el:#ffffff; --dt-bolha-el-tx:var(--dt-texto); --dt-conversa:#e0e6f1; /* área da conversa: mais funda que os balões */ } /* ══════════════ TEMA ESCURO ══════════════ Mesmos papéis, mesma matiz. A luz aqui BRILHA em vez de projetar sombra. */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --dt-vi:#5b86ff; --dt-vi-forte:#8aa9ff; --dt-vi-fraco:rgba(91,134,255,.15); --dt-ci:#3ad4ff; --dt-sobre-acao:#0b1220; --dt-luz-topo:rgba(255,255,255,.10); --dt-luz-borda:rgba(255,255,255,.05); --dt-ok:#00d68f; --dt-atencao:#ffb224; --dt-erro:#ff5470; --dt-info:#3ad4ff; /* NUNCA preto puro: causa halação (o texto parece brilhar) e cansa a vista. Cinza-escuro TINGIDO da mesma matiz violeta do tema claro — é o que faz os dois serem obviamente o mesmo sistema. Degraus abertos, porque no escuro o olho separa mal tons próximos e superfícies coladas viram uma mancha só. */ --dt-fundo:#0b111f; --dt-fundo-2:#101827; --dt-sup:#182135; --dt-sup-2:#212c45; --dt-borda:#273350; --dt-borda-forte:#3a4a6d; --dt-texto:#eaeff8; --dt-texto-2:#9aa6bf; --dt-texto-3:#6a7691; --dt-grao:.055; --dt-ambiente:.42; --dt-rail-luz:0 0 12px -1px; --dt-som:0 4px 20px -8px rgba(0,0,0,.6); --dt-som-alta:0 0 42px -12px rgba(91,134,255,.45); --dt-bolha-eu:#1c3573; --dt-bolha-eu-tx:#dce8ff; --dt-bolha-el:#212c45; --dt-bolha-el-tx:var(--dt-texto); /* a conversa é levemente mais funda que os painéis laterais — o suficiente para os balões subirem, sem virar um buraco preto no meio da tela */ --dt-conversa:#0e1524; }} :root[data-tema="escuro"]{ --dt-vi:#5b86ff; --dt-vi-forte:#8aa9ff; --dt-vi-fraco:rgba(91,134,255,.15); --dt-ci:#3ad4ff; --dt-sobre-acao:#0b1220; --dt-luz-topo:rgba(255,255,255,.10); --dt-luz-borda:rgba(255,255,255,.05); --dt-ok:#00d68f; --dt-atencao:#ffb224; --dt-erro:#ff5470; --dt-info:#3ad4ff; /* NUNCA preto puro: causa halação (o texto parece brilhar) e cansa a vista. Cinza-escuro TINGIDO da mesma matiz violeta do tema claro — é o que faz os dois serem obviamente o mesmo sistema. Degraus abertos, porque no escuro o olho separa mal tons próximos e superfícies coladas viram uma mancha só. */ --dt-fundo:#0b111f; --dt-fundo-2:#101827; --dt-sup:#182135; --dt-sup-2:#212c45; --dt-borda:#273350; --dt-borda-forte:#3a4a6d; --dt-texto:#eaeff8; --dt-texto-2:#9aa6bf; --dt-texto-3:#6a7691; --dt-grao:.055; --dt-ambiente:.42; --dt-rail-luz:0 0 12px -1px; --dt-som:0 4px 20px -8px rgba(0,0,0,.6); --dt-som-alta:0 0 42px -12px rgba(91,134,255,.45); --dt-bolha-eu:#1c3573; --dt-bolha-eu-tx:#dce8ff; --dt-bolha-el:#212c45; --dt-bolha-el-tx:var(--dt-texto); /* a conversa é levemente mais funda que os painéis laterais — o suficiente para os balões subirem, sem virar um buraco preto no meio da tela */ --dt-conversa:#0e1524; } /* ══════════════ ESTADOS DO DOMÍNIO ══════════════ Os sistemas da Digital Tech vivem de estado. Fixar a cor aqui impede que a mesma situação apareça verde numa tela e azul na outra — o defeito que faz o usuário desconfiar do sistema inteiro. MENSAGEM pendente → enviada → entregue → lida | falhou CANAL ativo · degradado · fora do ar · desativado PROPOSTA em análise · aprovada · recusada · paga */ :root{ --dt-st-pendente: var(--dt-texto-3); --dt-st-enviada: var(--dt-vi-forte); --dt-st-entregue: var(--dt-vi); --dt-st-lida: var(--dt-ok); --dt-st-falhou: var(--dt-erro); --dt-st-degradado:var(--dt-atencao); --dt-st-inativo: var(--dt-borda-forte); } /* ══════════════ TIPOGRAFIA ══════════════ Sora apertada nos títulos (peso e largura dão autoridade), Inter na interface, monoespaçada em todo dado e rótulo técnico. */ :root{ --dt-fonte-tit: Sora, system-ui, sans-serif; --dt-fonte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --dt-fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --dt-t-xs:11px; --dt-t-sm:13px; --dt-t-md:14.5px; --dt-t-base:16px; --dt-t-lg:19px; --dt-t-xl:24px; --dt-t-2xl:30px; --dt-t-3xl:40px; --dt-t-4xl:56px; --dt-tit-tracking:-.042em; /* títulos apertados */ --dt-mono-tracking:.13em; /* rótulos abertos */ } /* ══════════════ ELEVAÇÃO ══════════════ Ter a sombra é fácil; o difícil é a REGRA de quando usar cada nível. Sem regra, cada tela escolhe uma e a bagunça volta. São quatro degraus, e a posição na hierarquia decide — nunca o gosto. 0 · rente nada flutua. Fundo de seção, linha de tabela, item de lista. 1 · apoiado cartão em repouso, campo, barra fixa. É o padrão. 2 · destacado cartão sob o cursor, menu suspenso, dica. 3 · sobreposto modal, gaveta lateral, painel que cobre conteúdo. NO ESCURO a sombra quase não existe (fundo já é escuro): a elevação vem da SUPERFÍCIE ficar mais clara. Por isso cada nível traz também a sua cor. */ :root{ --dt-elev-0:none; --dt-elev-1:var(--dt-som); --dt-elev-2:0 8px 24px -10px rgba(30,25,70,.20); --dt-elev-3:0 26px 60px -22px rgba(30,25,70,.32); --dt-elev-0-sup:var(--dt-fundo); --dt-elev-1-sup:var(--dt-sup); --dt-elev-2-sup:var(--dt-sup); --dt-elev-3-sup:var(--dt-sup); } @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --dt-elev-2:0 8px 26px -12px rgba(0,0,0,.7); --dt-elev-3:0 30px 70px -28px rgba(0,0,0,.85); /* no escuro quem eleva é a superfície clarear, não a sombra escurecer */ --dt-elev-2-sup:#1e2740; --dt-elev-3-sup:#25304d; }} :root[data-tema="escuro"]{ --dt-elev-2:0 8px 26px -12px rgba(0,0,0,.7); --dt-elev-3:0 30px 70px -28px rgba(0,0,0,.85); --dt-elev-2-sup:#1e2740; --dt-elev-3-sup:#25304d; } .dt-elev-0{box-shadow:var(--dt-elev-0);background:var(--dt-elev-0-sup)} .dt-elev-1{box-shadow:var(--dt-elev-1);background:var(--dt-elev-1-sup)} .dt-elev-2{box-shadow:var(--dt-elev-2);background:var(--dt-elev-2-sup)} .dt-elev-3{box-shadow:var(--dt-elev-3);background:var(--dt-elev-3-sup)} /* ══════════════ DENSIDADE ══════════════ Duas densidades, e a escolha é do CONTEXTO, não da tela: painel operacional que se olha o dia todo pede compacto; formulário e site pedem confortável. Aplique no container e os componentes se ajustam. */ .dt-denso { --dt-pad-comp:8px 12px; --dt-pad-card:var(--dt-e-4); --dt-alt-linha:1.45 } .dt-confort{ --dt-pad-comp:11px 13px; --dt-pad-card:var(--dt-e-6); --dt-alt-linha:1.65 } /* ══════════════ INTERAÇÃO ══════════════ Todo componente clicável responde nos MESMOS quatro estados. Consistência aqui é o que faz a interface parecer previsível. */ :root{ --dt-hover-subir:translateY(-1px); /* sobe 1px — nunca mais que isso */ --dt-ativo-descer:translateY(0); /* volta ao lugar ao pressionar */ --dt-desab-opac:.45; } /* ══════════════ ESPAÇO · RAIO · MOVIMENTO ══════════════ */ :root{ --dt-e-1:4px; --dt-e-2:8px; --dt-e-3:12px; --dt-e-4:16px; --dt-e-5:20px; --dt-e-6:24px; --dt-e-8:32px; --dt-e-10:40px; --dt-e-12:48px; --dt-e-16:64px; --dt-e-20:80px; --dt-e-24:96px; --dt-r-sm:6px; --dt-r-md:10px; --dt-r-lg:14px; --dt-r-xl:18px; --dt-r-full:999px; --dt-rapido:.16s cubic-bezier(.2,.7,.3,1); --dt-medio:.28s cubic-bezier(.2,.7,.3,1); --dt-lento:.8s cubic-bezier(.2,.7,.3,1); }