:root {
  /* Primary color and variations */
  --primary-color: #3b82f6; /* Blue 500 from Tailwind */
  --primary-color-dark: #2563eb; /* Blue 600 from Tailwind */
  --primary-color-light: #60a5fa; /* Blue 400 from Tailwind */
  
  /* Text colors on primary background */
  --primary-text: black;
  
  /* Background colors */
  --bg-dark: #111827; /* Gray 900 from Tailwind */
  --bg-medium: #1f2937; /* Gray 800 from Tailwind */
  
  /* Accent colors if needed */
  --accent-color: #f59e0b; /* Amber 500 from Tailwind */
}

/* Apply color scheme to button effects */
.btn-effect:hover {
  box-shadow: 0px 0px 15px rgba(59, 130, 246, 0.7) !important; /* Using primary color with opacity */
}

/* Utility classes to use variables */
.bg-primary {
  background-color: var(--primary-color) !important;
}

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

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

.hover\:bg-primary-dark:hover {
  background-color: var(--primary-color-dark) !important;
}

.hover\:text-primary-light:hover {
  color: var(--primary-color-light) !important;
}

/* Navigation styles */
.nav-link {
  color: var(--primary-color);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background 0.2s ease-in-out;
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.nav-link:hover {
  color: var(--primary-color-light);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.1);
}

.active-nav {
  color: white;
  background-color: var(--primary-color);
  font-weight: bold;
}

.active-nav:hover {
  color: white;
  background-color: var(--primary-color) !important;
  transform: none !important;
  box-shadow: none !important;
}