/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

/* Tailwind CSS Base Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS Variables for Primary Color */
:root {
  --color-primary: #B15FE5;
  --color-primary-50: #F5E8FF;
  --color-primary-100: #E9D1FF;
  --color-primary-200: #D4A3FF;
  --color-primary-300: #BE75FF;
  --color-primary-400: #B15FE5;
  --color-primary-500: #9333EA;
  --color-primary-600: #7C2D9E;
  --color-primary-700: #652752;
  --color-primary-800: #4E2106;
  --color-primary-900: #371B00;
}

/* Base Typography */
@layer base {
  body {
    font-family: 'Archivo', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
  }
}

/* Custom Component Classes */
@layer components {
  .btn-primary {
    @apply bg-primary hover:bg-primary-600 text-white font-heading font-semibold py-3 px-6 rounded-lg transition-colors duration-200;
  }
  
  .card {
    @apply bg-white p-6 rounded-lg shadow-md;
  }
  
  .heading-primary {
    @apply font-heading text-primary font-bold;
  }
  
  .text-body {
    @apply font-body text-gray-600 leading-relaxed;
  }

  /* Header specific styles */
  .header-nav-link {
    @apply font-heading font-medium transition-colors duration-200 relative;
  }

  .header-nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 1px;
  }

  .mobile-menu-slide {
    transition: all 0.3s ease-in-out;
    transform: translateY(-10px);
    opacity: 0;
  }

  .mobile-menu-slide.show {
    transform: translateY(0);
    opacity: 1;
  }


  /* Hide top header on very small screens */
  @media (max-width: 480px) {
    .top-header {
      display: none;
    }
  }

  /* Hero Banner Styles */
  .hero-badge {
    @apply inline-flex items-center bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium;
  }

  .hero-title {
    @apply font-heading text-4xl lg:text-5xl xl:text-6xl font-bold text-gray-900 leading-tight;
  }

  .hero-description {
    @apply font-body text-lg text-gray-600 leading-relaxed max-w-lg;
  }

  .customer-avatar {
    @apply w-10 h-10 rounded-full border-2 border-white flex items-center justify-center text-white text-sm font-semibold;
  }

  .stats-number {
    @apply font-heading text-2xl font-bold text-gray-900;
  }

  .stats-badge {
    @apply bg-primary text-white px-2 py-1 rounded text-sm font-semibold;
  }

  /* Floating animation for decorative elements */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  .floating-element {
    animation: float 3s ease-in-out infinite;
  }

  .floating-element:nth-child(2) {
    animation-delay: 1.5s;
  }

  /* Appointment Form Styles */
  .appointment-form-card {
    @apply bg-white rounded-2xl shadow-xl border border-purple-200 p-6 lg:p-8;
  }

  .form-field {
    @apply space-y-2;
  }

  .form-label {
    @apply flex items-center text-gray-700 font-medium text-sm;
  }

  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 text-gray-700 placeholder-gray-400;
  }

  .form-button {
    @apply w-full bg-primary hover:bg-primary-600 text-white font-heading font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:ring-4 focus:ring-purple-200 focus:outline-none flex items-center justify-center;
  }

  .form-icon {
    @apply w-5 h-5 text-purple-500 mr-2;
  }

  /* Form responsive adjustments */
  @media (max-width: 768px) {
    .appointment-form-card {
      @apply p-4;
    }
    
    .form-input {
      @apply py-4;
    }
  }
}

/* Custom Utilities */
@layer utilities {
  .text-primary {
    color: var(--color-primary);
  }
  
  .bg-primary {
    background-color: var(--color-primary);
  }
  
  .border-primary {
    border-color: var(--color-primary);
  }
  
  .font-heading {
    font-family: 'Manrope', sans-serif;
  }
  
  .font-body {
    font-family: 'Archivo', sans-serif;
  }
}