/* Base dark theme and layout system from original design */
:root {
  --bg-black: #000000;
  --text-gray-100: #f3f4f6;
  --text-gray-300: #d1d5db;
  --text-gray-400: #9ca3af;
  --purple-400: #c084fc;
  --purple-700: #7e22ce;
  --purple-900: #581c87;
  --red-400: #f87171;
  --red-900: #7f1d1d;
}

body {
  background-color: var(--bg-black);
  color: var(--text-gray-300);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Grid & Layout System mirroring Tailwind responsiveness */
.grid { display: grid; gap: 2rem; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.text-gradient {
  background: linear-gradient(to right, var(--red-400), var(--purple-400));
  -webkit-background-clip: text;
  color: transparent;
}

/* Grid & Layout System mirroring Tailwind responsiveness */
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.gap-10 { gap: 2.5rem; }
.hover\:text-red-400:hover { color: #f87171; }
.hover\:text-blue-400:hover { color: #60a5fa; }
.hover\:text-gray-400:hover { color: #9ca3af; }
.mr-4 { margin-right: 1rem; }
.flex-row { flex-direction: row; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.border-gray-800 { border-color: #1f2937; }

/* SUGGESTED EDIT START */
.transition-colors { transition: color 0.3s; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.border-gray-800 { border-color: #1f2937; }
.mb-2 { margin-bottom: 0.5rem; }
.py-12 { padding: 3rem 0; }
/* SUGGESTED EDIT END */