@import 'tailwindcss';
@plugin '@tailwindcss/typography';

/* Apple-inspired system fonts */
:root {
	--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

body {
	font-family: var(--font-system);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.font-mono {
	font-family: var(--font-mono);
}

/* Smooth focus rings like Apple's design */
.focus-ring {
	@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Custom button styles */
.btn-primary {
	@apply bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200;
}

.btn-secondary {
	@apply bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-medium hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200;
}

/* Apple-style cards */
.card {
	@apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
}

.card-header {
	@apply bg-gray-50 px-6 py-4 border-b border-gray-200;
}

/* Smooth animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

/* Apple-style selection */
::selection {
	background-color: #3b82f6;
	color: white;
}

::-moz-selection {
	background-color: #3b82f6;
	color: white;
}

/* Custom scrollbar that matches Apple design */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

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

::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.2);
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, 0.3);
	}
}
