@import "tailwindcss";

/* Dark theme variables */
:root {
  --primary: #83c5be;
  --secondary: #006d77;
  --accent: #d4a373;
  --bg: #121212;
  --text: #edf6f9;
  --input-bg: #1e1e1e;
  --input-border: #83c5be;
  --card-bg: #1e1e1e;
}

body {
  @apply bg-[var(--bg)] text-[var(--text)] font-sans;
}

.btn {
  @apply px-4 py-2 rounded-lg font-semibold text-white;
  background-color: var(--primary);
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: var(--secondary);
}

.btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.input {
  @apply border rounded-md px-3 py-2 w-full;
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}

.input::placeholder {
  color: #aaaaaa;
}

.card {
  @apply bg-[var(--card-bg)] p-6 rounded-xl shadow-lg;
}

.sidebar {
  @apply bg-[#1b1b1b] p-4 flex flex-col;
}

.sidebar hr {
  @apply border-gray-700 my-4;
}

.sidebar-list {
  @apply flex flex-col gap-2 overflow-y-auto;
}