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

:root {
  --bg:      #0a0e1a;
  --bg2:     #0f1525;
  --bg3:     #151d30;
  --bg4:     #1c2640;
  --border:  #1e2d45;
  --border2: #2a3f5f;
  --text:    #dce8f5;
  --text2:   #7a95b8;
  --text3:   #4a6080;
  --accent:  #5b9ef9;
  --green:   #1fd17a;
  --amber:   #f5a623;
  --red:     #f05252;
  --purple:  #a78bfa;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

.input {
  @apply w-full px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--bg3)]
         text-[var(--text)] text-sm placeholder-[var(--text3)] outline-none
         focus:border-[var(--accent)] transition-colors;
}

.btn-primary {
  @apply px-4 py-2 rounded-lg bg-[var(--accent)] text-white text-sm font-medium
         hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
}

.btn-secondary {
  @apply px-4 py-2 rounded-lg border border-[var(--border2)] text-[var(--text2)] text-sm
         font-medium hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors;
}

.card {
  @apply bg-[var(--bg2)] border border-[var(--border)] rounded-xl p-5;
}