@import "tailwindcss";

:root {
  --background: #0a0a0a;
  --foreground: #ededed;
  --primary: #dc2626;
  --primary-hover: #b91c1c;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.1);
  --muted: #6b7280;
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.btn-primary {
  @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-2xl transition-all duration-200 active:scale-95;
}

.btn-secondary {
  @apply bg-white/10 hover:bg-white/20 text-white font-semibold py-3 px-6 rounded-2xl border border-white/20 transition-all duration-200 active:scale-95;
}

.btn-danger {
  @apply bg-red-600/80 hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-2xl transition-all duration-200 active:scale-95;
}

.input-field {
  @apply w-full bg-black/50 border border-white/20 rounded-2xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-all;
}

.card {
  @apply backdrop-blur-xl bg-white/5 border border-white/10 rounded-3xl p-6;
}

.card-highlight {
  @apply backdrop-blur-xl bg-white/5 border border-red-500/50 rounded-3xl p-6;
}

.label {
  @apply block text-sm font-medium text-gray-300 mb-2;
}

.glass-header {
  @apply backdrop-blur-xl bg-black/50 border-b border-white/10;
}

.glass-menu {
  @apply backdrop-blur-xl bg-black/80 border border-white/10 rounded-2xl shadow-2xl;
}

.tab-button {
  @apply px-4 py-2 rounded-2xl font-medium whitespace-nowrap transition-all;
}

.tab-button-active {
  @apply bg-red-600 text-white;
}

.tab-button-inactive {
  @apply bg-white/5 text-gray-300 hover:bg-white/10 border border-white/10;
}