/* ============================================================ KINVEST — DESIGN TOKENS ============================================================ Fase A do plano de padronização visual. Todos os tokens usam prefixo `--k-*` para conviver com as variáveis antigas (--bg-primary, etc.) sem conflito. A Fase B vai consumir esses tokens em componentes novos. Tema padrão: CLARO Tema alternativo: ESCURO (via [data-theme="dark"] no ) ============================================================ */ :root { /* ---------- CORES — TEMA CLARO (PADRÃO) ---------- */ /* Superfícies */ --k-bg-app: #f5f6f8; /* fundo do app */ --k-bg-surface: #ffffff; /* cards, modais */ --k-bg-subtle: #eef0f3; /* zonas secundárias, inputs */ --k-bg-hover: #e8ebef; /* hover em rows/items — mais escuro que bg-app pra ser perceptível */ --k-bg-muted: #dde1e6; /* bg de chips neutros */ /* Bordas — reforçadas pra AA (eram quase invisíveis em fundo branco) */ --k-border: #d0d7de; /* borda padrão — sobe de 1.2:1 pra ~1.6:1 */ --k-border-strong: #b1bac4; /* borda em foco/ênfase */ --k-border-subtle: #e5e7eb; /* separadores leves (antigo valor de --k-border) */ /* Texto */ --k-text: #0f172a; /* título/valor principal */ --k-text-body: #1f2937; /* corpo padrão */ --k-text-muted: #475569; /* labels, metadata */ --k-text-subtle: #64748b; /* placeholders, captions — AA (era #94a3b8, reprovava WCAG) */ --k-text-on-accent:#ffffff; /* texto sobre botão colorido */ /* Acentos — identidade Kinvest */ --k-primary: #1f6feb; /* azul Kinvest (links, ações primárias) */ --k-primary-hover: #1a5fd0; --k-primary-soft: rgba(31, 111, 235, 0.10); /* tint para pills/bg suave */ --k-primary-fg: #1f6feb; /* texto sobre tint */ /* Semânticas */ --k-success: #16a34a; /* verde positivo */ --k-success-hover: #15803d; --k-success-soft: rgba(22, 163, 74, 0.12); --k-success-fg: #15803d; --k-danger: #dc2626; /* vermelho negativo */ --k-danger-hover: #b91c1c; --k-danger-soft: rgba(220, 38, 38, 0.10); --k-danger-fg: #b91c1c; --k-warn: #d97706; /* âmbar neutro/alerta (tipo 0,00% do I10) */ --k-warn-hover: #b45309; --k-warn-soft: rgba(217, 119, 6, 0.12); --k-warn-fg: #b45309; --k-gold: #c08a2e; /* VIP/premium badge */ --k-gold-soft: rgba(192, 138, 46, 0.12); --k-gold-fg: #92400e; /* Overlay (modais) — reforçado no claro pra separar modal do conteúdo atrás */ --k-overlay: rgba(15, 23, 42, 0.55); --k-overlay-heavy: rgba(15, 23, 42, 0.72); /* ---------- TIPOGRAFIA ---------- */ --k-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --k-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; /* Escala (base 14px — ajustada à densidade de dashboard financeiro) */ --k-fs-2xs: 0.6875rem; /* 11px — microlabels, captions */ --k-fs-xs: 0.75rem; /* 12px — labels de card, metadata */ --k-fs-sm: 0.8125rem; /* 13px — body secundário, tabela */ --k-fs-base: 0.875rem; /* 14px — body padrão */ --k-fs-md: 0.9375rem; /* 15px — body destacado */ --k-fs-lg: 1.0625rem; /* 17px — título de seção */ --k-fs-xl: 1.25rem; /* 20px — valor destacado de card */ --k-fs-2xl: 1.5rem; /* 24px — título de página */ --k-fs-3xl: 1.875rem; /* 30px — KPI principal */ /* Pesos */ --k-fw-regular: 400; --k-fw-medium: 500; --k-fw-semibold: 600; --k-fw-bold: 700; /* Altura de linha */ --k-lh-tight: 1.2; --k-lh-snug: 1.35; --k-lh-normal: 1.5; --k-lh-relaxed: 1.65; /* ---------- ESPAÇAMENTO (base 4px) ---------- */ --k-sp-0: 0; --k-sp-1: 0.25rem; /* 4px */ --k-sp-2: 0.5rem; /* 8px */ --k-sp-3: 0.75rem; /* 12px */ --k-sp-4: 1rem; /* 16px */ --k-sp-5: 1.25rem; /* 20px */ --k-sp-6: 1.5rem; /* 24px */ --k-sp-8: 2rem; /* 32px */ --k-sp-10: 2.5rem; /* 40px */ --k-sp-12: 3rem; /* 48px */ --k-sp-16: 4rem; /* 64px */ /* ---------- RAIOS (suaves, 8-12px) ---------- */ --k-r-xs: 4px; /* chips pequenos */ --k-r-sm: 6px; /* inputs, botões pequenos */ --k-r-md: 8px; /* botões, cards pequenos */ --k-r-lg: 10px; /* cards */ --k-r-xl: 12px; /* modais */ --k-r-pill: 999px; /* pills, avatars */ /* ---------- SOMBRAS ---------- */ /* Sombras reforçadas no claro — antes eram quase invisíveis (4% alpha) e a hierarquia de cards dependia delas */ --k-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08); --k-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06); --k-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06); --k-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.16), 0 4px 8px rgba(15, 23, 42, 0.08); --k-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.20); /* Focus ring — opacidade subiu pra ficar perceptível em fundo claro */ --k-ring: 0 0 0 3px rgba(31, 111, 235, 0.35); /* ---------- TRANSIÇÕES ---------- */ --k-t-fast: 120ms ease; --k-t-base: 180ms ease; --k-t-slow: 280ms ease; /* ---------- Z-INDEX ---------- */ --k-z-base: 1; --k-z-dropdown: 100; --k-z-sticky: 200; --k-z-overlay: 500; --k-z-modal: 600; --k-z-popover: 700; --k-z-toast: 900; --k-z-max: 9999; /* ---------- LAYOUT ---------- */ --k-container: 1200px; /* max-width central */ --k-topbar-h: 56px; --k-navbar-h: 48px; } /* ============================================================ TEMA ESCURO — override via [data-theme="dark"] (identidade GitHub-like, alinhada ao Kinvest atual) ============================================================ */ [data-theme="dark"] { /* Superfícies */ --k-bg-app: #0d1117; --k-bg-surface: #161b22; --k-bg-subtle: #1c222b; --k-bg-hover: #1f252f; --k-bg-muted: #21262d; /* Bordas */ --k-border: #30363d; --k-border-strong: #484f58; --k-border-subtle: #21262d; /* Texto */ --k-text: #e6edf3; --k-text-body: #c9d1d9; --k-text-muted: #8b949e; --k-text-subtle: #6e7681; --k-text-on-accent:#ffffff; /* Acentos (mais brilhantes no escuro pra contraste) */ --k-primary: #388bfd; --k-primary-hover: #58a6ff; --k-primary-soft: rgba(56, 139, 253, 0.15); --k-primary-fg: #79b8ff; --k-success: #3fb950; --k-success-hover: #56d364; --k-success-soft: rgba(63, 185, 80, 0.15); --k-success-fg: #7ee787; --k-danger: #f85149; --k-danger-hover: #ff7b72; --k-danger-soft: rgba(248, 81, 73, 0.15); --k-danger-fg: #ff7b72; --k-warn: #e3b341; --k-warn-hover: #f0c674; --k-warn-soft: rgba(227, 179, 65, 0.15); --k-warn-fg: #f0c674; --k-gold: #d29922; --k-gold-soft: rgba(210, 153, 34, 0.15); --k-gold-fg: #f0c674; /* Overlay mais opaco no dark */ --k-overlay: rgba(1, 4, 9, 0.7); --k-overlay-heavy: rgba(1, 4, 9, 0.85); /* Sombras maiores no dark */ --k-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --k-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --k-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25); --k-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --k-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); --k-ring: 0 0 0 3px rgba(56, 139, 253, 0.35); } /* ============================================================ RESET MÍNIMO + TIPOGRAFIA BASE (INTER) Só é aplicado em elementos com classe `.k-scope` ou dentro de , para não afetar templates antigos. ============================================================ */ .k-scope, body.k-ready { font-family: var(--k-font-sans); font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter tabular-friendly */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Números tabulares (alinhamento em tabelas financeiras) */ .k-tabular, .k-scope .k-value, .k-scope table td, .k-scope table th { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }