/* ========================================================= BuscaEPI Design System — Typography Tokens Figtree · Escala de 12 graus · Tokens --be-fs-* / --be-fw-* ========================================================= */ /* ---------- 1. Figtree ---------- */ /* A fonte é carregada via no do master page (preconnect + stylesheet) — mais rápido que @import e permite preconnect. */ /* ---------- 2. Design tokens ---------- */ :root { /* Família */ --be-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Pesos */ --be-fw-regular: 400; --be-fw-medium: 500; --be-fw-semibold: 600; --be-fw-bold: 700; --be-fw-extrabold: 800; --be-fw-black: 900; /* Escala tipográfica (12 graus) */ --be-fs-display: 34px; /* Números centro donut chart */ --be-fs-metric: 30px; /* Valores KPI nos dashboards */ --be-fs-h1: 26px; /* Título de página */ --be-fs-h2: 16px; /* Título de seção */ --be-fs-h3: 15.5px; /* Título card / painel */ --be-fs-h4: 14.5px; /* Título form section, tabs, itens nav */ --be-fs-body: 14px; /* Tabelas, inputs, alertas */ --be-fs-sm: 13px; /* Labels KPI, sub-bar, legendas gráfico */ --be-fs-meta: 12.5px; /* Breadcrumb, labels campo, sub-célula */ --be-fs-xs: 12px; /* Help text sob campos */ --be-fs-overline: 11.5px; /* Cabeçalhos tabela, badges de status */ --be-fs-micro: 10.5px; /* Labels grupo sidebar, badge ambiente */ /* Bootstrap 5 — componentes nativos herdam Figtree automaticamente */ --bs-font-sans-serif: var(--be-font); /* Cores de texto — hierarquia da marca (quente) */ --be-ink: #2b2829; /* Principal — corpo, títulos, valores */ --be-ink-title: #413b3c; /* Títulos de dashboard suavizados (evita preto duro) */ --be-ink-soft: #6b6769; /* Secundário — labels, subtítulos, sub-célula */ --be-ink-mute: #98959a; /* Terciário — help text, legendas, placeholders */ /* Superfícies — fundo das TELAS (body e wrappers full-screen). Não se aplica ao menu: sidebar e topbar continuam brancos. */ --be-bg: #FAF9F9; } /* ---------- 3. Base body ---------- */ body { font-family: var(--be-font); font-size: var(--be-fs-body); color: var(--be-ink); letter-spacing: -0.01em; } /* ---------- 4. Headings HTML ---------- */ h1 { font-size: var(--be-fs-h1); font-weight: var(--be-fw-extrabold); letter-spacing: -0.025em; line-height: 1.1; } h2 { font-size: var(--be-fs-h2); font-weight: var(--be-fw-extrabold); letter-spacing: -0.02em; line-height: 1.2; } h3 { font-size: var(--be-fs-h3); font-weight: var(--be-fw-bold); letter-spacing: -0.015em; line-height: 1.25; } h4 { font-size: var(--be-fs-h4); font-weight: var(--be-fw-extrabold); letter-spacing: -0.01em; line-height: 1.3; } /* ---------- 5. Utility classes .be-text-* ---------- */ .be-text-display { font-size: var(--be-fs-display); font-weight: var(--be-fw-extrabold); letter-spacing: -0.03em; line-height: 1.0; font-variant-numeric: tabular-nums; } .be-text-metric { font-size: var(--be-fs-metric); font-weight: var(--be-fw-extrabold); letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .be-text-h1 { font-size: var(--be-fs-h1); font-weight: var(--be-fw-extrabold); letter-spacing: -0.025em; line-height: 1.1; } .be-text-h2 { font-size: var(--be-fs-h2); font-weight: var(--be-fw-extrabold); letter-spacing: -0.02em; } .be-text-h3 { font-size: var(--be-fs-h3); font-weight: var(--be-fw-bold); letter-spacing: -0.015em; } .be-text-h4 { font-size: var(--be-fs-h4); font-weight: var(--be-fw-extrabold); letter-spacing: -0.01em; } .be-text-body { font-size: var(--be-fs-body); font-weight: var(--be-fw-regular); line-height: 1.4; } .be-text-body-em { font-size: var(--be-fs-body); font-weight: var(--be-fw-semibold); } .be-text-sm { font-size: var(--be-fs-sm); font-weight: var(--be-fw-semibold); } .be-text-meta { font-size: var(--be-fs-meta); font-weight: var(--be-fw-semibold); letter-spacing: 0.02em; } .be-text-xs { font-size: var(--be-fs-xs); font-weight: var(--be-fw-regular); line-height: 1.4; } .be-text-overline { font-size: var(--be-fs-overline); font-weight: var(--be-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; } .be-text-micro { font-size: var(--be-fs-micro); font-weight: var(--be-fw-extrabold); letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- 6. Componentes ---------- */ /* KPI / dashboard */ .be-kpi__value { font-size: var(--be-fs-metric); font-weight: var(--be-fw-extrabold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.0; } .be-kpi__label { font-size: var(--be-fs-sm); font-weight: var(--be-fw-semibold); color: var(--be-ink-soft); } .be-donut-center .n { font-size: var(--be-fs-display); font-weight: var(--be-fw-extrabold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } /* Tabela */ .be-table tbody td { font-size: var(--be-fs-body); font-weight: var(--be-fw-regular); } .be-table thead th { font-size: var(--be-fs-overline); font-weight: var(--be-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; } .be-cell-strong { font-weight: var(--be-fw-semibold); } .be-cell-sub { font-size: var(--be-fs-meta); font-weight: var(--be-fw-semibold); letter-spacing: 0.02em; color: var(--be-ink-soft); } /* Formulário */ .be-label { font-size: var(--be-fs-meta); font-weight: var(--be-fw-semibold); letter-spacing: 0.02em; } .be-help { font-size: var(--be-fs-xs); font-weight: var(--be-fw-regular); color: var(--be-ink-mute); line-height: 1.4; } /* Badges e ambiente */ .be-badge { font-size: var(--be-fs-overline); font-weight: var(--be-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; } .be-env { font-size: var(--be-fs-micro); font-weight: var(--be-fw-extrabold); letter-spacing: 0.08em; text-transform: uppercase; } /* Breadcrumb */ .be-crumbs, .breadcrumb-item { font-size: var(--be-fs-meta); font-weight: var(--be-fw-semibold); letter-spacing: 0.02em; } /* Números tabulares (datas, documentos, quantidades) */ .be-num { font-variant-numeric: tabular-nums; }