:root {
  --color-bg-primary: #171419;
  --color-bg-secondary: #221f24;
  --color-gray-primary: #b3aeb8;
  --color-gray-secondary: #8a8792;
  --color-orange-accent: #cc5500;
  --color-teal-link: #00cccc;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-gray-primary);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-gray-secondary);
}

a {
  color: var(--color-teal-link);
  transition: color 0.2s ease;
  text-decoration: none;
}

a:hover {
}

.card, .bg-secondary {
  background-color: var(--color-bg-secondary);
  color: var(--color-gray-primary);
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  padding: 1rem;
  transition: background-color 0.3s ease;
}

.card:hover {
  background-color: #2e2a33;
  cursor: pointer;
}

/* Text utility overrides */
.text-gray-300 {
  color: var(--color-gray-primary) !important;
}

.text-gray-400 {
  color: var(--color-gray-secondary) !important;
}

.bg-gray-800 {
  background-color: var(--color-bg-secondary) !important;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--color-orange-accent);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}