@source "../components";

@layer components {
  /**
   * Convención: .brand-[surface/text]-[escala]-[dirección]
   * Requiere dark mode activo en Tailwind (class o media).
   */

  /* Fondo suave diagonal */
  .brand-surface-50-br {
    @apply bg-gradient-to-br from-blue-50 via-violet-50 to-purple-50
           dark:from-blue-950 dark:via-violet-950 dark:to-purple-950;
  }

  .brand-surface-100-br {
    @apply bg-gradient-to-br from-blue-100 via-violet-100 to-purple-100
           dark:from-blue-900 dark:via-violet-900 dark:to-purple-900;
  }

  /* Fondo suave horizontal */
  .brand-surface-50-x {
    @apply bg-gradient-to-r from-blue-50 to-violet-50
     hover:from-blue-50 hover:to-violet-50
           dark:from-blue-900 dark:to-violet-900;
  }

  .brand-surface-100-x {
    @apply bg-gradient-to-r from-blue-100 to-violet-100
     hover:from-blue-100 hover:to-violet-100
           dark:from-blue-900 dark:to-violet-900;
  }

  .brand-surface-200-x {
    @apply bg-gradient-to-r from-blue-200 to-violet-200
           dark:from-blue-800 dark:to-violet-800;
  }

  /* Gradiente para texto (intenso) */
  .brand-text-strong-x {
    @apply bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent antialiased
           dark:from-blue-400 dark:to-violet-400;
  }
}