/* === Reset & base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Root background and typography (matches theme background + font) */
body {
  font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  background-color: #f9f9f9; /* matches theme.palette.background.default */
  color: #262626; /* matches theme.palette.text.primary */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anchor defaults */
a {
  color: #1976d2; /* primary main */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #004ba0; /* primary dark */
}

/* === Scrollbar styling (WebKit browsers) === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #737373;
}

/* === Utility classes === */

/* Center container with padding */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Add subtle fade animation for route transitions */
.fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s,
    transform 0.3s;
}

/* === Code blocks / preformatted text === */
pre,
code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* === App container fix for fixed header === */
main {
  padding-top: 64px; /* matches MUI AppBar height */
}