@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* MedmentorIA Brand Colors */
    --background: 162 100% 96%;
    --foreground: 240 100% 9%;

    --card: 0 0% 100%;
    --card-foreground: 240 100% 9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 100% 9%;

    --primary: 237 100% 50%; /* #0029e3 - Strong blue for better contrast */
    --primary-foreground: 0 0% 100%;
    --primary-light: 162 100% 95%; /* #ebfff9 - Light mint for backgrounds */

    --secondary: 295 61% 72%; /* #e38be9 */
    --secondary-foreground: 240 100% 9%;

    --muted: 220 13% 91%;
    --muted-foreground: 220 9% 46%;

    --accent: 295 61% 72%; /* #e38be9 */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 162 100% 95%;

    --radius: 1.5rem;
    
    /* Glass morphism variables */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-backdrop: blur(20px);
  }

  .dark {
    /* Dark mode with MedmentorIA colors */
    --background: 240 100% 4%;
    --foreground: 0 0% 98%;

    --card: 240 100% 6%;
    --card-foreground: 0 0% 98%;

    --popover: 240 100% 6%;
    --popover-foreground: 0 0% 98%;

    --primary: 237 100% 60%; /* Brighter blue for dark mode */
    --primary-foreground: 0 0% 100%;
    --primary-light: 162 100% 85%; /* Lighter mint for dark mode */

    --secondary: 295 61% 82%; /* Lighter pink for dark mode */
    --secondary-foreground: 240 100% 4%;

    --muted: 240 6% 15%;
    --muted-foreground: 240 5% 65%;

    --accent: 295 61% 82%;
    --accent-foreground: 240 100% 4%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 6% 15%;
    --input: 240 6% 15%;
    --ring: 162 100% 85%;
    
    /* Dark glass morphism */
    --glass-bg: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-backdrop: blur(20px);
  }

  /* Suporte para usuários que preferem movimento reduzido */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', sans-serif;
  }

  /* Melhorias para hardware acceleration */
  .transform-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
}

@layer components {
  /* Custom Component Styles */
  .gradient-text {
    @apply bg-gradient-medmentor text-transparent bg-clip-text;
  }

  /* Rounded Corner Utilities */
  .rounded-card {
    @apply rounded-3xl;
  }
  
  .rounded-button {
    @apply rounded-2xl;
  }
  
  .rounded-badge {
    @apply rounded-full;
  }
  
  .rounded-container {
    @apply rounded-3xl;
  }
  
  .gradient-button {
    @apply bg-gradient-medmentor text-white hover:shadow-highlight transition-all duration-300 transform-gpu;
  }

  .title-spacing {
    letter-spacing: -0.03em;
  }

  .card-hover {
    @apply transition-all duration-300 hover:shadow-medium hover:-translate-y-1 transform-gpu;
  }

  .step-card {
    @apply bg-white rounded-2xl shadow-subtle p-6 relative overflow-hidden transform-gpu;
  }

  .step-number {
    @apply absolute text-8xl font-bold opacity-5 -top-4 -right-4 text-medmentor-blue;
  }

  /* Novas classes para efeitos visuais */
  .parallax {
    transform: translateZ(0);
    will-change: transform;
  }

  .glass-effect {
    backdrop-filter: var(--glass-backdrop);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 41, 227, 0.1);
  }

  .glass-card {
    backdrop-filter: blur(24px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
      0 8px 32px rgba(0, 41, 227, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .glass-intense {
    backdrop-filter: blur(40px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 20px 60px rgba(0, 41, 227, 0.2),
      0 4px 20px rgba(227, 139, 233, 0.1);
  }

  .glow-effect {
    box-shadow: 
      0 0 30px rgba(0, 41, 227, 0.4),
      0 0 60px rgba(227, 139, 233, 0.2);
  }

  .glow-blue {
    box-shadow: 0 0 40px rgba(0, 41, 227, 0.5);
  }

  .glow-pink {
    box-shadow: 0 0 40px rgba(227, 139, 233, 0.5);
  }

  .mesh-gradient {
    background: 
      radial-gradient(circle at 20% 80%, rgba(0, 41, 227, 0.8) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(227, 139, 233, 0.8) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(0, 41, 227, 0.3) 0%, transparent 50%);
  }

  .hover-lift {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 transform-gpu;
  }

  /* Estilos específicos para conteúdo de blog */
  .blog-content {
    line-height: 1.8;
    font-size: 18px;
  }

  .blog-content h1 {
    @apply text-4xl font-bold text-gray-900 mb-6 mt-8;
  }

  .blog-content h2 {
    @apply text-3xl font-bold text-gray-900 mb-4 mt-8;
  }

  .blog-content h3 {
    @apply text-2xl font-bold text-gray-900 mb-3 mt-6;
  }

  .blog-content h4 {
    @apply text-xl font-bold text-gray-900 mb-3 mt-4;
  }

  .blog-content h5 {
    @apply text-lg font-bold text-gray-900 mb-2 mt-4;
  }

  .blog-content h6 {
    @apply text-base font-bold text-gray-900 mb-2 mt-4;
  }

  .blog-content p {
    @apply text-gray-700 mb-4 leading-relaxed;
  }

  .blog-content ul,
  .blog-content ol {
    @apply text-gray-700 mb-4 pl-6;
  }

  .blog-content li {
    @apply mb-2;
  }

  .blog-content strong {
    @apply text-gray-900 font-bold;
  }

  .blog-content em {
    @apply italic;
  }

  .blog-content a {
    @apply text-blue-600 underline;
  }

  .blog-content a:hover {
    @apply text-blue-800;
  }

  .blog-content blockquote {
    @apply border-l-4 border-blue-500 pl-6 italic text-gray-600 mb-4;
  }

  .blog-content code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm;
  }

  .blog-content pre {
    @apply bg-gray-900 text-white p-4 rounded overflow-x-auto mb-4;
  }

  .blog-content pre code {
    @apply bg-transparent p-0 text-white;
  }

  .blog-content img {
    @apply rounded-lg shadow-md mb-4 max-w-full h-auto;
  }

  .blog-content table {
    @apply w-full border-collapse mb-4;
  }

  .blog-content th,
  .blog-content td {
    @apply border border-gray-300 px-4 py-2 text-left;
  }

  .blog-content th {
    @apply bg-gray-100 font-bold;
  }
}

/* Animações personalizadas para keyframes específicas */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(227, 139, 233, 0.4); }
  50% { box-shadow: 0 0 20px rgba(227, 139, 233, 0.8); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}