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

@layer base {
  /* Dark theme (default) */
  :root,
  :root.dark {
    --color-bg-primary: #0d1117;
    --color-bg-secondary: #161b22;
    --color-bg-tertiary: #1f2937;
    --color-bg-card: #111827;
    --color-border: #374151;
    --color-border-light: #4b5563;
    --color-text-primary: #f9fafb;
    --color-text-secondary: #9ca3af;
    --color-text-muted: #6b7280;
    color-scheme: dark;
  }

  /* Light theme */
  :root.light {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-card: #ffffff;
    --color-border: #e5e7eb;
    --color-border-light: #d1d5db;
    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    color-scheme: light;
  }

  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  code, .font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  }
}

@layer components {
  .card {
    @apply bg-gray-900 border border-gray-800 rounded-lg;
  }

  .card-header {
    @apply px-4 py-3 border-b border-gray-800;
  }

  .card-body {
    @apply p-4;
  }

  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }

  .btn-primary {
    @apply bg-synor-600 hover:bg-synor-500 text-white;
  }

  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-gray-100;
  }

  .link {
    @apply text-synor-400 hover:text-synor-300 transition-colors;
  }

  .hash {
    @apply font-mono text-sm break-all;
  }

  .stat-value {
    @apply text-2xl font-semibold text-white;
  }

  .stat-label {
    @apply text-sm text-gray-400;
  }

  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-900/50 text-green-400 border border-green-800;
  }

  .badge-warning {
    @apply bg-yellow-900/50 text-yellow-400 border border-yellow-800;
  }

  .badge-info {
    @apply bg-synor-900/50 text-synor-400 border border-synor-800;
  }

  .table-row {
    @apply border-b border-gray-800 hover:bg-gray-800/50 transition-colors;
  }

  .input {
    @apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg
           text-gray-100 placeholder-gray-500 focus:outline-none
           focus:border-synor-500 focus:ring-1 focus:ring-synor-500;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.700') transparent;
  }

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

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: theme('colors.gray.700');
    border-radius: 3px;
  }

  /* Animated gradient text */
  .animate-gradient {
    animation: gradient-shift 3s ease infinite;
  }

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

  /* Staggered fade-in for cards */
  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
    opacity: 0;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Glow pulse effect */
  .animate-glow-pulse {
    animation: glow-pulse 2s ease-in-out infinite;
  }

  @keyframes glow-pulse {
    0%, 100% {
      box-shadow: 0 0 5px rgba(124, 58, 237, 0.3);
    }
    50% {
      box-shadow: 0 0 20px rgba(124, 58, 237, 0.6);
    }
  }
}

/* ============================================
   Light Theme Overrides
   These are placed outside @layer to override
   Tailwind utilities when .light class is present
   ============================================ */

