@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

.staatliches-regular {
  font-family: "Staatliches", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

/* Smooth transitions for theme switching */
body {
  margin: 0;
}

/* Theme transition styles */
*, *::before, *::after {
  transition: background-color 0.3s ease-in-out,
              color 0.3s ease-in-out,
              border-color 0.3s ease-in-out,
              fill 0.3s ease-in-out;
}

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

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

::-webkit-scrollbar-thumb {
  background: #0B3954;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-track {
  background: #0B3954;
}

.dark ::-webkit-scrollbar-thumb {
  background: #F7F3E3;
}