/* ============================================================ LEVEL ONE — Tema oficial v1.2 (base Level HUB) Como usar: importe este arquivo DEPOIS do CSS do projeto. As fontes precisam estar no — veja fonts-head.html v1.2: removido todo o suporte a tema escuro (decisão de negócio: nenhum sistema do grupo tem modo escuro). ============================================================ */ :root { /* Azul Level */ --lo-blue-50:#EBF6FC; --lo-blue-100:#D3ECF8; --lo-blue-200:#A8D9F1; --lo-blue-300:#74C2E8; --lo-blue-400:#3FA9DC; --lo-blue-500:#0F91CF; --lo-blue-600:#0C7AB0; --lo-blue-700:#0A648F; --lo-blue-800:#084F72; --lo-blue-900:#063C57; --lo-blue-950:#04293C; /* Grafite */ --lo-gray-50:#F7F7F7; --lo-gray-100:#EFEFEF; --lo-gray-200:#DFDFE0; --lo-gray-300:#C6C7C8; --lo-gray-400:#9A9B9C; --lo-gray-500:#6F7071; --lo-gray-600:#58595A; --lo-gray-700:#434444; --lo-gray-800:#323333; --lo-gray-900:#232424; --lo-gray-950:#161717; /* Semânticas */ --lo-success:#1FA971; --lo-success-text:#157A52; --lo-success-bg:#E6F6EF; --lo-warning:#DE9426; --lo-warning-text:#A66C12; --lo-warning-bg:#FCF3E2; --lo-danger:#D64545; --lo-danger-text:#A32F2F; --lo-danger-bg:#FBEAEA; --lo-info:var(--lo-blue-500); --lo-info-text:var(--lo-blue-700); --lo-info-bg:var(--lo-blue-50); /* Superfícies */ --lo-canvas:#F5F7FA; /* fundo geral das telas */ --lo-surface:#FFFFFF; /* cards, rail, topbar */ --lo-border:var(--lo-gray-200); /* Tipografia */ --lo-font-display:'Sora', system-ui, -apple-system, sans-serif; --lo-font-body:'Inter', system-ui, -apple-system, sans-serif; --lo-font-mono:'JetBrains Mono', ui-monospace, monospace; /* Forma */ --lo-radius:10px; --lo-radius-sm:8px; --lo-skew:-18deg; /* inclinação do "1" — assinatura gráfica */ } /* ---------- Base tipográfica ---------- */ body { font-family: var(--lo-font-body); color: var(--lo-gray-800); background: var(--lo-canvas); } h1, h2, h3, h4, h5, h6, .lo-display { font-family: var(--lo-font-display); font-weight: 700; color: var(--lo-gray-900); letter-spacing: -0.01em; } h1, .lo-h1 { font-weight: 800; } code, kbd, pre, .lo-mono { font-family: var(--lo-font-mono); } /* Números tabulares em valores e tabelas (essencial p/ financeiro) */ table, .lo-valor { font-variant-numeric: tabular-nums; } /* ---------- Assinaturas da marca ---------- */ /* Eyebrow — rótulo espaçado (eco do "C o n t a b i l i d a d e") */ .lo-eyebrow { font-family: var(--lo-font-body); font-size: 11px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--lo-blue-600); } /* Rótulo de KPI — versão compacta do eyebrow */ .lo-kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lo-gray-500); } /* Traço inclinado */ .lo-slash { display: inline-block; width: 32px; height: 5px; background: var(--lo-blue-500); transform: skewX(var(--lo-skew)); border-radius: 1px; vertical-align: middle; } /* ---------- Componentes ---------- */ .lo-card { background: var(--lo-surface); border: 1px solid var(--lo-border); border-radius: var(--lo-radius); } .lo-card--hot { border-left: 3px solid var(--lo-blue-500); } /* cartão/aba em destaque */ .lo-kpi-num { font-family: var(--lo-font-display); font-weight: 800; font-size: 26px; color: var(--lo-gray-900); } .lo-btn { font-family: var(--lo-font-body); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: var(--lo-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; } .lo-btn--primary { background: var(--lo-blue-500); color: #fff; } .lo-btn--primary:hover { background: var(--lo-blue-600); } .lo-btn--secondary{ background: var(--lo-surface); color: var(--lo-gray-700); border-color: var(--lo-gray-300); } .lo-btn--ghost { background: transparent; color: var(--lo-blue-600); } .lo-btn--danger { background: var(--lo-danger); color: #fff; } .lo-input { font-family: var(--lo-font-body); font-size: 14px; padding: 10px 14px; border: 1px solid var(--lo-gray-300); border-radius: var(--lo-radius-sm); color: var(--lo-gray-800); background: var(--lo-surface); } .lo-input:focus { outline: 2px solid var(--lo-blue-300); border-color: var(--lo-blue-500); } .lo-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; display: inline-block; } .lo-badge--success { background: var(--lo-success-bg); color: var(--lo-success-text); } .lo-badge--warning { background: var(--lo-warning-bg); color: var(--lo-warning-text); } .lo-badge--danger { background: var(--lo-danger-bg); color: var(--lo-danger-text); } .lo-badge--info { background: var(--lo-info-bg); color: var(--lo-info-text); } /* Chip de status da topbar (ex.: "Grupo consolidado") */ .lo-chip { font-size: 11.5px; font-weight: 600; color: var(--lo-gray-600); background: var(--lo-gray-50); border: 1px solid var(--lo-border); border-radius: 99px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; } .lo-chip::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--lo-success); }