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

/*--------------------------------------------------------------
  1. Base styles
--------------------------------------------------------------*/
@layer base {
  html { scroll-behavior: smooth; }
  body {
    @apply font-sans bg-background text-foreground dark:bg-gray-900 dark:text-white;
  }
}

/*--------------------------------------------------------------
  2. Custom Components
--------------------------------------------------------------*/
@layer components {
  /* Card wrapper for futsal content */
  .futsal-card {
    @apply bg-white dark:bg-gray-800 text-foreground dark:text-white p-6 rounded-2xl shadow-lg mb-6;
  }

  /* Styled navigation buttons */
  nav .nav-container a {
    @apply inline-block px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium transition-colors duration-200;
  }
  nav .nav-container a:hover {
    @apply bg-secondary;
  }

  /* Footer links underline on hover */
  .footer-link {
    @apply underline hover:text-primary;
  }
}

/*--------------------------------------------------------------
  3. Custom Utilities
--------------------------------------------------------------*/
@layer utilities {
  /* Center container with responsive padding */
  .futsal-container {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Text balance utility */
  .text-balance {
    text-wrap: balance;
  }
}