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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   THEME — edit this block to retheme the app
   Values are RGB channels: R G B
   ───────────────────────────────────────── */
:root {
  /* Accent color (used for buttons, progress, highlights) */
  --accent: 43 97 255;        /* #2B61FF */
  --accent-dark: 26 80 224;   /* #1A50E0 — darker shade for hover states */

  /* Surface colors */
  --bg: 9 9 11;               /* zinc-950 — main app background */
  --surface: 24 24 27;        /* zinc-900 — panels, cards */
  --surface-raised: 39 39 42; /* zinc-800 — inputs, hover states */
  --border-color: 63 63 70;   /* zinc-700 — dividers, borders */

  /* Text */
  --text: 255 255 255;
  --text-muted: 161 161 170;  /* zinc-400 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

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

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

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

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

/* Drag and drop styling */
.dropzone-active {
  border-color: rgb(var(--accent)) !important;
  background-color: rgb(var(--accent) / 0.1) !important;
}