:root {
  --color-bg: #18181b; /* bg-gray-900 */
  --color-bg-secondary: #27272a; /* bg-gray-800 */
  --color-border: #27272a; /* border-gray-800 */
  --color-text: #fff; /* text-white */
  --color-text-primary: #d1d5db;
  --color-text-secondary: #a1a1aa; /* text-gray-400 */
  --color-accent: #6366f1; /* indigo-500 */
  --color-accent-light: #818cf8; /* indigo-400 */
  --color-accent-bg: #f5f3ff; /* white/10, white/20, etc. */
  --color-ring: rgba(255, 255, 255, 0.1); /* white */
  --color-shadow: rgba(99, 102, 241, 0.05); /* shadow-indigo-500/5 */
  --color-gradient-from: #ff80b5;
  --color-gradient-to: #9089fc;
}
body,
.bg-gray-900 {
  background-color: var(--color-bg) !important;
}
.bg-gray-800 {
  background-color: var(--color-bg-secondary) !important;
}
.border-gray-800 {
  border-color: var(--color-border) !important;
}
.text-white {
  color: var(--color-text) !important;
}
.text-gray-300 {
  color: var(--color-text-primary) !important;
}
.text-gray-400 {
  color: var(--color-text-secondary) !important;
}
.text-indigo-400 {
  color: var(--color-accent-light) !important;
}
.text-indigo-500 {
  color: var(--color-accent) !important;
}
.bg-indigo-500 {
  background-color: var(--color-accent) !important;
}
.hover\:bg-indigo-400:hover {
  background-color: var(--color-accent-light) !important;
}
.ring-white\/10 {
  --tw-ring-color: var(--color-ring, rgba(255, 255, 255, 0.1)) !important;
}
.ring-white\/5 {
  --tw-ring-color: var(--color-ring, rgba(255, 255, 255, 0.05)) !important;
}
.bg-white\/10 {
  background-color: var(--color-ring, rgba(255, 255, 255, 0.1)) !important;
}
.bg-white\/5 {
  background-color: var(--color-ring, rgba(255, 255, 255, 0.05)) !important;
}
.hover\:bg-white\/20:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.focus-visible\:outline-indigo-500:focus-visible {
  outline-color: var(--color-accent) !important;
}
.focus-visible\:outline-white\/75:focus-visible {
  outline-color: rgba(255, 255, 255, 0.75) !important;
}
.shadow-indigo-500\/5 {
  box-shadow: 0 1px 2px 0 var(--color-shadow);
}
.from-\[\#ff80b5\] {
  --tw-gradient-from: var(--color-gradient-from);
}
.to-\[\#9089fc\] {
  --tw-gradient-to: var(--color-gradient-to);
}
.hover\:text-indigo-400:hover {
  color: var(--color-accent-light) !important;
}