/* ORIGEM: /app/financeiro-portal/design-export/tokens.css (snapshot estável). NAO editar a mao aqui — promover a kit partilhado quando consolidarmos. Copiado para sistema-jmonte em 2026-06-17 (Fase 1 alinhamento visual). */ /* ============================================================================ Design tokens — extraído do Portal Financeiro JMonte (theme.css) Linguagem visual: navy como cor de ação, claro polido (não vidro escuro), densidade alta, dark mode obrigatório, números tabulares. Uso: importe este arquivo PRIMEIRO. Tudo no app deve consumir var(--token); nunca hardcode cor/sombra/raio/fonte. Dark mode via . Fontes: IBM Plex Sans + IBM Plex Mono (Google Fonts). ========================================================================== */ :root{ /* ---- marca (navy = cor de AÇÃO; vermelho = só acento/marca) ------------- */ --brand-900:#15294d; --brand-800:#1d3660; --brand-700:#27497f; --brand-600:#224178; --brand-500:#2b5cb8; --brand-100:#d4dff0; --brand-50:#eef3fb; --accent:#c62828; --accent-bg:#fdecec; /* ---- rampa de cinzas --------------------------------------------------- */ --gray-50:#f8f9fb; --gray-100:#f1f3f7; --gray-200:#e3e7ee; --gray-300:#cdd4e0; --gray-400:#aab2c0; --gray-500:#7b8794; --gray-600:#5a6678; --gray-700:#3e4a5e; --gray-800:#27303f; --gray-900:#1a212c; /* ---- superfícies ------------------------------------------------------- */ --surface:#ffffff; --surface-2:#f6f8fb; --surface-sunken:#eef0f3; --border:#e3e7ee; --border-strong:#c9d1de; /* ---- semânticas (cor SÓ com significado: positivo/negativo/status) ----- */ --success:#2e9e5b; --success-bg:#e6f6ec; --success-fg:#1d7a43; --warning:#e0a106; --warning-bg:#fff7e6; --warning-fg:#8a6100; --danger:#c62828; --danger-bg:#fdecec; --danger-fg:#a91f1f; --info:#2f6fed; --info-bg:#eaf1ff; --info-fg:#27497f; /* ---- texto (use SEMPRE estes p/ texto — sobrevivem ao dark mode) ------- */ --text:#1f2d3d; --text-muted:#7b8794; --text-subtle:#aab2c0; --text-on-brand:#ffffff; /* ---- tipografia -------------------------------------------------------- */ --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace; /* ---- espaçamento (escala 4px) ------------------------------------------ */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; /* ---- raio (card = xl, botão/input = md) -------------------------------- */ --r-sm:8px; --r-md:10px; --r-lg:13px; --r-xl:22px; --r-full:999px; /* ---- sombras em camadas, navy-tinted (elevação 1→4) -------------------- */ --sh-1:0 1px 2px rgba(21,41,77,.04),0 2px 6px rgba(21,41,77,.05); --sh-2:0 1px 3px rgba(21,41,77,.05),0 8px 20px rgba(21,41,77,.07); --sh-3:0 4px 10px rgba(21,41,77,.06),0 20px 44px rgba(21,41,77,.13); --sh-4:0 6px 16px rgba(21,41,77,.10),0 24px 48px rgba(21,41,77,.16); /* ---- movimento --------------------------------------------------------- */ --ease:cubic-bezier(.2,.7,.3,1); /* padrão */ --ease-spring:cubic-bezier(.34,1.56,.64,1);/* overshoot leve */ --ease-soft:cubic-bezier(.33,1,.68,1); --t-fast:120ms; --t:180ms; --t-slow:260ms; color-scheme:light; } [data-theme="dark"]{ --brand-100:#1c2e52; --brand-50:#182645; --accent-bg:#3a1d1f; --gray-50:#161b24; --gray-100:#1c2230; --gray-200:#262e40; --gray-300:#36405a; --gray-400:#566180; --gray-500:#8b96ad; --gray-600:#aeb8cc; --gray-700:#cbd3e3; --gray-800:#e2e7f1; --gray-900:#f2f5fa; --surface:#1a2130; --surface-2:#212a3c; --surface-sunken:#10151f; --border:#2a3347; --border-strong:#3b4760; --success:#3fb56e; --success-bg:#16301f; --success-fg:#6dd397; --warning:#e8b53a; --warning-bg:#332a10; --warning-fg:#ecc873; --danger:#e25555; --danger-bg:#371b1d; --danger-fg:#f08a8a; --info:#5b8ef5; --info-bg:#182645; --info-fg:#9dbcfa; --text:#e8ecf4; --text-muted:#8b96ad; --text-subtle:#566180; /* sombras viram opacas no escuro (navy-tint some sobre fundo escuro) */ --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 10px rgba(0,0,0,.45); --sh-3:0 12px 28px rgba(0,0,0,.55); --sh-4:0 24px 60px rgba(0,0,0,.65); color-scheme:dark; } /* ============================================================================ BASE ========================================================================== */ *{box-sizing:border-box} body{ font-family:var(--font-sans); font-size:var(--fs-base); color:var(--text); background:var(--surface-sunken); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:var(--brand-100);color:var(--text)} :focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:var(--r-sm)} /* números financeiros sempre tabulares */ .num,.kpi .val,td.num{font-variant-numeric:tabular-nums} /* ============================================================================ BOTÕES — .btn / .btn.sm (densidade padrão) / .ghost / .danger ========================================================================== */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--brand-500);color:var(--text-on-brand);border:1px solid transparent; border-radius:var(--r-md);padding:10px 16px;font-size:var(--fs-base);font-weight:600; cursor:pointer;line-height:1.2;font-family:inherit; box-shadow:0 1px 2px rgba(21,41,77,.32),inset 0 1px 0 rgba(255,255,255,.16); transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease); } .btn:hover{background:var(--brand-600);box-shadow:0 3px 10px rgba(21,41,77,.34),inset 0 1px 0 rgba(255,255,255,.16)} .btn:active{transform:translateY(1px)} .btn.sm{padding:7px 12px;font-size:var(--fs-sm)} /* ← padrão de densidade do app */ .btn.lg{padding:12px 20px;font-size:var(--fs-md)} .btn.ghost,.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--sh-1)} .btn.ghost:hover,.btn.secondary:hover{background:var(--surface-2);border-color:var(--border-strong)} .btn.danger{background:var(--danger);color:#fff} .btn.danger:hover{background:var(--danger-fg)} .btn.ghost.danger{background:var(--surface);color:var(--danger);border-color:var(--border)} .btn.ghost.danger:hover{background:var(--danger-bg);border-color:var(--danger)} .btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none} /* ============================================================================ INPUTS / CAMPOS — .field input, select, textarea ========================================================================== */ .field input,.field select,.field textarea,input.ctrl,select.ctrl{ background:var(--surface);color:var(--text);border:1px solid var(--border); border-radius:var(--r-md);padding:8px 10px;font-size:var(--fs-sm);font-family:inherit; transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); } .field input:hover,.field select:hover{border-color:var(--border-strong)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100); } .field input.error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)} .field input[disabled]{background:var(--surface-2);color:var(--text-subtle);cursor:not-allowed} .field label{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);margin-bottom:5px} input::placeholder{color:var(--text-subtle)} /* ============================================================================ CARDS / KPI — card = raio grande, sombra sobe no hover ========================================================================== */ .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease); } .card:hover{box-shadow:var(--sh-2)} .card.click:hover{box-shadow:var(--sh-2);transform:translateY(-2px);cursor:pointer} .kpi .lbl{font-size:var(--fs-xs);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)} .kpi .val{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.3px;margin-top:var(--sp-2);font-variant-numeric:tabular-nums} .kpi .sub{font-size:var(--fs-xs);color:var(--text-subtle);margin-top:var(--sp-1)} /* ============================================================================ PILLS DE STATUS — cor SEMPRE pareada com ícone (nunca status só por cor) ========================================================================== */ .status{ display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600; padding:2px 9px;border-radius:var(--r-full);white-space:nowrap;line-height:1.6; } .status::before{font-size:9px;line-height:1} .status.ok {background:var(--success-bg);color:var(--success-fg)} .status.ok::before{content:'✓';font-size:11px;font-weight:800} .status.bad {background:var(--danger-bg); color:var(--danger-fg)} .status.bad::before{content:'●'} .status.warn{background:var(--warning-bg);color:var(--warning-fg)} .status.warn::before{content:'◐';font-size:11px;font-weight:800} .status.info{background:var(--info-bg); color:var(--info-fg)} .status.info::before{content:'●'} .status.mute{background:var(--gray-100); color:var(--text-muted)} .status.mute::before{content:'⊘';font-size:11px} .pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--r-full);background:var(--gray-100);color:var(--text-muted)} /* ============================================================================ TABELAS — densas, header uppercase, REALCE DE LINHA no hover ========================================================================== */ table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden} th{background:var(--surface-2);text-align:left;font-size:11.5px;color:var(--text-muted); padding:6px 16px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.3px} td{padding:6px 16px;border-bottom:1px solid var(--border);font-size:var(--fs-sm)} tbody tr{transition:background var(--t-fast) var(--ease)} tbody tr:hover{background:var(--brand-50)} /* realce p/ não se perder na linha */ tbody tr.sel{background:var(--brand-100)} /* em relatórios densos com 1ª coluna fixa, cubra-a também: tbody tr:hover td:first-child{background:var(--brand-100)} */