@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  html,
  body {
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

  html.dark,
  body.dark {
    background-color: rgb(17 24 39); /* gray-900 */
  }

  h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 10px 0;
  }

  h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 12px 0;
  }

  h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 12px 0;
  }

  h4 {
    font-size: 1em;
    font-weight: bold;
    margin: 12px 0;
  }

  h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin: 12px 0;
  }

  h6 {
    font-size: 0.67em;
    font-weight: bold;
    margin: 12px 0;
  }
}

/* Markdown list styles */
.prose ul {
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 1.5em;
}

.prose ol {
  list-style-type: decimal;
  margin: 1em 0;
  padding-left: 1.5em;
}

.prose li {
  margin: 0.5em 0;
  line-height: 1.6;
}

.prose ul ul {
  list-style-type: circle;
  margin: 0.5em 0;
}

.prose ul ul ul {
  list-style-type: square;
}

.prose ol ol {
  list-style-type: lower-alpha;
  margin: 0.5em 0;
}

.prose ol ol ol {
  list-style-type: lower-roman;
}

/* Dark mode support for lists */
.dark .prose ul,
.dark .prose ol,
.dark .prose li {
  color: inherit;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
  margin-top: 3.5rem;
  background: transparent;
}

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

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

/* Dark mode scrollbar */
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.5);
}

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