@tailwind base;
@tailwind components;

/* ---- Reusable components ---- */
@layer components {
  /* Base badge + variants (compose in markup as: class="badge badge-ok") */
  .badge         { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs border; }
  .badge-ok      { @apply bg-green-600/20  text-green-300  border-green-700; }
  .badge-warn    { @apply bg-yellow-600/20 text-yellow-300 border-yellow-700; }
  .badge-danger  { @apply bg-red-600/20    text-red-300    border-red-700; }
  .badge-muted   { @apply bg-gray-700/30   text-gray-300   border-gray-700; }
  .badge-info    { @apply bg-blue-600/20   text-blue-300   border-blue-700; }
  .badge-success { @apply bg-green-600/20 text-green-300 border-green-700; }
  .badge-success-solid { @apply bg-green-600 text-white border-green-600; }


  /* Chips (tags/pills) */
  .chip          { @apply rounded-full bg-gray-800 border border-gray-700 text-gray-300 px-2 py-0.5 text-xs; }

  /* Card container */
  .card          { @apply bg-card border border-gray-800 rounded-xl p-4; }
}

@tailwind utilities;

/* Your earlier override to remove opacity var from gray-800 borders */
@layer utilities {
  .border-gray-800 { border-color: #1f2937; } /* rgb(31,41,55) */
}

/* Optional tiny custom classes */
.card-shadow { box-shadow: 0 1px 2px rgba(0,0,0,.2); }