@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

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

:root {
  --forge-yellow: #FFC407;
  --forge-black: #000000;
  --forge-dark: #111111;
  --forge-gray: #1a1a1a;
  --forge-gray-light: #2a2a2a;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--forge-black);
  color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--forge-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--forge-gray-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--forge-yellow);
}

/* Custom button styles */
.btn-primary {
  @apply bg-forge-yellow text-black font-semibold px-6 py-3 rounded-lg hover:bg-yellow-400 transition-all duration-200;
}

.btn-secondary {
  @apply bg-forge-gray-light text-white font-medium px-6 py-3 rounded-lg hover:bg-forge-gray transition-all duration-200 border border-gray-700;
}

/* Module card styling */
.module-card {
  @apply bg-forge-gray rounded-xl p-6 border border-gray-800 hover:border-forge-yellow transition-all duration-300 cursor-pointer;
}

.module-card:hover {
  box-shadow: 0 0 20px rgba(255, 196, 7, 0.15);
}

/* Input styling */
.input-field {
  @apply w-full bg-forge-dark border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-forge-yellow transition-colors;
}

/* Dropdown styling */
.select-field {
  @apply w-full bg-forge-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-forge-yellow transition-colors cursor-pointer;
}

/* File upload zone */
.upload-zone {
  @apply border-2 border-dashed border-gray-600 rounded-xl p-8 text-center hover:border-forge-yellow transition-colors cursor-pointer;
}

.upload-zone.active {
  @apply border-forge-yellow bg-forge-yellow/5;
}

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

.progress-bar-fill {
  @apply h-full bg-forge-yellow transition-all duration-300;
}

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full border-2 border-gray-600 border-t-forge-yellow;
}

/* Status badges */
.badge {
  @apply px-3 py-1 rounded-full text-sm font-medium;
}

.badge-pending {
  @apply bg-gray-700 text-gray-300;
}

.badge-processing {
  @apply bg-blue-900/50 text-blue-400;
}

.badge-completed {
  @apply bg-green-900/50 text-green-400;
}

.badge-failed {
  @apply bg-red-900/50 text-red-400;
}

/* Drag-and-drop from carousel */
[data-file-drop-zone].drag-over {
  @apply border-forge-yellow bg-forge-yellow/10 scale-105;
  box-shadow: 0 0 30px rgba(255, 196, 7, 0.3);
}

[data-file-drop-zone] {
  @apply transition-all duration-200;
}