@import 'tailwindcss';
@import '@manacore/shared-tailwind/themes.css';

/* Scan shared packages for Tailwind classes */
@source '../../../packages/shared/src';
@source '../../../../../packages/shared-ui/src';
@source '../../../../../packages/shared-icons/src';
@source '../../../../../packages/shared-auth-ui/src';
@source '../../../../../packages/shared-theme-ui/src';
@source '../../../../../packages/shared-branding/src';

@layer base {
	:root {
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.5rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
	}

	body {
		@apply bg-background text-foreground;
	}
}

/* Fade-in animation */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in {
	animation: fade-in 0.3s ease-out;
}

/* Custom scrollbar for chat */
.chat-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.chat-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.chat-scrollbar::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

.chat-scrollbar::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.25);
}

.dark .chat-scrollbar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
}

.dark .chat-scrollbar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Elevation utilities - semantic surface styles */
.glass {
	@apply bg-surface-elevated border border-border;
}

.glass-card {
	@apply bg-surface border border-border;
}

.glass-button {
	@apply bg-surface border border-border hover:bg-surface-hover hover:shadow-lg transition-all duration-200;
}

/* iOS Safe Area Insets for PWA */
.safe-area-top {
	padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-left {
	padding-left: env(safe-area-inset-left, 0px);
}

.safe-area-right {
	padding-right: env(safe-area-inset-right, 0px);
}

.safe-area-x {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

.safe-area-y {
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-all {
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}
