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

/* Custom Component Classes for ClassWizard */

@layer components {
  /* Custom Button Components */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-semibold text-base rounded-lg border-2 border-transparent transition-all duration-200 cursor-pointer min-h-[48px] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-primary text-white shadow-primary hover:bg-primary-800 hover:-translate-y-0.5 hover:shadow-lg;
  }
  
  .btn-secondary {
    @apply bg-transparent text-primary border-primary hover:bg-primary hover:text-white;
  }
  
  /* Badge Component */
  .badge {
    @apply inline-flex items-center px-3 py-2 text-xs font-medium text-primary bg-primary/10 rounded-full uppercase tracking-wide;
  }
  
  /* Feature Card Component */
  .feature-card {
    @apply bg-neutral-50 p-8 rounded-xl border border-neutral-100 text-center transition-all duration-200 hover:-translate-y-1 hover:shadow-large hover:bg-white group;
  }
  
  .feature-card-icon {
    @apply w-14 h-14 mx-auto mb-6 p-4 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3;
  }
  
  .feature-card-icon svg {
    @apply w-6 h-6;
  }
  
  /* Phone Mockup Components */
  .phone-frame {
    @apply relative w-[280px] h-[560px] bg-gradient-to-br from-neutral-800 to-neutral-700 rounded-[2.5rem] p-3 shadow-2xl transition-transform duration-300 hover:-translate-y-1 hover:rotate-y-1;
  }
  
  .phone-frame::before {
    @apply absolute top-3 left-1/2 transform -translate-x-1/2 w-[120px] h-5 bg-neutral-900 rounded-xl z-10;
    content: '';
  }
  
  .phone-screen {
    @apply w-full h-full bg-white rounded-2xl overflow-hidden relative;
  }
  
  .mockup-frame {
    @apply relative w-60 h-[480px] mx-auto bg-gradient-to-br from-neutral-700 to-neutral-600 rounded-2xl p-2 shadow-xl transition-transform duration-300 hover:-translate-y-1;
  }
  
  .mockup-frame::before {
    @apply absolute top-2 left-1/2 transform -translate-x-1/2 w-20 h-4 bg-neutral-900 rounded-lg z-10;
    content: '';
  }
  
  .mockup-screen {
    @apply w-full h-full bg-white rounded-xl overflow-hidden relative;
  }
  
  /* Store Button Component */
  .store-button {
    @apply flex items-center px-6 py-3 bg-neutral-900 text-white rounded-lg transition-all duration-200 shadow-medium hover:bg-neutral-800 hover:-translate-y-0.5 hover:shadow-lg min-w-[200px];
  }
  
  .store-button-icon {
    @apply w-6 h-6 mr-3 flex-shrink-0 fill-current;
  }
  
  /* Section Headers */
  .section-header {
    @apply text-center mb-16;
  }
  
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-neutral-900 mb-4 leading-tight;
  }
  
  .section-subtitle {
    @apply text-lg text-neutral-600 max-w-2xl mx-auto leading-relaxed;
  }
  
  /* Container */
  .container {
    @apply max-w-6xl mx-auto px-6 lg:px-8;
  }
  
  /* Header Styles */
  .header {
    @apply fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-soft z-50 transition-all duration-300;
  }
  
  .header.scrolled {
    @apply shadow-medium backdrop-blur-lg;
  }
  
  /* Navigation */
  .nav {
    @apply flex items-center justify-between h-20;
  }
  
  .nav-logo {
    @apply text-xl font-bold text-primary;
  }
  
  /* Hero Section */
  .hero {
    @apply pt-32 pb-24 bg-gradient-to-br from-neutral-10 to-white overflow-hidden;
  }
  
  .hero-content {
    @apply grid lg:grid-cols-2 gap-16 items-center;
  }
  
  .hero-title {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-neutral-900 mb-6;
  }
  
  .hero-title-accent {
    @apply text-primary block;
  }
  
  .hero-subtitle {
    @apply text-lg md:text-xl text-neutral-600 leading-relaxed mb-8;
  }
  
  .hero-cta {
    @apply flex flex-col sm:flex-row gap-4 mb-8 justify-center lg:justify-start;
  }
  
  .hero-badges {
    @apply flex gap-3 flex-wrap justify-center lg:justify-start;
  }
  
  /* Footer */
  .footer {
    @apply bg-neutral-900 text-neutral-300 pt-16 pb-8;
  }
  
  .footer-content {
    @apply grid lg:grid-cols-2 gap-12 items-start mb-8;
  }
  
  .footer-logo {
    @apply text-xl font-bold text-white mb-4;
  }
  
  .footer-tagline {
    @apply text-neutral-400 leading-relaxed;
  }
  
  .footer-links {
    @apply flex flex-col sm:flex-row gap-6 justify-center lg:justify-end;
  }
  
  .footer-link {
    @apply text-neutral-400 hover:text-white transition-colors duration-200;
  }
  
  .footer-bottom {
    @apply pt-8 border-t border-neutral-800 text-center;
  }
  
  .footer-copyright {
    @apply text-neutral-500 text-sm;
  }
}

@layer utilities {
  /* Custom utility classes */
  .text-gradient-primary {
    @apply bg-gradient-to-r from-primary to-primary-400 bg-clip-text text-transparent;
  }
  
  .text-gradient-secondary {
    @apply bg-gradient-to-r from-secondary to-secondary-400 bg-clip-text text-transparent;
  }
  
  .rotate-y-1 {
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  }
  
  .rotate-y-0 {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  }
  
  /* Animation utilities */
  .animate-delay-100 {
    animation-delay: 0.1s;
  }
  
  .animate-delay-200 {
    animation-delay: 0.2s;
  }
  
  .animate-delay-300 {
    animation-delay: 0.3s;
  }
  
  .animate-delay-400 {
    animation-delay: 0.4s;
  }
  
  .animate-delay-500 {
    animation-delay: 0.5s;
  }
  
  .animate-delay-600 {
    animation-delay: 0.6s;
  }
}

/* Base layer customizations */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-neutral-800 bg-white antialiased;
  }
  
  /* Focus styles for accessibility */
  *:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
  }
  
  /* Remove default button styles */
  button {
    @apply focus:outline-none;
  }
  
  /* Link styles */
  a {
    @apply transition-colors duration-200;
  }
  
  /* Smooth scrolling for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * {
      @apply !duration-[0.01ms] !transition-none;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
    
    html {
      scroll-behavior: auto;
    }
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .feature-card {
      @apply border-2 border-neutral-300;
    }
  }
  
  /* Keyboard navigation enhancement */
  .keyboard-navigation *:focus-visible {
    @apply ring-2 ring-primary ring-offset-2 !important;
  }
}