/* ============================================================================ ASA FINANCE · LANDING v6 — TOKENS Arquivo: static/css/landing.tokens.css ---------------------------------------------------------------------------- ORGANIZAÇÃO DE COR EM DUAS CAMADAS CAMADA 1 — PALETA CRUA (--c-*) Só matiz + degrau de luminância. NADA de significado. É o único lugar do projeto onde existe um valor hexadecimal escrito à mão. CAMADA 2 — SEMÂNTICA (--ink-*, --papel*, --sobre-*, --violeta-*, --linha*) Diz PARA QUE serve a cor. Todo o CSS de componente e todo style inline do HTML consomem exclusivamente esta camada. Os nomes da camada 2 são os MESMOS da v5.1 de propósito: o CSS de componente, os styles inline do template e qualquer página que já use estas variáveis continuam funcionando sem edição. Trocar o tema = trocar a camada 1. O QUE MUDA DA v5.1 PARA A v6 · tipografia sem serifada de display: Sora (títulos) + Manrope (interface) + JetBrains Mono (números). Zero itálico — ênfase agora é COR + peso; · rampa escura re-neutralizada (matiz ~262°, S ~34-40%): base roxa mantida, menos "manchada"; o violeta volta a ser acento; · papel levemente violáceo (era morno/amarelado) para casar com a base roxa; · raio de canto menor e uniforme (10/14/18) — leitura mais técnica; · superfície escura ganha um degrau extra (--ink-925) usado nos cards. ========================================================================== */ :root { /* ═════════════════════════════════════════════════════════════════════ CAMADA 1 · PALETA CRUA ═════════════════════════════════════════════════════════════════════ */ /* Ameixa — a base escura da marca. Matiz fixo em 262°, saturação 34-40%: roxo reconhecível sem virar mancha. Cada degrau ~4-6% de luminância. */ --c-plum-950: #0C0917; --c-plum-925: #110D1D; --c-plum-900: #151129; --c-plum-850: #1C1734; --c-plum-800: #251E45; --c-plum-700: #322859; --c-plum-600: #453873; /* Violeta — a cor da marca. Só acento: CTA, rótulo, ênfase, foco. */ --c-violet-700: #5B21B6; --c-violet-600: #6D28D9; --c-violet-500: #8B5CF6; --c-violet-400: #A78BFA; --c-violet-300: #C4B5FD; --c-violet-200: #DDD6FE; /* Papel — off-white com um sopro de violeta (não mais o morno amarelado da v5.1, que brigava com a base roxa). */ --c-paper-0: #FFFFFF; --c-paper-1: #FBFAFD; --c-paper-2: #F4F3F9; --c-paper-3: #E9E7F1; /* Grafite — texto e filete sobre papel. Matiz puxado para o roxo para o cinza não parecer sujo ao lado do violeta. */ --c-slate-900: #12101F; --c-slate-700: #3B3853; --c-slate-500: #5C5876; /* Semântica financeira — a MESMA do painel autenticado. Não inventar aqui: verde entra, rosa sai, azul pendente, âmbar alerta. */ --c-green-400: #34D399; --c-green-700: #047857; --c-green-800: #065F46; --c-rose-400: #FB7185; --c-rose-700: #B4364B; --c-rose-800: #9F1239; --c-sky-400: #38BDF8; --c-amber-400: #FBBF24; --c-amber-800: #92400E; /* ═════════════════════════════════════════════════════════════════════ CAMADA 2 · SEMÂNTICA — é o que o CSS de componente consome ═════════════════════════════════════════════════════════════════════ */ /* Superfícies escuras */ --ink-950: var(--c-plum-950); /* fundo mais fundo: rodapé, seções .escuro-2 */ --ink-925: var(--c-plum-925); /* NOVO na v6: card sobre superfície escura */ --ink-900: var(--c-plum-900); /* superfície escura padrão (.escuro) */ --ink-850: var(--c-plum-850); /* card/realce sobre a superfície escura */ --ink-800: var(--c-plum-800); --ink-700: var(--c-plum-700); --ink-600: var(--c-plum-600); --linha-esc: rgba(255,255,255,.075); --linha-esc-2: rgba(255,255,255,.15); /* Superfícies claras */ --papel: var(--c-paper-1); --papel-2: var(--c-paper-2); --papel-3: var(--c-paper-3); --papel-puro: var(--c-paper-0); --linha: rgba(18,16,31,.10); --linha-2: rgba(18,16,31,.19); /* Marca */ --violeta-700: var(--c-violet-700); --violeta-600: var(--c-violet-600); --violeta-500: var(--c-violet-500); --violeta-400: var(--c-violet-400); --violeta-300: var(--c-violet-300); --violeta-200: var(--c-violet-200); /* Semântica financeira */ --entra: var(--c-green-400); --sai: var(--c-rose-400); --pend: var(--c-sky-400); --alerta: var(--c-amber-400); /* Verde de TEXTO sobre papel — o --entra é de número sobre superfície escura e reprova AA como texto em off-white. */ --entra-txt: var(--c-green-700); --entra-txt2: var(--c-green-800); /* sobre pílula cinza (--papel-3) */ --sai-txt: var(--c-rose-700); /* Texto sobre superfície escura (contrastes conferidos p/ AA) */ --sobre-esc: #F5F4FB; --sobre-esc-2: rgba(236,233,248,.76); --sobre-esc-3: rgba(236,233,248,.56); /* Texto sobre papel */ --sobre-papel: var(--c-slate-900); --sobre-papel-2: var(--c-slate-700); --sobre-papel-3: var(--c-slate-500); /* ── Gradientes — três papéis, e só três ───────────────────────────── --grad-cta : botão primário --grad-hero : a dobra (única superfície com fundo gradiente) --grad-marca : a logo (pomba + logotipo saem do MESMO ramp) */ /* v6.1 — o CTA deixou de ser gradiente. Gradiente em botão + glow colorido é a assinatura de landing gerada: chama atenção para o efeito, não para a ação. Agora é tinta sólida da marca; o token permanece com o mesmo nome para não obrigar a mexer no CSS de componente. */ --grad-cta: var(--c-violet-600); --grad-hero: linear-gradient(170deg, #241C42 0%, #171230 45%, #0C0917 100%); /* Ramp da marca em superfície ESCURA: 10,1:1 e 4,4:1 sobre --ink-900. Regra em memória: fundo claro → ramp escuro; fundo escuro → este. */ --grad-marca: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%); /* v6.1 — a ênfase de título ERA recorte de gradiente. Saiu pelo mesmo motivo do botão: texto em degradê é o clichê visual do gênero. Ficou tinta sólida + filete sob a palavra (ver .titulo em no CSS). */ /* ═════════════════════════════════════════════════════════════════════ TIPOGRAFIA — retas, sem letra desenhada ═════════════════════════════════════════════════════════════════════ Sora : geométrica, títulos (600/700). Substitui a Instrument Serif. Manrope: interface e corpo (400/500/600/700). Mono : JetBrains Mono — números, rótulos, dados tabulares. */ --display: 'Sora', 'Display Fallback', Arial, Helvetica, sans-serif; --sans: 'Manrope', 'Sans Fallback', Arial, Helvetica, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-micro: .6875rem; --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: clamp(1.28rem, 2.3vw, 1.55rem); --fs-2xl: clamp(1.7rem, 3.6vw, 2.5rem); --fs-3xl: clamp(2.2rem, 5.2vw, 3.6rem); /* Títulos em sans pedem tracking negativo e altura de linha mais curta que a serifada anterior — sem isso a Sora lê "larga". */ --tr-titulo: -.025em; --lh-titulo: 1.1; /* ═════════════════════════════════════════════════════════════════════ FORMA, SOMBRA, MOVIMENTO ═════════════════════════════════════════════════════════════════════ */ --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-btn: 10px; /* v6: botão retangular arredondado, não pílula */ --r-pill: 999px; /* pílula fica só para chip, selo e seletor de período */ --sombra-papel: 0 1px 2px rgba(18,16,31,.05), 0 10px 28px rgba(18,16,31,.055); --sombra-alta: 0 24px 60px rgba(8,5,20,.45); /* v6.1 — nenhuma sombra COLORIDA. Glow violeta embaixo do botão é enfeite; elevação aqui é aresta + escuridão ambiente. */ --sombra-cta: 0 1px 0 rgba(18,16,31,.25); --sombra-cta-h: 0 1px 0 rgba(18,16,31,.35); /* v6.1 — hover não levanta mais nada. Card que flutua no mouse é decoração genérica; o estado agora é borda + fundo, que é o que informa. */ --sobe-ctrl: none; --sobe-card: none; --tr-rapido: .18s cubic-bezier(.2,.7,.2,1); --tr-medio: .26s cubic-bezier(.2,.7,.2,1); --nav-h: 66px; --env-max: 1180px; } /* ═════════════════════════════════════════════════════════════════════════ TEMA ESCURO — só para /ajuda (e qualquer página que siga o 'asa-theme' do app autenticado). A landing NÃO usa: ela já alterna escuro e papel por seção, de propósito. É aqui que a arquitetura de duas camadas paga: o tema inteiro cabe em dez linhas, porque só os ALIASES semânticos mudam — nenhum componente é reescrito, nenhum hexadecimal novo é inventado. ═════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --papel-puro: var(--c-plum-925); --papel: var(--c-plum-950); --papel-2: var(--c-plum-900); --papel-3: var(--c-plum-850); --linha: rgba(255,255,255,.075); --linha-2: rgba(255,255,255,.15); --sobre-papel: var(--sobre-esc); --sobre-papel-2: var(--sobre-esc-2); --sobre-papel-3: var(--sobre-esc-3); /* Violeta sobre fundo escuro precisa subir na rampa: o 600/700 dá menos de 3:1 aqui. Mesma regra da logo — claro→ramp escuro, escuro→ramp claro. */ --violeta-700: var(--c-violet-300); --violeta-600: var(--c-violet-400); /* Verde de texto idem: o 700/800 é para papel claro. */ --entra-txt: var(--c-green-400); --entra-txt2: var(--c-green-400); --sai-txt: var(--c-rose-400); }