:root { /* Primary - Trusted Indigo */ --color-primary: oklch(0.45 0.12 255); --color-primary-hex: #3B5998; --color-primary-hover: oklch(0.40 0.12 255); --color-primary-light: oklch(0.92 0.03 255); /* Accent - Amber */ --color-accent: oklch(0.75 0.15 75); --color-accent-hex: #D4920A; /* Semantic */ --color-success: #0D9668; --color-warning: #D4920A; --color-error: #DC2626; --color-info: #2B8CA3; /* Chart palette */ --chart-1: #3B5998; --chart-2: #0D9668; --chart-3: #D4920A; --chart-4: #7C4DBA; --chart-5: #2B8CA3; /* Neutral */ --color-bg: #F8F9FB; --color-bg-card: #FFFFFF; --color-bg-sidebar: #1E2433; --color-text-primary: #1A1F2E; --color-text-secondary: #6B7280; --color-text-muted: #9CA3AF; --color-border: #E5E7EB; /* Typography */ --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-code: 'JetBrains Mono', 'Fira Code', monospace; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Border radius */ --radius-btn: 8px; --radius-card: 12px; --radius-modal: 16px; --radius-pill: 9999px; /* Easing */ --ease-default: cubic-bezier(0.25, 1, 0.5, 1); --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --duration-hover: 200ms; --duration-entrance: 600ms; --duration-collapse: 300ms; /* Z-index */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 9999; /* Sidebar */ --sidebar-width: 240px; --sidebar-collapsed-width: 64px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { margin: 0; padding: 0; overflow-x: hidden; } html { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; } code, pre { font-family: var(--font-code); } a { color: var(--color-primary-hex); text-decoration: none; } a:hover { text-decoration: underline; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* Tabular figures for numbers */ .tabular-nums { font-variant-numeric: tabular-nums; }