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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 213 94% 24%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 45 100% 51%;
    --accent-foreground: 222.2 47.4% 11.2%;
    
    --success: 142 76% 36%;
    --success-foreground: 210 40% 98%;
    
    --premium: 271 100% 50%;
    --premium-foreground: 210 40% 98%;

    /* Gradients - Modern and elegant */
    --gradient-hero: linear-gradient(135deg, hsl(213 94% 24%) 0%, hsl(240 100% 27%) 50%, hsl(262 83% 58%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(45 100% 51%) 0%, hsl(43 100% 58%) 100%);
    --gradient-premium: linear-gradient(135deg, hsl(271 100% 50%) 0%, hsl(262 83% 58%) 100%);
    --gradient-elegant: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(210 40% 98%) 50%, hsl(220 13% 95%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(210 40% 99%) 100%);
    --gradient-surface: linear-gradient(to bottom right, hsl(0 0% 100% / 0.8), hsl(210 40% 98% / 0.6));
    
    /* Shadows - Enhanced depth */
    --shadow-elegant: 0 25px 50px -12px hsl(213 94% 24% / 0.15);
    --shadow-glow: 0 0 50px hsl(45 100% 51% / 0.3);
    --shadow-card: 0 10px 25px -5px hsl(0 0% 0% / 0.1);
    --shadow-card-hover: 0 25px 50px -12px hsl(0 0% 0% / 0.15);
    
    /* Animation - Optimized to prevent forced reflows */
    --transition-smooth: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Course colors */
    /* Arte - Rosa */
    --course-arte-primary: 327 73% 64%;
    --course-arte-foreground: 0 0% 100%;
    --course-arte-secondary: 327 73% 85%;
    
    /* Filosofia - Laranja */
    --course-filosofia-primary: 25 100% 50%;
    --course-filosofia-foreground: 0 0% 100%;
    --course-filosofia-secondary: 25 100% 70%;
    
    /* Psicologia Jurídica - Preto */
    --course-psicologia-primary: 0 0% 9%;
    --course-psicologia-foreground: 0 0% 100%;
    --course-psicologia-secondary: 0 0% 20%;
    
    /* Ciências da Religião - Branco */
    --course-religiao-primary: 0 0% 100%;
    --course-religiao-foreground: 0 0% 9%;
    --course-religiao-secondary: 0 0% 95%;
    
    /* Mitologia Comparada - Azul */
    --course-mitologia-primary: 220 80% 50%;
    --course-mitologia-foreground: 0 0% 100%;
    --course-mitologia-secondary: 220 80% 70%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
  
  /* Accessibility improvements */
  *:focus {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
  }
  
  /* Skip link for screen readers */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
  }
  
  .skip-link:focus {
    top: 6px;
  }
  
  /* Enhanced focus indicators */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 3px solid hsl(var(--primary));
    outline-offset: 2px;
    box-shadow: 0 0 0 6px hsl(var(--primary) / 0.15);
  }
  
  /* Keyboard navigation improvements */
  [tabindex="0"]:focus-visible,
  [tabindex="-1"]:focus-visible {
    outline: 3px solid hsl(var(--accent));
    outline-offset: 2px;
    box-shadow: 0 0 0 6px hsl(var(--accent) / 0.15);
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :root {
      --muted-foreground: 0 0% 15%;
      --border: 0 0% 20%;
      --card: 0 0% 98%;
      --accent: 0 0% 5%;
    }
    
    /* Ensure sufficient contrast for buttons */
    button,
    .cta-primary,
    .cta-course-religiao,
    .cta-course-arte,
    .cta-course-filosofia,
    .cta-course-psicologia {
      border: 2px solid;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* Custom utility classes */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Glass morphism utilities */
  .glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .glass-card-strong {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  /* Spacing utilities - Consistent section spacing */
  .section-padding {
    @apply py-16 md:py-20 lg:py-24;
  }
  
  .section-padding-sm {
    @apply py-8 md:py-12 lg:py-16;
  }
  
  .container-padding {
    @apply px-4 md:px-6 lg:px-8;
  }
  
  /* Typography hierarchy */
  .heading-xl {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight;
  }
  
  .heading-lg {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight;
  }
  
  .heading-md {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
  }
  
  .heading-sm {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight;
  }
  
  .heading-xs {
    @apply text-lg md:text-xl font-semibold tracking-tight;
  }
  
  /* CTA Button standardization */
  .cta-primary {
    @apply bg-gradient-to-r from-primary to-primary/90 text-primary-foreground hover:from-primary/90 hover:to-primary/80 
           shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold;
  }
  
  .cta-course-religiao {
    @apply bg-course-religiao text-course-religiao-foreground hover:bg-course-religiao/90 
           shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold;
  }
  
  .cta-course-arte {
    @apply bg-course-arte text-course-arte-foreground hover:bg-course-arte/90 
           shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold;
  }
  
  .cta-course-filosofia {
    @apply bg-course-filosofia text-course-filosofia-foreground hover:bg-course-filosofia/90 
           shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold;
  }
  
  .cta-course-psicologia {
    @apply bg-course-psicologia text-course-psicologia-foreground hover:bg-course-psicologia/90 
           shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold;
  }
  
  .cta-course-mitologia {
    @apply bg-course-mitologia text-course-mitologia-foreground hover:bg-course-mitologia/90 
           shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold;
  }
  
  /* Interactive elements - Optimized to prevent forced reflows */
  .interactive-element {
    @apply transition-transform duration-300 hover:scale-105 hover:shadow-lg focus:scale-105 focus:shadow-lg;
  }
  
  /* WhatsApp button slow bounce animation */
  @keyframes bounce-slow {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  
  .animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
  }
  
  .animate-bounce-slow:hover {
    animation: none;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.8);
}

/* Fix for Lovable badge accessibility - ensure touch targets meet minimum size requirements */
#lovable-badge-close {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  position: absolute !important;
  top: -2px !important;
  right: 5px !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
}