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

@layer base {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :root {
    --bg-primary: #0f1117;
    --bg-secondary: #161b27;
    --bg-card: #1a2035;
    --bg-hover: #1e2640;
    --border: rgba(255, 255, 255, 0.08);
    --border-bright: rgba(255, 255, 255, 0.15);
    --text-primary: #e8eaf6;
    --text-secondary: #8892b0;
    --text-muted: #4a5568;
    --accent: #3b82f6;
    --accent-glow: rgba(59, 130, 246, 0.15);
    --found: #22c55e;
    --found-bg: rgba(34, 197, 94, 0.1);
    --not-found: #ef4444;
    --not-found-bg: rgba(239, 68, 68, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
  }

  html {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
  }

  body {
    min-height: 100vh;
    background: var(--bg-primary);
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

@layer components {
  /* Cards */
  .card {
    @apply rounded-xl border bg-[#1a2035] border-white/[0.08] shadow-lg;
  }

  .card-hover {
    @apply card transition-all duration-200 hover:border-white/20 hover:shadow-xl hover:-translate-y-0.5;
  }

  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg
           bg-blue-600 hover:bg-blue-500 active:bg-blue-700
           text-white text-sm font-semibold
           transition-all duration-150 shadow-lg shadow-blue-900/30
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#0f1117]
           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg
           bg-white/5 hover:bg-white/10 active:bg-white/15
           border border-white/10 hover:border-white/20
           text-gray-300 hover:text-white text-sm font-medium
           transition-all duration-150
           focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-[#0f1117]
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg
           bg-red-500/10 hover:bg-red-500/20
           border border-red-500/30 hover:border-red-500/50
           text-red-400 hover:text-red-300 text-sm font-medium
           transition-all duration-150;
  }

  /* Badge */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold;
  }

  .badge-found {
    @apply badge bg-green-500/15 text-green-400 border border-green-500/30;
  }

  .badge-not-found {
    @apply badge bg-red-500/15 text-red-400 border border-red-500/30;
  }

  .badge-method {
    @apply badge text-xs font-bold px-2 py-0.5 rounded;
  }

  /* Method colors */
  .method-GET { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; }
  .method-POST { @apply bg-green-500/20 text-green-300 border border-green-500/30; }
  .method-PUT { @apply bg-amber-500/20 text-amber-300 border border-amber-500/30; }
  .method-DELETE { @apply bg-red-500/20 text-red-300 border border-red-500/30; }
  .method-PATCH { @apply bg-purple-500/20 text-purple-300 border border-purple-500/30; }
  .method-default { @apply bg-gray-500/20 text-gray-300 border border-gray-500/30; }

  /* Code / monospace */
  .code-block {
    @apply font-mono text-xs bg-black/40 border border-white/5 rounded-lg px-3 py-2
           text-gray-300 overflow-x-auto;
  }

  /* Upload drop zone */
  .drop-zone {
    @apply relative rounded-xl border-2 border-dashed border-white/15
           bg-white/[0.02] hover:bg-white/[0.04] hover:border-blue-500/50
           transition-all duration-200 cursor-pointer
           focus-within:border-blue-500/70 focus-within:bg-blue-500/[0.03];
  }

  .drop-zone-active {
    @apply border-blue-500 bg-blue-500/10;
  }

  /* Input */
  .input-field {
    @apply w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2
           text-sm text-gray-200 placeholder-gray-500
           focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50
           transition-all duration-150;
  }

  /* Divider */
  .divider {
    @apply border-t border-white/[0.06];
  }

  /* Location tag */
  .location-tag {
    @apply inline-flex items-center gap-1 text-xs font-medium
           text-purple-300 bg-purple-500/10 border border-purple-500/20
           px-2 py-0.5 rounded-full;
  }

  /* Match type tag */
  .match-type-tag {
    @apply inline-flex items-center text-xs
           text-blue-300 bg-blue-500/10 border border-blue-500/20
           px-2 py-0.5 rounded-full font-mono;
  }

  /* Context highlight */
  .context-highlight {
    @apply bg-yellow-400/20 text-yellow-300 rounded px-0.5 font-semibold;
  }
}

/* Custom animations */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Glow effects */
.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.text-gradient {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}