/* ========================================================================== AYETO.ai - web_frontend custom styles The compiled Tailwind stylesheet (static/css/tailwind.css) provides the utilities; this file keeps a few base bits that must apply instantly to avoid a flash of unstyled content. Light/dark: the `dark` class is set on by the anti-FOUC script in base.html before first paint. These rules give the correct page background and color-scheme for each mode right away. ========================================================================== */ :root { color-scheme: light; } html.dark { color-scheme: dark; } html, body { margin: 0; /* neutral-50 (light default) */ background-color: #FBFCFE; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html.dark, html.dark body { /* neutral-900 (dark) */ background-color: #0B0D0E; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Custom scrollbar - light surface by default */ * { scrollbar-color: rgba(159, 166, 173, 0.5) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background-color: rgba(159, 166, 173, 0.5); border-radius: 9999px; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(159, 166, 173, 0.7); } /* Custom scrollbar - dark surface */ html.dark * { scrollbar-color: rgba(99, 107, 116, 0.4) transparent; } html.dark *::-webkit-scrollbar-thumb { background-color: rgba(99, 107, 116, 0.4); } html.dark *::-webkit-scrollbar-thumb:hover { background-color: rgba(99, 107, 116, 0.6); }