/* tailwind.css */

/* Custom Root Variables based on tailwind.config.js */
:root {
  /* Custom Colors from tailwind.config.js */
  --primary-color: #3490dc; /* Adjust with your actual primary color */
  --secondary-color: #ffed4a; /* Adjust with your actual secondary color */

  /* Custom Font-Family from tailwind.config.js */
  --font-sans: 'Helvetica', 'Arial', sans-serif; /* Adjust with your actual font-family */
}

/* Importing Tailwind Base Styles */
@tailwind base;

/* Importing Tailwind Component Styles */
@tailwind components;

/* Importing Tailwind Utility Styles */
@tailwind utilities;

/* Custom Styling (Extended from Tailwind) */

/* Custom Components */
@layer components {
  /* Custom Button using Tailwind's @apply directive */
  .custom-button {
    @apply bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg;
  }

  /* Custom Card Component Example */
  .custom-card {
    @apply bg-white shadow-lg rounded-lg p-4;
  }

  /* Custom Navbar Example */
  .custom-navbar {
    @apply bg-[var(--primary-color)] text-white p-4;
  }
}

/* Custom Utilities */
@layer utilities {
  /* Custom utility class for text-shadow */
  .text-shadow {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }

  /* Custom utility class for background gradients */
  .gradient-bg {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  }
}

/* Custom Animations Example */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in 1s ease-in;
}

/* Custom Breakpoints Based on tailwind.config.js */
@media (max-width: 640px) {
  /* Mobile-first custom styling */
  .custom-button {
    @apply px-2 py-1; /* Adjust padding for smaller screens */
  }
}

/* Additional Custom Styles (if needed) */
body {
  font-family: var(--font-sans);
}

h1, h2, h3 {
  font-weight: 700;
}