@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Poppins:wght@400;500;700;900&display=swap');

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

/* KIDZ N KITCHEN - Main Stylesheet
  Theme Colors:
  - Red: #EF4444
  - Orange: #F97316
  - Yellow: #FBBF24
  - Royal Blue: #3B82F6
*/

@layer base {
    body {
        font-family: 'Poppins', sans-serif; /* New font for better readability */
        @apply bg-yellow-50 text-gray-800 antialiased; /* Light yellow background & smooth fonts */
    }

    h1,h2,h3,h4,h5 {
      font-family: 'Luckiest Guy', cursive; /* New fun, bold font for headings */
      @apply tracking-wide; /* Add a little space between letters */
    }

    /* Defining the colors directly in the config is best, but this works for a single file setup */
    .text-brand-red { color: #EF4444; }
    .text-brand-orange { color: #F97316; }
    .text-brand-yellow { color: #FBBF24; }
    .text-brand-blue { color: #3B82F6; }

    .bg-brand-red { background-color: #EF4444; }
    .bg-brand-orange { background-color: #F97316; }
    .bg-brand-yellow { background-color: #FBBF24; }
    .bg-brand-blue { background-color: #3B82F6; }
}

@layer components {
    /* Main container card for forms and content sections */
    .card {
        @apply bg-white p-6 md:p-8 rounded-3xl shadow-lg border-2 border-gray-100;
    }

    /* Button styles */
    .btn {
        @apply inline-block font-bold text-lg py-3 px-8 rounded-xl shadow-md 
               transform hover:-translate-y-1 transition-all duration-300 ease-in-out
               focus:outline-none focus:ring-4;
    }

    .btn-blue {
        @apply bg-[#3B82F6] text-white hover:bg-blue-700 focus:ring-blue-200;
    }

    .btn-orange {
        @apply bg-[#F97316] text-white hover:bg-orange-600 focus:ring-orange-200;
    }

    .btn-red {
        @apply bg-[#EF4444] text-white hover:bg-red-700 focus:ring-red-200;
    }

    /* Form field styles for a standout look */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select {
        @apply appearance-none w-full px-5 py-3.5 
               text-lg text-gray-800
               bg-gray-50 
               border-2 border-gray-200 rounded-xl 
               shadow-inner /* Subtle inner shadow */
               placeholder-gray-400
               transition-all duration-300 ease-in-out
               focus:outline-none focus:bg-white focus:ring-4 focus:ring-amber-300 focus:border-[#3B82F6];
    }
}