/* ══════════════════════════════════════════════════════════════ PERITO DESIGN SYSTEM · TOKENS v4.2 ────────────────────────────────────────────────────────────── Fonte única da paleta institucional + escala semântica + métricas. Todos os módulos (Hub, Fontes, Plano, Perito, Gestor) leem daqui. Histórico: v4.0 · 03/05/2026 · paleta + métricas + escala semântica inicial v4.1 · 19/05/2026 · escala tipográfica (10 fs + 4 fw + 3 lh) v4.2 · 19/05/2026 · 3 paletas de gráfico (semântica / severidade / categórica) ══════════════════════════════════════════════════════════════ */ :root { /* ━━━━ MARCA ━━━━ */ --primary: #381D54; --primary-dark: #2A1640; --primary-soft: rgba(56, 29, 84, .08); --accent: #58C8DC; --accent-dark: #3A9FB3; --accent-soft: rgba(88, 200, 220, .08); --gold: #D1A950; --gold-dark: #B8923F; --gold-soft: rgba(209, 169, 80, .12); --sidebar: #381D54; /* ━━━━ NEUTROS ━━━━ */ --bg: #f5f5f6; --bg-soft: #fafafb; --card: #ffffff; --borda: #e4e4e7; --borda-soft: #f0f0f2; --txt: #1f2937; --sub: #6b7280; --muted: #9ca3af; /* ━━━━ SEMÂNTICA (estados unificados) ━━━━ */ --crit: #b91c1c; --crit-bg: #fef2f2; --crit-soft: rgba(185, 28, 28, .08); --warn: #b45309; --warn-bg: #fffbeb; --warn-soft: rgba(180, 83, 9, .08); --ok: #05AB34; --ok-bg: #e6f8ec; --ok-soft: rgba(5, 171, 52, .08); --info: #381D54; --info-bg: #eef2f2; --info-soft: rgba(56, 29, 84, .08); --neutral: #64748b; --neutral-bg: #f1f5f9; /* Aliases legados (não use em código novo) */ --err: var(--crit); --err-bg: var(--crit-bg); --sem-crit: var(--crit); --sem-crit-bg: var(--crit-bg); --sem-warn: var(--warn); --sem-warn-bg: var(--warn-bg); --sem-ok: var(--ok); --sem-ok-bg: var(--ok-bg); --sem-info: var(--info); --sem-info-bg: var(--info-bg); --sem-neutral: var(--neutral); --sem-neutral-bg: var(--neutral-bg); /* ━━━━ ELEVAÇÃO (4 níveis) ━━━━ */ --shadow-xs: 0 1px 2px rgba(15,32,32,.04), 0 1px 1px rgba(15,32,32,.02); --shadow: 0 1px 3px rgba(15,32,32,.08), 0 1px 2px rgba(15,32,32,.04); --shadow-md: 0 4px 16px rgba(15,32,32,.10), 0 2px 4px rgba(15,32,32,.05); --shadow-lg: 0 12px 32px rgba(15,32,32,.14), 0 4px 8px rgba(15,32,32,.06); /* ━━━━ Z-INDEX ━━━━ */ --z-sticky: 100; --z-dropdown: 500; --z-overlay: 8000; --z-drawer: 8500; --z-modal: 9000; --z-toast: 9500; --z-tooltip: 10000; /* ━━━━ EASINGS ━━━━ */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); /* ━━━━ MÉTRICAS ━━━━ */ --sidebar-w: 240px; --topbar-h: 60px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --gap: 16px; --gap-sm: 8px; --gap-lg: 24px; /* ━━━━ TIPOGRAFIA · famílias ━━━━ */ --font-ui: 'Barlow', system-ui, -apple-system, sans-serif; --font-display: 'Barlow Condensed', 'Barlow', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* ━━━━ TIPOGRAFIA · escala (v4.1) ━━━━ */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 32px; /* ━━━━ TIPOGRAFIA · pesos (v4.1) ━━━━ */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ━━━━ TIPOGRAFIA · line-heights (v4.1) ━━━━ */ --lh-tight: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.6; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PALETAS DE GRÁFICO (v4.2) ────────────────────────────────────────────────────────── Use APENAS estas variáveis em datasets, fills, strokes de qualquer dataviz (Chart.js, SVG inline, ECharts, etc). Cores hardcoded em gráficos viraram débito técnico. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ─── PALETA A · semântica por métrica ──────────────────── Use quando a métrica TEM SIGNIFICADO INTRÍNSECO. Ex: descartes (perda) é sempre vermelho onde aparecer. */ --graph-perda: #dc2626; /* descartes, falhas, prejuízo */ --graph-intervencao: #d97706; /* recapagens, manutenção, ajuste */ --graph-saude: #059669; /* aferições, leituras, atividade */ --graph-custo: #0f172a; /* dinheiro, CPK, R$/L */ --graph-volume: #381D54; /* frota, quantidade, escala */ --graph-tempo: #7c3aed; /* dias, horas, duração */ --graph-pressao: #0ea5e9; /* PSI, pressão */ /* ─── PALETA B · severidade (5 níveis) ──────────────────── Use em donuts, barras de distribuição, indicadores que vão de "crítico" até "ideal". Pra binário ok/crítico, usa só --graph-sev-5 e --graph-sev-1. */ --graph-sev-1: #dc2626; /* crítico (perda) */ --graph-sev-2: #ea580c; /* atenção */ --graph-sev-3: #d97706; /* alerta */ --graph-sev-4: #16a34a; /* bom */ --graph-sev-5: #059669; /* ideal */ /* ─── PALETA C · categórica (bipolar · gradiente teal→roxo) ─ Gradiente entre os 2 pólos da marca: teal-Perito e roxo-Perito. 8 pontos amostrados (HSL interpolation). FB.Charts.barra() e .donut() aplicam por padrão o mapeamento "maior valor → teal, menor valor → roxo" (mais importante fica mais vibrante). Use `respeitarOrdem: true` quando a ordem dos dados for semântica (cronológica, alfabética). */ --graph-cat-1: #58c8dc; /* teal-Perito · accent oficial */ --graph-cat-2: #53b0c9; --graph-cat-3: #4f97b5; --graph-cat-4: #4a7fa2; --graph-cat-5: #46668e; --graph-cat-6: #414e7b; --graph-cat-7: #3d3567; --graph-cat-8: #381d54; /* roxo-Perito · primary oficial */ /* ─── Cores auxiliares de gráfico ───────────────────────── Linhas, grids, ticks, eixos. Não use cores neutras do sistema (--sub, --muted) em gráfico porque podem ter contraste baixo demais sobre certas paletas. */ --graph-grid: #e5e7eb; --graph-grid-dash: 3 3; /* stroke-dasharray pro grid tracejado */ --graph-axis: #94a3b8; --graph-axis-strong: #475569; --graph-label: #64748b; --graph-label-strong: #1f2937; } /* ━━━━ Reduce motion · respeita preferência do usuário ━━━━ */ @media (prefers-reduced-motion: reduce) { :root { --ease-out: ease; --ease-back: ease; --ease-soft: ease; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }