@tailwind base; @tailwind components; @tailwind utilities; /* Default token values (dark). The SDK provider overwrites these on at runtime from the resolved ThemeConfig — this block just prevents a flash and keeps the app styled even before hydration. */ :root { --c-bg: #060608; --c-surface: #08080b; --c-panel: #0e0e13; --c-elevated: #15151c; --c-hover: rgba(255, 255, 255, 0.055); --c-border: rgba(255, 255, 255, 0.08); --c-border-strong: rgba(255, 255, 255, 0.14); --c-ink: #ededf1; --c-muted: #8c8c94; --c-dim: #63636b; --c-accent: #fda913; --c-accent-fg: #1a1205; --c-accent-soft: rgba(253, 169, 19, 0.12); --c-success: #3ecf8e; --c-warning: #f5b544; --c-danger: #f2555a; --c-info: #5b9dff; --r-card: 20px; --r-control: 10px; --r-pill: 999px; --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --brand-gradient: linear-gradient(135deg, #fda913 0%, #ff7a3d 55%, #ff4d6d 100%); } /* Light scheme (no `dark` class). More specific than :root, so it wins before hydration — the provider then applies inline vars post-mount for live theming. This is what makes the light/dark toggle flash-free for returning users. */ html:not(.dark) { --c-bg: #f6f7f9; --c-surface: #ffffff; --c-panel: #ffffff; --c-elevated: #ffffff; --c-hover: rgba(9, 10, 14, 0.045); --c-border: rgba(9, 10, 14, 0.1); --c-border-strong: rgba(9, 10, 14, 0.16); --c-ink: #14151a; --c-muted: #5c6069; --c-dim: #8b909a; --c-accent: #e8920a; --c-accent-fg: #ffffff; --c-accent-soft: rgba(232, 146, 10, 0.12); --c-success: #12915c; --c-warning: #b3730a; --c-danger: #d0353b; --c-info: #2f6fe0; } * { border-color: var(--c-border); } html, body { height: 100%; } /* transient highlight when jumping to a message via a shared link. Plain CSS (outside @layer) so Tailwind never purges it. */ [data-jump-highlight="1"] { background-color: rgba(253, 169, 19, 0.18) !important; transition: background-color 0.3s ease; } body { background: var(--c-bg); color: var(--c-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--c-accent-soft); color: var(--c-ink); } /* thin, theme-aware scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--c-dim); background-clip: padding-box; } @layer components { .brand-mark { background: var(--brand-gradient); } .card { background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--r-card); } .focus-ring { outline: none; } .focus-ring:focus-visible { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); } /* subtle hover row used across lists / messages */ .row-hover:hover { background: var(--c-hover); } /* transient highlight when jumping to a message via a shared link */ .msg-jump { background: var(--c-accent-soft); transition: background 0.3s ease; } } @layer utilities { .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .text-balance { text-wrap: balance; } }