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

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 10, 10, 20;
  --background-end-rgb: 10, 10, 20;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #4b4b7c;
}

/* Timeline span bars */
.span-bar {
  @apply h-6 rounded relative;
  min-width: 4px;
}

.span-bar-inner {
  @apply absolute inset-0 rounded;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
}

.span-bar-error .span-bar-inner {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Log levels */
.log-level-ERROR { @apply text-red-400; }
.log-level-WARN { @apply text-yellow-400; }
.log-level-INFO { @apply text-blue-400; }
.log-level-DEBUG { @apply text-gray-400; }
.log-level-TRACE { @apply text-gray-500; }

/* Metric cards */
.metric-card {
  @apply bg-gray-900/50 rounded-lg p-4 border border-gray-800;
}

.metric-card:hover {
  @apply border-indigo-500/50;
}
