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

/* Variables CSS críticas */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 210 20% 12%;
    --primary: 174 50% 22%;
    --primary-foreground: 0 0% 100%;
    --secondary: 205 60% 18%;
    --secondary-foreground: 0 0% 100%;
    --card: 0 0% 100%;
    --card-foreground: 210 20% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 20% 12%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 40%;
    --accent: 174 74% 75%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 55%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 85%;
    --input: 214.3 31.8% 85%;
    --ring: 174 50% 22%;
    --radius: 0.6rem;
    
    /* Nuevos colores vibrantes */
    --turquoise-glow: 174 80% 45%;
    --gold-accent: 45 93% 47%;
    --coral-accent: 16 100% 66%;
    --gradient-start: 174 50% 22%;
    --gradient-end: 205 60% 25%;
  }

  .dark {
    --background: 210 20% 15%;
    --foreground: 0 0% 95%;
    --card: 210 25% 12%;
    --card-foreground: 0 0% 95%;
    --popover: 210 25% 12%;
    --popover-foreground: 0 0% 95%;
    --primary: 174 50% 22%;
    --primary-foreground: 0 0% 95%;
    --secondary: 205 60% 18%;
    --secondary-foreground: 0 0% 95%;
    --muted: 210 30% 20%;
    --muted-foreground: 215 20.2% 75%;
    --accent: 174 74% 25%;
    --accent-foreground: 0 0% 95%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 95%;
    --border: 210 30% 25%;
    --input: 210 30% 25%;
    --ring: 174 50% 22%;
  }

  * {
    @apply border-border;
  }
  
  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-background text-foreground font-sans;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Tipografía optimizada */
  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold;
  }

  h2 {
    @apply text-3xl md:text-4xl font-bold;
  }

  h3 {
    @apply text-2xl md:text-3xl font-semibold;
  }

  h4 {
    @apply text-xl md:text-2xl font-semibold;
  }

  p {
    @apply leading-relaxed;
  }
}

/* Componentes críticos */
@layer components {
  .btn-primary {
    @apply bg-certicai-turquesa text-white hover:bg-certicai-turquesaOscuro transition-all duration-300 font-medium rounded-lg px-6 py-3 inline-flex items-center justify-center shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-certicai-turquesa focus:ring-opacity-50 text-base font-semibold;
  }

  .btn-secondary {
    @apply bg-white text-certicai-azul border border-certicai-azul hover:bg-certicai-azul hover:text-white transition-all duration-300 font-medium rounded-lg px-6 py-3 inline-flex items-center justify-center text-base;
  }

  .btn-outline {
    @apply bg-transparent text-certicai-turquesa border border-certicai-turquesa hover:bg-certicai-turquesa hover:text-white transition-all duration-300 font-medium rounded-lg px-6 py-3 inline-flex items-center justify-center text-base;
  }

  .card-hover {
    @apply transition-all duration-300 hover:shadow-hover transform hover:-translate-y-1;
    will-change: transform, box-shadow;
  }
  
  .card-hover:not(:hover) {
    will-change: auto;
  }

  .section-padding {
    @apply py-16 md:py-24;
  }

  .glass-effect {
    @apply bg-white bg-opacity-80 backdrop-blur-md;
  }

  /* Animaciones de scroll - optimizadas para GPU */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.13, 0.71, 0.37, 0.88), transform 0.8s cubic-bezier(0.13, 0.71, 0.37, 0.88);
    will-change: opacity, transform;
  }

  .reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  .reveal-delay-100 {
    transition-delay: 100ms;
  }

  .reveal-delay-200 {
    transition-delay: 200ms;
  }

  .reveal-delay-300 {
    transition-delay: 300ms;
  }

  .reveal-delay-400 {
    transition-delay: 400ms;
  }
}

/* Estilos específicos cargados dinámicamente:
   - Editor (ProseMirror): src/styles/editor.css
   - Blog (Prose): src/styles/blog.css
   - Conversion (Pricing/Sales): src/styles/conversion.css
*/