app/globals.css

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

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 15, 23, 42;
  --background-end-rgb: 30, 41, 59;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
    135deg,
    rgb(var(--background-start-rgb)) 0%,
    rgb(var(--background-end-rgb)) 100%
  );
  min-height: 100vh;
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Button styles */
.btn-primary {
  @apply px-6 py-3 bg-gradient-to-r from-primary-500 to-accent-500 rounded-xl font-semibold;
  @apply hover:from-primary-600 hover:to-accent-600 transition-all duration-300;
  @apply shadow-lg hover:shadow-primary-500/30;
}

.btn-secondary {
  @apply px-6 py-3 glass rounded-xl font-semibold;
  @apply hover:bg-white/10 transition-all duration-300;
}

/* Input styles */
.input-field {
  @apply w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl;
  @apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20;
  @apply transition-all duration-300 text-white placeholder-white/40;
}

/* Card hover effect */
.hover-lift {
  @apply transition-all duration-300;
}

.hover-lift:hover {
  @apply -translate-y-1 shadow-xl;
}

/* Animate gradient background */
.animate-gradient-bg {
  background: linear-gradient(
    -45deg,
    #0ea5e9,
    #6366f1,
    #d946ef,
    #0ea5e9
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Loading spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Progress bar */
.progress-bar {
  @apply h-2 rounded-full bg-white/10 overflow-hidden;
}

.progress-bar-fill {
  @apply h-full rounded-full transition-all duration-500 ease-out;
  background: linear-gradient(90deg, #0ea5e9 0%, #d946ef 100%);
}

/* Sentiment colors */
.sentiment-positive {
  @apply text-emerald-400;
}

.sentiment-neutral {
  @apply text-yellow-400;
}

.sentiment-negative {
  @apply text-red-400;
}

/* Risk severity colors */
.risk-critical {
  @apply bg-red-500/20 border-red-500/50 text-red-400;
}

.risk-high {
  @apply bg-orange-500/20 border-orange-500/50 text-orange-400;
}

.risk-medium {
  @apply bg-yellow-500/20 border-yellow-500/50 text-yellow-400;
}

.risk-low {
  @apply bg-blue-500/20 border-blue-500/50 text-blue-400;
}