/* ========================================================================== tokens.css v2 — Design tokens BIP (Buzzing) · direção "Cara de fintech, alma editorial" (Gate 1, 01/07/2026 — registro/decisoes.md). Fonte única: BRIEF.md §2–4 + prototipo/direcoes.html (specimen aprovado). Cor NUNCA é decorativa (papel fixo). Mapeados 1:1 para o futuro shadcn/ui. O MUNDO DOS TOKENS: papel & linho (superfícies mornas — fintech Parker #F2F1EC), tinta-café (texto), fio (bordas hairline), as 5 vozes do logo como acentos de papel fixo, e o carimbo magenta como assinatura. AUDITORIA A11Y v2 (WCAG 2.2, luminância relativa — medido 01/07/2026, node inline; gate BRIEF §8): • --tinta (#211E19): 16.61:1 no papel, 14.69:1 no linho — AAA. • --tinta-2 (#5E584C): 7.06:1 / 6.24:1 — AA/AAA. • --tinta-3 (#6E675C): 5.59:1 papel, 4.94:1 linho — AA texto normal. É o TOM MÍNIMO para rótulo/label legível. • --tinta-suave (#8F8878): 3.52:1 papel / 3.12:1 linho — REPROVA texto pequeno; SÓ texto grande (≥24px/19px bold) ou decoração. • --tinta-mute (#9A9284): 3.08:1 — SÓ disabled/decoração, nunca informação. • -solid herdados (re-medidos sobre papel e linho): --brand-signature-solid #CF0079 5.34:1 · --action-solid #0A6690 6.33/5.60 · --pos-solid #167A4A 5.36 (4.79 no wash) · --warn-solid #8A5F00 5.10 no wash · --neg-solid #B8241D 6.35 — todos ≥4.5:1 nos usos previstos. Nenhum removido. • Regra intacta do v1: hex "puros" da marca (#EC008C, #1CADE4, #F5B324, #1C9B5E, #E63329) NUNCA carregam texto pequeno. ========================================================================== */ :root { /* ---- Cor: marca / acentos (BRIEF §2 — papel FIXO) ----------------------- */ --brand-signature: #EC008C; /* magenta — assinatura Buzzing (Gate 1). Fio, carimbo, dot, foco pontual. DECORATIVO — texto/fundo-com-texto usa --brand-signature-solid */ --brand-cyan: #1CADE4; /* acento de dados / anel do BRS / hover de gráfico. NUNCA texto */ --action: #0E7CA8; /* azul-ação acessível (AA no papel): links, foco, botões secundários */ /* ---- Cor: sentimento / status ------------------------------------------ */ --pos: #1C9B5E; /* positivo — preenchimentos/ícones/texto grande */ --warn: #F5B324; /* atenção — SOMENTE preenchimento/decoração */ --neg: #E63329; /* negativo/crise — moderação; preenchimentos/texto grande */ --neutral: #6E6E6E; /* sentimento neutro (dado), cinza da marca */ /* ---- Variantes "-solid" (a11y — texto/rótulo legível) ------------------ */ --brand-signature-solid: #CF0079; /* botão primário, badges, dot de notificação */ --brand-signature-solid-hover: #B3006A; --action-solid: #0A6690; /* texto sobre --wash-action (avatar, badges tier-1/band-boa) */ --pos-solid: #167A4A; --neg-solid: #B8241D; --warn-solid: #8A5F00; --neutral-3: #71717A; /* 3º item de série/legenda (bz-sof) */ /* ---- Cor: superfícies / texto (mundo papel & linho — v2) ---------------- */ --papel: #FFFFFF; /* cards — base branca (fundo preto proibido, Maria) */ --linho: #F2F1EC; /* fundo de página morno (empírico: Parker) */ --linho-2: #EDEBE4; /* degrau: hover de linha, wells, chips sobre papel */ --papel-morno: #F6F4EE; /* superfície morna ENTRE papel(#FFF) e linho-canvas(#F2F1EC), distinta de ambos: campo de "fala" da IA e painéis internos que não podem repetir a cor do canvas */ --papel-alto: #FBFAF7; /* off-white quente (ENTRE papel e morno) — faixa de chrome ELEVADO (pagebar): mais claro que morno p/ hierarquia chrome>conteúdo */ --fio: #E1DFD8; /* borda padrão (empírico: Parker #e1dfd8) */ --fio-suave: #EFEDE6; /* divisor interno de card (masthead, linhas) */ --tinta: #211E19; /* texto principal (café) */ --tinta-2: #5E584C; /* texto secundário */ --tinta-3: #6E675C; /* rótulos/labels — TOM MÍNIMO p/ texto pequeno (AA) */ --tinta-suave: #8F8878; /* kickers grandes/decoração — NUNCA texto pequeno */ --tinta-mute: #9A9284; /* disabled/placeholder decorativo apenas */ /* aliases v1 → v2 (compatibilidade das telas até o re-skin; remover após) */ --bg: var(--papel); --surface: var(--papel); --surface-2: var(--linho); --border: var(--fio); --ink: var(--tinta); --ink-2: var(--tinta-2); /* ---- Washes (tints de acento — fundos, nunca texto) --------------------- */ --wash-signature: rgba(236, 0, 140, 0.08); --wash-action: rgba(14, 124, 168, 0.08); --wash-cyan: rgba(28, 173, 228, 0.10); --wash-pos: rgba(28, 155, 94, 0.10); --wash-warn: rgba(245, 179, 36, 0.12); --wash-neg: rgba(230, 51, 41, 0.08); /* ---- Bandas de classificação BRS 0–100 (BRIEF §2) ---------------------- */ --brs-critica: var(--neg); /* 0–39 */ --brs-atencao: var(--warn); /* 40–59 */ --brs-boa: var(--brand-cyan); /* 60–79 */ --brs-excelente: var(--pos); /* 80–100 */ --brs-threshold: 50; /* linha de alerta padrão (SRS 9.1) */ /* ---- O fio-de-vozes (assinatura editorial — 1× por tela, canto RETO) ---- */ /* uso: barra 4px no topo do card-herói; onde ele encosta, radius 0 */ --fio-vozes: linear-gradient(90deg, var(--brand-cyan) 0 20%, var(--pos) 20% 40%, var(--warn) 40% 60%, var(--neg) 60% 80%, var(--brand-signature) 80% 100%); --fio-vozes-h: 4px; /* ---- GLOW MAP (identidade Buzzing: cor semântica é LUZ, não barra) -------- Evidência: glow-based emphasis > bordas duras (Refero: Hyperliquid, Genway, Suno, 02/07/2026). Cada papel semântico se expressa em 4 formas do MESMO hex: • grad — preenchimento luminoso (barras, chips de destaque, fills) • glow — sombra colorida (lift/ênfase de CTA, item ativo, card-foco) • bleed — tint direcional p/ fundo de card/box (sinaliza sem barra) • edge — glow INTERNO da borda esquerda (substitui "barra sólida+radius") Regra: cor NUNCA é decoração — cada uso carrega significado (status/ação). */ --grad-signature: linear-gradient(135deg, var(--brand-signature), color-mix(in srgb, var(--brand-signature) 68%, #fff)); --grad-action: linear-gradient(135deg, var(--action), color-mix(in srgb, var(--action) 68%, #fff)); --grad-cyan: linear-gradient(135deg, var(--brand-cyan), color-mix(in srgb, var(--brand-cyan) 72%, #fff)); --grad-pos: linear-gradient(135deg, var(--pos), color-mix(in srgb, var(--pos) 72%, #fff)); --grad-warn: linear-gradient(135deg, var(--warn), color-mix(in srgb, var(--warn) 74%, #fff)); --grad-neg: linear-gradient(135deg, var(--neg), color-mix(in srgb, var(--neg) 70%, #fff)); /* glow — sombra colorida de ênfase (suave: cor semi-transparente, halo curto) */ --glow-signature: 0 2px 11px -4px color-mix(in srgb, var(--brand-signature) 42%, transparent); --glow-action: 0 2px 11px -4px color-mix(in srgb, var(--action) 38%, transparent); --glow-cyan: 0 2px 11px -4px color-mix(in srgb, var(--brand-cyan) 38%, transparent); --glow-pos: 0 2px 11px -4px color-mix(in srgb, var(--pos) 36%, transparent); --glow-warn: 0 2px 11px -4px color-mix(in srgb, var(--warn) 38%, transparent); --glow-neg: 0 2px 11px -4px color-mix(in srgb, var(--neg) 38%, transparent); /* bleed — tint direcional de fundo (whisper: ~7%, some cedo) */ --bleed-signature: linear-gradient(105deg, color-mix(in srgb, var(--brand-signature) 7%, transparent), transparent 50%); --bleed-action: linear-gradient(105deg, color-mix(in srgb, var(--action) 7%, transparent), transparent 50%); --bleed-cyan: linear-gradient(105deg, color-mix(in srgb, var(--brand-cyan) 8%, transparent), transparent 50%); --bleed-pos: linear-gradient(105deg, color-mix(in srgb, var(--pos) 8%, transparent), transparent 50%); --bleed-warn: linear-gradient(105deg, color-mix(in srgb, var(--warn) 9%, transparent), transparent 50%); --bleed-neg: linear-gradient(105deg, color-mix(in srgb, var(--neg) 7%, transparent), transparent 50%); /* edge — glow interno da borda esq. (semi-transparente p/ não competir com o bleed) */ --edge-signature: inset 5px 0 12px -10px color-mix(in srgb, var(--brand-signature) 55%, transparent); --edge-action: inset 5px 0 12px -10px color-mix(in srgb, var(--action) 52%, transparent); --edge-cyan: inset 5px 0 12px -10px color-mix(in srgb, var(--brand-cyan) 52%, transparent); --edge-pos: inset 5px 0 12px -10px color-mix(in srgb, var(--pos) 50%, transparent); --edge-warn: inset 5px 0 12px -10px color-mix(in srgb, var(--warn) 52%, transparent); --edge-neg: inset 5px 0 12px -10px color-mix(in srgb, var(--neg) 50%, transparent); /* ---- Tipografia (BRIEF §3 — ecoa o logo: geométrica, arredondada) ------- */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* títulos, números-herói */ --font-ui: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fs-h1: 28px; --lh-h1: 1.1; --fw-h1: 800; /* título de página (uso real; era hardcoded no app.css) */ --fs-h2: 24px; --lh-h2: 1.2; --fw-h2: 700; --fs-h3: 18px; --lh-h3: 1.3; --fw-h3: 700; --fs-body: 14px; --lh-body: 1.6; --fw-body: 400; --fs-small: 13px; --fs-label: 11px; /* kicker/label uppercase */ --fs-metric-hero: 64px; /* faixa 56–72; anel usa 46 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-heavy: 800; /* só números-herói e H1 display */ --tracking-label: 0.12em; /* kicker editorial uppercase */ --tracking-display: -0.03em; /* números grandes/display (óptico) */ /* ---- Espaçamento (grade 4/8px — BRIEF §4) ------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --content-max: 1200px; /* container centralizado — padrão de mercado (era 1440, largo demais) */ --sidebar-w: 264px; /* rail editorial (v2 shell "A Redação") */ --topbar-h: 64px; /* masthead */ /* ---- Chrome (shell) — superfície elevada = cor dos cards; canvas linho recua */ --chrome: var(--papel); /* rail + masthead (branco, como os cards) */ --chrome-hover: var(--linho); /* hover de itens do chrome */ --nav-active: var(--wash-signature); /* item de nav ativo = tint da assinatura */ /* ---- Radius (v2 — fintech; canto reto onde há borda "diferente") -------- */ --radius: 16px; /* cards (faixa empírica Ramp 12–Parker 24) */ --radius-sm: 10px; /* botões retangulares / inputs */ --radius-ico: 12px; /* containers de ícone/avatar */ --radius-pill: 999px; /* CTAs, chips, badges */ --radius-flush: 0; /* canto RETO — topo do card com fio-de-vozes (Brex/Column) */ /* ---- Profundidade (UMA estratégia: fórmula Column — quase invisível) ---- */ --shadow-card: 0 0 0 1px rgba(33, 30, 25, 0.05), 0 1px 2px rgba(33, 30, 25, 0.05), 0 6px 16px -8px rgba(33, 30, 25, 0.10), /* lift ambiente suave: card assenta no papel, não cola */ inset 0 1px 0 rgba(255, 255, 255, 0.6); /* aresta superior nítida (acabamento premium) */ --shadow-md: 0 0 0 1px rgba(33, 30, 25, 0.06), 0 8px 24px -6px rgba(33, 30, 25, 0.14); /* hover/popover — degrau claro acima do card */ /* legado */ --shadow-sm: var(--shadow-card); /* ---- Foco (a11y — BRIEF §8) --------------------------------------------- */ --focus-ring: 0 0 0 2px var(--papel), 0 0 0 4px var(--action); }