index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Typography Improvements */
body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-feature-settings: 'cv11', 'ss01';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Improved serif font for content */
.font-serif {
	font-family: 'Georgia', 'Times New Roman', serif;
	font-feature-settings: 'liga', 'kern';
}

/* Glass Panel Effect */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.dark .glass-panel {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Smooth Focus States */
*:focus-visible {
	outline: 2px solid rgba(99, 102, 241, 0.5);
	outline-offset: 2px;
}

/* Better Text Selection */
::selection {
	background-color: rgba(99, 102, 241, 0.3);
}

.dark ::selection {
	background-color: rgba(99, 102, 241, 0.4);
}

/* Improved Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

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

::-webkit-scrollbar-thumb {
	background: rgba(156, 163, 175, 0.4);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(156, 163, 175, 0.6);
}

.dark ::-webkit-scrollbar-thumb {
	background: rgba(75, 85, 99, 0.5);
}

.dark ::-webkit-scrollbar-thumb:hover {
	background: rgba(75, 85, 99, 0.7);
}

/* Blog Content Improvements */
.prose {
	--tw-prose-bullets: theme('colors.brand.500');
	--tw-prose-counters: theme('colors.brand.600');
}

.dark .prose {
	--tw-prose-invert-bullets: theme('colors.brand.400');
	--tw-prose-invert-counters: theme('colors.brand.400');
}

/* List styling for better readability */
.prose ul > li::marker {
	color: var(--tw-prose-bullets);
}

.prose ol > li::marker {
	color: var(--tw-prose-counters);
	font-weight: 600;
}

/* Blockquote improvements */
.prose blockquote {
	position: relative;
	quotes: none;
}

.prose blockquote::before {
	content: '"';
	position: absolute;
	left: -0.5rem;
	top: -0.5rem;
	font-size: 3rem;
	color: theme('colors.brand.200');
	font-family: Georgia, serif;
	line-height: 1;
}

.dark .prose blockquote::before {
	color: theme('colors.brand.800');
}

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

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

/* Pulse effect for loading states */
@keyframes gentle-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.animate-gentle-pulse {
	animation: gentle-pulse 2s ease-in-out infinite;
}

/* Better link hover effect */
.prose a {
	transition: all 0.2s ease;
}

/* Code block improvements */
.prose pre {
	position: relative;
}

.prose pre code {
	font-size: 0.875rem;
	line-height: 1.7;
}

/* Improved heading spacing in blog content */
.prose h2 {
	margin-top: 2.5em;
	margin-bottom: 0.75em;
}

.prose h3 {
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.prose h4 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

/* First paragraph after heading - no margin top */
.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
	margin-top: 0;
}

/* Better paragraph spacing */
.prose p + p {
	margin-top: 1.25em;
}

/* Responsive improvements */
@media (max-width: 768px) {
	.prose {
		font-size: 1rem;
	}
	
	.prose blockquote {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.prose blockquote::before {
		font-size: 2rem;
		left: -0.25rem;
	}
}

/* Print styles */
@media print {
	.glass-panel {
		background: white;
		backdrop-filter: none;
		box-shadow: none;
		border: 1px solid #e5e7eb;
	}
	
	nav, aside, .no-print {
		display: none !important;
	}
}