/* Base styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-primary: #667eea;
  --color-secondary: #feca57;
  --color-accent: #ff9ff3;
  --color-emphasis: #0984e3;
  --color-bg-dark: #2c3e50;
  --color-bg-light: #3498db;
  --transition-standard: all 0.3s ease;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

.font-geist-mono {
  font-family: monospace;
  letter-spacing: -0.03em;
}

/* SVG container styles */
.aspect-w-16 {
  position: relative;
  padding-bottom: 62.5%; /* 10/16 = 0.625 */
}

.aspect-h-10 {
  position: relative;
}

.aspect-w-16 > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Pagination dots */
.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e2e8f0;
  cursor: pointer;
  transition: var(--transition-standard);
}

.pagination-dot.active {
  background-color: var(--color-primary);
  width: 10px;
  height: 10px;
}

/* Blockquote styling */
blockquote {
  position: relative;
  font-style: italic;
}

/* Refined button styles */
button {
  transition: var(--transition-standard);
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(1px);
}

/* Subtle fade-in animation for main content */
main {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .prose {
    font-size: 0.95rem;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  blockquote {
    margin-left: 0;
    margin-right: 0;
  }
}