@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&display=swap');

* {
  font-family: 'Sora', sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-surface-subtle text-gray-900 antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark {
  @apply bg-surface-dark text-gray-100;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11, 93, 59, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 93, 59, 0.4); }

/* Selection color */
::selection { background: rgba(255, 140, 0, 0.25); }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, #eef1f0 25%, #f6f8f7 37%, #eef1f0 63%);
  background-size: 1000px 100%;
  @apply animate-shimmer;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1a251d 25%, #212f24 37%, #1a251d 63%);
  background-size: 1000px 100%;
}

/* Hide scrollbar utility, for horizontal chip/category rows */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }