/* Custom color variables for easy theming */
:root {
  --primary-bg: #1e40af; /* bg-blue-900 */
  --secondary-bg: #f3f4f6; /* bg-gray-200 */
  --accent-bg: #1f2937; /* bg-gray-800 */
  --text-primary: #1f2937; /* text-gray-800 */
  --text-secondary: #4b5563; /* text-gray-600 */
  --text-accent: #3b82f6; /* text-blue-700 */
  --bg-white: #ffffff;
  --bg-light: #f3f4f6; /* bg-gray-100 */
  --hover-bg: #e5e7eb; /* hover:bg-gray-200 */
}

/* Custom classes to replace Tailwind colors */
.bg-primary { background-color: var(--primary-bg); }
.bg-secondary { background-color: var(--secondary-bg); }
.bg-accent { background-color: var(--accent-bg); }
.bg-white-custom { background-color: var(--bg-white); }
.bg-light { background-color: var(--bg-light); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--text-accent); }
.hover-text-accent:hover { color: var(--text-accent); }
.hover-bg-light:hover { background-color: var(--hover-bg); }

/* New class for hero background image */
.hero-bg {
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80'); /* Free image from Unsplash */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}