` no root). Isso garante que, se uma página um dia carregar os dois design systems (ex. widget do Hub dentro do CRM), os valores nunca colidem por ordem de — a cascata normal resolve. ========================================================================== */ /* -------- FONTS ---------------------------------------------------------- Todas as 3 famílias de marca vêm do Google Fonts (hosting oficial — Bebas Neue é publicada lá sob o nome real, não é substituição). */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600;700&display=swap"); /* -------- SCOPE: tokens + base semântica ---------------------------------- */ .bds-scope { /* ---- Brand core (Guia de Aplicação BAUKO — não mudar estes hex) ---- */ --grn: #007c44; /* Pantone 7732C — verde institucional */ --grn-600: #006638; /* hover / pressed */ --grn-700: #00502d; /* verde profundo, headers em fundo claro */ --grn-050: #e6f2ec; /* tint — superfícies sutis */ --grn-100: #c2dfcf; /* tint — chips, divisores */ --gry-900: #1a2b1e; --gry-700: #3c4740; --gry-500: #706f6f; --gry-400: #9a9a9a; --gry-300: #c8ccc9; --gry-200: #e3e6e4; --gry-100: #eef1ef; --gry-050: #f2f5f3; --wht: #ffffff; /* ---- Superfícies semânticas — Hub é mais denso/frio que o CRM ---- */ --bg: #eef2f0; --surface: #ffffff; --surface-2: #f7f9f8; --surface-sunken: #f2f5f3; --border: #e3e6e4; --border-2: #c8ccc9; --tx: #1a2b1e; --tx-2: #3c4740; --tx-3: #706f6f; --tx-inv: #ffffff; --primary: var(--grn); --primary-tx: #ffffff; /* ---- Status semântico (mesmo significado de marca que o CRM) ---- */ --warn: #f4a300; --warn-050: #fff5df; --danger: #c94a4a; --danger-050: #fbe9e9; --ok: #2e8b57; --ok-050: #e3f1ea; --info: #3370b7; --info-050: #e4eef8; /* ---- Data-viz — paleta própria do Hub, mais expressiva que o CRM ---- */ --dv-1: #007c44; /* verde Bauko — série primária */ --dv-2: #f4a300; /* amarelo Komatsu */ --dv-3: #3370b7; /* azul — série secundária */ --dv-4: #d4202a; /* vermelho Manitou */ --dv-5: #6aa84f; /* verde-oliva suave */ --dv-6: #706f6f; /* cinza neutro — "outro/sem dado" */ --dv-7: #fdd922; /* amarelo Bomag */ --dv-8: #8a5fb5; /* violeta suave — série categórica extra */ /* ---- Chips de categoria administrativa (fix do hub_admin.html — eram hex cravados por grupo, agora tokenizados) ---- */ --cat-1: #2b5fa8; --cat-1-bg: #e3ecf8; --cat-2: #9a6b1a; --cat-2-bg: #fbeed7; --cat-3: #6a4b9e; --cat-3-bg: #ece3f7; --cat-4: #a8406b; --cat-4-bg: #f7e2ea; --cat-5: #3b7a72; --cat-5-bg: #e2f0ee; /* ---- Semáforo de frescor de dados (srcbar) ---- */ --fresh-ok: var(--ok); --fresh-warn: var(--warn); --fresh-stale: var(--danger); /* ---- Spacing (base 4px — mesma escala do CRM) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- Radius — mesma escala-base do CRM; corrige a deriva de hub_admin.html (cards em 14px voltam ao padrão 10px) ---- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; /* radius padrão de card, regra de marca */ --r-xl: 14px; --r-pill: 999px; /* ---- Shadow — muito sutil, regra de marca (sem glow, sem cor) ---- */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06); --shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); --shadow-3: 0 6px 20px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.08); --shadow-inset: inset 0 0 0 1px var(--border); /* ---- Motion — só sutil; regra de marca: sem bounce, sem loop decorativo ---- */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms; /* ---- Famílias tipográficas (stack híbrida — igual ao CRM, nunca mudar) ---- */ --ff-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --ff-mono: "DM Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ---- Escala tipográfica — Hub pende maior/mais bold nos KPIs que o CRM ---- */ --fs-kpi-xl: 56px; /* KPI hero, 1-up */ --fs-kpi-lg: 34px; /* KPI padrão */ --fs-kpi-md: 26px; /* KPI compacto (grid denso) */ --fs-h1: 32px; --fs-h2: 22px; --fs-h3: 16px; --fs-body: 14px; --fs-small: 12px; --fs-micro: 11px; --fs-table-head: 10px; --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.45; --ls-display: 0.02em; --ls-caps: 0.06em; --ls-mono: 0; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Base semântica (equivalente a tokens/base.css do bundle) ---- */ background: var(--bg); color: var(--tx); font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .bds-scope * { box-sizing: border-box; } .bds-scope h1, .bds-scope h2, .bds-scope h3 { font-family: var(--ff-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-display); line-height: var(--lh-tight); text-transform: uppercase; color: var(--tx); margin: 0; } .bds-scope h1 { font-size: var(--fs-h1); } .bds-scope h2 { font-size: var(--fs-h2); } .bds-scope h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-caps); } .bds-scope h4, .bds-scope .eyebrow { font-family: var(--ff-body); font-weight: var(--fw-semibold); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--tx); margin: 0; } .bds-scope .eyebrow { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--tx-3); } .bds-scope p { margin: 0 0 var(--s-3); color: var(--tx-2); } .bds-scope code, .bds-scope kbd, .bds-scope samp, .bds-scope .mono, .bds-scope .num { font-family: var(--ff-mono); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: var(--ls-mono); } .bds-scope .num--neg { color: var(--danger); } .bds-scope .num--pos { color: var(--ok); } .bds-scope .num--warn { color: var(--warn); } .bds-scope a { color: var(--grn); text-decoration: none; } .bds-scope a:hover { color: var(--grn-600); text-decoration: underline; text-underline-offset: 2px; } .bds-scope hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; } .bds-scope ::selection { background: var(--grn-100); color: var(--grn-700); }