/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #667eea;
  --ifm-color-primary-dark: #5a6fd8;
  --ifm-color-primary-darker: #5469d1;
  --ifm-color-primary-darkest: #4555ac;
  --ifm-color-primary-light: #7c8df0;
  --ifm-color-primary-lighter: #8294f3;
  --ifm-color-primary-lightest: #a5b1f8;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(102, 126, 234, 0.1);
  --ifm-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --ifm-heading-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --ifm-font-weight-semibold: 600;
  --ifm-font-weight-bold: 700;
  --ifm-font-weight-extrabold: 800;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #a5b1f8;
  --ifm-color-primary-dark: #8b9cf6;
  --ifm-color-primary-darker: #7d8ff5;
  --ifm-color-primary-darkest: #5a6fd8;
  --ifm-color-primary-light: #bfc6fa;
  --ifm-color-primary-lighter: #cdd2fb;
  --ifm-color-primary-lightest: #f0f2ff;
  --docusaurus-highlighted-code-line-bg: rgba(165, 177, 248, 0.2);
  --ifm-background-color: #0f172a;
  --ifm-background-surface-color: #1e293b;
  --ifm-color-emphasis-100: #f1f5f9;
  --ifm-color-emphasis-200: #e2e8f0;
  --ifm-color-emphasis-300: #cbd5e1;
  --ifm-color-emphasis-400: #94a3b8;
  --ifm-color-emphasis-500: #64748b;
  --ifm-color-emphasis-600: #475569;
  --ifm-color-emphasis-700: #334155;
  --ifm-color-emphasis-800: #1e293b;
  --ifm-color-emphasis-900: #0f172a;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ifm-background-surface-color);
}

::-webkit-scrollbar-thumb {
  background: var(--ifm-color-emphasis-400);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ifm-color-emphasis-500);
}

/* Improved button styles */
.button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button--primary {
  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #764ba2 100%);
  color: white;
}

.button--primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4c93 100%);
  color: white;
}

.button--secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.button--secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.button--outline {
  background: transparent;
  border: 2px solid var(--ifm-color-primary);
  color: var(--ifm-color-primary);
}

.button--outline:hover {
  background: var(--ifm-color-primary);
  color: white;
}

/* Improved card styles */
.card {
  border-radius: 12px;
  border: 1px solid var(--ifm-color-emphasis-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Improved typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
  font-weight: 800;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Improved code blocks */
.prism-code {
  border-radius: 8px;
  font-size: 0.875rem;
}

/* Smooth transitions */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Loading animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation: fadeInUp 0.6s ease-out;
}

/* Responsive improvements */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
}
