/* ============================================================================= FvInvest — Design Tokens ----------------------------------------------------------------------------- Fonte única das cores, tipografia, espaçamento e elevação da interface. NENHUMA cor hex deve aparecer solta em .cshtml ou em outros CSS — sempre referenciar um token daqui via var(--fv-*). Mecânica de tema (decisão 2026-09-07): - → tema claro - → tema escuro - sem atributo → segue prefers-color-scheme do SO A escolha do usuário é persistida em localStorage (chave "fv.tema") e aplicada no antes do corpo renderizar, para não haver flash. Navbar e sidebar usam a família "chrome" e NÃO mudam entre os temas — o azul-escuro da marca é assinatura constante. Só o conteúdo (bg/superfícies) troca no tema escuro. ========================================================================== */ :root { /* --------------------------------------------------------------------------- Escala de azul da marca — kit oficial FV Computer: navy #0F1B2B · acento #5B83C1 · apoio escuro #16243C / #080E18. Use nomes semânticos (--fv-accent, --fv-chrome-bg, …) nas telas; a escala crua é para derivar os semânticos e casos pontuais. ------------------------------------------------------------------------- */ --fv-brand-950: #080e18; /* apoio escuro (kit) */ --fv-brand-900: #0f1b2b; /* navy da marca (kit) — navbar, sidebar */ --fv-brand-800: #16243c; /* apoio (kit) */ --fv-brand-700: #1e3454; /* cabeçalho de grid */ --fv-brand-600: #2a4a74; --fv-brand-500: #3b6098; --fv-brand-400: #5b83c1; /* acento da marca (kit) */ --fv-brand-300: #86a6d3; --fv-brand-200: #b3c8e4; --fv-brand-100: #d9e3f1; --fv-brand-50: #eff3f9; /* Acento da marca puro (kit) — uso decorativo (gráficos, marca d'água). Não usar como fundo de botão: contraste com texto branco reprova AA. */ --fv-brand-accent: #5b83c1; /* --------------------------------------------------------------------------- Acento — azul de AÇÃO: link, botão primário, item de menu ativo, foco. Derivado da família da marca, escurecido para passar AA com texto branco. Contraste: branco sobre --fv-accent ≈ 6.4:1; --fv-accent sobre --fv-bg ≈ 6:1. ------------------------------------------------------------------------- */ --fv-accent: #2f5f9e; --fv-accent-hover: #244b7e; --fv-accent-soft: #e6edf7; /* fundo de item ativo / badge / seleção suave */ --fv-focus-ring: #5b83c1; /* --------------------------------------------------------------------------- Neutros — dessaturados puxando para o azul (não cinza puro), para o conjunto "puxar" para a marca. ------------------------------------------------------------------------- */ --fv-bg: #f4f7fb; /* fundo da página */ --fv-surface: #ffffff; /* card, tabela, modal */ --fv-surface-2: #eef3f9; /* hover de linha, zebra, faixas suaves */ --fv-border: #d8e0ea; /* Cabeçalho de grid — azul-escuro sólido, para dar destaque (preferência do Felipe) */ --fv-table-header-bg: #1e3454; /* = --fv-brand-700 */ --fv-table-header-text: #ffffff; --fv-border-strong: #c2cedd; --fv-text: #1a2b3d; /* texto principal */ --fv-text-soft: #5a6b7d; /* legendas, labels, texto secundário */ --fv-text-faint: #8a99a8; /* placeholder, texto desabilitado */ /* --------------------------------------------------------------------------- Chrome — navbar + sidebar. Iguais nos dois temas. ------------------------------------------------------------------------- */ --fv-chrome-bg: #0f1b2b; --fv-chrome-bg-2: #16243c; /* hover de submenu, faixas internas */ --fv-chrome-text: rgba(255, 255, 255, 0.82); --fv-chrome-text-strong: #ffffff; --fv-chrome-hover-bg: rgba(255, 255, 255, 0.08); --fv-chrome-active-bg: rgba(255, 255, 255, 0.14); --fv-chrome-border: rgba(255, 255, 255, 0.10); /* --------------------------------------------------------------------------- Semântico monetário — ÚNICA exceção ao monocromático azul. Uso restrito a valor/percentual de ganho e perda. NUNCA em botão, alerta, status não-monetário. Sempre acompanhar de sinal (+/−) — não depender só da cor. ------------------------------------------------------------------------- */ --fv-money-pos: #157347; /* contraste sobre --fv-surface ≈ 5.9:1 */ --fv-money-pos-soft: #e4f2ea; --fv-money-neg: #b02a37; /* contraste sobre --fv-surface ≈ 6.5:1 */ --fv-money-neg-soft: #f7e6e8; --fv-money-flat: var(--fv-text-soft); /* variação zero */ /* --------------------------------------------------------------------------- Feedback de sistema (operação) — distinto do verde/vermelho de dinheiro. "Salvo com sucesso" usa o AZUL de acento + ícone de check, não verde. Aviso usa âmbar, com parcimônia. Erro pode coincidir visualmente com money-neg (ambos significam "algo deu errado"). ------------------------------------------------------------------------- */ --fv-info: var(--fv-accent); --fv-info-soft: #e3eefa; --fv-warning: #b6791f; --fv-warning-soft: #fbf1df; --fv-danger: #b02a37; --fv-danger-soft: #f7e6e8; --fv-success-op: var(--fv-accent); /* toast de operação bem-sucedida */ --fv-success-op-soft: #e3eefa; /* --------------------------------------------------------------------------- Paleta categórica para gráficos — tons de azul + os monetários quando o gráfico é sobre ganho/perda. Ordene do mais forte para o mais claro. ------------------------------------------------------------------------- */ --fv-chart-1: #0f1b2b; --fv-chart-2: #1e3454; --fv-chart-3: #3b6098; --fv-chart-4: #5b83c1; --fv-chart-5: #86a6d3; --fv-chart-6: #b3c8e4; --fv-chart-grid: #e6ebf2; /* --------------------------------------------------------------------------- Tipografia — IBM Plex Sans (decisão 2026-09-07). Pesos 400/600. Algarismos tabulares nas colunas numéricas via .fv-num / utilitário. Escala fechada: 12 / 13 / 14(base) / 16 / 20 / 24 / 30. ------------------------------------------------------------------------- */ --fv-font-sans: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fv-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --fv-fs-xs: 0.75rem; /* 12 — chip, badge, legenda de gráfico */ --fv-fs-sm: 0.8125rem; /* 13 — tabela densa, labels */ --fv-fs-md: 0.875rem; /* 14 — corpo (base) */ --fv-fs-lg: 1rem; /* 16 — subtítulo, valor de KPI menor */ --fv-fs-xl: 1.25rem; /* 20 — título de card, valor de KPI */ --fv-fs-2xl: 1.5rem; /* 24 — h1 de página */ --fv-fs-3xl: 1.875rem; /* 30 — número de destaque em dashboard */ --fv-fw-regular: 400; --fv-fw-semibold: 600; --fv-lh-tight: 1.25; --fv-lh-normal: 1.5; /* --------------------------------------------------------------------------- Espaçamento — passo base 4px. ------------------------------------------------------------------------- */ --fv-space-1: 0.25rem; /* 4 */ --fv-space-2: 0.5rem; /* 8 */ --fv-space-3: 0.75rem; /* 12 */ --fv-space-4: 1rem; /* 16 */ --fv-space-5: 1.5rem; /* 24 */ --fv-space-6: 2rem; /* 32 */ --fv-space-7: 3rem; /* 48 */ /* --------------------------------------------------------------------------- Raio, borda e elevação. ------------------------------------------------------------------------- */ --fv-radius-sm: 4px; --fv-radius: 6px; /* padrão: card, input, botão */ --fv-radius-lg: 10px; /* modal, painel destacado */ --fv-radius-pill: 999px; --fv-shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06); --fv-shadow: 0 2px 8px rgba(11, 37, 69, 0.08); --fv-shadow-lg: 0 12px 32px rgba(11, 37, 69, 0.16); /* --------------------------------------------------------------------------- Camadas (z-index) — manter centralizado para evitar guerra de valores. ------------------------------------------------------------------------- */ --fv-z-sidebar: 1000; --fv-z-navbar: 1100; --fv-z-dropdown: 1200; --fv-z-modal: 1300; --fv-z-toast: 1400; /* --------------------------------------------------------------------------- Métricas de layout (migradas de temafv1.css). ------------------------------------------------------------------------- */ --fv-sidebar-width: 260px; --fv-sidebar-mini-width: 60px; --fv-navbar-height: 57px; /* Compatibilidade: nome antigo ainda referenciado em telas legadas. Remover quando a varredura da Fase 4 terminar. */ --fv-dark-blue: var(--fv-brand-900); color-scheme: light; } /* ============================================================================= TEMA ESCURO Só a "camada de conteúdo" muda: bg, superfícies, bordas, texto e os monetários (versões mais claras para bater contraste em fundo escuro). Chrome (navbar/sidebar), acento e escala de marca permanecem. FASE 1: só ativa com escolha explícita (data-fv-theme="dark"). O bloco @media (prefers-color-scheme: dark) abaixo fica COMENTADO até o tema escuro ser validado numa tela real e o botão de alternância existir (Fase 2) — assim ninguém cai num tema escuro meio pronto só por causa da config do SO. ========================================================================== */ /* FASE 2 — reativar quando o tema escuro estiver validado: @media (prefers-color-scheme: dark) { :root:not([data-fv-theme="light"]) { (mesmas sobrescritas do bloco :root[data-fv-theme="dark"] abaixo) } } */ :root[data-fv-theme="dark"] { --fv-bg: #0c1626; /* navy do kit, bem escurecido */ --fv-surface: #14223a; /* = apoio #16243C do kit, levemente ajustado */ --fv-surface-2: #1c2e4a; --fv-border: #2a3c5a; --fv-table-header-bg: #24406a; --fv-table-header-text: #ffffff; --fv-border-strong: #3a4f70; --fv-text: #e6ecf5; --fv-text-soft: #9fb0c6; --fv-text-faint: #6f8098; --fv-accent: #6f9bd4; --fv-accent-hover: #8bb0df; --fv-accent-soft: #1d2f4a; --fv-money-pos: #3fb37a; --fv-money-pos-soft: #16301f; --fv-money-neg: #e06b60; --fv-money-neg-soft: #331b1c; --fv-info: #6f9bd4; --fv-info-soft: #1d2f4a; --fv-warning: #d3963a; --fv-warning-soft: #322612; --fv-danger: #e06b60; --fv-danger-soft: #331b1c; --fv-success-op: #6f9bd4; --fv-success-op-soft: #1d2f4a; --fv-chart-1: #6f9bd4; --fv-chart-2: #86a6d3; --fv-chart-3: #b3c8e4; --fv-chart-4: #3b6098; --fv-chart-5: #2a4a74; --fv-chart-6: #1e3454; --fv-chart-grid: #2b3a4d; --fv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --fv-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --fv-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; }