/* BIMA skin for the self-hosted Chatwoot (injected via nginx sub_filter on chat.bima.4bix.ro). Maps Chatwoot v4's Radix color scales + typography onto the BIMA design system: Red Hat Display, square corners, yellow-green accent. */ @import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300..900&family=JetBrains+Mono:wght@400..600&display=swap"); /* Accent: Chatwoot's interactive scales (blue = primary, iris = links/tabs). Steps: 9 solid, 10 hover, 11 text. Light theme ramp. */ :root, html { --blue-9: #a2b31c; --blue-10: #93a319; --blue-11: #7d8b15; --iris-9: #a2b31c; --iris-10: #93a319; --iris-11: #7d8b15; } /* Dark theme ramp (matches --sidebar-primary oklch(0.88 0.2 115)). */ .dark, [data-theme="dark"], html.dark { --blue-9: #d5e34d; --blue-10: #deea6b; --blue-11: #cdda45; --iris-9: #d5e34d; --iris-10: #deea6b; --iris-11: #cdda45; } /* Typography: Red Hat Display everywhere, JetBrains Mono for code/counters. */ body, button, input, select, textarea { font-family: "Red Hat Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif !important; } code, pre, kbd { font-family: "JetBrains Mono", ui-monospace, monospace !important; } /* House rule: square corners. (Avatars keep a hint of shape via images.) */ *, *::before, *::after { border-radius: 0 !important; } /* Selection matches the app. */ ::selection { background: rgba(184, 204, 34, 0.35); } /* Chatwoot v4 "n" tokens compile to literal colors (no CSS vars), so the accent must be overridden at utility-class level. Light theme first. */ .text-n-brand, .text-n-blue-11, .text-n-blue-text { color: #7d8b15 !important; } .bg-n-brand, .after\:bg-n-brand::after, .group:hover .group-hover\:bg-n-brand, .hover\:bg-n-brand:hover { background-color: #a2b31c !important; } .bg-n-blue-3 { background-color: rgba(162, 179, 28, 0.14) !important; } .border-n-brand { border-color: #a2b31c !important; } /* Dark theme (Chatwoot toggles .dark on ). */ body.dark .text-n-brand, body.dark .text-n-blue-11, body.dark .text-n-blue-text { color: #d5e34d !important; } body.dark .bg-n-brand, body.dark .after\:bg-n-brand::after, body.dark .group:hover .group-hover\:bg-n-brand, body.dark .hover\:bg-n-brand:hover { background-color: #d5e34d !important; color: #1c1c14 !important; } body.dark .bg-n-blue-3 { background-color: rgba(213, 227, 77, 0.14) !important; } body.dark .border-n-brand { border-color: #d5e34d !important; }