/* ============================================================================ IMPULSAMOS DS · tokens.css — fundações da marca (paleta Bruma, 2026-10-22) Leia o LEIA-PRIMEIRO.md desta pasta antes de usar. Nenhuma cor, fonte, raio, sombra ou degradê fora deste arquivo. Carregue este arquivo ANTES de base.css. ========================================================================== */ :root { /* ------------------------------------------------------------- paleta */ --tinta: #101820; /* Black 6 C · texto, botão principal */ --bruma: #D3E0EA; /* 6148 C · COR PRINCIPAL da marca */ --ardosia: #254157; /* destaque pontual (cartão, pílula, barra maior, controle marcado) */ --lima: #E3E935; /* 387 C · SÓ sobre escuro: subaplicação .escuro e o acento do modo escuro. Nunca no tema claro, nunca texto sobre fundo claro. */ /* escala da Bruma (da mais escura à mais clara) */ --ardosia-media: #4B6478; /* links, ações de texto, rótulos em destaque */ --aco: #8FA6B8; /* barras secundárias de gráfico, detalhes */ --bruma-profunda: #B4C7D6; /* luz dos degradês, anel de foco */ --bruma-clara: #E1EAF1; /* trilhos, discos de avatar, fundos suaves */ --nevoa: #EAF0F5; /* fundo da casca (atrás do painel) */ --tela: #F5F8FB; /* fundo do painel e de blocos rebaixados */ --branco: #FFFFFF; /* tinta com opacidade (texto e linhas) */ --tinta-82: rgba(16,24,32,.82); /* texto longo */ --tinta-66: rgba(16,24,32,.66); /* texto secundário */ /* 56, 46 e 32 subiram em 28/10/2026 (acessibilidade): o nome ficou, o alfa mudou. Sobre branco: 56 → 5,0:1 e 46 → 4,7:1 (texto ≥ 4,5); 32 → 3,2:1 (ícone e borda ≥ 3). */ --tinta-56: rgba(16,24,32,.62); /* rótulos de apoio (era .56: 4,1:1) */ --tinta-46: rgba(16,24,32,.6); /* datas, placeholders, ícones em repouso (era .46: 3,0:1) */ --tinta-32: rgba(16,24,32,.48); /* ícones discretos e bordas (era .32: 2,1:1) */ --linha: rgba(16,24,32,.07); /* divisores, borda de cartão */ --linha-forte: rgba(16,24,32,.14);/* borda de campo e de botão fantasma */ --hover: rgba(16,24,32,.04); /* fundo ao passar o mouse */ --borda-interna: inset 0 0 0 1px rgba(16,24,32,.06); /* borda embutida das pílulas e campos translúcidos */ /* papéis (23/10/2026, modo escuro): no claro valem o mesmo que antes; no escuro trocam de cor. Use-os em vez da cor crua quando o papel for este. */ --tinta-fixa: #101820; /* tinta que NÃO inverte no escuro: texto sobre Lima, sobre branco fixo, fundo .escuro */ --acento: var(--ardosia); /* ícone, ponto, barra e traço de destaque sobre superfície (no escuro: Bruma) */ --marcado: var(--ardosia); /* controle marcado (caixa, radio, chave, dia escolhido) e ponto de não lida (no escuro: Lima) */ --sobre-marcado: #FFFFFF; /* o que fica por cima do --marcado (check, miolo) (no escuro: tinta) */ /* estados e semântica (27/10/2026): verde = certo/feito, vermelho = errado/ perigo, âmbar = aguardando. Fundo claro (--st-*) + texto/ícone forte (--positivo, --negativo, --aviso-texto); todos ≥ 4,9:1 sobre o próprio fundo. */ --st-aberto: #D3E0EA; /* novo / em andamento (a própria Bruma) */ --st-ok: #D6EFE0; /* concluído / certo (fundo) */ --st-espera: #FBEFD9; /* aguardando (fundo) */ --st-alerta: #F8DADA; /* erro / pede ação (fundo) */ --positivo: #256B45; /* verde: certo, feito, variação positiva (texto e ícone) */ --negativo: #A8353A; /* vermelho: errado, erro, ação de perigo (texto e ícone) */ --aviso-texto: #805B00; /* âmbar: aguardando, atenção (texto e ícone) */ /* superfícies translúcidas (sobre a Névoa ou sobre degradê) */ --vidro: rgba(255,255,255,.5); /* V1 · vidro: + borda --vidro-borda + blur 24 */ --vidro-borda: rgba(255,255,255,.75); --vidro-foto: rgba(255,255,255,.4); /* V2 · sobre foto: blur(30px) saturate(1.4), borda rgba(255,255,255,.6) */ --vidro-denso: rgba(255,255,255,.7); /* V3 · sobre fundo chapado: blur 20 + --sombra-cartao */ --translucido: rgba(255,255,255,.6); /* controles da barra superior e da lateral */ --veu: linear-gradient(180deg, rgba(245,248,251,.9), rgba(245,248,251,0)); /* V4 · cabeçalho fixo sobre rolagem */ /* ----------------------------------------------------------- degradês */ --g-bruma-1: linear-gradient(120deg, #EAF0F5 0%, #E1EAF1 45%, #FFFFFF 100%); /* A1 · Impulso (leva manchas .mancha) */ --g-bruma-2: radial-gradient(220% 95% at 50% -25%, #B4C7D6 0%, rgba(180,199,214,.75) 25%, rgba(180,199,214,.45) 48%, rgba(180,199,214,.18) 72%, rgba(180,199,214,0) 100%), #FFFFFF; /* A2 · Céu (principal, capas) */ --g-painel: radial-gradient(160% 100% at 30% -30%, #B4C7D6 0%, rgba(180,199,214,.55) 35%, rgba(180,199,214,0) 75%); /* luz do topo do painel */ /* ---------------------------------------------------------- tipografia */ --font-display: "Sora", Arial, sans-serif; /* títulos, nomes, números · peso 450 (600 só destaque/caixa alta) */ --font-body: "Inter", Arial, sans-serif; /* texto 400 · interface 500 · rótulo 600 */ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* escala tipográfica · formato SISTEMA (os outros formatos multiplicam a escala — ver LEIA-PRIMEIRO) */ --t-display-2: 40px; /* Sora 450 · lh 1 · ls -.05em */ --t-titulo-1: 34px; /* Sora 450 · lh 1.05 · ls -.045em */ --t-titulo-2: 26px; /* Sora 450 · lh 1.08 · ls -.04em */ --t-titulo-3: 21px; /* Sora 450 · lh 1.15 · ls -.035em */ --t-titulo-4: 17px; /* Sora 450 · lh 1.2 · ls -.03em */ --t-numero-1: 34px; /* Sora 450 tabular · lh 1 · ls -.05em */ --t-numero-2: 26px; /* Sora 450 tabular · lh 1 · ls -.05em */ --t-numero-3: 20px; /* Sora 450 tabular · lh 1 · ls -.04em */ --t-texto-g: 15px; /* Inter 400 · lh 1.5 · ls -.02em */ --t-texto-m: 13px; /* Inter 400 · lh 1.5 · ls -.015em */ --t-texto-p: 12px; /* Inter 400 · lh 1.45 · ls -.01em */ --t-interface: 12.5px;/* Inter 500 · lh 1.2 · ls -.01em */ --t-rotulo: 10.5px; /* Inter 600 CAIXA ALTA · lh 1.2 · ls +.12em */ --t-legenda: 11.5px; /* Inter 400 · lh 1.4 · ls -.01em */ --t-codigo: 12px; /* Mono 500 · lh 1.45 · ls 0 */ /* pesos: a hierarquia vem do tamanho E do traço (27/10/2026) */ --peso-titulo: 450; /* Sora: título, nome, número */ --peso-subtitulo: 300; /* Sora: subtítulo/manchete logo abaixo de um título (mais fino que ele) */ --peso-destaque: 600; /* Inter: em texto de conteúdo */ /* ------------------------------------------------- raios (por camada) */ --r-painel: 28px; /* o canto do painel principal sobre a Névoa */ --r-cartao: 24px; /* cartões e janelas */ --r-bloco: 20px; /* bloco dentro de cartão (mini-gráfico, resumo) */ --r-interno: 16px; /* bloco pequeno, cartão da conta na lateral */ --r: 12px; /* controles: campos, menus, itens de nav, calendário, notas */ --r-pilula: 999px; /* botões, chips, pílulas de estado, barras de gráfico */ /* círculo (50%) só em avatares, discos de ícone, bolinhas e pinos */ /* ------------------------------------------------------------- sombras */ --sombra-cartao: 0 1px 2px rgba(16,24,32,.04), 0 10px 28px -18px rgba(16,24,32,.14); --sombra-pop: 0 24px 60px -24px rgba(37,65,87,.35), 0 2px 6px rgba(16,24,32,.06); --sombra-foco: 0 0 0 4px rgba(180,199,214,.55); /* anel de foco (Bruma Profunda) */ --sombra-ativo: 0 1px 2px rgba(16,24,32,.06); /* item ativo da lateral */ /* ------------------------------------------------------------ espaços */ /* escala base-4: 4 8 12 16 20 24 32 40 48 64 80 96 */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px; /* ----------------------------------------------------------- movimento */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-suave: cubic-bezier(.65,0,.35,1); /* hover de cor/fundo: 150ms --ease · botão da marca: 700ms --ease-suave · menus e janelas abrem na hora */ /* ------------------------------------------- símbolo e ícones em CSS */ /* símbolo oficial "Caminhos" (o mesmo de simbolo.svg) para máscaras */ --motivo-simbolo: url('data:image/svg+xml;utf8,'); --icone-seta: url("data:image/svg+xml,"); --icone-baixar: url("data:image/svg+xml,"); --icone-subir: url("data:image/svg+xml,"); } /* ============================================================================ MODO ESCURO (23/10/2026) — escolha da pessoa, nunca automático. : o comum.js liga/desliga ([data-alternar-tema]) e guarda em localStorage "impulsamos:tema". Só cores da paleta: Tinta é a casca, misturas Tinta + Ardósia sobem as camadas, Ardósia é o destaque e a Lima vira o acento pontual (foco, item ativo, controle marcado, não lida, luz do botão). Os tokens mantêm o NOME e trocam o valor pelo mesmo PAPEL: --tinta continua sendo "a cor do texto", --branco "a superfície do cartão". Ficam iguais: --bruma, --ardosia, --lima, --aco, --bruma-profunda. ========================================================================== */ :root[data-tema="escuro"] { color-scheme: dark; /* superfícies, da mais funda à mais alta */ --nevoa: #101820; /* casca = Tinta */ --tela: #14202B; /* painel e blocos rebaixados = Tinta + 20% Ardósia */ --branco: #1A2C3A; /* cartão, campo, menu = Tinta + 48% Ardósia */ --bruma-clara: #1F3546; /* fundos suaves, notas, trilhos, discos = Tinta + 70% Ardósia */ --ardosia-media: #8FA6B8; /* links e ações de texto viram Aço (legível no escuro) */ /* texto = Tela com opacidade (alfas do claro; 46 e 32 sobem um pouco) */ --tinta: #F5F8FB; --tinta-82: rgba(245,248,251,.82); --tinta-66: rgba(245,248,251,.66); --tinta-56: rgba(245,248,251,.56); --tinta-46: rgba(245,248,251,.5); /* .5 e não .46: texto pequeno passa de 4,5:1 */ --tinta-32: rgba(245,248,251,.38); /* ícones discretos ≥ 3:1 */ --linha: rgba(245,248,251,.08); --linha-forte: rgba(245,248,251,.16); --hover: rgba(245,248,251,.05); --borda-interna: inset 0 0 0 1px rgba(245,248,251,.08); /* papéis */ --acento: #D3E0EA; /* Bruma */ --marcado: #E3E935; /* Lima */ --sobre-marcado: #101820; /* Tinta */ /* estados: fundo = a cor do texto de estado misturada na Tinta; texto claro */ --st-aberto: #254157; /* Ardósia */ --st-ok: color-mix(in srgb, #256B45 45%, #101820); --st-espera: color-mix(in srgb, #805B00 45%, #101820); --st-alerta: color-mix(in srgb, #A8353A 45%, #101820); --positivo: color-mix(in srgb, #256B45 40%, #D6EFE0); /* #8FBAA2: 6,6:1 sobre cartão, 5,5:1 sobre --st-ok */ --negativo: color-mix(in srgb, #A8353A 40%, #F8DADA); /* #D8989A: 6,1:1 sobre cartão, 5,3:1 sobre --st-alerta */ --aviso-texto: color-mix(in srgb, #805B00 50%, #FBEFD9); /* vidro: cartão translúcido + desfoque; o véu usa a cor do painel */ --vidro: rgba(26,44,58,.55); --vidro-borda: rgba(245,248,251,.1); --vidro-foto: rgba(16,24,32,.4); --vidro-denso: rgba(26,44,58,.86); --translucido: rgba(245,248,251,.06); --veu: linear-gradient(180deg, rgba(20,32,43,.9), rgba(20,32,43,0)); /* degradês: a luz é Ardósia sobre Tinta */ --g-bruma-1: linear-gradient(120deg, #101820 0%, #1A2C3A 45%, #254157 100%); --g-bruma-2: radial-gradient(220% 95% at 50% -25%, #254157 0%, rgba(37,65,87,.6) 40%, rgba(37,65,87,0) 100%), #101820; --g-painel: radial-gradient(160% 100% at 30% -30%, rgba(37,65,87,.95) 0%, rgba(37,65,87,.45) 35%, rgba(37,65,87,0) 75%); /* sombras mais fortes e frias (Tinta escurecida) + fio claro que desenha a borda */ --sombra-cartao: 0 0 0 1px rgba(245,248,251,.05), 0 1px 2px rgba(8,12,16,.4), 0 16px 32px -18px rgba(8,12,16,.8); --sombra-pop: 0 0 0 1px rgba(245,248,251,.07), 0 24px 60px -20px rgba(8,12,16,.85); --sombra-foco: 0 0 0 3px rgba(227,233,53,.5); /* anel de foco Lima */ --sombra-ativo: 0 1px 2px rgba(8,12,16,.5), inset 0 0 0 1px rgba(245,248,251,.06); } /* Aplicar o tema salvo antes de pintar — 1 linha no , antes dos CSS: */ /* Subaplicação escura: escopo .escuro (tela de entrar, capa, peça de marca). No tema claro é o ÚNICO lugar onde a Lima aparece, sempre como detalhe pontual. */ .escuro { --fundo-escuro: var(--tinta-fixa); color: #fff; background: var(--tinta-fixa); } .escuro ::selection { background: var(--ardosia); color: #fff; }