/* ============================================================================ Prosbound Design Tokens — dark-first, light equivalente, accent por tenant. Nunca use cores arbitrárias fora deste arquivo. ========================================================================== */ :root { /* Accent (sobrescrito por tenant via inline style em ) */ --accent: #6E7BFF; --accent-rgb: 110, 123, 255; --accent-2: #22D3EE; --accent-2-rgb: 34, 211, 238; --accent-contrast: #ffffff; --accent-soft: rgba(var(--accent-rgb), 0.14); --accent-softer: rgba(var(--accent-rgb), 0.07); --accent-ring: rgba(var(--accent-rgb), 0.35); /* Semântica (dark) */ --success: #3DD68C; --success-rgb: 61, 214, 140; --warning: #F5B544; --warning-rgb: 245, 181, 68; --danger: #F0625D; --danger-rgb: 240, 98, 93; --info: #5AB0FF; --info-rgb: 90, 176, 255; /* Superfícies (dark) */ --bg: #0A0B0E; --bg-rgb: 10, 11, 14; --surface: #101216; --surface-raised: #15181D; --surface-hover: #1B1F26; --surface-overlay: #171A20; --surface-sunken: #0D0E12; --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --border-focus: rgba(var(--accent-rgb), 0.6); /* Texto (dark) */ --text-primary: #ECEEF2; --text-secondary: #9AA1AC; --text-muted: #646B77; --text-inverse: #0F1219; /* Gradientes discretos */ --grad-hero: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.02) 45%, transparent 70%); --grad-score: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-2-rgb), 0.9)); --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)); /* Sombras */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.5); --shadow-lg: 0 24px 64px -16px rgba(0,0,0,0.6); --shadow-drawer: -24px 0 64px -24px rgba(0,0,0,0.7); /* Chart palette (categórica, calibrada para dark) */ --c1: var(--accent); --c2: #22D3EE; --c3: #F5B544; --c4: #3DD68C; --c5: #F472B6; --c6: #A78BFA; --c7: #FB923C; --c8: #94A3B8; --chart-grid: rgba(255,255,255,0.05); --chart-axis: #646B77; /* Tipografia */ --font: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --fs-display: clamp(28px, 2.6vw, 38px); --fs-title: clamp(20px, 1.8vw, 24px); --fs-card: 15px; --fs-body: 13.5px; --fs-meta: 12px; --fs-micro: 11px; --fs-kpi: clamp(28px, 2.4vw, 40px); --lh: 1.55; /* Espaçamento / raio */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; /* Layout */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --content-pad: 24px; /* Motion */ --t-fast: 140ms; --t-base: 200ms; --t-slow: 300ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); color-scheme: dark; } /* ---------------------------------------------------------------- Light */ html[data-theme="light"] { color-scheme: light; --bg: #F5F6F8; --bg-rgb: 245, 246, 248; --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-hover: #F0F2F5; --surface-overlay: #FFFFFF; --surface-sunken: #EEF0F3; --border: rgba(15, 18, 25, 0.08); --border-strong: rgba(15, 18, 25, 0.16); --text-primary: #0F1219; --text-secondary: #5B6472; --text-muted: #9AA1AC; --text-inverse: #FFFFFF; --success: #17A36A; --success-rgb: 23, 163, 106; --warning: #D18A0E; --warning-rgb: 209, 138, 14; --danger: #D93F3A; --danger-rgb: 217, 63, 58; --info: #2A7FD6; --info-rgb: 42, 127, 214; --accent-soft: rgba(var(--accent-rgb), 0.12); --accent-softer: rgba(var(--accent-rgb), 0.06); --grad-hero: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.02) 45%, transparent 70%); --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0)); --shadow-sm: 0 1px 2px rgba(15,18,25,0.06); --shadow-md: 0 8px 24px -10px rgba(15,18,25,0.18); --shadow-lg: 0 24px 64px -20px rgba(15,18,25,0.25); --shadow-drawer: -24px 0 64px -24px rgba(15,18,25,0.25); --c2: #0891B2; --c3: #D18A0E; --c4: #17A36A; --c5: #DB2777; --c6: #7C3AED; --c7: #EA580C; --c8: #64748B; --chart-grid: rgba(15,18,25,0.06); --chart-axis: #9AA1AC; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }