/* Base Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.font-geist-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Dark Mode Styling */
body.dark-mode {
  background-color: #171717;
  color: #e5e5e5;
}

body.dark-mode .bg-white {
  background-color: #1f1f1f;
  border-color: #2d2d2d;
}

body.dark-mode .bg-gray-50 {
  background-color: #171717;
}

body.dark-mode .text-gray-900 {
  color: #e5e5e5;
}

body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600 {
  color: #a3a3a3;
}

body.dark-mode .text-gray-500 {
  color: #737373;
}

body.dark-mode .border-gray-200 {
  border-color: #2d2d2d;
}

body.dark-mode .bg-gray-900 {
  background-color: #0c0c0c;
}

body.dark-mode th,
body.dark-mode thead.bg-gray-50 {
  background-color: #262626;
  color: #d4d4d4;
}

body.dark-mode tbody.bg-white {
  background-color: #1f1f1f;
}

body.dark-mode .bg-blue-50 {
  background-color: #172554;
  border-color: #1e3a8a;
}

body.dark-mode .bg-green-50 {
  background-color: #14532d;
  border-color: #166534;
}

body.dark-mode .bg-yellow-50 {
  background-color: #713f12;
  border-color: #854d0e;
}

body.dark-mode .text-blue-800,
body.dark-mode .text-green-800,
body.dark-mode .text-yellow-800 {
  color: #e5e5e5;
}

body.dark-mode .text-blue-700,
body.dark-mode .text-green-700,
body.dark-mode .text-yellow-700 {
  color: #d4d4d4;
}

body.dark-mode input,
body.dark-mode select {
  background-color: #262626;
  border-color: #404040;
  color: #e5e5e5;
}

body.dark-mode input:focus,
body.dark-mode select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

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

.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

/* Custom section styling */
section {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* Syntax highlighting */
pre {
  border-radius: 0.375rem;
  overflow-x: auto;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Responsive tables */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Custom range input styling */
input[type="range"] {
  -webkit-appearance: none;
  height: 7px;
  background: #e5e7eb;
  border-radius: 5px;
  outline: none;
}

body.dark-mode input[type="range"] {
  background: #4b5563;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4f46e5;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4f46e5;
  cursor: pointer;
}

/* Copy button animation */
.copy-success {
  background-color: #10b981 !important;
}

body.dark-mode .copy-success {
  background-color: #059669 !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Active navigation item */
.nav-active {
  background-color: #f3f4f6;
  color: #4f46e5;
}

body.dark-mode .nav-active {
  background-color: #374151;
  color: #818cf8;
}