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

@layer base {
  body {
    @apply bg-surface-900 text-gray-100 font-sans antialiased;
  }
  * {
    @apply box-border;
  }
  ::-webkit-scrollbar {
    @apply w-1.5;
  }
  ::-webkit-scrollbar-track {
    @apply bg-surface-800;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-surface-600 rounded-full;
  }
}

@layer components {
  .field-label {
    @apply block text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-1.5;
  }
  .field-input {
    @apply w-full px-3 py-2.5 text-sm rounded-xl border border-slate-200 dark:border-surface-600 bg-white dark:bg-surface-700 text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 transition;
  }
}
