/* ============================================================ Design tokens — "instrumento de precisão". Duas regras governam este arquivo: 1. O CROMO É ACROMÁTICO. Superfícies, linhas e texto são cinzas neutros. Cor só aparece quando carrega significado: polaridade (--up/--down), estado (--warn) ou identidade de série no gráfico. 2. UMA COR INTERATIVA SÓ. --accent é foco, link, aba ativa e botão primário — e nada mais. Ele NÃO é cor de série de gráfico; para isso existe --series-*, que é um conjunto à parte. Os dois temas são desenhados, não invertidos: o escuro é o mostrador do instrumento, o claro é o relatório impresso (papel levemente quente). Aplicado no ; o toggle liga/desliga a classe .theme-light. Toda cor abaixo foi MEDIDA, não escolhida no olho — contraste WCAG contra a superfície onde ela de fato aparece, e as paletas de série passaram pelo validador da skill dataviz (faixa de luminosidade, piso de croma, separação sob protanopia/deuteranopia, piso de visão normal). Ao mexer em qualquer valor, revalide. ============================================================ */ :root { /* ── Superfícies (escuro) ──────────────────────────────────── Cinco níveis com separação real (ΔL OKLab >= 0.03 entre vizinhos). No tema anterior bg-1 e bg-2 quase coincidiam, e por isso nada parecia elevado. */ --bg-0: #090B0E; /* faixa / navbar — o plano mais fundo */ --bg-1: #0F1216; /* fundo do app */ --bg-2: #181B1F; /* painel · superfície de gráfico */ --bg-3: #22262C; /* inset (dentro do painel) · hover de linha */ --bg-4: #2C3138; /* elevado · ativo · menu flutuante */ /* Superfície onde o gráfico realmente desenha — charts.js lê daqui em vez de assumir. É o mesmo plano do painel, por construção. */ --surface-chart: var(--bg-2); /* ── Linhas ─────────────────────────────────────────────────── */ --border-0: #333942; /* hairline: divisor, borda de painel (1.5:1) */ --border-1: #454D59; /* aresta visível: input, foco de tabela (2.0:1) */ /* ── Texto ──────────────────────────────────────────────────── */ --fg-1: #E8EBEF; /* primário — 14.5:1 sobre o painel */ --fg-2: #9BA3AE; /* secundário — 6.8:1 */ /* --fg-3 carrega TEXTO de verdade: .hint, .note, rodapé de card, rótulo de eixo, cabeçalho de tabela. Por isso o piso dele é 4.5:1 (AA de corpo), e não os 3:1 de elemento não-textual — medido contra bg-3, a superfície mais clara onde ele aparece. O valor anterior (#6B7480) dava 3.2:1 ali. */ --fg-3: #88919D; /* muted — 5.4:1 no painel · 4.8:1 no inset */ /* ── Interação (uma cor só) ─────────────────────────────────── */ --accent: #4C8FF0; --accent-h: #6BA3F5; /* Tinta SOBRE o accent (botão primário, pill ativa). No escuro o accent é claro demais para texto branco (3,2:1) — a tinta é escura. */ --on-accent: #0A1420; /* ── Polaridade e estado — calibrados POR TEMA ────────────── Convenção de domínio: verde sobe, vermelho desce. O que muda entre os temas é o peso percebido, não o significado. Sob deuteranopia esse par não se separa (ΔE 4,1) — é inerente à convenção. Por isso todo número polarizado carrega sinal (+/−) ou seta; a cor nunca decide sozinha. */ --up: #2FB37D; --down: #E85A63; --warn: #E0A03A; /* ── Séries de gráfico — CATEGÓRICA (identidade) ───────────── Seis posições em ordem fixa, nunca cicladas. Azul ficou de fora (é a cor de interação) e vermelho também (é polaridade), então nenhuma série se disfarça de estado. Validada para contextos ADJACENTES — barras, linhas, empilhados: pior par sob deuteranopia ΔE 9,4 · visão normal ΔE 19,3. Em contexto todos-contra-todos (dispersão, treemap) só as três primeiras se separam: além disso, agrupe em "Outros" ou facete. */ --series-1: #d95926; /* laranja */ --series-2: #199e70; /* água */ --series-3: #9085e9; /* violeta */ --series-4: #c98500; /* amarelo */ --series-5: #d55181; /* magenta */ --series-6: #008300; /* verde */ /* ── Séries de gráfico — ORDINAL (grandeza ordenada) ───────── Um matiz só, claro→escuro. É o que a composição da carteira usa: fatias ordenadas por tamanho aparecem todas ao mesmo tempo, e nesse contexto matiz categórico não se separa — ordem sim. --ord-1 é a fatia maior (mais contraste contra a superfície). */ --ord-1: #74D7C2; --ord-2: #3FC2A6; --ord-3: #1DA88A; --ord-4: #158A71; --ord-5: #0F6B58; /* ── Tints ────────────────────────────────────────────────── Derivados por color-mix, não hex fixo: seguem o tema sozinhos e mudam junto quando a cor-base muda. */ /* TINTA sobre o tint. O tint de um chip é feito da PRÓPRIA cor, então escurecer o texto escurece o fundo junto e a razão de contraste não sobe — preenchimento e tinta precisam ser papéis separados. No escuro a cor-base já é clara o bastante sobre o tint; no claro ela não é. */ --up-ink: var(--up); --down-ink: #F47C83; /* o vermelho-base dá 3.7:1 sobre o próprio tint no inset */ --warn-ink: var(--warn); --accent-ink: var(--accent); --accent-tint: color-mix(in oklab, var(--accent) 12%, transparent); --accent-tint2: color-mix(in oklab, var(--accent) 20%, transparent); --up-tint: color-mix(in oklab, var(--up) 14%, transparent); --down-tint: color-mix(in oklab, var(--down) 14%, transparent); --warn-tint: color-mix(in oklab, var(--warn) 14%, transparent); /* Anel de foco (teclado) — obrigatoriamente visível nos dois temas */ --ring: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--accent); /* ── Régua de calibração (a assinatura) ───────────────────── A confiança de um número é uma propriedade de como ele se apresenta, não um selo colado ao lado. Traços de escala, como em instrumento de medição. Ver .metric em components.css. */ --cal-tick: var(--fg-2); /* traço de amostra cheia */ --cal-tick-weak: var(--fg-3); /* amostra curta / não confiável */ --cal-height: 3px; --cal-gap: 2px; /* ── Sombras — discretas; profundidade vem da superfície ───── */ --shadow: none; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 8px 24px rgba(0, 0, 0, .45); /* ── Raios ──────────────────────────────────────────────────── */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 9px; --r-xl: 12px; --r-pill: 999px; /* ── Espaçamento — a ÚNICA fonte de padding e gap ─────────── Antes existiam e tinham zero usos: todo espaço era px na mão, boa parte em style= inline, e por isso o ritmo vertical era aleatório. As primitivas em layout.css consomem daqui; página nenhuma volta a escrever px de espaço. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 56px; --sp-16: 80px; /* ── Escala tipográfica ─────────────────────────────────────── */ --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; --fs-4xl: 44px; --lh-tight: 1.15; /* números grandes, títulos */ --lh-snug: 1.35; /* rótulos, células */ --lh-normal: 1.55; /* texto corrido */ --tr-tight: -0.02em; /* aperta números grandes */ --tr-wide: 0.08em; /* eyebrow / rótulo em caixa alta */ /* ── Tipografia ───────────────────────────────────────────── Geist (UI) + Geist Mono (números). Vêm do CDN no index.html; degradam para Inter → Segoe UI / Consolas offline. */ --font-sans: 'Geist', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* ── Legado neutralizado ──────────────────────────────────── Glass, aço escovado e glow saíram da direção: brilho lê como decoração, e decoração lê como marketing. Os nomes continuam definidos porque app.css e landing.css ainda os consomem — resolvem para nada visível, e somem de vez quando esses arquivos forem reescritos. Não use nenhum deles em código novo. */ --glass-bg: var(--bg-2); --glass-border: var(--border-0); --glass-blur: 0px; --metal-grad: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%); --metal-edge: linear-gradient(135deg, var(--border-1), var(--border-0)); --brushed-steel: none; --brushed-sheen: none; --glow-accent: 0 0 0 rgba(0, 0, 0, 0); --glow-up: 0 0 0 rgba(0, 0, 0, 0); --glow-down: 0 0 0 rgba(0, 0, 0, 0); } /* ============================================================ Tema claro — desenhado à parte, não é o escuro invertido. Papel levemente quente; a cor de dado é re-degrau para o fundo claro, com o mesmo peso percebido que tem no escuro. ============================================================ */ :root.theme-light { --bg-0: #EDEAE4; --bg-1: #F6F4F0; --bg-2: #FFFFFF; --bg-3: #F1EEE9; --bg-4: #E6E2DA; /* A área de plotagem no tema claro era #FFFFFF puro: um retângulo branco recortado dentro de uma página de papel quente, e a única superfície do app sem temperatura. O token existe justamente para a superfície do gráfico poder divergir do painel — aqui ela recebe o mesmo papel do corpo. */ --surface-chart: #FBF9F6; --border-0: #D2CCC1; --border-1: #AEA89A; --fg-1: #16181C; /* 17.8:1 sobre o painel */ --fg-2: #565B62; /* 6.8:1 */ --fg-3: #61656C; /* 5.9:1 no painel · 4.9:1 na faixa (piso de texto, ver acima) */ --accent: #1D66D6; --accent-h: #1552B5; --on-accent: #FFFFFF; --up: #0A8055; --down: #C4323C; --warn: #7E4D00; /* Degraus mais escuros, só para texto sobre o tint da mesma cor. Medidos compondo o tint sobre o painel: verde 5.2:1 · vermelho 5.2:1. */ --up-ink: #076E49; --down-ink: #B22B34; --warn-ink: #6B4100; --accent-ink: #1857B8; /* Mesmos seis matizes, re-degrau para a superfície clara e revalidados como conjunto sobre #FFFFFF. */ --series-1: #eb6834; --series-2: #1baf7a; --series-3: #4a3aa7; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; /* No claro a rampa ordinal corre no sentido oposto: a fatia maior é a mais escura, porque é ela que mais se destaca do papel. */ --ord-1: #0A5A49; --ord-2: #127058; --ord-3: #1F8E76; --ord-4: #3AA98F; --ord-5: #6BBFA9; --shadow: 0 1px 2px rgba(22, 24, 28, .06); --shadow-1: 0 1px 2px rgba(22, 24, 28, .08); --shadow-2: 0 8px 24px rgba(22, 24, 28, .12); } /* Três das seis séries claras ficam abaixo de 3:1 sobre o papel (água, amarelo, magenta). Isso é aceitável APENAS com rótulo direto visível ou a visão de tabela ao lado — a regra de relevo do validador. Nunca deixe uma dessas carregar significado sozinha. */