/* ============================================================================
   IT-Tools Shared Styles
   ============================================================================ */

/* Dark mode utilities beyond Tailwind */
:root {
  --color-bg-light: #f9fafb;
  --color-bg-dark: #111827;
  --color-border-light: #e5e7eb;
  --color-border-dark: #374151;
}

/* Smooth transitions for dark mode */
body, header, main, section, div {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Code block styling */
pre, code {
  font-family: 'Courier New', monospace;
}

.dark pre {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Light theme contrast improvements */
html:not(.dark) body {
  background: linear-gradient(180deg, #f8f1e6 0%, #efe4d4 100%);
}

html:not(.dark) header {
  background-color: #f5e8d6 !important;
  border-bottom: 1px solid #d1bfa9;
  box-shadow: 0 1px 0 rgba(78, 59, 38, 0.08);
}

html:not(.dark) .rounded-lg.shadow.bg-white,
html:not(.dark) a.block.bg-white.rounded-lg {
  background-color: #fff7eb !important;
  border: 1px solid #dbc6aa;
  box-shadow: 0 10px 24px rgba(78, 59, 38, 0.09);
}

html:not(.dark) .brand-mark {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

html:not(.dark) .brand-logo {
  filter: brightness(1.05) contrast(1.05);
}