/* Porn AI Tools - Orange/Dark Utility Grid Theme */
:root {
  --color-primary: #ea580c;
  --color-primary-hover: #c2410c;
  --color-accent: #1f2937;
  --color-accent-hover: #111827;
  --color-gradient-from: #ea580c;
  --color-gradient-to: #c2410c;
  --color-accent-gradient-from: #1f2937;
  --color-accent-gradient-to: #111827;
  
  /* Legacy colors for backwards compatibility */
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;
  
  --accent-50: #f9fafb;
  --accent-100: #f3f4f6;
  --accent-800: #1f2937;
  --accent-900: #111827;
  
  --font-family-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Utility grid layout */
.utility-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
}

.grid-card {
  @apply border border-orange-600/30 bg-gradient-to-br from-gray-800/80 to-gray-900/90 backdrop-blur-sm;
  box-shadow: 0 4px 20px rgba(31, 41, 55, 0.4);
  transition: all 0.2s ease;
}

.grid-card:hover {
  @apply border-orange-500/60;
  box-shadow: 0 8px 30px rgba(234, 88, 12, 0.3);
  transform: translateY(-1px);
}

/* Compact styling */
.compact-header {
  @apply py-4 px-6 bg-gray-900/90;
  backdrop-filter: blur(10px);
}

.compact-card {
  @apply p-4 space-y-3;
  min-height: 200px;
}

.compact-info {
  @apply text-sm space-y-2;
}

/* Technical tone */
.technical-label {
  @apply text-orange-400 font-mono text-xs uppercase tracking-wide font-semibold;
}

.technical-value {
  @apply text-gray-300 font-mono text-sm;
}

.spec-grid {
  @apply grid grid-cols-2 gap-2 text-xs;
}

/* Tool category badges */
.category-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(194, 65, 12, 0.3));
  border: 1px solid rgba(234, 88, 12, 0.4);
  color: #fed7aa;
}

/* Orange accent elements */
.orange-accent {
  @apply text-orange-400;
}

.orange-glow {
  box-shadow: 0 0 20px rgba(234, 88, 12, 0.3);
}

/* Status indicators */
.status-indicator {
  @apply w-2 h-2 rounded-full;
}

.status-active {
  @apply bg-green-400;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.status-inactive {
  @apply bg-gray-500;
}

.status-beta {
  @apply bg-orange-400;
  box-shadow: 0 0 8px rgba(234, 88, 12, 0.6);
}

/* Compact score display */
.score-technical {
  @apply font-mono text-orange-400 text-xl font-bold;
}

.progress-bar-technical {
  @apply bg-gray-700 rounded-full h-2;
}

.progress-fill-technical {
  @apply bg-gradient-to-r from-orange-500 to-orange-400 rounded-full h-full;
  transition: width 0.3s ease;
}

/* Tool icons */
.tool-icon {
  @apply w-8 h-8 p-1 rounded-lg bg-orange-600/20 text-orange-400;
}

/* Directory-style layout */
.directory-header {
  @apply flex items-center justify-between py-2 px-4 bg-gray-800/50 border-b border-orange-600/20;
}

.directory-item {
  @apply flex items-center justify-between py-3 px-4 border-b border-gray-700/50 hover:bg-gray-800/30;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
  .utility-grid {
    @apply grid-cols-1 gap-3;
  }
  
  .compact-card {
    @apply p-3;
    min-height: 150px;
  }
}