root-org/src/routes/layout.css

@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Work+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');
@import 'tailwindcss';
@import 'highlight.js/styles/github-dark.css';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@theme {
	/* Colors - Figma Design System */
	--color-background: #05090f;
	--color-night: #0A121F;
	--color-dark: #14243E;
	--color-surface: #0A121F;
	--color-light: #E5E6F0;
	--color-text: #FFFFFF;
	--color-text-muted: rgba(229, 230, 240, 0.5);

	/* Brand - Primary */
	--color-primary: #00A3E0;
	--color-primary-hover: #33b5e6;

	/* Status Colors */
	--color-success: #33E000;
	--color-warning: #FFAB00;
	--color-error: #E03D00;
	--color-info: #00A3E0;

	/* Typography - Figma Fonts */
	--font-heading: 'Tilt Warp', sans-serif;
	--font-body: 'Work Sans', sans-serif;
	--font-input: 'Inter', sans-serif;
	--font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;

	/* Font Sizes - Figma Text Styles (--text-* → text-* utilities) */
	/* Headings (heading font) */
	--text-h1: 32px;
	--text-h2: 28px;
	--text-h3: 24px;
	--text-h4: 20px;
	--text-h5: 16px;
	--text-h6: 14px;
	/* Button text (heading font) */
	--text-btn-lg: 20px;
	--text-btn-md: 16px;
	--text-btn-sm: 14px;
	/* Body text (body font) */
	--text-body: 16px;
	--text-body-md: 14px;
	--text-body-sm: 12px;

	/* Border Radius - Figma Design */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 32px;
	--radius-circle: 128px;
}

/* Base layer — element defaults via Tailwind utilities */
@layer base {
	html, body {
		@apply bg-background text-light font-body antialiased;
	}

	h1 { @apply font-heading font-normal text-h1 leading-normal; }
	h2 { @apply font-heading font-normal text-h2 leading-normal; }
	h3 { @apply font-heading font-normal text-h3 leading-normal; }
	h4 { @apply font-heading font-normal text-h4 leading-normal; }
	h5 { @apply font-heading font-normal text-h5 leading-normal; }
	h6 { @apply font-heading font-normal text-h6 leading-normal; }

	button, [role="button"] { @apply cursor-pointer; }
	button:disabled, [role="button"][aria-disabled="true"] { @apply cursor-not-allowed; }
	a { @apply cursor-pointer; }
	[draggable="true"] { @apply cursor-grab; }
	[draggable="true"]:active { @apply cursor-grabbing; }
}

/* Scrollbar — no Tailwind equivalent for pseudo-elements */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { @apply bg-night rounded-pill; }
::-webkit-scrollbar-thumb:hover { @apply bg-dark; }

/* Focus & Selection — pseudo-elements require raw CSS */
:focus-visible { @apply outline-2 outline-primary outline-offset-2; }
::selection { @apply text-light; background-color: rgba(0, 163, 224, 0.3); }

/* Prose/Markdown styles — used by the TipTap editor */
@layer components {
	.prose { @apply leading-relaxed; }
	.prose p { @apply my-2; }
	.prose strong { @apply font-bold text-light; }
	.prose code { @apply bg-night px-1.5 py-0.5 rounded text-primary text-[0.9em]; font-family: 'Consolas', 'Monaco', monospace; }
	.prose pre { @apply bg-night p-4 rounded-sm overflow-x-auto my-2; }
	.prose pre code { @apply bg-transparent p-0 text-light; }
	.prose blockquote { @apply border-l-3 border-primary pl-4 my-2 text-text-muted italic; }
	.prose ul, .prose ol { @apply pl-6 my-2; }
	.prose ul { @apply list-disc; }
	.prose ol { @apply list-decimal; }
	.prose li { @apply my-1; }
	.prose h1, .prose h2, .prose h3, .prose h4 { @apply text-light font-heading; margin: 0.75em 0 0.5em; }
	.prose a { @apply text-primary underline; }
	.prose hr { @apply border-t border-dark my-4; }
	.prose img { @apply max-w-full rounded-sm; }
	.prose table { @apply w-full border-collapse my-2; }
	.prose th, .prose td { @apply border border-dark p-2 text-left; }
	.prose th { @apply bg-night font-semibold; }
}

/* Chat: Inline Twemoji sizing */
.twemoji-inline {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
	margin: 0 0.05em;
}

/* Chat: Emoji-only messages show larger emojis */
.emoji-only .twemoji-inline {
	width: 2.8em;
	height: 2.8em;
	vertical-align: -0.3em;
	margin: 0 0.075em;
}

.twemoji {
	display: inline-block;
	vertical-align: -0.1em;
}

/* Chat: Mention styles */
.mention-ping {
	background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
	color: var(--color-primary);
	padding: 0 0.25em;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	font-size: inherit;
	font-family: inherit;
	border: none;
	transition: background-color 150ms ease;
}

.mention-ping:hover {
	background-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
	text-decoration: underline;
}

.mention-everyone {
	background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
	color: var(--color-warning);
}

.mention-everyone:hover {
	background-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

/* Chat: Message highlight animation for reply scroll */
@keyframes message-highlight {
	0%, 100% { background-color: transparent; }
	50% { background-color: rgba(0, 163, 224, 0.2); }
}

.message-highlight {
	animation: message-highlight 1s ease-in-out 2;
}