/* ──────────────────────────────────────────────────────────────────── * ISP BI v2 — Design Tokens * Paleta navy + ink (dark) + paper (light) + status (crit/warn/good/info) * Tipografia Inter, spacing 4px, foco WCAG AA * ──────────────────────────────────────────────────────────────────── */ /* ─── Reset minimo ─── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ─── Tipografia ─── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Familia */ --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; /* Tamanhos (escala README) */ --fs-display: 28px; --fs-kpi: 24px; --fs-h1: 22px; --fs-h2: 16px; --fs-body: 14px; --fs-small: 12.5px; --fs-xs: 11.5px; --fs-micro: 10.5px; /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line-heights */ --lh-tight: 1.0; --lh-snug: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.5; /* ─── Paleta navy (marca) ─── */ --navy-50: #eef2fa; --navy-100: #d8e0f0; --navy-200: #adbada; --navy-300: #8aa3d4; --navy-400: #5b7cb8; --navy-500: #1d2a52; --navy-600: #172245; --navy-700: #121c39; --navy-800: #0d152c; --navy-900: #080e1f; /* Gradiente do logo */ --logo-gradient: linear-gradient(to bottom right, #3a59b8, #172245); /* ─── Status (cromaticos só pra status) ─── */ --crit: #ef4444; --crit-10: rgba(239, 68, 68, 0.10); --crit-30: rgba(239, 68, 68, 0.30); --warn: #f59e0b; --warn-10: rgba(245, 158, 11, 0.10); --warn-30: rgba(245, 158, 11, 0.30); --good: #22c55e; --good-10: rgba(34, 197, 94, 0.10); --good-30: rgba(34, 197, 94, 0.30); --info: #3b82f6; --info-10: rgba(59, 130, 246, 0.10); --info-30: rgba(59, 130, 246, 0.30); /* Verde MRR — tom oliva (mantido do produto v1) */ --mrr-line: #6aa03c; --mrr-fill: rgba(106, 160, 60, 0.30); /* ─── Spacing 4px scale ─── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ─── Border-radius ─── */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px; /* ─── Layout ─── */ --container-max: 1400px; --sidebar-w: 220px; --sidebar-collapsed-w: 64px; --topbar-h: 56px; --bottomnav-h: 64px; /* ─── Animacoes ─── */ --ease-in-out: cubic-bezier(.2, .7, .2, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 280ms; } /* ─── Dark mode (DEFAULT) ─── */ :root, html.dark { /* Neutras dark — paleta ink */ --bg-base: #0f1112; --bg-surface: #16161a; --bg-raised: #1c1c20; --bg-hover: #1c1c20; --border-subtle: #222220; --border-strong: #2c2c2e; --text-faint: #3a3a3d; --text-muted: #5a5a5d; --text-secondary: #7c7c7e; --text-tertiary: #a3a39a; --text-emphasis: #cdcdc6; --text-primary: #ececea; /* Sombras dark */ --shadow-soft: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.2); --shadow-pop: 0 10px 30px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2); } /* ─── Light mode (opt-in via classe .light no ) ─── */ html.light { --bg-base: #fafaf9; --bg-surface: #ffffff; --bg-raised: #f4f4f1; --bg-hover: #f4f4f1; --border-subtle: #e7e7e2; --border-strong: #d2d2cb; --text-faint: #b5b5af; --text-muted: #8a8a8d; --text-secondary: #6b6b6e; --text-tertiary: #4a4a4d; --text-emphasis: #2c2c2e; --text-primary: #16161a; --shadow-soft: 0 1px 2px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04); --shadow-pop: 0 8px 24px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); } /* ─── Auto dark/light via prefers-color-scheme se nao tiver classe explicita ─── */ @media (prefers-color-scheme: light) { html:not(.dark):not(.light) { --bg-base: #fafaf9; --bg-surface: #ffffff; --bg-raised: #f4f4f1; --bg-hover: #f4f4f1; --border-subtle: #e7e7e2; --border-strong: #d2d2cb; --text-faint: #b5b5af; --text-muted: #8a8a8d; --text-secondary: #6b6b6e; --text-tertiary: #4a4a4d; --text-emphasis: #2c2c2e; --text-primary: #16161a; --shadow-soft: 0 1px 2px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04); --shadow-pop: 0 8px 24px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); } } /* ─── Body base ─── */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ─── Tabular numerals em todos os numeros ─── */ .tnum, .v, .kpi, .display, .delta, td, th { font-variant-numeric: tabular-nums; } /* ─── Foco visivel WCAG AA (NAO-NEGOCIAVEL) ─── */ *:focus-visible { outline: 2px solid var(--navy-400); outline-offset: 2px; border-radius: var(--r-sm); } *:focus:not(:focus-visible) { outline: none; } /* ─── Tap area minimo 44x44 ─── */ .tap, button, a.btn, [role="button"], input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; } /* Excecao: pills, tags pequenas dentro de listas (nao sao alvos primarios) */ .tap-sm, .delta-pill, .tag, .pill { min-height: auto; min-width: auto; } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── Scrollbar discreta ─── */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); } *::-webkit-scrollbar-track { background: transparent; } /* ─── Tipografia helpers ─── */ .t-display { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); } .t-kpi { font-size: var(--fs-kpi); font-weight: var(--fw-semibold); line-height: var(--lh-tight); } .t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .t-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); } .t-small { font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: var(--lh-normal); } .t-xs { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-normal); } .t-micro { font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } /* ─── Cores de texto helpers ─── */ .text-primary { color: var(--text-primary); } .text-emphasis { color: var(--text-emphasis); } .text-tertiary { color: var(--text-tertiary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-crit { color: var(--crit); } .text-warn { color: var(--warn); } .text-good { color: var(--good); } .text-info { color: var(--info); } /* ─── Skip link (acessibilidade) ─── */ .skip-link { position: absolute; top: -100px; left: var(--sp-4); background: var(--navy-500); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); z-index: 1000; font-weight: var(--fw-medium); } .skip-link:focus { top: var(--sp-4); }