/* JLG (JLand Group) brand theme for Chainlit. Colors extracted directly from the real jlandgroup.com.my site (2026-07-07): primary blue #0089F7, secondary navy #1C4960, dark #161922. Chainlit's frontend uses HSL-triplet CSS variables (shadcn/Tailwind convention: "H S% L%", consumed via hsl(var(--x))), not hex — values below are converted. !important on every var: Chainlit's own bundle CSS (index-*.css) declares the same :root/.dark selectors and loads AFTER this file in , so at equal specificity its stock defaults (--primary: 340 92% 52%, hot pink) win the cascade over ours. !important forces this file to win regardless of load order. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); body, html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important; } :root { --background: 210 40% 98% !important; /* pale blue-white, not stock white */ --foreground: 200.3 54.8% 24.3% !important; /* #1C4960 JLG navy — body text */ --card: 0 0% 100% !important; --card-foreground: 200.3 54.8% 24.3% !important; --popover: 0 0% 100% !important; --popover-foreground: 200.3 54.8% 24.3% !important; --primary: 206.7 100% 48.4% !important; /* #0089F7 JLG blue */ --primary-foreground: 0 0% 100% !important; --secondary: 200.3 54.8% 24.3% !important; /* #1C4960 JLG navy */ --secondary-foreground: 0 0% 100% !important; --muted: 210 30% 94% !important; --muted-foreground: 200.3 20% 40% !important; --accent: 178.1 40% 88% !important; /* soft teal tint, from #54D1CD */ --accent-foreground: 200.3 54.8% 24.3% !important; --border: 210 25% 88% !important; --input: 210 25% 90% !important; --ring: 206.7 100% 48.4% !important; --sidebar-background: 210 35% 95% !important; --sidebar-foreground: 200.3 54.8% 24.3% !important; --sidebar-primary: 206.7 100% 48.4% !important; --sidebar-primary-foreground: 0 0% 100% !important; --sidebar-accent: 178.1 40% 88% !important; --sidebar-accent-foreground: 200.3 54.8% 24.3% !important; --sidebar-border: 210 25% 88% !important; --sidebar-ring: 206.7 100% 48.4% !important; } .dark { --background: 225 21% 11% !important; /* #161922 JLG dark */ --foreground: 0 0% 93% !important; --card: 222 19% 16% !important; --card-foreground: 0 0% 93% !important; --popover: 222 19% 16% !important; --popover-foreground: 0 0% 93% !important; --primary: 206.7 100% 48.4% !important; /* #0089F7 JLG blue */ --primary-foreground: 0 0% 100% !important; --secondary: 200.3 40% 22% !important; /* #1C4960-derived, darkened for contrast */ --secondary-foreground: 0 0% 100% !important; --muted: 222 15% 22% !important; --muted-foreground: 0 0% 71% !important; --accent: 200.3 40% 24% !important; --accent-foreground: 0 0% 100% !important; --border: 222 15% 24% !important; --input: 222 15% 22% !important; --ring: 206.7 100% 48.4% !important; --sidebar-background: 225 24% 8% !important; --sidebar-foreground: 0 0% 93% !important; --sidebar-primary: 206.7 100% 48.4% !important; --sidebar-primary-foreground: 0 0% 100% !important; --sidebar-accent: 222 19% 16% !important; --sidebar-accent-foreground: 0 0% 93% !important; --sidebar-border: 222 15% 24% !important; --sidebar-ring: 206.7 100% 48.4% !important; }