/* Background color overrides */
.light .bg-gray-900 { background-color: #ffffff !important; }
.light .bg-gray-800 { background-color: #f9fafb !important; }
.light .bg-gray-950 { background-color: #ffffff !important; }
.light .bg-gray-950\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
.light .bg-gray-900\/40 { background-color: rgba(249, 250, 251, 0.9) !important; }
.light .bg-gray-900\/50 { background-color: rgba(249, 250, 251, 0.9) !important; }
.light .bg-gray-800\/50 { background-color: rgba(243, 244, 246, 0.8) !important; }
.light .bg-gray-800\/80 { background-color: rgba(243, 244, 246, 0.9) !important; }

/* Text color overrides */
.light .text-gray-100 { color: #1f2937 !important; }
.light .text-gray-200 { color: #374151 !important; }
.light .text-gray-300 { color: #4b5563 !important; }
.light .text-gray-400 { color: #6b7280 !important; }
.light .text-gray-500 { color: #9ca3af !important; }
.light .text-white { color: #111827 !important; }

/* Border color overrides */
.light .border-gray-700 { border-color: #d1d5db !important; }
.light .border-gray-700\/50 { border-color: rgba(209, 213, 219, 0.5) !important; }
.light .border-gray-800 { border-color: #e5e7eb !important; }
.light .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb !important; }

/* Card component */
.light .card {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Header */
.light header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e5e7eb !important;
}

/* Footer */
.light footer {
  background-color: #f9fafb !important;
  border-top-color: #e5e7eb !important;
}

/* Input fields */
.light input,
.light .input {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

.light input::placeholder {
  color: #9ca3af !important;
}

/* Hover states */
.light .hover\:bg-gray-800:hover { background-color: #f3f4f6 !important; }
.light .hover\:bg-gray-700:hover { background-color: #e5e7eb !important; }
.light .hover\:bg-gray-800\/50:hover { background-color: rgba(243, 244, 246, 0.8) !important; }
.light .hover\:text-white:hover { color: #111827 !important; }

/* Glassmorphism adjustments */
.light .backdrop-blur-xl {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Badge adjustments for light mode */
.light .badge-success {
  background-color: rgba(220, 252, 231, 0.8) !important;
  border-color: #86efac !important;
}

.light .badge-warning {
  background-color: rgba(254, 249, 195, 0.8) !important;
  border-color: #fde047 !important;
}

.light .badge-info {
  background-color: rgba(237, 233, 254, 0.8) !important;
  border-color: #c4b5fd !important;
}

/* Scrollbar for light mode */
.light .scrollbar-thin {
  scrollbar-color: #d1d5db transparent;
}

.light .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
}

/* Stats card glassmorphism adjustments */
.light .bg-gray-900\/90 { background-color: rgba(255, 255, 255, 0.95) !important; }
.light .bg-gray-900\/95 { background-color: rgba(255, 255, 255, 0.98) !important; }
.light .from-white\/5 { --tw-gradient-from: rgba(0, 0, 0, 0.03) !important; }
.light .to-white\/0 { --tw-gradient-to: rgba(0, 0, 0, 0) !important; }
.light .bg-white\/5 { background-color: rgba(0, 0, 0, 0.05) !important; }
.light .bg-white\/10 { background-color: rgba(0, 0, 0, 0.08) !important; }
.light .group:hover .group-hover\:bg-white\/10 { background-color: rgba(0, 0, 0, 0.1) !important; }

/* Stats card gradient border adjustments for light mode */
.light .from-synor-500\/20 { --tw-gradient-from: rgba(124, 58, 237, 0.15) !important; }
.light .to-blue-500\/20 { --tw-gradient-to: rgba(59, 130, 246, 0.15) !important; }
.light .from-green-500\/30 { --tw-gradient-from: rgba(34, 197, 94, 0.2) !important; }
.light .to-emerald-500\/20 { --tw-gradient-to: rgba(16, 185, 129, 0.15) !important; }
.light .from-synor-500\/30 { --tw-gradient-from: rgba(124, 58, 237, 0.2) !important; }
.light .to-violet-500\/20 { --tw-gradient-to: rgba(139, 92, 246, 0.15) !important; }
.light .from-blue-500\/30 { --tw-gradient-from: rgba(59, 130, 246, 0.2) !important; }
.light .to-cyan-500\/20 { --tw-gradient-to: rgba(6, 182, 212, 0.15) !important; }
.light .from-amber-500\/30 { --tw-gradient-from: rgba(245, 158, 11, 0.2) !important; }
.light .to-orange-500\/20 { --tw-gradient-to: rgba(249, 115, 22, 0.15) !important; }

/* Glow effect adjustments */
.light .from-synor-500\/10 { --tw-gradient-from: rgba(124, 58, 237, 0.08) !important; }
.light .to-blue-500\/10 { --tw-gradient-to: rgba(59, 130, 246, 0.08) !important; }

/* View toggle adjustments */
.light .bg-synor-600 { background-color: rgb(124, 58, 237) !important; }
.light .bg-synor-500\/20 { background-color: rgba(124, 58, 237, 0.15) !important; }
.light .bg-synor-900\/50 { background-color: rgba(237, 233, 254, 0.5) !important; }