/* Dark mode CSS variables */
:root {
  --bg-primary: #f9fafb; /* gray-50 */
  --bg-secondary: #ffffff; /* white */
  --text-primary: #111827; /* gray-900 */
  --text-secondary: #374151; /* gray-700 */
  --text-tertiary: #6b7280; /* gray-500 */
  --border-color: #e5e7eb; /* gray-200 */
}

.dark {
  --bg-primary: #111827; /* gray-900 */
  --bg-secondary: #1f2937; /* gray-800 */
  --text-primary: #ffffff; /* white */
  --text-secondary: #d1d5db; /* gray-300 */
  --text-tertiary: #9ca3af; /* gray-400 */
  --border-color: #374151; /* gray-700 */
}

.dashboard-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.card {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.border-primary {
  border-color: var(--border-color);
}