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

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

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

.main-header {
  @apply text-5xl font-bold bg-gradient-to-r from-primary-500 to-primary-300 bg-clip-text text-transparent mb-2;
}

.sub-header {
  @apply text-gray-600 text-lg mb-8;
}

.metric-card {
  @apply bg-gradient-to-br from-gradient-start to-gradient-end p-6 rounded-lg text-white shadow-lg;
}

.metric-value {
  @apply text-4xl font-bold;
}

.metric-label {
  @apply text-sm opacity-90;
}

.status-success {
  @apply text-green-500 font-bold;
}

.status-warning {
  @apply text-yellow-500 font-bold;
}

.status-error {
  @apply text-red-500 font-bold;
}

.code-block {
  @apply bg-gray-50 border-l-4 border-primary-500 p-4 rounded-r-lg font-mono text-sm;
}

.anycoder-link {
  @apply fixed top-4 right-4 bg-gradient-to-r from-primary-500 to-primary-300 text-white px-4 py-2 rounded-full font-semibold text-sm z-50 hover:scale-105 transition-transform;
}

.nav-item {
  @apply p-3 my-1 rounded-lg cursor-pointer transition-all hover:bg-gray-100;
}

.nav-item.active {
  @apply bg-primary-500 text-white;
}

.progress-container {
  @apply bg-gray-200 rounded-full h-5 overflow-hidden;
}

.progress-bar {
  @apply h-full bg-gradient-to-r from-primary-500 to-primary-300 rounded-full transition-all duration-300;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6 border border-gray-100;
}

.button-primary {
  @apply bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors;
}

.button-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition-colors;
}

.input-field {
  @apply border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500;
}

.select-field {
  @apply border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500;
}