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

:root {
  --panel-bg: #0f1117;
  --panel-card: #161b27;
  --panel-border: #1e2535;
}

* {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--panel-bg);
  color: #e2e8f0;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #0f1117;
}
::-webkit-scrollbar-thumb {
  background: #1e2535;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* Gauge arc */
.gauge-bg {
  fill: none;
  stroke: #1e2535;
}
.gauge-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

/* Heatmap cell */
.heatmap-cell {
  transition: opacity 0.3s ease;
}

/* Glow effects */
.glow-red {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}
.glow-yellow {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.glow-green {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}
.glow-blue {
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}