/* Base Styles */
:root {
  --primary: #1e40ff;
  --primary-dark: #1c36db;
  --secondary: #0ea5e9;
  --secondary-dark: #0c92d0;
}

/* Dark Mode Support */
.dark {
  color-scheme: dark;
}

/* Additional dark mode styles */
.dark .prose-dark h1,
.dark .prose-dark h2,
.dark .prose-dark h3,
.dark .prose-dark h4,
.dark .prose-dark h5,
.dark .prose-dark h6 {
  color: #f3f4f6;
}

.dark .prose-dark a {
  color: #93c5fd;
}

.dark .prose-dark strong {
  color: #f3f4f6;
}

.dark .prose-dark ol li:before,
.dark .prose-dark ul li:before {
  color: #9ca3af;
}

.dark .prose-dark hr {
  border-color: #374151;
}

.dark .prose-dark blockquote {
  color: #9ca3af;
  border-left-color: #374151;
}

.dark .prose-dark table th {
  color: #f3f4f6;
}

.dark .prose-dark table td,
.dark .prose-dark table th {
  border-color: #374151;
}

.dark .prose-dark code {
  color: #f3f4f6;
  background-color: #1f2937;
}

/* Custom Components */
.btn-primary {
  background-color: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: white;
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  border: 1px solid var(--primary);
}

.btn-secondary:hover {
  background-color: #f3f4f6;
}

/* Slider Styles */
.noUi-connect {
  background: var(--primary);
}

.noUi-horizontal .noUi-handle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
}

.noUi-handle:after,
.noUi-handle:before {
  display: none;
}

/* Custom Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

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

/* Responsive Adjustments */
@media (max-width: 640px) {
  .sm-hidden {
    display: none;
  }
}