@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #f3f4f6; /* light gray background */
  --foreground: #111827; /* dark text */
  --primary-color: #2563eb; /* blue-600 */
  --secondary-color: #10b981; /* emerald-500 */
  --accent-color: #f59e0b; /* amber-500 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111827; /* dark mode background */
    --foreground: #f9fafb; /* light text */
    --primary-color: #3b82f6; /* blue-500 */
    --secondary-color: #10b981; /* emerald-500 */
    --accent-color: #f59e0b; /* amber-500 */
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}